/* Trieres — strict black/white, hairline bands,
   a 12-column grid in a 1200px container, square mono buttons, and the block
   mark as the only image. Funnel components follow the same rules. */

:root{
  --bg:#FFFFFF; --ink:#0E0E0E; --muted:#6B6B6B; --line:#E4E4E4; --hover:#F2F2F2;
  --invert-bg:#0E0E0E; --invert-ink:#FFFFFF; --error:#B3261E;
  --accent:var(--ink); --on-accent:var(--bg);
  --display:"Archivo",system-ui,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0E0E0E; --ink:#FFFFFF; --muted:#9A9A9A; --line:#2A2A2A; --hover:#1C1C1C; --invert-bg:#FFFFFF; --invert-ink:#0E0E0E; --error:#FF8A80; color-scheme:dark }
}
:root[data-theme="dark"]{ --bg:#0E0E0E; --ink:#FFFFFF; --muted:#9A9A9A; --line:#2A2A2A; --hover:#1C1C1C; --invert-bg:#FFFFFF; --invert-ink:#0E0E0E; --error:#FF8A80; color-scheme:dark }

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:84px }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--display); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }
a{ color:inherit }
img,svg{ max-width:100% }
code{ font:400 .92em var(--mono) }
.gutter{ padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)) }
.container{ max-width:1200px; margin:0 auto }
.container.narrow{ max-width:760px }
.label{ font:500 11px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.muted{ color:var(--muted) }
.note{ font:400 12px/1.6 var(--mono); color:var(--muted); margin:0 }
.lead-text{ font-size:20px; line-height:1.4; margin:0 }
h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-0.02em; text-wrap:balance }
p{ text-wrap:pretty }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 14px; font:500 12px var(--mono) }
.skip:focus{ left:16px }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.sq{ display:inline-block; width:9px; height:9px; background:var(--ink); vertical-align:middle; margin-right:10px }
.sq.hollow{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink) }

.lockup{ display:block; height:auto }
.lockup rect{ fill:currentColor }
.lockup .knock{ fill:var(--bg) }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 20px; border:1px solid var(--ink); border-radius:0;
  font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); background:transparent; cursor:pointer; white-space:nowrap }
.btn:hover{ background:var(--hover) }
.btn.fill{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.btn.fill:hover{ opacity:.86 }
.btn.inv{ border-color:var(--invert-ink); color:var(--invert-ink) }
.btn.inv:hover{ background:var(--invert-ink); color:var(--invert-bg) }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.icon-btn{ display:inline-grid; place-items:center; width:44px; height:44px; border:0; background:transparent; color:var(--ink); cursor:pointer }
.icon-btn:hover{ background:var(--hover) }
.soft-link{ font:500 12px/1.5 var(--mono); letter-spacing:.06em; color:var(--muted); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line) }
.soft-link:hover{ color:var(--ink); text-decoration-color:currentColor }

/* ---------- nav ---------- */
.site-nav{ position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line) }
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px }
.site-nav .brand{ display:flex; align-items:center; text-decoration:none; color:var(--ink) }
.site-nav .brand svg{ width:158px }
.site-nav .links{ display:flex; gap:28px; list-style:none; margin:0 auto 0 0; padding:0 0 0 24px }
.site-nav .links a{ font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; padding:12px 0 }
.site-nav .links a:hover{ text-decoration:underline; text-underline-offset:6px }
.site-nav form{ margin:0 }
@media (max-width:860px){ .site-nav .links{ display:none } .site-nav .brand svg{ width:132px } .site-nav .btn{ padding:0 14px } }
#progress{ display:flex; gap:3px; height:4px; padding:0; margin:0 -16px; list-style:none }
#progress li{ flex:1; background:var(--line); transition:background .2s }
#progress li.on{ background:var(--accent) }
body.funnel #progress, body.admin #progress{ display:none }

