/* ============================================================
   PROJECT SETTER AI
   Light. Cool. Instrument-grade.
   ============================================================ */

*,*::before{--x:0}
*,*::before{--x:0}
*,*::before{--x:0}
:root{
  /* ── PALETTE ─────────────────────────────────────────────
     Exact values from the supplied swatches. Two families:
       cool = ice / cyan / teal / navy  → the product
       warm = amber / orange           → the action
     Fill values first, then the darkened text variants. Only
     teal and navy are safe as body copy on white.            */
  --ice:#7BD9F2;
  --cyan:#00B4D8;
  --teal:#0E7490;
  --navy:#12798F;   /* legacy alias — no longer a ground */
  --amber:#FFC300;
  --gold:#FD9E02;
  --orange:#FF6A00;

  --teal-tx:#0E7490;    /* 5.3:1 on white — body safe        */
  --orange-tx:#B34700;  /* 5.5:1 on white — body safe        */
  --orange-dsp:#E85D00; /* 3.5:1 — display type only         */

  /* neutrals sit on the navy axis so greys belong to the family */
  --page:#F2F3F5;      /* neutral grey the slabs float on */
  --bg:#FFFFFF;
  --bg-2:#F7F8FA;      /* neutral light grey — no blue, no cream */
  --bg-3:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --glass:rgba(255,255,255,.72);
  --line:rgba(16,21,28,.11);
  --line-2:rgba(16,21,28,.18);
  --hair:rgba(16,21,28,.06);

  --text:#080C14;
  --text-2:#454F5E;
  --text-3:#5E6979;   /* 4.7:1 on white; #8A929C measured 3.15:1 */

  --deep:var(--teal);
  --signal:var(--orange-tx);
  --signal-br:var(--orange);
  --signal-hi:var(--amber);
  --signal-am:var(--amber);
  --sky:var(--ice);
  --live:#0693A8;
  --live-bg:#E6F6FA;

  --grad-brand:linear-gradient(112deg,#00B4D8 0%,#57DDF5 28%,#FFC300 70%,#FF6A00 100%);
  --grad-cool:linear-gradient(150deg,#57DDF5,#0E7490);
  --grad-warm:linear-gradient(150deg,#FFC300,#FF6A00);
  --grad-signal:linear-gradient(0deg,#9C5200,#9C5200);
  --grad-fill:linear-gradient(150deg,#FFC300,#FF6A00);
  --grad-hair:linear-gradient(90deg,rgba(2,48,71,.11),rgba(2,48,71,.11));

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.83,0,.17,1);

  --max:1280px;
  --pad:clamp(22px,5vw,64px);
  --section:clamp(110px,14vw,200px);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --pill:980px;

  --font-display:"Switzer","Satoshi",system-ui,-apple-system,sans-serif;
  --font-body:"Plus Jakarta Sans","Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* shadows carry a navy tint rather than grey — greys read heavy
     and flatten a bright palette */
  --sh-1:0 1px 2px rgba(16,21,28,.05);
  --sh-2:0 4px 18px rgba(16,21,28,.07);
  --sh-3:0 14px 50px rgba(16,21,28,.10);
  --sh-slab:0 2px 4px rgba(16,21,28,.04),0 18px 60px -24px rgba(16,21,28,.16);
  --sh-glow:0 10px 30px -6px rgba(251,133,0,.45);
}



/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,table{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
body.lock{overflow:hidden}
::selection{background:#FFDCC9;color:#070C16}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:var(--section)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.surface{background:var(--surface)}
.surface::before,.surface::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);
}
.surface::before{top:0}.surface::after{bottom:0}

/* ---------- MONO DATA TYPE — the high-tech tell ---------- */
/* mono is reserved for real readouts — timecodes, phone numbers, table data */
.mono,.spec__v,.tab__m,.url,.bars__x,.player__time,.rec__p,.audit,.routes__num{
  font-family:var(--font-mono);
  font-feature-settings:"tnum" 1;
}
/* everything else that was mono becomes quiet Apple-style label text */
.spec__k,.kpi__l,.chip,
/* ---------- TYPE ---------- */
h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:-.024em;line-height:1.06;text-wrap:balance;color:var(--text);
}
.h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.032em;line-height:1.04}
.h2{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.028em;line-height:1.07}
.h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.022em;line-height:1.16}
em,.grad{font-style:normal;color:var(--signal);background:none;-webkit-text-fill-color:currentColor}
.lede{font-size:clamp(19px,1.5vw,23px);color:var(--text-2);max-width:60ch;line-height:1.48;font-weight:400}
.small{font-size:15px;color:var(--text-3)}

.kicker{
  display:block;font-family:var(--font-body);
  font-size:clamp(17px,1.35vw,21px);font-weight:600;letter-spacing:-.012em;
  text-transform:none;color:var(--signal);margin-bottom:10px;
}
.kicker::before{content:none}

/* ---------- BACKDROP SYSTEM ---------- */
.dotmesh{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(10,18,32,.13) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 42%,#000,transparent 76%);
  mask-image:radial-gradient(70% 55% at 50% 42%,#000,transparent 76%);
  opacity:.7;
}
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px)}
.orb--1{width:46vw;height:46vw;right:-12vw;top:-14vw;
  background:radial-gradient(circle at 35% 35%,rgba(255,122,60,.42),rgba(255,77,13,.14) 45%,transparent 70%)}
.orb--2{width:34vw;height:34vw;left:-10vw;bottom:-12vw;
  background:radial-gradient(circle at 60% 40%,rgba(255,176,32,.30),transparent 68%)}
.bloom{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px);
  background:radial-gradient(circle,rgba(255,122,60,.34),transparent 70%)}
.bloom--b{background:radial-gradient(circle,rgba(255,176,32,.30),transparent 70%)}
.bloom--c{background:radial-gradient(circle,rgba(255,77,13,.22),transparent 70%)}

/* scroll progress */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;background:transparent}
.scrollbar i{display:block;height:100%;width:0;background:var(--grad-signal);
  box-shadow:0 0 12px rgba(255,77,13,.7)}

/* ---------- GRADIENT HAIRLINE (the core card treatment) ---------- */
.hair{position:relative}
.hair::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-hair);opacity:0;transition:opacity .4s var(--ease-out);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.hair:hover::before{opacity:1}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:10px;
  font-weight:650;font-size:16px;letter-spacing:-.008em;
  border:1px solid var(--line-2);color:var(--text);background:var(--surface);
  box-shadow:var(--sh-1);will-change:transform;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s var(--ease-out);
}
.btn:hover{border-color:var(--text);box-shadow:var(--sh-2)}
.btn--solid{background:var(--grad-signal);border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 1px 2px rgba(196,43,0,.3),0 10px 26px -10px rgba(255,77,13,.65)}
.btn--solid:hover{filter:brightness(1.06);box-shadow:0 1px 2px rgba(196,43,0,.3),0 16px 38px -10px rgba(255,77,13,.8)}
@keyframes pulsering{0%{transform:scale(1);opacity:.75}70%{opacity:0}100%{transform:scale(1.9);opacity:0}}

/* ---------- REVEALS ---------- */
/* Masked reveal. The clip box must be taller than the line box or tall
   glyphs get shaved — Switzer's ink runs ~.09em past the line box at
   display sizes. Padding opens the mask, the negative margin takes the
   extra height back out of the flow so spacing is unchanged. */
.rv{display:block;overflow:hidden;padding-block:.14em;margin-block:-.14em}
.rv > span,.rv-i{display:block;transform:translateY(135%);will-change:transform}
.fade{opacity:0;transform:translateY(16px);will-change:transform,opacity}

/* ---------- PRELOADER ---------- */
.pre{position:fixed;inset:0;z-index:9998;background:var(--bg);display:grid;place-items:center}
.pre svg{width:62px;height:62px;overflow:visible}
.pre path{fill:none;stroke:var(--signal-br);stroke-width:2.4;stroke-linecap:round}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;border-bottom:1px solid transparent;
  transition:background .4s var(--ease-out),border-color .4s var(--ease-out)}
.nav--stuck{background:rgba(244,246,250,.72);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:22px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.03em;font-size:17px;white-space:nowrap;flex:0 0 auto;padding-block:8px}
.logo svg{width:29px;height:29px;flex:0 0 auto}
.nav__links{display:flex;gap:clamp(18px,2vw,30px);font-size:15.5px;color:var(--text-2);font-weight:550;white-space:nowrap}
.nav__links a{transition:color .2s;padding-block:5px;border-bottom:1.5px solid transparent}
.nav__links a:hover{color:var(--text);border-bottom-color:var(--signal)}
.nav__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(0,160,107,.5)}70%{box-shadow:0 0 0 8px rgba(0,160,107,0)}100%{box-shadow:0 0 0 0 rgba(0,160,107,0)}}
.nav__btn{padding:11px 20px;font-size:15px}
@media (max-width:1320px){}
@media (max-width:1200px){.nav__links{display:none}}
/* below 520px the wordmark is dropped so the two CTAs always fit */
@media (max-width:520px){
  .logo > span{display:none}
  .nav__in{gap:10px;height:66px}
  .nav__cta{gap:9px}
}
@media (max-width:620px){
  .nav__phone .n{display:none}
  .nav__phone{gap:7px;padding:9px 14px;border-radius:9px;border:1px solid var(--line-2);
    background:var(--surface);box-shadow:var(--sh-1);font-size:15px}
  .nav__phone::after{content:"Call";font-weight:700;letter-spacing:-.01em}
  .nav__btn{padding:10px 16px;font-size:14.5px}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:118px;padding-bottom:68px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__paper{position:absolute;inset:0;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}
.hero__in{position:relative;z-index:2;width:100%}
.hero__cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,4.2vw,56px);align-items:center}
@media (max-width:1040px){.hero__cols{grid-template-columns:1fr;gap:42px}}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 11px;border-radius:6px;
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:clamp(22px,3vw,30px)}
.hero__eyebrow i{width:6px;height:6px;background:var(--signal-br);border-radius:1px;transform:rotate(45deg);
  box-shadow:0 0 10px rgba(255,77,13,.9);font-style:normal}
.hero h1{margin-bottom:24px}
.hero__sub{font-size:clamp(18px,1.55vw,22px);color:var(--text-2);max-width:50ch;margin-bottom:clamp(28px,3.6vw,38px);line-height:1.5}
.hero__ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hero__note{font-size:15px;color:var(--text-3);display:flex;align-items:center;gap:9px;font-weight:550}
.hero__note .dot{width:7px;height:7px;border-radius:50%;background:var(--live)}

/* spec strip — reads like an instrument readout */
.spec{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin-top:clamp(26px,3.4vw,40px);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--glass);
  backdrop-filter:blur(10px);width:fit-content;max-width:100%}
@media (max-width:560px){.spec{grid-template-columns:repeat(2,1fr);width:100%}}
@media (max-width:560px){.spec li:nth-child(2n){border-right:0}.spec li:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- PLAYER ---------- */
.player{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3)}
.player::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-hair);opacity:.7;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.player__head{display:flex;align-items:center;gap:14px;padding:18px;border-bottom:1px solid var(--line)}
.player__play{flex:0 0 auto;width:50px;height:50px;border-radius:10px;background:var(--grad-fill);color:#fff;
  display:grid;place-items:center;transition:transform .25s var(--ease-out);
  box-shadow:0 6px 18px -6px rgba(255,77,13,.7)}
.player__play:hover{transform:scale(1.06)}
.player__play svg{width:17px;height:17px}
.player__meta{min-width:0;flex:1}
.player__title{font-weight:700;font-size:16.5px;letter-spacing:-.018em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__sub{font-size:14px;color:var(--text-3)}
.player__time{font-size:13px;color:var(--text-3);flex:0 0 auto;font-weight:600;letter-spacing:.02em}

.wave{position:relative;height:82px;padding:0 18px;display:flex;align-items:center;gap:3px;
  cursor:pointer;touch-action:none;background:var(--surface-2);border-bottom:1px solid var(--line);overflow:hidden}
.wave::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(10,18,32,.045) 0 1px,transparent 1px 3px)}
.wave__bar{flex:1 1 auto;min-width:2px;border-radius:1px;background:rgba(10,18,32,.16);transition:background .18s linear}
.wave__bar.on{background:var(--signal-br);box-shadow:0 0 8px rgba(255,77,13,.5)}
.wave__bar.on.alt{background:var(--signal-am);box-shadow:0 0 8px rgba(255,176,32,.5)}

.script{padding:10px 18px 20px;max-height:264px;overflow:hidden;position:relative}
.script::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(transparent,var(--surface));pointer-events:none}
.script__l{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:8px 0;
  opacity:.3;transition:opacity .45s var(--ease-out);font-size:16.5px;line-height:1.48}
.script__l.seen{opacity:.55}
.script__l.now{opacity:1}
.script__who{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding-top:5px;color:var(--text-3)}
.script__l[data-s="ai"] .script__who{color:var(--signal)}
.script__x{color:var(--text-2);position:relative}
.script__l.now .script__x{color:var(--text);font-weight:500}
.script__l.now .script__x::before{content:"";position:absolute;left:-14px;top:3px;bottom:3px;width:2px;
  border-radius:2px;background:var(--grad-signal);box-shadow:0 0 8px rgba(255,77,13,.6)}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:900px){.stats{grid-template-columns:1fr}}
.stat{background:var(--bg);padding:clamp(32px,4vw,54px) clamp(22px,2.6vw,38px);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--grad-hair);opacity:0;transition:opacity .5s}
.stat:hover::before{opacity:1}
.stat__n{font-family:var(--font-display);font-weight:850;letter-spacing:-.05em;line-height:.98;
  font-size:clamp(42px,5.6vw,76px);font-variant-numeric:tabular-nums;
  background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px}
.stat__l{font-size:clamp(17px,1.35vw,20px);font-weight:700;letter-spacing:-.018em;margin-bottom:6px}
.stat__note{font-size:16px;color:var(--text-3);line-height:1.5}
.knife{font-family:var(--font-display);font-weight:750;letter-spacing:-.032em;
  font-size:clamp(24px,3.2vw,44px);line-height:1.12;max-width:21ch}
.knife b{font-weight:750;background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- PROOF ---------- */
.proof__grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.proof__grid>*{min-width:0}
@media (max-width:980px){.proof__grid{grid-template-columns:1fr}}
.tabs{display:flex;flex-direction:column;gap:10px}
@media (max-width:980px){.tabs{flex-direction:row;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}}
.tab{position:relative;text-align:left;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);min-width:224px;box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tab:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.tab[aria-selected="true"]{border-color:transparent;box-shadow:var(--sh-glow)}
.tab[aria-selected="true"]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-signal);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.tab[aria-selected="true"] .tab__t{color:var(--signal)}
.tab__t{font-weight:700;font-size:17px;letter-spacing:-.018em;margin-bottom:3px}
.tab__m{font-size:12.5px;color:var(--text-3);letter-spacing:.04em}

.outcome{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border-radius:8px;
  font-size:15px;font-weight:650;border:1px solid rgba(0,160,107,.26);background:var(--live-bg);color:#00714C}
.outcome i{width:7px;height:7px;border-radius:50%;background:var(--live);font-style:normal;flex:0 0 auto;
  box-shadow:0 0 8px rgba(0,160,107,.7)}
.outcome[data-k="urgent"]{background:#FFF0E8;color:#A32700;border-color:rgba(220,52,0,.24)}
.outcome[data-k="urgent"] i{background:var(--signal-br);box-shadow:0 0 8px rgba(255,77,13,.7)}
.outcome[data-k="declined"]{background:var(--surface-2);color:var(--text-2);border-color:var(--line)}
.outcome[data-k="declined"] i{background:var(--text-3);box-shadow:none}

/* ---------- TRADES ---------- */
.trades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:900px){.trades{grid-template-columns:1fr}}
.trade{display:grid;min-width:0;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:20px;align-items:start;
  padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  transition:box-shadow .4s var(--ease-out),border-color .4s var(--ease-out)}
.trade:hover{border-color:transparent;box-shadow:var(--sh-glow)}
@media (max-width:600px){.trade{grid-template-columns:1fr;gap:16px}}
.trade__art{border-radius:var(--r);border:1px solid var(--line);padding:12px;color:#B4C0D2;
  background:linear-gradient(160deg,#FFF3EC,#F1F4F9);position:relative;overflow:hidden}
.trade__art::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(10,18,32,.10) 1px,transparent 1px);background-size:12px 12px;opacity:.5}
.trade__art svg{width:100%;height:auto;position:relative;z-index:1}
.trade__n{font-family:var(--font-display);font-weight:800;font-size:clamp(23px,2.2vw,29px);letter-spacing:-.032em;margin-bottom:7px}
.trade__line{font-size:16px;font-weight:700;color:var(--signal);line-height:1.4;margin-bottom:9px}
.trade__d{font-size:16px;color:var(--text-2);line-height:1.5;margin-bottom:13px}
.trade__peak{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);padding:6px 11px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}
.trades__cta,.stack__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.6vw,44px)}
.stack__ctas{margin-top:0}

/* ---------- BEATS ---------- */
.beats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:900px){.beats{grid-template-columns:1fr}}
.beat{background:var(--bg);padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;gap:22px}
.beat__n{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--signal)}
.beat__t{font-family:var(--font-display);font-weight:800;letter-spacing:-.032em;font-size:clamp(25px,2.4vw,34px)}
.beat__b{color:var(--text-2);font-size:17px;max-width:42ch;line-height:1.52}
.viz{position:relative;height:192px;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);margin-top:auto}
.viz::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(10,18,32,.09) 1px,transparent 1px);background-size:14px 14px;opacity:.45}

.vz-ring{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.vz-ring__c{position:relative;width:78px;height:78px;border-radius:50%;border:1.5px solid var(--signal);
  display:grid;place-items:center;background:var(--surface);box-shadow:0 0 30px rgba(255,77,13,.28)}
.vz-ring__p{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--signal);animation:pulsering 2.2s var(--ease-out) infinite}
.vz-lat{position:absolute;right:14px;bottom:12px;font-family:var(--font-mono);font-size:13px;
  color:var(--live);font-weight:700;z-index:2}
.vz-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 22px;z-index:1}
.vz-wave i{display:block;flex:1;max-width:4px;border-radius:1px;background:var(--grad-fill);height:6px;
  box-shadow:0 0 8px rgba(255,77,13,.4)}

.vz-chat{position:absolute;inset:0;padding:16px;font-size:14px;line-height:1.45;width:54%;z-index:1}
.vz-chat p{color:var(--text-2);margin-bottom:8px;opacity:0}
.vz-chat p b{color:var(--signal);font-weight:700}
.vz-fields{position:absolute;right:14px;top:14px;bottom:14px;width:42%;display:flex;flex-direction:column;
  gap:6px;justify-content:center;z-index:1}
.vz-f{border:1px solid var(--line);border-radius:7px;padding:6px 10px;background:var(--surface);opacity:0;transform:translateX(10px)}
.vz-f span{display:block;font-family:var(--font-mono);color:var(--text-3);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600}
.vz-f b{font-weight:650;font-size:13px;color:var(--text)}

.vz-cal{position:absolute;left:16px;top:16px;bottom:16px;width:50%;display:grid;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:4px;z-index:1}
.vz-cal i{border-radius:3px;background:rgba(10,18,32,.07);display:block}
.vz-cal i.hit{background:var(--grad-fill);box-shadow:0 0 18px rgba(255,77,13,.6)}
.vz-phone{position:absolute;right:16px;top:20px;width:122px;height:152px;border-radius:14px;
  border:1px solid var(--line-2);background:var(--surface);padding:10px;overflow:hidden;
  transform:translateY(24px);opacity:0;box-shadow:var(--sh-3);z-index:1}
.vz-phone .bar{height:3px;width:32px;border-radius:2px;background:var(--line-2);margin:0 auto 10px}
.vz-sms{border-radius:9px 9px 9px 2px;background:#FFF0E8;border:1px solid rgba(220,52,0,.22);
  padding:8px 9px;font-size:11px;line-height:1.35;color:var(--text-2)}
.vz-sms b{color:var(--text);font-weight:700}

.vz-tl{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:14px;z-index:1}
.vz-tl__row{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px;opacity:0}
.vz-tl__t{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--signal)}
.vz-tl__b{height:7px;border-radius:4px;background:var(--grad-fill);width:0;transform-origin:left;
  box-shadow:0 0 12px rgba(255,77,13,.4)}
.vz-tl__lab{font-size:12.5px;color:var(--text-3);margin-top:4px;font-weight:550}

/* ---------- SPEED ---------- */
.speedhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center;margin-top:8px}
@media (max-width:820px){.speedhead{grid-template-columns:1fr;gap:16px}}
.speed__n{font-family:var(--font-display);font-weight:850;letter-spacing:-.05em;line-height:.88;
  font-size:clamp(62px,8.6vw,124px);font-variant-numeric:tabular-nums;
  background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.rail{position:relative;margin-top:clamp(44px,5vw,70px)}
.rail__line{position:absolute;left:0;right:0;top:12px;height:1px;background:var(--line-2)}
.rail__fill{position:absolute;left:0;top:12px;height:1px;background:var(--grad-signal);width:0;
  box-shadow:0 0 10px rgba(255,77,13,.8)}
.rail__pts{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:880px){
  .rail__line,.rail__fill{left:12px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .rail__fill{height:0;width:1px}
  .rail__pts{grid-template-columns:1fr;gap:26px;padding-left:42px}}
.pt{position:relative}
.pt__d{width:25px;height:25px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);
  display:grid;place-items:center;margin-bottom:18px;transform:rotate(45deg);transition:border-color .4s}
@media (max-width:760px){.pt__d{position:absolute;left:-42px;top:0;margin:0}}
.pt__d i{width:7px;height:7px;border-radius:1px;background:var(--line-2);transition:background .4s,box-shadow .4s}
.pt.on .pt__d{border-color:var(--signal)}
.pt.on .pt__d i{background:var(--signal-br);box-shadow:0 0 12px rgba(255,77,13,.9)}
.pt__t{font-family:var(--font-display);font-weight:800;font-size:clamp(25px,2.5vw,34px);letter-spacing:-.038em;
  color:var(--text-3);transition:color .4s;font-variant-numeric:tabular-nums}
.pt.on .pt__t{color:var(--text)}
.pt__l{font-weight:700;font-size:17px;margin-top:7px;letter-spacing:-.018em}
.pt__n{font-size:15px;color:var(--text-3);margin-top:2px}

/* ============================================================
   COMMAND CENTER
   ============================================================ */
.dashwrap{perspective:1800px;min-width:0;overflow-x:clip;padding-block:2px}
.browser{position:relative;min-width:0;max-width:100%;border-radius:var(--r-xl);overflow:hidden;
  background:#E7EBF2;border:1px solid var(--line-2);box-shadow:var(--sh-3);
  transform-style:preserve-3d;will-change:transform}
.browser__bar{display:flex;align-items:center;gap:14px;padding:12px 16px}
.dots{display:flex;gap:7px;flex:0 0 auto}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(10,18,32,.15)}
.url{flex:1;background:#fff;border-radius:7px;padding:8px 16px;font-size:12.5px;color:var(--text-3);
  font-weight:500;letter-spacing:.02em;border:1px solid var(--hair);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--grad-fill);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.04em}

.app{display:grid;grid-template-columns:212px minmax(0,1fr);background:#FAFBFD;min-height:420px;min-width:0}
.rail-nav{background:var(--bg-2);border-right:1px solid var(--line);padding:20px 14px;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.rail-nav::after{content:"";position:absolute;left:0;right:0;top:0;height:180px;
  background:radial-gradient(80% 60% at 20% 0%,rgba(255,77,13,.28),transparent 70%);pointer-events:none}
.rail-nav__logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:15px;letter-spacing:-.02em;padding:0 8px 18px;position:relative;z-index:1}
.rail-nav__logo i{width:22px;height:22px;border-radius:6px;background:var(--grad-fill);flex:0 0 auto;
  box-shadow:0 0 16px rgba(255,77,13,.6)}
.rail-nav span{display:block;padding:10px 13px;border-radius:7px;color:rgba(255,255,255,.55);
  font-size:15px;font-weight:500;position:relative;z-index:1}
.rail-nav span.on{background:rgba(255,255,255,.09);color:#fff;font-weight:650;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rail-nav__foot{margin-top:auto;padding:14px 8px 0;border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.45);font-size:13px;font-weight:550;position:relative;z-index:1}

.pane{padding:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:14px;min-width:0}
.pane__h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pane__t{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.032em}
.pane__s{font-size:13.5px;color:var(--text-3);font-weight:550;margin-top:2px}
.chip{flex:0 0 auto;padding:7px 13px;border-radius:6px;background:var(--live-bg);color:#00714C;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(0,160,107,.22)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}
@media (max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;position:relative;overflow:hidden;min-width:0}
.kpi::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--grad-hair);opacity:.55}
.kpi__l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:9px;line-height:1.35}
.kpi__v{font-family:var(--font-display);font-weight:800;letter-spacing:-.042em;
  font-size:clamp(25px,2.8vw,36px);font-variant-numeric:tabular-nums;line-height:1}
.kpi__d{font-family:var(--font-mono);font-size:12.5px;margin-top:7px;font-weight:600;color:#00A06B;
  display:inline-flex;align-items:center;gap:4px}
.kpi__n{font-size:12.5px;margin-top:7px;color:var(--text-3);font-weight:550;line-height:1.35}

.panels{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;min-width:0}
@media (max-width:1080px){.panels{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card__t{font-weight:700;font-size:15.5px;letter-spacing:-.018em}
.lgnd{display:flex;gap:13px;font-size:12.5px;color:var(--text-3);font-weight:600}
.lgnd span{display:inline-flex;align-items:center;gap:6px}
.lgnd i{width:9px;height:9px;border-radius:2px;display:block}
.lgnd i.mute{background:#D3DAE5}
.lgnd i.sig{background:var(--signal-br)}

.bars{display:flex;align-items:flex-end;gap:clamp(3px,.6vw,8px);height:172px;min-width:0}
.bars__col{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars__tot{width:100%;background:#D3DAE5;border-radius:3px 3px 0 0;height:0}
.bars__bk{position:absolute;left:0;right:0;bottom:0;border-radius:3px 3px 0 0;background:var(--grad-fill);height:0;
  box-shadow:0 0 14px rgba(255,77,13,.35)}
.bars__x{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);font-weight:600;
  letter-spacing:.08em;margin-top:9px}

.donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut svg{width:142px;height:142px;flex:0 0 auto;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:20}
.donut__k{display:flex;flex-direction:column;gap:8px;font-size:14px;min-width:0;flex:1}
.donut__k span{display:flex;align-items:center;gap:8px;color:var(--text-2);font-weight:550}
.donut__k i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.donut__k b{margin-left:auto;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;padding:0 14px 11px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--hair);color:var(--text-2);white-space:nowrap}
.tbl td.nm{color:var(--text);font-weight:600}
.tbl td.n{font-variant-numeric:tabular-nums}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.new td{background:#FFF4EE}
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:5px;font-size:10.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pill[data-s="Booked"]{color:#00714C;background:var(--live-bg)}
.pill[data-s="Transferred"]{color:#A32700;background:#FFEDE4}
.pill[data-s="Qualified"]{color:#8A5206;background:#FFF6E3}
.pill[data-s="Declined"]{color:var(--text-3);background:var(--surface-2)}
.tblscroll{overflow-x:auto;min-width:0;max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:900px){.tbl th:nth-child(4),.tbl td:nth-child(4){display:none}}
@media (max-width:700px){.tbl th:nth-child(5),.tbl td:nth-child(5){display:none}}
@media (max-width:560px){.tbl th:nth-child(2),.tbl td:nth-child(2){display:none}}

/* ---------- STACK ---------- */
.stack__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(32px,5vw,68px);align-items:center}
@media (max-width:1000px){.stack__grid{grid-template-columns:1fr;gap:42px}}
.handoff{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-3);padding:20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.handoff::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad-hair);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ho__h{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal)}
.ho__dot{width:7px;height:7px;border-radius:50%;background:var(--signal-br);
  box-shadow:0 0 10px rgba(255,77,13,.9);animation:livedot 2s infinite}
.ho__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ho__f{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--surface-2);min-width:0}
.ho__f span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;margin-bottom:2px}
.ho__f b{font-size:14px;font-weight:650;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ho__slot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;
  border-radius:10px;background:var(--live-bg);border:1px solid rgba(0,160,107,.24)}
.ho__slot span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#00714C}
.ho__slot b{font-size:16px;font-weight:750;color:#005C3E;font-variant-numeric:tabular-nums}
.ho__steps{display:flex;flex-direction:column;gap:8px}
.ho__step{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text-2);font-weight:550}
.ho__step i{width:16px;height:16px;border-radius:5px;background:var(--live-bg);border:1px solid var(--live);
  flex:0 0 auto;position:relative}
.ho__step i::after{content:"";position:absolute;left:3.5px;top:5px;width:6px;height:3px;
  border-left:1.5px solid var(--live);border-bottom:1.5px solid var(--live);transform:rotate(-45deg)}
.ho__to{display:flex;align-items:center;gap:9px;padding-top:13px;border-top:1px solid var(--line);
  font-size:15px;color:var(--text-2);font-weight:550}
.ho__to b{color:var(--text);font-weight:700}
.ho__to svg{width:19px;height:19px;flex:0 0 auto}

/* ---------- MARQUEE ---------- */
.marq{overflow:hidden;position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq__t{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq__g{display:flex}
@keyframes marq{to{transform:translateX(-50%)}}
.marq:hover .marq__t{animation-play-state:paused}
/* logo files are filled with --text; .62 opacity lands on --text-3 */
.lg{display:flex;align-items:center;padding:0 clamp(20px,3vw,44px);height:88px;font-size:clamp(18px,1.9vw,25px)}
.lg img{max-width:none;flex:0 0 auto;opacity:.62;transition:opacity .3s var(--ease-out)}
.lg:hover img{opacity:1}

/* ---------- PRICING ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:18px;box-shadow:var(--sh-1)}
.plan--f{background:#070C16;border-color:transparent;box-shadow:var(--sh-3);overflow:hidden}
.plan--f::after{content:"";position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;
  background:radial-gradient(70% 80% at 50% 0%,rgba(255,77,13,.28),transparent 70%)}
.plan--f > *{position:relative;z-index:1}
.plan--f .plan__n{color:#fff}
.plan--f .plan__blurb,.plan--f li span{color:rgba(255,255,255,.72)}
.plan__badge{position:absolute;top:-11px;left:clamp(24px,2.4vw,34px);z-index:2;
  padding:5px 12px;border-radius:5px;background:var(--grad-signal);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.plan__n{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.032em}
.plan__p{display:flex;align-items:baseline;gap:5px}
.plan__p b{font-family:var(--font-display);font-weight:850;font-size:clamp(34px,3.6vw,46px);
  letter-spacing:-.048em;line-height:1;
  background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan--f .plan__p b{background:linear-gradient(115deg,#FF7A3D,#FFC061);-webkit-background-clip:text;background-clip:text}
.plan__blurb{font-size:16px;color:var(--text-2);line-height:1.5}
.plan ul{display:flex;flex-direction:column;gap:11px;font-size:16px;color:var(--text-2);flex:1}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;line-height:1.45}
.plan li svg{width:17px;height:17px;margin-top:4px;flex:0 0 auto}
.plan .btn{width:100%}
.plan--f .btn{background:var(--grad-signal);color:#fff;border-color:transparent;font-weight:700}

.cmp{margin-top:clamp(38px,4.6vw,60px);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface)}
.cmp__h{padding:15px 22px;border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:600;background:var(--surface-2)}
.cmp__r{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1.5fr);gap:18px;padding:18px 22px;
  border-bottom:1px solid var(--line);align-items:center;font-size:16px}
.cmp__r:last-child{border-bottom:0}
.cmp__r b{font-weight:700}
.cmp__r span{color:var(--text-2);font-size:15.5px}
.cmp__r .amt{font-family:var(--font-display);font-weight:800;letter-spacing:-.032em;font-size:20px;font-variant-numeric:tabular-nums}
.cmp__r.hl{background:linear-gradient(90deg,rgba(255,77,13,.07),transparent)}
.cmp__r.hl .amt{background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:800px){.cmp__r{grid-template-columns:1fr;gap:6px}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:clamp(22px,2.2vw,30px) 0;text-align:left;
  font-family:var(--font-display);font-weight:750;letter-spacing:-.03em;
  font-size:clamp(19px,2vw,27px);line-height:1.2;color:var(--text);transition:color .25s}
.faq__q:hover{color:var(--signal)}
.faq__ic{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);
  display:grid;place-items:center;margin-top:2px;color:var(--text);
  transition:background .3s,border-color .3s,transform .4s var(--ease-out),color .3s}
.faq__i.open .faq__ic{background:var(--grad-signal);border-color:transparent;transform:rotate(135deg);color:#fff}
.faq__ic svg{width:14px;height:14px}
.faq__a{overflow:hidden;height:0}
.faq__a p{padding-bottom:clamp(22px,2.2vw,30px);max-width:66ch;color:var(--text-2);font-size:17px;line-height:1.62}

/* ---------- FINAL ---------- */
.final{text-align:center;position:relative;overflow:hidden}
.final__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px}
.final h2{max-width:14ch}

/* ---------- FOOTER ---------- */
.foot{background:#070C16;color:rgba(255,255,255,.55);padding-block:34px;font-size:15px}
.foot__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot a:hover{color:#fff}
.foot__l{display:flex;gap:22px}
.foot__l a{display:inline-block;padding-block:10px}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:500;display:none;place-items:center;padding:20px}
.modal.on{display:grid}
.modal__bd{position:absolute;inset:0;background:rgba(7,12,22,.6);backdrop-filter:blur(8px);opacity:0}
.modal__c{position:relative;width:100%;max-width:540px;max-height:90svh;overflow-y:auto;
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);
  padding:clamp(26px,3.2vw,38px);opacity:0;transform:translateY(20px) scale(.98);box-shadow:var(--sh-3)}
.modal__x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:9px;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--text-3);transition:color .2s,border-color .2s}
.modal__x:hover{color:var(--text);border-color:var(--text)}
.modal h3{font-size:clamp(25px,2.8vw,32px);margin-bottom:10px}
.modal__sub{color:var(--text-2);font-size:16px;margin-bottom:24px}
.f{display:grid;gap:15px}
.f__row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:540px){.f__row{grid-template-columns:1fr}}
.f label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:7px}
.f input,.f select{width:100%;padding:14px 15px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line-2);font-size:17px;transition:border-color .25s,box-shadow .25s}
.f input:focus,.f select:focus{border-color:var(--signal);box-shadow:0 0 0 3px rgba(220,52,0,.13);outline:none}
.f input::placeholder{color:rgba(10,18,32,.3)}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236D7C93' stroke-width='1.8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.f .btn{margin-top:6px}
.f__err{color:#C42B00;font-size:14.5px;font-weight:600;display:none}
.f__err.on{display:block}
.cal{margin-top:22px;border-radius:var(--r);border:1px dashed var(--line-2);min-height:230px;
  display:grid;place-items:center;text-align:center;padding:24px;color:var(--text-3);font-size:15px}
.cal iframe{width:100%;height:640px;border:0;border-radius:var(--r)}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.12s !important;scroll-behavior:auto !important}
  .rv > span,.rv-i{transform:none !important}
  .fade{opacity:1 !important;transform:none !important}
  .hero__paper,.dotmesh{display:none}
  .browser{transform:none !important}
}

/* keep the skip link out of the layout entirely until focused */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;
  padding:12px 18px;background:#fff;color:#070C16;border-radius:8px;z-index:9999;box-shadow:var(--sh-3)}

/* --- responsive overrides that must win on source order --- */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail-nav{display:none}
}

/* ============================================================
   KEEP YOUR NUMBER — conditional forwarding
   ============================================================ */
.port__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,440px);
  gap:clamp(32px,5vw,68px);align-items:center;position:relative;z-index:2}
@media (max-width:1000px){.port__grid{grid-template-columns:1fr;gap:40px}}
.port__note{font-size:16px;color:var(--text);font-weight:650;letter-spacing:-.012em;
  padding-left:15px;border-left:2px solid var(--signal-br)}

.routes{position:relative;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden}
.routes::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-hair);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.routes__head{display:flex;align-items:center;gap:13px;padding:18px 20px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.routes__dot{width:9px;height:9px;border-radius:50%;background:var(--live);flex:0 0 auto;
  box-shadow:0 0 10px rgba(0,160,107,.7);animation:livedot 2.4s infinite}
.routes__lab{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:2px}
.routes__num{display:block;font-family:var(--font-display);font-weight:800;
  font-size:22px;letter-spacing:-.03em}

.routes__list{position:relative;padding:6px 0}
/* the spine the branches hang off */
.routes__list::before{content:"";position:absolute;left:38px;top:20px;bottom:32px;width:1px;
  background:linear-gradient(var(--line-2),var(--line-2) 60%,transparent)}
.route{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr);
  gap:14px;padding:16px 20px 16px 0;align-items:start}
.route::before{content:"";position:absolute;left:38px;top:26px;width:24px;height:1px;background:var(--line-2)}
.route__pin{position:relative;z-index:1;margin-left:20px;width:37px;height:37px;border-radius:9px;
  display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line-2);background:var(--surface);
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--text-3)}
.route[data-who="ai"] .route__pin{background:var(--grad-fill);border-color:transparent;color:#fff;
  box-shadow:0 5px 16px -5px rgba(255,77,13,.75)}
.route__pin svg{width:16px;height:16px}
.route__when{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;margin-bottom:5px}
.route__t{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.028em;margin-bottom:4px}
.route[data-who="ai"] .route__t{color:var(--signal)}
.route__d{font-size:15px;color:var(--text-2);line-height:1.46}
.route__who{display:inline-block;margin-top:9px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-3)}
.route[data-who="ai"] .route__who{background:#FFF0E8;border-color:rgba(220,52,0,.22);color:#A32700}
@media (max-width:460px){
  .route{grid-template-columns:60px minmax(0,1fr);gap:10px;padding-right:16px}
  .route__pin{margin-left:14px;width:33px;height:33px}
  .routes__list::before{left:30px}
  .route::before{left:30px;width:18px}
}

/* --- richer call-record rows --- */
.tbl .rec__n{color:var(--text);font-weight:650;display:block}
.tbl .rec__p{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);display:block;margin-top:2px}
.tbl .rec__note{display:block;margin-top:5px;font-size:13px;color:var(--text-3);line-height:1.42;
  max-width:44ch;white-space:normal}
.tbl td.rec{white-space:normal;min-width:270px}
.audit{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 16px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.audit span{display:inline-flex;align-items:center;gap:8px}
.audit b{color:var(--text-2);font-weight:600}

/* ============================================================
   APPLE / TESLA REFINEMENT
   ============================================================ */

/* centred, generous section intros */
.intro{text-align:center;margin-inline:auto;max-width:min(760px,100%)}
.intro .lede{margin-inline:auto}
.intro .kicker{margin-inline:auto}
@media (max-width:700px){.intro{text-align:left}.intro .lede{margin-inline:0}}

/* big numerals go solid — three huge black figures, no gradient fill */
.stat__n,.speed__n,.plan__p b,.kpi__v,.tile__v{
  background:none;-webkit-text-fill-color:currentColor;color:var(--text);
  font-weight:700;letter-spacing:-.03em;
}
.plan--f .plan__p b{color:#fff}
.knife b{background:none;-webkit-text-fill-color:currentColor;color:var(--signal)}
.cmp__r.hl .amt{background:none;-webkit-text-fill-color:currentColor;color:var(--signal)}

/* pills, Apple-style */
.btn{border-radius:var(--pill);font-weight:600;font-size:17px;padding:13px 24px;
  border-color:var(--line-2);box-shadow:none}
.btn:hover{background:var(--bg-2);border-color:var(--line-2);box-shadow:none}
.btn--solid{background:var(--signal-br);color:#fff;border-color:transparent;box-shadow:none}
.btn--solid:hover{background:#D2400A;filter:none;box-shadow:none}

/* strip the technical texture: no mesh, no scanlines, no dot grids */
.dotmesh,.wave::after,.viz::after,.trade__art::after,.hero__paper{display:none}
.orb{filter:blur(110px);opacity:.5}
.orb--1{background:radial-gradient(circle at 40% 40%,rgba(242,81,12,.22),transparent 68%)}
.orb--2{background:radial-gradient(circle at 60% 40%,rgba(0,0,0,.05),transparent 68%)}
.bloom{opacity:.5;filter:blur(120px);
  background:radial-gradient(circle,rgba(242,81,12,.16),transparent 70%)}

/* flat hairlines instead of gradient borders */
.hair::before,.player::after,.routes::after,.handoff::after,.tab[aria-selected="true"]::before{
  background:var(--line-2)}
.kpi::after,.stat::before{display:none}
.plan--f::after{background:none}

/* surfaces: flat fills, minimal chrome */
.player,.routes,.handoff,.tab,.plan,.cmp,.card,.kpi,.modal__c,.spec,.hero__eyebrow{
  box-shadow:none}
.player,.routes,.handoff{box-shadow:var(--sh-3)}
.tab[aria-selected="true"]{box-shadow:none;border-color:var(--text);background:var(--bg-2)}
.tab[aria-selected="true"] .tab__t{color:var(--text)}
.browser{background:var(--bg-2);box-shadow:var(--sh-3);border-color:var(--line)}
.rail-nav{background:#1D1D1F}
.rail-nav::after{display:none}
.rail-nav__logo i{background:var(--signal-br);box-shadow:none}
.foot{background:#F5F5F7;color:var(--text-2)}
.foot a:hover{color:var(--text)}

/* indicators lose their glow */
.routes__dot,.pt.on .pt__d i,.ho__dot,.script__l.now .script__x::before,
.wave__bar.on,.vz-cal i.hit,.vz-tl__b,.vz-wave i,.player__play,.route[data-who="ai"] .route__pin{
  box-shadow:none}
.wave__bar.on{background:var(--signal-br)}
.wave__bar.on.alt{background:var(--text-3);box-shadow:none}
.rail__fill{box-shadow:none}
.scrollbar i{box-shadow:none;background:var(--signal-br)}
.hero__eyebrow i{box-shadow:none;border-radius:50%;transform:none}

/* nav */
.nav--stuck{background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(180%)}
.nav__links a:hover{border-bottom-color:transparent;color:var(--text)}
.nav__btn{border-radius:var(--pill);font-size:15px;padding:9px 18px}

/* form fields */
.f input,.f select{border-radius:12px}
.f input:focus,.f select:focus{box-shadow:0 0 0 3px rgba(242,81,12,.16)}
.f label{text-transform:none;font-size:13px;letter-spacing:-.005em;color:var(--text-2);font-weight:500}

/* small caps labels become quiet sentence-case */
.spec__k,.kpi__l,.routes__lab,.route__when,.ho__f span{
  text-transform:none;font-size:13px;letter-spacing:-.004em;color:var(--text-3);font-weight:500}
.route__who,.chip,.pill,.plan__badge,.trade__peak{text-transform:none;letter-spacing:-.004em}
.pill{font-size:13px;font-weight:600;border-radius:var(--pill);padding:4px 11px}
.plan__badge{border-radius:var(--pill);font-size:12px;font-weight:600;background:var(--signal-br)}
.tbl th{text-transform:none;font-size:13px;letter-spacing:-.004em;font-weight:500}
.script__who{text-transform:none;font-size:12px;letter-spacing:-.004em}
.cmp__h{text-transform:none;font-size:13px;letter-spacing:-.004em}
.ho__h{text-transform:none;font-size:13px;letter-spacing:-.004em}

/* hero eyebrow: Apple states it plainly, no chip, no caps */
.hero__eyebrow{
  border:0;background:none;backdrop-filter:none;padding:0;border-radius:0;
  font-family:var(--font-body);font-size:clamp(16px,1.3vw,19px);font-weight:600;
  letter-spacing:-.01em;text-transform:none;color:var(--signal);
  margin-bottom:clamp(14px,1.6vw,20px);
}
.hero__eyebrow i{display:none}

/* spec strip: tech-specs row, hairlines only */
.spec{background:none;backdrop-filter:none;border-color:var(--line);border-radius:14px}

/* the one place a subtle ring still earns its keep */
@keyframes pulsering{0%{transform:scale(1);opacity:.45}70%{opacity:0}100%{transform:scale(1.75);opacity:0}}

/* final sweep: remaining caps labels and orange glows */
.vz-f span,.ho__slot span,.beat__n,.vz-tl__t,.vz-lat{
  text-transform:none;letter-spacing:-.004em;font-family:var(--font-body)}
.vz-f span{font-size:12px}
.beat__n{font-size:15px;font-weight:600;color:var(--signal);letter-spacing:-.01em}
.vz-ring__c,.bars__bk,.vz-cal i.hit,.rail-nav a.on{box-shadow:none}
.bars__bk{background:var(--signal-br)}
.bars__tot{background:#D2D2D7}
.vz-wave i,.vz-tl__b{background:var(--signal-br)}
.vz-cal i.hit{background:var(--signal-br)}
.vz-cal i{background:rgba(0,0,0,.06)}
.donut circle{stroke-linecap:butt}

/* .intro on a .wrap must centre its contents, never narrow the container —
   every section keeps an identical content box */
.wrap.intro{max-width:var(--max)}
.wrap.intro > *{max-width:min(760px,100%);margin-inline:auto}
@media (max-width:700px){.wrap.intro > *{margin-inline:0}}

/* per-trade ROI block — the money each saved call is actually worth */
.trade__roi{
  margin:16px 0 14px;padding:14px 16px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--line);
}
.trade__roi b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,2.8vw,36px);letter-spacing:-.032em;line-height:1;color:var(--signal)}
.trade__roi span{display:block;margin-top:6px;font-size:14.5px;color:var(--text-2);font-weight:500}
.trade__roi em{display:block;margin-top:8px;font-style:normal;font-size:14.5px;
  color:var(--text);font-weight:600;letter-spacing:-.01em}

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);
}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc__in{padding:clamp(24px,3vw,40px)}
.calc__trades{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.calc__trade{
  padding:9px 16px;border-radius:var(--pill);border:1px solid var(--line-2);
  font-size:14.5px;font-weight:600;color:var(--text-2);background:var(--surface);
  transition:all .25s var(--ease-out);
}
.calc__trade:hover{border-color:var(--text)}
.calc__trade.on{background:var(--text);border-color:var(--text);color:#fff}

.calc__fields{display:flex;flex-direction:column;gap:20px}
.calc__f{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.calc__f label{font-size:15px;font-weight:550;color:var(--text-2)}
.calc__v{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.025em;color:var(--text)}
.calc__f input[type=range]{
  grid-column:1/-1;width:100%;height:26px;margin:0;background:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.calc__f input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;background:var(--bg-2);border:1px solid var(--line)}
.calc__f input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--signal-br);border:2px solid #fff;margin-top:-10px;
  box-shadow:0 1px 6px rgba(16,25,42,.28)}
.calc__f input[type=range]::-moz-range-track{
  height:4px;border-radius:2px;background:var(--bg-2);border:1px solid var(--line)}
.calc__f input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--signal-br);border:2px solid #fff;
  box-shadow:0 1px 6px rgba(16,25,42,.28)}
.calc__f input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

.calc__out{
  padding:clamp(24px,3vw,40px);background:var(--bg-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
}
@media (max-width:900px){.calc__out{border-left:0;border-top:1px solid var(--line)}}
.calc__outl{font-size:14px;color:var(--text-3);font-weight:600;display:block;margin-bottom:8px}
.calc__big{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.042em;line-height:1;
  font-size:clamp(38px,4.6vw,58px);color:var(--signal);margin-bottom:10px;
}
.calc__outs{font-size:14px;color:var(--text-3);margin-bottom:22px;line-height:1.45}
.calc__rows{display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.calc__row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.calc__row dt{font-size:15px;color:var(--text-2)}
.calc__row dd{margin:0;font-weight:700;font-size:15.5px;color:var(--text);white-space:nowrap}
.calc__be{font-size:16px;color:var(--text-2);line-height:1.5;margin-bottom:14px}
.calc__be b{color:var(--text);font-weight:700}
.calc__note{font-size:13.5px;color:var(--text-3);line-height:1.5;margin-bottom:20px}
.calc__out .btn{width:100%;margin-top:auto}

/* ============================================================
   CAPABILITY MATRIX
   ============================================================ */
.mx{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.mx__t{width:100%;border-collapse:collapse;font-size:15.5px;min-width:660px}
.mx__t th,.mx__t td{padding:15px 16px;text-align:center;border-bottom:1px solid var(--line)}
.mx__t thead th{
  font-size:14px;font-weight:650;color:var(--text-2);background:var(--bg-2);
  border-bottom:1px solid var(--line-2);vertical-align:bottom;
}
.mx__t thead th.us{color:var(--text);background:var(--surface);position:relative}
.mx__t thead th.us::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--signal-br)}
.mx__t tbody th{
  text-align:left;font-weight:550;color:var(--text-2);font-size:15.5px;
  min-width:220px;background:var(--surface);
}
@media (max-width:820px){
  .mx__t{font-size:14.5px}
  .mx__t th,.mx__t td{padding:13px 10px}
  .mx__t thead th{font-size:13px}
}
.mx__t td.us{background:rgba(242,81,12,.05)}
.mx__t tbody tr:last-child th,.mx__t tbody tr:last-child td{border-bottom:0}
.mx__t tbody tr:last-child{background:var(--bg-2)}
.mx__t td.cost{font-weight:700;color:var(--text);font-size:15px}
.mx__t td.cost.us{color:var(--signal)}
.mx__i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%}
.mx__i svg{width:15px;height:15px}
td.yes .mx__i{background:var(--live-bg);color:#00714C}
td.no .mx__i{background:var(--bg-2);color:var(--text-3)}
td.partial .mx__i{background:#FFF4E5;color:#8A5206}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mx__legend{display:flex;flex-wrap:wrap;gap:20px;padding:16px;border-top:1px solid var(--line);
  background:var(--bg-2);font-size:14px;color:var(--text-2)}
.mx__legend li{display:flex;align-items:center;gap:8px}
.mx__legend i{width:12px;height:12px;border-radius:50%;display:block}
.mx__legend i.yes{background:#00714C}
.mx__legend i.partial{background:#8A5206}
.mx__legend i.no{background:var(--text-3)}

/* ============================================================
   FIRST 30 DAYS
   ============================================================ */
.d30{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:1000px){.d30{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.d30{grid-template-columns:1fr}}
.d30__s{background:var(--surface);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px}
.d30__t{
  display:inline-block;align-self:flex-start;padding:5px 12px;border-radius:var(--pill);
  background:var(--text);color:#fff;font-size:13px;font-weight:650;letter-spacing:-.005em;
}
.d30__h{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.8vw,22px);
  letter-spacing:-.024em;line-height:1.2;margin-bottom:8px}
.d30__b{font-size:15.5px;color:var(--text-2);line-height:1.55}
.d30__note{margin-top:26px;font-size:16px;color:var(--text-2);padding-left:15px;
  border-left:2px solid var(--signal-br);font-weight:550}

/* Sliders need a real touch target. Applied at every size, not just on
   coarse pointers — a mouse-driven tablet gets no coarse-pointer match
   but is still dragged with a finger half the time. The visible track
   and thumb are unchanged; only the hit area grows. */
.calc__f input[type=range]{height:44px}
@media (hover:none),(pointer:coarse){
  .prompts__list li{font-size:15px;padding:9px 15px}
}

/* Horizontal scrollers need to look scrollable. Fade the trailing edge
   whenever there is more table to the right. */
.tblscroll{position:relative}
.tblscroll::after{
  content:"";position:sticky;right:0;top:0;float:right;
  width:44px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--surface));
}
.scrollhint{
  display:none;align-items:center;gap:7px;padding:10px 16px;
  font-size:13.5px;color:var(--text-3);border-top:1px solid var(--line);
  background:var(--bg-2);
}
.scrollhint.on{display:flex}
.scrollhint svg{width:15px;height:15px;flex:0 0 auto}

/* ============================================================
   PHOTOGRAPHY
   Documentary grade, held slightly back so the photos support the
   type instead of competing with it.
   ============================================================ */
.trade{
  display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;
  background:var(--surface);
}
.trade__art{
  position:relative;aspect-ratio:16/9;width:100%;margin:0;padding:0;border:0;
  border-radius:0;overflow:hidden;background:var(--bg-2);
}
.trade__art img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.03);
  transition:transform 1.2s var(--ease-out),filter .6s var(--ease-out);
}
.trade:hover .trade__art img{transform:scale(1.045);filter:saturate(.95) contrast(1.03)}
.trade__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(16,18,22,.58));
}
.trade__n{
  position:absolute;left:20px;bottom:15px;z-index:2;margin:0;color:#fff;
  font-size:clamp(21px,2vw,27px);letter-spacing:-.026em;
  text-shadow:0 1px 18px rgba(0,0,0,.45);
}
.trade__body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}

/* who it's for */
.who__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,5vw,70px);align-items:center;
}
@media (max-width:900px){.who__grid{grid-template-columns:1fr;gap:32px}}
.who__shot{
  margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/2;
  background:var(--bg-2);box-shadow:var(--sh-3);
}
.who__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) contrast(1.04);
}
.who__q{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.026em;
  font-size:clamp(23px,2.7vw,34px);line-height:1.2;margin:0 0 20px;
  padding-left:18px;border-left:3px solid var(--signal-br);
}
.who__a{font-size:17px;color:var(--text-2);line-height:1.6;max-width:50ch}

/* ============================================================
   PHOTOGRAPHY — bright, high-key, aspirational
   The direction is "picture the relief, not the grind": clean
   modern homes, open daylight, confident posture. Bright images
   need no scrim, so the label sits on the card, not the photo.
   ============================================================ */
.trade__art::after{display:none}
.trade__art img{
  filter:none;
  transition:transform 1.2s var(--ease-out);
}
.trade:hover .trade__art img{transform:scale(1.035)}
.trade__n{
  position:static;color:var(--text);text-shadow:none;
  margin:0 0 10px;font-size:clamp(21px,2vw,27px);letter-spacing:-.026em;
}
.who__shot img{filter:none}

/* ============================================================
   PALETTE IN USE
   Blue side carries the product, warm side carries the action.
   Colour is committed on a handful of surfaces rather than
   sprinkled as accents — sprinkling is what turned it to mud.
   ============================================================ */

/* action — orange, and only orange */
.btn--solid,.plan--f .btn{background:var(--grad-warm);color:#fff;border-color:transparent;
  box-shadow:var(--sh-glow)}
.btn--solid:hover,.plan--f .btn:hover{filter:brightness(1.05);box-shadow:0 8px 30px rgba(245,130,32,.4)}
.callpill__ring,.player__play{background:var(--grad-warm)}
.scrollbar i{background:var(--grad-brand)}
.hero__eyebrow{color:var(--deep)}
.kicker{color:var(--deep)}

/* product / data — blue side */
.wave__bar.on{background:var(--cyan)}
.wave__bar.on.alt{background:var(--deep)}
.script__l[data-s="ai"] .script__who{color:var(--deep)}
.script__l.now .script__x::before{background:var(--grad-cool)}
.tab[aria-selected="true"]{border-color:var(--deep);background:var(--bg-2)}
.tab[aria-selected="true"] .tab__t{color:var(--deep)}
.bars__bk{background:var(--grad-cool);box-shadow:none}
.bars__tot{background:#CFE1E8}
.lgnd i.sig{background:var(--cyan)}
.lgnd i.mute{background:#CFE1E8}
.rail__fill{background:var(--grad-cool)}
.pt.on .pt__d{border-color:var(--deep)}
.pt.on .pt__d i{background:var(--cyan)}
.vz-tl__b,.vz-cal i.hit{background:var(--grad-cool)}
.vz-wave i{background:var(--grad-cool)}
.vz-ring__c{border-color:var(--deep)}
.vz-ring__p{border-color:var(--cyan)}
.vz-lat{color:var(--deep)}
.vz-chat p b,.beat__n{color:var(--deep)}
.route[data-who="ai"] .route__pin{background:var(--grad-cool)}
.route[data-who="ai"] .route__t{color:var(--deep)}
.route[data-who="ai"] .route__who{background:var(--live-bg);border-color:rgba(28,124,153,.24);color:var(--deep)}
.routes__dot{background:var(--cyan)}
.ho__dot{background:var(--cyan)}
.ho__h{color:var(--deep)}
.trade__line{color:var(--deep)}
.mx__t thead th.us::after{background:var(--grad-warm)}
.mx__t td.us{background:rgba(41,196,220,.07)}
.mx__t td.cost.us{color:var(--orange-tx)}
td.yes .mx__i{background:var(--live-bg);color:var(--deep)}
td.partial .mx__i{background:#FEF3DC;color:#8A5D06}
.mx__legend i.yes{background:var(--deep)}
.mx__legend i.partial{background:var(--amber)}

/* success — cyan, held for things that actually succeeded */
.outcome{background:var(--live-bg);color:#0B5E70;border-color:rgba(28,124,153,.24)}
.outcome i{background:var(--cyan);box-shadow:none}
.pill[data-s="Booked"]{color:#0B5E70;background:var(--live-bg)}
.pill[data-s="Transferred"]{color:#8A5D06;background:#FEF3DC}
.pill[data-s="Qualified"]{color:#8A5D06;background:#FEF3DC}
.chip{background:var(--live-bg);color:#0B5E70;border-color:rgba(28,124,153,.22)}
.kpi__d{color:var(--deep)}
.nav__phone .dot,.hero__note .dot,.dash__live{color:var(--deep)}
.ho__slot{background:var(--live-bg);border-color:rgba(28,124,153,.24)}
.ho__slot span{color:#0B5E70}.ho__slot b{color:#0A4E5D}
.ho__step i{background:var(--live-bg);border-color:var(--deep)}
.ho__step i::after{border-color:var(--deep)}
.plan li svg{stroke:var(--deep)}
.d30__t{background:var(--grad-cool)}
.d30__note{border-left-color:var(--orange)}
.port__note{border-left-color:var(--orange)}
.who__q{border-left-color:var(--orange)}
.calc__big{color:var(--orange-tx)}
.calc__f input[type=range]::-webkit-slider-thumb{background:var(--orange)}
.calc__f input[type=range]::-moz-range-thumb{background:var(--orange)}
.calc__trade.on{background:var(--deep);border-color:var(--deep)}
.stat__n{color:var(--text)}
.trade__roi b{color:var(--orange-tx)}
.knife b{color:var(--orange-tx)}
.cmp__r.hl{background:linear-gradient(90deg,rgba(245,130,32,.09),transparent)}
.cmp__r.hl .amt{color:var(--orange-tx)}

/* one committed colour surface: the closing CTA */
#final{background:var(--grad-cool)}
#final .h2,#final .lede{color:#fff}
#final .lede{opacity:.86}
#final .h2 em{color:var(--amber)}
#final .btn{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
#final .btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
#final .bloom{background:radial-gradient(circle,rgba(245,168,27,.34),transparent 70%)}

/* dashboard chrome picks up the deep end of the blue family */

.rail-nav__logo i{background:var(--grad-cool)}


/* the three cost figures are the warm side's biggest moment */
.stat__n{color:var(--orange-dsp)}
.stats{background:var(--line)}
.stat{background:var(--bg-2)}
.speed__n{color:var(--deep)}
.plan__p b{color:var(--deep)}
.plan--f .plan__p b{color:var(--amber)}
.kpi__v,.tile__v{color:var(--text)}

/* Display-size accent can run brighter than body copy: #E06A00 clears
   the 3:1 large-text threshold, which #F58220 (2.6:1) does not. Small
   text keeps --orange-tx at 4.8:1. */
.h1 em,.h2 em,.knife b,.stat__n{color:var(--orange-dsp)}

/* nav has to survive both grounds */
.nav--stuck{background:rgba(255,255,255,.72)}

/* ============================================================
   GLOBAL FOOTER
   A gradient CTA card, then the link columns, then the legal bar.
   The closing CTA lives inside the card so the page ends on one
   ask rather than two competing ones.
   ============================================================ */
.foot{background:var(--bg);padding-block:0 0;border-top:0}
.foot > .wrap{padding-bottom:0}

.megacta{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:clamp(20px,2.4vw,32px);
  margin-block:clamp(40px,6vw,88px) clamp(44px,6vw,80px);
  padding:clamp(40px,7vw,88px) clamp(24px,5vw,64px);
  text-align:center;color:#fff;
}
#ctaMesh{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.megacta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(6,28,38,.42));
}
.megacta__in{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:44ch;margin-inline:auto}
.megacta h2{color:#fff;font-size:clamp(30px,4.4vw,56px);text-shadow:0 2px 26px rgba(120,32,0,.42)}
/* A soft scrim behind the copy only. The mesh is deliberately bright
   at the corners like the reference, but white on #FFA02B is 2.0:1 —
   under the 3:1 floor for large text. This lifts the text block to
   about 4.4:1 without dulling the edges. */
.megacta__in::before{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,40,0,.42),rgba(150,40,0,0) 72%);
}
.megacta__in{position:relative;isolation:isolate}
.megacta h2 em{color:#fff}
.megacta__p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.5vw,20px);max-width:36ch}
.megacta__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:8px}

/* columns */
.foot__cols{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) minmax(0,1.3fr);
  gap:clamp(28px,4vw,56px);padding-bottom:clamp(32px,4vw,52px);
}
@media (max-width:960px){.foot__cols{grid-template-columns:1fr 1fr;gap:34px}
  .foot__brand{grid-column:1/-1}}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr}}
.foot__brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot__blurb{font-size:15px;color:var(--text-2);line-height:1.55;max-width:38ch}
.foot__social{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.foot__social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--text-2);
  transition:color .2s,border-color .2s,background .2s;
}
.foot__social a:hover{color:#fff;background:var(--deep);border-color:var(--deep)}
.foot__social svg{width:17px;height:17px}

.foot__navs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media (max-width:400px){.foot__navs{grid-template-columns:1fr;gap:26px}}
.foot__h{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.018em;
  margin-bottom:14px;color:var(--text)}
.foot__navs ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot__navs a{font-size:15px;color:var(--text-2);transition:color .2s}
.foot__navs a:hover{color:var(--deep)}

.foot__news{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.news{display:flex;width:100%;max-width:340px;border:1px solid var(--line-2);border-radius:var(--pill);
  padding:5px 5px 5px 6px;background:var(--surface);gap:6px;transition:border-color .25s,box-shadow .25s}
.news:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.16)}
.news input{flex:1;min-width:0;border:0;background:none;padding:9px 12px;font-size:15px;outline:none}
.news input::placeholder{color:var(--text-3)}
.news button{
  flex:0 0 auto;border-radius:var(--pill);padding:10px 20px;font-size:14.5px;font-weight:650;
  background:var(--grad-warm);color:#fff;transition:filter .2s;
}
.news button:hover{filter:brightness(1.06)}
.news__done{font-size:15px;color:var(--deep);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.foot__bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:22px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--text-3);
}
.foot__legal{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.foot__legal a{color:var(--text-3);transition:color .2s}
.foot__legal a:hover{color:var(--text)}

#final,.megacta{--x:0}
.foot__social a:hover{background:var(--teal);border-color:var(--teal)}
.foot__navs a:hover{color:var(--teal)}
.news__done{color:var(--teal)}
.speed__n,.plan__p b{color:var(--teal)}
.plan--f .plan__p b{color:var(--amber)}
.kicker{color:var(--teal)}
.hero__eyebrow{color:var(--teal)}
.trade__line{color:var(--teal)}

/* ============================================================
   SLAB LAYOUT — the signature
   Sections stop being full-bleed bands butting into each other
   and become large-radius panels floating on a tinted page.
   This is what carries "playful" structurally, so the components
   inside it can stay disciplined.
   ============================================================ */
body{background:var(--page)}

main{display:block;padding-inline:clamp(0px,1.4vw,20px);padding-bottom:clamp(0px,1.4vw,20px)}
main > section{
  position:relative;
  border-radius:clamp(0px,3vw,40px);
  overflow:clip;
  margin-bottom:clamp(8px,1.1vw,16px);
  background:var(--bg);
}
main > section:last-child{margin-bottom:0}

/* White, with one neutral grey for separation. Colour never appears
   as a pale tint — it only appears vivid, in accents. */
#hero,#cost,#proof,#who,#speed,#port,#matrix,#days30,#stack{background:var(--bg)}
#trades,#does,#dash,#pricing,#faq{background:var(--bg-2)}

/* the hero keeps square top corners so it meets the viewport edge */
#hero{border-radius:0 0 clamp(0px,3vw,40px) clamp(0px,3vw,40px);margin-inline:0}
main{padding-top:0}

/* slabs need a shadow to read as raised off the tinted page */
main > section{box-shadow:var(--sh-slab)}

/* the footer sits on the page ground, not in a slab */
.foot{background:transparent}

/* ── rounder, softer components ─────────────────────────────── */
.player,.routes,.handoff,.browser,.who__shot,.calc,.mx,.plan,.trade,.tab,.card,.kpi,.modal__c{
  border-radius:clamp(14px,1.6vw,22px);
}
.trade,.plan,.calc,.mx,.d30{border-radius:clamp(16px,1.9vw,26px)}
.viz{border-radius:14px}

/* cards lift on hover rather than just changing border colour */
.trade,.plan{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.trade:hover,.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}

/* tinted surfaces instead of white-on-white */
.trade{background:var(--surface);box-shadow:var(--sh-2)}
#trades .trade{background:#fff}
.stat{background:transparent}
.stats{background:transparent;border:0;display:grid;gap:clamp(10px,1.2vw,16px);
  padding-inline:var(--pad);max-width:var(--max);margin-inline:auto}
.stat{border-radius:clamp(16px,1.9vw,26px);background:var(--bg-2);box-shadow:none;border:1px solid var(--line)}



/* chunkier, friendlier buttons */
.btn{padding:14px 26px;font-weight:650}
.btn--solid{box-shadow:var(--sh-glow)}
.btn--solid:hover{transform:translateY(-1px)}

/* sticker-style badges */
.plan__badge{padding:6px 14px;font-size:12px;box-shadow:0 4px 12px rgba(251,133,0,.35)}
.pill,.chip{border-radius:var(--pill);font-weight:650}

/* springier micro-interactions */
.player__play,.calc__trade,.foot__social a{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .25s,border-color .25s,color .25s;
}
.player__play:hover{transform:scale(1.09)}
.foot__social a:hover{transform:translateY(-2px)}

@media (max-width:640px){
  main{padding-inline:0;padding-bottom:0}
  main > section{border-radius:0;margin-bottom:0;box-shadow:none}
  #hero{border-radius:0}
  .stats{padding-inline:var(--pad)}
}

/* ── footer tap targets ─────────────────────────────────────
   Footer links rendered at 19-23px tall. The gap between rows
   is absorbed into each link's padding instead, so the hit area
   reaches 44px without the column visually loosening. */
.foot__navs ul{gap:0}
.foot__navs a{display:block;padding-block:12px;line-height:1.25}
.foot__legal a{display:inline-block;padding-block:11px}
.foot__social a{width:44px;height:44px}
.foot__bar{padding-block:14px}

/* ============================================================
   BRIGHT HERO
   Replaces the navy. A soft mesh of the palette's own hues on
   white — the colour moment happens in light, not in dark.
   ============================================================ */
#hero{background:var(--bg);position:relative;overflow:clip}
#heroMesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero__in{position:relative;z-index:2}
.hero__bg{z-index:1}

/* the dashboard reads as a light product UI, not a dark console */
.rail-nav::after{display:none}
.rail-nav__logo{color:var(--text)}
.rail-nav__foot{color:var(--text-3);border-top-color:var(--line)}
.rail-nav__logo i{background:var(--grad-warm)}

/* footer mesh brightens: the navy blob becomes cyan */
.megacta{color:#fff}

/* ============================================================
   VARIANT A — RESTRAINT
   Big type, lots of white. Modern through typography and space
   rather than decoration. Colour appears only where it carries
   information: actions, data, status.
   ============================================================ */

/* the page is white, full stop. No floating slabs, no grey ground —
   sections are separated by space and a hairline, nothing else. */
body{background:#fff}
main{padding:0}
main > section{
  background:#fff;border-radius:0;margin-bottom:0;box-shadow:none;
  border-bottom:1px solid var(--line);
}
main > section:last-child{border-bottom:0}
#hero{border-radius:0;border-bottom:1px solid var(--line)}
#trades,#does,#dash,#pricing,#faq{background:#fff}

/* type does the work — considerably larger, tighter, more air */
:root{--section:clamp(120px,15vw,232px)}
.h1{font-size:clamp(46px,7.6vw,104px);letter-spacing:-.042em;line-height:.98}
.h2{font-size:clamp(38px,5.8vw,78px);letter-spacing:-.036em;line-height:1.02}
.h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.026em}
.lede{font-size:clamp(20px,1.7vw,26px);line-height:1.45;color:var(--text-2);max-width:34ch}
.hero__sub{font-size:clamp(20px,1.7vw,26px);line-height:1.45;max-width:34ch}
body{font-size:18px;line-height:1.65}

/* headings get room to breathe */
.intro{max-width:min(900px,100%);margin-bottom:clamp(48px,6vw,90px)}
.kicker{font-size:15px;font-weight:600;letter-spacing:-.005em;margin-bottom:18px}

/* quieter chrome: hairlines instead of cards wherever a card was
   only there to hold a background */
.stat{background:#fff;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line);padding-inline:0}
.stats{gap:clamp(28px,4vw,64px);background:transparent}
.trade,.plan,.calc,.mx,.d30,.routes,.handoff{box-shadow:none;border:1px solid var(--line)}
.trade:hover,.plan:hover{transform:none;box-shadow:none;border-color:var(--text-3)}
.d30__s,.beat{background:#fff}
.viz{background:#fff;border-color:var(--line)}

/* one accent, used only where it means something */
.btn--solid{box-shadow:none}

/* Buttons move on hover only in the ordinary way — a small lift.
   The magnetic pull-toward-cursor effect was removed. */
.btn,.callpill{transition:transform .25s var(--ease-out),border-color .25s var(--ease-out),
  box-shadow .25s var(--ease-out),background .25s var(--ease-out)}
.btn:hover,.callpill:hover{transform:translateY(-2px)}
.btn:active,.callpill:active{transform:translateY(0)}
@media (max-width:1040px){#heroOrb{opacity:.34}}
.hero__in{position:relative;z-index:2}

/* ============================================================
   EYEBROWS
   Section labels set as true eyebrows: uppercase, tracked out,
   smaller than body. Small-caps was the other option but neither
   Switzer nor Plus Jakarta ships a real small-cap set, so the
   browser would synthesise them and the weight would go uneven.
   ============================================================ */
.kicker{
  text-transform:uppercase;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  margin-bottom:20px;
}
.hero__eyebrow{
  text-transform:uppercase;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
}

/* the small label slots that do the same job elsewhere */
.spec__k,.kpi__l,.card__l,.cmp__h,.ho__h,.routes__lab,.route__when,
.tbl th,.chip,.trade__peak,.plan__badge,.script__who{
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
}
.tbl th,.spec__k,.kpi__l,.routes__lab,.route__when{font-size:11px}
.script__who{font-size:10.5px}

/* Headline must hold two lines. At 104px "Your phone stops" needs
   ~790px and the hero column was 658px, so every line wrapped and the
   headline ran to four. Wider text column, slightly smaller cap. */
.hero__cols{grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr)}
.h1{font-size:clamp(44px,5.9vw,86px)}
@media (max-width:1040px){.hero__cols{grid-template-columns:1fr}}

/* ============================================================
   DASHBOARD PROPORTION
   The card was 1152 x 1502 — taller than it is wide, which no real
   screen is. Three changes bring it to laptop proportions without
   losing information.
   ============================================================ */

/* 1 · the second KPI row: four cards become one compact strip */
.kstats{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px clamp(16px,2.4vw,34px);
  padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.kstat{display:flex;align-items:baseline;gap:8px;min-width:0}
.kstat b{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:-.03em;color:var(--text)}
.kstat span{font-size:13px;color:var(--text-3);white-space:nowrap}
@media (max-width:760px){.kstat span{white-space:normal}}

/* 2 · call notes clamp to one line. They still read as real CRM
       entries; they were adding ~70px per row unclamped. */
.tbl .rec__note{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;max-width:38ch;margin-top:3px;
}
.tbl td{padding-block:10px}
.tbl .rec{min-width:250px}

/* 3 · the chart panel does not need to be as deep as the table */
.bars{height:132px}
.donut svg{width:118px;height:118px}

/* table and outcome donut share a row; the chart spans full width above */
.panels--btm{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:10px;align-items:start}
@media (max-width:1080px){.panels--btm{grid-template-columns:1fr}}
.panels--btm .donut{flex-direction:column;align-items:flex-start;gap:14px}
.panels--btm .donut__k{width:100%}

/* Final proportion pass on the dashboard. Four visible call rows, not
   five — the live-insert animation still runs, rows just fall off the
   bottom instead of growing the card. */
#dashRows tr:nth-child(n+5){display:none}
.tbl td{padding-block:8px}
.tbl .rec__n{font-size:14.5px}
.tbl .rec__note{font-size:12.5px}
.tbl th{padding-bottom:9px}
.audit{padding:10px 16px;gap:6px 16px}
.bars{height:118px}
.panels--btm .donut svg{width:104px;height:104px}
.panels--btm .donut__k{font-size:13px;gap:6px}
.pane{gap:12px}

/* the strip lives in the chart card footer now, so it loses its own
   border and reads as part of that panel */
.card > .kstats{border:0;border-top:1px solid var(--line);border-radius:0;
  margin:14px -16px -16px;padding:12px 16px;background:transparent}
.kpi{padding:12px 15px}
.kpi__l{margin-bottom:7px}
.bars{height:100px}

/* The mobile scroll hint has no business inside the dashboard mock —
   it is a product screenshot, not a table the reader operates. Hiding
   it also reclaims 54px of the card's height. */
.browser .scrollhint{display:none !important}
.browser .tblscroll::after{display:none}

/* drop the duration column inside the mock so the table fits its
   column without needing to scroll at all */
.browser .tbl th:nth-child(4),.browser .tbl td:nth-child(4){display:none}
.browser .tbl .rec{min-width:190px}
.browser .tbl .rec__note{max-width:30ch}
.browser .tbl th,.browser .tbl td{padding-inline:11px}

/* ============================================================
   DISPLAY TYPE — big and light
   Weight 800 at 86px reads shouty; 450 at the same size reads
   confident. This is the single biggest difference between our
   headlines and the reference. Colours and imagery unchanged.
   ============================================================ */
h1,h2,.h1,.h2{font-weight:450;letter-spacing:-.032em}
.h1{font-size:clamp(44px,6.2vw,92px);line-height:1.0}
.h2{font-size:clamp(36px,4.8vw,68px);line-height:1.04}
h3,.h3{font-weight:600;letter-spacing:-.024em}
.knife{font-weight:450;letter-spacing:-.03em}
.megacta h2{font-weight:450}

/* Figures stay a touch heavier than headlines — at 450 a large
   numeral reads thin and loses its punch. */
.stat__n,.speed__n,.calc__big,.plan__p b,.trade__roi b,.kpi__v,.tile__v{
  font-weight:500;letter-spacing:-.035em}

/* Sub-heads and card titles hold at 600 so hierarchy still reads. */
.beat__t,.d30__h,.trade__n,.route__t,.who__q,.faq__q,.plan__n,.pane__t,.card__t{
  font-weight:600}

/* the eyebrow picks up the reference's tighter, wider-tracked setting */
.kicker,.hero__eyebrow{font-size:11px;letter-spacing:.22em;font-weight:600}

/* ============================================================
   STRUCTURE PASS
   ============================================================ */

/* Section headers left-align. Centred reads institutional; against a
   margin it reads editorial, and it suits the lighter display type. */
/* 20ch here strangled the headline into four lines. The measure
   belongs on the lede, not on the block. */
.intro{text-align:left;margin-inline:0;max-width:min(860px,100%)}
.intro .h2{max-width:18ch}
.intro .lede{margin-inline:0;max-width:52ch}
.intro .kicker{margin-inline:0}
@media (max-width:700px){.intro{text-align:left}}

/* ---- trust strip ----
   One row. The terms column was wrapping inside a 1fr track and
   pushing the band to 274px, which is not a strip. */
.trust{border-bottom:1px solid var(--line);background:var(--bg)}
.trust__in{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(18px,2.4vw,40px);padding-block:20px}
.trust__col{display:flex;align-items:center;gap:12px;min-width:0}
.trust__l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;white-space:nowrap}
.trust__list{display:flex;flex-wrap:wrap;gap:6px}
.trust__list li{font-size:13px;font-weight:600;color:var(--text-2);
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--pill);white-space:nowrap}
.trust__terms{display:flex;gap:clamp(16px,2vw,32px);flex-wrap:nowrap}
.trust__term dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;margin-bottom:2px;white-space:nowrap}
.trust__term dd{margin:0;font-size:14px;font-weight:650;color:var(--text);white-space:nowrap}
@media (max-width:1240px){.trust__terms{display:none}}
@media (max-width:760px){
  .trust__in{gap:14px}
  .trust__col{flex-direction:column;align-items:flex-start;gap:7px}
}

/* ---- mid-page call band ---- */
.callband__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);
  align-items:center}
@media (max-width:860px){.callband__in{grid-template-columns:1fr;gap:26px}}
.callband .lede{max-width:44ch}
.callband__act{display:flex;justify-content:flex-end}
@media (max-width:860px){.callband__act{justify-content:flex-start}}

/* merged sub-blocks sit inside their host section with their own
   breathing room, but no second header */
.submerge{margin-top:clamp(56px,7vw,110px)}
.submerge > .wrap:first-child{padding-inline:0}
.submerge .bloom{display:none}

/* Trust strip: tuned to hold one row at 1440. It was wrapping at
   ~1340px of content inside a 1312px container. */
.trust__in{gap:clamp(14px,1.8vw,28px)}
.trust__l{font-size:10px;letter-spacing:.14em}
.trust__list{gap:5px}
.trust__list li{font-size:12.5px;padding:3px 9px}
.trust__term dd{font-size:13.5px}
.trust__terms{gap:clamp(14px,1.6vw,26px)}

/* The call band is punctuation between two big sections, not a
   full section — it does not need the 216px rhythm. */
.callband{padding-block:clamp(64px,7vw,104px)}

/* Measured: the row needed 1190px inside a 1152px content box. This
   recovers ~44px across the pills and gaps so it holds one line. */
.trust__in{gap:clamp(12px,1.4vw,20px)}
.trust__list{gap:4px}
.trust__list li{font-size:12px;padding:3px 8px}
.trust__col{gap:10px}

/* ---- hero, stripped ----
   One ask. The phone pill, the live-line note, the prompt chips and
   the spec strip are all gone: there is no demo line to call, and the
   spec strip duplicated the trust strip sitting right beneath it. */
.hero__ctas{gap:12px;margin-bottom:0}
.btn--ghost{background:transparent;border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--text);background:transparent}
.megacta__ctas .btn--solid,.callband__act .btn--solid{font-size:17px;padding:16px 30px}

/* "Every call answered." measures 786px at 89px, in a 734px column.
   Capped so both headline lines hold on one line each. */
.h1{font-size:clamp(42px,5.7vw,82px)}

/* ---- closer: replaces the old price comparison table ---- */
.closer{margin-top:clamp(34px,4.4vw,56px);padding:clamp(26px,3.4vw,44px);
  border:1px solid var(--line);border-radius:clamp(16px,1.9vw,26px);
  background:var(--bg-2);display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  max-width:64ch}
.closer__t{font-family:var(--font-display);font-weight:600;letter-spacing:-.028em;
  font-size:clamp(22px,2.4vw,30px);line-height:1.14;margin:0}
.closer__b{color:var(--text-2);font-size:17px;line-height:1.55;margin:0;max-width:52ch}
.closer .btn{margin-top:4px}
/* plans lost their price row, so the name needs the space back */
.plan__n{margin-bottom:2px}

/* ============================================================
   COMPARISON MATRIX — restyled for scannability
   The three states previously differed only by hue at matching
   lightness and identical size, so a column read as uniform grey
   at a glance. Now they differ by FILL and WEIGHT: yes is solid,
   partial is an outline, no is nearly absent. That survives a
   squint test and does not rely on colour alone.
   ============================================================ */
.mx{border-radius:clamp(16px,1.9vw,24px);overflow:hidden;border-color:var(--line-2)}
.mx__t{font-size:16px}
.mx__t th,.mx__t td{padding:17px 16px}
.mx__t tbody th{font-size:16px;font-weight:550;color:var(--text)}

/* our column is the answer — it should be obvious before reading */
.mx__t thead th.us{font-size:16px;font-weight:750;color:var(--text);
  background:var(--bg);position:relative}
.mx__t thead th.us::after{height:4px;background:var(--grad-warm)}
.mx__t td.us{background:rgba(255,106,0,.055);
  box-shadow:inset 1px 0 0 rgba(255,106,0,.22),inset -1px 0 0 rgba(255,106,0,.22)}
.mx__t tbody tr:last-child td.us{box-shadow:inset 1px 0 0 rgba(255,106,0,.22),
  inset -1px 0 0 rgba(255,106,0,.22),inset 0 -1px 0 rgba(255,106,0,.22)}

/* state chips */
.mx__i{width:30px;height:30px;border-radius:50%}
.mx__i svg{width:17px;height:17px}

/* YES — solid fill, white glyph, heaviest weight on the page */
td.yes .mx__i{background:var(--teal);color:#fff;box-shadow:none}
td.yes .mx__i svg{stroke-width:3.2}
/* in our column a yes is brand orange, so the column reads as a run */
td.yes.us .mx__i{background:var(--orange)}

/* PARTIAL — outline only. Present, but visibly lighter than a yes. */
td.partial .mx__i{background:transparent;color:#8A5D06;
  box-shadow:inset 0 0 0 2px rgba(138,93,6,.45)}
td.partial .mx__i svg{stroke-width:3}

/* NO — recessive. No chip at all, so the eye skips it. */
td.no .mx__i{background:transparent;color:#B6BCC6}
td.no .mx__i svg{stroke-width:2.6}

/* scanning aid */
.mx__t tbody tr{transition:background .18s var(--ease-out)}
.mx__t tbody tr:hover{background:rgba(16,21,28,.028)}
.mx__t tbody tr:hover td.us{background:rgba(255,106,0,.09)}

/* legend mirrors the new construction rather than three flat dots */
.mx__legend{gap:22px;padding:15px 18px;font-size:14.5px}
.mx__legend li{gap:9px}
.mx__legend i{width:20px;height:20px;border-radius:50%;position:relative}
.mx__legend i.yes{background:var(--teal)}
.mx__legend i.yes::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.mx__legend i.partial{background:transparent;box-shadow:inset 0 0 0 2px rgba(138,93,6,.5)}
.mx__legend i.partial::after{content:"";position:absolute;left:5px;top:9px;width:10px;height:2px;
  background:#8A5D06;border-radius:1px}
.mx__legend i.no{background:transparent;box-shadow:inset 0 0 0 2px #D5DAE1}

/* ---- the same pale-chip problem elsewhere on the page ---- */
.pill{font-size:13px;font-weight:700;padding:5px 12px}
.pill[data-s="Booked"]{background:var(--teal);color:#fff}
.pill[data-s="Transferred"]{background:#FFF0D2;color:#7A5205;box-shadow:inset 0 0 0 1px rgba(138,93,6,.28)}
.pill[data-s="Qualified"]{background:#FFF0D2;color:#7A5205;box-shadow:inset 0 0 0 1px rgba(138,93,6,.28)}
.pill[data-s="Declined"]{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.outcome{font-weight:650;box-shadow:inset 0 0 0 1px rgba(14,116,144,.28)}
.outcome i{width:9px;height:9px}
.plan li svg{stroke-width:3.2}
.ho__step i{background:var(--teal);border-color:var(--teal)}
.ho__step i::after{border-color:#fff}

/* The knife line now carries authored breaks, so the 21ch cap that was
   forcing a mid-clause wrap has to go. Wide enough that no authored
   line re-wraps at the largest step. */
.knife{max-width:min(100%,40ch)}

/* ============================================================
   COST SECTION — one grid
   Everything sat on a different left edge: eyebrow 64, knife 144,
   stats 208, heading 287 (it was centring, because .wrap.intro beat
   the left-align rule on specificity). Now one wrap, one edge.
   ============================================================ */
#cost .cost__intro{max-width:min(24ch,100%);margin-inline:0;text-align:left;
  margin-bottom:clamp(38px,5vw,62px)}
#cost .cost__intro .h2{max-width:none}
#cost .stats{max-width:none;margin-inline:0;padding-inline:0;background:transparent;
  border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
@media (max-width:860px){#cost .stats{grid-template-columns:1fr}}
#cost .stat{
  background:var(--bg-2);border:1px solid var(--line);border-radius:clamp(14px,1.6vw,20px);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;
}
#cost .stat::before{display:none}
#cost .stat__n{margin-bottom:14px;line-height:1}
/* reserve two lines so the labels share a baseline across the row */
#cost .stat__l{min-height:2.6em;margin-bottom:8px}
#cost .stat__note{margin-top:auto}
#cost .knife{margin-block:clamp(56px,7vw,96px) 0;max-width:min(100%,40ch)}
#cost .calc{margin-top:clamp(48px,6vw,80px)}

/* ============================================================
   WHAT IT DOES — hue per beat, no numbers
   The 01/02/03/04 markers implied a sequence the reader does not
   need to follow. Each beat now carries its own hue instead.
   ============================================================ */
.beat[data-k="answers"]  { --beat:#21A9C9; }
.beat[data-k="qualifies"]{ --beat:#0E7490; }
.beat[data-k="books"]    { --beat:#FF6A00; }
.beat[data-k="follows"]  { --beat:#E9A400; }

.beat__n{display:none}
.beat__mark{
  display:block;width:38px;height:5px;border-radius:99px;
  background:var(--beat,var(--teal));margin-bottom:18px;
}
.beat__t{color:var(--text)}

/* the panel picks up a wash of its own hue so the four read as a set
   of related things rather than four identical grey boxes */
.viz{position:relative;overflow:hidden}
.viz::before{
  content:"";position:absolute;inset:0;background:var(--beat,var(--teal));
  opacity:.055;pointer-events:none;
}
.beat .viz{border-color:color-mix(in srgb,var(--beat,var(--teal)) 22%,transparent)}

/* inner graphics follow the beat hue instead of one shared gradient */
.beat[data-k="answers"] .vz-wave i,
.beat[data-k="books"] .vz-cal i.hit,
.beat[data-k="follows"] .vz-tl__b{background:var(--beat)}
.beat[data-k="answers"] .vz-ring__c{border-color:var(--beat)}
.beat[data-k="answers"] .vz-ring__p{border-color:var(--beat)}
.beat[data-k="qualifies"] .vz-chat p b{color:var(--beat)}
.beat[data-k="follows"] .vz-tl__t{color:var(--beat)}
.beat[data-k="books"] .vz-sms{background:color-mix(in srgb,var(--beat) 10%,#fff);
  border-color:color-mix(in srgb,var(--beat) 30%,transparent)}

/* every trade card carries its own ask */
.trade__cta{width:100%;margin-top:16px}
.trade__peak{margin-bottom:0}

/* The booking step needs far more room than the five-field form —
   at the form's height Calendly's date grid was cut off. */
.modal__c--cal{max-width:840px;max-height:94svh;padding:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column}
.modal__c--cal h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:4px}
.modal__c--cal .modal__sub{margin-bottom:14px;font-size:15px}
.cal[hidden]{display:none !important}
.cal{border:0;padding:0;min-height:0;margin-top:0;flex:1;display:flex}
.cal iframe{width:100%;height:100%;min-height:min(76svh,780px);border-radius:var(--r);border:0}
@media (max-width:640px){
  .modal{padding:0}
  .modal__c--cal{max-width:100%;max-height:100svh;height:100svh;border-radius:0}
  .cal iframe{min-height:0}
}

/* ============================================================
   MORE COLOUR AREA
   The accents were already 90-100% saturated; what made the page
   read soft was that colour touched almost nothing and the greys
   sat at mid-tone. This gives the existing hues more surface.
   ============================================================ */

/* trade cards wear their hue as a top rule */
.trade{position:relative}
.trade::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:var(--tradehue,var(--orange));
}
.trade[data-k="hvac"]     { --tradehue:#FF6A00; }
.trade[data-k="plumbing"] { --tradehue:#00B4D8; }
.trade[data-k="roofing"]  { --tradehue:#E85D00; }
.trade[data-k="bath"]     { --tradehue:#0693A8; }
.trade__line{color:var(--tradehue);font-weight:650}
.trade__roi b{color:var(--tradehue)}

/* the beat marker was a 38px sliver — give it presence */
.beat__mark{width:56px;height:6px}

/* our column in the matrix reads as a solid run, not a hint */
.mx__t td.us{background:rgba(255,106,0,.10)}
.mx__t tbody tr:hover td.us{background:rgba(255,106,0,.15)}

/* buttons run hotter */
.btn--solid{background:linear-gradient(135deg,#FF7A1A,#FF4D00)}
.btn--solid:hover{background:linear-gradient(135deg,#FF8A2E,#FF5A0F)}

/* eyebrows take the vivid cyan rather than the muted teal */
.kicker{color:#0693A8}
#trades .kicker,#pricing .kicker{color:var(--orange-tx)}

/* status and success states stop being pastel */
.pill[data-s="Booked"]{background:#0693A8;color:#fff}
.outcome{background:#E4F7FA;color:#064E5C;box-shadow:inset 0 0 0 1px rgba(6,147,168,.35)}
.outcome i{background:#0693A8}
.chip{background:#0693A8;color:#fff;border-color:transparent}

/* ---- contrast corrections ----
   The vivid hues above are FILL values. Used as text or behind white
   they measured 2.9-3.7:1. Each now has a darkened partner that is
   safe both as type on white and as a ground under white. */
.kicker{color:#04707F}                 /* 5.3:1, was 3.65 */
#trades .kicker,#pricing .kicker{color:var(--orange-tx)}

.trade[data-k="hvac"]     { --tradetext:#B34700; }  /* 4.8:1 */
.trade[data-k="plumbing"] { --tradetext:#04707F; }  /* 5.3:1 */
.trade[data-k="roofing"]  { --tradetext:#9E3D00; }  /* 6.3:1 */
.trade[data-k="bath"]     { --tradetext:#04707F; }
.trade__line{color:var(--tradetext)}
.trade__roi b{color:var(--tradetext)}

.pill[data-s="Booked"]{background:#04707F;color:#fff}   /* 5.3:1 */
.chip{background:#04707F;color:#fff}
.outcome{color:#064E5C}

/* ============================================================
   BUTTONS — flat near-black primary
   The gradient pill was the AI tell, not the hue. And orange was
   doing double duty as both brand colour and action colour, so
   nothing read as THE thing to press. Black takes the action;
   orange goes back to being an accent.
   ============================================================ */
.btn--solid{
  background:#080C14;color:#fff;border:1px solid #080C14;
  box-shadow:0 1px 2px rgba(8,12,20,.16);
}
.btn--solid:hover{
  background:#1C2431;border-color:#1C2431;
  box-shadow:0 4px 14px rgba(8,12,20,.22);
}
.btn--solid:active{background:#080C14}

/* secondary reads as the quiet option next to it */
.btn:not(.btn--solid){
  background:#fff;color:var(--text);border:1px solid var(--line-2);
}
.btn:not(.btn--solid):hover{border-color:var(--text);background:#fff}

/* the featured plan sits on near-black, so its button inverts */
.plan--f .btn{background:#fff;color:#080C14;border-color:#fff}
.plan--f .btn:hover{background:#F0F2F5;border-color:#F0F2F5}

/* on the orange footer card, white button on the warm ground */
.megacta .btn--solid{background:#fff;color:#080C14;border-color:#fff}
.megacta .btn--solid:hover{background:#F5F6F8;border-color:#F5F6F8}

/* a real way to reach a person, not just social icons */
.foot__contact{display:flex;flex-direction:column;gap:3px;margin:16px 0 14px;font-size:15px}
.foot__contact span{color:var(--text-3);font-size:13px;letter-spacing:.02em}
.foot__contact a{color:var(--text);font-weight:650;text-decoration:none;
  border-bottom:1px solid var(--line-2);width:fit-content;padding-bottom:1px}
.foot__contact a:hover{color:var(--orange-tx);border-bottom-color:currentColor}

/* ============================================================
   COMPARISON MATRIX
   The raised-card version banded at the column edges and its cap
   was clipped by the table's own overflow. Emphasis now comes from
   a solid header, a tint and hairline borders — no shadows to
   misalign, nothing escaping the table box.
   ============================================================ */
#matrix .mx{border:0;background:transparent;overflow:visible}
#matrix .tblscroll{overflow-x:auto;padding:0}

.mx__t{border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}

.mx__t thead th{background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--text-2);padding:18px 14px}
.mx__t tbody th{border-bottom:1px solid var(--line);font-weight:500;color:var(--text)}
.mx__t tbody td{border-bottom:1px solid var(--line)}
.mx__t tbody tr:last-child th,.mx__t tbody tr:last-child td{border-bottom:0}

/* our column: solid header, warm tint, hairline edges. No shadow. */
.mx__t thead th.us{
  background:#080C14;color:#fff;font-weight:700;font-size:15.5px;
  border-bottom:0;position:relative;
}
.mx__t thead th.us span{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:5px}
.mx__t td.us{
  background:rgba(255,106,0,.06);
  border-left:1px solid rgba(255,106,0,.28);
  border-right:1px solid rgba(255,106,0,.28);
}
.mx__t thead th.us{border-left:1px solid #080C14;border-right:1px solid #080C14}
.mx__t tbody tr:last-child td.us{border-bottom:1px solid rgba(255,106,0,.28)}

/* marks: only ours carries colour */
td.yes .mx__i{background:#E9ECEF;color:#6B7480;box-shadow:none}
td.yes.us .mx__i{background:var(--orange);color:#fff}
td.partial .mx__i{background:transparent;color:#8A5D06;box-shadow:inset 0 0 0 2px rgba(138,93,6,.35)}
td.no .mx__i{background:transparent;color:#C6CBD3}

/* hover never touches our column, which is what made it flicker */
.mx__t tbody tr:hover td:not(.us),
.mx__t tbody tr:hover th{background:rgba(8,12,20,.022)}

.mx__legend{border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;
  background:var(--bg-2);margin-top:-1px}
.mx__legend i.yes{background:var(--orange)}
.mx__legend i.partial{background:transparent;box-shadow:inset 0 0 0 2px rgba(138,93,6,.45)}
.mx__legend i.no{background:transparent;box-shadow:inset 0 0 0 2px #C6CBD3}

/* ============================================================
   FAQ — two columns
   The heading was floating alone above a full-width list. It now
   holds the left rail, stays with you as you read, and carries a
   direct route to a person for anything the list does not cover.
   ============================================================ */
.faq__grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.faq__grid{grid-template-columns:1fr;gap:34px}}
.faq__aside{position:sticky;top:110px}
@media (max-width:900px){.faq__aside{position:static}}
.faq__aside .lede{max-width:34ch;font-size:18px}
.faq__contact{margin-top:26px;display:flex;flex-direction:column;gap:6px}
.faq__contact span{color:var(--text-3);font-size:15px}
.faq__contact a{display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-weight:650;font-size:17px;color:var(--text);text-decoration:none;
  border-bottom:1.5px solid var(--orange);padding-bottom:2px;transition:gap .25s var(--ease-out)}
.faq__contact a:hover{gap:12px;color:var(--orange-tx)}
.faq{border-top:1px solid var(--line)}

/* ============================================================
   INLINE BOOKING
   ============================================================ */
.book__frame{position:relative;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:var(--bg-2);min-height:min(78svh,760px)}
.book__frame iframe{position:relative;z-index:1;width:100%;height:min(78svh,760px);
  border:0;display:block;opacity:0;transition:opacity .5s var(--ease-out)}
.book__frame.is-ready iframe{opacity:1}
.book__frame.is-ready .book__skeleton{opacity:0}
.book__skeleton{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;transition:opacity .4s}
.book__skeleton span{display:block;height:12px;border-radius:6px;background:var(--line);
  animation:bookpulse 1.4s ease-in-out infinite}
.book__skeleton span:nth-child(1){width:190px}
.book__skeleton span:nth-child(2){width:260px;animation-delay:.15s}
.book__skeleton span:nth-child(3){width:150px;animation-delay:.3s}
@keyframes bookpulse{0%,100%{opacity:.5}50%{opacity:1}}
.book__note{margin-top:16px;font-size:15px;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.book__skeleton span{animation:none}}

/* ============================================================
   BREAKING UP THE WHITE
   Near-black, not navy — the same #080C14 already on the buttons
   and the matrix header, so the dark moment belongs to the system
   rather than introducing a new colour.
   ============================================================ */
.callband{
  position:relative;overflow:hidden;
  background:#080C14;color:#fff;isolation:isolate;
}
.callband__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.5;
}
/* the scrim is what keeps the type legible over a photograph */
.callband::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,12,20,.94) 0%,rgba(8,12,20,.82) 46%,rgba(8,12,20,.55) 100%);
}
.callband .h2{color:#fff}
.callband .h2 em{color:var(--amber)}
.callband .lede{color:rgba(255,255,255,.76)}
.callband .btn--solid{background:#fff;color:#080C14;border-color:#fff}
.callband .btn--solid:hover{background:#F0F2F5;border-color:#F0F2F5}
.callband__in{position:relative;z-index:1;padding-block:clamp(18px,3vw,44px)}

/* ---- colour hints elsewhere, so white stretches are shorter ---- */

/* the trust strip picks up a hairline of the brand sweep */
.trust{position:relative}
.trust::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--amber) 34%,#00B4D8 68%,#04707F);
  opacity:.85;
}

/* section eyebrows rotate through the palette instead of one teal */
#cost .kicker    { color:var(--orange-tx); }
#who .kicker     { color:#04707F; }
#does .kicker    { color:var(--orange-tx); }
#dash .kicker    { color:#04707F; }
#port .kicker    { color:var(--orange-tx); }
#book .kicker    { color:#04707F; }

/* the booking frame gets a warm edge so it is not another white box */
.book__frame{border-color:rgba(255,106,0,.22);
  box-shadow:0 1px 0 rgba(255,106,0,.10),0 22px 60px -34px rgba(8,12,20,.30)}

/* ---- pricing centred ---- */
#pricing .intro{text-align:center;margin-inline:auto;max-width:min(680px,100%)}
#pricing .intro .lede{margin-inline:auto}
#pricing .plans{max-width:1120px;margin-inline:auto}
#pricing .closer{margin-inline:auto;align-items:center;text-align:center;max-width:60ch}
@media (max-width:700px){
  #pricing .intro,#pricing .closer{text-align:left;align-items:flex-start}
  #pricing .intro .lede{margin-inline:0}
}

/* ---- the calendar was sitting in too much chrome ---- */
.book__frame{border-radius:16px;min-height:0;background:#fff}
.book__frame iframe{height:min(72svh,700px)}
#book .intro{margin-bottom:clamp(20px,2.4vw,30px)}
#book{padding-bottom:clamp(70px,9vw,120px)}

/* ============================================================
   CHAT INTAKE
   Built in the site's own stack rather than pulling in React for a
   single widget, but following shadcn's conventions: neutral
   surfaces, hairline borders, generous field padding, one accent.
   ============================================================ */
.chat__launch{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:400;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#080C14;color:#fff;border:0;cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(8,12,20,.5);
  transition:transform .25s var(--ease-out),background .25s var(--ease-out);
}
.chat__launch:hover{transform:translateY(-2px);background:#1C2431}
.chat__ico{width:24px;height:24px;grid-area:1/1;transition:opacity .2s,transform .2s}
.chat__ico--x{opacity:0;transform:rotate(-45deg)}
.chat__launch.is-open .chat__ico:not(.chat__ico--x){opacity:0;transform:rotate(45deg)}
.chat__launch.is-open .chat__ico--x{opacity:1;transform:none}

.chat[hidden]{display:none !important}
.chat{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:calc(clamp(16px,2.4vw,28px) + 70px);
  z-index:400;width:min(380px,calc(100vw - 32px));max-height:min(74svh,620px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 70px -20px rgba(8,12,20,.34);
  animation:chatIn .28s var(--ease-out);
}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chat{animation:none}}

.chat__top{display:flex;align-items:center;gap:11px;padding:15px 16px;
  background:#080C14;color:#fff}
.chat__avatar{width:34px;height:34px;border-radius:10px;background:var(--orange);
  display:grid;place-items:center;flex:0 0 auto}
.chat__avatar svg{width:22px;height:22px}
.chat__who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.chat__who b{font-size:15px;font-weight:650}
.chat__who i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.62)}
.chat__close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border:0;cursor:pointer}
.chat__close:hover{color:#fff;background:rgba(255,255,255,.16)}

.chat__body{padding:16px;overflow-y:auto;flex:1;min-height:0}
.chat__bubble{background:var(--bg-2);border:1px solid var(--line);
  padding:12px 14px;border-radius:14px 14px 14px 4px;font-size:15px;line-height:1.5;
  color:var(--text-2);margin:0}

.chat__form{padding:0 16px 16px;display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--line);padding-top:14px}
.chat__form label{font-size:13px;font-weight:600;color:var(--text-2)}
.chat__form input[type=text],.chat__form input:not([type]),.chat__form input[type=tel]{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line-2);
  font-size:16px;background:#fff;margin-bottom:6px;
}
.chat__form input:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,106,0,.15)}
.chat__consent{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;
  font-size:12px;line-height:1.45;color:var(--text-3);font-weight:400;margin:4px 0 2px}
.chat__consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--orange)}
.chat__err{display:none;font-size:13px;color:#B4230A;font-weight:600;margin:2px 0 0}
.chat__err.on{display:block}
.chat__send{
  margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:10px;border:0;cursor:pointer;
  background:#080C14;color:#fff;font-weight:650;font-size:15.5px;font-family:inherit;
  transition:background .2s,opacity .2s;
}
.chat__send:hover:not(:disabled){background:#1C2431}
.chat__send:disabled{opacity:.42;cursor:not-allowed}
.chat__done{margin-top:12px;padding:13px 14px;border-radius:12px;
  background:#FFF3EC;border:1px solid rgba(255,106,0,.28)}
.chat__done b{display:block;font-size:15px;margin-bottom:4px;color:var(--text)}
.chat__done p{margin:0;font-size:14px;color:var(--text-2);line-height:1.5}

@media (max-width:520px){
  .chat{right:8px;left:8px;width:auto;bottom:84px;max-height:72svh}
}

/* ---- full feature grid under the four beats ---- */
.feat__h{margin:clamp(56px,7vw,90px) 0 clamp(24px,3vw,36px);
  font-size:clamp(24px,2.6vw,34px);letter-spacing:-.026em;font-weight:600}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(18px,2.4vw,32px)}
.feat__i{display:grid;grid-template-columns:12px 1fr;gap:14px;align-items:start}
.feat__dot{width:10px;height:10px;border-radius:3px;margin-top:7px;
  background:var(--feathue,var(--orange))}
.feat__i[data-k="inbound"]     { --feathue:#FF6A00; }
.feat__i[data-k="outbound"]    { --feathue:#00B4D8; }
.feat__i[data-k="speed"]       { --feathue:#FFC300; }
.feat__i[data-k="qualify"]     { --feathue:#04707F; }
.feat__i[data-k="scheduling"]  { --feathue:#E85D00; }
.feat__i[data-k="reactivation"]{ --feathue:#0693A8; }
.feat__i[data-k="transfer"]    { --feathue:#FF6A00; }
.feat__i[data-k="records"]     { --feathue:#04707F; }
.feat__t{font-size:17px;font-weight:650;letter-spacing:-.016em;margin:0 0 5px;color:var(--text)}
.feat__d{font-size:15.5px;line-height:1.55;color:var(--text-2);margin:0}

/* consent is legally required but should not shout — it is fine print,
   so it reads as fine print */
.chat__form label.chat__consent{font-size:11px;line-height:1.4;color:var(--text-3);
  font-weight:400;grid-template-columns:16px 1fr;gap:8px;margin:2px 0}
.chat__consent input{width:15px;height:15px;margin-top:1px}

/* ============================================================
   FLOATING PILL NAV
   Detached from the top edge rather than spanning it. The bar
   itself carries the surface, so the page scrolls underneath it.
   ============================================================ */
.nav{background:transparent !important;border-bottom:0 !important;
  padding-top:clamp(10px,1.4vw,18px);pointer-events:none}
.nav__in{
  pointer-events:auto;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--line);
  border-radius:var(--pill);
  padding-inline:clamp(14px,1.6vw,22px);
  height:62px;
  box-shadow:0 1px 2px rgba(8,12,20,.04),0 10px 30px -18px rgba(8,12,20,.28);
  transition:box-shadow .35s var(--ease-out),background .35s var(--ease-out);
}
.nav--stuck{background:transparent !important;backdrop-filter:none !important}
.nav--stuck .nav__in{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 2px rgba(8,12,20,.05),0 14px 40px -18px rgba(8,12,20,.34);
}
/* the scroll indicator belongs to the page, not the floating bar */
.scrollbar{top:0}
@media (max-width:620px){
  .nav__in{height:56px;padding-inline:12px}
}

/* ---- scroll progress: the brand gradient, made visible ----
   Three later rules were fighting over this bar; the gradient won on
   source order but at 2px it barely registered. */
.scrollbar{height:3px;z-index:500}
.scrollbar i{
  background:var(--grad-brand);
  box-shadow:0 0 12px rgba(255,106,0,.45);
  border-radius:0 3px 3px 0;
}

/* ---- nav: tighter, and it now tells you where you are ---- */
.nav__links{gap:clamp(14px,1.5vw,24px);font-size:15px}
.nav__links a{
  position:relative;padding:7px 2px;border-bottom:0;color:var(--text-2);
  transition:color .2s var(--ease-out);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1)}
/* the section you are actually in */
.nav__links a.is-current{color:var(--text);font-weight:600}
.nav__links a.is-current::after{transform:scaleX(1);background:var(--orange)}

/* ============================================================
   NAV CTAS + MOBILE MENU
   Below 1200px the inline links go, so the bar is logo, the one
   ask, and a burger that opens the links as a panel under the
   pill. The later .btn padding rules were inflating the nav
   buttons to 55px inside a 56px bar; these pin them.
   ============================================================ */
.nav__cta{gap:8px}
.nav .nav__btn{height:42px;padding:0 18px;font-size:15px;font-weight:600;border-radius:var(--pill)}

.nav__burger{display:none;position:relative;flex:0 0 auto;width:42px;height:42px;padding:0;
  border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--text);cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.nav__burger:hover{border-color:var(--text)}
.nav__burger:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nav__burger span{position:absolute;left:12px;right:12px;top:50%;height:1.75px;margin-top:-.875px;
  border-radius:2px;background:currentColor;transition:transform .4s var(--ease-out)}
.nav__burger span:first-child{transform:translateY(-3.5px)}
.nav__burger span:last-child{transform:translateY(3.5px)}
.nav--open .nav__burger{background:var(--text);border-color:var(--text);color:#fff}
.nav--open .nav__burger span:first-child{transform:rotate(45deg)}
.nav--open .nav__burger span:last-child{transform:rotate(-45deg)}

/* panel hangs under the pill, same width, same surface */
.nav__menu{position:absolute;left:0;right:0;top:100%;padding-top:8px;pointer-events:none;
  visibility:hidden;opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top center;
  transition:opacity .2s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .3s}
.nav--open .nav__menu{visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .25s var(--ease-out),transform .45s var(--ease-out),visibility 0s}
.nav__panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:8px;
  box-shadow:0 1px 2px rgba(8,12,20,.05),0 30px 70px -24px rgba(8,12,20,.42);
  max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain}

.nav__mlinks{display:flex;flex-direction:column}
.nav__mlinks a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 14px;border-radius:14px;font-family:var(--font-display);font-size:19px;
  font-weight:600;letter-spacing:-.02em;color:var(--text);
  opacity:0;transform:translateY(6px);
  transition:background .2s var(--ease-out),opacity .3s var(--ease-out),transform .45s var(--ease-out)}
.nav__mlinks a{position:relative}
.nav__mlinks a + a::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:var(--line);transition:opacity .2s}
.nav__mlinks a:hover,.nav__mlinks a:focus-visible{background:var(--bg-2);outline:none}
.nav__mlinks a:hover::before,.nav__mlinks a:focus-visible::before,
.nav__mlinks a:hover + a::before,.nav__mlinks a:focus-visible + a::before{opacity:0}
.nav__mlinks svg{color:var(--text-3);flex:0 0 auto;transition:transform .25s var(--ease-out),color .2s}
.nav__mlinks a:hover svg{color:var(--orange);transform:translateX(2px)}
.nav--open .nav__mlinks a{opacity:1;transform:none}
.nav--open .nav__mlinks a:nth-child(2){transition-delay:0s,.03s,.03s}
.nav--open .nav__mlinks a:nth-child(3){transition-delay:0s,.06s,.06s}
.nav--open .nav__mlinks a:nth-child(4){transition-delay:0s,.09s,.09s}
.nav--open .nav__mlinks a:nth-child(5){transition-delay:0s,.12s,.12s}
.nav--open .nav__mlinks a:nth-child(6){transition-delay:0s,.15s,.15s}

.nav__mcta{display:grid;gap:8px;padding:10px 6px 6px;margin-top:6px;border-top:1px solid var(--line)}
.nav__mcta .btn{width:100%;height:52px;padding:0 20px;font-size:16px;border-radius:var(--pill)}

.nav__scrim{position:fixed;inset:0;z-index:-1;background:rgba(8,12,20,.3);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility 0s linear .3s}
.nav--open .nav__scrim{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--ease-out),visibility 0s}

/* below 1200px the pill floats clear of the screen edges, and the
   panel takes exactly its width */
/* the chat launcher sits above the nav; it steps aside while the menu is up */
.nav-open .chat__launch{opacity:0;pointer-events:none}

@media (max-width:1200px){
  .nav__burger{display:inline-block}
  .nav .wrap{width:auto;margin-inline:clamp(10px,2vw,20px)}
  .nav__menu{padding-inline:0}
}
@media (min-width:1201px){.nav__menu,.nav__scrim{display:none}}

/* tablets: a dropdown under the burger, not a sheet */
@media (min-width:621px) and (max-width:1200px){
  .nav__panel{width:380px;margin-left:auto}
}

/* phones: wordmark back, Login moves into the menu */
@media (max-width:620px){
  .nav__in{height:58px;padding-inline:14px 7px;gap:8px}
  .logo > span{display:inline;font-size:16.5px}
  .nav__login{display:none}
  .nav .nav__btn{height:42px;padding:0 16px;font-size:14.5px}
}
/* the narrowest phones keep the mark, not the words */
@media (max-width:359px){.logo > span{display:none}}

@media (prefers-reduced-motion:reduce){
  .nav__menu,.nav__mlinks a,.nav__burger span,.nav__scrim{transition:none !important}
}