/* ============================================================
   SILVER SUITS — LIGHT EDITORIAL DESIGN SYSTEM
   ------------------------------------------------------------
   The deck's Silver language (frosted glass, one chrome rim on
   every surface, ambient auras under the glass, the AI mark)
   translated into a LIGHT-ONLY warm palette.

   Light-only means exactly that: no dark nav, no dark cards,
   no dark product frames, no dark footer, no dark-mode block.
   Charcoal is a TEXT colour here — never a background.

   Contrast comes from type scale, layout, spacing and tonal
   shifts between warm white / cream / pale grey / lavender.

   Glass is genuinely translucent here — panes sit at .34–.68,
   the deck's own range, not the .9 that turns a pane into a
   filled card. That only works because the backdrop carries
   colour: .field's blooms and each panel's .aura are what the
   glass refracts. Flatten those and every surface reads as a box.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* ---- type ------------------------------------------------ */
  /* The deck's typeface, top to bottom. IBM Plex Sans is the whole
     system — one family, weight and tracking carry the hierarchy. */
  --display: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- silver surfaces (deck --surface-a/-b) --------------- */
  --paper:    #E9EBEF;   /* page base — the deck's silver        */
  --paper-2:  #EDEFF2;   /* lighter silver — lifted surfaces     */
  --tone-a:   #E4E6EB;   /* deeper silver — alternate sections   */
  --tone-b:   #EFF1F4;   /* lighter silver — alternate sections  */
  --grey:     #DFE2E7;   /* recessed fill (toggles, inactive)    */
  --grey-2:   #D2D6DD;   /* deepest neutral fill                 */

  /* ---- the one accent -------------------------------------- */
  /* Silver is monochrome; the brand navy is the only colour, and only
     on the mark, primary actions and active states — never a surface. */
  --navy:     #14688F;
  --navy-d:   #0E5075;
  --navy-ink: #0B4763;
  --accent-soft: #DCE9F0;   /* navy at ~10% over silver — "good" states */
  --accent-edge: #B9D3E1;

  /* ---- ink -------------------------------------------------
     The deck's ramp (#1a1a1e / #5f636b / #8b8f98) is set for slides,
     where type is large. On a web page ink-3 and ink-4 fail WCAG, so
     they're darkened here and tuned against the WORST backdrop on the
     page — the deepest aura bloom under a band, #D3D7DF — not the base
     silver. ink-3 4.67:1, ink-4 3.30:1 (icons/large only). */
  --ink:   #1A1A1E;
  --ink-2: #4E535C;
  --ink-3: #575C64;
  --ink-4: #6E737D;

  /* ---- hairlines ------------------------------------------- */
  --line:   rgba(26,26,30,.09);
  --line-2: rgba(26,26,30,.17);
  --line-l: rgba(20,104,143,.22);

  /* ---- the material (deck values, verbatim) ---------------- */
  /* Silver chrome rim — the deck's own gradient, unchanged. */
  --chrome:   linear-gradient(145deg,#ffffff,#cfd3da 38%,#f2f3f6 60%,#b2b7c0 100%);

  /* Liquid-glass edge — ONE hairline with a vertical falloff, not a
     diagonal metallic. Bright specular across the top, resolving to a
     soft contact line at the bottom. On a dark backdrop the top of this
     ring is what you see (the reference); on this light page it's the
     bottom. Same ring either way — that's what makes it read as glass
     rather than as an outlined box. */
  --edge: linear-gradient(180deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.60) 20%,
            rgba(255,255,255,.10) 44%,
            rgba(120,126,136,.20) 70%,
            rgba(70,78,92,.34) 100%);

  /* Glass fill for the edge treatment — vertical, and lower than the
     panel fill so the backdrop, not the pane, carries the colour. */
  --glass-lq: linear-gradient(180deg,
                rgba(255,255,255,.46),
                rgba(255,255,255,.24) 48%,
                rgba(232,234,239,.32));
  --chrome-p: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.2) 45%, rgba(255,255,255,.55));

  /* Glass fills — the deck's opacities and its silver tint.
     Deliberately LOW: a pane at .9 is a filled card wearing a blur.
     Only works because .field and .aura put silver behind them. */
  --glass:    linear-gradient(158deg, rgba(255,255,255,.55), rgba(232,234,239,.34) 55%, rgba(246,247,249,.5));
  --glass-2:  linear-gradient(160deg, rgba(255,255,255,.62), rgba(238,240,245,.38));
  /* nested panes step UP in opacity so panel-in-panel reads as depth */
  --glass-in: linear-gradient(158deg, rgba(255,255,255,.66), rgba(236,238,243,.46) 58%, rgba(248,249,251,.56));

  /* ---- shadows (deck base rgba(70,78,92)) ------------------ */
  --sh-1: 0 1px 2px rgba(70,78,92,.05), 0 5px 14px -8px rgba(70,78,92,.16);
  --sh-2: 0 6px 16px -10px rgba(70,78,92,.28), 0 24px 50px -24px rgba(70,78,92,.5);
  --sh-3: 0 8px 20px -12px rgba(70,78,92,.32), 0 34px 66px -28px rgba(70,78,92,.56);
  --sh-p: 0 10px 24px -12px rgba(11,71,99,.5);
  /* specular top edge — what makes a pane read as glass */
  --sh-in: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -3px 10px rgba(120,126,136,.1);

  /* ---- geometry -------------------------------------------- */
  --r-sm: 14px;  --r: 20px;
  --r-lg: 28px;  --r-xl: 38px;  --r-pill: 999px;

  --maxw: 1200px;
  --nav-h: 74px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --z-aura:-1; --z-rim:5; --z-nav:90;
}
/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:104px; }
html,body{ min-height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--grey); color:var(--navy-ink); }
:focus-visible{
  outline:2.5px solid var(--navy);
  outline-offset:3px;
  border-radius:6px;
}
.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--paper-2); color:var(--navy-ink);
  padding:12px 18px; border-radius:var(--r-pill);
  font-weight:600; box-shadow:var(--sh-2);
  transition:top .2s var(--ease);
}
.skip:focus{ top:16px; }
.wrap{ width:min(var(--maxw), calc(100% - 48px)); margin-inline:auto; }
/* ---- ambient light field ----------------------------------
   Glass at .34–.62 needs colour behind it or it reads as nothing.
   The deck solves this by sitting on mid-tone silver; here the base
   stays warm white (light-only) and the colour comes from stronger,
   slowly drifting blooms instead. These are the thing the panes
   refract — weaken them and every surface flattens into a box. */
