/* The redesign (Oct 2026): the pages built by tools/site/build.mjs. Home,
   Solutions, Technology, Methodology, Industries, Use Cases, Research,
   About and Contact. Loaded after styles.css and home.css, and scoped to
   body.rd-page. Every color is a site token from styles.css.

   Emerald is text only on navy. On cream and white, words are navy and the
   emerald stays a mark beside them: a bar before a label, a thick underline
   under a link (the rule in styles.css). */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------ type and links */

.rd-page .rd-hero{align-items:flex-start;padding-top:calc(var(--nav-h) + 56px)}
.rd-page .rd-h1{
  font-family:"Manrope",system-ui,sans-serif;font-weight:600;
  font-size:clamp(34px,4.6vw,64px);line-height:1.08;letter-spacing:-.02em;
  margin:0;max-width:22ch;text-wrap:balance;
}
.rd-page .rd-h1 .h-accent{font-weight:700}
.rd-page .rd-h1--display{font-size:clamp(38px,5.6vw,80px);max-width:none}
.rd-page .panel--cream .rd-h1 .h-accent{color:var(--on-cream)}
.rd-page .rd-lede{max-width:60ch}
.rd-page .rd-h2{
  font-family:"Manrope",system-ui,sans-serif;font-weight:700;
  font-size:clamp(22px,2.2vw,30px);line-height:1.2;margin:0;text-wrap:balance;
}
.rd-page .rd-hero .rd-h2{margin-top:clamp(48px,6vw,80px)}
.rd-page .rd-h3{
  font-family:"Manrope",system-ui,sans-serif;font-weight:700;
  font-size:18px;line-height:1.3;margin:0;
}
.rd-page .rd-sub{margin-top:34px}
.rd-page .h-section + *{margin-top:36px}

.rd-link{
  font-weight:700;text-decoration:none;color:var(--emerald);
  border-bottom:2px solid transparent;
}
.rd-link:hover{border-bottom-color:var(--emerald)}
.panel--cream .rd-link,.rd-card--light .rd-link{
  color:var(--on-cream);border-bottom-color:var(--emerald);
}
.rd-link:focus-visible,.rd-card:focus-visible,.rd-steps:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.rd-more{margin:28px 0 0}

/* every chart's line, directly under it */
.rd-sim{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--panel-muted)}

/* ------------------------------------------------------------ cards */

.rd-card{
  display:block;position:relative;text-decoration:none;color:inherit;
  background:var(--panel-card);border:1px solid var(--panel-line);
  border-radius:var(--r-card);padding:24px;
  transition:border-color .2s ease;
}
a.rd-card:hover{border-color:var(--emerald)}
.rd-card h3{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.3;margin:0}
.rd-card p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--panel-muted)}
.rd-icon{width:26px;height:26px;color:var(--emerald);flex:none}
.panel--cream .rd-icon{color:var(--on-cream)}

/* ------------------------------------------------------------- home */

/* "Know what your AI is doing." at weight 600 needs 11.9 times the font
   size in width, so 7.6cqw keeps each line whole in the hero column */
.home-page .rd-home-hero{--h-size:clamp(2.6rem,7.6cqw,6.25rem)}
.rd-home-hero .hero-h .h-l1{font-weight:600}
.rd-home-hero .hero-h .h-accent{display:block}
.rd-home-hero .hero-row{grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:start}

/* the chart card beside the hero text */
.rd-chartcard{
  position:relative;z-index:3;
  background:var(--card-navy);border:1px solid var(--line-navy);border-radius:var(--r-card);
  padding:20px 22px 18px;min-width:0;
}
.rd-chartcard-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline}
.rd-chartcard-title{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:17px;color:var(--on-navy)}
.rd-chartcard-label{font-size:12.5px;color:var(--muted-navy)}
.rd-chartcard-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,30%);gap:22px;margin-top:14px;align-items:center}
.rd-big-num{font-family:var(--mono);font-weight:600;font-size:clamp(26px,2.4vw,36px);line-height:1.1;color:var(--on-navy);white-space:nowrap}
.rd-big-after{color:var(--red-on-navy)}
.rd-big-arrow{color:var(--muted-navy);font-weight:400}
.rd-big-text{margin:10px 0 14px;font-size:14px;line-height:1.5;color:var(--muted-navy)}
.rd-big .rd-link{font-size:14.5px}

/* the six steps along the bottom of the hero, all one link */
.rd-steps{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  margin-top:clamp(40px,5vw,64px);padding:22px 0 0;
  border-top:1px solid var(--line-navy);text-decoration:none;
}
.rd-step{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy)}
.rd-step .rd-icon{width:34px;height:34px;padding:7px;border:1px solid var(--line-navy);border-radius:50%;box-sizing:content-box}
.rd-steps:hover .rd-icon{border-color:var(--emerald)}
.rd-step-note{margin-top:-2px;max-width:22ch;font-family:"Public Sans",system-ui,sans-serif;font-size:13.5px;font-weight:400;
  line-height:1.45;letter-spacing:0;text-transform:none;color:var(--muted-navy)}

/* four industries */
.rd-ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.rd-ind{padding-bottom:52px}
.rd-card-go{position:absolute;right:22px;bottom:18px;font-size:20px;color:var(--on-cream)}
/* Healthcare, the one with a chart, takes a row of its own: words on the
   left, the chart on the right. The three text-only cards share the next. */
.rd-ind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.rd-ind--chart{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);column-gap:32px;align-items:start}
.rd-ind--chart .rd-ind-chart{grid-column:2;grid-row:1 / span 3;margin:0}
/* "One method, built for growing companies": two cards, the featured one
   with its chart, and Startups under it at the same full width */
.rd-industries--growth .rd-ind{grid-column:1 / -1}

/* "Why work with METRIS" on navy: the same grid as before, in navy's colors */
.rd-page .panel--navy .hw-grid li{border-top-color:var(--line-navy);color:var(--muted-navy)}
.rd-page .panel--navy .hw-grid strong{color:var(--on-navy)}

.rd-band{background:var(--card-navy)}
.rd-band .hero-actions{margin-top:32px}

/* ------------------------------------------------------- the line chart */

.lc{margin:0;min-width:0;--lc-ai:var(--red-on-navy);--lc-base:var(--muted-navy);--lc-event:var(--amber-on-navy);--lc-grid:var(--line-navy);--lc-ink:var(--muted-navy)}
.panel--cream .lc{--lc-ai:var(--navy);--lc-base:var(--muted-cream);--lc-event:var(--amber-on-cream);--lc-grid:var(--line-cream);--lc-ink:var(--muted-cream)}
.lc-title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--panel-ink)}
.lc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 6px;font-size:12px;color:var(--lc-ink)}
.lc-key::before{content:"";display:inline-block;width:18px;height:0;margin:0 7px 3px 0;vertical-align:middle;border-top:2.5px solid var(--lc-ai)}
.lc-key--base::before{border-top:2px dashed var(--lc-base)}
.lc-body{
  display:grid;grid-template-columns:auto 34px minmax(0,1fr);grid-template-rows:auto auto auto;
  column-gap:6px;font-family:var(--mono);font-size:11px;color:var(--lc-ink);
}
.lc-ytitle{grid-row:1;grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-family:"Public Sans",system-ui,sans-serif;font-size:11px}
.lc-yaxis{grid-row:1;grid-column:2;position:relative;margin:8px 0}
.lc-yaxis span{position:absolute;right:0;top:calc(var(--y) * 1%);transform:translateY(-50%);white-space:nowrap}
.lc-plot{grid-row:1;grid-column:3;position:relative;height:clamp(150px,17vw,230px);margin:8px 0}
.lc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc-grid{stroke:var(--lc-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.lc-base{stroke:var(--lc-base);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.lc-event{stroke:var(--lc-event);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.lc-line{fill:none;stroke:var(--lc-ai);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lc-dot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--lc-ai)}
.lc-evlab{position:absolute;top:-2px;left:calc(var(--x) * 1%);transform:translate(-104%,0);white-space:nowrap;font-size:11px;color:var(--lc-event);background:var(--panel-card);padding:0 4px}
.lc-xaxis{grid-row:2;grid-column:3;position:relative;height:16px}
.lc-xaxis span{position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);white-space:nowrap}
.lc-xaxis span:first-child{transform:none}
.lc-xaxis span:last-child{transform:translateX(-100%)}
.lc-xtitle{grid-row:3;grid-column:3;margin-top:6px;text-align:center;font-family:"Public Sans",system-ui,sans-serif}
.lc--compact .lc-plot{height:clamp(120px,12vw,160px)}
.rd-chartcard .lc{--panel-card:var(--card-navy)}

/* ---------------------------------------------------------- solutions */

.rd-svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.rd-svc h3{margin-top:16px}
.rd-q-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(22px,2.5vw,36px);align-items:start}
.rd-q-col h3{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1.3;margin:0 0 16px;color:var(--on-navy)}
.rd-q-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rd-q-list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px;font-size:15px;line-height:1.55;color:var(--on-navy)}
.rd-q-n{font-family:var(--mono);font-size:12.5px;line-height:1.95;color:var(--emerald)}
.rd-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rd-tile{display:flex;align-items:center;gap:14px;padding:20px;font-weight:600;font-size:15.5px;line-height:1.35}

/* --------------------------------------------- technology, methodology */

.rd-flow{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:none}
.rd-flow li{position:relative;display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--panel-line);border-radius:999px;background:var(--panel-card);font-weight:600;font-size:16px}
.rd-flow li + li::before{content:"\2192";position:absolute;left:-13px;top:50%;transform:translate(-50%,-50%);color:var(--panel-muted)}
.rd-flow-n{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--emerald);font-family:var(--mono);font-size:13px;color:var(--panel-ink)}
.rd-flow--icons li{border-radius:var(--r-card);flex-direction:column;align-items:flex-start;padding:22px}
.rd-flow--icons .rd-icon{width:30px;height:30px}

.rd-method{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;gap:12px;max-width:860px}
.rd-method-step{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 22px}
.rd-method-step p{margin-top:4px}
.rd-badge{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--emerald);font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:18px}
.rd-method-icon{width:30px;height:30px}

/* ---------------------------------------------------------- industries */

.rd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(40px,5vw,60px);padding:4px;border:1px solid var(--panel-line);border-radius:999px;width:max-content;max-width:100%}
.rd-tabs button{font:inherit;font-weight:600;font-size:14.5px;color:var(--muted-navy);background:none;border:0;border-radius:999px;padding:9px 18px;cursor:pointer}
.rd-tabs button:hover{color:var(--emerald);background:var(--hover-tint)}
.rd-tabs button[aria-selected="true"]:hover{color:var(--navy);background:var(--emerald);box-shadow:var(--hover-glow)}
.rd-tabs button[aria-selected="true"]{background:var(--emerald);color:var(--navy)}
.rd-tabs button:focus-visible{outline:none;box-shadow:var(--ring)}
.rd-tabpanel{margin-top:34px}
.rd-tabpanel:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.rd-tabtext{margin:14px 0 0;max-width:68ch;font-size:17px;line-height:1.6;color:var(--panel-muted)}
.rd-tabpanel .rd-sub{margin-bottom:16px}
@media (max-width:640px){
  .rd-tabs{border-radius:18px;width:100%}
  .rd-tabs button{flex:1 1 calc(50% - 6px);padding:9px 10px;font-size:13.5px}
}

/* ------------------------------------------------------------ use cases */

.rd-uc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(36px,4vw,56px);align-items:start}
.rd-uc{padding:28px}
.rd-uc-story{font-size:16px}
.rd-uc-actions{margin-top:22px}
.rd-uc-open,.rd-uc-more,.rd-uc-advisor{font-size:14.5px}
.rd-uc-open a{color:var(--on-cream);text-decoration:underline;text-decoration-color:var(--emerald);text-decoration-thickness:2px;text-underline-offset:4px}
.rd-uc-advisor{padding-top:14px;border-top:1px solid var(--panel-line)}

/* ------------------------------------------------------------- research */

.rd-eyebrow-ink{margin-bottom:14px}
.rd-leadin{font-weight:600}
.rd-publist{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:820px}
.rd-publist li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--panel-line);border-radius:14px;background:var(--panel-card);font-size:16.5px;line-height:1.5}

/* --------------------------------------------------------------- about */

.rd-founder{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,64px);
  background:var(--card-navy);border:1px solid var(--line-navy);border-radius:var(--r-card);padding:clamp(20px,3vw,36px);align-items:start}
