/* Move With You — the marketing site's own layer, on top of the design-system
   tokens in styles.css. Built to the wireframe handoff of 6 Sep 2026 (home
   direction 1a, features 1c, demo 1d): ivory page ground, the dark scope for
   the hero and the footer only, separation by 1px hairlines, no shadows, no
   blur, no entrance animation, radius never past 6px, and gold rationed to
   one moment per screen. One file for every page. */

/* ── Archivo, self-hosted: the wordmark's face and nothing else's ───────────── */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/archivo-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("./assets/fonts/archivo-latin-600-normal.woff2") format("woff2")}

/* ── The lockup — mark as SVG, wordmark as live text ─────────────────────────
   From the logo sheet of 7 Sep: Archivo 600 tracked 0.17em for the wordmark,
   a gold rule, then the strapline in Archivo 500 at the same tracking. Gold
   mark and ivory text on the dark grounds; ink mark and ink text on ivory,
   with the rule and strapline in the strong gold that carries on a pale ground. */
.lockup{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.lockup img{width:46px;height:auto;flex:none}
.lockup .wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:5px;white-space:nowrap}
.lockup .wm{font-family:"Archivo",var(--font-body);font-weight:600;font-size:15px;letter-spacing:.17em;text-transform:uppercase;line-height:1;color:var(--ivory)}
.lockup .strap{font-family:"Archivo",var(--font-body);font-weight:500;font-size:7.5px;letter-spacing:.17em;text-transform:uppercase;line-height:1;color:var(--gold);padding-top:5px;border-top:1px solid var(--gold);width:100%}
.lockup.ink .wm{color:var(--teal-black)}
.lockup.ink .strap{color:var(--gold-strong);border-top-color:var(--gold-strong)}
.lockup.lg{gap:16px}.lockup.lg img{width:64px}.lockup.lg .wm{font-size:20px}.lockup.lg .strap{font-size:9.5px}
.lockup.stack{flex-direction:column;gap:14px}.lockup.stack .wordmark{align-items:center}.lockup.stack .strap{text-align:center}
@media(max-width:400px){.lockup .strap{display:none}.lockup img{width:40px}.lockup .wm{font-size:14px}}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html{scroll-padding-top:110px}
body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-body);background:var(--surface-page);-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-weight:500;color:var(--text-heading)}
button{font:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.col{max-width:940px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.col-narrow{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.skip{position:absolute;left:-999px;top:12px;z-index:100;padding:10px 14px;background:var(--gold);color:var(--ink);border-radius:var(--radius-md);font-weight:600}
.skip:focus{left:12px}
.rule{border:0;border-top:1px solid var(--border-default)}

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--text-accent);margin:0}
.on-dark .eyebrow{color:var(--soft-gold)}
.h-hero{font-size:clamp(36px,4.6vw,58px);line-height:1.05;max-width:16ch}
.h-page{font-size:clamp(34px,4.2vw,50px);line-height:1.06;max-width:18ch}
.h-section{font-size:clamp(26px,3vw,36px);line-height:1.12;max-width:22ch}
.h-sub{font-size:22px;line-height:1.2;font-weight:600}
.lead{font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:52ch;color:var(--text-muted)}
.on-dark .lead{color:var(--text-muted-on-dark)}
.copy{max-width:58ch;color:var(--text-muted)}
.copy p+p{margin-top:14px}
.small{font-size:13px;color:var(--text-muted)}
.center{text-align:center}
.center .h-section,.center .lead,.center .copy,.center .h-page{margin-left:auto;margin-right:auto}

/* ── Buttons — 44px targets, editorial corners ────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:var(--radius-md);font-weight:600;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;background:var(--gold);color:var(--ink);border:1px solid var(--gold);transition:var(--transition-colors)}
.btn:hover{background:var(--soft-gold);border-color:var(--soft-gold);color:var(--ink)}
.btn:disabled{opacity:.6;cursor:default}
.btn-outline{background:transparent;color:var(--text-heading);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--surface-inset);color:var(--text-heading);border-color:var(--text-heading)}
.on-dark .btn-outline{color:var(--ivory);border-color:rgba(245,241,230,.35)}
.on-dark .btn-outline:hover{background:var(--ivory-a08);color:var(--ivory);border-color:var(--ivory)}
.btn-lg{min-height:50px;padding:12px 28px;font-size:15px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.textlink{color:var(--text-accent);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.textlink:hover{color:var(--text-heading)}

/* ── Header — the dark bar on every page ─────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:var(--teal-black);border-bottom:1px solid var(--mint-a14)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:96px}
/* In the bar the lockup runs half as big again and drops the strapline: the
   mark and the wordmark alone, with room to breathe. */
.site-header .lockup{gap:16px}
.site-header .lockup img{width:69px}
.site-header .lockup .wm{font-size:22px}
.site-header .lockup .strap{display:none}
@media(max-width:480px){.site-header .lockup{gap:12px}.site-header .lockup img{width:56px}.site-header .lockup .wm{font-size:17px}}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.site-nav a{font-size:14px;white-space:nowrap;color:var(--ivory-a62);padding:6px 0;border-bottom:2px solid transparent;transition:var(--transition-colors)}
.site-nav a:hover{color:var(--ivory)}
.site-nav a[aria-current="page"]{color:var(--ivory);border-bottom-color:var(--gold)}
/* Right of the bar: the page links, then Log in (the door to the software
   itself, a muted text link like the page links), then the gold call, then
   the phone toggle. Log in and the toggle stay in the bar on a phone; the
   page links and the call move into the drop-down. */
.bar-right{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.site-header .login{font-size:14px;white-space:nowrap;color:var(--ivory-a62);padding:12px 0;border-bottom:2px solid transparent;transition:var(--transition-colors)}
.site-header .login:hover{color:var(--ivory)}
.site-header .cta{padding:9px 18px;min-height:40px;color:var(--ink);border-bottom:1px solid var(--gold)}
.site-header .cta:hover{color:var(--ink)}
.site-nav .menu-cta{display:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--mint-a22);border-radius:var(--radius-md);background:transparent;color:var(--ivory);cursor:pointer}
.nav-toggle:hover,.nav-toggle:focus-visible,.site-header .brand:hover,.site-header .brand:hover .wm{color:var(--ivory)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .x{display:none}
@media(max-width:1100px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px clamp(20px,5vw,48px) 20px;background:var(--teal-black);border-bottom:1px solid var(--mint-a22);display:none}
  .site-nav a{font-size:16px;padding:13px 0;border-bottom:1px solid var(--mint-a14)}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--mint-a14);color:var(--soft-gold)}
  .site-nav .menu-cta{display:inline-flex;margin-top:14px;justify-content:center;padding:9px 18px;min-height:44px;color:var(--ink);border-bottom:1px solid var(--gold)}
  .site-header .cta{display:none}
  .site-header .login{font-size:15px}
  .site-header.open .site-nav{display:flex}
  .site-header.open .nav-toggle .bars{display:none}
  .site-header.open .nav-toggle .x{display:block}
}
/* The hero follows straight on from the dark bar: no rule between two dark grounds. */
.hero{border-top:0}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section{padding-block:clamp(56px,7vw,96px)}
.section-tight{padding-block:clamp(40px,5vw,64px)}
.section-head .h-section,.section-head .h-page{margin-top:14px}
.section-head .lead{margin-top:16px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,5vw,64px);align-items:center}
.two .h-section{margin-top:14px}
.two .copy{margin-top:16px}
.two .actions{margin-top:24px}
@media(min-width:860px){.two.flip>:first-child{order:2}}