.field{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, #EDEFF2, #E9EBEF 70%);
}
.field::after{
  content:""; position:absolute; inset:-18%;
  background:
    radial-gradient(30% 42% at 18% 24%, rgba(214,219,228,.95), transparent 66%),
    radial-gradient(28% 40% at 84% 20%, rgba(188,195,208,.8),  transparent 66%),
    radial-gradient(32% 44% at 72% 84%, rgba(236,238,242,.9),  transparent 66%),
    radial-gradient(30% 42% at 24% 82%, rgba(176,183,197,.75), transparent 66%);
  animation:drift 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{
  from{ transform:translate3d(-1.5%,1%,0) scale(1.03); }
  to  { transform:translate3d(1.5%,-1%,0) scale(1.1); }
}
/* fine paper tooth — warms the white, never greys it */
.tooth{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* The UA stylesheet's `[hidden]{display:none}` loses to any author `display`,
   and this site sets display on nearly every component — so `hidden` silently
   did nothing on .nav__link (flex) and .mcard (grid). This is the whole point
   of the attribute; make it win. */
[hidden]{ display:none !important; }

/* ============================================================
   3. MATERIAL RECIPES
   ------------------------------------------------------------
   One rim recipe everywhere — a surface without it looks like a
   different app. Listed explicitly rather than sprinkled through
   the components so the thread stays in one place.
   ============================================================ */
.rim,
.drop, .mega, .mm__card,
.story, .stat4, .faq__item, .pillar,
.mini, .vstage, .video__frame, .video__play, .contact, .seal,
.fstage, .tile, .fig,
.ctl, .chip, .hero__badge, .jstep, .lgo, .toggle button.is-on{
  position:relative;
  isolation:isolate;
}
.rim::after,
.drop::after, .mega::after, .mm__card::after,
.story::after, .stat4::after,
.faq__item::after, .pillar::after, .mini::after,
.vstage::after, .video__frame::after,
.fstage::after, .tile::after, .fig::after,
.video__play::after, .contact::after, .seal::after,
.ctl::after, .chip::after, .hero__badge::after, .jstep::after,
.lgo::after, .toggle button.is-on::after{
  content:""; position:absolute; inset:0; z-index:var(--z-rim);
  pointer-events:none; border-radius:inherit; padding:1.1px;
  background:var(--chrome);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.9;
}
.lgo::after{ opacity:.62; }   /* let the mark lead, not the frame */
/* nested surfaces read quieter so the rims don't stack into noise */
.chip::after, .jstep::after{ opacity:.7; }
/* The glass panel — the container.
   Every pane blurs. A glass surface that doesn't refract is just a
   tinted rectangle, and one unblurred pane next to a blurred one is
   what makes a set of cards read as "fill frames". */
.glass,
.story, .stat4, .faq__item, .pillar, .vstage, .contact,
.tile, .fig, .drop, .mega, .mm__card{
  background:var(--glass);
  backdrop-filter:blur(26px) saturate(172%);
  -webkit-backdrop-filter:blur(26px) saturate(172%);
  box-shadow:var(--sh-2), var(--sh-in);
}
/* nested pane — steps up a tone so depth comes from stacking, not borders */
.video__play{
  background:var(--glass-in);
  backdrop-filter:blur(18px) saturate(165%);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
}
/* ambient aura — glass over flat colour just looks like flat colour */
.aura::before,
.contact::before, .vstage::before,
.pillar__stage::before, .fstage::before{
  content:""; position:absolute; inset:0; z-index:var(--z-aura);
  pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(30% 42% at 18% 24%, rgba(214,219,228,.95), transparent 66%),
    radial-gradient(28% 40% at 84% 20%, rgba(188,195,208,.8),  transparent 66%),
    radial-gradient(32% 44% at 72% 84%, rgba(236,238,242,.9),  transparent 66%),
    radial-gradient(30% 42% at 24% 82%, rgba(176,183,197,.75), transparent 66%);
  animation:aura 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes aura{
  from{ transform:translate3d(-2.5%,1.5%,0) scale(1.05); }
  to  { transform:translate3d(2.5%,-1.5%,0) scale(1.13); }
}
/* ============================================================
   4. TYPE SCALE — the primary source of contrast
   ============================================================ */
.h-display{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(42px, 6.4vw, 80px);
  line-height:1.02;
  letter-spacing:-.032em;
  margin:0;
  color:var(--ink);
}
.h-section{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px, 3.7vw, 48px);
  line-height:1.08;
  letter-spacing:-.026em;
  margin:0;
  color:var(--ink);
}
.h-card{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  line-height:1.22;
  letter-spacing:-.016em;
  margin:0;
  color:var(--ink);
}
.lede{
  font-size:clamp(16.5px, 1.35vw, 19px);
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
  max-width:56ch;
}
/* Deck signature: mono caps label trailed by a hairline that runs out
   to the edge of the measure. */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 18px;
}
.eyebrow::after{
  content:""; flex:1; height:1px; min-width:40px;
  background:linear-gradient(90deg, var(--line-2), transparent);
}
/* Centred variant needs a rule on BOTH sides — with the ::after taking
   flex:1, justify-content:center alone does nothing. */
.head.center .eyebrow, .eyebrow--c{ justify-content:center; }
.head.center .eyebrow::before, .eyebrow--c::before{
  content:""; flex:1; height:1px; min-width:40px;
  background:linear-gradient(270deg, var(--line-2), transparent);
}
/* Deck signature: two-tone heading — one weight, two inks. The trailing
   clause drops to --ink-3 so the sentence has a stress without colour. */
.dim{ color:var(--ink-3); }
/* Emphasis, not a marker. A filled band reads as a highlighter pen and
   fights the photograph behind it; weight plus the brand navy says the
   same thing quietly. No background, no padding, no box. */
.mark-hl{
  color:var(--navy-ink);
  font-weight:700;
}
/* ============================================================
   5. SECTION RHYTHM — tonal bands, all light
   ============================================================ */
.section{ position:relative; padding:clamp(76px, 9vw, 128px) 0; }
.section--tight{ padding:clamp(56px, 6vw, 88px) 0; }
/* Bands stay sheer — at .9 they'd cover the field and starve the glass.
   Enough tone to separate sections, not enough to blank the blooms. */
/* Bands stay sheer — at .9 they'd cover the field and starve the glass.
   Two silver tones is all the section separation the deck ever uses. */
.band-a{ background:linear-gradient(180deg, rgba(228,230,236,.55), rgba(236,238,243,.32)); }
.band-b{ background:linear-gradient(180deg, rgba(239,241,244,.6),  rgba(246,247,249,.34)); }
.band-a, .band-b{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.head{ margin-bottom:clamp(38px, 4.4vw, 62px); }
.head.center{ text-align:center; }
.head.center .lede{ margin-inline:auto; }
.head .lede{ margin-top:16px; }
/* ============================================================
   6. CONTROLS — one glass-control recipe for all of them
   ============================================================ */
.ctl{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:12px 22px;
  border:0;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  backdrop-filter:blur(14px) saturate(162%);
  -webkit-backdrop-filter:blur(14px) saturate(162%);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -3px 8px rgba(120,126,136,.1),
    0 6px 14px -8px rgba(70,78,92,.34);
  transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.ctl:hover{
  transform:translateY(-2px);
  background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(243,245,248,.86));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -3px 8px rgba(70,78,92,.1),
    0 14px 28px -12px rgba(70,78,92,.4);
}
.ctl:active{ transform:translateY(0) scale(.97); }
/* The global focus ring is brand navy, which vanishes on the navy primary.
   Give controls their own: a white core with a navy halo so it survives on
   glass, on the accent, and over the photograph. */
.ctl:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4.5px var(--navy),
    0 8px 20px -8px rgba(70,78,92,.45);
}

/* ---- primary CTA motion ---------------------------------------
   A light travelling around the edge. This reuses the ::after ring the
   whole design already puts on every surface — the conic gradient rotates
   underneath and the mask shows only the 1.1px border, so the motion
   lives in the rim rather than across the face.

   The angle is animated through a registered custom property; without
   @property a custom angle is not interpolatable and the ring would jump.
   Where @property is unsupported the gradient simply sits still, which
   still reads as a correct rim. */
@property --ctl-edge{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
.ctl--primary::after{
  opacity:1;
  background:conic-gradient(from var(--ctl-edge),
    rgba(255,255,255,.16) 0deg,
    rgba(255,255,255,.95) 38deg,
    rgba(255,255,255,.34) 86deg,
    rgba(255,255,255,.14) 168deg,
    rgba(255,255,255,.16) 360deg);
  animation:ctlEdge 4.2s linear infinite;
}
@keyframes ctlEdge{ to{ --ctl-edge:360deg; } }
.ctl--primary:hover::after{ animation-duration:1.7s; }
.ctl--primary svg{ transition:transform .22s var(--ease); }
.ctl--primary:hover svg{ transform:translateX(3px); }
.ctl--primary{
  background:linear-gradient(160deg, #1E7BA5, var(--navy) 55%, #0C4763);
  color:#fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 0 -3px 8px rgba(4,40,58,.3),
    var(--sh-p);
}
.ctl--primary:hover{
  background:linear-gradient(160deg, #2789B4, var(--navy-d) 60%, #093A52);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.5),
    inset 0 -3px 8px rgba(4,40,58,.32),
    0 16px 32px -12px rgba(11,71,99,.55);
}
.ctl--ghost{
  background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(238,240,245,.35));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 4px 10px -8px rgba(70,78,92,.3);
}
.ctl--lg{ min-height:54px; padding:15px 30px; font-size:16.5px; }
.ctl--sm{ min-height:38px; padding:9px 16px; font-size:13.5px; }
.ctl--wa{
  background:linear-gradient(160deg, #1E7BA5, var(--navy-ink) 55%, #0C4763);
  color:#fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(4,40,58,.3),
    0 10px 24px -12px rgba(11,71,99,.5);
}
.ctl--wa::after{ background:var(--chrome-p); opacity:.7; }
.ctl--wa:hover{ background:linear-gradient(160deg, #2789B4, #0C4763 60%, #093A52); }
/* pill chips */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  font-size:13px; font-weight:500;
  color:var(--ink-2);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.9);
}
.chip--green{ background:linear-gradient(160deg, rgba(232,242,247,.95), rgba(180,212,227,.75)); color:var(--navy-ink); }
.chip--clay{ background:linear-gradient(160deg, rgba(238,239,242,.9), rgba(224,227,232,.85)); color:var(--ink-2); }
/* ============================================================
   7. THE MARK — Silver's AI orb, light chrome
   ============================================================ */
.mark{
  position:relative; flex:none;
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #fff 0%, #F3F4F7 54%, #E9EBEF 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -4px 9px rgba(120,126,136,.14),
    0 6px 14px -8px rgba(70,78,92,.4);
  isolation:isolate;
}
.mark::before{
  content:""; position:absolute; inset:0; border-radius:50%; padding:2px;
  background:conic-gradient(from 0deg,
    #f4f5f7, #b4b9c2 12%, #f7f8fa 26%, #a6acb6 42%,
    #eef0f3 58%, #9fa5af 72%, #f5f6f8 86%, #b4b9c2 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:spin 9s linear infinite;
  will-change:transform;
}
.mark--slow::before{ animation-duration:12s; }
.mark--lg{ width:52px; height:52px; }
.mark--lg::before{ padding:2.6px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* voice level meter */
.wave{ display:inline-flex; align-items:center; gap:3px; height:16px; }
.wave i{
  display:block; width:3px; height:100%;
  border-radius:2px;
  background:var(--navy);
  opacity:.75;
  transform-origin:center;
  animation:lvl 1.15s var(--ease-soft) infinite;
  animation-delay:calc(var(--i, 0) * -.13s);
}
.wave i:nth-child(1){ --i:1 } .wave i:nth-child(2){ --i:2 }
.wave i:nth-child(3){ --i:3 } .wave i:nth-child(4){ --i:4 }
.wave i:nth-child(5){ --i:5 } .wave i:nth-child(6){ --i:6 }
.wave i:nth-child(7){ --i:7 }
@keyframes lvl{
  0%  { transform:scaleY(.28) }
  22% { transform:scaleY(.95) }
  46% { transform:scaleY(.42) }
  70% { transform:scaleY(1)   }
  100%{ transform:scaleY(.28) }
}
/* ============================================================
   8. NAV — floating light glass triad
   ============================================================ */
/* ONE continuous bar, not three floating pills. The logo, the links and the
   CTA share a single pane; the glass, the rim and the shadow belong to the
   bar, so the groups inside are plain layout boxes. */
/* .lq sets position:relative for its rim pseudo-element and is declared AFTER
   this rule, so putting `lq` on the nav silently turned position:fixed into
   relative — the bar stopped sticking and, because it then took layout space,
   pushed the hero down by its own height and clipped the top of the photo.
   The double class outranks .lq; do not drop it. */
.nav, .nav.lq{
  position:fixed; top:16px; left:0; right:0; z-index:var(--z-nav);
  width:min(calc(var(--maxw) + 40px), calc(100% - 32px));
  margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  min-height:66px;
  padding:7px;
  border-radius:var(--r-pill);
  transition:border-radius .2s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
/* An open menu is not a panel floating under the bar — it is the same sheet
   continuing downward. The bar squares its bottom corners and the panel takes
   its full width, so the seam between them disappears. */
.nav.is-menu{
  border-radius:30px 30px 0 0;
  background:linear-gradient(180deg, #FCFDFE, #FAFBFD);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* ---- .lq — the liquid-glass recipe ------------------------------
   Vertical low-opacity fill, heavy blur, a top specular line, and the
   --edge hairline. The shadow is two-part on purpose: a tight contact
   line plus a wide soft lift, which is what separates a pane floating
   above the page from a card sitting flat on it.
   Being rolled out section by section — nav and hero media so far. */
.lq{
  position:relative; isolation:isolate;
  background:var(--glass-lq);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(70,78,92,.05),
    0 1px 2px rgba(70,78,92,.1),
    0 12px 28px -10px rgba(70,78,92,.3),
    0 30px 60px -26px rgba(70,78,92,.34);
}
.lq::after{
  content:""; position:absolute; inset:0; z-index:var(--z-rim);
  pointer-events:none; border-radius:inherit; padding:1.1px;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.nav__group{
  display:flex; align-items:center; gap:4px;
  border-radius:var(--r-pill);
}
.nav__brand{ justify-self:start; padding-left:13px; }
.nav__links{ justify-self:center; }       /* on the bar's centre line, not the leftover space */
.nav__cta{ justify-self:end; gap:8px; }
/* the whole bar lifts on scroll, rather than each group lifting separately */
.nav.is-stuck{
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38) 48%, rgba(232,234,239,.44));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(70,78,92,.06),
    0 1px 2px rgba(70,78,92,.12),
    0 16px 34px -12px rgba(70,78,92,.34),
    0 36px 70px -28px rgba(70,78,92,.38);
}
/* keep dropdowns above the CTA pill that follows them in the DOM */
.nav__links{ z-index:2; }
.nav__cta{ z-index:1; }
.mega{ z-index:3; }
.nav__brand{ gap:11px; padding:0; flex:none; text-decoration:none; color:inherit; }
.nav__logo{
  width:37px; height:37px; border-radius:11px; flex:none;
  box-shadow:0 2px 6px -2px rgba(70,78,92,.45);
}
.nav__word{ display:flex; align-items:center; line-height:1.1; }
.nav__word b{
  font-family:var(--display); font-weight:700;
  font-size:16.5px; letter-spacing:-.021em;
}
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 16px;
  text-transform:uppercase;
  border:0; background:transparent;
  border-radius:var(--r-pill);
  font-size:12.4px; font-weight:600; letter-spacing:.075em; color:var(--ink-2);
  cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav__link svg{ width:14px; height:14px; opacity:.55; transition:transform .2s var(--ease); }
.nav__link:hover{ background:rgba(26,26,30,.055); color:var(--ink); }
.nav__link.is-open{ background:rgba(26,26,30,.075); color:var(--ink); }
.nav__link.is-open svg{ transform:rotate(180deg); opacity:.9; }
.nav__dd{ position:relative; display:inline-flex; }
/* The CTA is the accent — it shouldn't sit inside a second glass pill.
   Stripping the group frame here makes the button itself the frame.
   Below 900px the burger joins it in this group and the frame returns,
   because there it earns its keep by binding the two together. */
.nav__cta{
  gap:8px;
  padding:0;
  background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
}
.nav__cta::after{ display:none; }
.nav.is-stuck .nav__cta{ background:none; box-shadow:none; }
.nav__cta .ctl{ min-height:52px; padding:14px 24px; font-size:14.5px; }
@media (max-width:900px){ .nav__cta .ctl{ min-height:46px; padding:12px 20px; } }
.nav__burger{
  display:none;
  width:46px; height:46px; padding:0;   /* 44px touch minimum */
  align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:var(--r-pill);
  color:var(--ink); cursor:pointer;
}
.nav__burger svg{ width:20px; height:20px; }
.nav__burger:hover{ background:rgba(238,240,245,.85); }
/* ---- dropdown panels — light glass, never dark ------------- */
.drop, .mega{
  position:absolute;
  background:var(--glass-in);
  box-shadow:var(--sh-3), var(--sh-in);
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s var(--ease), transform .24s var(--ease), visibility .24s;
}
.drop.open, .mega.open{ opacity:1; visibility:visible; transform:translateY(0); }
.drop{
  top:calc(100% + 14px);
  background:linear-gradient(180deg, #FCFDFE, #F2F4F8);
  -webkit-backdrop-filter:none; backdrop-filter:none; left:50%; margin-left:-118px;
  width:236px; padding:8px;
  border-radius:var(--r);
  display:grid; gap:2px;
}
.drop a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  font-size:14px; font-weight:500; color:var(--ink-2);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.drop a svg{ width:13px; height:13px; color:var(--navy); opacity:.55; flex:none; }
.drop a:hover{ background:var(--tone-b); color:var(--ink); }
.drop a:hover svg{ opacity:1; }
.mega{
  top:100%; left:0; right:0; width:auto;
  /* near-opaque on purpose — see the note on [hidden] above for the other
     half of this bug. Blur is kept so the material still reads as the site's,
     but legibility of a menu beats transparency every time. */
  background:linear-gradient(180deg, #FCFDFE, #F2F4F8);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transform:translateY(-8px);
  padding:26px 26px 28px;
  border-radius:0 0 30px 30px;
  /* the bar already carries the rim and the lift; a second set of both along
     the seam is what makes two panes look stacked instead of continuous */
  box-shadow:0 26px 54px -22px rgba(70,78,92,.42);
}
.mega::after{ display:none; }
.mega.open{ transform:translateY(0); }
.mega__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.mega__head{ display:grid; gap:2px; padding:0 10px 12px; }
.mega__head b{
  font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:-.01em; color:var(--ink);
}
.mega__head span{ font-size:12.5px; color:var(--ink-3); }
.mega__lab{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding:0 4px 12px;
}
.mcard{
  display:grid; gap:4px;
  padding:13px 14px; border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.mcard:hover{ background:var(--tone-b); border-color:var(--line-l); transform:translateX(2px); }
.mcard__t{
  display:flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.012em;
}
.mcard__t svg{ width:12px; height:12px; color:var(--navy); flex:none; }
.mcard__d{ font-size:12.8px; color:var(--ink-3); line-height:1.5; padding-left:21px; }
.mega__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.mega__ov{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); }
.mega__ov svg{ width:12px; height:12px; color:var(--navy); }
.mega__ov b{ font-weight:600; color:var(--ink); }
.mega__ov span{ color:var(--ink-3); }
/* use-case tabs */
.uc__tabs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.uctab{
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--grey); border:1px solid transparent;
  font-size:13px; font-weight:500; color:var(--ink-2);
}
.uctab.is-on{ background:var(--grey); border-color:var(--grey-2); color:var(--navy-ink); font-weight:600; }
.uc__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.uccard{
  padding:14px; border-radius:var(--r-sm);
  background:linear-gradient(160deg, rgba(255,255,255,.8), rgba(238,240,245,.38));
  border:1px solid var(--line);
  display:grid; gap:9px; align-content:start;
}
.uccard__tag{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy-ink);
}
.uc__line{ display:flex; gap:8px; font-size:12.6px; line-height:1.48; }
.uc__line svg{ width:14px; height:14px; flex:none; margin-top:2px; }
.uc__line--user{ color:var(--ink); font-weight:500; }
.uc__line--user svg{ color:var(--ink-3); }
.uc__line--ai{ color:var(--ink-2); }
.uc__line--ai svg{ color:var(--navy); }
/* ---- mobile menu (light) ----------------------------------- */
.mobile-menu{
  position:fixed; inset:0; z-index:95;
  background:rgba(233,235,239,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:start center;
  padding:96px 24px 24px;
  opacity:0; pointer-events:none;
  transition:opacity .24s var(--ease);
}
.mobile-menu[hidden]{ display:none; }   /* the attr must actually hide it */
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mm__card{
  width:min(420px,100%);
  background:var(--glass);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3), var(--sh-in);
  padding:16px;
  display:grid; gap:4px;
  transform:translateY(-10px);
  transition:transform .28s var(--ease);
}
.mobile-menu.open .mm__card{ transform:translateY(0); }
.mm__card a{
  padding:14px 16px; border-radius:var(--r-sm);
  font-family:var(--display); font-weight:600; font-size:18px;
  letter-spacing:-.02em; color:var(--ink);
  transition:background .16s var(--ease);
}
.mm__card a:hover{ background:var(--tone-b); }
.mm__close{
  position:absolute; top:14px; right:14px; z-index:6;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper);
  font-size:20px; line-height:1; color:var(--ink-2); cursor:pointer;
}
/* ============================================================
   9. HERO
   ============================================================ */
/* ---- HERO: full-bleed photo backdrop, copy on top --------------
   Cover crops the sides — unavoidable when a 2.34:1 photo backs a
   ~1.6:1 viewport. object-position is set so what gets cropped is the
   empty right-hand console, never the phone UI, and so the bright wall
   stays under the copy. There is no scrim: the column is sized to stop
   before her hair, which is the only reason dark type reads here.
   If you move the crop, re-check the contrast — it is not forgiving. */
.hero{
  position:relative; isolation:isolate;
  display:flex; align-items:var(--hero-align, center);
  height:100vh;                      /* fallback for pre-svh browsers */
  height:var(--hero-h, 100svh);      /* svh: mobile URL bar shouldn't resize it */
  min-height:var(--hero-min, 600px);
  padding:calc(var(--nav-h) + 44px) 0 clamp(48px,6vw,88px);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
/* Every knob the Controls panel exposes lands here as a custom property.
   The transform chain is safe to own outright: nothing else animates this
   element, so combining offset + zoom + flip in one chain can't fight the
   page. Zoom pivots on the focus point so the two controls agree.

   object-fit is CONTAIN, not cover. Cover crops before the transform
   runs, so zooming out only shrank an already-cropped picture and the
   sides stayed missing. Containing keeps the whole frame in the element;
   --hero-cover-k (measured in main.js, viewport-dependent) scales it back
   up so zoom 100% still looks like cover. Below 100% the frame genuinely
   pulls back and the cropped-away edges come into view. */
/* The hero is a video loop now. `cover` is all it needs — the contain +
   measured cover-k + zoom/nudge/mirror transform chain existed so the photo
   could be pulled back to reveal its cropped edges, and none of that has
   anything to act on here. The look filters stay: they are what tie the
   footage to the page's silver. */
.hero__bg img,
.hero__bg video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--hero-focus, 50%) var(--hero-focus-y, 50%);
  filter:
    brightness(var(--hero-bright, 1))
    contrast(var(--hero-contrast, 1))
    saturate(var(--hero-sat, 1))
    grayscale(var(--hero-gray, 0))
    blur(var(--hero-blur, 0px));
}
/* Scroll affordance. Sits above the bottom fade, centred, and stops
   moving under reduced motion. */
.hero__more{
  position:absolute; left:50%; bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%);
  z-index:2;
  /* 44px minimum touch target. The visible pill stays small; the hit box
     is padded out to reach the minimum rather than drawing a bigger control. */
  width:44px; height:52px; border-radius:999px;
  display:grid; place-items:start center; padding-top:13px;
  border:1.5px solid rgba(26,26,30,.28);
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.hero__more:hover{ border-color:rgba(26,26,30,.5); background:rgba(255,255,255,.34); }
.hero__more span{
  width:3px; height:8px; border-radius:2px;
  background:rgba(26,26,30,.5);
  animation:heroScroll 1.9s var(--ease) infinite;
}
@keyframes heroScroll{
  0%,100%{ transform:translateY(0); opacity:.35 }
  45%    { transform:translateY(12px); opacity:1 }
}

/* ---- bottom layer blur ---------------------------------------
   Seamless because the PHOTO itself is masked to transparent — the real
   page shows through, so there is no colour to match and no edge where a
   wash ends. (Washing to an opaque silver left a faint seam wherever the
   field gradient underneath wasn't exactly that value.) The blur bands
   ride on top, each blurrier and masked to a lower slice, so the picture
   softens as it dissolves rather than simply fading out. */
.hero__bg{
}
/* No scrim: the video is meant to be fully visible. That has a measured cost
   — see the note on .hero__copy, which now carries its own legibility. */
/* No bottom fade. The footage runs to the edge of the hero: the mask that
   dissolved it and the colour wash that landed it on the page silver are both
   gone, on the same call as the left scrim — the video is meant to be seen. */
.hero__inner{
  position:relative; z-index:1;
  width:min(var(--maxw), calc(100% - 48px));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-conv-w, 420px));
  align-items:center;
  gap:clamp(24px,4vw,64px);
}
/* The copy sits on its own pane, the same material as the demo column on the
   right. Measured against this loop: the copy column's darkest 5th percentile
   is 7, so dark ink needs the backdrop lifted to 129 to clear 4.5:1, which is
   a .50 fill minimum — .58 here for headroom. That is the deck's own panel
   range, not an invented number.
   A full-width scrim was rejected (the video should be seen) and a text glow
   cannot reach 4.5:1 at all, so a CONTAINED pane is the only option left that
   is both readable and leaves most of the footage visible. */
.hero__copy{
  position:relative;
  /* Headline wrapping is driven by this width — narrow it until the last
     word drops to its own line. A <br> in the Headline field forces an
     exact break instead. */
  max-width:min(100%, var(--hero-copy-w, 470px));
  align-self:center;
  transform:translate3d(var(--hero-copy-dx, 0px), var(--hero-copy-dy, 0px), 0);
  text-align:var(--hero-copy-align, left);
}
.hero__copy::before{
  content:""; position:absolute; z-index:-1;
  inset:-14% -22% -16% -30%;
  background:radial-gradient(78% 66% at 34% 46%,
    rgba(250,252,255,.78) 0%,
    rgba(250,252,255,.74) 34%,
    rgba(250,252,255,.62) 54%,
    rgba(250,252,255,.32) 74%,
    rgba(250,252,255,.10) 88%,
    rgba(250,252,255,0) 100%);
  pointer-events:none;
}
.hero__copy > *{ position:relative; }
.hero .h-display{ text-wrap:balance; }
.hero .h-display, .hero__copy .hero__badge{
  /* tight, not a halo — the previous 14px white blur read as a cheap glow.
     This only defines the glyph edge. */
  text-shadow:0 1px 2px rgba(255,255,255,.62), 0 1px 3px rgba(20,28,40,.16);
}

.hero__copy .hero__actions,
.hero__copy .hero__badge{ justify-content:var(--hero-copy-just, flex-start); }
.hero .h-display{
  font-size:var(--hero-h1-size, clamp(38px, 4.6vw, 64px));
  line-height:var(--hero-h1-lh, 1.02);
  letter-spacing:var(--hero-h1-ls, -.032em);
}
/* ---- hero conversation ---------------------------------------
   Subtitle grammar, not a chat bubble: avatar, a hairline that runs
   out under it, the speaker, then the line. Nothing boxes it in —
   the photograph is the backdrop, so the type carries the frame. */
/* Bare, like the reference — no card, no glass, no border. Avatar, a
   hairline, the speaker, the line, sitting directly on the photograph.

   This only became viable once the type got its own halo (below). The
   backdrop here spans RGB 0–187, so nothing else would hold it: raising
   a glass fill high enough to carry the type is precisely the milky
   panel we were trying to lose. The halo does it locally instead.

   Every panel property is still var-driven with a 0 default, so a card
   can be dialled back in from the Controls panel without touching CSS. */
.hconv{
  position:relative; isolation:isolate;
  overflow:hidden;            /* the plate must never escape the corners */
  width:100%; justify-self:end;
  padding:var(--hconv-pad, 0px);
  border-radius:var(--hconv-radius, 0px);
  transform:translate3d(var(--hconv-dx, 0px), var(--hconv-dy, 0px), 0);
  /* Near-flat on purpose. The type sits in the lower half, so that stop is
     the one contrast is solved against (0.54 = the deck's own panel value,
     which clears 4.5:1 on this photo's darkest pixel); a steep top stop would
     make the head of the card heavier than the deck's glass ever goes. */
  background:linear-gradient(180deg,
    rgba(255,255,255,calc(var(--hconv-glass, 0) * 1.12)),
    rgba(255,255,255,var(--hconv-glass, 0)) 58%,
    rgba(246,247,249,calc(var(--hconv-glass, 0) * 1.04)));
  /* The WHOLE property must resolve to `none` when bare — not to a no-op
     filter. Any active backdrop-filter, even blur(0) saturate(1), puts
     this block on its own compositing layer and Chrome re-composites the
     backdrop there with a faint colour shift, drawing a ghost rectangle
     exactly the size of the element. That was the "white highlight". */
  -webkit-backdrop-filter:var(--hconv-bd, none);
          backdrop-filter:var(--hconv-bd, none);
  box-shadow:0 18px 44px -18px rgba(20,24,30,var(--hconv-shadow, 0));
  /* background only — animating backdrop-filter is expensive, and
     interpolating it from `none` reports blur(0px) mid-flight, which is
     confusing to debug. */
  transition:background .3s var(--ease);
}
/* The outline is the frame — it is what makes this read as a pane of
   glass rather than floating text. Its opacity is its OWN control, not
   tied to the fill: the reference has a near-invisible fill and a very
   visible edge, and coupling them made the edge vanish with the fill. */
.hconv::after{
  content:""; position:absolute; inset:0; z-index:5;
  pointer-events:none; border-radius:inherit; padding:1px;
  opacity:var(--hconv-border, .7);
  background:linear-gradient(160deg,
    rgba(255,255,255,.9), rgba(255,255,255,.42) 44%, rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.hconv[data-ink="dark"]::after{
  background:linear-gradient(160deg,
    rgba(255,255,255,.95), rgba(70,78,92,.28) 52%, rgba(70,78,92,.4));
}
/* ink: light by default (dark backdrop), dark when the crop puts
   something bright behind the column */
.hconv[data-ink="dark"]{
  box-shadow:0 18px 44px -18px rgba(70,78,92,var(--hconv-shadow, 0));
}
.hconv[data-ink="dark"]::after{ background:var(--edge); }

/* The hairline divider is gone. It spanned the full card while the plate
   beneath it is feathered, so the two edges never agreed and it read as a
   stray line — and with a plate there is nothing left for it to separate. */
.hconv__av{ margin-bottom:clamp(16px,1.9vw,24px); }

/* Reserved height is set by main.js, which measures the tallest turn at
   the current column width and re-measures on resize. This is only the
   floor for the moment before JS runs. */
.hconv__out{ min-height:88px; }
/* The card can be as sheer as the reference wants — the type still needs
   somewhere to sit. The backdrop under this column runs from her black shirt
   to a bright wall in a single line of text, and nothing applied to the type
   alone survives both ends. So: a plate behind the TEXT, not the card. It is
   a radial with no edge, so it reads as light falling on glass rather than a
   filled box, and it follows the lines wherever the column is moved.
   It always opposes the ink — white under dark type, dark under light. */
/* NO plate. A wash behind the text is uniform, but the backdrop under it is
   not — it is her shirt on one side and a bright wall on the other — so the
   wash showed as a pale patch everywhere the photo was dark. Any local
   treatment has this failure mode. The card itself carries the type now: one
   surface, one edge, and that edge is already designed. */

/* ---- AI signals ------------------------------------------------
   Two states share one fixed-height slot beside the speaker name so the
   reserved height never moves: a live level meter while the customer
   speaks, and a thinking pulse before Silver answers. */
.hconv__state{
  position:relative; display:inline-block;
  width:58px; height:16px; margin-left:10px; vertical-align:-3px;
}
.hconv__wave,
.hconv__think{
  position:absolute; left:0; top:0; height:100%;
  display:inline-flex; align-items:center;
  opacity:0; transition:opacity .28s var(--ease);
}
.hconv__think{ gap:4px; }
.hconv__think i{
  width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:hcThink 1.05s var(--ease) infinite;
}
.hconv__think i:nth-child(2){ animation-delay:.16s; }
.hconv__think i:nth-child(3){ animation-delay:.32s; }
@keyframes hcThink{ 0%,100%{ opacity:.25; transform:translateY(0) } 45%{ opacity:1; transform:translateY(-3px) } }

.hconv[data-side="user"] .hconv__wave{ opacity:1; }
/* Don't burn compositor time on bars nobody can see — the meter is
   hidden on Silver's turns but was still animating. */
.hconv__wave i{ animation-play-state:paused; }
.hconv[data-side="user"] .hconv__wave i{ animation-play-state:running; }
.hconv[data-state="think"] .hconv__think{ opacity:1; }
.hconv[data-state="think"] .hconv__wave{ opacity:0; }
.hconv .wave i{ background:currentColor; opacity:.55; }

/* Words fade up in sequence so the line reads as generated live rather
   than pasted — the deck's reveal, 55ms apart. inline-block keeps normal
   wrapping, so the measured height reserve still holds. */
.hconv__line .w{
  display:inline-block;
  opacity:0; transform:translateY(.32em); filter:blur(2.5px);
  animation:hcWord .52s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * var(--hconv-stagger, 55ms));
}
@keyframes hcWord{ to{ opacity:1; transform:none; filter:blur(0); } }

.hconv__who{
  margin:0 0 7px;
  font-family:var(--display); font-weight:600;
  font-size:var(--hconv-name-size, clamp(13px,1.02vw,15px));
  letter-spacing:.055em; text-transform:uppercase;
  line-height:1.35; color:#fff; opacity:.72;
}
.hconv__line{
  margin:0;
  font-family:var(--display); font-weight:500;
  font-size:var(--hconv-line-size, clamp(18px,1.62vw,24px));
  line-height:var(--hconv-line-lh, 1.3); letter-spacing:-.021em;
  color:#fff;
  text-wrap:pretty;
}
/* Legibility comes from a HALO, not a fill. The backdrop under this
   column spans RGB 0–187 (her shirt through to the window), so no single
   ink clears 4.5:1 against both ends and raising the glass alpha enough
   to fix it would kill the transparency. A soft shadow gives the type its
   own local contrast wherever it lands — the same trick broadcast
   subtitles use — and costs nothing visually on the dark majority. */
.hconv__who,
.hconv__line{
  /* Just enough to lift the type off the glass. A heavy outline was what
     made this look dirty: on a light card, a dark halo around white type
     reads as grey mush. The card supplies the backdrop now — the shadow
     only has to define the edge. Scales with --hconv-halo so it can be
     firmed up if the card is ever dialled back to bare. */
  text-shadow:
    0 1px 1.5px rgba(10,15,22,calc(var(--hconv-halo, .28) * .8)),
    0 2px 10px rgba(10,15,22,calc(var(--hconv-halo, .28) * .5));
}
.hconv[data-ink="dark"] .hconv__who,
.hconv[data-ink="dark"] .hconv__line{
  color:var(--ink);
  text-shadow:
    0 1px 1.5px rgba(255,255,255,calc(var(--hconv-halo, .28) * 1.1)),
    0 2px 10px rgba(255,255,255,calc(var(--hconv-halo, .28) * .7));
}

/* Success mark. Green is the SECOND semantic exception to monochrome+navy
   (friction red on the flow diagram is the first) and it is scoped here, not
   promoted to :root, for the same reason: it means one thing in one place.
   #157F4C measures 5.32:1 on the panel, so the label is readable rather than
   decorative. */
.hconv__done{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:12px; padding:6px 13px 6px 9px;
  border-radius:var(--r-pill);
  background:rgba(21,127,76,.11);
  box-shadow:inset 0 0 0 1px rgba(21,127,76,.22);
  color:#157F4C;
  font-size:12.6px; font-weight:600; letter-spacing:-.005em;
  opacity:0; transform:translateY(4px) scale(.96);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
  pointer-events:none;
}
.hconv__done svg{ width:16px; height:16px; }
.hconv__done .hconv__tick{
  stroke-dasharray:10 10; stroke-dashoffset:10;
}
.hconv[data-done="1"] .hconv__done{
  opacity:1; transform:none;
}
.hconv[data-done="1"] .hconv__done .hconv__tick{
  animation:hcTick .46s var(--ease-soft) .12s forwards;
}
@keyframes hcTick{ to{ stroke-dashoffset:0; } }

/* Smooth: a longer, gentler cross-fade with no blur snap. The line
   trails the name slightly so the turn reads as one motion. */
.hconv__who,
.hconv__line{
  transition:opacity .46s var(--ease-soft), transform .56s var(--ease-soft);
}
.hconv[data-anim="out"] .hconv__who,
.hconv[data-anim="out"] .hconv__line{ opacity:0; transform:translateY(5px); }
.hconv__line{ transition-delay:.05s; }
/* Avatar: her face on customer turns, the brand mark on Silver's.
   Both layers are absolutely positioned and cross-faded, so the slot
   never resizes between speakers. */
.hconv__av{
  position:relative; isolation:isolate;
  width:var(--hconv-av, 66px); height:var(--hconv-av, 66px);
  flex:none; border-radius:50%; overflow:hidden;
  background:rgba(255,255,255,.1);
  box-shadow:0 4px 16px rgba(8,12,18,.45), inset 0 0 0 1.5px rgba(255,255,255,.65);
  transition:box-shadow .4s var(--ease);
}
.hconv[data-ink="dark"] .hconv__av{
  background:var(--paper-2);
  box-shadow:0 3px 12px rgba(70,78,92,.28), inset 0 0 0 1px rgba(255,255,255,.65);
}
.hconv__face,
.hconv__bot{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity .4s var(--ease);
}
.hconv__face{ object-position:52% 26%; }   /* her face in the hero frame */
.hconv__bot{ opacity:0; }
.hconv[data-side="ai"] .hconv__face{ opacity:0; }
.hconv[data-side="ai"] .hconv__bot{ opacity:1; }
/* Controls: force the stacked composition at any width (body class, so
   nothing here overrides an inline style the page animates). */
body.ctl-hero-stack .hero{ display:block; height:auto; min-height:0; padding-bottom:clamp(40px,6vw,72px); }
body.ctl-hero-stack .hero__bg{ position:relative; inset:auto; height:min(52vh,440px); margin-bottom:clamp(28px,4vw,44px); }
body.ctl-hero-stack .hero__copy{ max-width:none; }
body.ctl-hero-stack .hero__inner{ grid-template-columns:1fr; }
body.ctl-hero-stack .hconv{ justify-self:start; }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px 8px 12px;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.9);
  font-size:13.2px; font-weight:500; color:var(--ink-2);
  margin-bottom:26px;
}
.hero__badge i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--navy-ink);
  box-shadow:0 0 0 4px rgba(70,78,92,.16);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
/* ---- product comparison — glass panel over its own aura ---- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
/* legacy dead-end pane */
.deadend{ display:grid; gap:7px; }
@keyframes jitter{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(3px,-2px) } 40%{ transform:translate(-3px,2px) }
  60%{ transform:translate(2px,3px) }  80%{ transform:translate(-2px,-3px) }
}
/* ============================================================
   10. JOURNEY LINE + PILLARS
   ============================================================ */
/* ---- flow diagram --------------------------------------------
   A single rounded-rect track with the nodes sitting on top of it. The
   line only ever shows in the gaps and around the two ends, because the
   nodes are opaque enough to cover the segments they occupy — that is
   how the reference is built, and it survives reflow far better than an
   SVG path hand-aligned to HTML boxes. */
/* One semantic exception to the monochrome+navy rule: friction states — the
   two nodes in the flow diagram and the problem statement on each pillar.
   Desaturated, and only ever a tint plus ink so it reads as a temperature
   shift rather than an alert badge. Scoped to the two components that use it
   rather than :root, so it still cannot leak into the palette. */
.flow, .pstack{
  --fr-ink:#8E2F2A;
  --fr-tint-a:rgba(150,58,52,.115);
  --fr-tint-b:rgba(150,58,52,.05);
  --fr-line:rgba(150,58,52,.26);
}

.flow{
  position:relative;
  width:100%;
  margin:clamp(16px,2.4vw,34px) auto clamp(56px,6.5vw,88px);
}

/* the connector. Geometry is measured and written by drawFlow() in main.js —
   it is behind the nodes, so it is hidden wherever a node sits on it. */
.flow__wire{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.flow__wire-base{ fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-linejoin:miter; }
.flow__bead{
  fill:var(--paper); stroke:var(--line-2); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:flowBead 7.4s var(--ease-soft) infinite;
  animation-delay:var(--flow-bead-at, 1.6s);
}
@keyframes flowBead{
  0%      { fill:var(--paper); stroke:var(--line-2); transform:scale(1) }
  6%      { fill:var(--navy);  stroke:var(--navy);   transform:scale(1.42) }
  22%     { fill:var(--paper); stroke:var(--line-2); transform:scale(1) }
  100%    { fill:var(--paper); stroke:var(--line-2); transform:scale(1) }
}
/* a segment that leaves the first node, runs the path once, comes to rest on
   the final node, then restarts after a pause. pathLength=100 normalises the
   dash values so the run reads identically at every width. */
.flow__wire-run{
  fill:none; stroke:var(--navy); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:miter;
  stroke-dasharray:15 100;
  stroke-dashoffset:15;
  opacity:0;
  animation:flowRun 7.4s cubic-bezier(.62,.03,.36,1) infinite;
}
@keyframes flowRun{
  0%,4%   { stroke-dashoffset:15;   opacity:0 }
  10%     { opacity:.85 }
  52%     { stroke-dashoffset:-100; opacity:.85 }
  60%     { stroke-dashoffset:-100; opacity:0 }
  100%    { stroke-dashoffset:-100; opacity:0 }
}

/* The row spans the full column. Nodes 1-4 size to their text; the outcome
   node absorbs whatever is left, which is what keeps it to two lines instead
   of four and stops it towering over the rest. align-items:stretch then puts
   every node on the tallest one's height, so the row reads as one band. */
.flow__row{
  position:relative; z-index:1;
  list-style:none; margin:0; padding:0;
  display:flex; align-items:stretch;
  gap:clamp(12px,1.9vw,28px);
}
.fnode{ flex:0 0 auto; }
.fnode--wide{ flex:1 1 auto; }

.fnode{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:11px;
  min-height:68px; padding:10px 21px;
  border-radius:999px;
  font-size:13.1px; font-weight:600; letter-spacing:-.008em; line-height:1.25;
  color:var(--ink);
  background:linear-gradient(180deg,#ffffff,#F6F7F9);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(70,78,92,.12),
    0 10px 24px -12px rgba(70,78,92,.4);
}
.fnode::after{
  content:""; position:absolute; inset:0; z-index:5;
  pointer-events:none; border-radius:inherit; padding:1px;
  background:var(--chrome);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.85;
}
.fnode--wide{ max-width:none; }

/* 1 — entry. A tint, not a fill: the journey should not open at full volume. */
.fnode--enter{
  color:var(--navy-ink);
  white-space:nowrap;
  background:
    linear-gradient(180deg, rgba(20,104,143,.13), rgba(20,104,143,.055)),
    linear-gradient(180deg,#ffffff,#F5F7F9);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(70,78,92,.1),
    0 8px 20px -14px rgba(11,71,99,.4);
}
.fnode--enter::after{ opacity:.6; }

/* 2, 3 — friction. */
.fnode--warn{
  color:var(--fr-ink);
  background:
    linear-gradient(180deg, var(--fr-tint-a), var(--fr-tint-b)),
    linear-gradient(180deg,#ffffff,#F8F6F6);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(90,44,40,.1),
    0 8px 20px -14px rgba(142,47,42,.36);
}
.fnode--warn::after{ opacity:.55; }
.fnode--warn .fnode__i{
  background:linear-gradient(160deg, #A8483F, #83302B 62%, #66211D);
}

/* 4 — the hand-off. Border animation rather than a fill: it is the moment
   something starts happening, not the outcome. Reuses the CTA's registered
   --ctl-edge angle and its keyframe. */
.fnode--live::after{
  opacity:1; padding:1.2px;
  background:conic-gradient(from var(--ctl-edge),
    rgba(20,104,143,.14) 0deg, rgba(20,104,143,.92) 40deg,
    rgba(20,104,143,.3) 92deg, rgba(20,104,143,.12) 172deg,
    rgba(20,104,143,.14) 360deg);
  animation:ctlEdge 4.2s linear infinite;
}
.fnode--live{
  color:var(--navy-ink);
  background:linear-gradient(180deg,#ffffff,#F3F6F8);
}

/* 5 — the outcome. The only full fill in the diagram, and the heaviest lift. */
.fnode--final{
  color:#fff;
  min-height:68px;
  padding:10px 22px;
  font-size:13.4px;
  letter-spacing:-.01em;
  border-radius:999px;
  background:linear-gradient(160deg, #1D7BA3, var(--navy) 52%, #0A415C);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.36),
    0 1px 2px rgba(4,40,58,.32),
    0 16px 34px -14px rgba(11,71,99,.62);
}
.fnode--final::after{ background:var(--chrome-p); opacity:.72; }
/* the run reaches the end at 52%; this lands just behind it */
.fnode--final::before{
  content:""; position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit; opacity:0;
  box-shadow:0 0 0 0 rgba(20,104,143,.5);
  animation:flowArrive 7.4s cubic-bezier(.62,.03,.36,1) infinite;
}
@keyframes flowArrive{
  0%,50%  { opacity:0; box-shadow:0 0 0 0 rgba(20,104,143,.5) }
  56%     { opacity:1; box-shadow:0 0 0 3px rgba(20,104,143,.26) }
  72%,100%{ opacity:0; box-shadow:0 0 0 11px rgba(20,104,143,0) }
}
.fnode--final .fnode__i{
  width:34px; height:34px;
  background:rgba(255,255,255,.17);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.fnode--final .fnode__i svg{ width:18px; height:18px; }

.fnode__i{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none; border-radius:50%;
  background:linear-gradient(160deg, #1E7BA5, var(--navy) 60%, #0C4763);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff;
}
.fnode__i svg{ width:16px; height:16px; overflow:visible; }

/* rage — the burst fires twice, fast, then a long rest. Deliberately small:
   the point is recognition, not spectacle. */
.fnode__i--rage .fi-rays{
  transform-box:fill-box; transform-origin:center; opacity:0;
  animation:rageBurst 3.2s var(--ease-soft) infinite;
}
.fnode__i--rage .fi-dot{
  transform-box:fill-box; transform-origin:center;
  animation:rageHit 3.2s var(--ease-soft) infinite;
}
@keyframes rageBurst{
  0%,8%   { transform:scale(.5); opacity:0 }
  13%     { transform:scale(.92); opacity:.95 }
  24%     { transform:scale(1.14); opacity:0 }
  25%,30% { transform:scale(.5); opacity:.95 }
  41%     { transform:scale(1.14); opacity:0 }
  42%,100%{ opacity:0 }
}
@keyframes rageHit{
  0%,9%   { transform:scale(1) }
  13%     { transform:scale(.72) }
  20%,26% { transform:scale(1) }
  30%     { transform:scale(.72) }
  37%,100%{ transform:scale(1) }
}
/* popup — one small arrival, on the beat after the second jab */
.fnode__i--pop .fi-win{
  transform-origin:12px 12px;
  animation:popIn 3.2s var(--ease-soft) infinite;
}
@keyframes popIn{
  0%,40%  { transform:scale(1) }
  46%     { transform:scale(.84) }
  54%     { transform:scale(1.06) }
  60%,100%{ transform:scale(1) }
}
/* the outcome — the tick draws itself, unhurried. The contrast with the rage
   burst is the whole point, so this one is slow. */
.fnode__i--act .fi-tick{
  stroke-dasharray:10 10; stroke-dashoffset:10;
  animation:actTick 4.6s var(--ease-soft) infinite;
}
@keyframes actTick{
  0%,14%  { stroke-dashoffset:10 }
  34%     { stroke-dashoffset:0 }
  84%     { stroke-dashoffset:0 }
  92%,100%{ stroke-dashoffset:10 }
}

/* Measured, not guessed: the outcome node holds two lines down to 1160px and
   then goes to three and four, dragging every other node up with it because
   the row shares a height. A four-line pill beside four one-line pills is not
   a row any more, so it becomes a stack here rather than at the point where it
   merely stops fitting. The wire goes with it — a wire behind stacked pills
   reads as a mistake. Re-measure if the spacing or the copy changes: opening
   the gaps moved this threshold from 1160 to 1220 on its own. */
@media (max-width:1220px){
  .flow{ width:auto; }
  .flow__wire{ display:none; }
  .flow__row{
    flex-direction:column; align-items:stretch; gap:12px;
  }
  .fnode{ justify-content:flex-start; min-height:56px; font-size:13.4px; }
  .fnode--wide{ flex:0 0 auto; }
  .fnode--enter{ white-space:normal; }
}

.pillars{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,34px);
}
.pillar{
  display:grid;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-2), var(--sh-in);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--sh-3), var(--sh-in); }
.pillar__stage{
  position:relative; isolation:isolate;
  display:grid; place-items:center;
  padding:26px 18px 30px;
  background:linear-gradient(180deg, rgba(228,231,237,.6), rgba(255,255,255,.3));
}
.pillar__body{
  padding:24px;
  border-top:1px solid var(--line);
}
.pillar__split{ display:grid; gap:12px; margin-top:16px; }
/* ---- pillar comparison ----------------------------------------
   Three stated positions per card, in narrative order: the problem, the
   generic response, then ours. A definition list because that is what it is —
   term and description — which also gives screen readers the pairing that the
   old chip-and-span markup only implied. The left rule does the comparing:
   neutral, muted, then navy at full strength on the row that matters. */
.pstack{ display:grid; gap:14px; margin:15px 0 0; }
.pline{
  display:grid; gap:3px;
  padding-left:13px;
  border-left:2px solid var(--line-2);
}
.pline__k{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2);
}
.pline__v{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }

/* 1 — the problem. Tinted, so the card opens on the pain rather than easing
   into it. Same friction red as the flow diagram's two nodes. */
.pline--prob{
  border-left-color:var(--fr-line);
  padding:7px 12px 8px 13px;
  border-radius:0 9px 9px 0;
  background:linear-gradient(90deg, var(--fr-tint-a), var(--fr-tint-b) 62%, rgba(150,58,52,0) 96%);
}
.pline--prob .pline__k{ color:var(--fr-ink); }

/* 2 — context, not a claim. This row exists so the next one has something to
   land against, and it should cost the reader as little as possible: no rule,
   smaller, lighter. It is still above 4.5:1 — quiet is not the same as faint. */
.pline--gen{
  border-left-color:transparent;
  padding-left:15px;
}
.pline--gen .pline__k{ color:var(--ink-3); }
.pline--gen .pline__v{ font-size:13px; color:var(--ink-3); }

/* 3 — the answer, and the only thing on the card that has to be read. Carried
   by weight and scale, not a fill: navy is never a surface here. */
.pline--sv{
  border-left-width:3px;
  border-left-color:var(--navy);
  padding-left:14px;
  margin-top:2px;
}
.pline--sv .pline__k{ color:var(--navy-ink); }
.pline--sv .pline__v{
  font-size:16px; line-height:1.42; font-weight:600;
  letter-spacing:-.011em; color:var(--ink);
}

/* ---- the phone: clean white frame with the chrome rim ------ */
.mini{
  width:214px; height:394px;
  border-radius:34px;
  padding:8px;
  background:linear-gradient(158deg, rgba(255,255,255,.62), rgba(233,235,241,.42));
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    0 20px 38px -20px rgba(70,78,92,.5),
    inset 0 1.5px 0 rgba(255,255,255,.9);
}
.mini::after{ opacity:1; }   /* the device edge — the rim at full strength */
.mini__notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:62px; height:5px; border-radius:3px;
  background:var(--grey-2); z-index:6;
}
.mini__screen{
  height:100%; border-radius:27px;
  background:linear-gradient(180deg, #F5F6F8, #EFF1F4);
  border:1px solid var(--line);
  padding:22px 12px 12px;
  overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
}
.mini__apphead{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; color:var(--ink);
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.mini__apphead svg{ width:14px; height:14px; color:var(--ink-3); flex:none; }
.mini__step{
  margin-left:auto; font-family:var(--mono); font-size:9.5px;
  color:var(--navy-ink); background:var(--grey);
  padding:3px 7px; border-radius:5px;
}
.mrow{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:11px;
  background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(243,245,248,.85));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  font-size:11.6px; color:var(--ink-2);
}
.mrow b{ margin-left:auto; color:var(--ink); font-weight:600; font-size:11.8px; }
.mrow__tick{
  width:15px; height:15px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--navy-ink);
}
.mrow__tick svg{ width:9px; height:9px; }
.mrow.is-done{ background:rgba(236,238,242,.8); border-color:transparent; color:var(--ink-3); box-shadow:none; }
.mrow.is-live{
  background:linear-gradient(160deg, rgba(240,242,246,.95), rgba(222,226,233,.85));
  border-color:var(--grey-2);
  color:var(--navy-ink); font-weight:500;
  box-shadow:0 0 0 3px rgba(70,78,92,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
.mrow.is-next{ opacity:.5; }
.caret{
  display:inline-block; width:1.5px; height:11px; margin-left:2px;
  vertical-align:-1px; background:var(--navy);
  animation:blink 1.05s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }
.mini__foot{
  margin-top:auto;
  display:flex; align-items:center; gap:9px;
  padding:10px; border-radius:13px;
  background:linear-gradient(160deg, rgba(240,242,246,.95), rgba(222,226,233,.85));
  border:1px solid var(--grey-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.mini__footcol{ display:grid; gap:5px; flex:1; min-width:0; }
.mini__footcol span{ font-size:10.4px; color:var(--navy-ink); font-weight:500; }
.mini__prog{
  display:block; height:3px; border-radius:2px;
  background:rgba(20,104,143,.2); overflow:hidden;
}
.mini__prog i{
  display:block; height:100%; width:40%; border-radius:2px;
  background:var(--navy);
  animation:crawl 2.6s var(--ease-soft) infinite;
}
@keyframes crawl{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(260%) } }
.mini__aihead{
  display:flex; align-items:center; gap:8px;
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.mini__aihead .mark{ width:26px; height:26px; }
.mini__id{ display:grid; line-height:1.2; min-width:0; }
.mini__id b{ font-size:11.6px; font-weight:700; letter-spacing:-.01em; }
.mini__id span{ font-size:9.4px; color:var(--ink-3); }
.mini__live{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:600; color:var(--navy-ink);
  background:var(--accent-soft); padding:3px 7px; border-radius:5px;
}
.mini__live i{
  width:5px; height:5px; border-radius:50%; background:var(--navy-ink);
  animation:pulse 1.8s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.mini__chat{ display:grid; gap:7px; padding-top:2px; }
.mbubble{
  max-width:88%; padding:8px 11px;
  border-radius:13px; font-size:11.2px; line-height:1.45;
}
.mbubble.me{
  justify-self:end;
  background:linear-gradient(160deg, rgba(240,242,246,.95), rgba(214,219,228,.85));
  border:1px solid var(--grey-2);
  color:var(--navy-ink); border-bottom-right-radius:5px;
  display:flex; gap:6px; align-items:flex-start;
}
.mbubble.me svg{ width:11px; height:11px; flex:none; margin-top:1px; }
.mbubble.ai{
  justify-self:start;
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,246,249,.88));
  border:1px solid var(--line);
  color:var(--ink); border-bottom-left-radius:5px;
  box-shadow:var(--sh-1);
}
.mini__bar{
  margin-top:auto;
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:var(--r-pill);
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(243,245,248,.85));
  border:1px solid var(--line);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.95);
}
.mini__bar small{ font-size:10px; color:var(--ink-3); }
.acard{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(243,245,248,.85));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.acard div{ display:grid; line-height:1.25; min-width:0; }
.acard b{ font-size:11px; font-weight:600; }
.acard span{ font-size:9.6px; color:var(--ink-3); }
.acard__i{
  width:24px; height:24px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  background:var(--grey); color:var(--navy);
}
.acard__i svg{ width:13px; height:13px; }
.acard__i--ok{ background:var(--accent-soft); color:var(--navy-ink); }
.acard.is-ok{ background:linear-gradient(160deg, rgba(232,242,247,.95), rgba(180,212,227,.7)); border-color:var(--accent-edge); }
.acard.is-ok .acard__i--ok{ background:rgba(255,255,255,.9); }
.acard.push{ animation:fadeUp .5s var(--ease) both .2s; }
/* ============================================================
   11. TRUSTED BY
   ============================================================ */
.trusted{
  display:flex; align-items:stretch; justify-content:center;
  flex-wrap:wrap; gap:16px;
}
.lgo{
  display:inline-grid; place-items:center;
  min-width:186px; min-height:100px; padding:20px 24px;
  border-radius:18px;
  background:var(--glass-2);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.92);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
/* The sources ship on wildly different canvases — SBI on 16:9, Indian Bank
   near-square — so they are trimmed to their ink before export. What is left
   is four horizontal lockups (aspect 2.7-4.1), which one shared height
   normalises correctly; matching on width would not.
   Full brand colour, no filter. Two of the four (DCB, Indian Bank) are
   white-on-a-coloured-plate by design, so they arrive as solid tiles rather
   than free-standing marks — which is heavier at the same height, hence the
   optical step below. */
.lgo img{
  display:block; height:42px; width:auto;
  max-width:152px; object-fit:contain;
}
/* a filled plate reads bigger than an open mark at identical height */
.lgo img.is-plated{ height:34px; border-radius:4px; }

/* Same card, same weight — the breadth of the roster is the claim here, not a
   footnote to the four named logos. */
.lgo--more{
  font-family:var(--display); font-size:15px; font-weight:600;
  line-height:1.4; letter-spacing:-.01em; color:var(--ink-2);
  text-align:center;
}
/* ============================================================
   12. STORY SHOWCASE
   ============================================================ */
.stories{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,28px); }
.story{
  padding:clamp(26px,2.6vw,34px);
  border-radius:var(--r-xl);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.story:hover{ transform:translateY(-4px); box-shadow:var(--sh-3), var(--sh-in); }
.story__tag{
  display:inline-block; margin-bottom:14px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--navy-ink);
  background:var(--grey); padding:5px 10px; border-radius:6px;
}
.story__note{
  margin:14px 0 0;
  font-size:14.6px; line-height:1.5; color:var(--ink-2);
}
/* ============================================================
   13. IMPACT — before → after stat cards
   ============================================================ */
.stat4s{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); }
@media (max-width:1180px){ .stat4s{ grid-template-columns:repeat(2,1fr); } }
/* The numeral is the whole point of the card, so it gets the room: the label
   row sits on top, the caption is pinned to the bottom, and the figure takes
   whatever is left. Equal heights mean the four numerals share a baseline
   across the row instead of drifting with caption length. */
.stat4{
  padding:26px 24px 22px;
  border-radius:var(--r-lg);
  display:grid; grid-template-rows:auto 1fr auto; gap:18px;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.stat4:hover .stat4__num{ transform:translateY(-1px); }
.stat4:hover{ transform:translateY(-4px); box-shadow:var(--sh-3), var(--sh-in); }
.stat4__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stat4__lab{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.stat4__badge{
  font-size:10.5px; font-weight:600; letter-spacing:-.005em;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--navy-ink);
  box-shadow:inset 0 0 0 1px rgba(20,104,143,.12);
  white-space:nowrap;
}
.stat4__num{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  align-self:start;
  font-family:var(--display); font-weight:700;
  font-size:clamp(34px,3.7vw,50px);
  letter-spacing:-.042em; line-height:1;
  /* lining tabular figures: proportional digits make 90% and 50% sit at
     different optical weights in a row that is meant to be scanned */
  font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(168deg, #1E7BA5, var(--navy) 46%, #0A415C);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transition:transform .26s var(--ease);
}
.stat4__num .old{
  font-size:.52em; font-weight:600; color:var(--ink-4);
  text-decoration:line-through; text-decoration-thickness:1.5px;
}
.s4arr{ width:16px; height:16px; color:var(--ink-4); align-self:center; flex:none; }
.stat4__cap{
  margin:0; font-size:13.2px; line-height:1.5; color:var(--ink-2);
  align-self:end;
  padding-top:16px; border-top:1px solid var(--line);
}
/* ============================================================
   14. VIDEO — a phone on a light stage
   ------------------------------------------------------------
   The demo is a portrait 9:16 screen recording. Forcing it into a
   16:9 frame both crops it and floods the section with a dark
   image; framing it as a device keeps the recording intact and
   keeps the dark pixels confined to a phone screen.
   ============================================================ */
.vstage{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  padding:clamp(28px,3.4vw,52px);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3), var(--sh-in);
}
.vstage__copy{ display:grid; gap:16px; justify-items:start; }
.vstage__copy .h-card{ font-size:clamp(22px,2.2vw,28px); }
.vlist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.vlist li{
  display:flex; align-items:center; gap:11px;
  font-size:14.4px; color:var(--ink-2);
}
.vlist__i{
  width:30px; height:30px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(242,244,247,.95), rgba(206,212,222,.8));
  color:var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.vlist__i svg{ width:15px; height:15px; }
.video__frame{
  justify-self:center; margin-inline:auto;
  width:100%; max-width:300px;
  aspect-ratio:9/19.2;
  border-radius:40px;
  padding:9px;
  background:linear-gradient(158deg, rgba(255,255,255,.62), rgba(233,235,241,.42));
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    0 26px 48px -22px rgba(70,78,92,.5),
    inset 0 1.5px 0 rgba(255,255,255,.9);
}
.video__frame::after{ opacity:1; }   /* device edge — rim at full strength */
.video__notch{
  position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:74px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.55); z-index:6;
}
.video__inner{
  position:relative; height:100%;
  border-radius:32px;
  overflow:hidden;
  background:var(--grey);
}
.video__frame video,
.video__poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.video__frame video{ opacity:0; transition:opacity .3s var(--ease); }
.video__frame.is-playing video{ opacity:1; position:relative; }
.video__frame.is-playing .video__poster,
.video__frame.is-playing .video__notch,
.video__frame.is-playing .video__play{ opacity:0; pointer-events:none; }
.video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:64px; height:64px; border-radius:50%;
  border:0;
  background:var(--glass-2);
  box-shadow:var(--sh-3), inset 0 1.5px 0 rgba(255,255,255,.95);
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .3s var(--ease);
}
.video__play .mark{ position:absolute; inset:10px; width:auto; height:auto; }
.video__play svg{
  position:relative; z-index:6;
  width:20px; height:20px; margin-left:3px; color:var(--navy-ink);
}
.video__play:hover{ transform:translate(-50%,-50%) scale(1.06); }
/* ============================================================
   15. FAQ + SEALS
   ============================================================ */
.faq__list{ display:grid; gap:12px; max-width:840px; margin-inline:auto; }
.faq__item{
  border-radius:var(--r);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.92);
  overflow:hidden;
  transition:box-shadow .22s var(--ease);
}
.faq__item.is-open{ box-shadow:var(--sh-2), var(--sh-in); }
.faq__q{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:20px 22px;
  border:0; background:transparent; text-align:left; cursor:pointer;
  font-family:var(--display); font-weight:600;
  font-size:16.5px; letter-spacing:-.015em; color:var(--ink);
}
.plus{
  margin-left:auto; position:relative; flex:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--tone-b); border:1px solid var(--grey-2);
  transition:background .22s var(--ease), transform .28s var(--ease);
}
.plus::before,.plus::after{
  content:""; position:absolute; top:50%; left:50%;
  width:10px; height:1.8px; border-radius:2px;
  background:var(--navy);
  transform:translate(-50%,-50%);
  transition:transform .28s var(--ease), opacity .22s var(--ease);
}
.plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .plus{ background:var(--grey); transform:rotate(180deg); }
.faq__item.is-open .plus::after{ opacity:0; }
.faq__a{
  max-height:0; overflow:hidden;
  transition:max-height .34s var(--ease);
}
.faq__a p{
  margin:0; padding:0 22px 22px;
  font-size:14.8px; line-height:1.62; color:var(--ink-2);
  max-width:68ch;
}
.certs{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:14px;
  margin-top:clamp(38px,4vw,56px);
}
.seal{
  display:grid; place-items:center; gap:1px;
  width:112px; height:112px; border-radius:50%;
  background:var(--glass-2);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--sh-2), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 5px rgba(238,240,245,.38);
  text-align:center;
}
.seal b{
  font-family:var(--display); font-weight:700; font-size:17px;
  letter-spacing:-.02em; color:var(--navy-ink);
}
.seal span{
  font-family:var(--mono); font-size:9.4px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
/* ============================================================
   16. CONTACT
   ============================================================ */
.contact{
  text-align:center;
  padding:clamp(44px,5.4vw,76px) clamp(24px,4vw,56px);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3), var(--sh-in);
  display:grid; justify-items:center; gap:18px;
}
.contact .lede{ text-align:center; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; }
.contact__note{ font-size:13px; color:var(--ink-3); margin:0; }
/* ============================================================
   17. FOOTER — light cream, never dark
   ============================================================ */