.rd-founder-photo{margin:0}
.rd-founder-photo img{display:block;width:100%;height:auto;border-radius:14px}
.rd-founder-name{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:22px;color:var(--on-navy)}
.rd-founder-role{margin:4px 0 24px;color:var(--emerald);font-weight:600}
.rd-founder-text > p:not([class]){margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--muted-navy)}
.rd-founder-text .rd-h2{font-size:clamp(20px,1.8vw,24px)}
.rd-founder-list{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line-navy);display:grid;gap:10px}
.rd-founder-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--on-navy)}
.rd-founder-list li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--emerald)}
.rd-values{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rd-values li{display:flex;align-items:center;gap:14px;padding:20px 22px;border:1px solid var(--line-navy);border-radius:var(--r-card);font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:17px}

/* Mission and Vision, What we believe, and Our promise: between the intro
   line and the founder card. Mission and vision side by side, the four
   beliefs two by two, the promises a list with a green check each. One
   column on a phone. */
/* The top: heading and paragraph on the left, the owner on the right with
   four answer boxes (soft green tint, green border): the hero's question
   crossed out, the answer under it in the hero bubbles' handwriting with a
   green check. The column reaches into the page's right margin so the
   heading keeps its width. The boxes stay inside the column, clear of the
   face (about x 39% to 60%, y 45% to 67% of the column). On a phone the
   drawing comes under the paragraph, smaller, with two boxes. */
.ab-top{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32vw,500px);gap:clamp(20px,3vw,40px);align-items:center;
  margin-right:min(0px,calc((var(--wrap) - 100vw) / 2 + 24px));
}
.ab-top-copy{min-width:0}
.ab-visual{position:relative;aspect-ratio:1 / 1.12}
.ab-art{
  position:absolute;left:12%;bottom:0;width:76%;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
}
.ab-art svg{display:block;width:100%;height:auto}
.ab-answers{list-style:none;margin:0;padding:0}
.ab-ans{
  position:absolute;display:flex;flex-direction:column;gap:3px;max-width:47%;
  padding:9px 14px 10px;border-radius:14px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.ab-q{font-size:12px;line-height:1.35;color:var(--muted-navy);text-decoration-color:rgba(169,182,204,.8)}
.ab-a{display:flex;align-items:flex-start;gap:6px;font-family:"Caveat",cursive;font-size:clamp(1.1rem,1.3vw,1.35rem);line-height:1.15;font-weight:600;color:#fff}
.ab-check{flex:none;margin-top:3px;color:var(--emerald)}
.ab-ans--1{left:0;top:0}
.ab-ans--2{right:0;top:9%}
.ab-ans--3{left:0;top:29%;max-width:37%}
.ab-ans--4{right:0;top:36%;max-width:38%}
@media (max-width:980px){
  .ab-top{grid-template-columns:minmax(0,1fr)}
  .ab-visual{width:min(100%,480px);justify-self:center;margin-top:28px}
}
@media (max-width:767px){
  .ab-visual{width:100%;aspect-ratio:auto;height:340px;margin-top:24px}
  .ab-art{left:20%;width:60%}
  .ab-ans--wide{display:none}
  .ab-ans{max-width:48%;padding:8px 11px 9px}
  .ab-ans--1{top:0}
  .ab-ans--4{top:52px;max-width:48%}
  .ab-a{font-size:1.05rem}
}
/* the intro paragraph stays under about 70 characters a line */
.rd-page .rd-about .rd-lede{max-width:53ch}
.ab-sec{margin-top:clamp(56px,7vw,96px)}
.ab-sec > .eyebrow{margin:0 0 14px}
.ab-mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.ab-h{margin:0;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.2;font-weight:600;color:var(--on-navy)}
.ab-text{margin:14px 0 0;max-width:62ch;font-size:clamp(1.02rem,1.15vw,1.12rem);line-height:1.65;color:var(--muted-navy)}
.ab-h--beliefs{margin-top:clamp(44px,5vw,64px)}
.ab-beliefs{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ab-beliefs li{padding:24px 26px 26px;border:1px solid var(--line-navy);border-radius:var(--r-card);background:var(--card-navy)}
.ab-beliefs h3{margin:14px 0 0;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.1rem,1.3vw,1.25rem);font-weight:700;color:var(--on-navy)}
.ab-beliefs p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted-navy)}
.ab-promise{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;max-width:820px}
.ab-promise li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line-navy)}
.ab-promise li:first-child{border-top:0;padding-top:4px}
.ab-tick{flex:none;margin-top:3px;color:var(--emerald)}
.ab-promise p{margin:0;font-size:clamp(1.02rem,1.15vw,1.12rem);line-height:1.6;color:var(--muted-navy)}
.ab-promise strong{display:block;margin-bottom:2px;color:var(--on-navy);font-weight:700}
@media (max-width:767px){
  .ab-mv,.ab-beliefs{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------- contact */

/* the contact email under the intro line: a link, and plain selectable text */
.rd-email{margin:18px 0 0;font-size:17px;color:var(--panel-ink)}
.rd-email a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;user-select:text}
.rd-email a:hover{color:var(--emerald-on-light,#047857)}
/* the footer's email line, small, under the copyright line */
.foot-email{margin:8px 0 0;font-size:13px;color:var(--muted-navy)}
.foot-email a{color:inherit;text-decoration:underline;text-underline-offset:3px;user-select:text}
.foot-email a:hover{color:var(--emerald)}

.rd-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(32px,5vw,72px);align-items:start}
.rd-next{background:var(--card-cream);padding:28px}
.rd-next-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.rd-next-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.5}
.rd-explore{display:flex;flex-direction:column;gap:10px;margin:14px 0 0}
.rd-explore .rd-link{align-self:flex-start}

/* -------------------------------------------------------------- widths */

@media (max-width:1180px){
  .rd-q-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .rd-home-hero .hero-row{grid-template-columns:minmax(0,1fr)}
  .rd-ind--chart{grid-template-columns:minmax(0,1fr)}
  .rd-ind--chart .rd-ind-chart{grid-column:1;grid-row:auto;margin-top:18px}
  .rd-svc-grid,.rd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
  .rd-flow li:nth-child(odd)::before{display:none}
  .rd-founder{grid-template-columns:minmax(0,1fr)}
  .rd-founder-photo{max-width:420px}
  .rd-contact{grid-template-columns:minmax(0,1fr)}
  .rd-values{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .rd-page .rd-hero{padding-top:calc(var(--nav-h) + 36px)}
  .rd-q-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-uc-grid{grid-template-columns:minmax(0,1fr)}
  .rd-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
}
@media (max-width:600px){
  .rd-steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:26px}
}
@media (max-width:600px){
  .rd-chartcard-body{grid-template-columns:minmax(0,1fr)}
  .rd-ind-grid,.rd-svc-grid,.rd-tiles,.rd-q-cols{grid-template-columns:minmax(0,1fr)}
  .rd-flow{grid-template-columns:minmax(0,1fr)}
  .rd-flow li::before{display:none}
  .rd-method-step{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .rd-method-icon{display:none}
  .rd-chartcard{padding:16px}
}
@media (max-width:640px){
  .home-page .rd-home-hero{--h-size:clamp(2.4rem,10.5vw,3.6rem)}
}
@media (prefers-reduced-motion:reduce){
  .rd-card{transition:none}
}

/* ------------------------------------------------------- section sizes

   The opening section fills the window. The ones after it are as tall as
   their content needs (stack.js covers a shorter one only once its bottom
   gap has been on screen), so a short band is not padded out to a full
   screen of empty navy. Inner pages keep the site's 1120px column. */
.rd-page .stack > .panel:not(.hero){min-height:0;padding-top:clamp(72px,9vw,120px)}
.rd-page .rd-hero:not(.rd-home-hero) .wrap{max-width:var(--wrap)}

/* headings inside a card sit at the card's top */
.rd-page .rd-hero .rd-card .rd-h2,
.rd-page .rd-hero .rd-founder .rd-h2{margin-top:0}
.rd-page .rd-founder .rd-h2{margin-top:8px}
/* the credentials on navy take navy's text color, over home.css's cream one */
.rd-page .rd-founder .founder-list li{color:var(--on-navy)}
.rd-page .rd-founder .founder-list{border-top-color:var(--line-navy)}

/* ------------------------------------------- the home hero's two columns

   The headline spans the page. Under it, the text column (tagline, line,
   buttons) and the chart card start level: the card's top lines up with
   the tagline's. Both columns take the taller one's height and the buttons
   sit at the foot of theirs, so they end level with the card's bottom. On
   phones the column stacks: text, buttons, then the chart. */
.home-page .rd-home-hero .hero-row{margin-top:28px;align-items:stretch}
.home-page .rd-home-hero .hero-copy{display:flex;flex-direction:column}
.home-page .rd-home-hero .hero-copy .hero-tagline{margin:0}
.home-page .rd-home-hero .hero-copy .lede{margin-top:32px}
.home-page .rd-home-hero .hero-copy .hero-actions{margin-top:auto;padding-top:32px}
@media (max-width:980px){
  .home-page .rd-home-hero .hero-copy .hero-actions{margin-top:0}
  .home-page .rd-home-hero .rd-chartcard{margin-top:8px}
}
/* in the narrower column the tagline wraps between phrases, never inside one */
.home-page .rd-home-hero .hero-copy .hero-tagline{white-space:normal}
/* the hero chart a little shorter, so the card and the text column come out
   close in height and the buttons are not left far below the line above */
.rd-chartcard .lc-plot{height:clamp(130px,11.5vw,170px)}
/* the event's label sits above the plot, clear of the top tick */
.lc-plot,.lc-yaxis{margin:26px 0 8px}
.lc-evlab{top:-22px}
/* on a narrow chart a long event label wraps, right-aligned against its
   line, instead of running off the left edge */
@media (max-width:560px){
  .lc-evlab{top:auto;bottom:calc(100% + 4px);white-space:normal;width:max-content;max-width:calc(var(--x) * 1% + 30px);text-align:right}
  .lc-plot,.lc-yaxis{margin-top:40px}
}

/* ------------------------------------------------------- how it works

   The timeline reads the whole engagement before any text, in two rows
   under their labels: measuring (steps 0 to 5) on white cards, then fixing
   what we found (steps 6 to 8) on dark cards. A solid line runs through
   the circles in each row; a dashed one leaves step 5 and comes into step
   6. Each card is a button that opens its step's dialog
   (how-it-works.js). Below 960px both rows turn upright, each line
   running down the left. */

.rd-more{display:flex;flex-wrap:wrap;gap:12px 32px}
.rd-hero-how{margin-left:6px;align-self:center}
.home-page .rd-home-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* the hero holds only the heading and the timeline: no full-screen height */
.rd-page .rd-hiw-hero{min-height:0}

.rd-tl{margin-top:clamp(40px,5vw,64px);display:grid;gap:32px}
/* each row's label, the site's small label over a dashed rule */
.rd-tl-group{
  margin:0 0 14px;padding-bottom:6px;border-bottom:1px dashed var(--emerald);line-height:16px;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald);
}
.rd-timeline{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
}
/* row 2's three cards take the same width as row 1's six; so does its label */
.rd-tl-row--fix .rd-tl-group{width:calc(50% - 6px)}
.rd-timeline li{position:relative;display:flex;min-width:0}
/* The line runs from circle to circle, over the cards' edges and the gaps
   between them, under the circles. Every circle's center sits 45px below
   its card's top. */
.rd-timeline li + li::before{
  content:"";position:absolute;z-index:1;top:44px;right:50%;width:calc(100% + 12px);height:2px;background:var(--emerald);
}
/* dashed: out of step 5 to the end of its row, and into step 6 */
.rd-tl-row--measure li:last-child::after,
.rd-tl-row--fix li:first-child::before{
  content:"";position:absolute;z-index:1;top:44px;height:2px;
  background:repeating-linear-gradient(to right,var(--emerald) 0 7px,transparent 7px 13px);
}
.rd-tl-row--measure li:last-child::after{left:50%;right:0}
.rd-tl-row--fix li:first-child::before{left:0;right:50%;width:auto}

/* each card in the Pricing cards' style: white, rounded, an emerald top
   border; the whole card is the button */
.rd-tl-btn.rd-card{
  position:relative;top:0;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  font:inherit;color:var(--on-cream);cursor:pointer;
  background:var(--card-cream);border:1px solid var(--line-cream);border-top:3px solid var(--emerald);
  padding:18px 14px 40px;
  transition:border-color .2s ease,top .2s ease,box-shadow .2s ease;
}
.rd-tl-n{
  position:relative;z-index:2;display:inline-grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:50%;box-sizing:border-box;
  background:var(--navy);border:2px solid var(--emerald);
  font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:19px;color:var(--emerald);
}
.rd-tl-text{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.rd-tl-name{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.3;text-wrap:balance}
.rd-tl-when{font-size:13.5px;line-height:1.4;color:var(--panel-muted)}
.rd-tl-btn .rd-tl-when{color:var(--muted-cream);white-space:nowrap}
/* the small arrow in the card's bottom right corner */
.rd-tl-go{position:absolute;right:14px;bottom:14px;width:16px;height:16px;color:var(--muted-cream)}

/* steps 6 to 8: their own stage, dark cards with a thin emerald border */
.rd-tl-row--fix .rd-tl-btn.rd-card{
  background:var(--card-navy);color:var(--on-navy);border:1px solid var(--emerald);padding-top:20px;
}
.rd-tl-row--fix .rd-tl-btn .rd-tl-when{color:var(--muted-navy)}
.rd-tl-row--fix .rd-tl-go{color:var(--on-navy)}

/* the site's card hover: it lifts a little and its border turns emerald.
   Keyboard focus looks the same, with the focus ring. */
.rd-tl-btn.rd-card:hover,.rd-tl-btn.rd-card:focus-visible{
  top:-3px;border-color:var(--emerald);box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.rd-tl-btn.rd-card:focus-visible{outline:none;box-shadow:0 10px 24px rgba(0,0,0,.28),var(--ring)}
.rd-tl-btn:hover .rd-tl-n,.rd-tl-btn:focus-visible .rd-tl-n{background:var(--emerald);color:var(--navy)}
.rd-tl-btn:hover .rd-tl-go,.rd-tl-btn:focus-visible .rd-tl-go{color:var(--emerald)}
.rd-tl-row--measure .rd-tl-btn:hover .rd-tl-go,.rd-tl-row--measure .rd-tl-btn:focus-visible .rd-tl-go{color:var(--on-cream)}
@media (prefers-reduced-motion:reduce){
  .rd-tl-btn.rd-card{transition:none}
  .rd-tl-btn.rd-card:hover,.rd-tl-btn.rd-card:focus-visible{top:0}
}
.rd-tl-note{margin:18px 0 0;font-size:14px;color:var(--muted-navy)}

/* a step's dialog: a cream card over the dimmed page */
.rd-dialog{
  border:0;padding:0;background:transparent;color:var(--on-cream);
  width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);
}
.rd-dialog::backdrop{background:rgba(14,31,59,.62);backdrop-filter:blur(2px)}
.rd-dialog-box{
  position:relative;background:var(--card-cream);border-radius:var(--r-card);border-top:4px solid var(--emerald);
  padding:30px 32px 32px;box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.rd-dialog-box .rd-tl-n{background:var(--navy)}
.rd-dialog-h{margin:16px 48px 0 0;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.2vw,26px);line-height:1.25;color:var(--on-cream)}
.rd-dialog-box .rd-tl-when{display:block;margin:8px 0 0;color:var(--muted-cream)}
.rd-dialog-text{margin:16px 0 0;font-size:17px;line-height:1.65;color:var(--on-cream)}
.rd-dialog-actions{margin:24px 0 0}
.rd-dialog-x{
  position:absolute;top:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line-cream);background:var(--card-cream);color:var(--on-cream);
  font-size:24px;line-height:1;cursor:pointer;
}
.rd-dialog-x:hover{border-color:var(--emerald);background:var(--hover-tint)}
.rd-dialog-x:focus-visible{outline:none;box-shadow:var(--ring)}

.rd-hiw-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,3.4vw,40px);max-width:880px}
.rd-hiw-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:22px;align-items:start;scroll-margin-top:calc(var(--nav-h) + 28px)}
.rd-hiw-step .rd-h3{font-size:clamp(19px,1.7vw,22px)}
.rd-hiw-step p{margin:10px 0 0;font-size:17px;line-height:1.65;color:var(--panel-muted);max-width:68ch}
/* the one highlighted line: navy words on the emerald tint, an emerald bar */
.rd-hiw-need{
  margin:clamp(40px,5vw,56px) 0 0;max-width:880px;
  padding:20px 24px;border-left:4px solid var(--emerald);border-radius:0 12px 12px 0;
  background:var(--emerald-soft);color:var(--on-cream);font-size:17.5px;line-height:1.55;
}
.rd-hiw-need em{font-style:normal;font-weight:700}
.rd-hiw-partners{
  margin:0;max-width:62ch;padding:22px 26px;border:1px solid var(--line-navy);border-left:4px solid var(--emerald);
  border-radius:0 14px 14px 0;background:rgba(16,185,129,.07);font-size:18px;line-height:1.6;color:var(--on-navy);
}
.rd-hiw-close .hero-actions{margin-top:36px}
/* "Fixing what we found" over steps 6 to 8 in the text: the small label */
.rd-hiw-group{
  margin:clamp(48px,5vw,64px) 0 clamp(24px,3vw,32px);max-width:880px;padding-bottom:10px;border-bottom:1px dashed var(--emerald);
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-cream);
}