/* ── Hero — the one dark screen on the home page ──────────────────────────── */
.hero{background:var(--surface-page)}
.hero .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,96px)}
.hero .h-hero{margin-top:18px}
.hero .lead{margin-top:20px}
.hero .actions{margin-top:30px}
@media(max-width:860px){.hero .inner{grid-template-columns:1fr;padding-block:clamp(40px,6vw,64px)}.hero .frame{max-width:440px}}

/* ── Stats band — figure over a tracked label, a 2px gold rule on the left ── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.stat{border-left:2px solid var(--gold);padding-left:18px}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1;color:var(--text-heading);letter-spacing:-.01em}
.stat span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.stats-line{margin-top:28px;font-family:var(--font-display);font-size:clamp(19px,2vw,24px);line-height:1.3;color:var(--text-heading);max-width:40ch}
.on-dark .stat b{color:var(--ivory)}
.on-dark .stats-line{color:var(--ivory)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Feature grid — six only ──────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(20px,3vw,36px);margin-top:36px}
.feat svg{width:34px;height:34px;color:var(--text-accent)}
.feat h3{font-size:22px;font-weight:600;margin-top:14px}
.feat p{font-size:15px;color:var(--text-muted);margin-top:8px;max-width:34ch}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}

/* ── Frames — the product, drawn with hairlines and paper, never shadow ───── */
.frame{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden}
.frame .chrome{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border-subtle);background:var(--surface-inset)}
.frame .dots{display:flex;gap:5px}
.frame .dots i{width:8px;height:8px;border-radius:999px;background:var(--border-strong)}
.frame .url{flex:1;font-size:11px;color:var(--text-muted);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:4px 10px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame .screen{padding:clamp(14px,2vw,20px)}
.frame-phone{max-width:300px;margin:0 auto;border-radius:var(--radius-xl)}
.frame-phone .screen{padding:14px}

/* ── Screenshots — a real capture inside the same hairline frame ──────────────
   <figure class="shot"> holds a frame and a caption, and opens full-size in
   a <dialog> on click. The frame holds either a <picture> (webp with a png
   fallback, lazy, sized by its own aspect) or, until the capture exists, a
   hand-built frame of the same screen; the lightbox enlarges either. */
.shot{margin:0}
.shot .frame{cursor:zoom-in;transition:var(--transition-colors)}
.shot .frame:hover,.shot .frame:focus-visible{border-color:var(--gold-strong)}
.shot .frame:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-size:12.5px;color:var(--text-muted);margin-top:10px;display:flex;justify-content:space-between;gap:12px}
.shot figcaption span:last-child{white-space:nowrap}
.shot-frame-phone{max-width:300px;margin:0 auto}
.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:96vh}
.lightbox::backdrop{background:rgba(14,30,27,.88)}
.lightbox img{max-width:min(96vw,1400px);max-height:90vh;width:auto;height:auto;display:block;border:1px solid var(--mint-a22);border-radius:var(--radius-lg);background:var(--surface-card)}
.lightbox .frame{width:min(74vw,880px);cursor:default;zoom:1.3}
.lightbox .frame-phone{width:300px;max-width:none;zoom:1.6}
.lightbox .close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(245,241,230,.35);background:rgba(22,48,44,.8);color:var(--ivory);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .close svg{width:20px;height:20px}
.lightbox figcaption{color:var(--ivory-a62);font-size:13px;margin-top:10px;text-align:center}