.footer{
  position:relative;
  background:linear-gradient(180deg, rgba(228,230,236,.52), rgba(239,241,244,.72));
  border-top:1px solid var(--line);
  padding:clamp(52px,6vw,78px) 0 34px;
}
.footer__top{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr;   /* contact column removed */
  gap:clamp(24px,3vw,44px);
}
.footer__brand .row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer__brand .row img{ width:32px; height:32px; border-radius:9px; }
.footer__brand .row b{
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.02em;
}
.footer__brand p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); max-width:38ch; }
.footer__col{ display:grid; gap:9px; align-content:start; }
.footer__col h3{
  margin:0 0 4px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.footer__col a{ font-size:14px; color:var(--ink-2); transition:color .16s var(--ease); }
.footer__col a:hover{ color:var(--navy-ink); }
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:clamp(38px,4vw,56px); padding-top:22px;
  border-top:1px solid var(--line);
}
.footer__bottom small{ font-size:12.8px; color:var(--ink-3); }
.socials{ display:flex; gap:8px; }
.socials a{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--glass-2);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.92);
  color:var(--ink-2);
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.socials a svg{ width:17px; height:17px; }
.socials a:hover{ transform:translateY(-2px); color:var(--navy); }
/* ============================================================
   17b. SUB-PAGE COMPONENTS
   ------------------------------------------------------------
   Shared by products / use-cases / security / about. Same
   material recipes — these only add layout.
   ============================================================ */