/* upright: full-width cards in each row, each line running down from one
   circle to the next across the gaps; the dashed one from step 5 runs past
   the second row's label, which starts to the right of it */
@media (max-width:959px){
  .rd-timeline{display:flex;flex-direction:column;gap:12px}
  .rd-tl-group{margin-left:64px}
  .rd-tl-row--fix .rd-tl-group{width:auto}
  .rd-timeline li + li::before,
  .rd-tl-row--fix li:first-child::before{display:none}
  .rd-timeline li:not(:last-child)::after,
  .rd-tl-row--measure li:last-child::after{
    content:"";position:absolute;z-index:0;left:40px;right:auto;top:43px;bottom:-55px;width:2px;height:auto;background:var(--emerald);
  }
  /* to step 6: the row gap (32), the label (23 and 14 below it), then 43 */
  .rd-tl-row--measure li:last-child::after{bottom:-112px;background:repeating-linear-gradient(to bottom,var(--emerald) 0 7px,transparent 7px 13px)}
  /* the cards sit over the line, so it shows only in the gaps */
  .rd-tl-btn.rd-card{z-index:1;flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:16px 44px 16px 16px}
  .rd-tl-row--fix .rd-tl-btn.rd-card{padding-top:18px}
  .rd-tl-text{align-items:flex-start;flex:1;padding-top:4px}
  .rd-tl-go{top:50%;bottom:auto;margin-top:-8px}
}
@media (max-width:480px){
  .rd-dialog-box{padding:24px 22px 26px}
}

/* ------------------------------------------------------------ pricing

   Four cards side by side, stacked on a phone, then the form on navy.
   The form uses the site's grounds and tokens only: navy fields with a
   fine line, emerald on focus, the one red for a field that needs fixing. */

.rd-price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.rd-price{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-top:3px solid var(--emerald)}
.rd-price p{margin:0}
.rd-price-list{margin:0;padding:0 0 0 18px;display:grid;gap:6px;font-size:15.5px;line-height:1.5;color:var(--panel-muted)}
.rd-price-list li::marker{color:var(--emerald)}
.rd-price-note{max-width:none;margin-top:28px}
@media (max-width:1100px){.rd-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rd-price-grid{grid-template-columns:minmax(0,1fr)}}

