/* Theme + visual hierarchy layer. Loaded last: it owns color tokens (light and dark) and the volume of each section.
   Semantic mapping, never decorative:
   BLUE  = Proof First: primary action, current step, links, focus.
   AMBER = Proof Radar only: observation, external signal, snapshot/time metadata.
   GREEN = verified only: PASS, VERIFIED.
   RED   = FAIL only.
   INK / PAPER / SURFACE = structure and content. */

:root{
  color-scheme:light;
  --paper:#F4F4F1; --surface:#ECEBE5; --raised:#FBFBF8;
  --ink:#101010; --ink-2:#444441; --ink-3:#5E5E58;
  --line:#101010;            /* strong structural rule */
  --rule:#CFCDC4;            /* quiet divider */
  --signal:#2457FF;          /* blue as text/border */
  --signal-fill:#2457FF; --signal-hover:#1B3FD1; --signal-wash:#E6ECFF; --on-signal:#FFFFFF;
  --amber:#E0A100; --amber-ink:#8A5A00; --amber-wash:#F7EBCB; --amber-line:#D9B55A;
  --ok-ink:#1F7A3E; --ok-fill:#1F7A3E; --ok-wash:#E1F1E5; --on-ok:#FFFFFF;
  --fault:#A63F32; --inspect:#8A5A00; --muted:#5E5E58;
  --band:#1E1E1C; --on-band:#F4F4F1; --on-band-2:#BDBBB2;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#131312; --surface:#1B1B19; --raised:#232321;
    --ink:#ECEAE3; --ink-2:#BDBBB2; --ink-3:#8F8D85;
    --line:#6B6A63; --rule:#34332F;
    --signal:#6F8CFF; --signal-fill:#2457FF; --signal-hover:#3A68FF; --signal-wash:#1A2347; --on-signal:#FFFFFF;
    --amber:#E8B04A; --amber-ink:#E8B04A; --amber-wash:#2B2314; --amber-line:#5A4720;
    --ok-ink:#5CC585; --ok-fill:#5CC585; --ok-wash:#15281C; --on-ok:#0E1A12;
    --fault:#E27B6B; --inspect:#E8B04A; --muted:#8F8D85;
    --band:#0A0A09; --on-band:#ECEAE3; --on-band-2:#BDBBB2;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#131312; --surface:#1B1B19; --raised:#232321;
  --ink:#ECEAE3; --ink-2:#BDBBB2; --ink-3:#8F8D85;
  --line:#6B6A63; --rule:#34332F;
  --signal:#6F8CFF; --signal-fill:#2457FF; --signal-hover:#3A68FF; --signal-wash:#1A2347; --on-signal:#FFFFFF;
  --amber:#E8B04A; --amber-ink:#E8B04A; --amber-wash:#2B2314; --amber-line:#5A4720;
  --ok-ink:#5CC585; --ok-fill:#5CC585; --ok-wash:#15281C; --on-ok:#0E1A12;
  --fault:#E27B6B; --inspect:#E8B04A; --muted:#8F8D85;
  --band:#0A0A09; --on-band:#ECEAE3; --on-band-2:#BDBBB2;
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);overflow-x:clip}
/* Full-bleed tinted sections inside the 1800px content column. */
.offer,.proof-radar,.signoff{box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax);background:var(--tint)}

/* ---- Masthead + theme toggle ---- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.header-tools{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.theme-toggle{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle::after{content:'';position:absolute;inset:-4px}
.theme-toggle:hover{background:var(--ink);color:var(--paper)}
.theme-toggle:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.theme-toggle .ti-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ti-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ti-moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .ti-sun{display:none}:root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .ti-moon{display:block}}
.header-action{border-bottom-color:var(--ink);box-shadow:none}
.press-page .header-action,.press-page .return-input{box-shadow:none}

/* ---- LEVEL 1 · LOUD: the offer strip and its buttons ---- */
.pf-cta,.primary-button,.press-page .primary-button{background:var(--signal-fill);color:var(--on-signal);border:3px solid var(--line);box-shadow:0 5px 0 var(--line)}
.pf-cta:hover,.primary-button:hover,.press-page .primary-button:hover{background:var(--signal-hover);border-color:var(--line);color:var(--on-signal)}
.primary-button{border-left:3px solid var(--line)}
.pf-cta:active,.primary-button:active{background:var(--signal-hover);color:var(--on-signal)}
.pf-show{border-top-width:1px}