/* compact page hero — the home hero is the only full-height one */
.phero{ padding:calc(var(--nav-h) + 78px) 0 clamp(44px,5vw,72px); text-align:center; }
.phero .lede{ margin-inline:auto; margin-top:20px; }
.phero__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
/* alternating feature row: media one side, copy the other */
.frow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.6vw,72px);
  align-items:center;
}
.frow + .frow{ margin-top:clamp(56px,7vw,110px); }
.frow--flip .frow__media{ order:2; }
.frow__media{ display:grid; place-items:center; }
.frow__copy{ display:grid; gap:18px; justify-items:start; }
.frow__copy .h-section{ font-size:clamp(26px,3.1vw,40px); }
.frow__num{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
/* the stage a mockup sits on — glass + aura, same as .pillar__stage */
.fstage{
  position:relative; isolation:isolate;
  display:grid; place-items:center;
  width:100%; padding:clamp(28px,3.4vw,48px);
  border-radius:var(--r-xl);
}
/* spec list with the silver tick */
.speclist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.speclist li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:14.6px; line-height:1.5; color:var(--ink-2);
}
.speclist__i{
  width:22px; height:22px; border-radius:50%; flex:none; margin-top:1px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--navy-ink);
}
.speclist__i svg{ width:12px; height:12px; }
/* plain content tile — security / about */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.tiles--2{ grid-template-columns:repeat(2,1fr); }
.tile{
  position:relative; isolation:isolate;
  padding:clamp(24px,2.4vw,32px);
  border-radius:var(--r-lg);
  display:grid; gap:12px; align-content:start;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-3), var(--sh-in); }
