/* =====================================================================
   crestnotch.app, the 2026-10-20 redesign over the guide pages (2026-10-21).
   Zack's order that day: every page still on the old shell moves onto the
   redesign "all together". Scripts/site_reskin_2026_10.py swaps each page's
   header and footer for the shell's (Scripts/site26.py) and loads, in order:
   suite.css (the old content kit), c26.css (the shell), then THIS file, then
   the page's own rules. The old pages are written against the old token
   names (--panel, --hair, --inset ...), so this file gives those names the
   redesign's dark values, the same trick the 09-28 redesign used: a page that
   nobody opens still lands on the new look. Then it puts the old buttons, the
   headline type and the old cards in the redesign's language. Everything is
   behind .s26 so it wins over the kit without !important.
   Only the reskinned pages load it (body data-shell="s26-guide"); the eight
   main pages never do. Hashed by Scripts/hash_site_assets.py.
   ===================================================================== */
body.s26 {
  /* grounds: the old white panel becomes the redesign's card, a faint violet over the night ground */
  --panel: color-mix(in oklab, var(--h-base) 9%, var(--bg));
  --bg2: color-mix(in oklab, var(--h-base) 6%, var(--bg)); --bg3: #10131f; --inset: #10131f;
  --hair: var(--line2); --hair2: var(--line); --hair3: var(--line3);
  --fill: rgba(255, 255, 255, 0.04); --fill2: rgba(255, 255, 255, 0.08);
  --link: #f5c46a; --green: #6cc08a; --red: #ff8a7a; --cob: #8fb5ff; --sage: #6fcfcf; --rec: #ff8a7a;
  --onb1: #f5f5f7; --onb2: #a6a6ae; --onb3: #8a8a93; --onb-hair: var(--line2);
  --text: var(--sans); --r: 22px; --hdr: var(--nav-h);
  color: var(--t2);
}
/* The shell's floating nav: the old pages' fixed header sat flush at the top; the first block keeps its room. */
.s26 main { position: relative; isolation: isolate; }
.s26:not(.product-page) main::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: min(1400px, 140vw); height: 760px; transform: translateX(-50%);
  background: radial-gradient(50% 55% at 50% 30%, color-mix(in oklab, var(--h-base) 26%, transparent), transparent 72%);
  -webkit-mask-image: var(--feather); mask-image: var(--feather); pointer-events: none; }

/* headline type: the redesign's display face, tight and bright */
.s26 main h1, .s26 main h2, .s26 main h3, .s26 main h4 { color: var(--t1); font-family: var(--display); }
.s26 main article h1 { font: 700 clamp(34px, 4.8vw, 56px)/1.05 var(--display); letter-spacing: -0.034em; text-wrap: balance; }
.s26 main article h2 { font-weight: 700; letter-spacing: -0.028em; }
.s26 main strong, .s26 main b { color: var(--t1); }
.s26 .lede, .s26 .lead { color: var(--t2); }

/* the old buttons, in the redesign's: the one to press is white, the other glass. Not on the product
   pages (/take, /minutes, /teams): their kit draws its own buttons over its own heroes. */
.s26:not(.product-page) .btn-primary { background: #fff; color: #000; border: 0; box-shadow: none; }
.s26:not(.product-page) .btn-primary:hover { background: #e9e9ee; color: #000; }
.s26:not(.product-page) .btn-ghost { background: rgba(255, 255, 255, 0.11); color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.s26:not(.product-page) .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.s26:not(.product-page) .btn-sm { --bh: 40px; padding: 0 18px; font-size: 15px; }
.s26:not(.product-page) main .btn { min-height: 44px; height: auto; padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; }
.s26:not(.product-page) main .btn .price, .s26:not(.product-page) main .btn [data-price] { color: inherit; }

/* the old cards: the redesign's radius, hairline and tint (their colours come from the tokens above) */
.s26 main :is(.verdict, .tablecard, .endcta, .disclosure, .trybox, .tf-box, .tablecta, .card, .faq-card) { border-radius: var(--r); border-color: var(--line2); }
.s26 main :is(.endcta, .trybox) { background: color-mix(in oklab, var(--h-base) 14%, var(--bg)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.s26 main thead th { background: var(--inset); }
.s26 main code { background: rgba(255, 255, 255, 0.07); color: var(--t1); border-radius: 6px; }
.s26 main a:not(.btn):not(.bc-go) { text-decoration-color: rgba(245, 245, 247, 0.35); }
.s26 ::selection { background: rgba(143, 127, 240, 0.45); color: #fff; }