/* Delvo Digital — site v4 · the inner pages (privacy, terms, checklist): prose on the dark panel.
 * Loaded after styles.css, which owns every token (:root) and the shell (header, footer, panel, .sec, .eyebrow, .btn).
 * No colour is written here — every one is a var() from styles.css :root. Type follows dark-spec.json's roles:
 * the page title is the H2 role (44 at 1440, × k below), body text 18/28 on a 36em measure (648 px: the longest line is
 * 85 characters, measured from the font's own advances — judge round 1 I2; 68ch ran 781 px / 101 characters); under 1024
 * the body is 17 px, so the measure is 34em of 18 (612 px = 36 × 17) and the line stays 85 (at 648 it would run 90), the small
 * labels the eyebrow's 13 px. Radii: the list surface 16 (the cards' radius), the button 10 (styles.css).
 * Judge round 1 (2026-10-06) also: I3 a checklist label is two nowrap halves (its separator never strands at 390); I4 under
 * 480 the numeral stacks above the title, so the title's measure at 390 is 290 px, not 230 (no three-line titles);
 * I6 styles.css's p { text-wrap: pretty } is scoped to ≥ 768 on these pages — under it, pretty left ragged mid-paragraph
 * lines at 390 (the h1 keeps balance: a heading). */

/* ── the page head: the fixed nav's row (22–94 under the panel's top) is reserved like the hero reserves it ── */
.page-head { padding-top: 125px; padding-bottom: 40px; }
/* the eyebrow doubles as the way home: HOME / LEGAL — a plain link, so it works without the script */
.crumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; color: var(--text-3); text-decoration: none; transition: color .16s var(--ui); }   /* a 44 px target around the 18 px line; the negative block margin keeps the line where it was */
.crumb a:hover { color: var(--text); }
main a[href^="mailto:"] { display: inline-block; padding-block: 12px; margin-block: -12px; }   /* the inline email link on the legal pages: a 44 px tall target without moving the line */
.crumb [aria-hidden] { margin: 0 10px; }
.page-h1 { max-width: 20em; font-size: clamp(32px, calc(44 * var(--k)), 44px); line-height: 1.15; font-weight: 600; letter-spacing: -0.024em; text-wrap: balance; }
.page-meta { margin-top: 16px; font-size: 15px; line-height: 24px; color: var(--text-3); }

/* ── the prose: 18/28 on 36em (648 px at 18 px), grey text with white emphasis, underlined links ── */
.page-prose { padding-top: 40px; padding-bottom: 72px; }
.prose { max-width: 36em; }   /* em of the body's 18 px: 648 px; left-aligned under the crumb like the h1 */
.prose h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; font-size: 18px; line-height: 28px; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--text); }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .16s var(--ui); }
.prose a:hover { text-decoration-color: var(--text); }

