/* Supporting pages for the V8 site.
   These pages are deliberately quieter than the homepage: they are where a
   buyer checks the product, the terms, and the evidence. The shared rules
   give them the same dark footing, practical navigation and clear type
   without turning a legal document or an operating note into a campaign. */
:root{
  --v8-night:oklch(19% .022 258);
  --v8-paper:oklch(97% .009 82);
  --v8-ink:oklch(22% .022 258);
  --v8-muted:oklch(49% .018 258);
  --v8-blue:oklch(55% .205 264);
  --v8-line:oklch(78% .015 80);
}

body.supporting-v8{
  background:var(--v8-paper);
  color:var(--v8-ink);
}

body.supporting-v8 h1,
body.supporting-v8 h2,
body.supporting-v8 h3,
body.supporting-v8 h4{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
}
body.supporting-v8 h1 em,
body.supporting-v8 h2 em,
body.supporting-v8 h3 em{
  font-style:normal;
  color:inherit;
}

body.supporting-v8 header.site{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--v8-night);
  color:var(--v8-paper);
  border-bottom:1px solid oklch(96% .01 80 / .14);
  box-shadow:none;
}
body.supporting-v8 header.site .nav{min-height:72px}
body.supporting-v8 header.site .brand b{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:24px;
  font-weight:760;
  letter-spacing:-.07em;
}
/* zen.css carries legacy !important mark colours. On this dark header the
   V8 mark must be legible, so this intentional override travels with the
   supporting-page layer rather than changing the legacy system globally. */
body.supporting-v8 header.site .brand b .z{color:var(--blue-lt)!important}
body.supporting-v8 header.site .brand b .g{color:var(--v8-paper)!important}
body.supporting-v8 .nav-links{gap:6px}
body.supporting-v8 .nav-links a{color:var(--v8-paper)}
body.supporting-v8 .nav-links a:hover{background:oklch(96% .01 80 / .08)}
body.supporting-v8 .nav-links .btn{
  margin-left:10px;
  color:var(--v8-paper);
  background:var(--v8-blue);
  border-radius:0;
}
body.supporting-v8 .nav-links .btn:hover{background:oklch(49% .19 264)}

body.supporting-v8 main > section:first-child{padding-top:clamp(72px,10vw,132px)}
body.supporting-v8 main > section:first-child .kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--v8-blue);
}
body.supporting-v8 .lede{max-width:62ch;color:var(--v8-muted);font-size:clamp(18px,2vw,22px);line-height:1.48}
body.supporting-v8 .doc{max-width:860px}
body.supporting-v8 .doc h2{font-size:clamp(24px,3vw,34px);margin-top:clamp(34px,5vw,58px)}
body.supporting-v8 .doc h3{font-size:clamp(18px,2.1vw,23px);margin-top:31px;letter-spacing:-.03em}
body.supporting-v8 .doc p,
body.supporting-v8 .doc li{max-width:71ch}
body.supporting-v8 .cards{gap:0;border-top:1px solid var(--v8-line)}
body.supporting-v8 .cards .card{
  box-shadow:none;
  border:0;
  border-bottom:1px solid var(--v8-line);
  border-radius:0;
  background:transparent;
  padding:clamp(24px,3.6vw,42px) 0;
}
body.supporting-v8 .cards .card .kicker{letter-spacing:.02em;text-transform:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700}
body.supporting-v8 .cards .card h3{font-size:clamp(23px,2.7vw,32px);margin-bottom:13px}
body.supporting-v8 .cards .card p{max-width:48ch}
body.supporting-v8 .btn,
body.supporting-v8 .btn-2{border-radius:0}
body.supporting-v8 .btn{background:var(--v8-blue)}
body.supporting-v8 .btn:hover{background:oklch(49% .19 264)}
body.supporting-v8 .btn-2{border-color:var(--v8-ink)}
body.supporting-v8 .dark .btn-2{border-color:oklch(96% .01 80 / .55)}
body.supporting-v8 .tint{background:oklch(94% .012 82)}
body.supporting-v8 .dark{background:var(--v8-night)}
body.supporting-v8 .dark h1,
body.supporting-v8 .dark h2,
body.supporting-v8 .dark h3,
body.supporting-v8 .dark h4{color:var(--v8-paper)}
body.supporting-v8 .dark .lede{color:oklch(82% .014 258)}

/* Contact is a conversion page. Give the first decision a firm dark field,
   then let the actual ways to contact Zariyaa stay clean and easy to scan. */
body.v8-contact main > section:first-child{
  background:var(--v8-night);
  color:var(--v8-paper);
}
body.v8-contact main > section:first-child .lede{color:oklch(82% .014 258)}
body.v8-contact main > section:first-child .commit-note{background:transparent;color:oklch(86% .012 258);border-color:oklch(96% .01 80 / .28)!important}
body.v8-contact main > section:first-child .commit-note b{color:var(--v8-paper)!important}
body.v8-contact main > section:first-child .cards{border-color:oklch(96% .01 80 / .2)}
body.v8-contact main > section:first-child .cards .card{border-color:oklch(96% .01 80 / .2)}
body.v8-contact main > section:first-child .cards .card p{color:oklch(79% .014 258)}
body.v8-contact main > section:first-child .cards .card .kicker{color:var(--blue-lt)}
body.v8-contact main > section:first-child .btn-2{color:var(--v8-paper);border-color:oklch(96% .01 80 / .45)}

/* Evidence pages are working documents. The table and readings should be
   legible on a wide screen and never look like feature cards on a phone. */
body.v8-evidence .toc{border-top-color:var(--v8-line);border-bottom-color:var(--v8-line)}
body.v8-evidence .readings{gap:0}
body.v8-evidence .reading{border-radius:0;box-shadow:none}
body.v8-evidence .reading:first-child{border-top-color:var(--v8-line)}
body.v8-evidence .reading-fig{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:760;letter-spacing:-.075em}
body.v8-evidence .deftable{border-radius:0}

body.supporting-v8 footer.site{background:var(--v8-night)}
body.supporting-v8 footer.site h2{line-height:1.03}
body.supporting-v8 footer.site .foot-cta{border-bottom-color:oklch(96% .01 80 / .14)}
body.supporting-v8 footer.site .foot-grid h5{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.02em}

@media(max-width:900px){
  body.supporting-v8 .nav-links .nav-hide{display:none}
  body.supporting-v8 header.site .nav{min-height:66px}
  body.supporting-v8 main > section:first-child{padding-top:68px}
}
@media(max-width:680px){
  body.supporting-v8 h1{font-size:clamp(38px,12vw,53px);line-height:.98}
  body.supporting-v8 h2{line-height:1.02}
  body.supporting-v8 .lede{font-size:18px}
  body.supporting-v8 .cards .card{padding:28px 0}
  body.supporting-v8 .foot-grid{gap:30px 22px}
}