/* ── The showcase — one screen large, two cards floating over it, three
   more below. Cards sit on a hairline, not a shadow, and hang a little
   past the frame's edge so the screen reads as a thing on the page. ────── */
.showcase{margin-top:36px}
.showcase .main{max-width:920px;margin:0 auto}
.showcase .stage{position:relative}
.showcase .float{position:absolute;z-index:1;width:min(250px,42vw);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:12px 14px;font-size:12.5px;color:var(--text-muted);line-height:1.45}
.showcase .float .k{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-strong)}
.showcase .float b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text-heading);margin:3px 0 4px}
.showcase .float.tr{top:-18px;right:-44px}
.showcase .float.bl{bottom:-18px;left:-44px}
.showcase .main figcaption{margin-top:14px;justify-content:center;text-align:center}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px);margin-top:44px;align-items:start}
.gallery .shot .frame-phone{max-width:260px}
.gallery figcaption{justify-content:center;text-align:center}
@media(max-width:1180px){.showcase .float.tr{right:-8px}.showcase .float.bl{left:-8px}}
@media(max-width:820px){.gallery{grid-template-columns:1fr;max-width:460px;margin-inline:auto}.showcase .float{position:static;width:auto;margin-top:12px}.showcase .stage{display:flex;flex-direction:column}}
.ptable{margin-top:14px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card)}
.ptable .ph,.ptable .pr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1fr) 44px 64px;gap:12px;align-items:center;padding:9px 12px}
.ptable .ph{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);background:var(--surface-inset);border-bottom:1px solid var(--border-subtle)}
.ptable .pr{font-size:12px;color:var(--text-body)}
.ptable .pr+.pr{border-top:1px solid var(--border-subtle)}
.ptable .pr>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptable .addr{font-family:var(--font-display);font-size:15px;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptable .meta{font-size:11px;color:var(--text-muted);margin-top:1px}
.ptable .phase{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.ptable .phase i{width:7px;height:7px;border-radius:999px;display:inline-block;flex:none}
.ptable .ring{justify-self:end}
@media(max-width:640px){.ptable .ph,.ptable .pr{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 40px}.ptable .ph>:nth-child(2),.ptable .pr>:nth-child(2),.ptable .ph>:nth-child(4),.ptable .pr>:nth-child(4){display:none}}
.ledger-mini{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--border-subtle)}
.ledger-mini div{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border-subtle);font-size:12.5px;color:var(--text-body)}
.ledger-mini i{width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-style:normal}
.ledger-mini .done i{background:var(--status-complete-bg);color:var(--status-complete)}
.ledger-mini .now i{background:var(--status-progress-bg);color:var(--status-progress)}
.ledger-mini .todo i{border:1px solid var(--border-strong)}
.ledger-mini .now span{color:var(--text-heading);font-weight:600}
.ledger-mini .todo{color:var(--text-muted)}
.ledger-mini em{font-style:normal;font-size:11px;color:var(--text-muted);white-space:nowrap}