.tile__i{
  width:40px; height:40px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--navy-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.tile__i svg{ width:19px; height:19px; }
.tile p{ margin:0; font-size:14.4px; line-height:1.6; color:var(--ink-2); }
/* numbered figure row (about / impact recap) */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); }
.fig{
  position:relative; isolation:isolate;
  padding:22px; border-radius:var(--r-lg);
  display:grid; gap:6px;
}
.fig b{
  font-family:var(--display); font-weight:700;
  font-size:clamp(26px,2.7vw,36px); letter-spacing:-.03em;
  line-height:1; color:var(--navy-ink);
}
.fig span{ font-size:13px; line-height:1.45; color:var(--ink-2); }
@media (max-width:900px){
  .frow{ grid-template-columns:1fr; gap:34px; }
  .frow--flip .frow__media{ order:0; }
  .frow__copy{ justify-items:center; text-align:center; }
  .frow__copy .lede{ text-align:center; }
  .speclist li{ text-align:left; }
  .tiles, .tiles--2{ grid-template-columns:1fr; }
  .figs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .figs{ grid-template-columns:1fr; }
}
/* ============================================================
   18. REVEAL ON SCROLL
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--d, 0) * .09s);
}
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 }
.reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 }
/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__copy{ max-width:min(42%, 420px); }
  .stat4s{ grid-template-columns:repeat(2,1fr); }
  .mega{ width:min(680px, calc(100vw - 32px)); }
  .uc__cards{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
/* Below this the frame is too narrow to hold both the subject and a
   legible column of type: at any crop that keeps her in shot, the copy
   lands on dark hair or a black t-shirt. So the hero stacks — photo
   above, copy on the page's own silver — rather than leaning on a scrim. */
