/* ============================================================
   NexsCard — B2B landing page
   Brand: NexsCard Quick Reference Brand Style Guide 7.17.26
          Primary  Pantone 2194 C / #0090d4
          Type     Avenir Next (body) · Helvetica Neue Cond. (display)
   Web substitutes: Avenir Next where installed, else Nunito Sans.
                    Display: Archivo, width axis 78 ≈ HN Bold Condensed.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* brand */
  --blue:        #0090d4;   /* identity blue — logo, accents, large type */
  --blue-ui:     #0077b3;   /* darker step for buttons/links (AA on white) */
  --blue-ui-h:   #00628f;
  --blue-bright: #4bb9ee;   /* accents on dark grounds */

  /* grounds */
  --ink:    #06131f;
  --navy:   #0a1e31;
  --navy-2: #102b43;
  --paper:  #f2f6f9;
  --white:  #ffffff;

  /* text */
  --tx:      #16232e;
  --tx-mut:  #566876;
  --tx-on-d:      rgba(255,255,255,.92);
  --tx-on-d-mut:  rgba(255,255,255,.66);
  --rule:         rgba(255,255,255,.14);
  --rule-lt:      #dde5ec;

  /* type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Avenir Next", "Avenir", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* space (4pt rhythm) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --gut: 20px;
  --max: 1200px;
  --r: 10px;               /* radius */
  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--blue-ui); text-decoration:none; }
p{ margin:0 0 var(--s4); }
h1,h2,h3{ margin:0 0 var(--s4); }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:3px; border-radius:4px; }

.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:var(--s4); top:-100px; z-index:200; background:var(--white);
       color:var(--tx); padding:var(--s3) var(--s5); border-radius:var(--r); font-weight:700;
       transition:top .16s var(--ease); }
.skip:focus{ top:var(--s4); }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
@media (min-width:640px){ :root{ --gut:32px; } }
@media (min-width:1024px){ :root{ --gut:48px; } }

/* ---------- type ---------- */
.display,.h1,.h2{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 78;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.002em;
  line-height:.94;
}
.display{ font-size:clamp(2.75rem,9.6vw,5rem); margin-bottom:var(--s5); }
.h1{ font-size:clamp(2.1rem,7.4vw,4rem); }
.h2{ font-size:clamp(1.85rem,6vw,3.1rem); }
.display em,.h1 em,.h2 em{ font-style:normal; color:var(--blue); }

h3{ font-size:1.0625rem; font-weight:700; letter-spacing:.005em; line-height:1.3; }

.lede{ font-size:1.0625rem; line-height:1.62; color:var(--tx-mut); max-width:52ch; }
.lede--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  font-family:var(--f-display); font-variation-settings:"wdth" 88; font-weight:700;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-ui); margin-bottom:var(--s4);
}
.eyebrow--center{ text-align:center; }
.sep{ display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor;
      vertical-align:middle; margin-inline:var(--s2); opacity:.5; }

/* ---------- icons ---------- */
.ic{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5;
     stroke-linecap:round; stroke-linejoin:round; }
.ic--lg{ width:28px; height:28px; }
.ic--xs{ width:15px; height:15px; stroke-width:1.8; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:52px; padding:0 var(--s6);
  border-radius:var(--r);
  font-weight:700; font-size:1rem; letter-spacing:.005em; text-align:center;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ min-height:42px; padding:0 var(--s5); font-size:.9375rem; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--blue-ui); color:#fff; }