/* ── the checklist: twelve rows on one card surface, a hairline between rows (the FAQ card's construction) ── */
.ck-list { list-style: none; margin-top: 4px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; overflow: hidden; }
.ck { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: baseline; padding: 28px 32px; }
.ck + .ck { border-top: 1px solid var(--line); }
/* the numeral in the How-it-works gradient (--num), one sweep per numeral */
.ck-num { font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background-image: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .ck-num { background: none; color: var(--grad-solid); } }
.ck-t { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); }
.ck-g { grid-column: 3; justify-self: end; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.ck-g > span { white-space: nowrap; }   /* the label's two halves ("KIND ·" and "DETAIL"): under 1024 the label may wrap, but only between them */
.ck-p { grid-column: 2; max-width: 58ch; font-size: 18px; line-height: 27px; color: var(--text-2); }
.page-closer { margin-top: 48px; max-width: 30em; font-size: 20px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.page-cta { margin-top: 24px; }

/* ── below 1024: the stacked panel (styles.css moves the nav's row to 60 and the margin to 16) ── */
@media (max-width: 1023px) {
  .page-head { padding-top: 76px; padding-bottom: 28px; }
  .page-meta { font-size: 16px; }   /* the body floor under 1024 (gate 6's rule, applied to the inner pages too) */
  .page-prose { padding-top: 28px; padding-bottom: 52px; }
  .prose { max-width: 34em; }   /* 612 px = 36 × 17: the 17 px body keeps the 85-character line (at 648 it ran 90) — I2 */
  .prose h2 { font-size: 20px; }
  .prose p { font-size: 17px; line-height: 27px; }
  .ck { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px; }
  .ck-num { font-size: 24px; }
  .ck-t { font-size: 18px; }
  .ck-g { grid-column: 2; justify-self: start; white-space: normal; letter-spacing: .1em; }
  .ck-p { font-size: 17px; line-height: 26px; }
  .page-closer { font-size: 18px; }
  .page-cta .btn { width: 100%; height: 52px; }
}

/* ── under 768: every paragraph above the footer wraps plainly — styles.css's p { text-wrap: pretty } left ragged
 *    mid-paragraph lines at 390 (I6). Scoped by the two page sections, not by a list of classes, so a paragraph added later is
 *    covered too; the footer is the homepage's and keeps the homepage's rule. "wrap" is the value every text-wrap engine knows
 *    and it resets the style to auto. The h1 keeps balance. ── */
@media (max-width: 767px) {
  .page-head p, .page-prose p { text-wrap: wrap; }
}

/* ── under 480: the numeral stacks above the title (I4). At 390 the card is 332 wide (330 inside its hairline) with 20 px
 *    padding: a 44 px column and its 16 px gap left the title 230 px (four three-line titles); stacked, the title has the
 *    card's full 290 px (none). ── */
@media (max-width: 479px) {
  .ck { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .ck-num { font-size: 22px; }
  .ck-t, .ck-g, .ck-p { grid-column: 1; }
}

/* judge round 2: on a phone the header shows only the mark and the menu, so the checklist's row 01 ("a tappable call or booking control
   in the first viewport at 390px on every page") was not true here. Under 1024 the page head carries the booking button; no new words. */
.page-cta { display: none; margin-top: 28px; }
@media (max-width: 1023px) { .page-cta { display: block; } }

/* ══ launch pass (2026-10-11, docs/refs/delvo-launch-refs.md) ══ */
/* every page title in the site's headline face: privacy, terms and the checklist were the only titles not in Gambetta */
.page-h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(36px, calc(52 * var(--k)), 52px); line-height: 1.08; }
/* the checklist's closing button shows at every width (it was phone-only, so the desktop page ended with no way on) */
.page-cta.page-cta--end { display: block; }
/* "On this page": numbered anchors under the date line (n8n's and HTTPie's legal pages), two columns from 1024 */
.page-toc { margin-top: 28px; max-width: 36em; }
.page-toc h2 { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.page-toc ol { list-style: none; display: grid; gap: 0 32px; }
.page-toc a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--text-2); text-decoration: none; }
.page-toc a:hover { color: var(--text); }
@media (min-width: 1024px) { .page-toc ol { grid-template-columns: 1fr 1fr; } }
.prose h2[id] { scroll-margin-top: 110px; }
/* the 404 page (Linear keeps its whole shell on a 404; Claude's and Scale's say it in one headline, one line, one way home) */
.nf-line { margin-top: 16px; max-width: 34em; font-size: 18px; line-height: 28px; color: var(--text-2); }
.nf-line code { font: inherit; color: var(--text); overflow-wrap: anywhere; }
.nf-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.nf-list { padding-top: 40px; padding-bottom: 72px; }
.nf-h { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.nf-list ul { list-style: none; max-width: 36em; }
.nf-list li + li { border-top: 1px solid var(--line); }
.nf-list a { display: flex; align-items: center; min-height: 56px; font-size: 18px; color: var(--text); text-decoration: none; }
.nf-list a::after { content: "→"; margin-left: auto; color: var(--text-3); transition: transform .2s var(--ui); }
.nf-list a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .nf-list a::after { transition: none; } }
/* the concept build pages (Microsoft Copilot Labs' status label + RevenueCat's challenge → solution order, the result swapped
   for "try it" — no results are claimed): a label row, the problem, the demo moment, try it yourself */
.cb-label { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; margin: 12px 0 22px; border: 1px solid var(--surface-border); border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.cb-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hero-violet); }
.cb-sub { margin-top: 18px; max-width: 36em; font-size: 19px; line-height: 30px; color: var(--text-2); }
.cb-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.cb-sec { padding-top: 56px; padding-bottom: 56px; }
.cb-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; }
.cb-h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, calc(36 * var(--k)), 36px); line-height: 1.12; letter-spacing: -0.02em; color: var(--text); }
.cb-body { max-width: 36em; }
.cb-body p { font-size: 18px; line-height: 28px; color: var(--text-2); margin: 0 0 16px; }
.cb-steps { list-style: none; counter-reset: s; border-top: 1px solid var(--line); margin-top: 8px; }
.cb-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 28px; color: var(--text); }
.cb-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); color: var(--text-3); }
.cb-isnt { color: var(--text-2); }
.cb-isnt strong { color: var(--text); font-weight: 600; }
.cb-other { display: grid; gap: 6px; padding: 28px 32px; border: 1px solid var(--surface-border); border-radius: 16px; background: var(--surface); text-decoration: none; max-width: 640px; transition: border-color .2s var(--ui); }
.cb-other:hover { border-color: var(--text-3); }
.cb-other .cb-label { margin: 0 0 6px; justify-self: start; }
.cb-other-t { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--text); }
.cb-other-p { font-size: 17px; line-height: 26px; color: var(--text-2); }
@media (max-width: 1023px) {
  .cb-grid { grid-template-columns: 1fr; row-gap: 16px; }
  .cb-sec { padding-top: 40px; padding-bottom: 40px; }
  .cb-sub { font-size: 17px; line-height: 27px; }
  .cb-body p, .cb-steps li { font-size: 17px; line-height: 27px; }
  .cb-cta .btn, .cb-cta .ghost { width: 100%; height: 52px; justify-content: center; }
  .cb-other { padding: 22px 20px; }
}