/* ── How it works — four numbered columns on one hairline ───────────────── */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:36px;border-top:1px solid var(--border-default)}
.how>div{padding-top:24px}
.how .n{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text-accent);border:1px solid var(--gold)}
.how h3{font-size:20px;font-weight:600;line-height:1.2;margin-top:16px}
.how p{font-size:14.5px;color:var(--text-muted);margin-top:8px}
@media(max-width:900px){.how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.how{grid-template-columns:1fr}}

/* ── Why agencies choose it — the one dark band mid-page: an accordion of
   reasons beside a quote card that stays put while the list scrolls ─────── */
.why{background:var(--teal-black)}
.why .inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.why .h-section{margin-top:14px}
.why .faq{margin-top:24px}
.why .faq summary{font-size:19px}
.quote{margin:0;border:1px solid var(--mint-a22);border-radius:var(--radius-xl);padding:clamp(24px,3vw,40px);position:sticky;top:120px}
.quote .mark{display:block;font-family:var(--font-display);font-size:72px;line-height:.55;color:var(--gold);height:30px}
.quote blockquote{margin:0}
.quote .q{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);line-height:1.22;color:var(--ivory);margin-top:14px}
.quote .who{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--mint-a14)}
.quote .who .headshot{width:52px;height:52px;font-size:20px;flex:none}
.quote .who b{display:block;color:var(--ivory);font-weight:600;font-size:15px}
.quote .who span span{display:block;font-size:13px;color:var(--ivory-a62);margin-top:2px}
.quote .more{margin-top:18px;font-size:14px}
@media(max-width:860px){.why .inner{grid-template-columns:1fr}.quote{position:static}}