.btn--primary:hover{ background:var(--blue-ui-h); }
.btn--ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--onblue{ background:#fff; color:#00517a; }
.btn--onblue:hover{ background:var(--paper); }

/* ============================================================
   SECTION BACKGROUNDS
   The booth backdrop itself, rendered per section by
   tools/make_backgrounds.py off PRODUCTION/bg_generator.py. Same
   colour ramp, same topography, same grain as the 5.6 m wall; only
   the glow moves, to sit behind whatever that section has to lift.
   Tall crops below 860px — `cover` on the wide one would push the
   glow out of frame on a phone.
   ============================================================ */

/* ============================================================
   SHOW BAR
   ============================================================ */
.showbar{ background:var(--blue-ui-h); color:#fff; font-size:.8125rem; }
.showbar{ font-size:.75rem; }
.showbar__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
              gap:var(--s1) var(--s5); padding-block:var(--s3); text-align:center; }
.showbar__txt{ margin:0; letter-spacing:.02em; }
.showbar__city{ display:none; }
@media (min-width:420px){ .showbar{ font-size:.8125rem; } .showbar__city{ display:inline; } }
.showbar__txt b{ font-weight:700; }
.showbar__cta{ display:inline-flex; align-items:center; gap:var(--s2); min-height:40px;
               color:#fff; font-weight:700; }
.showbar__cta span{ border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:1px; }
.showbar__cta:hover span{ border-color:#fff; }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:sticky; top:0; z-index:100; background:var(--ink); border-bottom:1px solid var(--rule); }
.nav__in{ display:flex; align-items:center; gap:var(--s5); min-height:68px; }
.nav__logo{ display:block; flex:none; }
.nav__logo img{ width:152px; height:auto; }
.nav__links{ display:none; }
.nav__cta{ display:none; }

.nav__toggle{ margin-left:auto; width:48px; height:48px; display:grid; place-items:center; cursor:pointer; }
.nav__bars,.nav__bars::before,.nav__bars::after{
  content:""; display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .22s var(--ease), opacity .16s var(--ease);
}
.nav__bars::before{ transform:translateY(-7px); }
.nav__bars::after{ transform:translateY(5px); }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:translateY(-2px) rotate(-45deg); }

.nav__links.is-open{
  display:flex; flex-direction:column;
  position:absolute; left:0; right:0; top:100%;
  background:var(--ink); border-bottom:1px solid var(--rule);
  padding:var(--s3) var(--gut) var(--s6);
}
.nav__links a{ color:var(--tx-on-d); font-weight:600; padding:var(--s4) 0;
               border-bottom:1px solid rgba(255,255,255,.08); }
.nav__links a:hover{ color:#fff; }

@media (min-width:900px){
  .nav__toggle{ display:none; }
  .nav__links{ display:flex; align-items:center; gap:var(--s6); margin-left:auto; }
  .nav__links a{ color:var(--tx-on-d-mut); font-size:.9375rem; font-weight:600;
                 padding:0; border:0; letter-spacing:.01em; }
  .nav__links a:hover{ color:#fff; }
  .nav__cta{ display:inline-flex; }
  .nav__logo img{ width:172px; }
}

/* ============================================================
   HERO
   The product takes more of the row than in V1, and the three
   proof figures move up here from the old results section: they
   do more work before the reader decides whether to keep going.
   ============================================================ */
.hero{ position:relative; isolation:isolate; overflow:hidden;
       background:var(--ink) url("assets/v2-bg-hero-tall.webp") center/cover no-repeat;
       color:var(--tx-on-d);
       padding-block:var(--s7) var(--s8); }
.hero__in{ position:relative; display:grid; gap:var(--s7); }
.hero__copy{ max-width:640px; }
.hero .eyebrow{ color:var(--blue-bright); }
.hero .display{ color:#fff; }
.hero .display em{ color:var(--blue-bright); }
.hero .lede{ color:var(--tx-on-d); max-width:46ch; }
.hero__cta{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s6); }
.hero__art img{ width:100%; }

/* proof, early and quiet: figures lead, labels sit under them */
.proofbar{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
           gap:var(--s6); margin-top:var(--s7);
           padding-top:var(--s5); border-top:1px solid var(--rule); }
.proofbar dt{ font-family:var(--f-display); font-variation-settings:"wdth" 80; font-weight:800;
              font-size:clamp(1.6rem,4.4vw,2.1rem); line-height:1; color:#fff; }
.proofbar dt span{ color:var(--blue-bright); }
.proofbar dd{ margin:var(--s2) 0 0; font-size:.75rem; line-height:1.3; letter-spacing:.07em;
              text-transform:uppercase; color:var(--tx-on-d-mut); }

@media (min-width:560px){
  .hero__cta{ flex-direction:row; flex-wrap:wrap; }
  .proofbar{ gap:var(--s8); }
}
@media (min-width:1000px){
  .hero{ padding-block:var(--s9) var(--s10); }
  .hero__in{ grid-template-columns:1fr 1.12fr; align-items:center; gap:var(--s6); }
}

/* ============================================================
   WHY  —  one lead benefit, four in support
   V1 gave five benefits identical weight, which is the same as
   giving none any. The revenue one leads at heading scale; the
   rest sit quietly beside it with no boxes to compete.
   ============================================================ */
.why{ background:var(--navy); color:var(--tx-on-d); padding-block:var(--s8); }
.why__in{ display:grid; gap:var(--s7); }
.why__lead .eyebrow{ color:var(--blue-bright); }
.why__lead .h2{ color:#fff; }
.why__lead .h2 em{ color:var(--blue-bright); }
.why__lead .lede{ color:var(--tx-on-d); margin-bottom:0; max-width:40ch; }

.why__rest{ display:grid; gap:var(--s6) var(--s7); }
.why__rest li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4);
               align-items:start; }
.why__rest .ic{ color:var(--blue-bright); grid-row:span 2; margin-top:3px; }
.why__rest h3{ margin:0; color:#fff; }
.why__rest p{ margin:var(--s1) 0 0; font-size:.9375rem; line-height:1.55; color:var(--tx-on-d-mut); }

@media (min-width:620px){ .why__rest{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){
  .why{ padding-block:var(--s9); }
  .why__in{ grid-template-columns:minmax(300px,.85fr) 1.15fr; gap:var(--s9); align-items:start; }
  .why__lead{ padding-right:var(--s5); border-right:1px solid var(--rule); }
}

/* ============================================================
   THE SHIFT  —  two journeys, read top to bottom
   V1 put two lists of adjectives side by side. These are routes:
   three steps each, so the difference is a sequence you follow
   rather than a table you compare.
   ============================================================ */
.shift{ position:relative; isolation:isolate; overflow:hidden;
        background:var(--ink) url("assets/v2-bg-shift-tall.webp") center/cover no-repeat;
        color:var(--tx-on-d); padding-block:var(--s9); }
.shift__head{ max-width:960px; margin-inline:auto; text-align:center; }
.shift__head .lede{ max-width:46ch; }
.shift .eyebrow{ color:var(--blue-bright); }
.shift__title{ color:#fff; }
.shift__title em{ color:var(--blue-bright); }
.shift .lede{ color:var(--tx-on-d-mut); }

.tracks{ display:grid; gap:var(--s8); margin-top:var(--s8); }

.track{ display:grid; gap:var(--s5); }
.track__head{ display:grid; gap:2px; }
.track__label{ margin:0; font-family:var(--f-display); font-variation-settings:"wdth" 82;
               font-weight:800; text-transform:uppercase; letter-spacing:.08em;
               font-size:.9375rem; color:#fff; }
.track__sub{ margin:0; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
             font-family:var(--f-display); font-variation-settings:"wdth" 88; font-weight:600;
             color:var(--tx-on-d-mut); }
.track--after .track__sub{ color:var(--blue-bright); }

.track__art{ display:grid; place-items:center; height:196px; }
.track__art picture{ display:contents; }
.track--before .check{ width:auto; max-width:100%; max-height:150px;
                       opacity:.66; transition:opacity .7s var(--ease); }
.track--after .track__card{ width:auto; max-width:100%; max-height:176px;
                            filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
                            transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* the steps: a short rail, numbers riding it */
.track__steps{ display:grid; gap:0; counter-reset:s; }
.track__steps li{ position:relative; counter-increment:s;
                  padding:var(--s3) 0 var(--s3) 46px; }
.track__steps li::before{
  content:counter(s); position:absolute; left:0; top:calc(var(--s3) + 1px);
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--f-display); font-variation-settings:"wdth" 88; font-weight:800;
  font-size:.75rem; line-height:1;
  color:var(--tx-on-d-mut); border:1px solid var(--rule);
}
.track__steps li::after{                      /* the rail between the numbers */
  content:""; position:absolute; left:11.5px; top:calc(var(--s3) + 27px); bottom:-2px;
  width:1px; background:var(--rule);
}
.track__steps li:last-child::after{ display:none; }
.track__steps span{ font-size:.9375rem; line-height:1.5; color:var(--tx-on-d-mut); }

.track__steps--on li::before{ color:#fff; border-color:rgba(75,185,238,.55);
                              background:rgba(0,144,212,.16); }
.track__steps--on li::after{ background:rgba(75,185,238,.34); }
.track__steps--on span{ color:#fff; }

.track__end{ margin:0; padding-top:var(--s4); border-top:1px solid var(--rule);
             font-size:.8125rem; letter-spacing:.02em; color:var(--tx-on-d-mut); }
.track--after .track__end{ color:var(--blue-bright); border-top-color:rgba(75,185,238,.3); }

/* lit state, applied by script (or immediately when motion is reduced) */
.stage-lit .track--before .check{ opacity:.5; }

@media (min-width:860px){
  .shift{ padding-block:var(--s9) var(--s9); }   /* V1 left a dead band under the tracks */
  .tracks{ grid-template-columns:1fr 1fr; gap:var(--s9); margin-top:var(--s9); }
  .track__art{ height:236px; }
  .track--before .check{ max-height:180px; }
  .track--after .track__card{ max-height:216px; }
}

/* ============================================================
   PROGRAM  —  the app, shown at size, features beside it
   V1 listed six equal cards. Here the product carries the
   section and the features hang off it as plain rows.
   ============================================================ */
.program{ background:var(--white); padding-block:var(--s8); }
.program__in{ display:grid; gap:var(--s8); }
.program__art{ display:grid; place-items:center; }
.program__art img{ width:min(260px,64%); height:auto;
                   filter:drop-shadow(0 30px 60px rgba(10,30,49,.22)); }
.program__copy header{ max-width:46ch; }
.program__copy header .lede{ margin-bottom:0; }

.feats{ display:grid; margin-top:var(--s7); }
.feats li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4);
           padding:var(--s5) 0; border-top:1px solid var(--rule-lt); }
.feats .ic{ color:var(--blue); grid-row:span 2; margin-top:2px; }
.feats h3{ margin:0; }
.feats p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--tx-mut); }
.feats sup a{ text-decoration:none; padding:0 2px; }

.program__powered{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  align-items:start; margin:var(--s7) 0 0; padding:var(--s5);
  background:var(--paper); border-left:3px solid var(--blue);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.9375rem; line-height:1.6; color:var(--tx-mut);
}
.program__powered .ic{ color:var(--blue); margin-top:2px; }
.program__powered b{ color:var(--tx); }

@media (min-width:700px){
  .feats{ grid-template-columns:1fr 1fr; column-gap:var(--s7); }
}
@media (min-width:1000px){
  .program{ padding-block:var(--s10); }
  .program__in{ grid-template-columns:.78fr 1.22fr; gap:var(--s9); align-items:center; }
  .program__art img{ width:min(300px,100%); }
}

/* ============================================================
   BOTH SIDES  —  operator tool on one side, card on the other
   ============================================================ */
.sides{ background:var(--navy); color:var(--tx-on-d); padding-block:var(--s8); }
.sechead--center{ max-width:640px; margin-inline:auto; text-align:center; }
.sides .eyebrow{ color:var(--blue-bright); }
.sides .h2{ color:#fff; }
.sides .lede{ color:var(--tx-on-d-mut); }
.sides__grid{ display:grid; gap:var(--s8); margin-top:var(--s8); }

.side{ display:grid; gap:var(--s5); align-content:start; }
.side__who{ display:flex; align-items:center; gap:var(--s3); margin:0;
            font-family:var(--f-display); font-variation-settings:"wdth" 84; font-weight:800;
            text-transform:uppercase; letter-spacing:.08em; font-size:.875rem; color:#fff; }
.side__who .ic{ color:var(--blue-bright); }

.side__art{ display:grid; justify-items:center; align-items:end; height:214px; }
.side__art picture{ display:contents; }
/* the operator tool is a light screen: a window frame stops it floating as a
   white rectangle, and cutting it at the baseline says there is more below */
.side__art--screen img{ width:100%; max-width:none; height:auto;
                        border-radius:var(--r) var(--r) 0 0;
                        border:1px solid rgba(255,255,255,.22); border-bottom:0;
                        box-shadow:0 -12px 44px rgba(0,0,0,.4); }
.side__art--card img{ width:auto; max-width:100%; max-height:214px;
                      filter:drop-shadow(0 22px 40px rgba(0,0,0,.55)); }

.side__list{ display:grid; gap:0; }
.side__list li{ padding:var(--s3) 0; border-top:1px solid var(--rule);
                font-size:.9375rem; line-height:1.5; color:var(--tx-on-d-mut); }
.side__list li:last-child{ border-bottom:1px solid var(--rule); }

@media (min-width:820px){
  .sides{ padding-block:var(--s9); }
  .sides__grid{ grid-template-columns:1fr 1fr; gap:var(--s8); margin-top:var(--s9); }
  .side__art{ height:262px; }
  .side__art--card img{ max-height:262px; }
}

/* ============================================================
   HOW IT WORKS — a route, not a list.
   The rail is the point: it carries the eye from one step to the
   next, so the section reads as a sequence instead of a grid.
   ============================================================ */
.how{ background:var(--paper); padding-block:var(--s8); }
.how__in{ display:grid; gap:var(--s8); }
.how__head{ max-width:44ch; }
.how__head .lede{ margin-bottom:0; }
/* a supporting heading, not a page-level one — it shares the room with the route */
.how__title{ font-size:clamp(1.75rem,5vw,2.35rem); }

.flow{
  --node:56px;          /* diameter of the icon disc */
  --clear:10px;         /* breathing room between disc and rail */
  --gap:var(--s6);
  display:grid; gap:var(--gap);
}

.flow__step{ position:relative; display:grid; grid-template-columns:auto 1fr;
             gap:var(--s5); align-items:start; }

/* the disc */
.flow__node{ position:relative; z-index:1; width:var(--node); height:var(--node); flex:none;
             display:grid; place-items:center;
             background:var(--white); border:2px solid #cfe3f2; border-radius:50%;
             box-shadow:0 8px 22px rgba(10,30,49,.07); }
.flow__node .ic{ color:var(--blue); }
.ic--xl{ width:26px; height:26px; }

/* the route ends somewhere: the last stop is filled in the brand colour */
.flow__step:last-child .flow__node{ background:var(--blue-ui); border-color:var(--blue-ui); }
.flow__step:last-child .flow__node .ic{ color:#fff; }
.flow__step:last-child .flow__n{ background:var(--ink); }

/* the step number, riding the edge of the disc */
.flow__n{
  position:absolute; top:-8px; right:-8px;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blue-ui); color:#fff;
  border:3px solid var(--paper);
  font-family:var(--f-display); font-variation-settings:"wdth" 88; font-weight:800;
  font-size:.8125rem; line-height:1;
}

.flow__txt{ padding-top:var(--s2); }
.flow__txt h3{ margin:0 0 var(--s2); }
.flow__txt p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--tx-mut); }

/* the rail — vertical on phones */
.flow__step + .flow__step::before{
  content:""; position:absolute; z-index:0;
  left:calc(var(--node) / 2 - 1px);
  top:calc(var(--gap) * -1 - var(--clear));
  width:2px; height:calc(var(--gap) + var(--clear) * 2);
  background:#c8ddec;
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease) .12s;
}
.flow__step + .flow__step::after{
  content:""; position:absolute; z-index:0;
  left:calc(var(--node) / 2 - 5px); top:calc(var(--clear) * -1 - 4px);
  width:8px; height:8px;
  border-right:2px solid #9dc2dc; border-bottom:2px solid #9dc2dc;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .3s var(--ease) .4s;
}
.flow__step.is-in::before{ transform:scaleY(1); }
.flow__step.is-in::after{ transform:rotate(45deg) scale(1); }

/* No 2x2 in between: a four-step route split over two rows breaks the rail and
   the reading order stops being obvious. It stays a vertical timeline until
   all four fit on one line. */
@media (min-width:600px) and (max-width:859px){
  .flow{ --node:64px; --gap:var(--s7); }
  .flow__txt{ max-width:52ch; }
}

/* four across — the rail turns horizontal and the steps centre on it */
@media (min-width:860px){
  .how{ padding-block:var(--s9); }
  .flow{ --node:100px; --gap:20px; grid-template-columns:repeat(4,1fr); }
  .flow__step{ grid-template-columns:1fr; justify-items:center; text-align:center;
               gap:var(--s5); }
  .flow__txt{ padding-top:0; max-width:26ch; }
  .flow__txt h3{ margin-bottom:var(--s3); }
  .ic--xl{ width:40px; height:40px; }
  .flow__n{ width:32px; height:32px; font-size:.9375rem; top:-2px; right:2px; }

  .flow__step + .flow__step::before{
    left:calc(-50% - var(--gap) + var(--node) / 2 + var(--clear));
    right:calc(50% + var(--node) / 2 + var(--clear));
    top:calc(var(--node) / 2 - 1px);
    width:auto; height:2px;
    transform:scaleX(0); transform-origin:left;
    transition:transform .55s var(--ease) .1s;
  }
  .flow__step.is-in::before{ transform:scaleX(1); }
  .flow__step + .flow__step::after{
    left:auto; right:calc(50% + var(--node) / 2 + var(--clear) - 3px);
    top:calc(var(--node) / 2 - 5px);
    border-right:2px solid #9dc2dc; border-bottom:2px solid #9dc2dc;
    transform:rotate(-45deg) scale(0);
  }
  .flow__step.is-in::after{ transform:rotate(-45deg) scale(1); }
}

/* the heading steps aside and becomes the start of the line */
@media (min-width:1200px){
  .how__in{ grid-template-columns:minmax(290px,330px) 1fr; gap:var(--s7); align-items:center; }
  .how__head{ max-width:none; }
  .how__title{ font-size:1.95rem; }   /* each line has to survive the side column intact */
}

@media (prefers-reduced-motion:reduce){
  .flow__step::before{ transform:scaleY(1) !important; }
  .flow__step::after{ transform:rotate(45deg) scale(1) !important; }
}
@media (prefers-reduced-motion:reduce) and (min-width:860px){
  .flow__step::before{ transform:scaleX(1) !important; }
  .flow__step::after{ transform:rotate(-45deg) scale(1) !important; }
}

/* ============================================================
   PROOF  —  one quote, given room
   The figures left this section for the hero, so the quote is
   all that is here and it is set at heading scale. If the
   client supplies a name, company or photo, it goes in
   .quote__by; the slot is built for it and stays honest empty.
   ============================================================ */
.proof{ position:relative; isolation:isolate; overflow:hidden;
        background:var(--navy) url("assets/v2-bg-proof-tall.webp") center/cover no-repeat;
        color:var(--tx-on-d); padding-block:var(--s8); }
.proof__in{ position:relative; max-width:900px; margin-inline:auto; text-align:center; }
.proof .eyebrow{ color:var(--blue-bright); }

.quote{ margin:0; }
.quote p{ font-family:var(--f-display); font-variation-settings:"wdth" 92; font-weight:600;
          font-size:clamp(1.45rem,3.8vw,2.15rem); line-height:1.3; color:#fff;
          margin:0 0 var(--s6); text-wrap:pretty; }
.quote__by{ display:flex; align-items:center; justify-content:center; gap:var(--s4); }
.quote__rule{ width:40px; height:1px; background:var(--blue-bright); }
.quote__who{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
             color:var(--tx-on-d-mut); }

@media (min-width:900px){ .proof{ padding-block:var(--s9); } }

/* ============================================================
   BOOK  —  the offer, and what the twenty minutes are for
   V1 centred the copy and left the blue band half empty. The
   four questions from the invitation email fill it, and give
   the CTA something concrete to stand on.
   ============================================================ */
.book{ background:var(--blue-ui-h); color:#fff; padding-block:var(--s8); }
.book__in{ display:grid; gap:var(--s7); align-items:center; }
.book__when{ color:rgba(255,255,255,.9); margin-bottom:var(--s5); }
.book__title{ color:#fff; font-size:clamp(2rem,5.2vw,3.1rem); }
.book__title em{ color:#bfe6fa; }
.book .lede{ color:rgba(255,255,255,.94); max-width:46ch; }
.book__cta{ margin-top:var(--s6); }
.book__call{ margin:var(--s4) 0 0; font-size:.9375rem; color:rgba(255,255,255,.9); }
.book__call a{ color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.5);
               display:inline-block; padding:var(--s2) 0 2px; }
.book__call a:hover{ border-color:#fff; }

.book__card{ padding:var(--s6); border:1px solid rgba(255,255,255,.32); border-radius:var(--r);
             background:rgba(0,0,0,.12); }
.book__cardhead{ margin:0 0 var(--s5); font-family:var(--f-display);
                 font-variation-settings:"wdth" 84; font-weight:800; text-transform:uppercase;
                 letter-spacing:.08em; font-size:.8125rem; color:#bfe6fa; }
.book__points{ display:grid; gap:0; }
.book__points li{ padding:var(--s3) 0; border-top:1px solid rgba(255,255,255,.22);
                  font-size:1rem; line-height:1.45; }
.book__points li:first-child{ border-top:0; padding-top:0; }
.book__booth{ display:flex; align-items:baseline; gap:var(--s3);
              margin:var(--s6) 0 0; padding-top:var(--s5);
              border-top:1px solid rgba(255,255,255,.22); }
.book__booth span{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
                   color:rgba(255,255,255,.8); }
.book__booth b{ font-family:var(--f-display); font-variation-settings:"wdth" 80; font-weight:800;
                font-size:1.75rem; line-height:1; color:#fff; }

@media (min-width:900px){
  .book{ padding-block:var(--s9); }
  .book__in{ grid-template-columns:1.15fr .85fr; gap:var(--s9); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--tx-on-d-mut); padding-block:var(--s8) var(--s7);
       font-size:.875rem; }
.foot__in{ display:grid; gap:var(--s6); padding-bottom:var(--s6);
           border-bottom:1px solid var(--rule); }
.foot__logo{ width:150px; height:auto; }
.foot__powered{ margin:var(--s4) 0 0; font-size:.8125rem; letter-spacing:.06em;
                text-transform:uppercase; }
.foot__links{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); }
.foot__links a{ color:var(--tx-on-d-mut); display:inline-flex; align-items:center; min-height:36px; }
.foot__links a:hover{ color:#fff; }

.foot__legal{ padding-top:var(--s6); font-size:.75rem; line-height:1.6;
              color:rgba(255,255,255,.55); }
.foot__legal p{ margin:0 0 var(--s3); max-width:82ch; }
.foot__fn{ color:rgba(255,255,255,.56); }
.foot__copy{ margin:var(--s5) 0 0; }

@media (min-width:768px){
  .foot__in{ grid-template-columns:auto 1fr; align-items:center; }
  .foot__links{ justify-content:flex-end; }
}

/* ============================================================
   MOBILE DOCK
   ============================================================ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(6,19,31,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.dock.is-in{ transform:none; }
.dock .btn{ max-width:520px; margin-inline:auto; }
.dock p{ margin:var(--s2) 0 0; text-align:center; font-size:.75rem; letter-spacing:.06em;
         text-transform:uppercase; color:var(--tx-on-d-mut); }
@media (min-width:900px){ .dock{ display:none; } }


/* ---------- wide crops ----------
   Must sit after the section rules: each of those sets `background` as a
   shorthand with its tall crop, and a shorthand resets background-image
   whatever the media query said earlier. */
@media (min-width:860px){
  .hero { background-image:url("assets/v2-bg-hero.webp"); }
  .shift{ background-image:url("assets/v2-bg-shift.webp"); }
  .proof{ background-image:url("assets/v2-bg-proof.webp"); }
}

/* ============================================================
   REVEAL
   ============================================================ */
.has-js .reveal{ opacity:0; transform:translateY(18px); }
.has-js .reveal.is-in{ opacity:1; transform:none;
                       transition:opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .has-js .reveal,.has-js .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .dock{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}