@font-face{font-family:'Fellix';src:url('/assets/font-01.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Fellix';src:url('/assets/font-02.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fellix';src:url('/assets/font-03.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Fellix';src:url('/assets/font-04.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fellix';src:url('/assets/font-05.woff2') format('woff2');font-weight:600;font-display:swap}
:root{
  --black:#070605;
  --ink:#0d0b09;
  --ink-2:#12100c;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --white:#f7f5f1;
  --dim:#8b8579;
  --dim-2:#7d7669;
  --orange:#EE5721;
  --volt:#0B8A40;
  --volt-dim:rgba(11,138,64,.14);
  /* type scale — 1.25 ratio */
  --t-xs:16px; --t-sm:16px; --t-base:16px; --t-md:17px; --t-lg:20px;
  --t-xl:clamp(34px,4.6vw,60px);
  --t-2xl:clamp(42px,5.9vw,80px);
  /* radii */
  --r-card:16px; --r-lg:24px; --r-pill:100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--black);color:var(--white);font-family:'Fellix',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
::selection{background:#E3F009;color:#141412}::-moz-selection{background:#E3F009;color:#141412}
a{color:inherit;text-decoration:none}
section{position:relative;padding:clamp(48px,4.8vw,68px) 32px;z-index:2}
section[id]{scroll-margin-top:88px}
.wrap{max-width:1160px;margin:0 auto}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--dim-2);margin-bottom:22px}
h2{font-size:var(--t-xl);font-weight:400;line-height:1.08;letter-spacing:-.022em;max-width:860px}
h2 .volt{color:var(--volt)}
.sub{font-size:var(--t-md);color:var(--dim);max-width:620px;margin-top:18px}
html.light .sub{color:#33302b}
.hero-pill{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;letter-spacing:.04em;color:#33302b;background:#fff;border:1px solid var(--line-2);border-radius:100px;padding:9px 18px;margin-bottom:30px;box-shadow:0 1px 2px rgba(20,18,22,.05)}
.hero-pill b{color:#1a1614;font-weight:700}
.hero-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0}
.sub em{font-style:normal;color:var(--white)}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--volt);outline-offset:4px;border-radius:4px}.sub em{transition:text-shadow .4s,color .4s}.sub em:hover{text-shadow:0 0 24px rgba(238,120,60,.5)}
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
@media(hover:hover){.nav-links a:hover::after{transform:scaleX(1)}}
.res .delta{transition:text-shadow .35s}
.res:hover .delta{text-shadow:0 0 32px rgba(238,86,34,.35)}
.link-dim{position:relative}
.link-dim::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.link-dim:hover::after{transform:scaleX(1)}
.btn:focus-visible,.nav-cta:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(238,86,34,.3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:16px 36px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,border-color .25s}
.btn-orange{background:linear-gradient(180deg,#f26840,var(--orange));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(238,86,34,.22);position:relative}
.btn-orange:active{transform:scale(.98)!important}
.btn-orange:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px rgba(238,86,34,.28)}
.btn-ghost{border:1px solid var(--line-2);color:var(--white)}
.btn-ghost:hover{border-color:var(--dim);background:rgba(255,255,255,.03)}
.link-dim{font-size:var(--t-sm);color:var(--dim);transition:color .25s}
.link-dim:hover{color:var(--white)}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);max-width:1160px;margin:0 auto}

/* ---------- #nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 48px;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:transparent;border-bottom:1px solid transparent;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .35s,border-color .35s}
#nav.scrolled{background:rgba(7,6,5,.9);border-bottom-color:var(--line)}
.nav-logo img{height:24px;display:block;filter:brightness(0) invert(1);opacity:.95}
.nav-logo{justify-self:start}
.nav-links{display:flex;gap:40px;font-size:16px;color:var(--dim);justify-self:center}
.nav-links a{transition:color .25s;border-bottom:1px solid transparent;padding-bottom:2px}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white)}
.nav-cta{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#f26840,var(--orange));border-radius:var(--r-pill);padding:12px 24px;position:relative;transition:box-shadow .25s,transform .2s}
.nav-cta:hover{box-shadow:0 6px 18px rgba(238,86,34,.3);transform:translateY(-1px)}
.nav-cta:active{transform:scale(.96)}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 18px rgba(238,86,34,.25)}50%{box-shadow:0 0 34px rgba(238,86,34,.5)}}

/* ---------- hero ---------- */
.hero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:150px 32px 40px;overflow:hidden;position:relative;z-index:2}
.hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(1100px 700px at 78% 90%, rgba(238,86,34,.20), transparent 55%),
  radial-gradient(650px 460px at 85% 100%, rgba(255,140,60,.14), transparent 60%),
  radial-gradient(900px 600px at 12% -12%, rgba(60,40,20,.28), transparent 55%),
  radial-gradient(1400px 900px at 42% 50%, rgba(16,12,8,.55), rgba(7,6,5,.2) 75%)}