.rd-form{margin-top:clamp(32px,4vw,48px);max-width:820px}
.rd-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px}
.rd-field{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;min-width:0}
.rd-field--half{grid-column:auto}
.rd-field[hidden]{display:none}
.rd-field label{font-weight:600;font-size:15px;color:var(--on-navy)}
.rd-req{color:var(--emerald);margin-left:3px}
.rd-form input,.rd-form select,.rd-form textarea{
  font:inherit;font-size:16px;color:var(--on-navy);
  background:var(--card-navy);border:1px solid var(--line-navy);border-radius:12px;
  padding:13px 14px;width:100%;min-width:0;box-sizing:border-box;
}
.rd-form select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-navy) 50%),linear-gradient(-45deg,transparent 50%,var(--muted-navy) 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.rd-form option{background:var(--navy);color:var(--on-navy)}
.rd-form textarea{resize:vertical;min-height:130px;line-height:1.55}
.rd-form input:hover,.rd-form select:hover,.rd-form textarea:hover{border-color:var(--emerald)}
.rd-form input:focus,.rd-form select:focus,.rd-form textarea:focus{outline:none;border-color:var(--emerald);box-shadow:var(--ring)}
.rd-form [aria-invalid="true"]{border-color:var(--red-on-navy)}
.rd-err{margin:0;font-size:14px;color:var(--red-on-navy)}
.rd-phone{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:10px}
.rd-consent{margin:24px 0 0;font-size:14.5px;color:var(--muted-navy)}
.rd-consent a{color:var(--on-navy);text-decoration:underline;text-decoration-color:var(--emerald);text-underline-offset:3px}
.rd-form-actions{margin:20px 0 0}
.rd-form-status{margin:18px 0 0;font-size:17px;color:var(--on-navy)}
.rd-form-status:empty{display:none}
@media (max-width:640px){
  .rd-form-grid{grid-template-columns:minmax(0,1fr)}
  .rd-field--half{grid-column:1 / -1}
  .rd-phone{grid-template-columns:minmax(0,1fr)}
}
.rd-form input,.rd-form select,.rd-form textarea{scroll-margin-top:calc(var(--nav-h) + 48px)}

/* under the discovery call line: the way down to the form */
.rd-price-ready{margin-top:clamp(40px,5vw,56px)}
.rd-price-ready .rd-h3{font-size:clamp(24px,2.4vw,32px)}
.rd-price-ready p{margin:10px 0 0;font-size:17px;color:var(--panel-muted)}
.rd-price-ready .hero-actions{margin-top:24px}
/* the form's heading lands below the fixed header, not under it */
#talk-pricing{scroll-margin-top:calc(var(--nav-h) + 40px)}

/* ------------------------------------------------------------ hero v2

   The headline runs across the page as one sentence (two lines on desktop).
   Under it, two columns: the text (subline, answer line, button, three
   points) on the left, the visual on the right. On a phone the visual comes
   after the points. Sized so the headline and the button stay above the
   fold at 1440x900, 1280x720 and 390x844. */
.home-page .rd-hero-v2{--h-size:clamp(2.1rem,4.6vw,4.1rem)}
.home-page .rd-hero-v2 .hero-h{font-weight:600;line-height:1.1;letter-spacing:-.01em;max-width:none}
.home-page .rd-hero-v2 .hero-row{
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(28px,3.5vw,56px);margin-top:26px;align-items:start;
}
.home-page .rd-hero-v2 .hero-copy .lede{margin:0;font-size:clamp(1.05rem,1.25vw,1.3rem);line-height:1.6;max-width:70ch}
.home-page .rd-hero-v2 .hero-answer{
  margin:18px 0 0;max-width:70ch;
  font-size:clamp(1.15rem,1.45vw,1.5rem);line-height:1.6;font-weight:600;
  color:var(--on-navy);
}
.home-page .rd-hero-v2 .hero-copy .hero-actions{margin-top:26px;padding-top:0}
/* The three points: three columns under the button, each an emerald line
   icon over its words, with a thin rule between columns. On a phone they
   stack, the icon beside the words and a rule between rows. */
.home-page .rd-hero-v2 .hero-points{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  font-size:15px;line-height:1.5;color:var(--muted-navy);
}
.home-page .rd-hero-v2 .hero-points li{
  display:flex;flex-direction:column;gap:12px;
  padding:0 clamp(14px,1.6vw,26px);border-left:1px solid var(--line-navy);
}
.home-page .rd-hero-v2 .hero-points li:first-child{padding-left:0;border-left:0}
.home-page .rd-hero-v2 .hero-points li:last-child{padding-right:0}
.hero-point-icon{flex:none;color:var(--emerald)}
/* a hyphenated word (mid-sized) stays on one line */
.hero-nobreak{white-space:nowrap}

/* The visual (hv): three panes stacked, from the three reference images
   (Downloads/METRIS-hero-visual-pane1-see.png, -pane2-visual.png,
   -pane3-gaps.png). The pane in front sits lowest and furthest left; each
   one behind sits a step up and to the right, so its title strip shows
   above the one in front. The panes share one grid cell, so the stack is
   as tall as its tallest pane. Each background is solid: nothing shows
   through. hero-visual.js moves a pane between places (data-slot 0, 1, 2);
   the move slides over half a second.

   The picture is drawn on a stage 760 units wide. Every length is a number
   of units times --u, so the whole picture scales with its column and
   keeps its proportions; the smallest words never drop below 10px. Colors
   are the site's where it has one (emerald, amber, coral, navy text); the
   cost bars, the pilot blue and the panes' glass keep the reference's,
   since the site has no equivalent. */
.hv{container-type:inline-size;width:100%;position:relative;z-index:3;min-width:0}
.hv-stage{
  --u:calc(100cqw / 760);
  --dx:calc(55 * var(--u));
  --dy:calc(48 * var(--u));
  --tilt:perspective(calc(1400 * var(--u))) rotateY(-14deg) rotateX(3deg);
  position:relative;
  font-family:"Manrope",system-ui,sans-serif;color:var(--on-navy);
}
.hv-stack{
  display:grid;
  padding:calc(var(--dy) * 2) calc(var(--dx) * 2) 0 0;
}
.hv-pane{
  --k:0;
  grid-area:1 / 1;position:relative;z-index:3;min-width:0;
  box-sizing:border-box;padding:calc(18 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u));
  display:flex;flex-direction:column;gap:calc(14 * var(--u));
  border-radius:calc(18 * var(--u));border:1px solid rgba(160,210,255,.35);
  background:linear-gradient(160deg,#1e3c64,#102240);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 50px rgba(16,185,129,.16);
  transform:translate(calc(var(--k) * var(--dx)),calc(var(--k) * var(--dy) * -1)) var(--tilt);
  transition:transform .5s ease,filter .5s ease;
}
.hv-pane[data-slot="1"]{--k:1;z-index:2;filter:brightness(.82)}
.hv-pane[data-slot="2"]{--k:2;z-index:1;filter:brightness(.68)}
.hv-pane:not([data-slot="0"]){border-color:rgba(16,185,129,.4)}

/* the title strip: the METRIS ring, the title, and on the right "This
   month" in front or the pane's tag behind. A button, so a back pane comes
   forward by click, tap, Enter or Space. */
.hv-tab{
  display:flex;align-items:center;gap:calc(10 * var(--u));width:100%;
  margin:0;padding:calc(4 * var(--u)) 0;border:0;border-radius:calc(8 * var(--u));background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.hv-pane[data-slot="0"] .hv-tab{cursor:default}
.hv-tab:focus-visible{outline:none;box-shadow:var(--ring)}
.hv-pane:not([data-slot="0"]) .hv-tab:hover .hv-title{color:var(--emerald)}
.hv-ring{width:calc(22 * var(--u));height:auto;flex:none}
.hv-title{font-size:calc(16 * var(--u));font-weight:700;letter-spacing:.01em}
.hv-tag{margin-left:auto;font-size:max(10px,calc(12 * var(--u)));color:var(--muted-navy);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hv-pane[data-slot="0"] .hv-tag-back,
.hv-pane:not([data-slot="0"]) .hv-tag-front{display:none}

.hv-body{display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.hv-body ul{list-style:none;margin:0;padding:0}
.hv-note{margin:0;font-size:max(10px,calc(12 * var(--u)));color:var(--muted-navy)}
.hv-lead{margin:0;font-size:calc(14 * var(--u));color:#cdd7e5}

/* the tones a status, a finding and an action share */
.hv-tone--ok{--c:var(--emerald);--rgb:16,185,129}
.hv-tone--warn{--c:var(--amber-on-navy);--rgb:245,158,11}
.hv-tone--pilot{--c:#a9c8ff;--rgb:106,168,255}
.hv-tone--stop{--c:var(--red-on-navy);--rgb:245,128,109}

/* pane 1: All departments */
.hv-cols{font-size:max(10px,calc(11 * var(--u)));color:var(--muted-navy);letter-spacing:.06em;text-transform:uppercase}
.hv-cols,.hv-row{
  display:grid;gap:calc(10 * var(--u));padding:0 calc(4 * var(--u));
  grid-template-columns:calc(112 * var(--u)) minmax(0,1fr) calc(84 * var(--u)) calc(128 * var(--u));
}
.hv-rows{display:flex;flex-direction:column}
.hv-row{align-items:center;padding:calc(12 * var(--u)) calc(4 * var(--u));border-top:1px solid rgba(160,210,255,.14)}
.hv-dept{font-size:calc(14 * var(--u));font-weight:600}
.hv-use{display:flex;flex-direction:column;gap:calc(2 * var(--u));font-size:calc(13 * var(--u))}
.hv-checked{font-size:max(10px,calc(11 * var(--u)));color:var(--muted-navy)}
.hv-cost{height:calc(8 * var(--u));border-radius:calc(4 * var(--u));background:rgba(255,255,255,.08)}
.hv-cost i{display:block;height:100%;border-radius:inherit;background:#6aa8ff}
.hv-status{
  justify-self:start;display:inline-flex;align-items:center;gap:calc(6 * var(--u));
  font-size:max(10px,calc(12 * var(--u)));font-weight:600;line-height:1.25;
  color:var(--c);background:rgba(var(--rgb),.14);
  border-radius:999px;padding:calc(4 * var(--u)) calc(10 * var(--u));
}
.hv-status svg{width:calc(12 * var(--u));height:calc(12 * var(--u));flex:none}

/* pane 2: Where the money goes. Each part has its own pattern as well as
   its color: solid, diagonal stripes, a dotted edge. */
.hv-bars{display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.hv-bars li{display:grid;grid-template-columns:calc(150 * var(--u)) minmax(0,1fr);align-items:center;gap:calc(12 * var(--u))}
.hv-bar{display:flex;height:calc(18 * var(--u));border-radius:calc(4 * var(--u));overflow:hidden}
.hv-part{display:block;height:100%;box-sizing:border-box}
.hv-part--paying{background:var(--emerald)}
.hv-part--unclear{background:repeating-linear-gradient(-45deg,var(--amber-on-navy) 0 calc(5 * var(--u)),#a86d08 calc(5 * var(--u)) calc(10 * var(--u)))}
.hv-part--notpaying{background:var(--red-on-navy);border:2px dotted rgba(255,255,255,.85);border-radius:calc(4 * var(--u))}
.hv-legend{
  display:flex;flex-wrap:wrap;gap:calc(8 * var(--u)) calc(20 * var(--u));
  padding-top:calc(12 * var(--u));border-top:1px solid rgba(160,210,255,.14);
  font-size:calc(13 * var(--u));
}
.hv-legend li{display:inline-flex;align-items:center;gap:calc(8 * var(--u))}
.hv-legend .hv-part{width:calc(16 * var(--u));height:calc(12 * var(--u));border-radius:2px}
.hv-legend .hv-part--notpaying{border-width:1.5px}

/* pane 3: What needs fixing */
.hv-finds{display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.hv-find{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(12 * var(--u));
  padding:calc(11 * var(--u)) calc(16 * var(--u));border-radius:calc(10 * var(--u));
  border:1px solid rgba(var(--rgb),.45);background:rgba(var(--rgb),.1);
}
.hv-find b{display:block;font-size:calc(14.5 * var(--u));font-weight:600;line-height:1.3}
.hv-find b + span{display:block;margin-top:calc(2 * var(--u));font-size:max(10px,calc(12.5 * var(--u)));color:var(--muted-navy)}
.hv-action{
  font-size:calc(13 * var(--u));font-weight:700;color:var(--c);
  border:1.5px solid var(--c);border-radius:999px;padding:calc(5 * var(--u)) calc(14 * var(--u));
}

/* the arrows, centered under the pane in front, and the glow under them */
.hv-glow{
  position:absolute;left:5%;bottom:0;width:70%;height:calc(90 * var(--u));pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(16,185,129,.22),rgba(16,185,129,0) 70%);
}
.hv-nav{
  position:relative;z-index:4;display:flex;justify-content:center;gap:calc(14 * var(--u));
  margin-top:calc(26 * var(--u));padding-right:calc(var(--dx) * 2);
}
.hv-arrow{
  display:inline-grid;place-items:center;
  width:max(40px,calc(46 * var(--u)));height:max(40px,calc(46 * var(--u)));
  border-radius:50%;border:1px solid rgba(160,210,255,.35);background:rgba(14,31,59,.6);
  color:var(--on-navy);cursor:pointer;
}
.hv-arrow:hover{border-color:var(--emerald);color:var(--emerald)}
.hv-arrow:focus-visible{outline:none;box-shadow:var(--ring)}
@media (prefers-reduced-motion:reduce){
  .hv-pane{transition:none}
}

@media (max-width:980px){
  /* one column: the visual under the points, no wider than it reads well */
  .home-page .rd-hero-v2 .hero-row{grid-template-columns:minmax(0,1fr)}
  .home-page .rd-hero-v2 .hv{max-width:640px;margin-top:8px}
}
@media (max-width:767px){
  .home-page .rd-hero-v2{padding-top:calc(var(--nav-h) + 24px)}
  .home-page .rd-hero-v2 .eyebrow{margin-bottom:14px}
}
@media (max-width:640px){
  .home-page .rd-hero-v2{--h-size:clamp(1.85rem,8.2vw,2.4rem)}
  .home-page .rd-hero-v2 .hero-row{margin-top:18px}
  .home-page .rd-hero-v2 .hero-answer{margin-top:14px}
  /* the button starts at the text's left edge, like the lines above it */
  .home-page .rd-hero-v2 .hero-copy .hero-actions{margin-top:20px;align-items:flex-start}
  .home-page .rd-hero-v2 .hero-points{grid-template-columns:minmax(0,1fr);font-size:14.5px}
  .home-page .rd-hero-v2 .hero-points li{
    flex-direction:row;align-items:center;gap:14px;
    padding:12px 0;border-left:0;border-top:1px solid var(--line-navy);
  }
  .home-page .rd-hero-v2 .hero-points li:first-child{padding-top:0;border-top:0}
  .home-page .rd-hero-v2 .hero-points .hero-point-icon{width:26px;height:26px}

  /* On a phone the stage would shrink the words past reading, so the panes
     fill the width at their own sizes, flat (no tilt), each a small step
     behind the other. On the first pane each row folds in two: department
     and status, then the AI use and its cost bar. */
  .hv-stage{--u:1px;--dx:10px;--dy:20px;--tilt:rotate(0deg)}
  .hv-pane{padding:14px 16px 16px}
  .hv-cols{display:none}
  .hv-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"dept status" "use cost";
    row-gap:8px;padding:12px 2px;
  }
  .hv-row .hv-dept{grid-area:dept}
  .hv-status{grid-area:status;justify-self:end}
  .hv-use{grid-area:use}
  .hv-cost{grid-area:cost;width:84px;align-self:center}
  .hv-bars li{grid-template-columns:116px minmax(0,1fr)}
  .hv-find{padding:10px 12px}
  .hv-nav{padding-right:calc(var(--dx) * 2)}
}

/* ------------------------------------------------------------ hero v3

   The words on the left over solid navy; on the right, in its own column,
   the illustration of the owner (inline SVG) with its soft green glow, its
   bottom fading into the navy. Four thought bubbles (Caveat, light text on a
   translucent light bubble) sit around the head: two above, one on each
   side, their trailing dots pointing at the head. They are placed in the
   illustration's column, so they never reach the words or the button, and
   kept clear of the face. Sized so the headline and the button show without
   scrolling at 1440x900 and 1280x720. On a phone the illustration sits above
   the words, head and shoulders, with two bubbles, one on each side. */
.home-page .rd-hero-v3{
  min-height:min(100svh,940px);display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(24px,4vh,56px));padding-bottom:clamp(36px,6vh,72px);
}
/* the photo is placed against the section, not the column */
.home-page.rd-page .rd-hero.rd-hero-v3 .wrap{position:static;max-width:1280px}
.h3-grid{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:clamp(24px,3vw,48px);align-items:center}
.h3-copy{position:relative;z-index:3;max-width:700px}
.h3-copy .eyebrow{margin:0 0 18px}
.h3-h{
  margin:0;font-family:"Manrope",system-ui,sans-serif;color:var(--on-navy);
  font-size:clamp(2.4rem,4.1vw,4rem);line-height:1.06;font-weight:600;letter-spacing:-.015em;
}
.h3-accent{color:var(--emerald)}
.h3-text{margin:22px 0 0;max-width:58ch;font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.6;color:var(--muted-navy)}
.h3-answer{margin:16px 0 0;max-width:58ch;font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.55;font-weight:700;color:var(--on-navy)}
.h3-actions{margin:26px 0 0}
.btn--arrow::after{content:"\2192" / "";display:inline-block;margin-left:10px;transition:transform .2s ease}
.btn--arrow:hover::after{transform:translateX(3px)}
/* 30px under the tagline (27px on a phone, below). The 30px the tagline
   gained above is taken back underneath, so the centered words, buttons
   and drawing above stay exactly where they were. */
.h3-points{
  list-style:none;margin:30px 0 -30px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  font-size:12.5px;line-height:1.45;font-weight:600;letter-spacing:.08em;color:var(--muted-navy);
}
.h3-points li{display:flex;align-items:center;gap:12px;padding:0 clamp(12px,1.4vw,22px);border-left:1px solid var(--line-navy)}
.h3-points li:first-child{padding-left:0;border-left:0}
.h3-points li:last-child{padding-right:0}
/* a point of two sentences: one on each line */
.h3-pt-line{display:block}

/* The column is square, so every place below is a share of it: the
   drawing fills 74% of the width at the bottom, which puts the head at
   about x 39% to 59% and y 40% to 64%. */
.h3-visual{
  position:relative;z-index:2;justify-self:center;
  width:min(100%,calc(100svh - var(--nav-h) - 72px));aspect-ratio:1 / 1;
}
.h3-art{
  position:absolute;left:13%;bottom:0;width:74%;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.h3-art svg{display:block;width:100%;height:auto}
.h3-bubbles{list-style:none;margin:0;padding:0}
.h3-bubble{
  position:absolute;padding:10px 16px 12px;border-radius:24px;text-wrap:balance;
  font-family:"Caveat",cursive;font-size:clamp(1.1rem,1.35vw,1.45rem);line-height:1.15;font-weight:600;color:#fff;
  background:rgba(244,246,249,.14);border:1px solid rgba(244,246,249,.3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
/* the two small circles of a thought bubble, trailing toward the head */
.h3-bubble::before,.h3-bubble::after{
  content:"";position:absolute;border-radius:50%;
  background:rgba(244,246,249,.18);border:1px solid rgba(244,246,249,.3);
}
.h3-bubble::before{width:13px;height:13px}
.h3-bubble::after{width:8px;height:8px}
/* above the head: left and right of center, the dots below, inward */
.h3-bubble--1{right:51%;bottom:66%;max-width:44%}
.h3-bubble--2{left:53%;bottom:71%;max-width:44%}
.h3-bubble--1::before{right:14%;bottom:-17px}
.h3-bubble--1::after{right:6%;bottom:-29px}
.h3-bubble--2::before{left:14%;bottom:-17px}
.h3-bubble--2::after{left:6%;bottom:-29px}
/* beside the head: the dots on the inner side */
.h3-bubble--3{right:66%;top:47%;max-width:34%}
.h3-bubble--4{left:65%;top:42%;max-width:35%}
.h3-bubble--3::before{right:-17px;top:40%}
.h3-bubble--3::after{right:-29px;top:30%}
.h3-bubble--4::before{left:-17px;top:40%}
.h3-bubble--4::after{left:-29px;top:30%}

@media (max-width:980px){
  .h3-points{grid-template-columns:minmax(0,1fr);gap:10px}
  .h3-points li{padding:0;border-left:0}
  .h3-pt-line{display:inline}
  .h3-points{margin-bottom:0}
  .h3-bubble{padding:8px 12px 10px;border-radius:18px}
}
@media (max-width:767px){
  .home-page .rd-hero-v3{min-height:0;display:block;padding-top:var(--nav-h);padding-bottom:44px}
  .h3-grid{display:flex;flex-direction:column;gap:0}
  .h3-copy{max-width:none}
  /* the illustration above the words, smaller: head and shoulders */
  .h3-visual{order:-1;width:100%;aspect-ratio:auto;height:260px;margin:0 0 18px;overflow:hidden}
  .h3-art{left:15%;width:70%;top:-40px;bottom:auto}
  .h3-bubble--wide{display:none}
  .h3-bubble{max-width:32%;padding:7px 11px 9px;border-radius:16px;font-size:1rem}
  .h3-bubble--1{left:0;right:auto;top:28px;bottom:auto}
  .h3-bubble--4{right:0;left:auto;top:84px}
  .h3-bubble--1::before{right:-15px;left:auto;top:45%;bottom:auto}
  .h3-bubble--1::after{right:-25px;left:auto;top:35%;bottom:auto}
  .h3-h{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  .h3-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;font-size:11px;letter-spacing:.06em;margin-top:27px}
  .h3-pt-line{display:block}
  .h3-points li{flex-direction:column;align-items:flex-start;gap:8px;padding:0 10px;border-left:1px solid var(--line-navy)}
  .h3-points li:first-child{padding-left:0;border-left:0}
  .h3-points .hero-point-icon{width:22px;height:22px}
}

/* ------------------------------------------- section 2: "You're investing in AI..."

   The Hero v2 heading and paragraph, with the three panes beside them, on
   soft white. The heading is a section heading, a step smaller than the
   hero's. The panes stay dark, as product screens, with a soft shadow. */
.rd-page .stack > .panel.inv-sec{min-height:0;padding-top:clamp(80px,9vw,128px);padding-bottom:clamp(72px,8vw,112px)}
.inv-sec .wrap{max-width:1280px}
.inv-h{
  margin:0;font-family:"Manrope",system-ui,sans-serif;
  font-size:var(--h-section-size);line-height:1.1;font-weight:600;letter-spacing:-.01em;
}
.inv-row{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(28px,4vw,64px);margin-top:28px;align-items:start}
.inv-text{margin:0;max-width:60ch;font-size:clamp(1.05rem,1.25vw,1.3rem);line-height:1.6;color:var(--muted-soft)}
/* On soft white the panes cast a wide, soft navy shadow (never black),
   strongest under the pane in front and lighter under the two behind. The
   shadow belongs to each pane, so it moves with it when the arrows change
   which one is in front. Navy sections keep their own look. */
.panel--soft .hv-pane{
  box-shadow:0 40px 90px -20px rgba(14,31,59,.34),0 14px 32px -8px rgba(14,31,59,.16);
  transition:transform .5s ease,filter .5s ease,box-shadow .5s ease;
}
.panel--soft .hv-pane[data-slot="1"]{box-shadow:0 28px 64px -20px rgba(14,31,59,.18),0 8px 20px -8px rgba(14,31,59,.08)}
.panel--soft .hv-pane[data-slot="2"]{box-shadow:0 22px 50px -20px rgba(14,31,59,.12),0 6px 16px -8px rgba(14,31,59,.06)}
@media (prefers-reduced-motion:reduce){
  .panel--soft .hv-pane{transition:none}
}
.panel--soft .hv-glow{display:none}
.panel--soft .hv-arrow{border-color:var(--line-soft);background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(14,31,59,.08)}
.panel--soft .hv-arrow:hover{border-color:var(--emerald-on-light);color:var(--emerald-on-light)}
.panel--soft .hv-pane:not([data-slot="0"]) .hv-tab:hover .hv-title{color:var(--emerald)}
@media (max-width:980px){
  .inv-row{grid-template-columns:minmax(0,1fr)}
  .inv-sec .hv{max-width:640px;margin-top:8px}
}
@media (max-width:640px){
  /* the panes' phone layout, as it was in the hero */
  .inv-sec .hv-stage{--u:1px;--dx:10px;--dy:20px;--tilt:rotate(0deg)}
}

/* ------------------------------------------- AI doesn't work alone

   The section directly below the hero, at least 80% of the screen tall.
   The words sit on the left over solid navy; the drawing of People and AI
   on the right, over a ground that fades from solid navy into a faint
   green. The drawing has its own column, sized so that even at its
   biggest (1.3 times) nothing in it reaches the words or the two cards.
   On a phone the drawing sits above the words, smaller and centered. */
.rd-page .stack > .panel.ap-sec{
  min-height:80svh;padding-top:clamp(88px,10vw,140px);padding-bottom:clamp(72px,8vw,120px);
  background:
    linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,rgba(14,31,59,.2) 100%),
    radial-gradient(ellipse 45% 60% at 78% 55%,rgba(16,185,129,.12),rgba(16,185,129,0) 70%),
    var(--navy);
}
.ap-sec .wrap{max-width:1280px}
.ap-grid{
  display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.ap-copy{position:relative;z-index:3;min-width:0}
.ap-h{
  margin:0;font-family:"Manrope",system-ui,sans-serif;
  font-size:var(--h-section-size);line-height:1.1;font-weight:600;letter-spacing:-.01em;
}
.ap-text{margin:24px 0 0;max-width:62ch;font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.6;color:var(--muted-navy)}
.ap-lead{margin:28px 0 0;font-size:clamp(1.02rem,1.15vw,1.15rem);font-weight:600}
.ap-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.ap-side{border-radius:14px;padding:20px 22px;border:1px solid rgba(169,182,204,.3);background:rgba(255,255,255,.04)}
.ap-side--ai{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.06)}
.ap-side h3{margin:0;font-family:"Manrope",system-ui,sans-serif;font-size:17px;font-weight:700;color:var(--on-navy)}
.ap-side--ai h3{color:var(--emerald)}
.ap-side ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.4}
.ap-closing{margin:28px 0 0;font-size:clamp(1.1rem,1.4vw,1.4rem);line-height:1.4;font-weight:600;text-wrap:balance}
.ap-note{margin:14px 0 0;font-size:13.5px;color:var(--muted-navy)}

/* the drawing */
.ap-art{position:relative;z-index:2;min-width:0}
.ap-art svg{display:block;width:100%;height:auto;max-height:70vh;overflow:visible}
.ap-floor{fill:rgba(16,185,129,.07)}
.ap-arm{fill:none;stroke-width:22;stroke-linecap:round}
.ap-people .ap-arm{stroke:#6c7b98}
.ap-ai .ap-arm{stroke:#10B981;stroke-opacity:.75}
.ap-line{fill:rgba(16,185,129,.06);stroke:#10B981;stroke-width:4}
.ap-body{fill:rgba(16,185,129,.08)}
.ap-dot{fill:#10B981}
.ap-mouth{stroke:#10B981;stroke-width:4;stroke-linecap:round}
.ap-net{fill:none;stroke:#10B981;stroke-opacity:.6;stroke-width:2}
.ap-label{font-family:"Manrope",system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-anchor:middle}
.ap-people .ap-label{fill:#7d8aa3}
.ap-ai .ap-label{fill:#10B981}

/* Each figure grows from its feet. The play, once, about 7 seconds:
   AI big and People small, a pause; they swap, a pause; both settle at
   equal size and the glow where the hands meet brightens. */
.ap-fig{transform-box:view-box}
.ap-people{transform-origin:180px 390px}
.ap-ai{transform-origin:470px 390px}
.ap-glow{transform-box:fill-box;transform-origin:center}
.ap-art.is-playing .ap-people{animation:ap-people 7s ease-in-out both}
.ap-art.is-playing .ap-ai{animation:ap-ai 7s ease-in-out both}
.ap-art.is-playing .ap-glow{animation:ap-glow 7s ease-in-out both}
@keyframes ap-ai{
  0%{transform:scale(1)} 15%,30%{transform:scale(1.3)} 50%,64%{transform:scale(.7)} 86%,100%{transform:scale(1)}
}
@keyframes ap-people{
  0%{transform:scale(1)} 15%,30%{transform:scale(.7)} 50%,64%{transform:scale(1.3)} 86%,100%{transform:scale(1)}
}
@keyframes ap-glow{
  0%,80%{opacity:.35;transform:scale(.8)} 100%{opacity:1;transform:scale(1.15)}
}
.ap-glow{opacity:1;transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){
  .ap-art.is-playing .ap-people,.ap-art.is-playing .ap-ai,.ap-art.is-playing .ap-glow{animation:none}
  .ap-replay{display:none}
}

/* Replay: a quiet outlined pill centered under the two labels, in the
   PEOPLE label's grey-blue, turning emerald under the mouse. ai-people.js
   shows it only when there is an animation to play. */
.ap-art{display:flex;flex-direction:column;align-items:center}
.ap-replay{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  padding:6px 14px;border-radius:999px;border:1px solid rgba(125,138,163,.5);background:none;
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;color:#7d8aa3;cursor:pointer;
}
.ap-replay[hidden]{display:none}
.ap-replay:hover{color:var(--emerald);border-color:var(--emerald);background:var(--hover-tint)}
.ap-replay:focus-visible{outline:none;box-shadow:var(--ring)}

@media (max-width:900px){
  .ap-grid{grid-template-columns:minmax(0,1fr)}
  .ap-art{order:-1;width:100%;max-width:400px;justify-self:center}
  .rd-page .stack > .panel.ap-sec{
    background:linear-gradient(180deg,rgba(14,31,59,.2) 0%,var(--navy) 45%),
      radial-gradient(ellipse 70% 30% at 50% 18%,rgba(16,185,129,.12),rgba(16,185,129,0) 70%),var(--navy);
  }
}
@media (max-width:560px){
  .ap-sides{grid-template-columns:minmax(0,1fr)}
  .ap-art{max-width:320px}
}

/* ------------------------------------------- What METRIS does

   The third section: a centered heading (its second sentence in the light
   accent green, which the site had no token for), four cards in a row (two
   by two below 1100px, one column on a phone), then the spotlight row: the
   "What needs fixing" panel beside the words. The panel reuses the hero
   visual's findings (.hv-find) at their own sizes. On a phone the words come
   before the panel. No buttons. */
.wd-sec,.wn-sec{--emerald-light:#6EE7B7}
.rd-page .stack > .panel.wd-sec,
.rd-page .stack > .panel.wn-sec{min-height:0;padding-top:clamp(80px,9vw,128px);padding-bottom:clamp(72px,8vw,112px)}
.wd-sec .wrap,.wn-sec .wrap{max-width:1280px}
/* the second line of a two-line heading in emerald (Suneeta, Oct 22, 2026;
   it was one color from Oct 20): the darker emerald on soft white */
.wd-accent{color:var(--emerald)}
.panel--soft .wd-accent{color:var(--emerald-on-light)}
.wd-h,.wn-h{
  margin:0 auto;max-width:22ch;text-align:center;text-wrap:balance;
  font-family:"Manrope",system-ui,sans-serif;font-size:var(--h-section-size);line-height:1.12;font-weight:600;letter-spacing:-.01em;
}
.wd-text,.wn-text{margin:20px auto 0;max-width:64ch;text-align:center;font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.6;color:var(--muted-navy)}
.wd-cards{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.wd-card{padding:26px 24px 28px;border-radius:16px;border:1px solid var(--line-navy);background:rgba(255,255,255,.025)}
.wd-card--on{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.07)}
.wd-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(16,185,129,.14);color:var(--emerald)}
.wd-label{margin:18px 0 0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald)}
.wd-card h3{margin:8px 0 0;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.15rem,1.45vw,1.4rem);line-height:1.3;font-weight:700}
.wd-card h3 + p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted-navy)}

.wd-spot{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(56px,6vw,80px)}
.wd-panel{
  --u:1px;
  padding:22px 26px 26px;border-radius:18px;border:1px solid rgba(160,210,255,.35);
  background:linear-gradient(160deg,#1e3c64,#102240);
  box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 50px rgba(16,185,129,.1);
  font-family:"Manrope",system-ui,sans-serif;
}
.wd-panel ul{list-style:none;margin:0;padding:0}
.wd-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.wd-panel-head h3{margin:0;font-size:16px;font-weight:700}
.wd-panel-head span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-navy)}
.wd-spot-copy .wd-label{margin:0}
.wd-spot-h{margin:14px 0 0;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.7rem,2.9vw,2.6rem);line-height:1.15;font-weight:700;text-wrap:balance}
.wd-spot-text{margin:20px 0 0;max-width:56ch;font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.6;color:var(--muted-navy)}
.wd-note{margin:16px 0 0;font-size:14px;color:var(--muted-navy)}

/* on soft white: navy and dark grey words, light cards (white, thin
   border), the darker green for small green text. The "What needs fixing"
   panel stays dark, like the panes. */
.panel--soft .wd-text,.panel--soft .wd-card h3 + p,.panel--soft .wd-spot-text,.panel--soft .wd-note{color:var(--muted-soft)}
.panel--soft .wd-card{background:#fff;border-color:var(--line-soft);box-shadow:0 1px 3px rgba(14,31,59,.05)}
.panel--soft .wd-card--on{border-color:var(--emerald-on-light);box-shadow:0 0 0 1px var(--emerald-on-light),0 12px 30px rgba(4,120,87,.1)}
.panel--soft .wd-icon{background:rgba(4,120,87,.1);color:var(--emerald-on-light)}
.panel--soft .wd-label{color:var(--emerald-on-light)}
.panel--soft .wd-panel{color:var(--on-navy);box-shadow:0 24px 56px rgba(14,31,59,.22),0 4px 14px rgba(14,31,59,.12)}

@media (max-width:1100px){
  .wd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wd-spot{grid-template-columns:minmax(0,1fr)}
  .wd-spot-copy{order:-1}
}
@media (max-width:560px){
  .wd-cards{grid-template-columns:minmax(0,1fr)}
  .wd-panel{padding:18px 16px 18px}
  .wd-h,.wn-h{text-align:left;margin-left:0}
  .wd-text,.wn-text{text-align:left;margin-left:0}
}

/* ------------------------------------------- Why not just ask an AI assistant?

   The fourth section: two cards side by side, the AI assistant's muted, the
   METRIS card with an emerald border and a soft glow. Each card is a heading
   and a list, read in order; on wide screens the cards share their rows
   (subgrid), so each point on the left sits level with its answer on the
   right. On a phone they stack, the AI assistant first. */
.wn-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(4,auto);
  column-gap:20px;margin:clamp(40px,5vw,60px) auto 0;max-width:1040px;
}
.wn-card{
  grid-row:span 5;display:grid;grid-template-rows:subgrid;
  padding:26px 28px 14px;border-radius:18px;border:1px solid var(--line-navy);background:rgba(255,255,255,.025);
}
.wn-card h3{
  margin:0 0 6px;display:flex;align-items:center;gap:12px;
  font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:700;
}
.wn-card ul{grid-row:span 4;display:grid;grid-template-rows:subgrid;list-style:none;margin:0;padding:0}
.wn-card li{padding:14px 0;border-top:1px solid rgba(160,210,255,.12);font-size:15.5px;line-height:1.5}
.wn-card--chat{color:var(--muted-navy)}
.wn-card--chat h3{color:#c9d2e0}
.wn-card--chat .wn-mark{color:var(--muted-navy)}
.wn-card--metris{
  border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.06);
  box-shadow:0 0 0 1px rgba(16,185,129,.15),0 0 48px rgba(16,185,129,.18);
}
.wn-mark{flex:none;width:26px;height:auto}
.wn-closing{
  margin:clamp(44px,5vw,64px) auto 0;max-width:30ch;text-align:center;text-wrap:balance;
  font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.25;font-weight:700;
}
/* its second sentence in emerald (Suneeta, Oct 22, 2026; it was muted) */
.wn-closing span{color:var(--emerald)}
@media (max-width:760px){
  .wn-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:16px}
  .wn-card{grid-row:auto;display:block}
  .wn-card ul{display:block}
  .wn-closing{text-align:left;margin-left:0}
}

/* --------------------------------------------- the navbar (Oct 20, 2026)

   Platform, Who We Serve, About Us, FAQs, Pricing and Contact Us, with
   "Book a call" on the right. Who We Serve opens a small list under its
   own button (nav-drop.js: click, Enter or Space; Escape closes it).
   Case Studies is greyed out with "Coming soon" and takes no click. Inside
   the phone menu the list opens as an indented list under its button. */
.nav-drop--small{position:relative}
.nav-menu--small{
  left:0;transform:none;width:max-content;min-width:220px;
  grid-template-columns:minmax(0,1fr);
}
.nav .nav-menu--small a{padding:10px 12px;font-size:14px;white-space:nowrap}
.nav-soon{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;
  font-weight:600;font-size:14px;color:var(--pill-ink);opacity:.55;cursor:not-allowed;
}
.nav-soon small{font-size:11.5px;font-weight:500}
@media (max-width:1239px){
  .nav .nav-drop--small{flex-direction:column;align-items:stretch}
  .nav .nav-pill .nav-dropbtn{text-align:left;padding:11px 14px;font-size:15px;border-radius:10px}
  .nav .nav-menu--small{
    position:static;width:auto;box-shadow:none;border:0;background:none;
    padding:0 0 4px 14px;margin-left:14px;border-left:1px solid var(--pill-line);border-radius:0;
  }
  .nav .nav-menu--small a{font-size:14.5px}
}

/* ======================================================== the platform

   Full platform brief (Oct 22, 2026): the hero's buttons and two-line
   tagline, the Platform menu's divider, the five pillar cards and the three
   showcases on the home page, the five pillar pages, How METRIS measures,
   the FAQ, the METRIS Research block and the two new footer columns. Built
   from the site's own pieces (wd-card, wd-label, panels, eyebrow) so they
   read as part of it. */

/* the key words of a platform heading, in emerald: the hero's emerald on
   navy, the darker one on soft white so it stays readable */
.pf-accent{color:var(--emerald)}
.panel--soft .pf-accent{color:var(--emerald-on-light)}

/* the tagline on two lines, each phrase in its own neon */
.tag-line{display:block}
/* the tagline sits lower: further from the buttons, nearer the points
   (52px above it, 30px below on desktop; 40px and 27px on a phone) */
.home-page .h3-tagline{margin:52px 0 0;white-space:normal}
@media (max-width:767px){ .home-page .h3-tagline{margin-top:40px} }
/* the hero's three buttons: wrap as a row */
.h3-actions{display:flex;flex-wrap:wrap;gap:12px}
/* an outlined button beside a filled one */
.btn--ghost{background:transparent;color:var(--panel-ink,var(--on-navy));box-shadow:inset 0 0 0 1.5px currentColor}
.panel--navy .btn--ghost{color:var(--on-navy)}
.panel--soft .btn--ghost{color:var(--navy)}
.panel--navy .btn--ghost:hover{color:var(--emerald);box-shadow:inset 0 0 0 1.5px var(--emerald)}
.panel--soft .btn--ghost:hover{color:var(--emerald-on-light);box-shadow:inset 0 0 0 1.5px var(--emerald-on-light)}

/* the Platform menu: a thin line between the pillars and the rest */
.nav-div{margin:4px 12px;border:0;border-top:1px solid var(--pill-line)}
/* The dropdowns as frosted glass (FAQ, pricing and menu brief, Oct 23,
   2026): the navy at 88% with the page blurred behind it, a thin light
   border, the same corners. 88% keeps every menu color at 4.5:1 or better
   even over the site's whitest section. Without blur support, the solid
   navy as before. On a phone the lists sit inside the menu panel and stay
   as they are. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (min-width:1240px){
    .nav .nav-menu{
      background:rgba(14,31,59,.88);border-color:rgba(244,246,249,.18);
      -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
    }
  }
}
/* The top bar's own frosted glass moves to a layer behind its contents.
   It looks the same, but a browser won't blur inside something that is
   already blurring, so with the blur on the bar itself the dropdowns
   could only blur the bar, never the page under them. */
.nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(14,31,59,.94);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
}
/* menu words turn emerald on keyboard focus too, as they do under the mouse */
.nav-pill a:focus-visible,.nav-pill button:focus-visible,.nav-menu a:focus-visible{color:var(--emerald)}

/* the five pillar cards: five across, then three, two, one */
.rd-page .stack > .panel.pf-pillars-sec{min-height:0;padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(72px,8vw,112px)}
/* a showcase fits one laptop screen, so the next panel never covers the phone */
.rd-page .stack > .panel.pf-show{min-height:0;padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)}
.pf-pillars-sec .wrap,.pf-show .wrap{max-width:1280px}
.pf-cards{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pf-card{position:relative;display:flex;flex-direction:column;padding-bottom:52px}
.pf-card .wd-label{margin:0}
.pf-card h3{font-size:clamp(1.1rem,1.3vw,1.3rem)}
.pf-card-link{color:inherit;text-decoration:none}
/* the whole card is the link */
.pf-card-link::after{content:"";position:absolute;inset:0;border-radius:16px}
.pf-card-link:focus-visible{outline:none}
.pf-card-link:focus-visible::after{box-shadow:0 0 0 3px var(--emerald)}
.pf-card:hover{border-color:var(--emerald-on-light)}
.pf-card-go{position:absolute;left:24px;bottom:20px;font-size:20px;color:var(--emerald-on-light)}
@media (max-width:1180px){ .pf-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .pf-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .pf-cards{grid-template-columns:minmax(0,1fr)} }

/* a check-in screen in a phone frame, its caption under it */
.pf-phone{margin:0;display:flex;flex-direction:column;align-items:center}
.pf-phone-frame{
  width:min(100%,320px);padding:10px;border-radius:42px;background:#0A1528;
  border:1px solid #2A3F66;box-shadow:0 30px 70px -24px rgba(14,31,59,.55),0 8px 22px -10px rgba(14,31,59,.3);
}
.pf-phone-frame img{display:block;width:100%;height:auto;border-radius:32px}
.pf-phone figcaption{margin:16px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13.5px;color:var(--panel-muted)}
.pf-preview{display:inline-block;padding:3px 10px;border-radius:999px;border:1px dashed currentColor;font-weight:600}
/* a showcase: the screen beside the words, stacked on a phone */
.pf-show-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:clamp(32px,6vw,96px);align-items:center}
.pf-show--flip .pf-phone{order:2}
.pf-show-copy .wd-spot-h{margin:0}
@media (max-width:820px){
  .pf-show-grid{grid-template-columns:minmax(0,1fr)}
  .pf-show--flip .pf-phone{order:0}
  .pf-show-copy{order:-1}
}

/* the pillar pages */
.pf-hero .eyebrow{margin-bottom:14px}
/* a pillar page's top: as tall as its words, not the whole screen */
.rd-page .stack > .panel.pf-hero{min-height:0;padding-bottom:clamp(56px,7vw,96px)}
.rd-page .stack > .panel.pf-main{min-height:0;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(64px,8vw,104px)}
.pf-main .wrap{max-width:1180px}
.pf-main-grid{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(32px,5vw,72px);align-items:start}
.pf-main-grid--one{grid-template-columns:minmax(0,1fr);max-width:820px}
.pf-main-copy > * + *{margin-top:clamp(36px,4vw,52px)}
.pf-h2{margin:0;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.25;font-weight:700;color:var(--panel-ink);text-align:left}
.pf-today-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.pf-today-list li{padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line-soft)}
.pf-today-list p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--muted-soft)}
.pf-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.pf-badge--free{background:rgba(4,120,87,.1);color:var(--emerald-on-light)}
.pf-badge--dev{background:rgba(180,83,9,.1);color:var(--amber-on-cream)}
.pf-badge--preview{border:1px dashed var(--muted-soft);color:var(--muted-soft)}
.pf-checks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.pf-checks li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.6;color:var(--muted-soft)}
.pf-checks li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--emerald-on-light)}
.pf-checks strong{color:var(--navy)}
.pf-who{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pf-who .wd-card h3{margin:0}
.pf-actions{margin:clamp(48px,6vw,72px) 0 0;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .pf-main-grid{grid-template-columns:minmax(0,1fr)}
  .pf-who{grid-template-columns:minmax(0,1fr)}
}
/* the visuals */
.pf-visual{margin:0}
.pf-visual--shot{display:flex;justify-content:center}
.pf-bars-fig,.pf-diagram{padding:24px;border-radius:16px;background:#fff;border:1px solid var(--line-soft);box-shadow:0 1px 3px rgba(14,31,59,.05)}
.pf-sim{display:inline-block;margin:0 0 18px;padding:3px 10px;border-radius:999px;border:1px dashed var(--muted-soft);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted-soft)}
.pf-bars{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pf-bars li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pf-bar-label{font-weight:600;font-size:15px;color:var(--navy)}
.pf-bar-track{display:flex;gap:2px;height:22px}
.pf-bar{display:block;height:100%;background:var(--navy);border-radius:0}
.pf-bar:last-child{border-radius:0 4px 4px 0}
.pf-bar--range{background:repeating-linear-gradient(135deg,rgba(14,31,59,.45) 0 3px,rgba(14,31,59,.15) 3px 7px)}
.pf-bar-val{font-size:14.5px;color:var(--muted-soft)}
.pf-bars-fig figcaption p,.pf-diagram figcaption{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--muted-soft)}
.pf-dia-top{margin:0 auto;max-width:300px;padding:14px 16px;border-radius:12px;background:var(--navy);color:var(--on-navy);font-weight:600;text-align:center;line-height:1.4}
.pf-dia-boxes{position:relative;list-style:none;margin:28px 0 0;padding:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* the line down from the owner, and across to the four boxes */
.pf-dia-boxes::before{content:"";position:absolute;left:50%;top:-28px;height:28px;border-left:2px solid var(--line-soft)}
.pf-dia-boxes::after{content:"";position:absolute;left:25%;right:25%;top:0;border-top:2px solid var(--line-soft)}
.pf-dia-boxes li{position:relative;padding:12px 14px;border-radius:12px;border:1px solid var(--line-soft);background:var(--soft-white);font-size:14.5px;line-height:1.45;color:var(--navy)}
.pf-dia-boxes li:nth-child(-n+2)::before{content:"";position:absolute;left:50%;top:-21px;height:20px;border-left:2px solid var(--line-soft)}
.pf-steps{list-style:none;padding:0;display:grid;gap:12px}
.pf-steps li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line-soft);font-weight:600;color:var(--navy);line-height:1.4}
/* METRIS Track & Check, the end of the Improvement page */
.pf-track{border-top:1px solid var(--line-soft)}
/* the menu link lands with the section flush under the menu bar, so the
   section stacked behind it doesn't show as a strip */
#track-and-check{scroll-margin-top:var(--nav-h)}
.pf-track-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pf-track-tags .wd-label{margin:0}
.pf-track-copy .wd-spot-h{margin:16px 0 0}
.pf-loop figcaption{margin:12px 0 0;text-align:center;font-size:15px;line-height:1.6;color:var(--muted-soft)}
.pf-loop-draw{position:relative}
.pf-loop-draw svg{display:block;width:100%;height:auto}
.pf-loop-arc{fill:none;stroke:var(--emerald-on-light);stroke-width:2}
.pf-loop-node{fill:#fff;stroke:var(--emerald-on-light);stroke-width:2}
.pf-loop-n{font-family:var(--mono);font-size:15px;fill:var(--navy);text-anchor:middle;dominant-baseline:central}
.pf-loop-word{position:absolute;max-width:7em;font-size:15px;font-weight:600;line-height:1.3;color:var(--navy)}
.pf-loop-word--top{transform:translate(-50%,-100%);text-align:center;white-space:nowrap}
.pf-loop-word--bottom{transform:translate(-50%,0);text-align:center;width:max-content}
.pf-loop-word--right{transform:translate(0,-50%);text-align:left;width:max-content}
.pf-loop-word--left{transform:translate(-100%,-50%);text-align:right;width:max-content}
.pf-loop-list{display:none;list-style:none;margin:0;padding:0}
.pf-loop-list li{display:flex;align-items:center;gap:14px;font-weight:600;color:var(--navy);line-height:1.4}
.pf-loop-list li + li{margin-top:34px;position:relative}
.pf-loop-list li + li::before{content:"\2193";position:absolute;left:15px;top:-29px;transform:translateX(-50%);font-size:18px;line-height:1;color:var(--emerald-on-light)}
.pf-track-cards{margin-top:clamp(40px,5vw,56px)}
.pf-track-cards .wd-card h3{color:var(--navy)}
.pf-track-today{margin-top:clamp(40px,5vw,56px)}
.pf-track-today h3{margin:0;font-family:"Manrope",system-ui,sans-serif;font-size:1.15rem;line-height:1.3;font-weight:700;color:var(--navy)}
.pf-track-today .pf-para{margin-top:10px}
@media (max-width:640px){
  .pf-loop-draw{display:none}
  .pf-loop-list{display:block}
}
/* Who We Serve: Small and Mid-Sized Businesses, Startups, Use Cases. The
   platform pages' own styles; only the layout is set here */
.wws-label{margin:16px 0 0}
.pf-main-copy .pf-sim + .pf-para{margin-top:18px}
.wws-cases{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
.wws-cases .wd-card h2{margin:0;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(1.15rem,1.45vw,1.4rem);line-height:1.3;font-weight:700;color:var(--navy)}
.wws-cases .wd-card p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted-soft)}
.wws-cases .wws-look strong{color:var(--navy)}
.wws-close{margin-top:clamp(48px,6vw,72px)}
.wws-close .pf-para{margin-top:12px}
/* The heading section: only as tall as it needs. Its sections scroll
   normally, so the first block's card can overlap it and the drawing can
   hang past its bottom edge (Who We Serve pictures brief, Oct 23, 2026). */
.wws-page .stack > .panel{will-change:auto}
.wws-page .stack > .panel::after{display:none}
.rd-page .stack > .panel.wws-hero{
  position:relative;z-index:2;overflow:visible;min-height:0;display:block;
  --wws-pb:clamp(72px,8vw,96px);
  padding-top:calc(var(--nav-h) + clamp(28px,4vh,48px));padding-bottom:var(--wws-pb);
}
.wws-hero .hero-grid{overflow:hidden}
.rd-page .rd-hero.wws-hero .wrap{max-width:1180px}
.wws-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-areas:"h h" "copy art";column-gap:clamp(24px,4vw,64px);align-items:start}
.rd-page .wws-h1{grid-area:h;max-width:none;white-space:nowrap}
.wws-nobreak{white-space:nowrap}
.wws-copy{grid-area:copy;padding-top:clamp(18px,2.4vw,28px)}
.wws-cue{margin:18px 0 0;font-size:16px;font-weight:600}
.wws-cue a{color:var(--emerald);text-decoration:none}
.wws-cue a:hover{text-decoration:underline}
/* the drawing: a square, the figure at the foot of it as on the home page,
   hanging past the section's bottom edge */
.wws-visual{grid-area:art;position:relative;width:100%;aspect-ratio:1 / 1;margin:-24px 0 calc(-1 * var(--wws-pb) - 40px)}
.wws-art{position:absolute;left:13%;bottom:0;width:74%}
.wws-art svg{display:block;width:100%;height:auto}
.wws-visual--tiles .wws-art{left:4%;width:92%}
/* Use cases: its card runs the full width, so the drawing stops just past
   the card's top edge, the shoulders tucked behind it */
.wws-visual--tiles{margin-bottom:calc(-1 * var(--wws-pb) + 48px)}
.wws-bubbles{list-style:none;margin:0;padding:0}
.wws-bubble{font-size:clamp(1.05rem,1.25vw,1.3rem)}
/* above the head on the left and right, the dots below, pointing in; the
   third on the left, beside the face, its dots pointing right */
.wws-bubble--1{right:56%;bottom:70%;max-width:44%}
.wws-bubble--1::before{right:12%;bottom:-17px}
.wws-bubble--1::after{right:5%;bottom:-29px}
.wws-bubble--2{left:52%;bottom:80%;max-width:46%}
.wws-bubble--2::before{left:12%;bottom:-17px}
.wws-bubble--2::after{left:5%;bottom:-29px}
.wws-bubble--3{right:66%;top:52%;max-width:34%}
.wws-bubble--3::before{right:-17px;top:40%}
.wws-bubble--3::after{right:-29px;top:30%}
/* the first block, on a white card over the heading section's foot */
.wws-main{padding-top:0 !important}
/* the content above the heading section, so the card lies over it */
.wws-main > .wrap{z-index:3}
.wws-lift{
  position:relative;z-index:3;margin-top:-72px;padding:clamp(22px,3vw,32px);
  border-radius:16px;background:#fff;border:1px solid var(--line-soft);
  box-shadow:0 24px 56px rgba(14,31,59,.14),0 4px 14px rgba(14,31,59,.06);
}
.wws-lift .pf-para:last-child{margin-bottom:0}
.wws-lift .wws-cases{margin-top:20px}
.wws-cases--rest{margin-top:14px}
.wws-main .pf-main-copy > section:first-child > .pf-para:first-of-type{margin-top:24px}
/* Also see: the three pages linked, above the buttons */
.wws-also{margin:clamp(40px,5vw,56px) 0 0;font-size:15px;line-height:1.6;color:var(--muted-soft)}
.wws-also a{color:var(--emerald-on-light);font-weight:600;white-space:nowrap}
.wws-also + .pf-actions{margin-top:20px}
@media (max-width:900px){
  .rd-page .wws-h1{white-space:normal}
}
@media (max-width:767px){
  .rd-page .stack > .panel.wws-hero{--wws-pb:64px}
  .wws-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "copy" "art"}
  /* under the words, smaller, kept inside the heading section */
  .wws-visual{width:min(100%,340px);justify-self:center;margin:8px 0 0}
  .wws-bubble{font-size:.95rem;padding:6px 10px 8px;border-radius:14px}
  .wws-lift{margin-top:-40px}
}
@media (max-width:900px){
  .wws-cases{grid-template-columns:minmax(0,1fr)}
}
/* Pricing (FAQ, pricing and menu brief, Oct 23, 2026): four tap
   questions, each answer a pill at least 44px tall; the result card under
   them; what's always true. The site's own colors, card and list styles */