/* ---- Sections: tone, not black rules ---- */
.cases,.early,.offer,.founder,.proof-radar,.faq{border-top:0}
.early{border-bottom:0}
.offer{--tint:var(--surface)}
.proof-radar{--tint:var(--amber-wash)}
.signoff{--tint:var(--band)}

/* ---- LEVEL 2 · STRONG: section titles. Sentence case, smaller than the hero. ---- */
.sec-title{font-size:clamp(30px,3.5vw,58px);line-height:.96;letter-spacing:-.02em;word-spacing:.08em}
.sec-blue{color:var(--signal)}
.early-title{font-size:clamp(32px,3.5vw,58px);line-height:.96}
.early-copy p{color:var(--ink-2)}
.early-terms{color:var(--ink-3);font-weight:400}
.intake-band{border-top:3px solid var(--line)}
.intake-band h2{font-size:clamp(44px,5vw,88px)}
.intake-lede .intake-reply{border-top:1px solid var(--rule);font-size:clamp(18px,1.6vw,26px)}
.intake-lede .intake-aside,.inquiry .micro,.micro{color:var(--ink-3)}

/* ---- Demo: the real product interaction gets the room ---- */

/* ---- How it works: neutral surface, one numbered process ---- */
.offer ol{border-top:0}
.offer li{border-bottom:1px solid var(--rule);font:800 clamp(22px,2.2vw,36px)/1.05 var(--display);letter-spacing:-.015em}
.offer-you li{color:var(--ink-2)}
.offer li span,.faq-n{color:var(--ink-3)}
.offer-we li p{color:var(--ink-2)}
.offer-we li:last-child b{color:var(--signal)}
.offer-we.is-armed li:last-child.is-locked b{color:var(--signal)}
.offer-foot,.offer-assist{color:var(--ink-2);font-weight:400}
.offer-access{color:var(--ink-2)}
.offer-access b{color:var(--ink)}

/* ---- Payment / what you get ---- */
.terms-get .eyebrow{border-bottom:1px solid var(--line);color:var(--ink)}
.terms-get li{border-bottom:1px solid var(--rule);color:var(--ink-2)}
.terms-get li b{color:var(--ink)}
.offer .terms-get li{border-bottom:1px solid var(--rule);color:var(--ink-2)}

/* ---- Form ---- */
.input-row,.inquiry input,textarea,.press-page textarea{background:var(--raised);color:var(--ink);border-color:var(--line)}
textarea::placeholder,.inquiry input::placeholder{color:var(--ink-3);opacity:1}
.inquiry input:focus-visible,textarea:focus,textarea:focus-visible{border-color:var(--signal);outline:3px solid var(--signal);outline-offset:0;box-shadow:none}
.inquiry label{color:var(--ink-2)}
.error,.cost-error{color:var(--fault)}
.inquiry-state{border:2px solid var(--ok-ink);background:var(--ok-wash);color:var(--ink)}
.copy-button{background:var(--raised);color:var(--ink);border-color:var(--line)}
.copy-button:hover{background:var(--ink);color:var(--paper)}

/* ---- Real cases ---- */
.cases{padding-top:clamp(32px,3.6vw,60px);padding-bottom:clamp(32px,3.6vw,60px)}
.cases .sec-title{font-size:clamp(24px,2.5vw,40px);margin-bottom:18px}
.cases-figure{max-width:min(100%,1180px)}
/* The 1180px frame is centered with its heading, so wide screens split the spare space evenly. Text stays left-aligned inside it. */
@media(min-width:761px){.cases>.sec-title,.cases>.cases-figure{max-width:1180px;margin-left:auto;margin-right:auto}}
.cases-video{border:3px solid var(--line)}
.cases-list li{border-top:1px solid var(--rule)}
.cases-list li>span,.cases-note{color:var(--ink-3)}
.cases-list p{color:var(--ink-2)}
.cases-result em{color:var(--fault)}.cases-result strong{color:var(--ok-ink)}.cases-result i{color:var(--ink-3)}
.cases-preview{color:var(--fault)}