@media (max-width:900px){
  /* The whole bar is one pane now, so the CTA no longer needs a frame of its
     own down here — a pane inside a pane, and it made the bar 70px instead of
     66px on mobile. */
  .nav__cta{ padding:0; min-height:0; background:none; box-shadow:none;
             -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav__cta::after{ display:none; }

  /* A phone viewport is far taller than the photo, so there is no crop
     that keeps her in frame AND leaves a legible column — the copy
     always lands on dark hair or a black t-shirt. Stack instead. */
  .hero{
    display:block;
    height:auto; min-height:0;
    padding:calc(var(--nav-h) + 14px) 0 clamp(40px,8vw,64px);
  }
  .hero__bg{
    position:relative; inset:auto;
    height:min(var(--m-hero-media-h, 46vh), 380px);
    margin-bottom:clamp(28px,6vw,42px);
  }
  .hero__bg img, .hero__bg video{ object-position:40% center; }
  .hero__inner{ grid-template-columns:1fr; gap:clamp(26px,6vw,40px); }
  .hero__copy{ max-width:none; }
  .hconv{ justify-self:start; max-width:none; }
  .hero .h-display{ font-size:var(--hero-h1-size, clamp(38px, 9vw, 54px)); }
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .mega, .drop{ display:none; }
  .pillars{ grid-template-columns:1fr; justify-items:center; }
  .pillar{ width:min(420px,100%); }
  .stories{ grid-template-columns:1fr; }
  .vstage{ grid-template-columns:1fr; gap:34px; }
  .vstage__copy{ justify-items:center; text-align:center; }
  .vstage__copy .lede{ text-align:center; }
  .vlist li{ text-align:left; }
}
@media (max-width:640px){
  .wrap{ width:calc(100% - 32px); }
  .nav{ width:calc(100% - 20px); top:12px; }
  .hero{ padding-top:calc(var(--nav-h) + 40px); }
  .stat4s{ grid-template-columns:1fr; }
  .journey{ flex-direction:column; }
  .journey .jarr{ transform:rotate(90deg); }
  .jstep{ text-align:center; }
  .footer__top{ grid-template-columns:1fr; }
  .seal{ width:96px; height:96px; }
  .faq__q{ font-size:15.5px; padding:17px 18px; }
}
@media (max-width:420px){
  .nav__cta .ctl--label{ display:none; }
  .nav__cta .ctl{ min-height:46px; padding:11px 14px; }
}
/* ============================================================
   20. REDUCED MOTION — still everything, show the finished state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .field::after, .aura::before,
  .contact::before, .vstage::before,
  .pillar__stage::before, .fstage::before{ animation:none; }
  .hconv__line .w{ opacity:1; transform:none; filter:none; animation:none; }
  .hero__more span{ animation:none; opacity:.7; }
  .flow__wire-run{ animation:none; opacity:.55; stroke-dasharray:none; stroke-dashoffset:0; }
  .fnode--live::after{ animation:none; }
  .fnode--final::before{ animation:none; }
  .fnode__i--pop .fi-win{ animation:none; }
  .hconv[data-done="1"] .hconv__done .hconv__tick{ animation:none; stroke-dashoffset:0; }
  .fnode__i--rage .fi-rays{ animation:none; opacity:.85; }
  .fnode__i--rage .fi-dot{ animation:none; }
  .fnode__i--act .fi-tick{ animation:none; stroke-dashoffset:0; }
  .flow__bead{ animation:none; }
  .ctl--primary::after{ animation:none; }
  .ctl--primary:hover svg{ transform:none; }
  .hconv__think i{ opacity:.7; transform:none; }
  .mini__prog i{ width:70%; transform:none; }
  .wave i{ transform:scaleY(.7); }
}
/* ============================================================
   21. PRINT
   ============================================================ */
@media print{
  .nav, .video__play, .field, .tooth, .mobile-menu{ display:none !important; }
  body{ background:#fff; }
  .section{ padding:24px 0; break-inside:avoid; }
}

/* The link rail needs ~900px of the container to itself. At the larger type
   it ran out of room at 960px and the CTA began wrapping to two lines, so the
   collapse to the burger has to happen before that — not at the width where
   it has already broken. Sizes went up; the breakpoint follows them. */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
}

/* ---- trusted-by reflow ----------------------------------------
   Left to wrap on its own, this row lands on 4+1 at ~900px — a single orphan
   card reads as an accident rather than a layout. Pin the columns instead and
   let the short last row grow to fill, so every break is an even split. */
@media (max-width:1000px){
  .lgo{ min-width:0; flex:1 1 calc(33.333% - 11px); }
}
@media (max-width:560px){
  /* five stacked cards is a 500px column for what is a glance-level signal */
  .trusted{ gap:10px; }
  .lgo{ flex:1 1 calc(50% - 5px); min-height:84px; padding:15px 12px; }
  .lgo img{ height:32px; max-width:118px; }
  .lgo img.is-plated{ height:26px; }
  .lgo--more{ flex-basis:100%; font-size:14px; }
}