.pr-fit .wrap{max-width:900px}
.pr-form{margin-top:8px}
.pr-q{margin:28px 0 0;padding:0;border:0;min-width:0}
.pr-q-h{padding:0;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:18px;line-height:1.35;color:var(--navy)}
.pr-opts{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.pr-opt{position:relative;cursor:pointer}
.pr-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pr-opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line-soft);font-size:15.5px;font-weight:600;color:var(--navy)}
.pr-opt:hover span{border-color:var(--emerald-on-light)}
.pr-opt input:focus-visible + span{outline:2px solid var(--emerald-on-light);outline-offset:2px}
.pr-opt input:checked + span{border-color:var(--emerald-on-light);background:rgba(4,120,87,.1);color:var(--emerald-on-light)}
.pr-result{margin-top:clamp(32px,4vw,44px);padding:clamp(22px,3vw,30px);border-radius:16px;background:#fff;border:1px solid var(--line-soft);box-shadow:0 1px 3px rgba(14,31,59,.05)}
.pr-result p{margin:0;font-size:16.5px;line-height:1.6;color:var(--muted-soft)}
.pr-result strong{color:var(--navy)}
.pr-free-act{margin-top:14px !important}
.pr-level{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-soft)}
.pr-level-name{margin-top:10px !important}
.pr-touch{margin-top:10px !important}
.pr-price{margin-top:14px !important;font-weight:600;color:var(--navy) !important}
.pr-talk{margin-top:22px !important}
.pr-always{margin-top:clamp(48px,6vw,72px)}
/* The Contact page, /talk (contact brief, Oct 23, 2026): the form on the
   left, how to reach us on the right; on a phone the form first. The
   fields are the Pricing form's (rd-form); the answers to "What can we help
   with?" are the Pricing page's pills */
