/* =====================================================================
   crestnotch.app, the final design (2026-10-29, colour C Light) over the guide pages: every SEO,
   comparison, question, help and legal page. Their words, titles, meta, URLs and JSON-LD stay as
   they are; this file draws them as the design's article: one white sheet on the soft grey page,
   under the menu bar and the notch, in the design's type (marketing/design/site-final-2026-10-28,
   site.css ".doc"). Loaded after suite.css (the old content kit) and c26.css (the shell), only by
   pages with body data-shell="s26-guide". Hashed by Scripts/hash_site_assets.py.
   ===================================================================== */
body.s26[data-shell="s26-guide"] {
  --bg: #FFFFFF; --bg2: #F5F5F7; --bg3: #F5F5F7; --panel: #F5F5F7; --inset: #F5F5F7;
  --hair: #E5E5EA; --hair2: #EDEDF0; --hair3: #D2D2D7; --fill: rgba(0, 0, 0, 0.03); --fill2: rgba(0, 0, 0, 0.06);
  --link: #0066CC; --green: #1A7F37; --red: #C9302C; --cob: #0066CC; --sage: #1A7F37; --rec: #C9302C;
  --text: var(--sys); --r: 16px; --hdr: var(--bar);
  color: var(--doc-ink);
}
/* the sheet itself (main as one white page on the grey) is c26.css's, shared with every page off the stage */

/* type: the design's article */
.s26[data-shell="s26-guide"] main :is(h1, h2, h3, h4) { color: var(--doc-ink); font-family: var(--sysd); }
.s26[data-shell="s26-guide"] main h1 { margin: 0; font: 700 50px/1.04 var(--sysd); letter-spacing: -0.035em; text-wrap: balance; }
.s26[data-shell="s26-guide"] main h2 { margin: 58px 0 14px; font: 700 31px/1.15 var(--sysd); letter-spacing: -0.028em; text-wrap: balance; }
.s26[data-shell="s26-guide"] main h3 { margin: 30px 0 8px; font: 650 20px/1.3 var(--sysd); letter-spacing: -0.015em; }
.s26[data-shell="s26-guide"] main :is(p, li) { font-size: 18px; line-height: 1.66; color: var(--doc-ink); }
.s26[data-shell="s26-guide"] main :is(.lede, .lead) { margin-top: 18px; font-size: 21px; line-height: 1.5; color: var(--doc-ink-2); }
.s26[data-shell="s26-guide"] main :is(.eyebrow, .kicker) { display: block; margin: 0 0 22px; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--doc-ink-2); }
.s26[data-shell="s26-guide"] main :is(.updated, .disclosure, .sg-req, .fine, .meta, .micro, .src, .sources li) { font-size: 14px; line-height: 1.55; color: var(--doc-ink-2); }
.s26[data-shell="s26-guide"] main strong, .s26[data-shell="s26-guide"] main b { color: var(--doc-ink); }
.s26[data-shell="s26-guide"] main a:not(.btn):not(.bc-go) { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(0, 102, 204, 0.35); }
.s26[data-shell="s26-guide"] main code { padding: 1px 5px; border-radius: 5px; background: var(--code-bg); color: var(--doc-ink); font: 500 0.88em/1.4 var(--code); }
.s26[data-shell="s26-guide"] main pre { padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: var(--pre-bg); color: var(--pre-ink); font: 400 13.5px/1.6 var(--code); box-shadow: 0 0 0 1px var(--doc-line); }
.s26[data-shell="s26-guide"] main pre code { padding: 0; background: none; }
.s26[data-shell="s26-guide"] main figure img, .s26[data-shell="s26-guide"] main picture img { border-radius: 14px; box-shadow: 0 0 0 1px var(--doc-line); }
.s26 ::selection { background: rgba(0, 113, 227, 0.2); color: inherit; }