/* ---------- entry curtain (home, once per session) ---------- */
#curtain{ position:fixed; inset:0; z-index:60; display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:1fr; pointer-events:none }
#curtain i{ display:block; background:var(--ink); animation:peel .55s cubic-bezier(.7,0,.3,1) forwards; animation-delay:var(--d) }
@keyframes peel{ to{ transform:scale(0); opacity:0 } }
#curtain .mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; animation:markout .4s ease forwards; animation-delay:.55s; color:var(--bg) }
#curtain .mark svg{ width:min(36vw,200px) }
#curtain .mark .knock{ fill:var(--ink) }
@keyframes markout{ to{ opacity:0; transform:scale(.9) } }
html:not(.js) #curtain, html.seen #curtain{ display:none }

/* ---------- hero ---------- */
.hero .container{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; padding-block:72px 64px; align-items:center }
.hero .copy{ grid-column:1 / span 6; display:flex; flex-direction:column; gap:26px; min-width:0; align-items:flex-start }
.hero h1{ font-size:clamp(36px,5.2vw,64px); line-height:1.02 }
.hero p{ margin:0; font-size:18px; color:var(--muted); max-width:46ch }
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px }
.hero .stage{ grid-column:7 / span 6; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; color:var(--ink) }
.hero .stage svg{ width:100%; height:auto; display:block; overflow:visible }
.hero .stage rect{ fill:var(--ink) }
.hero .stage rect.knock{ fill:var(--bg) }
@media (max-width:860px){ .hero .copy, .hero .stage{ grid-column:1 / -1 } .hero .stage{ order:-1; max-width:520px } .hero .container{ padding-block:40px 48px } }

/* ---------- ticker ---------- */
.ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden }
.ticker .track{ display:flex; gap:48px; width:max-content; padding-block:14px; animation:tick 40s linear infinite }
.ticker span{ font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap }
.ticker span::after{ content:"■"; margin-left:48px; font-size:8px; vertical-align:middle; color:var(--accent) }
@keyframes tick{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .ticker .track{ animation:none } }

/* ---------- pinned story ---------- */
.story{ height:400vh; position:relative; border-bottom:1px solid var(--line) }
.story .pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden }
.story .container{ width:100%; display:flex; flex-direction:column; gap:40px; align-items:center }
.story .captions{ position:relative; width:100%; max-width:760px; min-height:150px; text-align:center }
.story .cap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:14px; opacity:0; transform:translateY(16px); transition:opacity .35s, transform .35s }
.story .cap.on{ opacity:1; transform:none }
.story .cap h2{ font-size:clamp(26px,3.6vw,44px); line-height:1.1 }
.story .legend{ display:flex; gap:32px; font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.story .legend span{ border-bottom:2px solid var(--accent); padding-bottom:6px }
#morph{ width:min(100%,960px); height:auto; display:block; overflow:visible }
@media (max-width:860px){ .story{ height:320vh } .story .captions{ min-height:190px } .story .legend{ gap:16px; flex-wrap:wrap; justify-content:center } }
@media (prefers-reduced-motion: reduce){ .story{ height:auto; padding-block:80px } .story .pin{ position:static; height:auto } .story .cap{ position:static; opacity:1; transform:none } .story .cap:not([data-cap="2"]){ display:none } }

/* ---------- bands ---------- */
section.band{ padding-block:80px }
section.band + section.band:not(.invert){ border-top:1px solid var(--line) }
.head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-bottom:40px }
.head .label{ grid-column:1 / span 3; padding-top:10px }
.head h2{ grid-column:4 / span 8; font-size:clamp(26px,3vw,38px); line-height:1.15 }
@media (max-width:860px){ .head .label, .head h2{ grid-column:1 / -1 } .head .label{ padding-top:0 } section.band{ padding-block:56px } }

/* services */
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line) }
.service{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 24px 28px; display:flex; flex-direction:column; gap:18px; min-width:0 }
.service .glyph{ width:30px; height:auto; color:var(--ink) }
.service h3{ font-size:20px }
.service p{ margin:0; color:var(--muted); font-size:15px }
.service ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font:400 12px/1.5 var(--mono) }
.service ul li::before{ content:"— "; color:var(--muted) }
.service .more{ margin-top:auto; padding-top:8px; font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none }
.service .more:hover{ text-decoration:underline; text-underline-offset:5px }

