/* ============================================================
   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
   ============================================================ */
.hero{ position:relative; isolation:isolate; overflow:hidden;
       background:var(--ink) url("assets/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__note{ margin:var(--s5) 0 0; font-size:.8125rem; letter-spacing:.03em;
             text-transform:uppercase; color:var(--tx-on-d-mut);
             font-family:var(--f-display); font-variation-settings:"wdth" 88; font-weight:600; }
.hero__art img{ width:100%; }

@media (min-width:560px){
  .hero__cta{ flex-direction:row; flex-wrap:wrap; }
}
@media (min-width:1000px){
  .hero{ padding-block:var(--s9) var(--s10); }
  /* the rebuilt composition is ~18% wider than the cropped one it replaced,
     so the art column takes more of the row to keep the same presence */
  .hero__in{ grid-template-columns:1fr 1.06fr; align-items:center; gap:var(--s6); }
}

/* ============================================================
   VALUE STRIP
   ============================================================ */
.strip{ background:var(--navy); color:var(--tx-on-d); padding-block:var(--s7); }
.strip__list{ display:grid; gap:var(--s6) var(--s5); }
.strip__list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s4);
                 align-items:start; }
.strip__list .ic{ color:var(--blue-bright); grid-row:span 2; margin-top:2px; }
.strip__list h3{ margin:0; color:#fff; }
.strip__list p{ margin:var(--s1) 0 0; font-size:.9375rem; line-height:1.5; color:var(--tx-on-d-mut); }

@media (min-width:560px){ .strip__list{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){
  .strip{ padding-block:var(--s7); }
  .strip__list{ grid-template-columns:repeat(5,1fr); gap:var(--s5); }
  .strip__list li{ grid-template-columns:1fr; }
  .strip__list .ic{ grid-row:auto; margin-bottom:var(--s2); }
}

/* ============================================================
   THE SHIFT  — signature section
   ============================================================ */
.shift{ position:relative; isolation:isolate; overflow:hidden;
       background:var(--ink) url("assets/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); }

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

.pane{ text-align:center; }
.pane__art{ display:grid; place-items:center; min-height:132px; margin-bottom:var(--s5); }
.pane__art picture{ display:contents; }   /* let the <img> be the grid item so max-height resolves */
.pane--before .check{ width:min(318px,91%); height:auto;   /* the file carries its own
                        shadow margin, so it runs ~6% wider than the paper itself */
                      opacity:.9; transition:opacity .7s var(--ease); }
.pane--after .pane__card{ width:min(320px,88%);
                          filter:drop-shadow(0 26px 44px rgba(0,0,0,.62));
                          transition:opacity .7s var(--ease), transform .7s var(--ease); }
.has-js .pane--after .pane__card{ opacity:.55; transform:scale(.965); }
.has-js .pane--before .check{ opacity:.9; }
.pane--after .pane__art{ position:relative; }
.pane--after .pane__art::before{      /* a lamp switched on behind the card */
  content:""; position:absolute; width:132%; aspect-ratio:1.42; border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(150,230,255,.62)  0%,
    rgba(60,200,255,.52)   9%,
    rgba(34,170,250,.40)  22%,
    rgba(0,100,235,.22)   42%,
    rgba(0,8,34,0)        72%);
  opacity:0; transition:opacity .8s var(--ease);
}

.pane__label{ font-family:var(--f-display); font-variation-settings:"wdth" 82; font-weight:800;
              text-transform:uppercase; letter-spacing:.08em; font-size:.875rem;
              color:#fff; margin:0 0 var(--s5); }
.pane__label span{ display:block; font-weight:600; letter-spacing:.14em; font-size:.6875rem;
                   color:var(--tx-on-d-mut); margin-top:var(--s1); }
.pane--after .pane__label span{ color:var(--blue-bright); }

.pane__list{ display:grid; gap:var(--s2); max-width:300px; margin-inline:auto; }
.pane__list li{ position:relative; padding:var(--s3) var(--s4) var(--s3) 42px;
                border:1px solid var(--rule); border-radius:var(--r);
                font-size:.9375rem; text-align:left; color:var(--tx-on-d-mut);
                transition:color .5s var(--ease), border-color .5s var(--ease),
                           background-color .5s var(--ease); }
.pane__list li::before{
  content:""; position:absolute; left:var(--s4); top:50%; width:14px; height:14px;
  margin-top:-7px; border-radius:50%;
  border:1.5px solid currentColor; opacity:.5;
}
.pane__list--on li::before{
  border-color:var(--blue-bright); opacity:1;
  background:
    linear-gradient(to bottom right, transparent 46%, var(--blue-bright) 46%) no-repeat;
  background-size:100% 100%;
  transition:background-size .4s var(--ease);
}
.has-js .pane__list--on li::before{ background-size:0% 0%; }

/* lit state, applied by script (or immediately when motion is reduced) */
.stage-lit .pane--before .check{ opacity:.66; }   /* dimmed, but it still has to read as paper */
.stage-lit .pane--after .pane__card{ opacity:1; transform:scale(1); }
.stage-lit .pane--after .pane__art::before{ opacity:1; }
.stage-lit .pane__list--on li{ color:#fff; border-color:rgba(75,185,238,.45);
                               background:rgba(0,144,212,.10); }
.stage-lit .pane__list--on li::before{ background-size:100% 100%; }
.stage-lit .pane--before .pane__list li{ opacity:.6; }

.shift__arrow{ display:grid; place-items:center; color:var(--blue-bright); }
.shift__arrow svg{ width:56px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6;
                   stroke-linecap:round; stroke-linejoin:round; transform:rotate(90deg); }

@media (min-width:860px){
  .shift{ padding-block:var(--s10); }
  .shift__stage{ grid-template-columns:1fr auto 1fr; align-items:start;
                 gap:var(--s6); margin-top:var(--s9); }
  .shift__arrow{ padding-top:110px; }
  .shift__arrow svg{ transform:none; width:64px; }
  .pane__art{ height:244px; min-height:0; }
  .pane--before .check{ width:min(360px,100%); }
  .pane--after .pane__card{ width:auto; max-width:100%; max-height:244px; }
}

/* ============================================================
   PROGRAM
   ============================================================ */
.program{ background:var(--white); padding-block:var(--s8); }
.sechead{ max-width:640px; margin-bottom:var(--s8); }
.sechead .lede{ margin-bottom:0; }

.feats{ display:grid; }
.feats h3{ margin:0; }
.feats p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--tx-mut); }
.feats .ic{ color:var(--blue); }
.feats sup a{ text-decoration:none; padding:0 2px; }

/* phones: a compact list, not six tall cards */
@media (max-width:559px){
  .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 li:first-child{ border-top:0; padding-top:0; }
  .feats .ic{ grid-row:span 2; margin-top: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:560px){
  .feats{ grid-template-columns:1fr 1fr; gap:var(--s3); }
  .feats li{ padding:var(--s5);
             border:1px solid var(--rule-lt); border-radius:var(--r); background:var(--white);
             transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
  .feats li:hover{ border-color:#c3d4e0; box-shadow:0 10px 28px rgba(10,30,49,.07); }
  .feats .ic{ margin:0 0 var(--s4); }
  .feats h3{ margin-bottom:var(--s2); }
}
@media (min-width:1024px){
  .program{ padding-block:var(--s10); }
  .feats{ grid-template-columns:repeat(3,1fr); }
  .feats li{ padding:var(--s6); }
}

/* ============================================================
   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
   ============================================================ */
.proof{ position:relative; isolation:isolate; overflow:hidden;
        background:var(--navy) url("assets/bg-proof-tall.webp") center/cover no-repeat; color:var(--tx-on-d); padding-block:var(--s8); }
.proof__in{ position:relative; display:grid; gap:var(--s8); }
.proof .eyebrow{ color:var(--blue-bright); }

.quote p{ font-family:var(--f-display); font-variation-settings:"wdth" 92; font-weight:600;
          font-size:clamp(1.25rem,3.6vw,1.75rem); line-height:1.34; color:#fff;
          margin:0 0 var(--s5); text-wrap:pretty; }
.quote footer{ font-size:.875rem; letter-spacing:.06em; text-transform:uppercase;
               color:var(--tx-on-d-mut); }
.quote{ margin:0; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.stats dt{ font-family:var(--f-display); font-variation-settings:"wdth" 80; font-weight:800;
           font-size:clamp(2rem,7vw,3rem); line-height:1; color:var(--blue-bright); }
.stats dt span{ color:rgba(75,185,238,.55); }
.stats dd{ margin:var(--s2) 0 0; font-size:.8125rem; line-height:1.35;
           letter-spacing:.04em; text-transform:uppercase; color:var(--tx-on-d-mut); }

@media (min-width:900px){
  .proof{ padding-block:var(--s9); }
  .proof__in{ grid-template-columns:1.25fr 1fr; align-items:center; gap:var(--s10); }
  .stats{ grid-template-columns:1fr; gap:var(--s6); }
  .stats > div{ display:grid; grid-template-columns:auto 1fr; align-items:baseline;
                gap:var(--s4); padding-bottom:var(--s5); border-bottom:1px solid var(--rule); }
  .stats dd{ margin:0; }
}

/* ============================================================
   BOOK  (the show offer)
   ============================================================ */
.book{ background:var(--blue-ui-h); color:#fff; padding-block:var(--s8); }
.book__in{ max-width:1060px; margin-inline:auto; text-align:center; }
.book .lede{ max-width:52ch; }
.book__when{ color:rgba(255,255,255,.9); margin-bottom:var(--s5); }
.book__title{ color:#fff;
              /* sized so "Don't just come to MoneyTrends" holds one line: with the
                 full stop gone, the line break is what separates the two sentences */
              font-size:clamp(2.1rem,5.6vw,3.6rem); }
.book__title em{ color:#bfe6fa; }
.book .lede{ color:rgba(255,255,255,.94); }
.book__cta{ margin-top:var(--s7); }
.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; }

@media (min-width:1024px){ .book{ padding-block:var(--s10); } }

/* ============================================================
   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/bg-hero.webp"); }
  .shift{ background-image:url("assets/bg-shift.webp"); }
  .proof{ background-image:url("assets/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; }
}