@keyframes heroFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.025) translateY(-10px)}}
@keyframes drift{0%,100%{transform:rotate(-14deg) translateY(0)}50%{transform:rotate(-13.5deg) translateY(-14px)}}
.amber{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(620px 420px at 72% 62%,rgba(238,86,34,.17),transparent 62%);animation:amberDrift 15s ease-in-out infinite;will-change:transform}
@keyframes amberDrift{0%,100%{transform:translate(0,0)}33%{transform:translate(-46px,22px)}66%{transform:translate(34px,-26px)}}
.hero h1.kinetic{opacity:1;animation:none;transform:none}
.kinetic .kline{display:block;overflow:hidden;padding-bottom:.04em}
.kinetic .kline>span{display:inline-block;transform:translateY(112%);opacity:0;animation:klineUp .95s cubic-bezier(.2,.75,.2,1) forwards}
.kinetic .kline:nth-child(1)>span{animation-delay:.35s}
.kinetic .kline:nth-child(2)>span{animation-delay:.52s}
.kinetic .kline:nth-child(3)>span{animation-delay:.69s}
@keyframes klineUp{to{transform:none;opacity:1}}
.kinetic .hl{color:var(--white);animation:klineUp .95s cubic-bezier(.2,.75,.2,1) .69s forwards, heroGlow 3.4s ease-in-out 1.9s 2}
@keyframes heroGlow{0%,100%{text-shadow:none}50%{text-shadow:0 0 34px rgba(238,120,60,.5)}}
.hero-inner{position:relative;z-index:2;max-width:1060px;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{opacity:0;animation:rise 1.1s .2s cubic-bezier(.2,.7,.2,1) forwards;color:#463f38;font-size:16px;letter-spacing:.24em}
.hero .eyebrow b{color:var(--white);font-weight:400}
h1{font-size:clamp(42px,5.9vw,80px);font-weight:400;line-height:1.05;letter-spacing:-.025em;max-width:1100px;opacity:0;animation:rise 1.1s .45s cubic-bezier(.2,.7,.2,1) forwards}
.hero-sub{font-size:clamp(16px,1.4vw,18px);line-height:1.65;color:var(--dim);max-width:960px;margin-top:32px;opacity:0;animation:rise 1.1s .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-sub em{font-style:normal;color:var(--white)}
.hero-founder{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-size:15px;line-height:1.35;color:#332e28;letter-spacing:.01em;text-align:left;opacity:0;animation:rise 1.1s 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-founder img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 2px 10px rgba(20,18,22,.16);flex-shrink:0}
.hero-founder b{color:#1a1614;font-weight:700}
.hero-founder{transition:opacity .25s}
.hero-founder:hover{opacity:.72}
.hero-founder:hover b{text-decoration:underline}
@media(max-width:600px){.hero-founder{font-size:13.5px;gap:10px}}
.cta-row{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:48px;opacity:0;animation:rise 1.1s .95s cubic-bezier(.2,.7,.2,1) forwards}
.proof-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0;margin-top:72px;font-size:16px;letter-spacing:.04em;color:#332e28;opacity:0;animation:rise 1.1s 1.25s cubic-bezier(.2,.7,.2,1) forwards}
.proof-row span{padding:0 28px;border-right:1px solid var(--line-2)}
.proof-row span:last-child{border-right:none}
.proof-row b{color:var(--volt);font-weight:400}
.see-results{margin-top:40px;font-size:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2);opacity:0;animation:rise 1.1s 1.45s cubic-bezier(.2,.7,.2,1) forwards}
.proof-row span b{animation:none;text-shadow:none}
.proof-row span:nth-child(1) b{animation-delay:1.8s}
.proof-row span:nth-child(2) b{animation-delay:3.3s}
.proof-row span:nth-child(3) b{animation-delay:4.8s}
.proof-row span:nth-child(4) b{animation-delay:6.3s}
@keyframes chipPulse{0%,84%,100%{text-shadow:none}10%{text-shadow:0 0 16px rgba(238,86,34,.65)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- brands band ---------- */
.brands-strip{padding:16px 0 40px}
a.ptile{color:inherit;text-decoration:none}
.pmarquee:hover .pmarquee-track{animation-play-state:paused}
.pmarquee{overflow:hidden;margin:8px 0;contain:layout paint;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pmarquee-track{display:flex;gap:20px;width:max-content;animation:pscroll 60s linear infinite;will-change:transform}
.pmarquee.off .pmarquee-track,.tape-carousel.off .tapes{animation-play-state:paused}
.pmarquee:hover .pmarquee-track{animation-play-state:paused}
@keyframes pscroll{to{transform:translateX(-50%)}}
.ptile{flex-shrink:0;width:190px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ptile:hover{transform:translateY(-6px)}
.ptile:hover .pimg{box-shadow:0 2px 6px rgba(20,18,22,.08),0 18px 36px rgba(20,18,22,.12)}
.ptile .pimg{width:190px;height:190px;border-radius:var(--r-card);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;border:1px solid var(--line);box-shadow:0 1px 3px rgba(20,18,22,.05),0 10px 26px rgba(20,18,22,.05)}
.ptile .pimg img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:normal}
.ptile span{font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
@media(max-width:600px){.ptile,.ptile .pimg{width:150px}.ptile .pimg{height:150px}}
.brand-cap{margin-top:24px;font-size:16px;letter-spacing:.05em;color:var(--dim)}
.dash-panel.in .dash-bars rect{transform:scaleY(1)}
.dash-panel.in .dash-line{transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1) .2s;stroke-dashoffset:0}
.dash-panel.in .dash-area{transition:opacity 1s ease 1.2s;opacity:1}
.dash-panel.in .dash-dot{transition:opacity .4s ease 1.6s;opacity:1;animation:dotPulse 2.4s ease-in-out 2s infinite}
@keyframes dotPulse{0%,100%{r:4}50%{r:6}}
@media(prefers-reduced-motion:reduce){.dash-bars rect,.dash-line,.dash-area,.dash-dot{transition:none!important;transform:none!important;stroke-dashoffset:0!important;opacity:1!important;animation:none!important}}
.tt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:56px;text-align:left;width:100%;box-shadow:0 24px 60px rgba(20,18,22,.10)}
.tt-stat{background:var(--black);padding:40px 34px}
.tt-stat .ttn{font-size:clamp(34px,3.6vw,52px);font-weight:400;letter-spacing:-.02em;color:var(--volt);line-height:1}
.tt-stat .ttl{font-size:16px;color:var(--dim);margin-top:14px;line-height:1.5}
.tt-stat .ttl span{display:block;color:var(--dim-2);font-size:16px;letter-spacing:.04em;margin-top:3px}
.tt-case{margin-top:34px;font-size:16px;color:var(--dim)}
.tt-case b{color:var(--white);font-weight:400}
.tt-case a{color:var(--volt);border-bottom:1px solid rgba(238,86,34,.3)}
@media(max-width:600px){.tt-stats{grid-template-columns:1fr}}
.cmp-logo{height:26px;width:auto;display:block}
.cmp-col .yes{color:var(--volt);font-size:16px;flex-shrink:0}
.cmp-col .no{color:var(--dim-2);font-size:16px;flex-shrink:0}
@media(max-width:820px){
  .cmp{border:none}
  .cmp-row{grid-template-columns:1fr;border-top:none;border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:12px}
  .cmp-head{display:none}
  .cmp-feat{background:transparent;font-size:16px;color:var(--dim-2);text-transform:uppercase;letter-spacing:.1em;padding-bottom:6px}
  .cmp-col{border-left:none;padding:10px 22px}
  .cmp-col::before{content:attr(data-lbl);font-size:16px;color:var(--dim-2);width:130px;flex-shrink:0}
  .cmp-col.us{border-radius:0}
}
/* ---------- pain mirror ---------- */
/* problem section: numbered, named leaks. width:100%+min-width:0 because .wrap.center is column-flex */
.leaks{list-style:none;width:100%;min-width:0;max-width:900px;margin:56px 0 0;padding:0;text-align:left}
.leak{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;padding:26px 2px;border-bottom:1px solid var(--line)}
.lk-n{font-size:12px;letter-spacing:.16em;color:var(--orange-ink);padding-top:6px;font-weight:700}
.leak h3{font-size:var(--t-lg);font-weight:400;color:#1A1614;margin:0 0 10px;line-height:1.25}
.leak p{font-size:var(--t-base);line-height:1.55;color:#33302b;margin:0}
.leak p em{font-style:normal;color:#201c19}
.leak:last-child{border-bottom:none}
@media(max-width:640px){.leak{gap:16px;padding:22px 0}}
.philo .big .volt{color:var(--volt)}
html.light .mega .num .from{color:var(--dim-2)}
.mega .what{font-size:var(--t-sm);color:var(--dim);margin-top:8px;max-width:560px;margin-left:auto;margin-right:auto;position:relative;z-index:2}
.mega .what em{font-style:normal;color:var(--white)}

/* ---------- tapes ---------- */
.tapes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;text-align:left}
.tape{border:1px solid var(--line);border-radius:var(--r-card);background:#141210;aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:22px;transition:border-color .3s,transform .3s}
.tape:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tape::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.9) 100%)}
.tape .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(7,6,5,.7);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:16px;transition:background .25s,color .25s}
.tape:hover .play{background:var(--orange);border-color:var(--orange)}
.tape .meta{position:relative;z-index:1}
.tape .tnm{font-weight:700;font-size:17px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.tape .tres{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.7);margin-top:5px}
.tool-band .btn{justify-self:end}
@media(max-width:900px){
  .final-grid{grid-template-columns:1fr}
  .final-book img{max-width:300px}
.tool-band{grid-template-columns:1fr}.tool-band .btn{justify-self:start}.tapes{grid-template-columns:1fr}}

/* ---------- results ---------- */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:56px;text-align:left;box-shadow:0 24px 60px rgba(20,18,22,.10)}
.res{background:var(--black);padding:44px 38px;transition:box-shadow .3s,background .3s}
.res:hover{background:var(--ink);box-shadow:inset 0 0 0 1px var(--volt-dim)}
.res .delta{font-size:clamp(38px,3.6vw,54px);font-weight:400;letter-spacing:-.02em;color:var(--volt);line-height:1}
.res .brand{font-size:var(--t-base);margin-top:16px}
.res .what{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);margin-top:5px}
@keyframes ringspin{to{transform:rotate(360deg)}}
.ring.volt .rn{color:var(--volt)}
html.light .ring svg circle{stroke:rgba(23,19,14,.3)}
html.light .ring.volt svg circle{stroke:rgba(160,150,20,.45)}
html.light .stamp img{filter:brightness(0);opacity:.88}
@media(max-width:700px){.rings{flex-direction:column;align-items:center;gap:30px}}
/* ---------- halo ledger ---------- */
/* how the flywheel works — 4 steps */
.flywheel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;width:100%;text-align:left}
.fw-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px;box-shadow:0 1px 3px rgba(20,18,22,.05),0 10px 26px rgba(20,18,22,.05);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.fw-card:hover{transform:translateY(-5px);box-shadow:0 2px 6px rgba(20,18,22,.08),0 18px 36px rgba(20,18,22,.1)}
.fw-num{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:16px}
.fw-card h3{font-size:var(--t-lg);font-weight:400;line-height:1.2;margin-bottom:12px}
.fw-card p{font-size:var(--t-sm);color:var(--dim);line-height:1.55}
@media(max-width:900px){.flywheel{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flywheel{grid-template-columns:1fr}}
.hiw{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px;width:100%;text-align:left}
.hiw .fw-card{padding:26px 26px}
@media(max-width:820px){.hiw{grid-template-columns:1fr}}
.seq{list-style:none;margin:36px auto 0;padding:0;max-width:900px;text-align:left}
.seq-step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:0 0 30px;position:relative}
.seq-step:last-child{padding-bottom:0}
.seq-step::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:1px;background:rgba(0,0,0,.14)}
.seq-step:last-child::before{display:none}
.seq-n{width:39px;height:39px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.16);color:var(--orange-ink);font-size:13px;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.seq-step h3{font-size:var(--t-lg);font-weight:400;color:#1A1614;margin:5px 0 8px;line-height:1.3}
.seq-step p{font-size:var(--t-base);line-height:1.55;color:#33302b;margin:0}
.seq-step em{font-style:normal;color:#201c19}
@media(max-width:600px){.seq-step{gap:16px}.seq-step::before{left:15px}.seq-n{width:31px;height:31px;font-size:12px}.seq-step::before{top:32px}}
/* the offer — two channel cards */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px;width:100%;text-align:left}
.offer-col{border-radius:var(--r-lg);padding:clamp(30px,3.4vw,44px)}
.offer-col.demand{background:radial-gradient(130% 95% at 78% 0%,rgba(238,86,34,.22),rgba(238,86,34,.05) 45%,transparent 72%),#0d0b0a;box-shadow:0 24px 60px rgba(20,18,22,.14)}
.offer-col.convert{background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,18,22,.08)}
.offer-lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.offer-col.demand .offer-lab{color:#f2915f}
.offer-col.convert .offer-lab{color:var(--orange)}
.offer-col h3{font-size:clamp(26px,3.2vw,34px);font-weight:400;letter-spacing:-.02em;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.ch-glyph{flex:0 0 auto;opacity:.9}
.offer-col.convert h3 .ch-glyph{color:var(--orange)}
.offer-col.demand h3{color:#fff}
.offer-list{list-style:none;display:flex;flex-direction:column;margin-top:12px}
.offer-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;font-size:var(--t-base);line-height:1.45;border-top:1px solid}
.offer-col.demand .offer-list li{color:rgba(255,255,255,.82);border-top-color:rgba(255,255,255,.1)}
.offer-col.convert .offer-list li{color:var(--dim);border-top-color:var(--line)}
.offer-list li::before{content:'\2713';flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.offer-col.demand .offer-list li::before{background:rgba(238,87,33,.22);color:#f9a882}
.offer-col.convert .offer-list li::before{background:rgba(238,87,33,.10);color:var(--orange)}
.onb{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:34px;width:100%;text-align:left}
.onb-col{background:#f7f7f5;border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px}
.onb-col.you{background:#fff;border-color:rgba(238,87,33,.28)}
.onb-h{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink);font-weight:700;margin-bottom:18px}
.onb-col.you .onb-h{color:#6b655c}
.onb-step{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.onb-step:first-of-type{border-top:none;padding-top:0}
.onb-w{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);font-weight:700;white-space:nowrap;padding-top:3px;min-width:88px}
.onb-w em{display:block;font-style:normal;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--orange-ink);margin-top:3px;font-size:11.5px}
.onb-step b{display:block;font-size:15.5px;font-weight:400;color:#1A1614;line-height:1.3}
.onb-step span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:#33302b}
.onb-note{margin-top:20px;font-size:13.5px;line-height:1.55;color:#5c574f}
.onb-note b{color:#1A1614;font-weight:700}
@media(max-width:860px){.onb{grid-template-columns:1fr}}
@media(max-width:520px){.onb-step{grid-template-columns:1fr;gap:4px}.onb-w{padding-top:0}}
.dlv{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;width:100%;text-align:left}
.dlv-i{background:#f7f7f5;border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px}
.dlv-i .dlv-k{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);font-weight:700;margin-bottom:9px}
.dlv-i b{display:block;font-size:16px;font-weight:400;color:#1A1614;line-height:1.3;margin-bottom:6px}
.dlv-i span{display:block;font-size:13.5px;line-height:1.5;color:#33302b}
@media(max-width:900px){.dlv{grid-template-columns:1fr 1fr}}
.dlv.three{grid-template-columns:repeat(3,1fr);max-width:1060px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.dlv.three{grid-template-columns:1fr}}
@media(max-width:520px){.dlv{grid-template-columns:1fr}}
.offer-note{margin:26px auto 0;max-width:940px;text-align:left;border-left:2px solid var(--orange);padding:16px 0 16px 24px;font-size:var(--t-md);color:var(--dim);line-height:1.6}
.offer-note em{font-style:normal;color:#201c19}
@media(max-width:820px){.offer-grid{grid-template-columns:1fr}}
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:44px;text-align:left;width:100%;max-width:1060px}
.ledger-col{background:var(--ink);padding:34px 30px;display:flex;flex-direction:column}
.ledger-col.lg-us{background:var(--black);box-shadow:inset 0 0 0 1px rgba(238,86,34,.25)}
.lg-tag{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2);margin-bottom:24px}
.lg-us .lg-tag{color:var(--volt)}
.lg-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--dim)}
.lg-row b{color:var(--white);font-weight:400;white-space:nowrap}
.lg-row.lg-total{border-bottom:0;padding-top:16px}
.lg-row.lg-total b{font-size:24px;font-weight:400}
.lg-us .lg-total b{color:var(--volt)}
.lg-verdict{margin-top:auto;padding-top:22px;font-size:var(--t-sm);color:var(--dim-2);font-style:italic}
.lg-us .lg-verdict{color:var(--white)}
html.light .ledger-col{background:#ffffff}
html.light .ledger-col.lg-us{background:#fbf9f5}
html.light .ledger-col:not(.lg-us) .lg-row{color:#1a1614}
html.light .ledger-col:not(.lg-us) .lg-tag{color:#1a1614}
@media(max-width:860px){.ledger{grid-template-columns:1fr}}
/* ---------- halo calculator ---------- */
.calc{width:100%;max-width:980px;margin-top:40px;padding:clamp(28px,3.6vw,44px);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--ink-2),var(--ink));text-align:left}
.calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.calc-field label{display:block;font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2)}
.calc-val{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.02em;margin:10px 0 18px;color:var(--white)}
.calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--line-2);border-radius:2px;outline:none}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--orange);border:2px solid var(--white);box-shadow:0 0 16px rgba(238,86,34,.5);cursor:pointer}
.calc input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--orange);border:2px solid var(--white);box-shadow:0 0 16px rgba(238,86,34,.5);cursor:pointer}
.calc-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:26px}
.calc-out{background:var(--black);padding:30px 26px}
.co-n.volt{color:var(--volt)}
.calc-note{font-size:16px;color:var(--dim-2);margin-top:26px;max-width:720px}
.calc-note em{font-style:normal;color:var(--dim)}
.calc .btn{margin-top:34px}
.calc-mode{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
.calc-mode button{font-family:inherit;font-size:var(--t-xs);letter-spacing:.05em;padding:10px 20px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--dim);cursor:pointer;transition:color .25s,border-color .25s,background .25s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.calc-mode button svg{flex-shrink:0;opacity:.85}
.calc-mode button:hover{color:var(--white)}
.calc-mode button.on{border-color:var(--orange);color:var(--white);background:rgba(238,86,34,.08)}
html.light .calc{background:linear-gradient(180deg,#ffffff,#fbf9f5)}
html.light .calc-out{background:#ffffff}
@media(max-width:760px){.calc-inputs{grid-template-columns:1fr;gap:32px}.calc-outs{grid-template-columns:1fr}.co-n{white-space:normal}}
/* ---------- guarantee ---------- */
.g-section{padding-block:clamp(60px,6.5vw,92px)}
.guarantee{max-width:980px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px);border-radius:var(--r-lg);background:
  radial-gradient(900px 400px at 50% 120%, rgba(238,86,34,.12), transparent 60%),
  linear-gradient(180deg, rgba(13,11,9,.82), rgba(13,11,9,.9)),
  url(/assets/img-01.webp) center/cover;
  border:1px solid rgba(238,86,34,.25);text-align:center}
.guarantee h2{font-size:clamp(30px,4.4vw,56px);line-height:1.05;letter-spacing:-.025em;max-width:100%}
.guarantee p{font-size:var(--t-base);color:var(--dim);max-width:660px;margin:26px auto 0}
.guarantee .btn{margin-top:28px}
.mech-points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;text-align:left;border-top:1px solid var(--line)}
.mech-point{padding:44px 36px 10px;border-right:1px solid var(--line)}
.mech-point:last-child{border-right:none}
.mech-point .n{font-size:var(--t-sm);color:var(--volt);letter-spacing:.2em;display:block;margin-bottom:20px}
.mech-point h3{font-size:var(--t-lg);font-weight:400;margin-bottom:12px}
.mech-point p{font-size:var(--t-sm);color:var(--dim)}

/* ---------- founder ---------- */
.founder-quote{max-width:820px;margin:80px auto 0;text-align:left;border-left:2px solid var(--orange);padding-left:40px}
.founder-quote p{font-size:18px;line-height:1.7;color:#4a443f;margin-bottom:22px}
.founder-quote p em{font-style:normal;color:var(--white)}
.founder-sig{font-size:16px;color:var(--dim);letter-spacing:.04em}
.fnd-lead{font-size:18px;line-height:1.7;color:#4a443f;margin-bottom:0}
.fnd-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.fnd-more>div{overflow:hidden}
.fnd-more.open{grid-template-rows:1fr}
.fnd-more>div>p:first-child{margin-top:22px}
.fnd-toggle{background:none;border:none;padding:0;margin-top:18px;font-family:inherit;font-size:15px;color:var(--orange-ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
.fnd-toggle:hover{text-decoration:underline}
.fnd-chev{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(238,87,33,.12);font-size:13px;line-height:1}
.founder-photo a{display:contents}
/* ============ iClosed-style booking card (ported from /grow) ============ */
.icl{margin:40px auto 0;width:100%;max-width:640px;background:#fff;border:1px solid rgba(20,18,22,.09);border-radius:20px;box-shadow:0 18px 50px rgba(20,18,22,.09);padding:26px 26px 14px;text-align:left;transition:max-width .6s ease}
.icl.booked{max-width:1000px}
.icl-steps{display:flex;align-items:center;justify-content:center;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(20,18,22,.09)}
.st{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#6b6259}
.st i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(20,18,22,.14);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:#6b6259;transition:all .3s ease}
.st.on{color:#201c19;font-weight:600}
.st.on i{background:linear-gradient(180deg,#f26840,#EE5721);border-color:transparent;color:#fff}
.st.done i{background:#3FB56E;border-color:transparent;color:#fff}
.st-line{width:44px;height:1.5px;background:rgba(20,18,22,.14)}
.icl-form{padding-top:6px}
.icl-form input,.icl-form select{width:100%;font-family:inherit;font-size:15.5px;height:50px;padding:0 15px;border:1px solid rgba(20,18,22,.14);border-radius:12px;background:#fff;color:#201c19;margin-top:12px;transition:border-color .15s ease,box-shadow .15s ease;appearance:none;-webkit-appearance:none}
.icl-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6259' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
.icl-form input::placeholder{color:#8a8178}
.icl-form input:hover,.icl-form select:hover{border-color:rgba(20,18,22,.26)}
.icl-form input:focus,.icl-form select:focus{outline:none;border-color:#EE5721;box-shadow:0 0 0 3.5px rgba(238,86,34,.13)}
.icl-form input.bad{border-color:#d64545;box-shadow:0 0 0 3.5px rgba(214,69,69,.10)}
.icl-err{margin-top:8px;font-size:13px;color:#d64545}
.icl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.icl-lab{display:block;margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b6259}
.icl-lab .req{color:#EE5721}
.icl-lab+input,.icl-lab+select{margin-top:8px}
.icl-unlock{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.icl-unlock>.icl-unlock-in{overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .45s ease .12s,transform .45s ease .12s}
.icl-unlock.open{grid-template-rows:1fr}
.icl-unlock.open>.icl-unlock-in{opacity:1;transform:none}
.icl-consent{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:12.5px;color:#6b6259;line-height:1.55;cursor:pointer}
.icl-consent input{appearance:auto;-webkit-appearance:checkbox;width:17px;height:17px;min-height:0;margin:2px 0 0;padding:0;border:none;box-shadow:none;border-radius:0;accent-color:#EE5721;cursor:pointer;flex:0 0 auto}
.icl-consent a{color:#6b6259}
.icl-go{width:100%;margin-top:18px;height:54px;border:none;cursor:pointer;font-family:inherit;border-radius:100px;background:linear-gradient(180deg,#f26840,#EE5721);color:#fff;font-size:17px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px rgba(238,86,34,.26);transition:transform .18s ease,box-shadow .18s ease,opacity .2s ease}
.icl-go:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 32px rgba(238,86,34,.34)}
.icl-go:disabled{background:#eee7df;color:#6b635a;box-shadow:none;cursor:not-allowed}
.qual-no{margin-top:18px;font-size:14.5px;color:#6b6259;border-left:2px solid #EE5721;padding-left:14px}
.icl-summary{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 0 4px;font-size:14.5px;color:#6b6259}
.icl-summary .avi{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#f26840,#EE5721);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}
.icl-summary b{color:#201c19}
.icl-summary a{color:#EE5721;text-decoration:none;font-weight:600;margin-left:4px}
.icl-cal{position:relative;margin-top:18px;border-top:1px solid rgba(20,18,22,.09);padding-top:16px;max-height:1600px;transition:max-height .7s ease}
.icl-cal.locked{max-height:300px;overflow:hidden}
.icl-cal iframe{width:100%!important;min-height:920px!important;opacity:1!important;visibility:visible!important;position:static!important;left:auto!important;pointer-events:auto!important;border:none;display:block!important;border-radius:12px;transition:filter .5s ease,opacity .5s ease}
.icl-cal.locked iframe{pointer-events:none;filter:grayscale(1);opacity:.30!important}
.cal-lock{position:absolute;inset:16px 0 0 0;z-index:2;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(253,251,249,.96) 78%);transition:opacity .4s ease}
.cal-lock span{font-size:14.5px;font-weight:600;color:#6b6259;background:#fff;border:1px solid rgba(20,18,22,.09);border-radius:100px;padding:10px 22px;box-shadow:0 8px 24px rgba(20,18,22,.08)}
.icl-cal:not(.locked) .cal-lock{opacity:0;pointer-events:none}
.cal-embed{margin:40px auto 0;max-width:1000px;background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(20,18,22,.10);padding:10px}
.cal-embed iframe{width:100%!important;min-height:920px!important;opacity:1!important;visibility:visible!important;position:static!important;left:auto!important;pointer-events:auto!important;border:none;display:block!important;border-radius:14px}
@media(max-width:900px){.cal-embed iframe{min-height:1000px!important}}
.founder-sig b{color:var(--white);font-weight:400}

/* ---------- process ---------- */
.process-scene{background:var(--black)}

/* ---------- fit ---------- */
.fit-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;text-align:left}
.fit-col{background:#f7f7f5;border:1px solid var(--line);border-radius:var(--r-card);padding:30px 30px}
.fit-col h3{font-size:var(--t-md);font-weight:400;margin-bottom:16px}
.fit-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:var(--t-base);color:var(--dim);line-height:1.45}
.fit-col.yes li::before{content:'+  ';color:var(--volt)}
.fit-col.no li::before{content:'\2212  ';color:var(--orange)}
.fit-col li em{font-style:normal;color:var(--white)}
.scarcity{margin-top:44px;font-size:16px;letter-spacing:.04em;color:var(--dim)}
.scarcity em{font-style:normal;color:var(--white)}
.tp-note{margin-top:36px;font-size:var(--t-sm);color:var(--dim-2)}
.tp-note a{color:var(--dim);border-bottom:1px solid var(--line-2)}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:56px auto 0;text-align:left;border-top:1px solid var(--line);width:100%}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;color:var(--white);font-family:'Fellix',sans-serif;font-size:var(--t-md);font-weight:400;text-align:left;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:24px}
.faq-q .pm{color:var(--dim-2);font-size:20px;font-weight:400;transition:transform .3s,color .3s;flex-shrink:0}
.faq-item.open .pm{transform:rotate(45deg);color:var(--orange)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>.faq-a-in{overflow:hidden}
.faq-a-in p{padding:0 0 30px;color:var(--dim);font-size:var(--t-base);max-width:700px}
.faq-a-in em{font-style:normal;color:var(--white)}

/* ---------- final ---------- */
@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(.4deg)}}
.reassure{margin-top:36px;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2)}

footer{border-top:1px solid var(--line);padding:52px 32px 60px;text-align:center;position:relative;z-index:2}
.foot-strip{font-size:var(--t-sm);letter-spacing:.06em;color:var(--dim-2)}
.foot-strip b{color:var(--dim);font-weight:400}
footer img{height:20px;filter:brightness(0) invert(1);opacity:.7;margin-bottom:22px}


/* ---------- responsive ---------- */
@media(max-width:900px){
  section{padding:72px 22px}
  .hero{padding:120px 24px 70px;min-height:auto}
  .mono{right:-55%;width:80%;height:70%;bottom:-10%;opacity:.7;box-shadow:none;animation:none}
  .mono-back{display:none}
  #nav{padding:0 16px;height:64px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.92);display:flex;justify-content:space-between}
  .nav-links{display:none}
  .nav-cta{padding:12px 20px}
  .tri,.mech-points,.pos,.fit-cols,.quotes{grid-template-columns:1fr}
  .mech-point{border-right:none;border-bottom:1px solid var(--line);padding:36px 8px}
  .tri,.mech-points,.pos,.results-grid,.steps,.fit-cols,.quotes,.price-rows,.faq-list{margin-top:40px}
  .founder-quote{margin-top:48px;padding-left:24px}
  .step{grid-template-columns:70px 1fr;grid-template-rows:auto auto;gap:8px 20px;padding:32px 4px}
  .step p{grid-column:2}
  .price-row{grid-template-columns:1fr;gap:6px}.prow-body{grid-template-columns:1fr;gap:6px}
  .price-row .pv{text-align:left;white-space:normal}
  .guarantee{margin-top:0}
  .link-dim{display:inline-block;padding:8px 0}
  footer{padding-bottom:96px}
}
@media(max-width:600px){
  [style*="margin-top:72px"]{margin-top:60px!important}

  h1{font-size:clamp(33px,9vw,46px);line-height:1.12}
  h1 .brk{display:inline}
  .hero .eyebrow{font-size:16px;line-height:1.6;max-width:340px;margin-bottom:20px;letter-spacing:.2em}
  .hero-sub{font-size:16px;margin-top:22px}
  .proof-row{font-size:16px;margin-top:52px;gap:10px 0}
  .proof-row span{padding:0 18px}
  .cta-row{margin-top:34px;flex-direction:column;gap:14px;width:100%}
  .cta-row .btn{width:100%}
  h2{font-size:clamp(27px,7vw,40px)}
  .sub{font-size:16px;margin-top:20px}
  .proof-row{flex-direction:column;align-items:center;gap:10px 0;margin-top:48px}
  .proof-row span{padding:0;border-right:none}
  .results-grid{grid-template-columns:1fr 1fr}
  .res{padding:28px 22px}
  .res .delta{font-size:clamp(30px,9vw,40px)}
  .guarantee .btn{width:100%}
  body::after{display:none}
  .scroll-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
  .amber,.kinetic .kline>span,.kinetic .hl,.proof-row span b,.hero-render{animation:none!important;opacity:1!important;transform:none!important;text-shadow:none!important}
  .hero .eyebrow,h1,.hero-sub,.cta-row,.proof-row,.scroll-hint{opacity:1!important;animation:none!important}
  html{scroll-behavior:auto}
}

.tape{border:none;cursor:pointer;font-family:inherit;text-align:left}
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(4,3,2,.9);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.vmodal.open{display:flex}
.vmodal-frame{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.vmodal-frame iframe{width:100%;height:100%;border:0;display:block}
.vmodal-close{position:absolute;top:24px;right:28px;background:none;border:none;color:#fff;font-size:40px;line-height:1;cursor:pointer;z-index:2}
.vmodal-close:hover{color:var(--orange)}

/* ============ THEME TOGGLE BUTTON ============ */
.nav-right{display:flex;align-items:center;gap:14px;justify-self:end}
html.light .theme-toggle .ico-sun{display:none}
html.light .theme-toggle .ico-moon{display:inline}
@media(max-width:640px){.theme-toggle{width:34px;height:34px;font-size:16px}}

/* ============ LIGHT THEME (html.light) ============ */
html.light{
  --black:#ffffff; --ink:#f6f4f0; --ink-2:#efeae2;
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.15);
  --white:#1a1614; --dim:#5c574f; --dim-2:#6b655c;
  --orange:#EE5721; --volt:#0B8A40; --volt-dim:rgba(11,138,64,.12);
}
html.light body{background:#ffffff;color:#1a1614}
html.light body::after{display:none}
html.light ::selection{background:#E3F009;color:#141412}
html.light #nav.scrolled{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
html.light .nav-logo img,html.light footer img{filter:brightness(0)!important;opacity:.9}
html.light .theme-toggle{color:#1a1614}
html.light .nav-cta{color:#fff!important}
html.light .hero::before{background:
  linear-gradient(180deg, rgba(255,255,255,0) 62%, #ffffff 100%),
  radial-gradient(1100px 700px at 80% 64%, rgba(238,86,34,.12), transparent 58%),
  radial-gradient(900px 600px at 10% -8%, rgba(238,86,34,.05), transparent 55%),
  linear-gradient(180deg,#ffffff,#faf7f3)}
html.light .hero-render,html.light .mono,html.light .mono-back,html.light .shelf-panel{display:none!important}
html.light .amber{background:radial-gradient(620px 420px at 74% 60%, rgba(238,86,34,.09), transparent 62%)}
html.light .kinetic .hl{color:#1a1614}
html.light .res{background:#ffffff}
html.light .tt-stat{background:#ffffff}
html.light .res .delta,html.light .mega .num,html.light .tt-stat .ttn,html.light .guarantee h2 .volt,html.light h2 .volt,html.light .brand-cap b,html.light .res-foot b,html.light .foot-strip b,html.light .cmp-col.us b,html.light .cmp-col .yes{color:var(--volt)}
html.light .tt-case b{color:var(--orange)}
html.light .proof-row b{color:var(--orange)}
html.light .res .delta,html.light .mega .num,html.light .tt-stat .ttn,html.light h2 .volt,html.light .guarantee h2 .volt{color:#EE5721}
html.light .guarantee{background:linear-gradient(180deg,#ffffff,#fbf9f5)!important;border-color:rgba(238,86,34,.3);box-shadow:0 20px 60px rgba(0,0,0,.06)}
html.light .hr{background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent)}
html.light .cal-embed,html.light #cal-inline{background:#ffffff;box-shadow:0 30px 80px rgba(0,0,0,.12)}
html.light .ptile .pimg{background:#fff}
html.light a:focus-visible,html.light button:focus-visible{outline-color:var(--orange)}
html.light .cmp{position:relative;box-shadow:0 24px 60px rgba(20,18,22,.10)}
html.light .cmp::before{content:"";position:absolute;top:0;bottom:0;left:26.42%;width:28.3%;background:radial-gradient(160% 55% at 70% 0%,rgba(238,86,34,.30),rgba(238,86,34,.07) 45%,transparent 72%),#0d0b0a;z-index:0}
html.light .cmp-row{position:relative;z-index:1}
html.light .cmp-col.us{background:transparent;box-shadow:none;color:rgba(255,255,255,.78)}
html.light .cmp-col.us b{color:#E3F009;font-weight:400}
html.light .cmp-col.us .yes{color:#E3F009}
html.light .cmp-head .cmp-col.us{color:#fff}
html.light .cmp-head .cmp-col.us .cmp-logo{filter:brightness(0) invert(1)}
html.light .cmp-feat,html.light .cmp-col:not(.us){color:#1a1614}
html.light .faq-item.open{border-color:var(--orange)}
html.light .echo-r::after{display:none!important}
html.light .mega::before{background:linear-gradient(180deg,transparent 66%,#ffffff 100%),radial-gradient(1000px 560px at 50% 120%,rgba(238,86,34,.10),transparent 60%)}
html.light .tt-stat .ttl span{color:var(--dim-2)}

.badge-eyebrow{text-align:center;margin-top:72px;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.partner-badges{display:flex;justify-content:center;align-items:stretch;gap:22px;flex-wrap:wrap;margin-top:30px}
.pbadge{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(20,18,22,.10),0 2px 8px rgba(20,18,22,.05);padding:22px 30px;display:flex;align-items:center;justify-content:center;min-width:190px;height:136px}
.pbadge img{max-height:86px;max-width:210px;width:auto;object-fit:contain;display:block}
a.pbadge{text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
a.pbadge[href]:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,18,22,.14)}
/* wide wordmark: cap by height so it matches the other marks' optical weight */
.hero .pbadge img[alt="AdLabs"]{max-height:26px}
@media(max-width:900px){.hero .pbadge img[alt="AdLabs"]{max-height:21px}}
/* hero credential chips: compact variant of the badge cards */
.hero .hv-label{margin-top:44px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.hero .partner-badges{gap:12px;margin-top:16px}
.hero .pbadge{min-width:0;height:72px;padding:12px 18px;border-radius:12px;box-shadow:0 4px 16px rgba(20,18,22,.08)}
.hero .pbadge img{max-height:48px;max-width:124px}
@media(max-width:900px){.hero .partner-badges{gap:8px;margin-top:14px}.hero .pbadge{flex:0 1 auto;height:56px;padding:8px 12px}.hero .pbadge img{max-height:38px;max-width:96px}}
.partner-badges.six .pbadge-tp img{max-height:36px}
@media(max-width:900px){.partner-badges{gap:16px;margin-top:48px}.pbadge{height:112px;min-width:0;flex:1 1 40%;padding:16px 20px}.pbadge img{max-height:66px;max-width:100%}}
.ul{background:linear-gradient(rgba(227,240,9,.6),rgba(227,240,9,.6)) no-repeat;background-size:100% .1em;background-position:0 100%;padding-bottom:.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* halo ledger emphasis */
.ledger{box-shadow:0 24px 60px rgba(20,18,22,.10)}
.lg-tag{color:#8b8579}
.lg-verdict{color:#6b655c;font-style:italic}
.lg-total b{font-size:21px;font-weight:700}
.ledger-col.lg-us{background:#fff4ef;box-shadow:inset 0 0 0 2px rgba(238,86,34,.5);border-radius:0 var(--r-card) var(--r-card) 0}
.ledger-col.lg-us .lg-tag{color:#EE5721}
.ledger-col.lg-us .lg-total b{color:#EE5721}
.ledger-col.lg-us .lg-verdict{color:#EE5721;font-weight:700;font-style:normal}
.halo-mini .sub{margin-left:auto;margin-right:auto}
@media(max-width:640px){.calc-outs{grid-template-columns:1fr!important}}
@keyframes arrowPulse{0%,100%{opacity:.6;text-shadow:0 0 0 rgba(238,86,34,0)}50%{opacity:1;text-shadow:0 0 10px rgba(238,86,34,.5)}}
.calc-rationale{font-size:14px;color:var(--dim-2);text-align:center;margin-top:16px}

/* first-90-days vertical timeline */
.tlwrap{position:relative;height:145vh;width:100%;scroll-margin-top:104px}
.tl-pin{position:sticky;top:0;min-height:74vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0 40px}
.tl-acc{width:100%;max-width:620px;margin-top:44px;text-align:left}
.tl-step{position:relative;padding:0 0 0 62px;margin-bottom:28px}
.tl-step:last-child{margin-bottom:0}
.tl-step::before{content:'';position:absolute;left:17px;top:40px;bottom:-24px;width:2px;background:rgba(238,86,34,.22)}
.tl-step:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;background:var(--orange);box-shadow:0 6px 18px rgba(238,86,34,.3);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tl-step:not(.on) .tl-dot{transform:scale(.44);color:transparent}
.tl-step h3{font-size:var(--t-lg);font-weight:400;line-height:36px;transition:opacity .35s}
.tl-step:not(.on) h3{opacity:.4}
.tl-sbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.tl-step.on .tl-sbody{grid-template-rows:1fr}
.tl-sbody>div{overflow:hidden}
.tl-sbody p{padding:8px 0 2px;font-size:var(--t-base);color:var(--dim);line-height:1.6;max-width:560px}
.tl-sbody em{font-style:normal;color:#201c19}
html:not(.js) .tl-sbody{grid-template-rows:1fr}
@media(prefers-reduced-motion:reduce){.tl-sbody,.tl-dot,.tl-step h3{transition:none!important}}
@media(max-width:760px){
  .tlwrap{height:180vh;scroll-margin-top:118px}
  .tl-acc{margin-top:32px}
  .tl-step{padding-left:50px;margin-bottom:22px}
  .tl-step::before{left:15px;top:36px;bottom:-18px}
  .tl-dot{width:32px;height:32px;font-size:14px}
  .tl-step h3{line-height:32px;font-size:17px}
}

/* video carousel */
.tape-carousel{position:relative;width:100vw;max-width:100vw;margin-top:28px;overflow:hidden;contain:layout paint;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.tapes{display:flex;width:max-content;animation:tapeMarquee 46s linear infinite;padding:6px 0 16px;will-change:transform}
.tapes::-webkit-scrollbar{display:none}
.tape{flex:0 0 clamp(258px,21vw,318px);aspect-ratio:3/4;margin-right:18px}
.tnm{font-size:19px}
.tres{font-size:14px}
@media(max-width:760px){.tc-arrow{display:none}.tape{flex:0 0 clamp(220px,62vw,300px)}.tapes{padding-left:20px;padding-right:20px}}
@keyframes tapeMarquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
/* written-review carousel: mirrors the video tape row, opposite direction */
.tp-carousel{position:relative;width:100vw;max-width:100vw;margin-top:44px;overflow:hidden;contain:layout paint;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.tp-track{display:flex;width:max-content;align-items:stretch;animation:tpMarquee 62s linear infinite;padding:10px 0 14px;will-change:transform}
.tp-track .tp2-card{position:static;top:auto;flex:0 0 clamp(300px,26vw,360px);min-height:auto;margin:0 18px 0 0;box-shadow:0 16px 40px rgba(20,18,22,.08);text-align:left}
@keyframes tpMarquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tp-carousel:hover .tp-track,.tp-carousel:focus-within .tp-track,.tp-carousel.off .tp-track{animation-play-state:paused}
/* brand-logo proof row at booking: static, deliberately non-linked */
.bmini-cap{display:none;margin:38px 0 0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.blogos{display:none;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px clamp(24px,3.4vw,46px);width:100%;max-width:720px;margin:22px auto 0}
.blogos img{width:auto;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;opacity:.72}
.book-proof{margin:20px 0 0;font-size:14px;color:var(--dim-2);letter-spacing:.02em}
.book-proof .bstar{color:var(--orange)}
.rstars{position:relative;display:inline-block;vertical-align:-2px;line-height:1;font-size:17px;letter-spacing:0;white-space:nowrap}
.rs-bg{color:rgba(0,0,0,.16)}
.rs-fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--orange)}
.book-proof b{font-weight:400;color:#201c19}
.book-anchor{max-width:600px;margin:14px auto 0;font-size:16px;line-height:1.55;color:#33302b}
.book-anchor b{color:#EE5721;font-weight:700}
.fyp{margin:30px auto 0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.fyp b{color:#1a1614;font-weight:700}
.faq-a-in p + p{margin-top:14px}
.faq-a-in ul{margin:12px 0 0;padding-left:20px}
.faq-a-in li{margin:5px 0}
.tape-carousel:hover .tapes{animation-play-state:paused}

/* video thumb fills card */
.tape-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}
.tape::before{z-index:1}
.tape .play{z-index:2}
.tape .meta{z-index:2}

/* play button: brand orange + white icon */
.tape .play{background:#EE5721;border-color:#EE5721;color:#fff;box-shadow:0 6px 18px rgba(238,86,34,.45)}
.tape:hover .play{background:#d8481b;border-color:#d8481b;transform:translate(-50%,-60%) scale(1.07)}

/* winner column: dark slab for contrast */
.ledger{box-shadow:0 26px 70px rgba(20,18,22,.13);border-color:rgba(20,18,22,.10)}
html.light .ledger-col.lg-us{background:radial-gradient(130% 95% at 78% 0%,rgba(238,86,34,.30),rgba(238,86,34,.07) 45%,transparent 72%),#0d0b0a;box-shadow:none;color:#fff}
.ledger-col.lg-us .lg-tag{color:#EE5721}
.ledger-col.lg-us .lg-row{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.10)}
.ledger-col.lg-us .lg-row b{color:#fff}
.ledger-col.lg-us .lg-total b{color:#fff}
.ledger-col.lg-us .lg-verdict{color:#EE5721}
.tape[data-yt="Xg6POyOug2Y"] .tape-thumb{transform:scale(1.42);transform-origin:center 40%}

/* play button matches the Book a call CTA */
.tape .play{background:linear-gradient(180deg,#f26840,#EE5721);border:none;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 22px rgba(238,86,34,.35)}
.tape:hover .play{animation:playGlow 3.2s ease-in-out infinite}
@keyframes playGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(238,86,34,.25)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 34px rgba(238,86,34,.5)}}
.tape:hover .play{background:linear-gradient(180deg,#ff7047,#f05a26);border:none;transform:translate(-50%,-60%) scale(1.07)}

.tape-thumb.z{transform:scale(1.34)}

/* ambient orange hue rising from the footer, like the hero */
footer img,footer .foot-strip{position:relative;z-index:1}

/* ---------- testimonials — light masonry ---------- */
.tp2-masonry{display:block;max-width:680px;margin:88px auto 0;text-align:left}
.tp2-col{display:contents}
.tp2-card{position:sticky;top:110px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;margin-bottom:20px;min-height:292px;box-shadow:0 24px 60px rgba(20,18,22,.10)}
.tp2-card p{flex:1}
.tp2-stars{display:flex;gap:2px;margin-bottom:14px}
.tp2-stars svg{width:15px;height:15px;fill:#F5A623}
.tp2-brand{font-size:14px;color:var(--dim-2);margin-bottom:14px}
.tp2-card p{font-size:15px;line-height:1.65;color:#3a3733;margin-bottom:22px}
.tp2-author{display:flex;align-items:center;gap:10px}
.tp2-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0}
.tp2-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tp2-init{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
.tp2-name{font-size:15px;font-weight:700;color:#1a1614}
.tp2-role{font-size:15px;font-weight:400;color:var(--dim-2)}
@media(max-width:600px){.tp2-card{top:96px;padding:24px;min-height:430px}}

/* ---------- us vs them — two card list ---------- */
.cmp2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:56px;text-align:left}
.cmp2-col{border-radius:20px;overflow:hidden}
.cmp2-them{background:#f7f7f5;border:1px solid var(--line)}
.cmp2-us{background:radial-gradient(130% 95% at 78% 0%,rgba(238,86,34,.30),rgba(238,86,34,.07) 45%,transparent 72%),#0d0b0a;box-shadow:0 24px 60px rgba(20,18,22,.14)}
.cmp2-head{padding:26px 28px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;text-align:center}
.cmp2-them .cmp2-head{color:#1a1614;border-bottom:1px solid var(--line)}
.cmp2-us .cmp2-head{border-bottom:1px solid rgba(255,255,255,.08)}
.cmp2-us .cmp2-head img{height:26px;width:auto;display:block;margin:0 auto;filter:brightness(0) invert(1)}
.cmp2-list{padding:10px 28px 28px}
.cmp2-item{display:flex;align-items:center;gap:14px;padding:14px 0;font-size:16px;border-bottom:1px solid rgba(0,0,0,.05)}
.cmp2-item:last-child{border-bottom:none}
.cmp2-them .cmp2-item{color:#6b655c}
.cmp2-us .cmp2-item{color:rgba(255,255,255,.78);font-weight:400;border-bottom-color:rgba(255,255,255,.08)}
.cmp2-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.cmp2-them .cmp2-ico{border:1.5px solid #c9c3b8;color:#8b8579}
.cmp2-us .cmp2-ico{background:rgba(255,255,255,.12);color:#E3F009}
.cmp2-us{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cmp2-us:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(20,18,22,.22)}
@media(max-width:1100px){.cmp2{grid-template-columns:1fr}}

/* =====================================================================
   CRO PASS — appended overrides. Everything below this line is new.
   ===================================================================== */

/* ---- 1. BRAND ORANGE restored on all CTAs + orange text (founder call,
        2026-07-30). The previous darkened CTA/text pair existed purely
        for contrast: white on #EE5721 is 3.49:1, which is BELOW
        WCAG AA 4.5:1 for normal text and only clears the 3:1 large-text
        bar. Brand consistency was chosen over the AA margin here.        */
html.light{
  --orange-cta:#EE5721;   /* CTA fill + standalone uses */
  --orange-ink:#EE5721;   /* orange TEXT on light bg    */
  --volt-ink:#08702F;     /* green TEXT on light bg = 5.2:1 PASS */
}
html.light .btn-orange{background:linear-gradient(180deg,#f26840,var(--orange-cta))}
html.light .btn-orange:hover{background:linear-gradient(180deg,#EE5721,#DC4A16)}
html.light .nav-cta{background:linear-gradient(180deg,#f26840,var(--orange-cta))}
html.light .proof-row b,
html.light .tt-case b,
html.light .tri-card .mark,
html.light .cmp-col .mid,
html.light .faq-item.open .pm{color:var(--orange-ink)}
html.light .mech-point .n{color:var(--volt-ink)}

/* ---- 2. Hero: headline was invisible for ~350-700ms (it is the LCP element).
        Delays cut to 60/140/220ms — motion kept, dead time removed.        */
.kinetic .kline:nth-child(1)>span{animation-delay:.06s}
.kinetic .kline:nth-child(2)>span{animation-delay:.14s}
.kinetic .kline:nth-child(3)>span{animation-delay:.22s}
.eyebrow{animation-delay:.02s}

/* ---- 3. Hero secondary CTA + microcopy ---- */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
html.light .btn-ghost{border:1px solid rgba(0,0,0,.22);color:#201c19;background:transparent}
html.light .btn-ghost:hover{border-color:#201c19;background:rgba(0,0,0,.04);transform:translateY(-1px)}
.cta-micro{margin-top:18px;font-size:15px;color:var(--dim-2);letter-spacing:.01em}

/* ---- 4. Mobile section #nav (nav-links are display:none under 900px) ---- */
.mnav{display:none}
@media(max-width:900px){
  .mnav{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;position:sticky;top:64px;z-index:55;
        background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
        border-bottom:1px solid var(--line);scrollbar-width:none;-ms-overflow-style:none}
  .mnav::-webkit-scrollbar{display:none}
  .mnav a{flex:0 0 auto;font-size:14px;letter-spacing:.04em;color:var(--dim);
          border:1px solid var(--line);border-radius:100px;padding:7px 14px;white-space:nowrap;transition:.2s}
  .mnav a.active{color:#fff;font-weight:700;background:var(--orange-cta);border-color:var(--orange-cta)}
}

/* ---- 5. Results grid: one hero tile so there is a lead story ---- */
@media(min-width:901px){
  .results-grid{grid-template-columns:repeat(3,1fr);grid-auto-flow:dense}
  .res-hero{grid-column:span 1;display:flex;flex-direction:column;justify-content:center}
  .res-hero .delta{font-size:clamp(40px,3.8vw,56px)}
  .res-hero .brand{font-size:var(--t-lg)}
}
.claim-note{max-width:760px;margin:26px auto 0;font-size:14px;line-height:1.6;color:var(--dim-2)}

/* ---- 6. Guarantee: concrete downside term ---- */
.g-term{margin-top:22px;font-size:var(--t-sm);color:var(--dim);border-left:2px solid var(--volt);padding-left:16px;text-align:left;display:block;max-width:660px;margin-left:auto;margin-right:auto}
.g-term b{color:var(--white)}
.g-stats{margin-top:20px;font-size:15px;letter-spacing:.05em;color:rgba(255,255,255,.62)}
.g-stats b{color:#fff}
.g-term em{font-style:normal;color:var(--orange-ink);font-size:13px;display:block;margin-top:4px}

/* ---- 7. Problem / agitation section ---- */
.pains-sec .leaks{margin-top:56px}

/* ---- 8. Halo calculator ---- */
.calc-h{font-size:clamp(20px,2.4vw,28px);font-weight:400;letter-spacing:-.01em;margin-bottom:38px}
.calc-field{display:flex;flex-direction:column}
.calc-field .calc-val{font-size:clamp(22px,2.4vw,30px)}
.calc input[type=range]{margin-top:6px}
.calc input[type=range]:focus-visible{outline:2px solid var(--orange-cta);outline-offset:6px}
.calc-out label{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.calc-out .calc-val{margin:12px 0 6px}
.calc-out span{font-size:14px;color:var(--dim-2)}
.calc-out.lg-us{background:linear-gradient(180deg,rgba(11,138,64,.07),rgba(11,138,64,.03))}
.calc-out.lg-us .calc-val{color:var(--volt-ink)}
@media(max-width:760px){.calc-inputs{grid-template-columns:1fr;gap:30px}}

/* ---- 9. Founder card + photo ---- */
.founder-card{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;
              max-width:860px;margin:56px auto 0;text-align:left}
.founder-photo{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;
               background:var(--ink-2);border:1px solid var(--line);flex-shrink:0}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.founder-photo img.ph{display:none}
.founder-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                  font-size:38px;letter-spacing:.06em;color:var(--dim-2);z-index:1}
.founder-card .founder-quote{margin-top:0}
@media(max-width:760px){.founder-card{grid-template-columns:1fr;gap:24px}
  .founder-photo{width:96px;height:96px}.founder-initials{font-size:28px}}

/* ---- 10. Fit / qualification ---- */
.fit-col{border-color:rgba(11,138,64,.45)}
.fit-col.no{background:transparent;border-style:dashed;border-color:rgba(198,58,42,.45)}
.fit-col.no h3{color:var(--dim)}
.fit-col ul li{padding-left:20px;position:relative}
.fit-col ul li::before{content:'+  ';color:var(--volt-ink);position:absolute;left:0}
.fit-col.no li::before{content:'\2212';color:var(--orange-ink)}

/* ---- 12. Footer ---- */
footer{padding:72px 32px 48px;text-align:left}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;max-width:1200px;margin:0 auto 48px}
.foot-brand img{height:20px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:var(--t-sm);color:var(--dim);max-width:280px;margin-bottom:14px}
.foot-tp{font-size:var(--t-sm);color:var(--dim-2);border-bottom:1px solid var(--line-2)}
.foot-col h3,.foot-col h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);
             font-weight:400;margin-bottom:18px}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:var(--t-sm);color:var(--dim);transition:color .2s}
.foot-col a:hover{color:var(--white)}
.foot-strip{max-width:1200px;margin:0 auto;padding-top:26px;border-top:1px solid var(--line);
            font-size:13px;line-height:1.6;letter-spacing:0;text-align:left}
@media(max-width:900px){
  /* 96px, not 130px: the bottom CTA is the 56px Lift bubble at a 20px offset,
     not the old full-width sticky pill. This shorthand is the rule that wins. */
  footer{padding:56px 22px 96px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1/-1}
}

/* ---- 13. Editorial placeholders that must be filled before publishing ---- */


/* ---- 14. NO-JS / OLD-BROWSER SAFETY.
        .rv defaults to opacity:0 and is only revealed by IntersectionObserver.
        If JS is blocked or fails, that meant a blank page. It no longer does. */
html:not(.js) .rv{opacity:1!important;transform:none!important}
html:not(.js) .mnav{display:none}
.book-fallback{margin:16px 0 0;font-size:15px;text-align:center;color:var(--dim)}
.book-fallback a{color:var(--orange-ink);border-bottom:1px solid var(--line-2)}

/* =====================================================================
   v11.1 — FLOW PASS. Motion density, rhythm, type articulation.
   ===================================================================== */

/* ---- A. Carousel must stop when you try to click it.
      The product marquee already had a hover-pause; this one never did,
      and its tiles are <button>s. Also pauses on keyboard focus.        */
.tape-carousel:hover .tapes,
.tape-carousel:focus-within .tapes{animation-play-state:paused}
.pmarquee:focus-within .pmarquee-track{animation-play-state:paused}
@media(hover:none){.tapes{animation-duration:60s}}

/* ---- B. Motion density: ctaGlow ran forever on THREE elements at once
      (in-body buttons, nav, sticky bar). A glow that never stops is a
      texture, not an accent. Keep it on the sticky bar only.            */
html.light .btn-orange{animation:none}
html.light .nav-cta{animation:none}

/* ---- C. Nav ran backdrop-filter:blur(16px) permanently, including while
      fully transparent with nothing behind it to blur.                  */
#nav{backdrop-filter:none;-webkit-backdrop-filter:none}
#nav.scrolled{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ---- D. Anchor offsets. Desktop chrome is a 76px #nav (88px was right).
      Mobile is a 64px #nav PLUS the 45px sticky chip row I added in v11,
      so every anchor jump was landing underneath it.                    */
@media(max-width:900px){
  section[id]{scroll-margin-top:118px}
  h2[id]{scroll-margin-top:126px}
}

/* ---- E. Type articulation. Three of six tokens were the same 16px, so
      labels, captions, body and fine print all shared one voice and the
      small register carried hierarchy on tint alone. Gentle separation. */
html.light{--t-xs:13px}
html.light .eyebrow{font-size:14px;letter-spacing:.26em}
html.light .res .what,
html.light .lg-tag,
html.light .calc-field label,
html.light .calc-out label{font-size:13px}
html.light .claim-note,
html.light .calc-note,
html.light .tp-note{font-size:14px}

/* ---- F. Rhythm. Eleven consecutive centred-on-white sections flattened
      the arc. The guarantee card was ALREADY designed as a dark panel —
      light mode was overriding it away with !important. Restored as the
      page's single dark moment. (Revert: delete this block.)            */
html.light .guarantee{
  background:
    radial-gradient(900px 400px at 50% 118%, rgba(238,86,34,.20), transparent 62%),
    linear-gradient(180deg,#191510,#0e0c0a)!important;
  border-color:rgba(238,86,34,.26);
  box-shadow:0 34px 90px rgba(20,18,22,.26);
}
html.light .guarantee h2{color:#f7f5f1}
html.light .guarantee p{color:#a39c90}
html.light .guarantee p em{color:#f7f5f1}
html.light .guarantee .g-term{border-left-color:#3FB56E}
html.light .guarantee .g-term,
html.light .guarantee .g-term span{color:#a39c90}
html.light .guarantee .g-term b{color:#f7f5f1}
html.light .guarantee .g-term em{color:#F0864F}
html.light .guarantee .btn-orange{
  background:linear-gradient(180deg,#EE5721,#D2450F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 34px rgba(238,86,34,.32);
}
html.light .guarantee .btn-orange:hover{background:linear-gradient(180deg,#FF6733,#E14D14)}

/* ---- G. Section breathing. Base rhythm was one value for every section;
      giving the two argument sections more air separates them from the
      proof sections without touching the grid.                          */

/* ---- H. Reduced motion: kill the marquees outright rather than
      merely shortening them.                                            */
@media(prefers-reduced-motion:reduce){
  .tapes,.pmarquee-track,.tp-track{animation:none!important}
  .tape-carousel,.pmarquee,.tp-carousel{overflow-x:auto}
}

/* =====================================================================
   v11.2 — case studies, live dashboards, scope of work
   ===================================================================== */
#cases .case{margin-top:64px;text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);
             padding:clamp(26px,3.4vw,46px);background:linear-gradient(180deg,#ffffff,#fcfaf7)}
#cases .case+.case{margin-top:34px}
.case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.case-tag{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-ink);display:block;margin-bottom:12px}
.case-head h3{font-size:clamp(24px,3vw,36px);font-weight:400;letter-spacing:-.02em}
.case-head h3 em{font-style:normal;color:var(--dim);font-size:clamp(15px,1.5vw,19px)}
.case-pill{flex:0 0 auto;font-size:14px;color:var(--volt-ink);border:1px solid rgba(11,138,64,.32);
           border-radius:100px;padding:8px 16px;display:inline-flex;align-items:center;gap:8px}
.case-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--volt);
                   animation:dotPulse 2.4s ease-in-out infinite}
.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
            border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin:34px 0 8px}
.case-stats>div{background:#fff;padding:24px 20px}
.case-stats b{display:block;font-size:clamp(26px,3.2vw,40px);font-weight:400;letter-spacing:-.02em;color:var(--orange-ink)}
.case-stats span{display:block;margin-top:6px;font-size:13px;letter-spacing:.06em;color:var(--dim-2)}
#cases .case-stats.s3{grid-template-columns:repeat(3,1fr)}
/* real results: image-forward card grid */
.res2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;width:100%;max-width:1000px;margin:52px auto 0;text-align:left}
.res2{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(20,18,22,.05),0 18px 40px rgba(20,18,22,.06);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.res2:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(20,18,22,.08),0 26px 54px rgba(20,18,22,.12)}
.res2-img{background:#0d0b09}
.res2-img img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.res2-inner{padding:28px 28px 24px;display:flex;flex-direction:column;flex:1}
.res2-stat{font-size:clamp(28px,2.8vw,38px);font-weight:400;letter-spacing:-.025em;line-height:1.12;color:var(--orange-ink)}
.res2-stat .u{font-size:.58em;color:var(--dim)}
.res2-delta{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.02em;color:#1a1614;background:#E3F009;border-radius:100px;padding:.42em .72em;margin-left:.34em;vertical-align:.34em}
.res2-label{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2)}
.res2-body{margin-top:11px;font-size:15px;line-height:1.55;color:#33302b}
.res2-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px}
.res2-brand{font-size:15px;color:#1a1614}
.res2-link{font-size:14px;color:var(--orange-ink);border-bottom:1px solid rgba(238,86,34,.3);white-space:nowrap;transition:color .2s}
.res2-link:hover{color:#c9410f}
@media(max-width:760px){.res2-grid{grid-template-columns:1fr}}
/* headlines: Fellix Medium (500) */
h1,h2,h3,.cs-h1{font-weight:500}
.halo-lag{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;text-align:left}
.hl-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px}
.hl-step .hl-m{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-bottom:10px}
.hl-step b{display:block;font-size:clamp(20px,2vw,26px);font-weight:400;letter-spacing:-.02em;color:var(--dim-2);line-height:1.1}
.hl-step.hl-fire b{color:var(--orange-ink)}
.hl-step .hl-d{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--dim-2)}
.halo-why{margin:26px 0 0;max-width:720px;text-align:left;font-size:16px;line-height:1.65;color:var(--dim-2)}
.halo-why em{font-style:normal;color:#201c19}
@media(max-width:760px){.halo-lag{grid-template-columns:1fr}}
.amz-more{margin-top:26px;text-align:center}
.amz-more h3{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.01em;margin:8px 0 0;color:#201c19}
.amzwins{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
.amzwin{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;box-shadow:0 1px 2px rgba(20,18,22,.04)}
.amzwin b{display:block;font-size:clamp(21px,2.1vw,27px);font-weight:400;letter-spacing:-.02em;color:var(--orange-ink);line-height:1.1;white-space:nowrap}
.amzwin b .per{font-size:.58em;color:var(--dim-2);letter-spacing:0;margin-left:1px}
.amzwin .br{display:block;margin-top:15px;font-size:15px;font-weight:700;color:#201c19}
.amzwin .dt{display:block;margin-top:5px;font-size:13px;letter-spacing:.02em;color:var(--dim-2);line-height:1.5}
@media(max-width:820px){.amzwins{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.amzwins{grid-template-columns:1fr}.amzwin b{white-space:normal}}
.shot{margin:30px 0 0}
@media(min-width:901px){
  #cases .case{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start}
  #cases .case-head,#cases .case-stats,#cases figure.shot:first-of-type{grid-column:1/-1}
}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r-card);
          background:#fff;box-shadow:0 18px 44px rgba(20,18,22,.08)}
.shot figcaption{margin-top:16px;font-size:15px;line-height:1.6;color:var(--dim)}
.shot-label{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
            color:var(--orange-ink);margin-bottom:8px}
.shot figcaption b{display:block;font-weight:400;color:var(--white);font-size:clamp(17px,1.9vw,21px);
                   letter-spacing:-.01em;margin-bottom:8px}
#cases .claim-note{text-align:left;max-width:860px;margin-top:30px}
#cases .claim-note b{color:var(--white);font-weight:400}
@media(max-width:820px){
  .case-stats{grid-template-columns:1fr 1fr}
  .case-head{flex-direction:column}
  .case-head h3 em{display:block;margin-top:6px}
}

/* scope of work */
.mech-points.thru .mech-point h3{font-size:clamp(34px,4.4vw,54px);letter-spacing:-.03em;color:var(--orange-ink);margin-bottom:10px}
.mech-points.thru .mech-point .n{color:var(--dim-2);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
#scope .tri{margin-top:26px}
#scope .claim-note{max-width:820px}
@media(min-width:901px){#scope .tri{grid-template-columns:repeat(3,1fr)}}

/* =====================================================================
   v11.3 — LIQUID GLASS NAV
   The #nav detaches from the top edge and becomes a floating capsule that
   content scrolls underneath and blurs through. Four layers make it read
   as glass rather than as a translucent box:
     1. backdrop-filter blur + saturate  (the refraction)
     2. a low-alpha fill                 (the body of the glass)
     3. inset top/bottom hairlines       (the specular edge)
     4. a cursor-tracked radial sheen    (the light source)
   ===================================================================== */

#nav{
  top:16px; left:20px; right:20px;
  max-width:1200px; margin-inline:auto;
  height:64px;
  padding:0 12px 0 26px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 0 0 0 .5px rgba(255,255,255,.30),
    0 1px 2px rgba(20,18,22,.04),
    0 10px 30px rgba(20,18,22,.10);
  transition:background .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s cubic-bezier(.2,.7,.2,1),
             border-color .35s cubic-bezier(.2,.7,.2,1);
  isolation:isolate;
  z-index:56;
}

/* the glass firms up once content is actually passing underneath it */
html.light #nav.scrolled{
  top:10px;
  max-width:1120px;
  height:58px;
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.62);
  border-bottom-color:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 2px 6px rgba(20,18,22,.06),
    0 16px 44px rgba(20,18,22,.15);
}

/* layer 3 — specular edge. A top-weighted sheen, like light catching a bevel. */
#nav::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.14) 38%,
    rgba(255,255,255,0)   58%,
    rgba(255,255,255,.10) 100%);
}

/* layer 4 — the light source. Tracks the cursor, fades in on approach. */
#nav::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.60), rgba(255,255,255,.10) 45%, transparent 70%);
}
@media(hover:hover){#nav:hover::before{opacity:1}}

/* #nav contents sit above the glass layers */
#nav>*{position:relative;z-index:1}

/* the CTA is a solid object floating IN the glass, so it keeps its own weight */
html.light .nav-cta{
  box-shadow:0 1px 2px rgba(20,18,22,.10),0 6px 18px rgba(201,65,15,.28),
             inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---------- mobile: same capsule, tighter ---------- */
@media(max-width:900px){
  #nav{
    top:10px; left:12px; right:12px;
    height:56px; padding:0 8px 0 18px;
    border-radius:100px;
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
  }
  html.light #nav.scrolled{top:8px;height:54px;max-width:none;background:rgba(255,255,255,.62)}

  /* the chip row becomes a second, smaller pane of the same glass */
  .mnav{
    top:74px;
    margin:0 12px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:100px;
    background:rgba(255,255,255,.46);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    backdrop-filter:blur(10px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 20px rgba(20,18,22,.10);
  }
  .mnav a{border-color:rgba(0,0,0,.10)}

  /* anchors clear the floating nav pill */
  section[id]{scroll-margin-top:84px}
  h2[id]{scroll-margin-top:140px}
}

/* ---------- desktop anchor offset for the floating capsule ---------- */
@media(min-width:901px){
  section[id]{scroll-margin-top:104px}
  h2[id]{scroll-margin-top:112px}
}

/* ---------- graceful degradation ----------
   Firefox with backdrop-filter disabled, or any engine without support:
   fall back to a near-opaque capsule so text never sits on raw content. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #nav{background:rgba(255,255,255,.95)}
  html.light #nav.scrolled{background:rgba(255,255,255,.97)}
  .mnav{background:rgba(255,255,255,.96)}
}

/* ---------- reduced motion: keep the glass, drop the geometry animation ---------- */
@media(prefers-reduced-motion:reduce){
  #nav{transition:background .2s,box-shadow .2s}
  html.light #nav.scrolled{top:16px;height:64px;max-width:1200px}
  #nav::before{display:none}
}

/* ---- v11.4: restored, having been wrongly purged as dead in v11 ---- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px;text-align:left}
.tri-card{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);
          padding:38px 34px;transition:border-color .3s,transform .3s,background .3s}
.tri-card:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--ink-2)}
.tri-card h3{font-size:var(--t-lg);font-weight:400;line-height:1.35;margin-bottom:14px}
.tri-card p{font-size:var(--t-sm);color:var(--dim);line-height:1.6}
.tri-card .mark{font-size:13px;letter-spacing:.24em;text-transform:uppercase;
                color:var(--orange-ink);display:block;margin-bottom:22px}
@media(max-width:900px){.tri{grid-template-columns:1fr;margin-top:40px}}

/* ---- v11.4: the closing headline ----
   64px + a manual <br> + a 2-line highlight produced a ragged three-line
   shape with two detached lime bars. Smaller, wider, and the highlight
   is now a hairline that tracks the baseline instead of the line box. */
h2 .ul,h1 .ul{background-size:100% .055em;background-position:0 88%}

/* the throughput band needed its own column rule now that .tri is back */
.mech-points.thru{border-top:1px solid var(--line)}
@media(max-width:900px){.mech-points.thru{grid-template-columns:1fr}}

/* v13.1: 44px minimum touch target (Apple HIG / WCAG 2.5.5). Scoped to
   <=900px so desktop spacing is untouched. */
@media(max-width:900px){
  .nav-links a,.foot-col a{min-height:44px;display:inline-flex;align-items:center}
}
#cases{}


/* ===== case study (cs-) scoped components — brand-locked to homepage light theme ===== */
.cs-hero{padding:150px 32px 70px;position:relative;overflow:hidden}
.cs-hero .amber{position:absolute;right:-8%;top:0;width:600px;height:600px;background:radial-gradient(circle,rgba(238,87,33,.08),transparent 62%);pointer-events:none}
.cs-h1{font-size:clamp(38px,5.4vw,72px);font-weight:400;line-height:1.06;letter-spacing:-.025em;color:#1a1614;opacity:1;animation:none;margin:22px 0 0;max-width:960px}
.cs-lede{font-size:var(--t-md);color:#5c574f;max-width:600px;margin-top:28px;line-height:1.6}
.cs-lede em{font-style:normal;color:#1a1614;font-weight:700}
.cs-herocta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:38px}
.cs-tagrow{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 2px}
.cs-tag{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#6b655c;background:#f7f7f5;border:1px solid rgba(0,0,0,.09);border-radius:100px;padding:8px 15px}
.cs-tag b{color:#EE5721;font-weight:700}
.cs-o{color:#EE5721}
.cs-dim{color:#6b655c}

.cs-topline{padding-top:0}
.cs-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cs-stat{background:#ffffff;border:1px solid rgba(0,0,0,.09);border-radius:16px;padding:32px 30px;position:relative;overflow:hidden;box-shadow:0 10px 34px rgba(20,18,22,.06)}
.cs-stat::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#EE5721,#E3F009)}
.cs-k{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#6b655c;font-weight:700;margin-bottom:16px}
.cs-big{font-size:clamp(40px,4.6vw,56px);font-weight:400;line-height:1;letter-spacing:-.03em;color:#1a1614}
.cs-pct{color:#EE5721}
.cs-flow{font-size:14px;color:#5c574f;margin-top:14px}
.cs-flow b{color:#1a1614;font-weight:700}
.cs-arr{color:#EE5721;margin:0 6px;font-weight:700}

.cs-chartgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.cs-chart{background:#ffffff;border:1px solid rgba(0,0,0,.09);border-radius:20px;padding:34px 32px 28px;box-shadow:0 10px 34px rgba(20,18,22,.06)}
.cs-charttitle{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#6b655c;font-weight:700;margin-bottom:8px}
.cs-chartnote{font-size:14px;color:#6b655c;margin-top:20px;line-height:1.5}
.cs-svg{width:100%;height:auto;overflow:visible}
.cs-bars{display:flex;align-items:flex-end;gap:clamp(10px,3vw,30px);height:220px;margin-top:24px;padding-top:10px}
.cs-barcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:12px}
.cs-barval{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:#1a1614}
.cs-barval.dim{color:#8a8479}
.cs-bar{width:100%;max-width:70px;border-radius:8px 8px 3px 3px;position:relative;transition:height 1.1s cubic-bezier(.2,.75,.2,1)}
.cs-b0{background:#e6e3de}.cs-b1{background:#f4a480}.cs-b2{background:#f0834f}.cs-b3{background:#EE5721}
.cs-barx{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#8a8479;font-weight:700}
.cs-axis{height:1px;background:rgba(0,0,0,.09);margin-top:-1px}

.cs-split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.cs-qwgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cs-qwgrid.two{grid-template-columns:1fr 1fr}
.cs-qw{background:#ffffff;border:1px solid rgba(0,0,0,.09);border-radius:16px;padding:28px 26px;box-shadow:0 8px 24px rgba(20,18,22,.05)}
.cs-qwn{font-size:clamp(30px,3.4vw,40px);font-weight:400;line-height:1;letter-spacing:-.03em;color:#1a1614}
.cs-qwn.o{color:#EE5721}
.cs-qwl{font-size:14px;color:#5c574f;margin-top:14px;line-height:1.55}
.cs-qwl b{color:#1a1614}

.cs-didgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cs-did{display:flex;gap:18px;background:#ffffff;border:1px solid rgba(0,0,0,.09);border-radius:16px;padding:26px 26px;transition:border-color .3s,transform .3s,box-shadow .3s;box-shadow:0 8px 24px rgba(20,18,22,.05)}
.cs-did:hover{border-color:rgba(238,87,33,.28);transform:translateY(-3px);box-shadow:0 14px 40px rgba(20,18,22,.08)}
.cs-didic{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:#1a1614;color:#E3F009;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:16px}
.cs-didt{font-size:var(--t-md);color:#1a1614;font-weight:700;line-height:1.3;margin-bottom:8px}
.cs-didd{font-size:14px;color:#5c574f;line-height:1.6}

.cs-pnlwrap{border:1px solid rgba(0,0,0,.09);border-radius:20px;overflow:hidden;overflow-x:auto;background:#ffffff;box-shadow:0 10px 34px rgba(20,18,22,.06)}
.cs-pnl{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.cs-pnl th,.cs-pnl td{text-align:right;padding:15px 20px;border-bottom:1px solid rgba(0,0,0,.07);white-space:nowrap}
.cs-pnl th:first-child,.cs-pnl td:first-child{text-align:left;color:#5c574f}
.cs-pnl tbody th{font-weight:400}
.cs-pnl thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b655c;background:#faf9f7;font-weight:700}
.cs-pnl thead th:not(:first-child){color:#1a1614}
.cs-pnl tbody tr:last-child td,.cs-pnl tbody tr:last-child th{border-bottom:none}
.cs-pnl tr.hi td,.cs-pnl tr.hi th{background:rgba(238,87,33,.06);color:#1a1614;font-weight:700}
.cs-pnl tr.hi th:first-child{color:#EE5721;font-weight:700}
.cs-pnl .up{color:#0B8A40;font-weight:700}
.cs-sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.cs-ctacard{background:#141210;border-radius:24px;padding:72px 54px;text-align:center;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(20,18,22,.18)}
.cs-ctacard::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#EE5721,#E3F009)}
.cs-ctacard .eyebrow{color:#E3F009;margin-bottom:22px;position:relative;z-index:2}
.cs-ctacard h2{margin:0 auto 20px;text-align:center;color:#fff;position:relative;z-index:2}
.cs-ctasub{font-size:var(--t-md);color:rgba(255,255,255,.74);max-width:520px;margin:0 auto 34px;position:relative;z-index:2;line-height:1.6}
.cs-ctacard .cs-herocta{justify-content:center;position:relative;z-index:2}
.cs-ctafine{font-size:14px;color:rgba(255,255,255,.5);margin-top:24px;position:relative;z-index:2}

.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.cs-bar{transition:none}}
@media(max-width:860px){
  .cs-statgrid,.cs-qwgrid,.cs-qwgrid.two,.cs-chartgrid,.cs-didgrid,.cs-split{grid-template-columns:1fr}
  .cs-ctacard{padding:52px 26px}
  .cs-hero{padding:120px 24px 56px}
}

h1,h2,h3,.cs-h1{font-weight:500}


/* headlines: Fellix Medium (500), incl cs-hero */
h1,h2,h3,.cs-h1{font-weight:500}
/* drop the case-study gradient top rule on stat cards for service pages */
.cs-stat::before{display:none}
.cs-topline .cs-stat{border-top:1px solid var(--line)}
/* fix hero glow: cs-hero 600x600 box + homepage full-bleed radial collide into a
   hard rectangle. Pin amber to one coherent full-bleed soft glow. */
.cs-hero .amber{position:absolute;inset:0;right:auto;top:auto;width:auto;height:auto;
  background:radial-gradient(760px 520px at 82% 34%,rgba(238,87,33,.09),transparent 60%)}
/* single consistent left axis: heading + content share one left edge */
.seq{margin-left:0;margin-right:0}
.faq-list{margin-left:0;margin-right:0}
/* method differentiator callout */
.svc-note{margin:30px 0 0;max-width:820px;padding:20px 24px;border-left:2px solid var(--orange);
  background:#faf7f3;border-radius:0 12px 12px 0;font-size:16px;line-height:1.6;color:#33302b}
.svc-note b{color:#1A1614;font-weight:400}
/* trusted-by logo row */
.svc-logos-cap{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8a8378}
.svc-logos{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:20px clamp(28px,3.6vw,50px);margin-top:22px}
.svc-logos img{width:auto;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;opacity:.72}
/* oversized aggregate proof band (Canopy/BadMarketing big-number motif) */
.svc-agg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:44px;box-shadow:0 24px 60px rgba(20,18,22,.07)}
.svc-agg .ag{background:#fff;padding:40px 34px}
.svc-agg .agn{font-size:clamp(46px,6vw,78px);font-weight:400;letter-spacing:-.03em;color:#1A1614;line-height:.98}
.svc-agg .agn b{color:var(--orange);font-weight:400}
.svc-agg .agl{font-size:15px;color:#5c574f;margin-top:14px;line-height:1.45}
.svc-agg .agl span{display:block;color:#8a8378;font-size:13px;margin-top:3px}
@media(max-width:760px){.svc-agg{grid-template-columns:1fr}}
/* testimonial */
.svc-tm{max-width:860px;margin-top:44px;background:#f7f7f5;border:1px solid var(--line);border-radius:20px;padding:38px 42px}
.svc-tm p{font-size:20px;line-height:1.5;color:#1A1614;font-weight:400}
.svc-tm .by{display:flex;align-items:center;gap:14px;margin-top:24px}
.svc-tm .by img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.svc-tm .by b{font-weight:400;color:#1A1614;font-size:15px;display:block}
.svc-tm .by span{color:#6b655c;font-size:14px}
@media(max-width:600px){.svc-tm{padding:28px 24px}.svc-tm p{font-size:18px}}
.svc-tm .by .ini{width:46px;height:46px;border-radius:50%;background:#e8e4dd;color:#5c574f;display:flex;align-items:center;justify-content:center;font-size:15px}
/* before/after bar pair (SEO, Listing) */
.svc-ba{display:flex;align-items:flex-end;gap:clamp(28px,7vw,80px);height:280px;max-width:600px;margin:40px 0 0;padding:0 6px 42px;border-bottom:1px solid var(--line);position:relative}
.svc-ba .bacol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.svc-ba .bav{font-size:clamp(22px,2.6vw,30px);font-weight:400;color:#1A1614;margin-bottom:12px;letter-spacing:-.02em;white-space:nowrap}
.svc-ba .bab{width:100%;max-width:130px;border-radius:12px 12px 0 0}
.svc-ba .bacol.before .bab{background:#e4e0d9}
.svc-ba .bacol.after .bab{background:linear-gradient(180deg,#f26840,#EE5721)}
.svc-ba .bal{position:absolute;bottom:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8378}
.svc-ba .bacol.before .bal{left:0;width:50%;text-align:center}
.svc-ba .bacol.after .bal{right:0;width:50%;text-align:center}
.svc-bacap{font-size:14px;color:#6b655c;margin-top:16px;max-width:600px}


/* =====================================================================
   LEGIBILITY PASS — appended overrides (2026-08-06).
   Audit: 551 text nodes, 56 WCAG contrast failures at 1440 and 375.
   Brand orange on FILLS is deliberately untouched (founder call
   2026-07-30). Only orange TEXT darkens; CTAs reach AA on size.
   ===================================================================== */

/* ---- 1. Stop thinning every glyph on the page.
        `-webkit-font-smoothing:antialiased` on <body> disables subpixel
        rendering and costs roughly a third of the stem weight on macOS
        Chrome/Safari. That, not font-weight, is what made the copy read
        thin: Fellix 300 is loaded but never applied anywhere, and 82% of
        the page is a perfectly normal weight 400.
        Keep antialiasing only where text is light-on-dark, which is the
        case it actually helps.                                          */
body{-webkit-font-smoothing:auto}
.guarantee,.offer-col.demand,.ledger-col.lg-us,.cmp2-us,.cmp-col.us,
.tape,.vmodal,.btn-orange,.nav-cta,.tp2-init,
.st.on i,.st.done i,.icl-go,.tl-dot,.seq-n,.mnav a.active{
  -webkit-font-smoothing:antialiased}

/* ---- 2. Orange TEXT only — fills keep brand #EE5721 via --orange-cta.
        #C2400F is the same hue one stop deeper:
          on #ffffff 5.21:1  |  on #f7f7f5 4.85:1  |  on #fceae4 4.47:1
        All clear WCAG AA (4.5:1). Was 3.49 / 3.25 / 2.99.               */
html.light{--orange-ink:#C2400F}

/* selectors that reached for the FILL token to colour text */
html.light .fw-num,
html.light .offer-col.convert .offer-lab,
html.light .offer-col.convert h3 .ch-glyph,
html.light .offer-col.convert .offer-list li::before,
html.light .fit-col.no li::before,
html.light .faq-item.open .pm,
html.light .book-proof .bstar,
html.light .rs-fg,
html.light .res .delta,
html.light .mega .num,
html.light .tt-stat .ttn,
html.light h2 .volt,
html.light .guarantee h2 .volt,
html.light .proof-row b,
html.light .tt-case b{color:var(--orange-ink)}

/* hardcoded #EE5721 text the var() sweep could not reach */
html.light .book-anchor b,
html.light .icl-lab .req,
html.light .icl-summary a{color:var(--orange-ink)}

/* underline on the results link tracked the old orange */
html.light .res2-link{border-bottom-color:rgba(194,64,15,.45)}

/* NOTE: .ledger-col.lg-us .lg-tag/.lg-total b/.lg-verdict and
   .guarantee .g-term em keep bright orange on purpose — those sit on the
   near-black cards (#0d0b09), where #EE5721 already clears AA and
   darkening would LOWER contrast.                                       */

/* NOTE: .vmodal-close:hover keeps bright #EE5721 on purpose — the modal
   is dark (rgba(4,3,2,.9)), so darkening would LOWER its contrast.      */

/* ---- 3. CTA labels cross WCAG's large-text threshold (18.66px bold),
        so the 3:1 bar applies and white-on-#EE5721 (3.28:1) passes with
        the brand fill completely unchanged. No colour was touched.      */
.btn{font-size:19px}
.icl-go{font-size:19px}
/* play glyph is weight 400, so it needs >=24px (not 18.66px) to reach the
   large-text bar. 24px in a 52px circle also just looks better.         */
.tape .play{font-size:24px}
/* nav + sticky pills stay small for layout reasons; bumped for
   readability, but they remain at 3.28:1 — an accepted tradeoff of
   keeping the brand fill. Documented, not overlooked.                   */
.nav-cta{font-size:15px}

/* ---- 4. Mobile hero pill. `display:inline-flex` turned each bare text
        run into its own flex item, so at 375px the badge broke into
        three ragged columns:
            For CPG brands   $1M-    a
               doing         $15M   year
        Returning it to a single inline text flow fixes the wrap.        */
.hero-pill{display:inline-block;text-align:center;line-height:1.45}
.hero-pill::before{display:inline-block;margin-right:9px;
  vertical-align:middle;position:relative;top:-1px}
.hero-pill b{white-space:nowrap}

/* ---- 5. Micro-label tier. Tracking has to fall as size falls: 0.20em
        to 0.24em at 12-13px isolates the letterforms and kills word
        shape. Floor the tier at 13px and halve the tracking.            */
.tri-card .mark{font-size:13px;letter-spacing:.10em}
.case-tag{font-size:13px;letter-spacing:.10em}
.shot-label{font-size:13px;letter-spacing:.08em}
.mech-points.thru .mech-point .n{font-size:13px;letter-spacing:.08em}
.foot-col h3,.foot-col h4{letter-spacing:.10em}
.fyp{letter-spacing:.10em}
.lk-n{font-size:13px;letter-spacing:.08em}
.fw-num{font-size:13px;letter-spacing:.08em}
.onb-h{font-size:13px;letter-spacing:.08em}
.onb-w{font-size:13px;letter-spacing:.08em}
.onb-w em{font-size:13px}
.dlv-i .dlv-k{font-size:13px;letter-spacing:.08em}
.calc-out label{font-size:13px;letter-spacing:.10em}
.res2-label{font-size:13px;letter-spacing:.10em}
.hl-step .hl-m{font-size:13px;letter-spacing:.10em}
.offer-lab{font-size:13px;letter-spacing:.10em}
.badge-eyebrow{letter-spacing:.10em}
.icl-consent{font-size:13px}
.icl-lab{font-size:13px}
.st i{font-size:13px}
.guarantee .eyebrow{letter-spacing:.12em}
.hv-label{font-size:13px;letter-spacing:.08em}
.lg-tag{letter-spacing:.10em}      /* on the dark card — tracking only */

/* KNOWN EXCEPTION: the SVG chart annotations (JAN..MAY, "5,600/wk",
   "TEN WEEKS OF POSTING", "CRITICAL MASS") render at 10.5-11px inside
   <text> nodes. They all PASS contrast; resizing them would need the
   chart geometry redrawn, so they are left as-is deliberately.          */

/* ---- 6a. --dim-2 (#6b655c) is a LIGHT-surface token. On the dark
        guarantee card it fell to 3.28:1. Lift it for that surface.      */
html.light .guarantee .eyebrow{color:#A39C90}          /* 6.97:1 on #13100d */

/* ---- 6b. White on #16A34A was 3.30:1 at 14px bold. !important is
        required here: .tp2-init carries an inline background in the
        markup, so a plain rule cannot reach it.                         */
html.light .tp2-init{background:#15803D!important}     /* 5.02:1 */

/* ---- 6c. Disabled form CTA sat at ~4.0:1 on its cream fill.           */
html.light .icl-go:disabled{color:#5C574F;background:#EAE2D9}   /* 5.9:1 */


/* =====================================================================
   MOTION + HEADLINE PASS — appended overrides (2026-08-06).
   ===================================================================== */

/* ---- HEADLINES: 500 was already correct; it only started READING as 600
        because the legibility pass turned body-wide antialiasing off, which
        thickens every glyph. Large display type does not need that help —
        only small body copy did. So antialiasing comes back for headings
        alone: h1/h2 stay Fellix Medium 500 but render at their intended
        weight again, while 15–16px copy keeps the solidity it gained.      */
h1, h2, h3, .cs-h1, .kinetic { -webkit-font-smoothing: antialiased; }

/* ---- MOTION: everything off except the three marquees ----------------
        KEPT (the only things that should move):
          .pmarquee-track  partner / "Trusted by" strip   (pscroll)
          .tapes           video testimonials             (tapeMarquee)
          .tp-track        written testimonials           (tpMarquee)                */
.amber,
.kinetic .kline > span,
.kinetic .hl,
.hero .eyebrow,
h1,
.hero-sub,
.hero-founder,
.cta-row,
.proof-row,
.see-results,
.dash-panel.in .dash-dot,
.case-pill::before,
.tape:hover .play,
.mono { animation: none !important; }

/* Those elements DEFAULT to opacity:0 and relied on the animation to fade
   them in — killing the animation alone would leave the page blank, so they
   must be forced visible in the same pass. Same for .rv scroll reveals,
   which are transition-driven rather than keyframe-driven.                */
.js .rv,
.js .rv.in,
.kinetic .kline > span,
.kinetic .hl,
.hero .eyebrow,
h1,
.hero-sub,
.hero-founder,
.cta-row,
.proof-row,
.see-results {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* NOT touched on purpose:
     - .faq-a, .icl-unlock, .icl-cal, .cal-lock, .vmodal, input focus rings.
       Those transitions are functional progressive disclosure (accordion,
       form unlock, booking calendar), not decorative motion. Removing them
       would break the form flow, not just its polish.
     - hover/focus feedback on buttons and links: interaction response, not
       something moving on the page unprompted.
     - html{scroll-behavior:smooth} on anchor nav — say the word and it goes. */


/* =====================================================================
   RESULTS + MICRO-LABEL PASS — appended overrides (2026-08-06).
   The first legibility pass was scoped to homepage class names; the
   sub-pages use parallel .rs-* classes that it never reached.
   ===================================================================== */

/* ---- B. hardcoded #8a8479 (3.71:1) and #EE5721 (3.25-3.49:1) as text.
        --dim-2 #6b655c = 5.77:1, --orange-ink #C2400F = 5.21:1.
        .rs-foot is the citation line under the figures — it was the least
        readable text on the page that exists to substantiate them.        */
.rs-foot, .rs-count, .rs-per { color: var(--dim-2); }
.rs-why a, .rs-proof         { color: var(--orange-ink); }
.rs-why a                    { border-bottom-color: rgba(194,64,15,.35); }

/* ---- C. tracking. .eyebrow needs html.light specificity to win, since
        `html.light .eyebrow` sets .26em further up the sheet.             */
html.light .eyebrow, .eyebrow { letter-spacing: .12em; }
.rs-flagtag        { font-size: 13px; letter-spacing: .10em; }
.rs-label          { font-size: 13px; letter-spacing: .08em; }
.rs-flagstats span { font-size: 13px; }

/* ---- D. CTA cleared the nav pill's curve by 2px; its shadow spilled.    */
#nav { padding-right: 16px; }


/* =====================================================================
   ACCENT-STRIP REMOVAL — appended override (2026-08-06).
   Removes the 4px linear-gradient(90deg,#EE5721,#E3F009) bar from the top
   of the flagship / stat / CTA cards. Each of these pseudo-elements draws
   only that strip, and all are absolutely positioned, so hiding them has
   no layout effect. Card surfaces, CTA fills and hero glows are untouched.
   ===================================================================== */
.rs-flag::before,
.cs-stat::before,
.cs-ctacard::before { display: none !important; }

/* ---- 17. v13.4 --------------------------------------------------------
   a) Two statement headings keep their full copy and shrink on small
      screens instead. Both were shortened first; Owais preferred the words
      back and the type smaller. These are the largest sizes that measured
      <=2 lines at 375/390/430 with the original wording, so the cap holds.
      Only <=440px, because 520px and up already fit at the default size.
   b) Skimmable list/step/card headers 500 -> 600. Fellix ships a real 600
      (assets/font-05.woff2) so this is not synthesised bold. Footer column
      labels are deliberately excluded: they are eyebrows, not headers.
   c) The locked booking calendar shows the availability it was always
      loading, and nothing else. It was opacity .30 + grayscale(1) under a
      96%-opaque scrim clipped to 300px, so only the widget header showed.
      Now the iframe is pulled up 358px so the visible window BEGINS at the
      date grid: the widget's own logo, "Amerify Discovery Call" title and
      duration/date/timezone box are cropped out, because a preview whose job
      is to show open dates gains nothing from them. Verified at 375/768/1280
      — the widget keeps one stacked layout, so a single offset works.
      Scoped to .locked, so unlocking restores the full, usable widget.
      Caveat: this crops a third-party layout by a fixed offset. If GHL
      restyles that header, re-measure the 358px.
      Clicks are blocked by the .cal-lock overlay, not by pointer-events —
      .icl-cal iframe carries pointer-events:auto!important, which has always
      overridden the locked rule.
--------------------------------------------------------------------- */
@media(max-width:440px){
  /* Tag-qualified on purpose: `.guarantee h2` is 0-1-1 and outranks a bare
     class, so `.h2-fit-sm` alone lost and the heading stayed at 30px. These
     match that specificity and come later in the source, so they win. */
  h2.h2-fit{font-size:clamp(24px,6.5vw,29px)}
  h2.h2-fit-sm{font-size:clamp(21px,5.6vw,25px)}
}
.leak h3,.seq-step h3,.fw-card h3,.fit-col h3,
.mech-point h3,.rs-why h3,.tl-step h3{font-weight:600}
.icl-cal.locked{max-height:420px}
.icl-cal.locked iframe{filter:grayscale(.12);opacity:.92!important;margin-top:-358px}
.cal-lock{background:linear-gradient(180deg,rgba(253,251,249,0) 0%,rgba(253,251,249,0) 74%,rgba(253,251,249,.97) 100%);
          align-items:flex-end;padding-bottom:12px}

/* ---- 18. Nav CTA must never wrap ------------------------------------
   Between 905px and 930px the desktop nav had only just appeared — the links
   unhide at 901px — and there was not enough room for it. "Book a call"
   wrapped to two lines, the pill grew from 48px to 72px, and it sat flush
   against "Team" with a 0px gap. Reported from a ~920px window; reproduced on
   every page that has the nav.
   Two parts: the pill can never wrap, and the band from the breakpoint to
   980px tightens the nav's own spacing so the three groups fit with air
   between them. Measured 901-1280px after the fix: one line everywhere, no
   document overflow, and at least a 35px gap between links and pill.
------------------------------------------------------------------- */
.nav-cta{white-space:nowrap}
@media(min-width:901px) and (max-width:980px){
  #nav{padding:0 24px}
  .nav-links{gap:22px;font-size:15px}
  .nav-cta{padding:12px 18px}
}

/* ---- 19. Buttons must not wrap at phone widths -----------------------
   Found by sweeping every page at 30 widths after the nav-CTA bug. Six .btn
   labels wrapped to two lines somewhere between 320px and 430px — and because
   .btn centres its content box but never set text-align, the second line sat
   left-aligned with an orphaned word ("SEE HOW THE POD IS / BUILT"), which
   read as broken rather than wrapped.
   Two parts: centre the text so any wrap looks deliberate, and step the label
   down at phone widths so it does not wrap in the first place. 15px/.06em was
   chosen over 14px because it clears every wrap from 360px up while keeping
   the primary CTA prominent; 14px would have shrunk every button on the site
   to fix one label. Vertical padding is untouched, so tap targets stay >=44px.
   Only 320px (iPhone SE 1st gen) still wraps, and now does so centred.
------------------------------------------------------------------- */
.btn{text-align:center}
@media(max-width:460px){
  .btn{font-size:15px;letter-spacing:.06em}
}


/* ---- blog ------------------------------------------------------------------
   Long-form typography on top of the chrome inherited from the service pages.
   Body copy carries no .rv: that class starts at opacity:0 and is revealed by
   IntersectionObserver, which would make the article invisible if the JS ever
   failed. Wrong trade for the primary content of an SEO page.
-------------------------------------------------------------------------- */
.bp-wrap{max-width:768px;margin:0 auto;padding:0 22px}
.bp-head{padding:132px 0 0}
.bp-kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
  margin-bottom:20px;font-weight:500}
.bp-h1{font-size:clamp(32px,4.6vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.022em;
  color:#141110;margin:0}
.bp-dek{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#4a453e;margin:22px 0 0}
.bp-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:30px 0 0;
  font-size:14px;color:#7d7669;letter-spacing:.01em}
.bp-meta .dot{opacity:.45}
.bp-body{padding:44px 0 8px}
/* `.bp-wrap>p` and not `.bp-body>p`: the paragraphs are children of the inner
   .bp-wrap, so a child selector on .bp-body matches nothing. The site resets
   margins globally, so getting this wrong silently removes ALL paragraph spacing
   rather than falling back to a browser default. */
.bp-body .bp-wrap>p{font-size:17.5px;line-height:1.72;color:#2b2721;margin:0 0 24px}
.bp-body .bp-wrap>p>strong{color:#141110;font-weight:600}
.bp-body h2{font-size:clamp(24px,2.6vw,31px);font-weight:500;line-height:1.2;
  letter-spacing:-.018em;color:#141110;margin:52px 0 18px}
.bp-body h3{font-size:19px;font-weight:600;line-height:1.35;color:#141110;margin:38px 0 12px}
.bp-list{margin:0 0 26px;padding-left:0;list-style:none}
.bp-list li{position:relative;padding-left:26px;font-size:17px;line-height:1.65;
  color:#2b2721;margin-bottom:12px}
ul.bp-list li:before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--orange)}
ol.bp-list{counter-reset:bp}
ol.bp-list li{counter-increment:bp}
ol.bp-list li:before{content:counter(bp);position:absolute;left:0;top:0;font-size:13px;
  font-weight:600;color:var(--orange);width:18px;text-align:center;line-height:1.9}
.bp-list li strong{color:#141110;font-weight:600}
.bp-quote{margin:34px 0;padding:2px 0 2px 24px;border-left:3px solid var(--orange)}
.bp-quote p{font-size:19px;line-height:1.55;color:#141110;margin:0;letter-spacing:-.008em}
.bp-rule{height:1px;background:rgba(20,17,16,.10);margin:44px 0}
.bp-tablewrap{overflow-x:auto;margin:0 0 30px;-webkit-overflow-scrolling:touch}
.bp-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:440px}
.bp-table th{text-align:left;font-weight:600;color:#141110;padding:11px 14px;
  border-bottom:2px solid rgba(20,17,16,.14);white-space:nowrap}
.bp-table td{padding:11px 14px;border-bottom:1px solid rgba(20,17,16,.08);color:#2b2721;
  line-height:1.5;vertical-align:top}
.bp-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(20,17,16,.055);padding:2px 6px;border-radius:5px}
/* `:not(.btn)` matters. A bare `.bp-body a` is 0-1-1 and outranks `.btn-orange`
   at 0-1-0, so it repainted the end-of-post CTA orange-on-orange and underlined
   it. Prose links only. */
.bp-body a:not(.btn){color:var(--orange);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.bp-body a:not(.btn):hover{text-decoration-thickness:2px}

/* end-of-post CTA */
.bp-cta{margin:56px 0 0;padding:34px 30px;border:1px solid rgba(20,17,16,.12);
  border-radius:var(--r-lg);background:#fdfbf9}
.bp-cta h3{font-size:22px;font-weight:500;color:#141110;margin:0 0 10px;letter-spacing:-.015em}
.bp-cta p{font-size:16px;line-height:1.6;color:#4a453e;margin:0 0 22px}
.bp-cta .btn{display:inline-block}
.bp-cta .bp-fine{font-size:13.5px;color:#7d7669;margin:14px 0 0}

/* more-posts */
.bp-more{padding:8px 0 100px}
.bp-more-cap{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#7d7669;
  margin:0 0 20px}
.bp-more-list{display:grid;gap:2px}
.bp-more-list a{display:block;padding:18px 0;border-top:1px solid rgba(20,17,16,.09);
  text-decoration:none;color:#141110}
.bp-more-list a:last-child{border-bottom:1px solid rgba(20,17,16,.09)}
.bp-more-list b{display:block;font-size:17px;font-weight:500;line-height:1.35;
  letter-spacing:-.012em}
.bp-more-list span{display:block;font-size:14.5px;color:#7d7669;margin-top:5px;line-height:1.5}
.bp-more-list a:hover b{color:var(--orange)}

/* index */
.bi-head{padding:132px 0 0;text-align:center}
.bi-h1{font-size:clamp(34px,5vw,58px);font-weight:400;line-height:1.06;letter-spacing:-.025em;
  color:#141110;margin:18px 0 0}
.bi-sub{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:#4a453e;margin:24px auto 0;
  max-width:560px}
.bi-list{padding:56px 0 110px;display:grid;gap:0}
.bi-item{display:block;padding:30px 0;border-top:1px solid rgba(20,17,16,.10);
  text-decoration:none;color:inherit}
.bi-item:last-child{border-bottom:1px solid rgba(20,17,16,.10)}
.bi-date{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7d7669}
.bi-t{font-size:clamp(21px,2.2vw,26px);font-weight:500;line-height:1.25;letter-spacing:-.016em;
  color:#141110;margin:9px 0 0}
.bi-d{font-size:16px;line-height:1.6;color:#4a453e;margin:10px 0 0;max-width:640px}
.bi-item:hover .bi-t{color:var(--orange)}
.bi-rt{font-size:13.5px;color:#7d7669;margin:12px 0 0}

@media(max-width:600px){
  .bp-head,.bi-head{padding-top:104px}
  .bp-body>p{font-size:17px}
  .bp-cta{padding:26px 22px}
}


.legacy-content{overflow-wrap:anywhere}.legacy-content p{font-size:17.5px;line-height:1.72;margin:0 0 24px}.legacy-content ul,.legacy-content ol{padding-left:25px;margin:16px 0 26px}.legacy-content li{font-size:17px;line-height:1.65;margin:0 0 10px}.legacy-content ul{list-style:disc}.legacy-content ol{list-style:decimal}.legacy-content img,.legacy-hero{display:block;max-width:100%;height:auto;margin:28px auto;border-radius:8px}.legacy-content figure{max-width:100%;margin:24px 0;overflow-x:auto}.legacy-content table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;margin:24px 0;font-size:15px}.legacy-content td,.legacy-content th{padding:12px;border:1px solid #ddd;line-height:1.5;min-width:100px}.legacy-content .post-banner{padding:24px;background:#f7f3ed;border-left:3px solid var(--orange);margin-bottom:32px}.legacy-content .post-banner h2{margin-top:0}.legacy-content details{border-bottom:1px solid #ddd;padding:16px 0}.legacy-content summary{cursor:pointer;font-weight:600}.legacy-content h4,.legacy-content h5,.legacy-content h6{font-size:18px;margin:24px 0 12px}.legacy-content figcaption{font-size:14px;color:#6a625b;margin-top:10px}.legacy-back{display:inline-block;margin:30px 0 0}.legacy-archive-title{margin:52px 0 16px;font-size:28px}