/* process (inverted) */
.invert{ background:var(--invert-bg); color:var(--invert-ink) }
.invert .label{ color:var(--invert-ink); opacity:.6 }
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px }
.step{ display:flex; flex-direction:column; gap:14px; padding-top:18px; border-top:1px solid currentColor; min-width:0 }
.step .n{ font:500 12px/1 var(--mono); letter-spacing:.14em }
.step h3{ font-size:18px }
.step p{ margin:0; font-size:15px; opacity:.72 }
.band-cta{ margin-top:48px; padding-top:24px; border-top:1px solid color-mix(in srgb, var(--invert-ink) 25%, transparent); display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between }
.band-cta p{ margin:0; max-width:56ch; opacity:.8 }

/* work */
.work{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px }
.case{ border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; gap:12px; min-width:0; text-decoration:none }
.case:hover{ background:var(--hover) }
.case .meta{ display:flex; justify-content:space-between; gap:12px }
.case h3{ font-size:20px }
.case p{ margin:0; color:var(--muted); font-size:15px }
.case .bar{ height:6px; background:var(--accent); margin-top:auto }


/* lead magnet */
.magnet-grid, .magnet-hero{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start }
.magnet-copy{ grid-column:1 / span 6; display:flex; flex-direction:column; gap:18px; min-width:0 }
.magnet-copy h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.08 }
.magnet-copy h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.04 }
.magnet-copy p{ margin:0 }
.magnet-preview{ grid-column:8 / span 5; list-style:none; margin:0; padding:0; border:1px solid var(--line) }
.magnet-preview li{ padding:18px 20px; display:flex; flex-direction:column; gap:8px }
.magnet-preview li + li{ border-top:1px solid var(--line) }
.magnet-preview p{ margin:0; font-size:15px }
.magnet-preview .locked{ background:repeating-linear-gradient(-45deg, transparent 0 6px, var(--hover) 6px 12px) }
.magnet-preview .locked p{ color:var(--muted) }
@media (max-width:860px){ .magnet-copy, .magnet-preview{ grid-column:1 / -1 } }

/* faq */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; font-size:19px; font-weight:500; letter-spacing:-0.01em }
.faq summary::-webkit-details-marker{ display:none }
.faq .plus{ position:relative; width:14px; height:14px; flex:none }
.faq .plus::before, .faq .plus::after{ content:""; position:absolute; background:var(--ink); left:0; top:6px; width:14px; height:2px; transition:transform .2s }
.faq .plus::after{ transform:rotate(90deg) }
.faq details[open] .plus::after{ transform:rotate(0) }
.faq details p{ margin:0 0 24px; max-width:68ch; color:var(--muted) }

/* contact / brief start */
.contact .container{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start }
.contact .lead{ grid-column:1 / span 5; display:flex; flex-direction:column; gap:20px; min-width:0 }
.contact h2{ font-size:clamp(30px,4vw,52px); line-height:1.05 }
.contact form{ grid-column:7 / span 6; display:flex; flex-direction:column; gap:20px; min-width:0 }
@media (max-width:860px){ .contact .lead, .contact form{ grid-column:1 / -1 } }