/* the Contact and Pricing heading sections: only as tall as their words */
.rd-page .stack > .panel.ct-hero,.rd-page .stack > .panel.rd-pricing-hero{min-height:0;padding-bottom:clamp(56px,7vw,96px)}
.ct-sec .wrap{max-width:1180px}
.ct-grid{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:clamp(32px,6vw,96px);align-items:start;width:100%}
.ct-form-col .rd-form{margin-top:clamp(24px,3vw,32px)}
.ct-form-col .rd-field + .rd-field{margin-top:18px}
.ct-opt{font-weight:400;color:var(--muted-navy)}
.ct-topics{border:0;padding:0;margin:18px 0 0;min-width:0}
.ct-topics legend{padding:0;margin-bottom:10px}
.ct-sec .pr-opt span{background:transparent;border-color:var(--line-navy);color:var(--on-navy)}
.ct-sec .pr-opt:hover span{border-color:var(--emerald)}
.ct-sec .pr-opt input:checked + span{border-color:var(--emerald);background:rgba(16,185,129,.14);color:var(--emerald)}
.ct-sec .pr-opt input:focus-visible + span{outline-color:var(--emerald)}
.ct-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ct-privacy{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--muted-navy)}
.ct-thanks{margin:clamp(24px,3vw,32px) 0 0;padding:22px 24px;border-radius:14px;border:1px solid rgba(16,185,129,.55);background:rgba(16,185,129,.08);font-size:18px;line-height:1.55;color:var(--on-navy)}
.ct-thanks:focus{outline:none}
.ct-reach{padding:clamp(22px,3vw,30px);border-radius:16px;border:1px solid var(--line-navy);background:rgba(255,255,255,.03)}
.ct-reach .rd-h3{margin:0}
.ct-email{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:18px}
.ct-email a{color:var(--on-navy);overflow-wrap:anywhere}
.ct-copy{min-height:44px;padding:0 18px}
.ct-address:empty{min-height:24px}
.ct-icons{margin:8px 0 0;display:flex;gap:10px}
/* the outside links as icons, here and in the footer: 44px to tap */
.foot-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--muted-navy)}
.foot-icon:hover,.foot-icon:focus-visible{color:var(--emerald)}
.foot-icons{display:flex;flex-wrap:wrap;gap:4px;margin-left:-11px}
/* Suneeta's logo: a little larger than the line icons, as sent; its name
   shows in a small label on hover and keyboard focus */
