/*
 * v5-pages.css — the marketing pages beyond the homepage on the website v5 system (W5B5; website-v5.md §12).
 * Pricing, the four comparison pages, security, cookies, the bot page and the free llms.txt tool wear the
 * homepage's shell (v4.css: the header, the type, the buttons, the site footer) and this thin layer for what only
 * they have. Every colour is a v4 alias of a Hven 2.0 token, never a value of its own. Light only (#203).
 *
 * The `--v3-*` names the pages' own styles were written against map to the v4 aliases, so a page's layout rules
 * keep working while their colours, type and rhythm become the homepage's. No motion here.
 */

:root {
  --v3-page:        var(--v4-page);
  --v3-raised:      var(--v4-paper);
  --v3-ink:         var(--v4-ink);
  --v3-ink-2:       var(--v4-ink-2);
  --v3-ink-3:       var(--v4-ink-3);
  --v3-line:        var(--v4-line);
  --v3-amber:       var(--v4-amber);
  --v3-amber-hover: var(--v4-amber-hover);
  --v3-amber-ink:   var(--v4-amber-ink);
  --v3-on-amber:    var(--v4-on-amber);
  --v3-slab:        var(--v4-slab);
  --v3-on-slab:     var(--v4-on-slab);
  --v3-on-slab-2:   var(--v4-on-slab-2);
  --v3-gap-section: var(--v4-sec);
  --v3-measure:     39em;
  --v3-ease:        var(--v4-ease);
}

/* The secondary pages read at document sizes: the homepage's display face, one step down. */
.v5p main h1 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.02em; max-width: 11.5em; }
.v5p main h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.018em; max-width: 14.1em; }
.v5p main h3 { font: 600 18px/1.35 var(--font-sans); letter-spacing: -0.005em; color: var(--v4-ink); }
.v5p-doc main h1 { font-size: clamp(34px, 4.2vw, 50px); max-width: 15em; }
.v5p-doc main h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; max-width: none; }
.v5p-doc main h3 { font-size: 18px; }
.v5p main p, .v5p main li { text-wrap: pretty; }

/* A quiet action: an outline pill. Amber stays on the one primary action. */
.v4-btn-quiet { border-color: var(--v4-line-2); color: var(--v4-ink); background: transparent; }
.v4-btn-quiet:hover { border-color: var(--v4-ink-3); }

/* Hairline lists and cards the pages already use, in the homepage's lines: an ink rule opens, hairlines divide. */
.v5p .m-card { background: var(--v4-paper); border: 1px solid var(--v4-line); border-radius: 16px; box-shadow: none; }
.v5p .m-panel-dark { background: var(--v4-slab); color: var(--v4-on-slab); border-radius: 20px; }
.v5p .m-panel-dark h2 { color: var(--v4-on-slab); }
.v5p .m-btn--accent { background: var(--v4-amber); color: var(--v4-on-amber); border-radius: 999px; font: 600 16px/1.2 var(--font-sans); }
.v5p .m-btn--accent:hover { background: var(--v4-amber-hover); }

.v5p .v4-small { font-size: 14px; }

/* The comparison pages: one column with the header's edges, and the closing panel's heading centred like its words. */
.v5p .cp-container { max-width: var(--v4-wrap); padding-inline: var(--v4-gut); }

/* Reading pages (cookies, the bot): one 720px column at the homepage's sizes, scoped to the page's main column so
   nothing reaches the shared header or the site footer. */
.v5p-read { max-width: calc(720px + 2 * var(--v4-gut)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--v4-gut) 0; }
.v5p-read .legal-date, .v5p-read .sub { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--v4-ink-3); }
.v5p-read .sub { font-size: clamp(17px, 1.4vw, 19px); color: var(--v4-ink-2); }
.v5p-read h2 { margin-top: clamp(40px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--v4-line); }
.v5p-read p, .v5p-read li { color: var(--v4-ink-2); font-size: 16.5px; line-height: 1.65; }
.v5p-read h2 + p, .v5p-read h2 + ul, .v5p-read p + p, .v5p-read p + ul, .v5p-read ul + p { margin-top: 12px; }
.v5p-read ul { margin: 12px 0 0; padding-left: 20px; }
.v5p-read li + li { margin-top: 8px; }
.v5p-read li strong, .v5p-read p strong { color: var(--v4-ink); font-weight: 600; }
.v5p-read a { color: var(--v4-ink); text-decoration: underline; text-underline-offset: 3px; }
.v5p-read code { font: 13px/1.5 var(--font-mono); background: var(--v4-paper); border: 1px solid var(--v4-line); padding: 1px 6px; border-radius: 6px; color: var(--v4-ink); overflow-wrap: anywhere; }
.v5p-read h2 code { font-size: 0.7em; vertical-align: 0.1em; }
.v5p-read table { width: 100%; border-collapse: collapse; margin: 12px 0 0; font-size: 15px; }
.v5p-read th { text-align: left; padding: 10px 12px 10px 0; color: var(--v4-ink); font-weight: 600; border-bottom: 1px solid var(--v4-ink); }
.v5p-read td { padding: 10px 12px 10px 0; color: var(--v4-ink-2); border-bottom: 1px solid var(--v4-line); vertical-align: top; }

/* The free llms.txt tool: the lede a step below its heading, and its actions as the system's pills. */
.v5p .subhead { margin-top: 18px; }
.v5p button.primary, .v5p button.secondary, .v5p a.primary, .v5p a.secondary { border-radius: 999px; }

/* ── Metric-matched fallback faces (W5B5 review 1, M-1; website-v5 §3 "No layout shift") ───────────────────
   Until Inter, Fraunces and JetBrains Mono arrive (font-display: swap), text is set in a local face scaled to
   the web font's measured width and line box, so the swap does not re-wrap a line or move what is below it.
   Measured in Chromium against the self-hosted files on these pages' own text (method and numbers:
   website-v5 §12.4): the size is the web font's width over the local face's at the size the pages set; the
   ascent and descent are the web font's, divided by that size. Headings at display size measure narrower
   against Georgia than text does, so h1 has its own face. The homepage keeps its own pinned stack. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); font-weight: 300 500; size-adjust: 106.9%; ascent-override: 90.7%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 800; size-adjust: 100.8%; ascent-override: 96.2%; descent-override: 23.8%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Text Fallback'; src: local('Georgia'); size-adjust: 103.5%; ascent-override: 94.7%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Heading Fallback'; src: local('Georgia'); size-adjust: 100.7%; ascent-override: 97.3%; descent-override: 25.8%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
/* The --m-* aliases resolve at :root, so they are set again here or they keep the stack without fallbacks. */
.v5p {
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Fraunces', 'Fraunces Text Fallback', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
  --m-font-sans: var(--font-sans);
  --m-font-display: var(--font-display);
  --m-font-mono: var(--font-mono);
}
.v5p h1 { font-family: 'Fraunces', 'Fraunces Heading Fallback', Georgia, 'Times New Roman', serif; }
.v5p .v4-close p { margin-top: 18px; max-width: 34em; color: var(--v4-on-slab-2); font-size: 17px; line-height: 1.55; }