/* ---------- form controls ---------- */
fieldset{ border:0; margin:0; padding:0; min-width:0 }
legend{ padding:0; margin-bottom:12px; font-size:17px; font-weight:500 }
legend.label{ font:500 11px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.field label{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.field .opt{ text-transform:none; letter-spacing:0; font-weight:400 }
.field input, .field textarea, select{ font:400 16px/1.4 var(--display); color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:0; padding:12px 14px; width:100% }
.field input:focus, .field textarea:focus, select:focus{ outline:none; border-color:var(--ink) }
.field textarea{ min-height:120px; resize:vertical }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr } }
.has-error input, .has-error textarea{ border-color:var(--error) }
.error{ margin:6px 0 0; font:500 12px/1.4 var(--mono); color:var(--error) }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:15px; cursor:pointer }
.check input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--ink); flex:none }
.check.has-error span{ color:var(--error) }
.inline-form{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.inline-form .field{ flex:1 1 240px }
.inline-form .btn{ min-height:48px }
.callout{ border:1px solid var(--ink); padding:14px 16px; margin:0; font:500 13px/1.5 var(--mono) }

/* option cards (checkbox / radio rendered as blocks) */
.options{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
@media (max-width:560px){ .options{ grid-template-columns:1fr } }
.option{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line); cursor:pointer; min-width:0; transition:border-color .15s, background .15s }
.option:hover{ border-color:var(--muted) }
.option input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer }
.option .box{ flex:none; width:18px; height:18px; border:1.5px solid var(--ink); margin-top:2px; position:relative }
.option .txt{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.option .txt strong{ font-weight:500; font-size:16px }
.option .txt small{ color:var(--muted); font-size:13px; line-height:1.4 }
.option:has(input:checked){ border-color:var(--ink); background:var(--hover) }
.option:has(input:checked) .box{ background:var(--ink) }
.option:has(input:checked) .box::after{ content:""; position:absolute; left:5px; top:1px; width:4px; height:9px; border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg) }
.option:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px }
.options.pills{ display:flex; flex-wrap:wrap; gap:8px }
.option.pill{ padding:12px 16px; align-items:center }
.option.pill .txt{ font-size:15px }
.option.pill:has(input:checked){ background:var(--ink); color:var(--bg) }
.has-error .option{ border-color:color-mix(in srgb, var(--error) 50%, var(--line)) }