/* ---- Founder: a human pause, no card ---- */
.founder{justify-content:center;padding-top:clamp(40px,5vw,84px);padding-bottom:clamp(40px,5vw,84px)}
.founder-photo img{width:clamp(84px,9vw,132px);border:1px solid var(--line)}
.founder-kicker{margin:0 0 8px;font:700 10px/1 Plex,monospace;letter-spacing:.14em;color:var(--ink-3)}
.founder-title{font:800 clamp(24px,2.4vw,38px)/1 var(--display);letter-spacing:-.015em}
.founder-text p{color:var(--ink-2);font-size:clamp(14px,1.1vw,16px);line-height:1.65}
.founder-text .founder-line{color:var(--ink);font-weight:600}

/* ---- Proof Radar: amber evidence layer, ink-bordered cards ---- */
.proof-radar{border-top:1px solid var(--amber-line);border-bottom:1px solid var(--amber-line);padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(28px,3vw,48px)}
.proof-radar .eyebrow{display:flex;align-items:center;gap:10px;color:var(--amber-ink);letter-spacing:.14em}
.proof-radar .eyebrow::before{content:'';width:8px;height:8px;background:var(--amber)}
.pr-title{font:800 clamp(24px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.015em;max-width:26ch;color:var(--ink)}
.pr-lede{color:var(--ink-2)}
.pr-card{background:var(--raised);border:2px solid var(--ink)}
.pr-tag{color:var(--amber-ink)}
.pr-num{color:var(--ink)}
.pr-card-key .pr-num b{color:var(--signal)}
.pr-what{color:var(--ink-2)}
.pr-fine{color:var(--ink-3)}
.pr-link{color:var(--ink)}
.pr-link:hover{color:var(--signal)}
.pr-link:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* ---- FAQ: the quietest section ---- */
.faq{padding-top:clamp(36px,4vw,64px);padding-bottom:clamp(36px,4vw,64px)}
.faq .sec-title{font-size:clamp(26px,2.6vw,42px)}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{padding:18px 40px 18px 0;min-height:56px;align-items:baseline}
.faq-item summary::after{top:16px;right:4px;font-weight:400;color:var(--ink-3)}
.faq-item summary:hover{background:transparent}
.faq-item summary:hover .faq-q{color:var(--signal)}
.faq-q{font:600 clamp(16px,1.3vw,19px)/1.35 Plex,monospace;letter-spacing:0;font-stretch:normal;color:var(--ink)}
.faq-n{display:none}
.faq-item p{margin:0 0 20px 0;color:var(--ink-2);font-size:14px;line-height:1.7;max-width:64ch}

/* ---- Closing band: charcoal, loud once ---- */
.signoff{color:var(--on-band);border-top:0}
.press-page .signoff{border-top:0}
.signoff .signature{color:var(--on-band)}
.signoff .wedge{color:var(--on-band-2)}
.signoff .return-input{color:var(--on-band);border-bottom-color:var(--on-band);box-shadow:none}
.signoff .return-input:hover{color:var(--on-band-2)}
.signoff a:focus-visible{outline-color:#8FA6FF}
.skip-link{background:var(--ink);color:var(--paper)}

/* ---- Mobile: alternate loud / quiet / visual / interactive ---- */
@media(max-width:760px){
  .sec-title{font-size:clamp(28px,8.4vw,38px)}
  /* Videos use the whole phone width: the 16px gutters were all that stood between the picture and the screen edges. */
  .cases-figure{max-width:none;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
  .cases-video{border-left:0;border-right:0}
  .cases-figure figcaption{padding:0 var(--gut)}
  .cases .sec-title{font-size:clamp(22px,6.6vw,28px)}
  .early-title{font-size:clamp(30px,9vw,40px)}
  .intake-band h2{font-size:clamp(44px,13vw,60px)}
  .offer li{font-size:clamp(21px,6vw,26px)}
  .founder{grid-template-columns:minmax(0,1fr);justify-items:start}
  .faq .sec-title{font-size:clamp(24px,7vw,30px)}
  .faq-q{font-size:16px}
  .signature{font-size:clamp(52px,15vw,72px)}
  .masthead{padding:0 16px}
  .header-tools{gap:12px}
}
@media(prefers-reduced-motion:no-preference){
  .theme-toggle,.pf-cta,.primary-button{transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 160ms cubic-bezier(.2,.75,.2,1),box-shadow 160ms cubic-bezier(.2,.75,.2,1)}
}