/* App pieces shown inside frames (ivory register, as the portal really is) */
.app-title{font-family:var(--font-display);font-size:18px;color:var(--text-heading)}
.app-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.app-btn{font-size:12px;font-weight:600;padding:6px 11px;border-radius:var(--radius-md);background:var(--gold);color:var(--ink);white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.tile{background:var(--surface-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:9px 11px;min-width:0}
.tile p{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile b{display:block;font-family:var(--font-display);font-size:clamp(15px,1.5vw,19px);font-weight:600;color:var(--text-heading);margin-top:3px;white-space:nowrap}
@media(max-width:520px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rows{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.row{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:9px 11px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;background:var(--surface-card)}
.row .addr{font-family:var(--font-display);font-size:15px;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:11px;color:var(--text-muted);margin-top:1px}
.row .phase{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.row .phase i{width:7px;height:7px;border-radius:999px;display:inline-block}
.ring{--p:60;width:34px;height:34px;border-radius:999px;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--ink-a10) 0);display:grid;place-items:center;flex:none}
.ring::after{content:"";width:24px;height:24px;border-radius:999px;background:var(--surface-card)}
.ring-lg{width:88px;height:88px;position:relative}
.ring-lg::after{width:70px;height:70px}
.ring-lg b{position:absolute;font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--text-heading)}
.progress{height:6px;border-radius:999px;background:var(--ink-a10);position:relative;overflow:hidden}
.progress i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--grad-progress);transition:width var(--dur-slow) var(--ease-standard)}
.phases{display:flex;justify-content:space-between;margin-top:12px}
.phases div{width:25%;text-align:center;font-size:9.5px;color:var(--text-muted);line-height:1.2}
.phases b{display:flex;width:24px;height:24px;border-radius:999px;align-items:center;justify-content:center;margin:0 auto 6px;font-size:10px;font-weight:700;border:2px solid var(--gold);background:var(--gold);color:var(--ink)}
.phases .todo b{background:transparent;border-color:var(--border-strong);color:var(--text-muted)}
.phases .now b{background:var(--gold-a18);color:var(--gold-strong)}
.milestone{display:flex;align-items:flex-start;gap:10px;font-size:13px}
.milestone i{width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-style:normal;flex:none;margin-top:2px}
.milestone .done{background:var(--status-complete-bg);color:var(--status-complete)}
.milestone .now{background:var(--status-progress-bg);color:var(--status-progress)}
.milestone .todo{background:var(--status-idle-bg);color:var(--text-muted)}
.milestone b{display:block;color:var(--text-heading);font-weight:500}
.milestone span{font-size:12px;color:var(--text-muted)}
.pill{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.on{background:var(--status-complete-bg);color:var(--status-complete)}
.pill.off{background:var(--status-idle-bg);color:var(--text-muted)}
.pill.amber{background:var(--status-progress-bg);color:var(--status-progress)}
.chain{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-muted)}
.chain div{display:flex;align-items:center;gap:8px}
.chain i{width:8px;height:8px;border-radius:999px;background:var(--border-strong);flex:none}
.chain .here{color:var(--text-heading);font-weight:600}
.chain .here i{background:var(--gold)}

/* ── Portal mini-demo — click a stage on the left, the panel answers ──────── */
.demo{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:32px;align-items:start}
.stagelist{border-top:1px solid var(--border-default)}
.stagelist button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 4px;background:none;border:0;border-bottom:1px solid var(--border-subtle);text-align:left;color:var(--text-muted);font-size:14px;cursor:pointer;transition:var(--transition-colors)}
.stagelist button:hover{color:var(--text-heading)}
.stagelist button[aria-pressed="true"]{color:var(--text-heading);font-weight:600}
.stagelist i{width:10px;height:10px;border-radius:999px;flex:none;background:var(--border-strong)}
.stagelist .done i{background:var(--teal-mint)}
.stagelist button[aria-pressed="true"] i{background:var(--gold)}
.stagelist .hint{font-size:12px;color:var(--text-muted);padding-top:10px}
.panel-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.panel-cols h4{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.journal{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--text-body)}
.journal span{display:block;font-size:11px;color:var(--text-muted)}
@media(max-width:720px){.demo{grid-template-columns:1fr}.panel-cols{grid-template-columns:1fr}}