.foot-icon--logo{position:relative;width:48px;height:48px}
.foot-icon--logo img{display:block;width:30px;height:30px}
.foot-icon--logo::after{
  content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 6px);
  padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;
  font-size:13px;font-weight:600;line-height:1.3;color:var(--on-navy);
  background:var(--navy);border:1px solid rgba(244,246,249,.18);box-shadow:0 8px 20px rgba(0,0,0,.3);
  opacity:0;transition:opacity .15s ease;
}
/* in the footer the logo sits in the rightmost column, so its label runs
   left from it; on the Contact page it sits on the left, so it runs right */
.ct-icons .foot-icon--logo::after{right:auto;left:0}
.foot-icon--logo:hover::after,.foot-icon--logo:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){ .foot-icon--logo::after{transition:none} }
@media (max-width:900px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
}
/* How METRIS measures */
.pf-measure .wrap{max-width:980px}
.pf-table-wrap{overflow-x:auto}
.pf-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line-soft);border-radius:14px}
.pf-table-h{margin-bottom:16px}
.pf-table th,.pf-table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;font-size:15.5px;line-height:1.55}
.pf-table thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-on-light)}
.pf-table tbody th{color:var(--navy);white-space:nowrap}
.pf-table td{color:var(--muted-soft)}
.pf-table tbody tr:last-child > *{border-bottom:0}
.pf-math{margin-top:clamp(40px,5vw,56px)}
.pf-para{margin:24px 0 0;max-width:70ch;font-size:16.5px;line-height:1.65;color:var(--muted-soft)}
.pf-para strong{color:var(--navy)}
@media (max-width:640px){
  .pf-table thead{display:none}
  .pf-table,.pf-table tbody,.pf-table tr,.pf-table th,.pf-table td{display:block}
  .pf-table tbody th{padding-bottom:4px;white-space:normal}
  .pf-table td{border-bottom:0;padding-top:4px}
  .pf-table tbody tr{border-bottom:1px solid var(--line-soft)}
}
/* the FAQ */
.pf-faq .wrap{max-width:860px}
.pf-faq-list{margin:0;display:grid;gap:14px}
.pf-faq-item{border-radius:14px;background:#fff;border:1px solid var(--line-soft)}
/* the whole question is the button; the + sits on the right */
.pf-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;border-radius:14px}
.pf-faq-item summary::-webkit-details-marker{display:none}
.pf-faq-item summary:focus-visible{outline:2px solid var(--emerald-on-light);outline-offset:2px}
.pf-faq-q{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:18px;color:var(--navy)}
.pf-faq-a{margin:-6px 0 0;padding:0 22px 20px;font-size:16px;line-height:1.6;color:var(--muted-soft)}
/* the + in the mouse trail's line: 1.25px, emerald. Open, its upright turns
   flat and it reads as a minus */