/* the concept builds as software pages (Dominic, 2026-10-12): the problems and what the software does as two plain lists,
   then the steps, each a title and a line; a step's screenshot figure waits (hidden) for Lane B2's sample build */
.cb-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cb-list li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 28px; color: var(--text-2); }
.cb-list li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 8px; height: 1px; background: var(--text-3); }
.cb-list--does li { color: var(--text); }
.cb-list--does li::before { top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--hero-violet); }
.cb-steps--sw li { align-items: start; }
.cb-step-t { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text); margin: 0; }
.cb-step-p { font-size: 17px; line-height: 27px; color: var(--text-2); margin: 4px 0 0; }
.cb-steps--sw + .cb-isnt { margin-top: 24px; }
.cb-sec[hidden], .cb-shot[hidden] { display: none !important; }
@media (max-width: 1023px) { .cb-list li { font-size: 17px; line-height: 27px; } .cb-step-p { font-size: 16px; line-height: 26px; } }

/* /automated-calls §9: the example call as a transcript (2026-10-13) */
.prose .call-example { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 20px 0 24px; }
.prose .call-example dt { color: var(--text-2); font-size: 14px; line-height: 26px; letter-spacing: .04em; text-transform: uppercase; }
.prose .call-example dd { margin: 0; }

/* the concept pages' step pictures: the sample app's own phone screens (2026-10-13, Lane A's "demos placed") */
.cb-shot { margin: 16px 0 0; max-width: 300px; }
.cb-shot img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--surface-border); background: var(--surface-2); }
.cb-shot figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.cb-try-p { margin: 12px 0 0; font-size: 15px; line-height: 24px; color: var(--text-2); }

/* Lenis 1.3.26's own stylesheet (dist/lenis.css), carried here so no extra file is fetched (2026-10-16) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }