/* ============================================================
   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 */
  /* Paper ground, not white. Nothing on the page is #FFF except the
     cards, so they lift off the sheet instead of sitting flush in it.
     Kept light (L* ~96) so every text token still clears 4.5:1 — a
     darker sheet would have pushed --text-3 and the two -tx colours
     under, and they were already sitting close to the line. */
  --page:#EFEFEC;      /* neutral grey the slabs float on */
  --bg:#F6F6F3;        /* the sheet */
  --bg-2:#FFFFFF;      /* cards lift white off it */
  --bg-3:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --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:600;font-size:15px;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:15px;color:var(--text-2);font-weight:600;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:1200px){.nav__links{display:none}}
/* below 520px the wordmark is dropped so the two CTAs always fit */
@media (max-width:520px){
  .logo > span{display:inline}
  .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:15px}
}

/* ---------- 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:600}
/* smaller, and clear of the buttons above it */
.hero__note{font-size:13px;font-weight:400;margin-top:clamp(14px,1.6vw,20px);letter-spacing:.004em}
.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:17px;letter-spacing:-.018em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__sub{font-size:13px;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:62px 1fr;gap:14px;padding:8px 0;
  opacity:.3;transition:opacity .45s var(--ease-out);font-size:17px;line-height:1.48}
.script__l.seen{opacity:.55}
.script__l.now{opacity:1}
.script__who{font-family:var(--font-mono);font-size:11px;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:400}
.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:800;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:15px;color:var(--text-3);line-height:1.5}
.knife{font-family:var(--font-display);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(24px,3.2vw,44px);line-height:1.12;max-width:21ch}
.knife b{font-weight:700;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}
@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:13px;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:600;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:15px;font-weight:700;color:var(--signal);line-height:1.4;margin-bottom:9px}
.trade__d{font-size:15px;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:11px;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:13px;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:600;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:13px;color:var(--text-3);margin-top:4px;font-weight:600}

/* ---------- SPEED ---------- */
@media (max-width:820px){.speedhead{grid-template-columns:1fr;gap:16px}}
.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:13px;color:var(--text-3);
  font-weight:400;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}

.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:13px;color:var(--text-3);font-weight:600;margin-top:2px}
.chip{flex:0 0 auto;padding:7px 13px;border-radius:6px;background:var(--live-bg);color:#00714C;
  font-size:11px;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:13px;margin-top:7px;font-weight:600;color:#00A06B;
  display:inline-flex;align-items:center;gap:4px}
.kpi__n{font-size:13px;margin-top:7px;color:var(--text-3);font-weight:600;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:15px;letter-spacing:-.018em}
.lgnd{display:flex;gap:13px;font-size:13px;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:13px;min-width:0;flex:1}
.donut__k span{display:flex;align-items:center;gap:8px;color:var(--text-2);font-weight:600}
.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:11px;
  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:11px;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:13px;font-weight:600;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:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#00714C}
.ho__slot b{font-size:15px;font-weight:700;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:15px;color:var(--text-2);font-weight:600}
.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:600}
.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}
.lg{display:flex;align-items:center;gap:12px;padding:0 clamp(20px,3vw,44px);height:88px;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(18px,1.9vw,25px);color:var(--text-3);white-space:nowrap;transition:color .3s var(--ease-out)}
.lg:hover{color:var(--text)}
.lg svg{width:22px;height:22px;flex:0 0 auto}

/* ---------- 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:800;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:15px;color:var(--text-2);line-height:1.5}
.plan ul{display:flex;flex-direction:column;gap:11px;font-size:15px;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:11px;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:15px}
.cmp__r:last-child{border-bottom:0}
.cmp__r b{font-weight:700}
.cmp__r span{color:var(--text-2);font-size:15px}
.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:700;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:15px;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:11px;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:15px;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:15px;color:var(--text);font-weight:600;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:11px;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:11px;
  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:600;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)}
.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:400}

/* 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:400}
.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:11px;font-weight:600;background:var(--signal-br)}
.tbl th{text-transform:none;font-size:13px;letter-spacing:-.004em;font-weight:400}
.script__who{text-transform:none;font-size:11px;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:11px}
.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:15px;color:var(--text-2);font-weight:400}
.trade__roi em{display:block;margin-top:8px;font-style:normal;font-size:15px;
  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:15px;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:600;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:13px;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:13px;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:15px;color:var(--text);white-space:nowrap}
.calc__be{font-size:15px;color:var(--text-2);line-height:1.5;margin-bottom:14px}
.calc__be b{color:var(--text);font-weight:700}
.calc__note{font-size:13px;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:15px;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:13px;font-weight:600;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:600;color:var(--text-2);font-size:15px;
  min-width:220px;background:var(--surface);
}
@media (max-width:820px){
  .mx__t{font-size:15px}
  .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:13px;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:600;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:15px;color:var(--text-2);line-height:1.55}
.d30__note{margin-top:26px;font-size:15px;color:var(--text-2);padding-left:15px;
  border-left:2px solid var(--signal-br);font-weight:600}

/* 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:13px;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 */



/* 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)}
.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:15px;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:15px;font-weight:600;
  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:15px;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)}
.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:600}
.btn--solid{box-shadow:var(--sh-glow)}
.btn--solid:hover{transform:translateY(-1px)}

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

/* 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 */

/* 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:var(--bg)}
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:13px;
  font-weight:700;
  letter-spacing:.14em;
  margin-bottom:20px;
}
.hero__eyebrow{
  text-transform:uppercase;
  font-size:13px;
  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:11px}

/* 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:15px}
.tbl .rec__note{font-size:13px}
.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:400;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:400;letter-spacing:-.03em}
.megacta h2{font-weight:400}

/* 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:400;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:11px;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:11px;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:13px;font-weight:600;color:var(--text);white-space:nowrap}

@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:13px;padding:3px 9px}
.trust__term dd{font-size:13px}
.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:11px;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:15px}
.mx__t th,.mx__t td{padding:17px 16px}
.mx__t tbody th{font-size:15px;font-weight:600;color:var(--text)}

/* our column is the answer — it should be obvious before reading */
.mx__t thead th.us{font-size:15px;font-weight:700;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:15px}
.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:600;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.
   ============================================================ */
/* The measure has to sit on the h2, not the wrapper: `ch` resolves
   against the element's own font, so 22ch on the 16px container came
   out ~180px and broke the headline over five lines. */
#cost .cost__intro{max-width:100%;margin-inline:auto;text-align:center;
  margin-bottom:clamp(38px,5vw,62px)}
#cost .cost__intro .h2{max-width:24ch;margin-inline:auto}
#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;
  text-align:center;align-items:center;
}
#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%,34ch);
  margin-inline:auto;text-align:center}
#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:600}
.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:600;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:13px;font-weight:600;color:var(--text-2);padding:18px 14px}
.mx__t tbody th{border-bottom:1px solid var(--line);font-weight:400;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:15px;
  border-bottom:0;position:relative;
}
.mx__t thead th.us .mx__rec-legacy{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:600;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:600}
.chat__who i{font-style:normal;font-size:13px;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:15px;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:11px;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:600;font-size:15px;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:13px;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:600;letter-spacing:-.016em;margin:0 0 5px;color:var(--text)}
.feat__d{font-size:15px;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.
   ============================================================ */
/* The pill-era .nav rules that lived here forced a transparent header
   with `backdrop-filter:none !important` once the nav stuck, which meant
   the full-width bar below lost its blur the moment you scrolled. Both
   are gone; the bar owns the surface now. */
.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 .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 — full-width translucent bar
   Replaces the floating pill. The blur sits on the header itself
   so the page scrolls under a single continuous surface.
   ============================================================ */
.nav{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line) !important;
  padding-top:0;
  pointer-events:auto;
}
.nav__in{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-radius:0;box-shadow:none;height:72px;padding-inline:0;
}
.nav--stuck{background:rgba(255,255,255,.86) !important}
.nav--stuck .nav__in{background:transparent;box-shadow:none}

/* links sit left, next to the logo, as in the reference */
.nav__in{justify-content:flex-start;gap:clamp(20px,3vw,44px)}
.nav__links{margin-right:auto}
.nav__cta{gap:10px}

/* two CTAs: quiet ghost, solid primary */
.nav__login{
  padding:9px 20px;font-size:15px;border-radius:var(--pill);
  background:transparent;border:1px solid var(--line-2);color:var(--text);
}
.nav__login:hover{border-color:var(--text);background:transparent}
.nav__btn{padding:10px 20px;font-size:15px;border-radius:var(--pill)}
@media (max-width:820px){.nav__login{display:none}}
@media (max-width:620px){.nav__in{height:64px}}

/* ---- dropdown panels ---- */
.navmenu{position:relative}
.navmenu__btn{
  display:inline-flex;align-items:center;gap:5px;padding:7px 2px;
  font:inherit;font-size:15px;color:var(--text-2);cursor:pointer;
  background:none;border:0;transition:color .2s var(--ease-out);
}
.navmenu__btn svg{transition:transform .28s var(--ease-out);opacity:.6}
.navmenu:hover .navmenu__btn,.navmenu.is-open .navmenu__btn{color:var(--text)}
.navmenu.is-open .navmenu__btn svg{transform:rotate(180deg)}

.navmenu__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);
  width:min(420px,92vw);padding:14px;border-radius:18px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 70px -22px rgba(8,12,20,.34);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .28s var(--ease-out),visibility .22s;
  z-index:10;
}
/* !important because an earlier layered rule in this file was winning
   the cascade and holding the panel at opacity 0 on desktop widths. */
.navmenu.is-open .navmenu__panel,
.navmenu__panel.is-open{opacity:1 !important;visibility:visible !important;
  pointer-events:auto !important;transform:translate(-50%,0) !important}
/* a hover bridge so the cursor can cross the gap without it closing */
.navmenu__panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.navmenu__label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin:2px 0 10px;padding-inline:8px}
.navmenu__list{display:grid;gap:2px}
.navmenu__list a{
  display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;
  padding:9px 8px;border-radius:11px;transition:background .18s var(--ease-out);
}
.navmenu__list a:hover{background:var(--bg-2)}
.navmenu__ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--text);
}
.navmenu__list a:hover .navmenu__ico{background:#fff;color:var(--orange-tx)}
.navmenu__ico svg{width:20px;height:20px}
.navmenu__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.navmenu__txt b{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.012em}
.navmenu__txt i{font-style:normal;font-size:13px;color:var(--text-3);line-height:1.35}
@media (max-width:1200px){.navmenu__panel{display:none}}

/* ============================================================
   TRUST STRIP — line icons + partner marks
   ============================================================ */
.trust__list li{display:inline-flex;align-items:center;gap:8px}
.trust__ico{width:19px;height:19px;flex:none;color:var(--orange-tx);opacity:.9}
.trust__mark{
  display:grid;place-items:center;flex:none;min-width:26px;height:22px;padding-inline:5px;
  border-radius:6px;background:var(--text);color:#fff;
  font:700 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;
}



/* ============================================================
   BUTTON TYPE — one rule, because four layered ones disagreed
   Weights ran 600/650/700 across the stack and the negative
   tracking inherited from display type closed the letters up at
   15px. Body font, even weight, no tracking.
   ============================================================ */
.btn,.btn--solid,.nav__btn,.nav__login{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
/* solid buttons carry white on a dark ground, where antialiasing
   thins the strokes — half a step of weight puts it back */
.btn--solid,.plan--f .btn{font-weight:600}



/* ============================================================
   HERO LIVE PILL + HEADLINE CHIPS
   ============================================================ */

/* Trade photos set between the words. Sized in em so they track the
   headline's clamp, and vertical-align sits them on the x-height rather
   than the baseline, which drops them into the word properly. */
.h1 .h1chip{
  display:inline-block;vertical-align:-.14em;
  width:.86em;height:.86em;object-fit:cover;
  border-radius:.26em;margin:0 .06em;
  box-shadow:0 2px 10px -3px rgba(8,12,20,.35);
}
/* the reveal mask crops anything past the line box, and the chips are
   taller than the glyphs — this buys them room without moving the type */
.h1 .rv{padding-block:.2em;margin-block:-.2em}
@media (max-width:620px){
  .h1 .h1chip{width:.8em;height:.8em;border-radius:.22em}
}

/* ============================================================
   PLAN TICKS — filled discs
   ============================================================ */
.plan li{grid-template-columns:22px 1fr;gap:12px}
.plan__tick{
  width:19px;height:19px;margin-top:3px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:var(--live-bg);color:var(--teal-tx);
}
.plan__tick svg{width:11px;height:11px;stroke-width:3.4}
/* the featured card sits on a dark ground, so the disc inverts */
.plan--f .plan__tick{background:rgba(255,255,255,.16);color:#fff}

/* ============================================================
   INTEGRATION MARKS — a grid, replacing the marquee
   Tiles take either a typeset wordmark or a real logo image, so
   swapping in official assets needs no markup change.
   ============================================================ */
.lgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.lgrid__i{
  display:grid;place-items:center;min-height:88px;padding:18px 14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:clamp(14px,1.6vw,18px);
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.lgrid__i:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
.lgrid__i span{
  font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.25vw,18px);
  letter-spacing:-.022em;color:var(--text-2);text-align:center;line-height:1.2;
  transition:color .25s var(--ease-out);
}
.lgrid__i:hover span{color:var(--text)}
.lgrid__i img{width:100%;max-width:170px;height:30px;object-fit:contain;
  /* the sources are mixed colour; one greyscale tone keeps the row even */
  filter:grayscale(1) brightness(0) opacity(.62);
  transition:filter .25s var(--ease-out)}
.lgrid__i:hover img{filter:grayscale(1) brightness(0) opacity(1)}
.lgrid__note{
  margin-top:16px;font-size:13px;line-height:1.5;color:var(--text-3);
  text-align:center;
}
@media (max-width:860px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.lgrid__i{min-height:74px;padding:14px 10px}}


/* ============================================================
   WHO — one type ramp instead of five sizes
   The block ran 11 / 65 / 23 / 34 / 17. The pull quote at 34px was
   larger than the lede that introduced it, so the reading order went
   up, then further up, then down — which is what made it look messy.
   It steps down cleanly now: 65 heading, 23 lede, 26 quote, 18 body.
   ============================================================ */
#who .who__q{
  font-size:clamp(20px,1.95vw,26px);line-height:1.28;
  font-weight:600;letter-spacing:-.02em;
  margin-bottom:22px;
}
#who .who__a{font-size:18px;line-height:1.62}

/* ============================================================
   #who AT NIGHT + THE 24-HOUR BAND
   The one dark section on the page, and the only one where the
   dark is motivated: the whole argument is about after hours.
   ============================================================ */
/* one prose size in #who — the sub, the quote and the body ran 23 / 26
   / 18, three paragraphs at three sizes. The quote is gone and the two
   that remain match. */
#who .lede,#who .who__a{font-size:clamp(17px,1.45vw,19px);line-height:1.62;max-width:56ch}
#who .lede{margin-bottom:18px}

/* ============================================================
   TRADE CARD CTA
   A link rather than a filled button — four more of those here
   would undo the CTA count we just brought down.
   ============================================================ */
.trade__cta{
  margin-top:auto;padding:14px 0 0;
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--orange-tx);background:none;border:0;cursor:pointer;
  border-top:1px solid var(--line);width:100%;
  transition:color .2s var(--ease-out),gap .25s var(--ease-out);
}
.trade__cta svg{width:15px;height:15px;transition:transform .25s var(--ease-out)}
.trade__cta:hover{color:var(--text)}
.trade__cta:hover svg{transform:translateX(3px)}
.trade__cta:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.trade__body{display:flex;flex-direction:column}

/* ============================================================
   HERO — soft wash + a card behind the player
   Borrowed from the Clouudo reference: a large low-opacity bloom
   bleeding in from the right instead of a flat white ground, and the
   product shown as depth rather than one flat panel.
   ============================================================ */
.hero{overflow:hidden}          /* the tilt inflates its bounding box */
.hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 52% at 88% 6%,  rgba(0,180,216,.20), transparent 70%),
    radial-gradient(52% 48% at 104% 52%,rgba(255,106,0,.17), transparent 68%),
    radial-gradient(46% 46% at 68% 96%, rgba(87,221,245,.14),transparent 70%);
}
.orb--1{opacity:.5}
.orb--2{opacity:.35}

/* ---- the stack ---- */
.hero__stack{position:relative;perspective:1600px}
.hero__stack .player{
  position:relative;z-index:2;
  transform:rotateY(-7deg) rotateX(2.5deg) translateZ(0);
  transform-origin:100% 50%;
  box-shadow:0 40px 90px -34px rgba(8,12,20,.42),0 4px 14px -6px rgba(8,12,20,.14);
}
/* Top-right buried it behind the player — only a clipped sliver read.
   Lower-left is the one place it can overlap and still be legible. */
.hero__behind{
  position:absolute;z-index:3;bottom:-26px;left:-64px;width:min(292px,72%);
  padding:16px 18px 14px;border-radius:16px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 26px 60px -28px rgba(8,12,20,.36);
  transform:rotateY(-5deg) rotateX(1.5deg) translateZ(40px);
  transform-origin:0 100%;
}
.hero__behind__h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.hero__behind__h b{font-size:13px;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.hero__behind__tick{
  width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--live-bg);color:var(--teal-tx);
}
.hero__behind__tick svg{width:11px;height:11px}
.hero__behind__rows{display:grid;gap:6px;margin:0}
.hero__behind__rows > div{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline}
.hero__behind__rows dt{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
}
.hero__behind__rows dd{margin:0;font-size:13px;font-weight:600;color:var(--text-2);
  letter-spacing:-.008em}

@media (max-width:1040px){
  .hero__stack{perspective:none}
  .hero__stack .player{transform:none;box-shadow:var(--sh-3)}
  .hero__behind{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__stack .player,.hero__behind{transform:none}
}

/* ============================================================
   SPEED TO LEAD — timed cards
   The rail drew a line and hung four labels off it. These are cards
   whose mesh deepens left to right, so the colour carries the clock
   running down instead of a static rule doing it.
   ============================================================ */
/* --step 0…3 drives the ramp: barely tinted at 0s, hot by 90s */


/* ============================================================
   PALETTE PREVIEW — warm ground, ink, one accent
   Scoped to #cost so it can be compared against the live palette
   and reverted by deleting this block plus one class.

   Every reference picked this session — Parley, Clouudo, the AI
   solutions page — runs a warm off-white ground, near-black type and
   exactly ONE accent. This is that, using the orange we already own:
   hi-vis, safety cone, the colour of the trades. Cyan is gone; the
   cool survives only where something is genuinely live, so it means
   something instead of decorating.
   ============================================================ */
#cost.pal-warm{
  --bg:#FAF8F5;
  --bg-2:#F4F0EA;
  --bg-3:#F4F0EA;
  --surface:#FFFFFF;
  --surface-2:#F4F0EA;
  --page:#F0EBE3;

  /* neutrals carry a warm cast so they stop fighting the orange —
     #F7F8FA was blue-grey, which is the discord you can feel but
     cannot point at */
  --line:rgba(38,30,20,.13);
  --line-2:rgba(38,30,20,.21);
  --hair:rgba(38,30,20,.07);

  --text:#0B0A08;
  --text-2:#4A443C;
  --text-3:#6E675C;   /* 4.8:1 on the warm ground */

  /* one accent */
  --deep:#B34700;
  --signal:#B34700;
  --signal-br:#FF6A00;
  --signal-hi:#FF6A00;
  --orange-dsp:#E85D00;

  /* the single cool, reserved for live state */
  --live:#0E6E63;
  --live-bg:#E8F1EF;
  --teal:#0E6E63;
  --teal-tx:#0B5A51;

  --grad-fill:linear-gradient(150deg,#FF9A4D,#FF6A00);
  --grad-warm:linear-gradient(150deg,#FF9A4D,#FF6A00);
  --grad-cool:linear-gradient(150deg,#FF9A4D,#FF6A00);

  background:var(--bg);
}
#cost.pal-warm .kicker{color:var(--deep)}
#cost.pal-warm .stat{background:var(--surface);border-color:var(--line)}
#cost.pal-warm .calc{background:var(--surface);border-color:var(--line)}
#cost.pal-warm .calc__out{background:var(--bg-2);border-color:var(--line)}
#cost.pal-warm input[type=range]{accent-color:var(--signal-br)}
#cost.pal-warm .btn--solid{background:var(--grad-warm);border-color:transparent;color:#fff}

/* ============================================================
   COMPARISON MATRIX — columns as cards
   Each option is its own card with a pill header; ours is a solid
   panel running the height of the table. Still a real <table>, so the
   row and column headers announce correctly.
   ============================================================ */
.mx{background:var(--bg-2);border:1px solid var(--line);
  border-radius:clamp(16px,1.8vw,24px);padding:clamp(12px,1.6vw,22px);overflow:visible}
.mx .tblscroll{overflow-x:auto;overflow-y:visible}
.mx__t{
  border-collapse:separate !important;
  border-spacing:clamp(8px,.9vw,14px) 0;
  width:100%;table-layout:fixed;
}
.mx__t thead td{background:none;border:0}

/* ---- column headers as pills ---- */
.mx__t thead th{
  background:none !important;border:0 !important;padding:0 0 clamp(10px,1.1vw,16px);
  text-align:center;vertical-align:bottom;position:relative;
}
.mx__pill{
  display:block;padding:13px 10px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  font-size:clamp(13px,1.05vw,15.5px);font-weight:700;letter-spacing:-.014em;
  color:var(--text);
}
.mx__t thead th.us .mx__pill{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.34);color:#fff;
}
.mx__t thead th.us{
  background:#C2410C !important;border-radius:14px 14px 0 0;
  padding-inline:clamp(8px,.8vw,12px);padding-top:clamp(30px,2.6vw,38px);
}
.mx__rec{
  position:absolute;top:clamp(9px,.9vw,13px);left:0;right:0;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
}

/* ---- row labels ---- */
.mx__t tbody th{
  background:none !important;border:0 !important;text-align:left;
  padding:clamp(13px,1.3vw,17px) 14px clamp(13px,1.3vw,17px) 0;
  font-size:clamp(13.5px,1.05vw,15.5px);font-weight:600;letter-spacing:-.012em;
  color:var(--text);display:flex;align-items:center;gap:10px;
}
.mx__rowi{width:17px;height:17px;flex:none;color:var(--orange-tx);opacity:.55}

/* ---- cells ---- */
.mx__t tbody td{
  background:var(--surface);border:0 !important;text-align:center;vertical-align:middle;
  padding:clamp(13px,1.3vw,17px) 10px;
}
.mx__t tbody tr:last-child td{border-radius:0 0 14px 14px}
.mx__t tbody td.us{color:#fff}
.mx__t tbody td.us.last{border-radius:0 0 14px 14px}
.mx__t tbody td.cost{font-size:13px;font-weight:600;color:var(--text-2)}
.mx__t tbody td.us.cost{color:#fff}

.mx__i{display:inline-grid;place-items:center}
.mx__i svg{width:23px;height:23px}
.mx__t td.yes .mx__i{background:none;color:#1F7A55}
.mx__t td.no .mx__i{color:#B3402A}
.mx__t td.partial .mx__i{background:none;color:#8A5D06}
.mx__t td.us .mx__i{color:#fff;background:none}

/* the hairlines that separated rows in the old table */
.mx__t tbody tr + tr td:not(.us){box-shadow:inset 0 1px 0 var(--hair)}
.mx__t tbody tr + tr td.us{box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}

@media (max-width:860px){
  .mx__t{min-width:640px}
  .mx__rowi{display:none}
}


/* the label column needs real width — table-layout:fixed was splitting
   five columns evenly and the labels ran under our card */
.mx__t{table-layout:fixed}
.mx__t thead td:first-child,.mx__t tbody th{width:31%}
.mx__t thead th,.mx__t tbody td{width:17.25%}
@media (max-width:1100px){
  .mx__t thead td:first-child,.mx__t tbody th{width:26%}
  .mx__t thead th,.mx__t tbody td{width:18.5%}
}
/* our pill matches the others; only the eyebrow above it is set in caps */
.mx__t thead th.us .mx__pill{
  text-transform:none;letter-spacing:-.014em;
  font-size:clamp(13px,1.05vw,15.5px);font-weight:700;display:block;
}


/* the container has to sit under the cards, not match them — white
   cards on a near-white ground read as one flat block */
#pricing .mx{background:#EDEFF2;border-color:rgba(16,21,28,.09)}
.mx__t thead th:not(.us) .mx__pill{box-shadow:0 1px 2px rgba(8,12,20,.04)}
.mx__t tbody td:not(.us){
  box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair);
}
.mx__t tbody tr:first-child td:not(.us){
  box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair),inset 0 1px 0 var(--hair);
  border-radius:14px 14px 0 0;
}
.mx__t tbody tr:last-child td:not(.us){
  box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair),inset 0 -1px 0 var(--hair),
             inset 0 1px 0 var(--hair);
}
.mx__t tbody tr + tr td:not(.us){
  box-shadow:inset 1px 0 0 var(--hair),inset -1px 0 0 var(--hair),inset 0 1px 0 var(--hair);
}
.mx__t tbody tr:last-child + tr td:not(.us){box-shadow:none}

/* ============================================================
   TRADES FOOTER — CTA pair and its qualifier, centred
   ============================================================ */
#trades .trades__cta{
  justify-content:center;
  margin-top:clamp(30px,3.8vw,46px);
}
#trades .trades__note{
  margin:14px auto 0;max-width:56ch;text-align:center;
  font-size:13px;line-height:1.5;color:var(--text-3);
  padding-inline:clamp(16px,4vw,40px);
}

/* ============================================================
   HERO WAVEFORM — canvas band
   ============================================================ */
.hero__wave{
  position:absolute;top:0;left:0;right:0;
  height:clamp(52px,6vw,84px);
  pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
}
.hero__wave canvas{display:block;width:100%;height:100%}

/* ============================================================
   MICRO-INTERACTIONS
   One timing system across the page: a fast curve for anything under
   the cursor, a slower one for things that settle. Everything here is
   transform and opacity so it stays on the compositor.
   ============================================================ */
:root{
  --mi-fast:.22s cubic-bezier(.2,.8,.3,1);
  --mi-slow:.42s cubic-bezier(.16,1,.3,1);
}

/* ---- buttons: lift, glow, and a real press ---- */
.btn{transition:
  transform var(--mi-fast),box-shadow var(--mi-fast),
  border-color var(--mi-fast),background var(--mi-fast),color var(--mi-fast)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn--solid:hover{
  box-shadow:0 1px 2px rgba(196,43,0,.3),0 14px 34px -10px rgba(255,77,13,.6);
}
.btn--ghost:hover,.nav__login:hover{box-shadow:0 6px 18px -10px rgba(8,12,20,.4)}

/* ---- cards: settle upward, shadow deepens ---- */
.trade,.plan,.stat,.card,.kpi,.feat__i,.beat{
  transition:transform var(--mi-slow),box-shadow var(--mi-slow),
             border-color var(--mi-slow);
}
.trade:hover,.plan:hover,.card:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(8,12,20,.05),0 22px 48px -26px rgba(8,12,20,.35);
}
.stat:hover:hover{transform:translateY(-3px)}

/* ---- images: a slow push in, clipped by their frame ---- */
.trade__art,.who__shot,figure.who__shot{overflow:hidden}
.trade__art img,.who__shot img,.trade img{
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.trade:hover .trade__art img,.trade:hover img,.who__shot:hover img{transform:scale(1.045)}

/* ---- the accent glow, held for the primary action only ---- */
@keyframes mi-pulse{
  0%,100%{box-shadow:0 1px 2px rgba(196,43,0,.3),0 10px 26px -10px rgba(255,77,13,.55)}
  50%    {box-shadow:0 1px 2px rgba(196,43,0,.3),0 14px 34px -10px rgba(255,77,13,.78)}
}
.hero__ctas .btn--solid{animation:mi-pulse 3.6s ease-in-out infinite}
.hero__ctas .btn--solid:hover{animation-play-state:paused}

/* ---- icons and marks nudge with their row ---- */
.navmenu__list a .navmenu__ico,.feat__dot,.plan__tick,.mx__i{
  transition:transform var(--mi-fast),background var(--mi-fast),color var(--mi-fast);
}
.navmenu__list a:hover .navmenu__ico{transform:translateX(2px)}
.trade:hover .trust__ico,.trade:hover svg{transition:transform var(--mi-fast)}

/* ---- focus is never removed, only restyled ---- */
.btn:focus-visible,.navmenu__btn:focus-visible,.faq__q:focus-visible,
.trade:focus-visible,a:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  .btn,.trade,.plan,.stat,.card,.kpi,.feat__i,.beat,
  .trade__art img,.who__shot img{transition:none !important}
  .btn:hover,.trade:hover,.plan:hover,.card:hover,.stat:hover:hover{transform:none}
  .hero__ctas .btn--solid{animation:none}
  .trade:hover .trade__art img,.trade:hover img,.who__shot:hover img{transform:none}
}

/* ============================================================
   SPEED TO LEAD — the featured gradient card
   The whole block sits on one warm panel now, so it reads as the
   feature of the page rather than another white run. The timed cards
   invert to glass on top of it.
   ============================================================ */
/* a faint grain so the large flat area does not band */

/* 4.56:1 on the card's lightest stop; #FFD9BC measured 3.92 */

/* timed cards become glass on the panel */



/* ============================================================
   TYPE SYSTEM — one authoritative pass
   An audit of the rendered page found 106 distinct text styles, 38
   font sizes and 10 weights, including thirteen sizes between 12 and
   17px. Sizes that close apart are not read as decisions.

   This block is deliberately last in the file. Four earlier blocks
   redefine .h1/.h2/.h3 against each other (lines 137, 1459, 1527 and
   1609), so the scale is set here once and wins on source order rather
   than by unpicking layers that other rules still depend on.
   ============================================================ */
:root{
  --t-display:clamp(44px,6.2vw,92px);
  --t-h2:clamp(34px,4.8vw,64px);
  --t-h3:clamp(23px,2.5vw,32px);
  --t-h4:clamp(18px,1.6vw,21px);   /* card and panel titles */
  --t-lede:clamp(17px,1.45vw,19px);
  --t-body:17px;
  --t-sm:15px;
  --t-xs:13px;
  --t-label:11px;

  /* four weights. 450 / 550 / 650 / 750 / 850 were all in use. */
  --w-body:400;
  --w-med:600;
  --w-strong:700;
  --w-display:800;
}

/* ---- headings: one definition, and their own leading ----
   body sets line-height:1.65, and .h3 did not override it, so a 30px
   heading was being set on body leading. */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--font-display);
  text-wrap:balance;
}
.h1{font-size:var(--t-display);line-height:1.0;letter-spacing:-.042em;font-weight:var(--w-display)}
.h2{font-size:var(--t-h2);line-height:1.05;letter-spacing:-.036em;font-weight:var(--w-display)}
.h3{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.026em;font-weight:var(--w-display)}

/* card and panel titles share one size and one weight */
.beat__t,.trade__n,.route__t,.plan__n,.pane__t,.card__t,.closer__t,
.d30__h,.who__q,.foot__h{
  font-size:var(--t-h4);line-height:1.2;letter-spacing:-.02em;
  font-weight:var(--w-med);
}

/* ---- FAQ: a question list, not display type ----
   It was Switzer at clamp(19px,2vw,27px) and weight 750. */
.faq__q{
  font-family:var(--font-body);
  font-size:var(--t-h4);
  font-weight:var(--w-med);
  letter-spacing:-.016em;
  line-height:1.35;
  padding-block:clamp(18px,1.8vw,24px);
}
.faq__a p{font-size:var(--t-body);line-height:1.6}
.faq__aside .lede{font-size:var(--t-lede)}

/* ---- collapse the 12–17px band to three steps ---- */
.lede{font-size:var(--t-lede);line-height:1.6}
.hero__sub{font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.beat__b,.player__title,.feat__t,.tab__t,.trade__line,.stat__l,.port__note{
  font-size:var(--t-body);
}
.feat__d,.small,.card__t,.script__x,.stat__note,.calc__v,
.trade__cta,.calc__trade,.rec__n,.mx__pill{
  font-size:var(--t-sm);
}
.player__sub,.calc__note,.pane__s,.rec__note,.trades__note,.hero__note,

/* ---- weights: 400 / 600 / 700 / 800, nothing between ---- */
.btn,.feat__t,.trade__line,.rec__n,.trade__cta{font-weight:var(--w-med)}
.stat__l,.tab__t,.player__title,.mx__pill{font-weight:var(--w-strong)}
.small,.feat__d,.beat__b,.script__x,.stat__note{font-weight:var(--w-body)}

/* ---- labels: mono, caps, one size ---- */
.kicker,.hero__eyebrow,.navmenu__label,.mx__rec,.routes__lab,.kpi__l,
.plan__badge,.ho__h{
  font-family:var(--font-mono);
  font-size:var(--t-label);
  font-weight:var(--w-med);
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---- the last near-duplicates ----
   Three display numbers rendered at 86.7 / 83.9 / 75.8 and five
   sub-heads sat between 32 and 43. Both bands collapse to two steps. */
:root{
  --t-stat:clamp(48px,7vw,92px);      /* the big money numbers */
  --t-stat-sm:clamp(34px,4vw,58px);   /* secondary figures */
}
.knife{font-size:var(--t-h3);line-height:1.18}
.mx__pill{font-size:var(--t-sm)}

/* ---- FAQ contact: one line, one size ----
   It stacked a 15px muted lead over a 17px semibold link, so a
   six-word sentence carried two sizes and two weights. */
.faq__contact{
  flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:7px;
  font-size:var(--t-sm);
}
.faq__contact span{font-size:inherit;color:var(--text-3)}
.faq__contact a{
  font-size:inherit;font-weight:var(--w-med);
  border-bottom-width:1.5px;padding-bottom:1px;
}
.faq__contact a svg{width:13px;height:13px}

/* ============================================================
   MATRIX — refinements
   ============================================================ */
/* the target icon beside each row label carried no information */
.mx__rowi{display:none}
.mx__t tbody th{padding-left:2px;gap:0}

/* lighter eyebrow over our column */
.mx__rec{color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.18em;font-size:9px}

/* row separation: one hairline per row, light grey, drawn on the
   competitor cards and a paler equivalent inside our panel */
.mx__t tbody td:not(.us),
.mx__t tbody tr:first-child td:not(.us),
.mx__t tbody tr + tr td:not(.us),
.mx__t tbody tr:last-child td:not(.us){box-shadow:none}
.mx__t tbody td:not(.us){
  border-left:1px solid rgba(16,21,28,.07) !important;
  border-right:1px solid rgba(16,21,28,.07) !important;
  border-top:1px solid rgba(16,21,28,.07) !important;
}
.mx__t tbody tr:last-child td:not(.us){
  border-bottom:1px solid rgba(16,21,28,.07) !important;
}
.mx__t tbody tr + tr td.us{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.mx__t tbody tr + tr th{box-shadow:none}

/* breathing room under the cards inside the container */
#pricing .mx{padding-bottom:clamp(18px,2.2vw,28px)}
.mx .tblscroll{padding-bottom:2px}
.mx__legend{margin-top:clamp(16px,1.8vw,22px);padding-top:0}

/* ---- integration grid: glyph marks get a label ---- */
.lgrid__i--mark{
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.lgrid__i--mark img{width:24px;height:24px;max-height:24px;flex:none}
.lgrid__i--mark span{
  font-size:var(--t-sm);font-weight:var(--w-med);letter-spacing:-.014em;
  color:var(--text-2);white-space:nowrap;
}

/* the featured card is dark, but `.plan li svg{stroke:var(--deep)}`
   was still painting its ticks teal, which reads as grey on that ground */
.plan--f .plan__tick{background:rgba(255,255,255,.18)}
.plan--f .plan__tick svg{stroke:#fff !important;color:#fff}
.plan--f .plan__blurb{color:rgba(255,255,255,.72)}
.plan--f ul{color:rgba(255,255,255,.92)}


/* ---- visuals for the two promoted beats ---- */
.vz-react{display:flex;flex-direction:column;gap:9px;width:100%}
.vz-react__r{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--line);
  font-size:var(--t-xs);color:var(--text-2);
}
.vz-react__r i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line-2)}
.vz-react__r--warm i{background:var(--orange)}
.vz-react__r--won{background:var(--live-bg);border-color:rgba(28,124,153,.24);color:#0B5E70}
.vz-react__r--won i{background:var(--live)}

.vz-esc{display:flex;flex-direction:column;gap:10px;width:100%}
.vz-esc__q{
  padding:11px 13px;border-radius:9px;background:var(--bg-2);
  border:1px solid var(--line);font-size:var(--t-xs);color:var(--text-2);
}
.vz-esc__b{
  display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:9px;
  background:rgba(255,106,0,.08);border:1px solid rgba(255,106,0,.26);
}
.vz-esc__b span{
  font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-tx);
}
.vz-esc__b b{font-size:var(--t-xs);color:var(--text);font-weight:700}
.vz-esc__n{font-size:11px;color:var(--text-3)}

/* ============================================================
   SPEED TO LEAD — one statistic, centred
   Rebuilt. The heading said the same thing as the closing line, and a
   two-column grid declared inline on the markup was fighting the CSS,
   which is what pushed the number off centre. Four elements now:
   label, the number, what it means, the line it earns.
   ============================================================ */



/* the closing line sits below a rule, so it reads as the conclusion
   the number leads to rather than another caption */


/* ============================================================
   ONBOARDING STEPS — what we do, in order
   Replaces three configuration cards. The numbering is real here: it
   is a sequence with a fixed order, not decoration.
   ============================================================ */
#pricing .steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:clamp(16px,1.8vw,22px);overflow:hidden;
  text-align:left;
}
#pricing .step{
  background:var(--surface);
  display:flex;gap:clamp(16px,1.8vw,24px);
  padding:clamp(26px,3vw,40px);
  transition:background .3s var(--ease-out);
}
#pricing .step:hover{background:var(--bg-2)}
.step__n{
  flex:none;font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,3vw,42px);line-height:1;letter-spacing:-.04em;
  color:var(--orange);opacity:.32;
}
.step__b{min-width:0}
.step__t{
  margin:0 0 8px;font-size:var(--t-h4);line-height:1.22;
  letter-spacing:-.02em;font-weight:var(--w-med);color:var(--text);
}
.step__d{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--text-2);max-width:44ch}

@media (max-width:820px){
  #pricing .steps{grid-template-columns:1fr}
  #pricing .step{padding:22px 20px}
  .step__n{font-size:26px}
}

/* ============================================================
   MOBILE NAVIGATION
   Below 1200px the desktop links are hidden. Nothing replaced them, so
   a phone had no way to reach any section.
   ============================================================ */
.nav__burger{
  display:none;position:relative;width:42px;height:42px;flex:none;
  border:1px solid var(--line-2);border-radius:11px;background:var(--surface);
  cursor:pointer;padding:0;
}
.nav__burger span{
  position:absolute;left:11px;right:11px;height:1.8px;border-radius:2px;
  background:var(--text);transition:transform .28s var(--ease-out),opacity .2s;
}
.nav__burger span:nth-child(1){top:14px}
.nav__burger span:nth-child(2){top:20px}
.nav__burger span:nth-child(3){top:26px}
.nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.navm{
  position:absolute;left:0;right:0;top:100%;
  max-height:calc(100svh - 100%);overflow-y:auto;
  padding:14px clamp(16px,5vw,28px) 22px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 24px 50px -28px rgba(8,12,20,.4);
}
.navm[hidden]{display:none !important}
body.navm-open{overflow:hidden}

.navm__links{display:flex;flex-direction:column}
.navm__a{
  padding:14px 2px;font-size:19px;font-weight:var(--w-med);
  letter-spacing:-.02em;color:var(--text);
  border-bottom:1px solid var(--hair);
}
.navm__sub{display:flex;flex-wrap:wrap;gap:7px;padding:12px 2px 16px;
  border-bottom:1px solid var(--hair)}