/* ---------- funnel pages ---------- */
.funnel-page{ padding-block:40px 96px; min-height:70vh }
.funnel-head{ margin-bottom:40px }
.steps-bar{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px }
.steps-bar li{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:4px solid var(--line); min-width:0 }
.steps-bar li.done, .steps-bar li.on{ border-top-color:var(--accent) }
.steps-bar .n{ font:500 11px/1 var(--mono); letter-spacing:.14em; color:var(--muted) }
.steps-bar .t{ font:500 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.steps-bar li.on .t, .steps-bar li.on .n{ color:var(--ink) }
@media (max-width:560px){ .steps-bar .t{ display:none } }
.funnel-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start }
.funnel-form{ grid-column:1 / span 7; display:flex; flex-direction:column; gap:28px; min-width:0 }
.funnel-form h1{ font-size:clamp(30px,4vw,48px); line-height:1.06 }
.funnel-form > p{ margin:-12px 0 0; font-size:17px; max-width:56ch }
.funnel-aside{ grid-column:9 / span 4; display:flex; flex-direction:column; gap:24px; position:sticky; top:96px }
@media (max-width:960px){ .funnel-form, .funnel-aside{ grid-column:1 / -1 } .funnel-aside{ position:static } }
.funnel-aside .summary, .funnel-aside .next{ border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:14px }
.funnel-aside dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px }
.funnel-aside dt{ font:500 11px/1.7 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.funnel-aside dd{ margin:0 }
.funnel-aside ol{ margin:0; padding:0; list-style:none; counter-reset:n; display:flex; flex-direction:column; gap:14px }
.funnel-aside ol li{ counter-increment:n; position:relative; padding-left:30px; font-size:14px; color:var(--muted) }
.funnel-aside ol li::before{ content:counter(n, decimal-leading-zero); position:absolute; left:0; top:1px; font:500 11px/1.9 var(--mono); color:var(--ink) }
.funnel-aside ol li strong{ color:var(--ink); font-weight:500 }
.form-actions{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; padding-top:8px; border-top:1px solid var(--line); padding-top:24px }
.ok-label{ display:flex; align-items:center; color:var(--ink) }

/* slot picker */
.slot-picker{ display:flex; flex-direction:column; gap:24px }
.day-list{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin }
.day{ position:relative; flex:none; width:72px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0; border:1px solid var(--line); cursor:pointer }
.day input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.day .dow, .day .mon{ font:500 10px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.day .dom{ font-size:22px; font-weight:500; line-height:1.2 }
.day:has(input:checked){ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.day:has(input:checked) .dow, .day:has(input:checked) .mon{ color:var(--bg); opacity:.7 }
.day:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px }
.day-slots{ display:flex; flex-direction:column; gap:12px }
.day-slots + .day-slots{ margin-top:20px }
.js .day-slots{ display:none } .js .day-slots.on{ display:flex } .js .day-slots + .day-slots{ margin-top:0 }
.day-title{ margin:0; font-weight:500 }
.time-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px }
.option.time{ justify-content:center; padding:12px 0; font:500 14px/1 var(--mono) }

/* thanks / error */
.thanks{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding-top:40px }
.thanks-mark{ width:64px; color:var(--ink) }
.thanks h1{ font-size:clamp(32px,4.4vw,52px); line-height:1.05 }
.thanks p{ margin:0; max-width:58ch }
.actions{ display:flex; flex-wrap:wrap; gap:12px }

/* audit (lead magnet content) */
.audit{ display:flex; flex-direction:column; gap:22px }
.audit h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.04 }
.audit p{ margin:0 }
.audit-section{ border-top:2px solid var(--ink); padding-top:16px; display:flex; flex-direction:column }
.audit-section legend{ margin-bottom:8px }
.audit-q{ padding:14px 0; border-bottom:1px solid var(--line); font-size:17px }
.audit-q .qn{ font:500 11px/1 var(--mono); letter-spacing:.12em; color:var(--muted); margin-right:12px }
.audit-q:has(input:checked) span{ text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--muted) }
.audit-score{ border:1px solid var(--ink); padding:20px; display:flex; flex-direction:column; gap:8px }
.audit-score strong{ font-size:28px; font-weight:500 }
.audit-cta{ background:var(--invert-bg); color:var(--invert-ink); padding:28px; display:flex; flex-direction:column; gap:14px }
.audit-cta h2{ font-size:26px }
.audit-cta .muted{ color:var(--invert-ink); opacity:.7 }
.audit-cta .btn{ border-color:var(--invert-ink); color:var(--invert-ink) }
.audit-cta .btn.fill{ background:var(--invert-ink); color:var(--invert-bg) }
@media print{
  .site-nav, .site-footer, .audit-cta, .skip{ display:none !important }
  .audit-q input{ appearance:auto }
}

/* prose (legal) */
.prose{ display:flex; flex-direction:column; gap:16px }
.prose h1{ font-size:clamp(32px,4vw,48px); line-height:1.06; margin-bottom:8px }
.prose h2{ font-size:20px; margin-top:16px }
.prose p{ margin:0; max-width:68ch }

