*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#FAF7F2;--surface:#FFFFFF;--surface-warm:#F5F0EA;--surface-warm-2:#ECE6DD;
  --ink:#0E0E0C;--ink-2:#6B6560;--muted:#9B9590;--warm-dark:#1A1714;
  --clay:#CC785C;--clay-deep:#B4634A;--yellow:#FFC72C;--green:#2E8B57;
  --border:rgba(14,14,12,0.09);--border-strong:rgba(14,14,12,0.16);
  --radius:18px;--radius-sm:12px;--radius-pill:100px;--ease:cubic-bezier(0.16,1,0.3,1);
  --display:'Instrument Serif',Georgia,serif;--body:'Geist','Inter',-apple-system,sans-serif;
  --max:1080px;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:96px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.08;color:var(--ink)}
em{font-style:italic;color:var(--clay)}
a{color:var(--clay);text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
main.wrap{padding-bottom:3rem}
.label{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:0.9rem}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--clay)}
/* hero */
/* The global .site-head nav is position:sticky (in normal flow), so the hero
   needs no clearance for it — just a small top gap above the heading. */
.hero{padding:2rem 0 0.8rem}
.hero h1{font-size:clamp(2rem,5vw,3rem);max-width:none;margin-bottom:0.8rem}
.hero p{color:var(--ink-2);font-size:1.06rem;max-width:62ch;margin-bottom:0.75rem}
.hero p:last-of-type{margin-bottom:0}
.statline{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.3rem;font-size:0.82rem;color:var(--ink-2)}
.progress-intro{margin:1.4rem 0 0.5rem;max-width:74ch;padding-top:1.2rem;border-top:1px solid var(--border)}
.progress-intro p{font-size:0.93rem;color:var(--ink-2);line-height:1.65;margin-bottom:0.75rem}
.progress-intro p:last-child{margin-bottom:0}
.progress-intro b{color:var(--ink);font-weight:600}
.statline b{font-family:var(--display);color:var(--clay);font-size:1.3rem;display:block;line-height:1}
/* video */
.vid-wrap{padding:2rem 0 0}
.vid-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--warm-dark);box-shadow:0 12px 48px rgba(14,14,12,0.12)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
/* testimonials */
.testi{padding-block:3.4rem;border-top:1px solid var(--border)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.8rem}
@media(max-width:760px){.testi-grid{grid-template-columns:1fr}}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.tcard blockquote{font-family:var(--display);font-size:1.05rem;line-height:1.55;color:var(--ink);margin:0 0 1rem;font-style:italic}
.tcard cite{font-size:0.82rem;color:var(--muted);font-style:normal}
.tcard cite b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:0.1rem}
/* hero ctas */
.hero-ctas{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1.6rem}
.hero-ctas a{display:inline-flex;align-items:center;gap:0.45rem;border-radius:var(--radius-pill);padding:0.72rem 1.4rem;font-size:0.9rem;font-weight:600;transition:all .2s var(--ease);white-space:nowrap}
.hero-cta-primary{display:inline-flex;align-items:center;gap:0.45rem;border-radius:var(--radius-pill);padding:0.72rem 1.4rem;font-size:0.9rem;font-weight:600;white-space:nowrap;background:var(--yellow);color:var(--ink);border:1px solid var(--yellow)}
.hero-cta-primary:hover{filter:brightness(1.05)}
.hero-cta-ghost{background:transparent;color:var(--ink);border:1px solid var(--border-strong)}
.hero-cta-ghost:hover{border-color:var(--ink);background:var(--surface-warm)}
@media(max-width:560px){.hero-ctas{flex-direction:column}.hero-ctas a{justify-content:center}.statline{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}}
/* Hero copy left-aligned on desktop + tablet (>=561px), covering both the 2-col
   view and the 1-col stacked view; only the full-bleed phone hero (<=560) stays centred. */