/* tables: the design's quiet grid */
.s26[data-shell="s26-guide"] main :is(.tblwrap, .tbl-wrap, .table-scroll, .tablecard) { margin: 18px 0 0; overflow-x: auto; border: 0; border-radius: 12px; background: var(--doc-bg); box-shadow: 0 0 0 1px var(--doc-line); }
.s26[data-shell="s26-guide"] main table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.s26[data-shell="s26-guide"] main :is(th, td) { padding: 11px 14px; border-top: 1px solid var(--doc-line); text-align: left; vertical-align: top; color: var(--doc-ink); font-size: 15px; }
.s26[data-shell="s26-guide"] main thead th { border-top: 0; background: var(--thead); font: 600 12px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--doc-ink-2); }

/* the old buttons are the design's: blue to press, outlined for the other */
.s26[data-shell="s26-guide"] main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; height: auto; padding: 10px 20px; border: 0; border-radius: 12px; font: 600 16px/1.2 var(--sys); text-decoration: none; white-space: normal; text-align: center; }
.s26[data-shell="s26-guide"] main :is(.btn-primary, .btn-white) { background: var(--btn-bg); color: var(--btn-ink); box-shadow: none; }
.s26[data-shell="s26-guide"] main :is(.btn-primary, .btn-white):hover { background: var(--btn-hover); color: var(--btn-ink); }
.s26[data-shell="s26-guide"] main :is(.btn-ghost, .btn-glass, .btn-line, .btn-secondary) { background: transparent; color: var(--btn2-ink); box-shadow: inset 0 0 0 1.5px var(--btn2-line); }
.s26[data-shell="s26-guide"] main :is(.btn-ghost, .btn-glass, .btn-line, .btn-secondary):hover { background: var(--btn2-hover); }
.s26[data-shell="s26-guide"] main .btn :is(.price, [data-price]) { color: inherit; }

/* the old cards: the design's card, grey on the white sheet */
.s26[data-shell="s26-guide"] main :is(.verdict, .endcta, .trybox, .tf-box, .tablecta, .card, .faq-card, .callout, .note, .tf-more) { border: 0; border-radius: 16px; background: var(--card); color: var(--card-ink); box-shadow: none; }
.s26[data-shell="s26-guide"] main :is(.endcta, .trybox) { margin: 34px 0 0; padding: 24px 26px; }
.s26[data-shell="s26-guide"] main details { border-color: var(--doc-line); }
.s26[data-shell="s26-guide"] main summary { color: var(--doc-ink); }
.s26[data-shell="s26-guide"] main hr { border: 0; border-top: 1px solid var(--doc-line); }

@container site (max-width: 760px) {
  .s26[data-shell="s26-guide"] main h1 { font-size: 34px; }
  .s26[data-shell="s26-guide"] main h2 { margin-top: 44px; font-size: 25px; }
  .s26[data-shell="s26-guide"] main :is(p, li) { font-size: 17px; }
  .s26[data-shell="s26-guide"] main :is(.lede, .lead) { font-size: 18.5px; }
}
/* a page's own button rules (.trybox .btn-primary and friends) never win over the design's ink */
body.s26[data-shell="s26-guide"] main :is(.btn-primary, .btn-white), body.s26[data-shell="s26-guide"] main :is(.btn-primary, .btn-white):hover { color: var(--btn-ink); }
body.s26[data-shell="s26-guide"] main :is(.btn-ghost, .btn-glass, .btn-line, .btn-secondary) { color: var(--btn2-ink); }
/* the old pages' own marks, on white */
body.s26 { --green: #1A7F37; --amber: #A05A00; --red: #C9302C; }
body.s26 main .tag.pick { color: #A05A00; border-color: rgba(160, 90, 0, 0.35); }
body.s26 main .st.d { color: #6E6E73; }
/* the Claude Code demo is the notch's own black UI: it keeps its dark ink */
body.s26 main .ccdemo { --t1: #F5F5F7; --t2: #A6A6AE; --t3: #8A8A93; color: #F5F5F7; }
body.s26 main .ccdemo :is(p, li, span) { color: inherit; }
body.s26 main .ccdemo pre { background: none; color: inherit; box-shadow: none; padding: 0; }
body.s26 main .ccdemo .ccdemo-why { color: #b3b4b9; }
body.s26 main .mk.y { color: #1A7F37; }