.pf-faq-sign{flex:none;width:22px;height:22px;fill:none;stroke:rgb(16,185,129);stroke-width:1.25;stroke-linecap:round}
.pf-faq-v{transform-origin:10px 10px;transition:transform .25s ease}
.pf-faq-item[open] .pf-faq-v{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){ .pf-faq-v{transition:none} }
.pf-faq-list a{color:var(--emerald-on-light);text-decoration:underline;text-underline-offset:3px}
/* the METRIS Research block at the foot of /research */
.pf-research .wrap{max-width:860px}
.pf-research-h{text-align:left}
.pf-research-badge{margin:14px 0 0}

/* the footer, with the Platform and Measurement columns: the wordmark,
   then six link columns; narrower, three and then two per row */
.foot-cols{grid-template-columns:2fr repeat(6,minmax(0,1fr));gap:28px}
@media (max-width:1180px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
  .foot-cols > :first-child{grid-column:1 / -1}
}
@media (max-width:700px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
}

/* ======================================== the interactive money phone

   Interactive economics brief (Oct 22, 2026). In the home page showcase
   "Know what AI costs and what it gives back.": the same phone frame as the
   screenshot it replaced, the same size, with the component inside it on
   navy. Taller than the frame, it scrolls inside. Under 640px wide it fills
   the width, with no frame. Every control is at least 44 by 44 pixels. */
.pf-econ{
  aspect-ratio:390 / 844;overflow-y:auto;border-radius:32px;background:var(--navy);color:var(--on-navy);
  padding:20px 14px 22px;text-align:left;scrollbar-width:thin;scrollbar-color:var(--line-navy) transparent;
}
.pf-econ-label-sm{margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--emerald)}
.pf-econ-h{margin:6px 0 0;font-family:"Manrope",system-ui,sans-serif;font-size:19px;line-height:1.25;font-weight:700;color:var(--on-navy)}
.pf-econ-text{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted-navy)}
.pf-econ-ctl{margin-top:14px}
.pf-econ-ctl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pf-econ-ctl-top label{font-size:12.5px;font-weight:600;line-height:1.35}
.pf-econ-ctl-top output{flex:none;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:14px;color:var(--emerald)}
.pf-econ-ctl-row{display:flex;align-items:center;gap:6px;margin-top:2px}
.pf-econ-step{
  flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-navy);background:var(--card-navy);
  color:var(--on-navy);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.pf-econ-step:hover{border-color:var(--emerald);color:var(--emerald)}
.pf-econ-ctl-row input[type=range]{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--emerald);cursor:pointer;background:transparent}
.pf-econ-step:focus-visible,.pf-econ-ctl-row input[type=range]:focus-visible,.pf-econ-sw:focus-visible,.pf-econ-more:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.pf-econ-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12.5px;font-weight:600;line-height:1.35}
.pf-econ-sw{
  flex:none;min-width:76px;height:44px;padding:0 10px 0 6px;border-radius:999px;border:1px solid var(--line-navy);
  background:var(--card-navy);color:var(--muted-navy);display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-weight:700;
}
.pf-econ-knob{width:26px;height:26px;border-radius:50%;background:var(--muted-navy);transition:transform .15s ease}
.pf-econ-sw[aria-checked="true"]{border-color:var(--emerald);background:rgba(16,185,129,.14);color:var(--emerald);flex-direction:row-reverse;padding:0 6px 0 10px}
.pf-econ-sw[aria-checked="true"] .pf-econ-knob{background:var(--emerald)}
.pf-econ-cards{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.pf-econ-card{padding:10px 12px;border-radius:12px;background:var(--card-navy);border:1px solid var(--line-navy)}
.pf-econ-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:var(--muted-navy)}
.pf-econ-tag{flex:none;padding:1px 7px;border-radius:999px;border:1px solid var(--line-navy);font-size:10.5px;font-weight:600;color:var(--muted-navy)}
.pf-econ-card b{display:block;margin-top:2px;font-family:"Manrope",system-ui,sans-serif;font-size:20px;font-weight:700;color:var(--on-navy)}
.pf-econ-card-line{display:block;margin-top:2px;font-size:11.5px;color:var(--muted-navy)}
.pf-econ-card--green{border-color:rgba(16,185,129,.6)}
.pf-econ-card--green b{color:var(--emerald)}
.pf-econ-card--amber{border-color:rgba(245,158,11,.6)}
.pf-econ-card--amber b{color:var(--amber-on-navy)}
.pf-econ-note{margin:10px 0 0;font-size:11px;line-height:1.45;color:var(--muted-navy)}
.pf-econ-verdict{margin-top:14px;padding:12px;border-radius:14px;border:1px solid var(--line-navy);background:rgba(255,255,255,.03)}
.pf-econ-verdict--green{border-color:rgba(16,185,129,.6)}
.pf-econ-verdict--amber{border-color:rgba(245,158,11,.6)}
.pf-econ-result{margin:0;display:flex;align-items:center;gap:8px;font-family:"Manrope",system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1.3}
.pf-econ-dot{flex:none;width:10px;height:10px;border-radius:50%}
.pf-econ-verdict--green .pf-econ-result{color:var(--emerald)}
.pf-econ-verdict--green .pf-econ-dot{background:var(--emerald)}
.pf-econ-verdict--amber .pf-econ-result{color:#FCD9A0}
.pf-econ-verdict--amber .pf-econ-dot{background:var(--amber-on-navy)}
.pf-econ-line,.pf-econ-change,.pf-econ-step-text{margin:6px 0 0;font-size:12.5px;line-height:1.45}
.pf-econ-change{color:var(--muted-navy)}
.pf-econ-more{margin-top:10px;min-height:44px;padding:10px 18px;font-size:13.5px;width:100%;justify-content:center}
.pf-econ-panel{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-navy)}
.pf-econ-step-text{font-weight:600}
.pf-econ-go{margin-top:10px;min-height:44px;padding:10px 18px;font-size:13.5px;width:100%;justify-content:center}
/* a phone: the component across the width, no frame, no inner scrolling */
@media (max-width:639px){
  .pf-phone--live .pf-phone-frame{width:100%;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
  .pf-econ{aspect-ratio:auto;overflow:visible;border-radius:16px;border:1px solid var(--line-navy);padding:20px 16px 22px}
}

/* the two screenshot phones that scroll once (phone-scroll.js): the screen
   shows one phone screen of the full-length picture; the picture moves */
.pf-phone-screen{aspect-ratio:390 / 844;overflow:hidden;border-radius:32px}
.pf-phone-screen img{border-radius:0;will-change:transform}