@media(min-width:561px){.hero-text{text-align:left}.hero-ctas{justify-content:flex-start}}
/* progress strip */
.progress{display:flex;gap:0.6rem;margin:1.6rem 0 0.2rem;flex-wrap:wrap}
.pstep{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.7rem 0.9rem;cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;gap:0.6rem;border-left:4px solid var(--border-strong)}
.pstep:hover{border-color:var(--border-strong)}
.pstep.active{border-left-color:var(--clay);background:var(--surface-warm)}
.pstep.has{border-left-color:var(--green)}
.pstep .pi{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:var(--ink-2);flex-shrink:0}
.pstep.has .pi{background:var(--green);border-color:var(--green);color:#fff}
.pstep .pl{font-size:0.84rem;font-weight:600;color:var(--ink);line-height:1.1}
.pstep .pl small{display:block;font-weight:400;color:var(--muted);font-size:0.72rem}
/* crumb / back */
.crumbrow{display:flex;align-items:center;gap:0.8rem;margin:1.8rem 0 0.6rem;min-height:34px;flex-wrap:wrap}
.backbtn{display:inline-flex;align-items:center;gap:0.45rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:0.45rem 1rem;font-size:0.86rem;font-weight:500;color:var(--ink);cursor:pointer;transition:all .2s var(--ease)}
.backbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.backbtn svg{width:15px;height:15px}
.crumb{font-size:1.05rem;color:var(--ink-2);line-height:1.5}
.crumb b{color:var(--clay);font-weight:600;font-family:var(--display);font-size:1.15rem}
/* control strip */
.control{background:var(--warm-dark);color:var(--paper);border-radius:var(--radius);padding:1.3rem 1.5rem;margin:1.2rem 0 0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.control .ic{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:var(--yellow);color:var(--warm-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--display);font-size:0.95rem}
.control-body{flex:1;min-width:200px}
.control h4{color:var(--paper);font-size:1.05rem;margin-bottom:0.15rem}
.control p{color:#cfc8bf;font-size:0.88rem;margin:0}
.demobtn.ondark{border-color:rgba(255,255,255,0.32);color:var(--paper);background:transparent}
.demobtn.ondark:hover{background:var(--paper);color:var(--warm-dark);border-color:var(--paper)}
/* pillar grid */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;margin:1.6rem 0 0}
@media(max-width:720px){.pillars{grid-template-columns:1fr}}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.7rem;border-top:4px solid var(--clay);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);position:relative}
.pcard[data-p="convert"]{border-top-color:var(--yellow)}
.pcard[data-p="deliver"]{border-top-color:var(--green)}
.pcard[data-p="run"]{border-top-color:var(--clay-deep)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(14,14,12,0.1)}
.pcard .pnum{font-family:var(--display);color:var(--clay);font-size:0.9rem;letter-spacing:0.04em}
.pcard h3{font-size:1.5rem;margin:0.15rem 0 0.5rem}
.pcard .ptag{font-size:0.92rem;color:var(--ink-2);margin-bottom:1rem}
.pcard .ein{display:flex;flex-wrap:wrap;gap:0.4rem;border-top:1px solid var(--border);padding-top:0.9rem}
.chip{font-size:0.76rem;background:var(--surface-warm-2);border-radius:var(--radius-pill);padding:0.3rem 0.7rem;color:var(--ink-2)}
.chip.sel{background:var(--clay);color:#fff}
.pcard .open{display:inline-flex;align-items:center;gap:0.4rem;margin-top:1rem;font-size:0.86rem;font-weight:600;color:var(--clay)}
/* Inline arrow SVG had no explicit dimensions and was ballooning inside the
   flex container when "See the N elements inside" wrapped to multiple lines.
   Lock to 14px, flex-shrink off, so it stays a tidy chevron beside the text. */
.pcard .open svg{width:14px;height:14px;flex:none}
.pcard .selcount{position:absolute;top:1.1rem;right:1.1rem;font-size:0.72rem;font-weight:700;background:var(--green);color:#fff;border-radius:var(--radius-pill);padding:2px 9px;display:none}
.pcard .selcount.on{display:inline-block}
/* element detail list */
.elhead h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:0.3rem}
.elhead p{color:var(--ink-2);max-width:60ch}
.els{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.5rem}
.el{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.el.sel{border-color:var(--clay);box-shadow:0 0 0 2px rgba(204,120,92,0.18)}
.el-main{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start}
.el-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding-top:0.9rem;border-top:1px solid var(--border);flex-wrap:wrap}
.el-demo{font-size:0.82rem;color:var(--ink-2)}.el-demo b{color:var(--ink)}
.demobtn{display:inline-flex;align-items:center;gap:0.4rem;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill);padding:0.5rem 1.05rem;font-size:0.84rem;font-weight:600;white-space:nowrap;transition:all .2s var(--ease)}
.demobtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.demobtn svg{width:14px;height:14px}
.el .en{font-family:var(--display);color:var(--clay);font-size:1rem}
.el h3{font-size:1.3rem;margin:0.1rem 0 0.15rem}
.el .etag{font-size:0.9rem;color:var(--clay-deep);font-weight:500;margin-bottom:0.5rem}
.el .edesc{font-size:0.92rem;color:var(--ink-2);margin-bottom:0.6rem}
.gaintag{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.72rem;font-weight:600;color:var(--green);background:rgba(46,139,87,0.1);border-radius:var(--radius-pill);padding:0.2rem 0.65rem;margin-bottom:0.7rem}
.gaintag svg{width:13px;height:13px}
.el ul{list-style:none;margin-top:0.3rem}
.el li{display:flex;gap:0.55rem;align-items:flex-start;font-size:0.86rem;color:var(--ink-2);padding:0.18rem 0}
.el li svg{width:15px;height:15px;color:var(--green);flex-shrink:0;margin-top:0.2rem}
.t2{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#8a6d12;background:rgba(255,199,44,0.2);border-radius:var(--radius-pill);padding:1px 7px;margin-left:6px;vertical-align:middle}
.addbtn{align-self:start;white-space:nowrap;display:inline-flex;align-items:center;gap:0.45rem;border:1px solid var(--clay);background:var(--surface);color:var(--clay);border-radius:var(--radius-pill);padding:0.55rem 1.1rem;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease)}
.addbtn:hover{background:var(--clay);color:#fff}
.addbtn.added{background:var(--clay);color:#fff}
.addbtn svg{width:15px;height:15px}
@media(max-width:560px){.el-main{grid-template-columns:1fr}.addbtn{justify-self:start}}
/* pillar footer nav */
.pillnav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.nextbtn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--ink);color:#fff;border:none;border-radius:var(--radius-pill);padding:0.75rem 1.4rem;font-size:0.92rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease)}
.nextbtn:hover{background:var(--clay)}
.nextbtn.finish{background:var(--clay)}
.nextbtn.finish:hover{background:var(--clay-deep)}
.nextbtn svg{width:16px;height:16px}
.nexthint{font-size:0.8rem;color:var(--muted)}
/* sticky plan tray */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--warm-dark);color:var(--paper);transform:translateY(100%);transition:transform .35s var(--ease)}
.tray.on{transform:translateY(0)}
.tray .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;padding-top:0.7rem;padding-bottom:0.7rem}
.tray .tinfo{font-size:0.9rem;color:#cfc8bf}
.tray .tinfo b{color:var(--paper);font-weight:600}
.tray .tinfo .cov{display:block;font-size:0.76rem;color:var(--muted);margin-top:2px}
.tray .tbtns{display:flex;gap:0.6rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:0.45rem;border-radius:var(--radius-pill);padding:0.72rem 1.2rem;font-size:0.88rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s var(--ease);min-height:44px}
.btn svg{width:16px;height:16px}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,0.28)}
.btn-ghost:hover{background:rgba(255,255,255,0.1)}
.btn-primary{background:var(--clay);color:#fff}
.btn-primary:hover{background:var(--clay-deep)}
.btn-yellow{background:var(--yellow);color:var(--warm-dark)}
.btn-yellow:hover{filter:brightness(1.05)}
@media(max-width:560px){.tray .wrap{flex-direction:column;align-items:stretch}.tray .tbtns{justify-content:stretch}.tray .tbtns .btn{flex:1;justify-content:center}}
/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(14,14,12,0.55);display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.sheet{background:var(--paper);border-radius:var(--radius);max-width:640px;width:100%;max-height: 70vh;overflow:auto;padding:2rem;position:relative;box-shadow:0 30px 80px rgba(0,0,0,0.3)}
.sheet h2{font-size:1.85rem;margin-bottom:0.4rem}
.sheet .ml{font-size:0.95rem;color:var(--ink-2);margin-bottom:1.2rem}
.close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.close svg{width:16px;height:16px}
/* digest */
.cov-line{display:flex;align-items:center;gap:0.6rem;font-size:0.86rem;color:var(--ink-2);background:var(--surface-warm-2);border-radius:var(--radius-sm);padding:0.7rem 0.9rem;margin-bottom:1.1rem}
.cov-line b{color:var(--ink)}
.summary{background:var(--warm-dark);color:var(--paper);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.summary h4{color:var(--yellow);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.5rem;font-family:var(--body);font-weight:700}
.summary p{color:#e7e1d8;font-size:0.95rem;margin:0}
.dgroup{margin-bottom:1.1rem}
.dgroup .dgh{font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--clay);font-weight:700;margin-bottom:0.5rem}
.dgroup .ditem{display:flex;gap:0.7rem;align-items:flex-start;padding:0.55rem 0;border-bottom:1px solid var(--border)}
.dgroup .ditem .dn{font-family:var(--display);color:var(--clay);font-size:0.95rem;min-width:1.7rem}
.dgroup .ditem .dbody b{color:var(--ink);display:block;font-size:0.95rem}
.dgroup .ditem .dbody span{color:var(--ink-2);font-size:0.86rem}
.dgroup .ditem .dgain{margin-left:auto;font-size:0.66rem;font-weight:700;color:var(--green);background:rgba(46,139,87,0.1);border-radius:var(--radius-pill);padding:2px 8px;white-space:nowrap;align-self:center}
.empty{color:var(--ink-2);font-size:0.92rem;padding:0.6rem 0 1.2rem}
.addmore{display:inline-flex;align-items:center;gap:0.5rem;width:100%;justify-content:center;border:1px dashed var(--border-strong);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill);padding:0.7rem 1.2rem;font-size:0.9rem;font-weight:600;cursor:pointer;margin:0.4rem 0 1.2rem;transition:all .2s var(--ease)}
.addmore:hover{border-color:var(--clay);color:var(--clay)}
.addmore svg{width:16px;height:16px}
.ctas{display:flex;flex-direction:column;gap:0.6rem}
.ctas .btn{justify-content:center;padding:0.85rem 1.2rem;font-size:0.95rem}
.finehint{font-size:0.78rem;color:var(--muted);margin-top:1rem;line-height:1.5}
/* two-path plan capture */
.plan-split{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:1.2rem;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.psplit-opt{padding:1.3rem 1.4rem}
.psplit-opt:first-child{background:var(--warm-dark);color:var(--paper)}
.psplit-opt:last-child{background:var(--surface-warm)}
.psplit-div{display:flex;align-items:center;justify-content:center;width:36px;background:var(--surface-warm-2);font-size:0.72rem;font-weight:700;color:var(--muted);letter-spacing:0.04em;writing-mode:vertical-lr;text-orientation:mixed}
.psplit-head{font-family:var(--display);font-size:1.1rem;margin-bottom:0.25rem}
.psplit-opt:first-child .psplit-head{color:var(--yellow)}
.psplit-body{font-size:0.83rem;color:var(--ink-2);margin-bottom:1rem;line-height:1.55}
.psplit-opt:first-child .psplit-body{color:#cfc8bf}
.psplit-opt .ctas{flex-direction:column;display:flex;gap:0.5rem}
@media(max-width:580px){.plan-split{grid-template-columns:1fr}.psplit-div{width:100%;height:28px;writing-mode:horizontal-tb}}
.rm{font-size:0.76rem;color:var(--muted);cursor:pointer;border:none;background:none;margin-left:auto;align-self:center}
.rm:hover{color:var(--clay-deep)}
/* .disc removed — the homepage's bespoke disclaimer block was creating a
   visual duplicate with the global Footer.astro footer-disclaimer. The
   global one covers the same legal ground. Product-specific fine print
   (Tier 2 / hours counter caveats) can be re-added later as a compact
   inline note if Tommy requests it. */
/* command centre lead block */
.cc{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFFFFF,#F5F0EA);border:1px solid var(--border);border-radius:var(--radius);padding:1.9rem 1.9rem 1.7rem;margin:0.5rem 0 0}
.cc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--clay),var(--yellow))}
.cc h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:0.15rem 0 0.45rem}
.cc .ccsub{color:var(--ink-2);max-width:66ch;font-size:1.02rem}
.ccswitch{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.4rem 0 0}
.ccpill{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill);padding:0.68rem 1.05rem;font-size:0.86rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease);min-height:44px}
.ccpill:hover{border-color:var(--clay);color:var(--clay)}
.ccpill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:560px){.ccswitch{flex-direction:column}.ccpill{width:100%;text-align:center}.ccview{flex-direction:column;align-items:stretch}.ccview .nextbtn{width:100%;justify-content:center}}
.ccview{display:flex;gap:1.1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.1rem 1.25rem}
.ccview .ccinfo{flex:1;min-width:230px}
.ccview .ccinfo b{font-family:var(--display);font-size:1.18rem;color:var(--ink);font-weight:400;display:block;margin-bottom:0.15rem}
.ccview .ccinfo span{font-size:0.9rem;color:var(--ink-2)}
.cc .trust{font-size:0.82rem;color:var(--muted);margin-top:0.9rem}
/* section intro above the pillar grid */
.gridintro{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0.4rem 0 0;flex-wrap:wrap}
.gridintro h2{font-size:clamp(1.4rem,3.2vw,1.9rem)}
.gridintro .hint{font-size:0.84rem;color:var(--muted)}
/* control layer foundation strip (downplayed, sits under the pillars) */
.foundation{display:flex;align-items:center;gap:0.95rem;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--clay);border-radius:var(--radius-sm);padding:0.95rem 1.15rem;margin:1.5rem 0 0}
.foundation .fic{width:27px;height:27px;flex-shrink:0;border-radius:7px;background:var(--surface-warm-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--display);font-size:0.82rem}
.foundation .fbody{flex:1;min-width:180px;font-size:0.86rem;color:var(--ink-2);line-height:1.5}
.foundation .fbody b{color:var(--ink);font-weight:600}
.foundation .flink{flex-shrink:0;border:none;background:none;color:var(--clay);font-weight:600;font-size:0.84rem;cursor:pointer;white-space:nowrap;font-family:var(--body);padding:0}
.foundation .flink:hover{color:var(--clay-deep);text-decoration:underline}
@media(max-width:620px){.foundation{flex-wrap:wrap}}
/* embedded demo overlay */
.demoOv{position:fixed;inset:0;z-index:70;background:rgba(14,14,12,0.72);display:none;flex-direction:column;align-items:center;padding:18px}
.demoOv.on{display:flex}
/* Demo bar + iframe span the full backdrop width (no max-width cap). */
.demoOv .dbar,.demoOv .dframe{width:100%}
.demoOv .dbar{display:flex;align-items:center;gap:0.9rem;background:var(--warm-dark);color:var(--paper);border-radius:var(--radius) var(--radius) 0 0;padding:0.7rem 1.1rem}
.demoOv .dbar .dt{flex:1;min-width:0;font-family:var(--display);font-size:1.1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demoOv .dbar .dtag{font-size:0.72rem;color:#cfc8bf;letter-spacing:0.04em;display:block;font-family:var(--body)}
.demoOv .dbar a.newtab,.demoOv .dbar button.newtab{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:600;color:var(--paper);border:1px solid rgba(255,255,255,0.3);border-radius:var(--radius-pill);padding:0.4rem 0.9rem;white-space:nowrap;cursor:pointer;font-family:inherit;text-decoration:none}
.demoOv .dbar a.newtab:hover{background:var(--paper);color:var(--warm-dark);border-color:var(--paper)}
.demoOv .dbar button.newtab:hover{opacity:0.85}
.demoOv .dbar a.newtab svg{width:13px;height:13px}
.demoOv .dbar .dclose{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);background:transparent;color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.demoOv .dbar .dclose:hover{background:var(--paper);color:var(--warm-dark)}
.demoOv .dbar .dclose svg{width:16px;height:16px}
.demoOv .dframe{flex:1;border:none;width:100%;background:var(--paper);border-radius:0 0 var(--radius) var(--radius)}
@media(max-width:560px){.demoOv{padding:8px}.demoOv .dbar .dtag{display:none}}
.hidden{display:none}
/* ===== HOW IT WORKS ===== */
.hiw{padding-block:3.4rem;border-top:1px solid var(--border)}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2rem}
@media(max-width:760px){.hiw-steps{grid-template-columns:1fr}}
.hiw-step{position:relative;padding-left:1rem;border-left:3px solid var(--border)}
.hiw-step.active-step{border-left-color:var(--clay)}
.hiw-num{font-family:var(--display);font-size:0.8rem;letter-spacing:0.1em;color:var(--clay);margin-bottom:0.5rem;text-transform:uppercase}
.hiw-step h3{font-size:1.25rem;margin-bottom:0.5rem}
.hiw-step p{font-size:0.9rem;color:var(--ink-2);line-height:1.6;margin-bottom:0.5rem}
.hiw-step p:last-of-type{margin-bottom:0}
.hiw-tag{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.72rem;font-weight:600;color:var(--clay);background:var(--claude-dim,rgba(204,120,92,0.1));border-radius:var(--radius-pill);padding:0.2rem 0.65rem;margin-top:0.3rem}

/* ===== PATH ROUTING SECTION ===== */
.paths{padding-block:3.4rem;border-top:1px solid var(--border)}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:2rem 0 0}
@media(max-width:720px){.path-grid{grid-template-columns:1fr}}
.path-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;position:relative;overflow:hidden}
.path-card.path-primary{background:var(--warm-dark);color:var(--paper);border-color:var(--warm-dark)}
.path-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clay),var(--yellow))}
.path-card.path-primary::before{background:linear-gradient(90deg,var(--yellow),var(--clay))}
.path-num{font-family:var(--display);font-size:0.82rem;letter-spacing:0.06em;color:var(--clay);margin-bottom:0.6rem}
.path-card.path-primary .path-num{color:var(--yellow)}
.path-card h3{font-size:1.55rem;margin-bottom:0.2rem}
.path-card.path-primary h3{color:var(--paper)}
.path-tag{font-size:0.88rem;color:var(--muted);margin-bottom:1rem;display:block}
.path-card.path-primary .path-tag{color:#cfc8bf}
.path-body{font-size:0.93rem;color:var(--ink-2);line-height:1.65;margin-bottom:1.2rem}
.path-card.path-primary .path-body{color:#ddd8d0}
.path-includes{list-style:none;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:0.4rem}
.path-includes li{display:flex;align-items:center;gap:0.5rem;font-size:0.83rem;color:var(--ink-2)}
.path-card.path-primary .path-includes li{color:#cfc8bf}
.path-includes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);flex-shrink:0}
.path-card.path-primary .path-includes li::before{background:var(--yellow)}
.path-actions{display:flex;flex-direction:column;gap:0.55rem}
.path-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border-radius:var(--radius-pill);padding:0.72rem 1.3rem;font-size:0.9rem;font-weight:600;transition:all .2s var(--ease);text-align:center}
.path-btn-yellow{background:var(--yellow);color:var(--ink);border:1px solid var(--yellow)}
.path-btn-yellow:hover{filter:brightness(1.05)}
.path-btn-clay{background:var(--clay);color:#fff;border:1px solid var(--clay)}
.path-btn-clay:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.path-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border-strong)}
.path-btn-ghost:hover{border-color:var(--ink);background:var(--surface-warm)}
.path-btn-ghost-light{background:transparent;color:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.28)}
.path-btn-ghost-light:hover{color:#fff;border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.08)}
.quiz-strip{margin-top:1.2rem;background:var(--surface-warm);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.quiz-strip-body{flex:1;min-width:200px}
.quiz-strip-body b{font-family:var(--display);font-size:1.05rem;display:block;margin-bottom:0.15rem}
.quiz-strip-body span{font-size:0.86rem;color:var(--ink-2)}

/* ===== SITE HEADER: nav + always-on ticker ===== */
.site-head{position:sticky;top:0;z-index:55;background:rgba(250,247,242,0.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:30px;display:block}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-size:0.88rem;color:var(--ink-2);font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.nav-cta{background:var(--ink);color:#fff;padding:0.5rem 1.05rem;border-radius:var(--radius-pill);font-weight:600}
.nav-links a.nav-cta:hover{background:var(--clay);color:#fff}
.nav-burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.ticker{background:var(--warm-dark);color:var(--paper)}
.ticker-inner{display:flex;align-items:center;gap:1.1rem;height:38px;font-size:0.82rem;overflow:hidden;white-space:nowrap}
.ticker .titem{color:#e7e1d8;overflow:hidden;text-overflow:ellipsis}
.ticker b{font-family:var(--display);color:var(--yellow);font-size:1.08rem;font-weight:400}
.tlive{display:inline-flex;align-items:center;gap:0.4rem;color:var(--yellow);font-weight:700;font-size:0.66rem;text-transform:uppercase;letter-spacing:0.1em;flex-shrink:0}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--yellow);animation:tpulse 1.6s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.8)}}
.tsep{width:1px;height:15px;background:rgba(255,255,255,0.22);flex-shrink:0}
.mmenu{position:fixed;top:0;right:-300px;width:300px;max-width:84vw;height:100%;background:var(--surface);box-shadow:-12px 0 44px rgba(0,0,0,0.16);z-index:80;transition:right .32s var(--ease);display:flex;flex-direction:column;gap:0.1rem;padding:4.6rem 1.6rem 2rem}
.mmenu.open{right:0}
.mmenu a{padding:0.85rem 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--border)}
.mmenu a.mmenu-cta{margin-top:1rem;background:var(--ink);color:#fff;text-align:center;border-radius:var(--radius-pill);border:none;padding:0.85rem}
.mclose{position:absolute;top:0.6rem;right:0.7rem;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink-2);line-height:1;padding:0.6rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px}
/* ticker mobile helpers */
.t-short{display:none}
@media(max-width:880px){.nav-links{display:none}.nav-burger{display:flex}.ticker-inner{font-size:0.74rem;gap:0.7rem}.ticker .tsep{display:none}.ticker b{font-size:0.95rem}.t-long{display:none}.t-short{display:inline}.t-hide-m{display:none}}
/* ── Mobile QC fixes ── */
@media(max-width:620px){
  /* Progress strip: horizontal scroll instead of wrapping rows */
  .progress{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:0.4rem;margin-right:-24px;padding-right:24px}
  /* 110px was too narrow for the longest label ("Command Centre") — after the
     number circle, gap, and padding it left ~44px for text, so it overflowed
     the card. Widen to fit a clean two-line wrap; min-width:0 lets the flex
     text wrap instead of spilling out. */
  .pstep{min-width:150px;flex-shrink:0}
  .pstep .pl{min-width:0;overflow-wrap:break-word}
  /* Reduce section padding on mobile. padding-block (not the padding
     shorthand) so .wrap's 24px side padding survives — otherwise sections
     run edge-to-edge on mobile. */
  .band{padding-block:2.4rem}
  .paths{padding-block:2.4rem}
  .hiw{padding-block:2.4rem}
  .testi{padding-block:2.4rem}
  /* Crumb text smaller on mobile */
  .crumb{font-size:0.9rem}
  .crumb b{font-size:1rem}
  /* HIW step tags wrap better */
  .hiw-tag{font-size:0.68rem}
  /* Video top padding */
  .vid-wrap{padding:1.4rem 0 0}
}
/* plan capture form + branded footer */
.planform{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.6rem}
.planform .ff{display:flex;gap:0.6rem}
.planform input{flex:1;width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0.7rem 0.9rem;font-family:var(--body);font-size:0.92rem;background:var(--surface);color:var(--ink)}
.planform input:focus{outline:none;border-color:var(--clay)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--clay)}
.planform .fineprint{font-size:0.74rem;color:var(--muted);text-align:center}
.orline{display:flex;align-items:center;gap:0.8rem;margin:0.9rem 0 0.2rem;color:var(--muted);font-size:0.78rem}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--border)}
.sfoot{background:var(--warm-dark);color:#cfc8bf;margin-top:3rem;padding:2.4rem 0}
.sfoot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem}
.sfoot img{height:24px;margin-bottom:0.7rem}
.sfoot a{color:#cfc8bf}.sfoot a:hover{color:var(--paper)}
.sfoot .fcol{font-size:0.86rem;line-height:1.9}
.sfoot .fcol b{color:var(--paper);font-family:var(--display);font-weight:400;font-size:1rem;display:block;margin-bottom:0.4rem}
.vidslot{display:flex;align-items:center;justify-content:center;gap:0.6rem;background:var(--surface-warm-2);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:0.9rem;font-size:0.84rem;color:var(--ink-2);margin-top:1rem;cursor:default}
.vidslot svg{width:18px;height:18px;color:var(--clay)}
.nav-links a.nav-cta-y{background:var(--yellow);color:var(--ink)}
.nav-links a.nav-cta-y:hover{background:var(--yellow);color:var(--ink);filter:brightness(1.04)}
/* ── Nav dropdown ── */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-trigger{background:none;border:none;cursor:pointer;font-size:0.88rem;color:var(--ink-2);font-weight:500;padding:4px 0;display:inline-flex;align-items:center;gap:0.28rem;font-family:var(--body);line-height:1;white-space:nowrap}
.nav-drop-trigger:hover,.nav-drop.open .nav-drop-trigger{color:var(--ink)}
.nav-chev{font-size:0.64rem;transition:transform 0.2s;display:inline-block;margin-top:1px}
.nav-drop.open .nav-chev{transform:rotate(180deg)}
/* Continuous hit area: menu sits at top:100% with padding-top bridging the visual gap — no dead zone */
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;opacity:0;pointer-events:none;transition:opacity 0.18s,transform 0.18s;transform:translateX(-50%) translateY(-4px);z-index:200;min-width:240px}
.nav-drop.open .nav-drop-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* Inner card */
.nav-drop-inner{background:#fff;border:1px solid rgba(14,14,12,0.09);border-radius:0.8rem;box-shadow:0 8px 32px rgba(14,14,12,0.12);padding:0.45rem}
.nav-drop-item{display:flex;flex-direction:column;gap:0.15rem;padding:0.75rem 0.9rem;border-radius:0.55rem;text-decoration:none;transition:background 0.12s}
.nav-drop-item:hover{background:rgba(204,120,92,0.07)}
.ndi-title{font-size:0.85rem;font-weight:600;color:var(--ink)}
.ndi-sub{font-size:0.75rem;color:var(--ink-2)}
.nav-drop-divider{height:1px;background:var(--border);margin:0.3rem 0.9rem}
/* ===== integrated live-homepage sections (problem + faq) ===== */
.band{padding-block:3.4rem;border-top:1px solid var(--border)}
.band .eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--clay);font-weight:700;margin-bottom:0.8rem}
.band h2{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:0.5rem}
.band .lead{color:var(--ink-2);max-width:64ch;font-size:1.02rem}
.prob-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:2rem 0 0;padding:1.6rem 0;border-top:1px solid var(--border)}
.prob-stats .ps{padding-right:1.8rem}
.prob-stats .ps+.ps{padding-left:1.8rem;padding-right:0;border-left:1px solid var(--border)}
.prob-stats .ps b{font-family:var(--display);color:var(--clay);font-size:2.1rem;display:block;line-height:1;margin-bottom:0.3rem}
.prob-stats .ps span{font-size:0.86rem;color:var(--ink-2)}
.pains{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:1.9rem}
.pain{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1.5rem;border-left:3px solid var(--clay)}
.pain h4{font-size:1.2rem;margin-bottom:0.3rem}
.pain p{font-size:0.92rem;color:var(--ink-2);margin:0}
@media(max-width:720px){.pains,.prob-stats{grid-template-columns:1fr}.prob-stats .ps{padding-right:0}.prob-stats .ps+.ps{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:1rem;margin-top:0.4rem}}
/* FAQ rows — renamed from .faq to .qa to avoid collision with main.css's
   .faq section rule (used on /audit/, /setup/, /quickstart/, /quiz/ which
   apply giant padding + warm-surface background to .faq). */