/* ── White-label toggle ───────────────────────────────────────────────────── */
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden}
.seg button{min-height:40px;padding:8px 16px;background:transparent;border:0;color:var(--text-muted);font-size:13.5px;font-weight:600;cursor:pointer;transition:var(--transition-colors)}
.seg button+button{border-left:1px solid var(--border-strong)}
.seg button[aria-pressed="true"]{background:var(--teal-black);color:var(--ivory)}
.wl-frame .chrome{background:var(--wl,#1F3B5C);border-bottom:0}
.wl-frame .url{background:rgba(255,255,255,.14);border-color:transparent;color:rgba(255,255,255,.85)}
.wl-frame .agency{font-family:var(--font-display);font-size:16px;color:#fff;font-weight:600;white-space:nowrap}
.wl-frame .accent{color:var(--wl,#1F3B5C)}
.wl-frame .progress i{background:var(--wl,#1F3B5C)}
.wl-frame .phases b{background:var(--wl,#1F3B5C);border-color:var(--wl,#1F3B5C);color:#fff}
.wl-frame .phases .todo b{background:transparent;border-color:var(--border-strong);color:var(--text-muted)}
.wl-frame .app-btn{background:var(--wl,#1F3B5C);color:#fff}

/* ── Founder ──────────────────────────────────────────────────────────────── */
.founder{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.headshot{width:150px;height:150px;border-radius:999px;background:var(--surface-inset);border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:48px;color:var(--text-accent);overflow:hidden}
.headshot img{width:100%;height:100%;object-fit:cover}
@media(max-width:620px){.founder{grid-template-columns:1fr}.headshot{width:120px;height:120px}}

/* ── FAQ — ruled rows, native disclosure ──────────────────────────────────── */
.faq{border-top:1px solid var(--border-default);margin-top:28px}
.faq details{border-bottom:1px solid var(--border-default)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:20px;color:var(--text-heading)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--text-accent);transition:transform var(--dur-base) var(--ease-standard)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;font-size:15px;color:var(--text-muted);max-width:64ch}
.faq .a p+p{margin-top:10px}

/* ── Ledger rows, steps, checks ───────────────────────────────────────────── */
.ledger{border-top:1px solid var(--border-default);margin-top:24px}
.ledger .r{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:16px 0;border-bottom:1px solid var(--border-subtle);align-items:start}
.ledger .r b{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--text-heading)}
.ledger .r p{font-size:15px;color:var(--text-muted)}
@media(max-width:560px){.ledger .r{grid-template-columns:1fr;gap:4px}}
.checks{border-top:1px solid var(--border-default);margin-top:20px}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:14.5px;color:var(--text-body)}
.checks svg{width:18px;height:18px;flex:none;color:var(--text-accent);margin-top:2px}
.steps{border-top:1px solid var(--border-default);margin-top:24px}
.step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:clamp(14px,2vw,24px);padding:18px 0;border-bottom:1px solid var(--border-subtle);align-items:start}
.step .n{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text-accent);border:1px solid var(--gold)}
.step h3{font-size:20px;font-weight:600;line-height:1.2;padding-top:5px}
.step p{font-size:15px;color:var(--text-muted);margin-top:6px;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);font-size:13.5px;font-weight:600;color:var(--text-heading);transition:var(--transition-colors)}
.chips a:hover{border-color:var(--text-heading);background:var(--surface-inset)}
.block{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--border-default)}
.block:first-of-type{border-top:0}
.block .h-section{margin-top:12px}
.block .copy{margin-top:14px}
@media(min-width:760px){.block.flip>:first-child{order:2}}
.rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin-top:28px}
.rest div{padding-top:14px;border-top:1px solid var(--border-default)}
.rest b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--text-heading)}
.rest p{font-size:14px;color:var(--text-muted);margin-top:4px}
@media(max-width:760px){.rest{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.rest{grid-template-columns:1fr}}
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-top:28px}
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:clamp(20px,2.6vw,28px)}
.card h4{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.25}
.card p{font-size:14.5px;color:var(--text-muted);margin-top:8px}

/* ── Demo page form ───────────────────────────────────────────────────────── */
.demo-page{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:800px){.demo-page{grid-template-columns:1fr}}
.form{display:grid;gap:16px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--text-heading)}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:11px 13px;font:inherit;font-size:15px;color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);outline:none;transition:var(--transition-colors)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-strong);box-shadow:var(--focus-ring)}
.field.invalid input{border-color:var(--status-blocked)}
.field .err{display:none;font-size:12.5px;color:var(--status-blocked-text)}
.field.invalid .err{display:block}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238F7A44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.sent{border:1px solid var(--gold);border-radius:var(--radius-lg);padding:24px;margin-top:28px}
.sent h2{font-size:26px;margin-top:8px}
.sent p{margin-top:10px;color:var(--text-muted)}
.aside h4{font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent);margin-bottom:6px}
.aside .steps{margin-top:4px}
.aside .step{padding:14px 0}
.aside .step p{margin-top:0;font-size:14.5px;color:var(--text-body);padding-top:8px}
.aside .founder{grid-template-columns:64px 1fr;gap:14px;align-items:center;margin-top:28px}
.aside .headshot{width:64px;height:64px;font-size:22px}
.aside .faq{margin-top:28px}
.aside .faq summary{font-size:16px;min-height:48px;padding:10px 0}
.aside .faq .a{font-size:14px;padding-bottom:14px}