/* ---------- exit-intent dialog ---------- */
.exit-modal{ border:1px solid var(--ink); padding:0; width:min(560px, calc(100vw - 32px)); background:var(--bg); color:var(--ink); box-shadow:0 24px 64px rgba(0,0,0,.25) }
.exit-modal::backdrop{ background:rgba(14,14,14,.55) }
.exit-close-row{ display:flex; justify-content:flex-end; margin:0 }
.exit-body{ padding:0 28px 28px; display:flex; flex-direction:column; gap:16px }
.exit-body h2{ font-size:32px; line-height:1.08 }
.exit-body p{ margin:0 }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line) }
.site-footer .container{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; padding-block:36px 28px; align-items:start }
.foot-brand{ grid-column:1 / span 5; display:flex; flex-direction:column; gap:14px; color:var(--ink) }
.foot-brand svg{ width:150px }
.foot-links{ grid-column:7 / span 6; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:flex-end }
.foot-links a{ font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none }
.foot-links a:hover{ text-decoration:underline; text-underline-offset:6px }
.foot-meta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:20px; border-top:1px solid var(--line); font:400 12px/1.6 var(--mono); color:var(--muted) }
@media (max-width:760px){ .foot-brand, .foot-links{ grid-column:1 / -1 } .foot-links{ justify-content:flex-start } }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rd,0s) }
.rv.in{ opacity:1; transform:none }
html:not(.js) .rv{ opacity:1; transform:none }
html.seen .hero .rv{ transition-delay:calc(var(--rd,0s) - .8s) }
@media (prefers-reduced-motion: reduce){ #curtain{ display:none } .rv{ opacity:1; transform:none; transition:none } }

/* ---------- admin ---------- */
body.admin{ background:var(--bg) }
body.admin main{ padding-block:32px 80px }
.admin-login{ display:flex; flex-direction:column; gap:20px; padding-top:48px }
.admin-login h1{ font-size:40px }
.admin-wrap{ display:flex; flex-direction:column; gap:24px }
.admin-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap }
.admin-head h1{ font-size:40px }
.range{ display:flex; gap:6px }
.range .btn{ min-height:36px; padding:0 14px }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line) }
.kpi{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:6px }
.kpi strong{ font-size:40px; font-weight:500; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums }
.kpi small{ font:400 12px/1.4 var(--mono); color:var(--muted) }
.admin-card{ border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; gap:18px; min-width:0 }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.card-head h2{ font-size:22px }
.admin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
@media (max-width:960px){ .admin-grid{ grid-template-columns:1fr } }
.funnel-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.funnel-bars li{ display:grid; grid-template-columns:minmax(180px,260px) 1fr 64px; gap:16px; align-items:center }
.fb-label{ display:grid; grid-template-columns:28px 1fr; column-gap:4px }
.fb-label .n{ font:500 11px/1.7 var(--mono); color:var(--muted); grid-row:span 2 }
.fb-label strong{ font-weight:500 }
.fb-label small{ color:var(--muted); font-size:12px; line-height:1.3 }
.fb-track{ position:relative; height:32px; background:var(--hover) }
.fb-fill{ position:absolute; inset:0 auto 0 0; background:var(--ink) }
.fb-n{ position:absolute; left:10px; top:50%; transform:translateY(-50%); font:500 13px/1 var(--mono); color:var(--bg); mix-blend-mode:difference; filter:invert(1) }
.fb-step{ font:500 13px/1 var(--mono); text-align:right; font-variant-numeric:tabular-nums }
.fb-step.weak{ color:var(--error) }
@media (max-width:760px){ .funnel-bars li{ grid-template-columns:1fr 56px } .fb-label{ grid-column:1 / -1 } }
.daily{ display:flex; align-items:flex-end; gap:2px; height:160px; border-bottom:1px solid var(--ink) }
.day-col{ flex:1; height:100%; position:relative; display:flex; align-items:flex-end; min-width:0 }
.day-col .v{ display:block; width:100%; background:var(--ink); min-height:1px }
.day-col .l{ position:absolute; left:50%; top:-2px; transform:translateX(-50%); min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:var(--bg); border:1.5px solid var(--ink); font:500 9px/13px var(--mono); text-align:center }
.daily-axis{ display:flex; justify-content:space-between; font:400 11px/1 var(--mono); color:var(--muted) }
.table-wrap{ overflow-x:auto; border:1px solid var(--line) }
table{ width:100%; border-collapse:collapse; font-size:14px }
th{ text-align:left; font:500 10px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap }
td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top }
tr:last-child td{ border-bottom:0 }
td small{ color:var(--muted) }
.num{ text-align:right; font-variant-numeric:tabular-nums }
.mono{ font:400 12px/1.5 var(--mono); white-space:nowrap }
.tag{ display:inline-block; font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--ink); padding:4px 6px }
.tag.seg-call{ background:var(--ink); color:var(--bg) }
.tag.seg-nurture{ border-color:var(--line); color:var(--muted) }
table.leads td:nth-child(2){ min-width:200px }
.msg summary{ cursor:pointer; font:500 11px/2 var(--mono); color:var(--muted) }
.msg p{ margin:4px 0 0; max-width:40ch; font-size:13px }
.status-form select{ padding:6px 8px; font-size:13px; min-width:110px }