.faqs{margin-top:1.7rem;border-top:1px solid var(--border)}
.qa{border-bottom:1px solid var(--border)}
.qa summary{cursor:pointer;list-style:none;padding:1.15rem 0;font-family:var(--display);font-size:1.22rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--clay);font-size:1.5rem;line-height:1;font-family:var(--body)}
.qa[open] summary::after{content:"\2013"}
.qa p{padding:0 0 1.15rem;color:var(--ink-2);font-size:0.95rem;max-width:74ch;margin:0}

  /* hero two-column layout */
  .hero-inner{display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:center}
  /* hero duo: Tommy + Claude bot + live hours */
  .hero-duo{display:flex;flex-direction:column;align-items:center;max-width:320px;position:relative}
  .duo-stage-wrap{position:relative;width:100%;padding-bottom:28px}
  .duo-stage{position:relative;height:340px;width:100%;border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(14,14,12,0.16),0 0 0 1.5px rgba(204,120,92,0.18)}
  .duo-stage::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clay),var(--canary));z-index:3}
  .duo-tommy{height:100%;width:100%;max-width:none;object-fit:cover;object-position:center top;position:relative;z-index:1}
  .duo-bot{position:absolute;bottom:-68px;right:-6px;height:42%;width:auto;z-index:4;filter:drop-shadow(0 12px 28px rgba(14,14,12,0.28));animation:botFloat 3.6s ease-in-out infinite}
  @keyframes botFloat{0%,100%{transform:translateY(0) rotate(-1deg)}40%{transform:translateY(-12px) rotate(2deg)}70%{transform:translateY(-5px) rotate(-0.5deg)}}
  @media(prefers-reduced-motion:reduce){.duo-bot{animation:none}}
  .duo-counter{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.4rem;margin-top:1rem;width:100%;text-align:center}
  .duo-num{font-family:var(--display);font-size:3.2rem;color:var(--clay);line-height:1;letter-spacing:-0.02em}
  .duo-desc{font-size:0.85rem;color:var(--ink-2);margin-top:0.15rem}
  .duo-live{font-size:0.75rem;color:var(--muted);margin-top:0.4rem;display:flex;align-items:center;justify-content:center;gap:0.4rem}
  .duo-pulse{width:7px;height:7px;border-radius:50%;background:var(--clay);display:inline-block;animation:duoPulse 1.4s ease-in-out infinite}
  @keyframes duoPulse{0%,100%{opacity:1}50%{opacity:0.25}}
  @media(max-width:900px){.hero-inner{grid-template-columns:1fr}.hero-duo{max-width:300px;margin:0 auto 2rem;order:-1}}
  /* Mobile hero (Tommy 2026-06-10): full-bleed portrait replacing the old
     thumbnail-row. Bleeds past .wrap's 24px side padding; bot moved up into
     the clear image zone; counter becomes a horizontal strip below the bleed. */
  @media(max-width:560px){
    .hero{padding-top:0}
    .hero-inner{gap:0}
    .hero-duo{display:block;max-width:none;width:calc(100% + 48px);margin:-0.5rem -24px 0;order:-1;position:relative}
    .duo-stage-wrap{width:100%;padding-bottom:0;position:relative}
    .duo-stage{height:320px;border-radius:0;box-shadow:none}
    .duo-stage::after{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,transparent,rgba(250,247,242,0.45));z-index:2;pointer-events:none}
    /* hide the floating bot overlay on mobile — the full-bleed photo already
       shows Tommy with the robot, so the overlay was redundant/overlapping */
    .duo-bot{display:none}
    /* Tidy the live counter on mobile: big number on the left spanning two
       rows, with the description and the live ticker stacked cleanly beside
       it. Was a cramped 3-item flex row where the desc and ticker wrapped
       into each other ("live +6 / · today"). */
    .duo-counter{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:0.9rem;padding:1.1rem 24px 0.6rem 48px;background:transparent;border:none;border-radius:0;text-align:left;margin-top:0;width:100%}
    .duo-num{grid-row:1 / 3;font-size:2.8rem}
    .duo-desc{align-self:end;margin-top:0;line-height:1.25}
    .duo-live{align-self:start;justify-content:flex-start;white-space:nowrap;margin-top:0.25rem}
    /* tidy the wrapped eyebrow: hide the dot, tighter leading, breathing room
       above to separate it from the live-hours counter */
    .hero-text .label{align-items:flex-start;line-height:1.4;margin-top:1.4rem;margin-bottom:0.7rem}
    .hero-text .label .dot{display:none}
  }
  /* offer grid */
  .offer-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2rem;max-width:560px}
  @media(max-width:720px){.offer-grid{grid-template-columns:1fr}}
  .offer-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
  .offer-card.featured{border-color:var(--clay);box-shadow:0 0 0 1px var(--clay)}
  .offer-card .oc-flag{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--clay);margin-bottom:0.6rem;display:block}
  .offer-card h3{font-size:1.5rem;margin-bottom:0.3rem}
  .offer-card .oc-price{font-family:var(--display);font-size:2rem;color:var(--ink);line-height:1;margin-bottom:0.2rem}
  .offer-card .oc-price span{font-size:0.95rem;font-weight:400;color:var(--muted);font-family:var(--body)}
  .offer-card .oc-term{font-size:0.82rem;color:var(--muted);margin-bottom:1.2rem}
  .offer-card ul{list-style:none;display:flex;flex-direction:column;gap:0.55rem;margin-bottom:1.5rem}
  .offer-card li{font-size:0.9rem;color:var(--ink-2);display:flex;align-items:flex-start;gap:0.55rem;line-height:1.4}
  .offer-card li::before{content:"✓";color:var(--clay);font-weight:700;flex-shrink:0;margin-top:0.05rem}
  .offer-card .oc-cta{display:inline-flex;align-items:center;gap:0.4rem;border-radius:var(--radius-pill);padding:0.7rem 1.3rem;font-size:0.9rem;font-weight:600;border:1px solid var(--clay);color:var(--clay);transition:all .2s var(--ease);white-space:nowrap}
  .offer-card.featured .oc-cta{background:var(--clay);color:#fff;border-color:var(--clay)}
  .offer-card .oc-cta:hover{background:var(--clay);color:#fff;border-color:var(--clay)}
  .oc-sms,.sms-fallback{margin-top:0.6rem;font-size:0.78rem;color:var(--muted)}
  .oc-sms a,.sms-fallback a{color:var(--muted);text-decoration:underline}
  .oc-sms a:hover,.sms-fallback a:hover{color:var(--clay)}
  .offer-note{margin-top:1.2rem;font-size:0.84rem;color:var(--muted);text-align:center}
  .offer-note b{color:var(--ink)}