/* ── Legal document ───────────────────────────────────────────────────────── */
.doc h1{margin-top:14px}
.doc h2{font-size:clamp(22px,2.6vw,28px);font-weight:600;margin:40px 0 10px}
.doc h3{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-heading);margin:24px 0 8px}
.doc p,.doc li{font-size:15.5px;line-height:1.7;color:var(--text-body)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:22px;list-style:disc}
.doc li{margin-bottom:6px}
.doc .note{border:1px solid var(--gold);border-left-width:3px;border-radius:var(--radius-lg);padding:14px 18px;font-size:14px;color:var(--text-body);margin:24px 0 32px}
.doc strong{color:var(--text-heading);font-weight:600}
.doc a{text-decoration:underline;text-underline-offset:3px}

/* ── Closing CTA on ivory, and the teal footer ────────────────────────────── */
.closing{border-top:1px solid var(--border-default);text-align:center;padding-block:clamp(56px,7vw,96px)}
.closing .lead{margin:14px auto 0}
.closing .actions{justify-content:center;margin-top:26px}
.site-footer{background:var(--teal-black);color:var(--ivory-a62);padding-block:clamp(40px,5vw,60px) 24px;font-size:13.5px}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.site-footer .brand p{margin-top:14px;max-width:34ch}
.site-footer h4{font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft-gold);margin-bottom:12px}
.site-footer ul{display:flex;flex-direction:column;gap:9px}
.site-footer li a{color:var(--ivory-a62);transition:var(--transition-colors)}
.site-footer li a:hover{color:var(--ivory)}
.site-footer .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid var(--mint-a14);font-size:12.5px}
@media(max-width:900px){.site-footer .cols{grid-template-columns:1fr 1fr}.site-footer .brand{grid-column:1/-1}}
@media print{.site-header,.site-footer,.closing,.nav-toggle{display:none!important}}

/* ── Light scope, for a product frame that sits on the dark hero ──────────── */
.on-light{
  --surface-page:var(--ivory);--surface-card:var(--paper);--surface-inset:var(--ink-a06);
  --text-heading:var(--teal-black);--text-body:var(--teal-black);--text-muted:#5B6E69;--text-accent:var(--gold-strong);
  --border-subtle:var(--ink-a10);--border-default:var(--ink-a14);--border-strong:var(--ink-a22);
  --status-complete:#1F7A57;--status-complete-bg:rgba(31,122,87,.10);--status-progress:var(--gold-strong);--status-progress-bg:var(--gold-a18);--status-idle-bg:var(--ink-a06);
  color:var(--text-body)
}
/* Frames in the narrow features column: tiles two-up, phase labels may wrap */
.block .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.block .row{grid-template-columns:minmax(0,1fr) auto auto}
.row .phase{white-space:normal;max-width:96px;line-height:1.25;text-align:right}
.tile b{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── A chain that splits: the fork drawn in the frames and the mini-demo ──── */
.chain .fork{flex-direction:column;align-items:stretch;gap:6px;margin-left:3px;padding-left:12px;border-left:1px dashed var(--border-strong)}
.chain .fork .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-strong)}
.fork2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.fork2>div{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:10px 12px;background:var(--surface-inset)}
.fork2 .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-strong);margin-bottom:6px}