.navm__s{
  padding:7px 13px;border-radius:99px;background:var(--bg-2);
  border:1px solid var(--line);font-size:14px;font-weight:var(--w-med);
  color:var(--text-2);
}
.navm__foot{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.navm__foot .btn{width:100%;justify-content:center}

@media (max-width:1200px){
  .nav__burger{display:block}
  .nav__btn{padding:10px 17px;font-size:15px}
}
@media (min-width:1201px){
  .navm{display:none !important}
}

/* ---- the nav itself at small sizes ---- */
@media (max-width:620px){
  .nav__in{gap:10px}
  .logo span{font-size:16px}
  .logo svg{width:26px;height:26px}
  .nav__btn{padding:9px 14px;font-size:14px}
  .nav__burger{width:38px;height:38px}
  .nav__burger span:nth-child(1){top:12px}
  .nav__burger span:nth-child(2){top:18px}
  .nav__burger span:nth-child(3){top:24px}
  .nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:380px){
  .nav__btn{padding:9px 12px;font-size:13.5px}
  .logo span{font-size:15px}
}

/* ---- vertical rhythm: 200px section padding is a lot of empty phone ---- */
@media (max-width:820px){
  :root{--section:clamp(64px,11vw,96px)}
}
@media (max-width:520px){
  :root{--section:56px}
}

/* ---- the chat launcher was sitting on top of content ---- */
@media (max-width:820px){
  .chat__launch{width:52px;height:52px;right:14px;bottom:14px}
  .chat__launch svg{width:20px;height:20px}
}

/* ---- horizontally scrolling tab rows need an affordance ---- */
@media (max-width:900px){
  .tabs{
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{scroll-snap-align:start;flex:0 0 auto}
}

/* ============================================================
   TABLET — 640 to 1000px
   Every grid was dropping straight from desktop columns to one, so a
   768px tablet rendered a phone layout with a lot of empty margin.
   ============================================================ */
@media (min-width:640px) and (max-width:1000px){
  .beats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trades{grid-template-columns:repeat(2,minmax(0,1fr))}
  #cost .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pricing .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}

/* the third stat card would sit alone on a two-up row */
@media (min-width:640px) and (max-width:1000px){
  #cost .stats > *:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ============================================================
   DASHBOARD ON SMALL SCREENS
   A six-column desktop table and a full product UI were being squeezed
   into ~330px. The table scrolled sideways with its text truncated, so
   the columns that carry no argument are dropped instead.
   ============================================================ */
@media (max-width:900px){
  /* Caller, Outcome and Booked-for tell the story; trade, duration and
     value only fit by truncating the caller's name */
  .tbl th:nth-child(2),.tbl td:nth-child(2),
  .tbl th:nth-child(4),.tbl td:nth-child(4),
  .tbl th:nth-child(5),.tbl td:nth-child(5){display:none}
  .tbl{min-width:0;width:100%;table-layout:fixed}
  .tbl th,.tbl td{padding:11px 8px;font-size:13px}
  .tbl td:first-child{white-space:normal}
  #dash .tblscroll{overflow-x:visible}

  /* the ring is decoration; its legend carries the actual numbers */
  .donut{flex-direction:column;gap:14px;height:auto}
  .donut svg{width:120px;height:120px;flex:none}
  .donut__k{width:100%}

  /* the browser chrome is set dressing at this size */
  .browser__bar .url{font-size:11px}
  .browser__bar .avatar{display:none}
  #dash .app{border-radius:0}
}
@media (max-width:560px){
  /* two stacked panels rather than a cramped two-up */
  #dash .panels{grid-template-columns:1fr}
  #dash .kpi__n{font-size:12px}
  .audit{font-size:11px}
}

/* the [hidden] attribute loses to the .btn display rule, so it needs
   saying explicitly — the same collision the chat panel hit earlier */
.btn[hidden]{display:none !important}

/* ============================================================
   DASHBOARD RAIL — restored
   These were destroyed by my own cleanup: removing the speed section's
   .rail rules used the pattern ^\.rail[^_\s], and "-" is neither an
   underscore nor whitespace, so .rail-nav matched too. The sidebar lost
   its flex column, its dark ground and its item styling, and rendered
   as one run of text: "OverviewCallsLeadsAppointmentsTranscripts".
   ============================================================ */
.rail-nav{
  background:#1D1D1F;border-right:1px solid var(--line);padding:20px 14px;
  min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.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(--signal-br);
  flex:0 0 auto;
}
.rail-nav span{
  display:block;padding:10px 13px;border-radius:7px;
  color:rgba(255,255,255,.55);font-size:15px;font-weight:400;
  position:relative;z-index:1;
}
.rail-nav span.on{
  background:rgba(255,255,255,.09);color:#fff;font-weight:600;
  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:600;
  position:relative;z-index:1;
}

/* ============================================================
   CUSTOM INTEGRATION — the "my CRM isn't on that list" answer
   Placed directly under the logo grid, where that thought occurs.
   ============================================================ */
.lcustom{
  display:flex;align-items:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,30px);
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px);
  border:1px solid var(--line);border-radius:clamp(14px,1.6vw,20px);
  background:var(--surface);
}
.lcustom__b{flex:1 1 320px;min-width:0}
.lcustom__badge{
  display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:99px;
  background:var(--live-bg);color:var(--teal-tx);
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.lcustom__t{
  margin:0 0 7px;font-size:var(--t-h4);line-height:1.25;
  letter-spacing:-.02em;font-weight:var(--w-med);color:var(--text);
}
.lcustom__d{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--text-2);max-width:56ch}
.lcustom .btn{flex:none}
@media (max-width:620px){
  .lcustom{padding:20px;gap:16px}
  .lcustom .btn{width:100%;justify-content:center}
}

/* ---- custom-integration card: the matrix ramp, so the page has one
     warm gradient rather than two that nearly match ---- */
.lcustom{
  position:relative;isolation:isolate;overflow:hidden;
  border-color:transparent;color:#fff;
  background:linear-gradient(104deg,#C2410C 0%,#A83308 46%,#8F1D0A 100%);
}
.lcustom::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 120% at 4% 0%,   rgba(255,138,43,.34), transparent 62%),
    radial-gradient(60% 110% at 96% 100%,rgba(110,19,5,.45),   transparent 64%);
}
.lcustom__badge{
  background:rgba(255,255,255,.17);color:#fff;
  border:1px solid rgba(255,255,255,.24);
}
.lcustom__t{color:#fff}
.lcustom__d{color:#FFEDE3}
/* white button on the warm ground, matching the other dark bands */
.lcustom .btn--solid{
  background:#fff;color:#8F1D0A;border-color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 26px -12px rgba(0,0,0,.45);
}
.lcustom .btn--solid:hover{background:#FFEDE3;border-color:#FFEDE3;filter:none}