/*
 * Stetworth marketing site (served at /) — "Oxblood Library, printed".
 *
 * This stylesheet deliberately re-declares the /app palette and type
 * tokens rather than importing them: the two surfaces ship
 * independently and must not couple, but they must LOOK like one
 * product.  Any palette change here has a twin in
 * web/app/css/style.css — keep them in step.
 *
 * Aesthetic thesis — "the margin is the product".  The page is set
 * like a printed reference volume: parchment stock, ink body, oxblood
 * for the mark and the one full-bleed band, burnished gold for
 * numerals and the in-progress beat.  Structure comes from hairline
 * rules and generous negative space, never from boxes and shadows.
 * The single moment of motion is the hero's review record, where a
 * failing criterion is caught, corrected, and resolved — the product
 * demonstrating itself rather than describing itself.
 *
 * Contrast tiers — the parchment ground is light, so the palette has
 * room for exactly TWO secondary text tiers above WCAG AA, not three:
 * an --c-ink-faint dark enough to clear 4.5:1 on all three grounds
 * lands within a shade of --c-ink-muted.  So:
 *
 *   text (>= 4.75:1 on paper, paper-bg AND paper-soft)
 *     --c-ink, --c-ink-soft, --c-ink-muted, --c-oxblood,
 *     --c-burnished-text, the two status accents
 *   UI + large text (>= 3.25:1) — control glyphs, and text at
 *   1.5rem/24px and up (WCAG's large-text boundary)
 *     --c-burnished
 *   decoration (no floor) — hairlines, fills, inert glyphs, and
 *   disabled/inactive controls, which WCAG 1.4.3 exempts
 *     --c-ink-faint, --c-rule, --c-rule-strong, --c-paper-*
 *
 * Floors sit above WCAG's 4.5 / 3.0 so a regression surfaces with room
 * left to fix it.  Contrast is symmetric, so a tier also governs a
 * token used as a GROUND under light text (/app's .approval-badge).
 *
 * tests/test_site_contrast.py checks the PALETTE only — the floors,
 * the literal sweep, and site<->app parity.  It does not check where a
 * token is used, at what size, or in what property; docs/SITE.md lists
 * what is uncovered.  Note the .grain overlay is z-index 1 beneath
 * z-index 2 content, so it never composites over the type.
 */

:root {
    /* Typography */
    --font-body:   'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'EB Garamond', Georgia, 'Times New Roman', serif;

    /* Oxblood Library palette (twin of web/app/css/style.css) */
    --c-paper:       #fbf8f0;
    --c-paper-bg:    #f6efdf;
    --c-paper-soft:  #e7decb;
    --c-rule:        #ddd3c0;
    --c-rule-strong: #c7bba4;
    /* NOT a text color — see "Contrast tiers" above.  Hairlines, inert
       separator glyphs, and fills only; 1.97:1 on --c-paper-soft. */
    --c-ink-faint:   #a89e92;
    --c-ink-muted:   #665e58;
    --c-ink-soft:    #3a322c;
    --c-ink:         #14110f;

    --c-oxblood:      #6b1f1f;
    --c-oxblood-deep: #571919;
    /* Decorative gold: large numerals, dots, focus rings, meter fills.
       Clears the 3.25:1 UI/large-text floor but NOT 4.75:1 — small gold
       text takes --c-burnished-text, and so does any gold used as a
       ground under light text. */
    --c-burnished:      #957340;
    --c-burnished-text: #755b32;

    --c-status-complete: #4b6645;
    --c-status-failed:   #9c3b2e;

    /* Site-only: the inverse (oxblood band) surface */
    --c-inverse-text:  #f6efdf;
    --c-inverse-muted: #d9c5c0;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 9rem;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;

    --t-fast: 0.12s ease;
    --t-base: 0.2s ease;

    --page-max: 1180px;
    --nav-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* `[hidden]` is a USER-AGENT rule, so any author-origin `display`
   outranks it however weak the selector — and the pages hide things by
   setting the attribute (the worked-example controls until `vertical.js`
   has data, the signup dialog's steps, its inline error).  Without this,
   an element that sets a `display` paints while "hidden": that is what
   `.example-controls` did, showing dead prev/next arrows and a `1 / 12`
   counter on all three vertical pages before the script ran, and
   permanently for a visitor with JavaScript off.

   `!important` is load-bearing: bare `[hidden]` is (0,1,0), a tie with
   any single-class selector, lost on source order.  It also means
   nothing else in these sheets may declare `display` `!important`, and
   `hidden="until-found"` cannot be used here — both pinned by
   `TestHiddenCollapses` in tests/test_site_static.py.

   This replaced the per-class `.modal-backdrop[hidden]` and
   `.field-error[hidden]` opt-outs, which were the same fix applied one
   class at a time.  See docs/SITE.md#hidden-elements-actually-collapse. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + var(--s-5));
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-ink);
    background-color: var(--c-paper-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-accent);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.005em;
}

em { font-style: italic; }

/* The small-italic aside tier — captions, the nav qualifier, the footer
   tagline, the correction beat.  EB Garamond italic is fitted tightly
   enough that its counters start to close at caption sizes, so the tier
   gets a little tracking back.  Grouped here, in the sheet every page
   loads, because the runs are spread across home.css and vertical.css
   too and the tier is easier to keep whole in one place.

   Two things this rule deliberately does NOT set: color, which
   legitimately differs per run (muted for captions, gold for the
   correction beat), and font-size, which every one of these rules
   already declares and would win here on cascade order.

   The tier's design rule — every italic run takes a text-tier color and
   sits at 0.9rem or above — is a HOUSE CONVENTION, not a test.  An
   earlier version of tests/test_site_contrast.py enforced it and was
   deleted as unsound; nothing asserts it now.  Keep it by hand. */
.industry-menu > summary,
.record-correction,
.record-caption,
.site-footer-tagline,
.trip-caption {
    letter-spacing: 0.01em;
}

/* Paper grain: an SVG turbulence tile multiplied over the whole page so
   the parchment reads as stock rather than as a flat fill. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--s-3);
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-oxblood);
    border-radius: var(--radius-sm);
    color: var(--c-oxblood);
}
.skip-link:focus { left: var(--s-4); }

/* ============================================================
   Wordmark + shared marks
   ============================================================ */

/* Bold by founder decision (the wordmark re-cut that superseded the
   mockup-era 400-only brand contract): the 700 declaration is backed
   by the 0,700 tuple every page's Google Fonts URL loads — the
   declaration and the font load travel together, or the browser
   synthesizes a smeared faux bold.  Both halves are test-enforced:
   tests/test_site_static.py::TestSiteWordmarkTypography pins this
   declaration and every page's exact Garamond tuple set over a glob
   of web/site/*.html.  Mirrors web/app/'s treatment (rule 9 in
   docs/SITE.md). */
.wordmark {
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-right: -0.16em;
    color: var(--c-oxblood);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}
.wordmark-small { font-size: 1.1rem; }

/* The compliance markers — the same vocabulary the product uses. */
.mark {
    font-family: var(--font-accent);
    line-height: 1;
    display: inline-block;
}
.mark-met, .mark-resolved { color: var(--c-status-complete); }
.mark-failed             { color: var(--c-status-failed); }
.mark-fixed, .mark-fixing { color: var(--c-burnished-text); }

.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-4);
}
.eyebrow-inverse { color: var(--c-inverse-muted); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.6rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c-ink);
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base),
                border-color var(--t-base), transform var(--t-fast),
                box-shadow var(--t-base);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    outline: 2px solid var(--c-burnished);
    outline-offset: 2px;
}

.btn-primary {
    color: var(--c-paper);
    background: var(--c-oxblood);
    border-color: var(--c-oxblood);
    box-shadow: 0 1px 0 rgba(20, 17, 15, 0.06);
}
.btn-primary:hover {
    background: var(--c-oxblood-deep);
    border-color: var(--c-oxblood-deep);
    box-shadow: 0 4px 14px rgba(107, 31, 31, 0.18);
}

.btn-secondary {
    color: var(--c-ink);
    background: var(--c-paper);
    border-color: var(--c-rule-strong);
}
.btn-secondary:hover { border-color: var(--c-ink-muted); }

.btn-small  { padding: 0.42rem 0.85rem; font-size: 0.88rem; }
.btn-large  { padding: 0.8rem 1.6rem;  font-size: 1rem; }
.btn-block  { width: 100%; }

/* LinkedIn keeps its own brand blue — verification buttons that get
   restyled read as phishing, so this one stays recognizable. */
.btn-linkedin {
    color: #ffffff;
    background: #0a66c2;
    border-color: #0a66c2;
}
.btn-linkedin:hover { background: #004182; border-color: #004182; }

.link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--c-oxblood);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-btn:hover { color: var(--c-oxblood-deep); }

/* ============================================================
   Nav
   ============================================================ */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--nav-h);
    /* 0.93, not 0.86.  The nav is sticky over content that includes the
       full-bleed oxblood band, and at 0.86 that band composited through
       to #e3d2c4 — darker than --c-paper-soft, which the contrast
       contract treats as the darkest sanctioned surface.  With the token
       that shipped alongside it (#69615a) the qualifier read 4.13:1 —
       below AA, in a scroll state nobody screenshotted.  At 0.93 the worst
       composite is #ece0d2 (measured #ece0d1) and the qualifier reads
       4.88:1; the blur still does the frosted work. */
    background: rgba(246, 239, 223, 0.93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-rule);
}
.site-nav-inner {
    max-width: var(--page-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}
.site-nav-brand {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
}
.site-nav-home { text-decoration: none; }

/* ------------------------------------------------------------
   Industry selector — the brand itself is the switcher: the mark
   reads "STETWORTH for Legal ▾", and the italic qualifier drops
   down a panel of the verticals, each with a one-line use-case
   showcase.  A <details> element, so the menu works without any
   JavaScript; site.js adds close-on-outside-click and Escape.
   ------------------------------------------------------------ */
.industry-menu { position: relative; }
.industry-menu > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1rem;
    color: var(--c-ink-muted);
    transition: color var(--t-base);
    white-space: nowrap;
}
.industry-menu > summary::-webkit-details-marker { display: none; }
.industry-menu > summary::after {
    content: " \25BE";
    font-style: normal;
    font-size: 0.7em;
    /* NOT --c-ink-faint.  `list-style: none` above removes the native
       disclosure triangle, so this caret is the only thing marking the
       summary as a menu — an informational UI glyph under WCAG 1.4.11,
       not decoration, and 2.30:1 did not meet its 3:1 floor. */
    color: var(--c-ink-muted);
}
.industry-menu > summary:hover { color: var(--c-oxblood); }
.industry-menu > summary:focus-visible {
    outline: 2px solid var(--c-burnished);
    outline-offset: 2px;
}

.industry-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: -0.5rem;
    z-index: 40;
    min-width: 21rem;
    padding: var(--s-2);
    padding-top: calc(var(--s-2) + 3px);
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px -24px rgba(20, 17, 15, 0.4);
    overflow: hidden;
    animation: modal-in 0.18s ease both;
}
/* The volume's oxblood spine, same as the record card. */
.industry-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--c-oxblood);
}

.industry-option {
    display: block;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background var(--t-fast);
}
.industry-option:hover { background: var(--c-paper-soft); }
.industry-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c-ink);
}
.industry-name .mark { margin-right: var(--s-1); font-size: 0.9em; }
.industry-option[aria-current="page"] .industry-name { color: var(--c-oxblood); }
.industry-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--c-ink-muted);
}
.industry-overview {
    margin-top: var(--s-1);
    padding-top: var(--s-3);
    border-top: 1px dotted var(--c-rule);
    border-radius: 0 0 var(--radius) var(--radius);
}
.site-nav-links {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}
.site-nav-link {
    font-size: 0.9rem;
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: color var(--t-base);
}
.site-nav-link:hover { color: var(--c-oxblood); }
.site-nav-signin { font-weight: 500; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
    position: relative;
    z-index: 2;
    padding: var(--s-9) var(--s-6) var(--s-8);
}
.hero-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-9);
    align-items: center;
}

.hero-title {
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-5);
}
.hero-title em {
    color: var(--c-oxblood);
    font-style: italic;
}

.hero-lede {
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
    max-width: 30rem;
    margin-bottom: var(--s-4);
}
.hero-sub {
    font-size: 1rem;
    color: var(--c-ink-muted);
    max-width: 29rem;
    margin-bottom: var(--s-6);
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    flex-wrap: wrap;
    margin-bottom: var(--s-4);
}
.hero-cta-center { justify-content: center; }

.hero-signin {
    font-size: 0.92rem;
    color: var(--c-ink-muted);
    text-decoration: none;
}
.hero-signin span {
    color: var(--c-oxblood);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hero-signin:hover span { color: var(--c-oxblood-deep); }

.hero-note {
    font-size: 0.85rem;
    color: var(--c-ink-muted);
    max-width: 26rem;
}
.section-closing .hero-note { margin: 0 auto; }

/* ---- The review record ---- */

.hero-record { position: relative; }

.record {
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px -28px rgba(20, 17, 15, 0.4);
    overflow: hidden;
}
/* A hairline oxblood spine along the top edge — the volume's binding. */
.record::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--c-oxblood);
}

.record-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--c-rule);
}
.record-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-1);
}
.record-title {
    font-family: var(--font-accent);
    font-size: 1.2rem;
    color: var(--c-ink);
    line-height: 1.2;
}

.pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: var(--c-paper-soft);
    color: var(--c-ink-soft);
    white-space: nowrap;
}
.pill-complete {
    background: rgba(75, 102, 69, 0.12);
    color: var(--c-status-complete);
}

.record-body { padding: var(--s-5); }
.record-section-label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-4);
}

.record-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3) 0;
    border-bottom: 1px dotted var(--c-rule);
    font-size: 0.94rem;
    color: var(--c-ink-soft);
}
.record-row:last-child { border-bottom: none; }
.record-row .mark { font-size: 1.05rem; padding-top: 0.05rem; }

.mark-stack {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.4rem;
}
.mark-stack .mark {
    position: absolute;
    inset: 0;
    padding-top: 0.05rem;
}

.record-correction {
    display: block;
    margin-top: var(--s-1);
    font-size: 0.9rem;
    font-style: italic;
    font-family: var(--font-accent);
    color: var(--c-burnished-text);
}

.record-foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--c-rule);
    background: rgba(231, 222, 203, 0.4);
    font-size: 0.82rem;
    color: var(--c-ink-muted);
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.record-dot { color: var(--c-ink-faint); }

.record-caption {
    margin-top: var(--s-4);
    text-align: center;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--c-ink-muted);
}

/* Card pager: subtle single-glyph arrows flanking a card's caption.
   Revealed by the cycler scripts (hidden without JS); the first manual
   touch stops that card's auto-advance, per the house rule. */
.card-pager {
    margin-top: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
}
.card-pager .record-caption { margin-top: 0; }
.card-arrow {
    background: none;
    border: none;
    padding: 0 var(--s-2);
    font-family: var(--font-accent);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--c-ink-muted);
    cursor: pointer;
    transition: color var(--t-base);
}
.card-arrow:hover { color: var(--c-oxblood); }
.card-arrow:focus-visible {
    outline: 2px solid var(--c-burnished);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Hero cycler: home.js swaps records behind a short crossfade.  A
   floor on the body keeps the page from shifting under the reader as
   examples of different lengths rotate through. */
[data-hero-cycler] .record { transition: opacity 0.25s ease; }
[data-hero-cycler].hero-swapping .record { opacity: 0; }
[data-hero-cycler] .record-body { min-height: 13rem; }
@media (max-width: 720px) {
    [data-hero-cycler] .record-body { min-height: 0; }
}

/* ============================================================
   Generic sections
   ============================================================ */

.section {
    position: relative;
    z-index: 2;
    padding: var(--s-9) var(--s-6);
}
.section-inner {
    max-width: var(--page-max);
    margin: 0 auto;
}
.section-head {
    max-width: 44rem;
    margin-bottom: var(--s-8);
}
.section-head h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.14;
}

.section-ledger { border-top: 1px solid var(--c-rule); }

/* ---- Ledger ---- */

.ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8) var(--s-9);
}
.ledger-item {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    column-gap: var(--s-4);
    align-items: start;
}
.ledger-item .mark {
    font-size: 1.25rem;
    grid-row: span 2;
    padding-top: 0.15rem;
}
/* The ↻ glyph sits smaller on its em than ✓ does — size it up so the
   four marks read as one column. */
.ledger-item .mark-fixed { font-size: 1.5rem; padding-top: 0; }
.ledger-item h3 {
    font-size: 1.35rem;
    margin-bottom: var(--s-2);
}
.ledger-item p {
    grid-column: 2;
    color: var(--c-ink-muted);
    font-size: 0.97rem;
    max-width: 30rem;
}

/* ---- Steps ---- */

.section-steps { border-top: 1px solid var(--c-rule); }

.steps { list-style: none; }
.step {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--s-5);
    padding: var(--s-6) 0;
    border-top: 1px solid var(--c-rule);
    align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--c-rule); }

.step-num {
    font-family: var(--font-accent);
    font-size: 3.4rem;
    line-height: 0.9;
    color: var(--c-burnished);
    letter-spacing: -0.02em;
}
.step-body h3 {
    font-size: 1.6rem;
    margin-bottom: var(--s-3);
}
.step-body p {
    color: var(--c-ink-muted);
    max-width: 40rem;
    font-size: 1rem;
}
.step-body em { color: var(--c-ink-soft); }

/* ---- The oxblood band ---- */

.section-gate {
    position: relative;
    z-index: 2;
    background: var(--c-oxblood);
    color: var(--c-inverse-text);
    padding: var(--s-9) var(--s-6);
    /* A faint ruled texture, like a stamped endpaper. */
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.03) 0 1px,
            transparent 1px 9px
        );
}
.gate-inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}
.gate-title {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    margin-bottom: var(--s-5);
    color: var(--c-inverse-text);
}
.gate-body {
    font-size: 1.08rem;
    line-height: 1.62;
    color: var(--c-inverse-muted);
    margin: 0 auto var(--s-6);
    max-width: 38rem;
}
.gate-body strong { color: var(--c-inverse-text); font-weight: 600; }

.gate-proof {
    display: flex;
    justify-content: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.gate-proof-item {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.32rem 0.85rem;
    border: 1px solid rgba(246, 239, 223, 0.32);
    border-radius: 999px;
    color: var(--c-inverse-text);
}

/* ---- Memory grid ---- */

.memory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
}
.memory-item {
    padding-top: var(--s-4);
    border-top: 2px solid var(--c-ink);
}
.memory-item h3 {
    font-size: 1.3rem;
    margin-bottom: var(--s-3);
}
.memory-item p {
    color: var(--c-ink-muted);
    font-size: 0.97rem;
}
.memory-tools {
    margin-top: var(--s-4);
    font-size: 0.85rem !important;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted) !important;
}

/* ---- Closing ---- */

.section-closing {
    position: relative;
    z-index: 2;
    padding: var(--s-10) var(--s-6) var(--s-9);
    text-align: center;
    border-top: 1px solid var(--c-rule);
}
.closing-inner { max-width: 44rem; margin: 0 auto; }
.closing-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--s-6);
}

/* ---- Footer ---- */

.site-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--c-rule);
    padding: var(--s-6);
    background: rgba(231, 222, 203, 0.35);
}
.site-footer-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
}
.site-footer-tagline {
    margin-top: var(--s-2);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--c-ink-muted);
}
.site-footer-links {
    display: flex;
    flex-wrap: wrap;          /* 8 items must never widen the page */
    gap: var(--s-3) var(--s-5);
    justify-content: flex-end;
}
.site-footer-links a {
    font-size: 0.9rem;
    color: var(--c-ink-soft);
    text-decoration: none;
}
.site-footer-links a:hover { color: var(--c-oxblood); }

/* The corporate line sits with the footer links but reads quieter than
   them — it is a notice, not a destination. */
.site-footer-legal {
    font-size: 0.85rem;
    color: var(--c-ink-muted);
    white-space: nowrap;
}

/* ============================================================
   Get-started modal
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(20, 17, 15, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-5);
    animation: fade-in 0.18s ease both;
}

.modal {
    position: relative;
    width: 100%;
    max-width: 27rem;
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-lg);
    padding: var(--s-7) var(--s-6) var(--s-6);
    box-shadow: 0 30px 70px -30px rgba(20, 17, 15, 0.6);
    animation: modal-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1) both;
    max-height: calc(100vh - var(--s-7));
    overflow-y: auto;
}
.modal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--c-oxblood);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-4);
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c-ink-muted);
    cursor: pointer;
    transition: color var(--t-base);
}
.modal-close:hover { color: var(--c-ink); }

.modal-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-2);
}
.modal-title {
    font-size: 1.75rem;
    margin-bottom: var(--s-3);
}
.modal-lede {
    font-size: 0.95rem;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-5);
}

.signup-form { display: grid; gap: var(--s-4); }

.field { display: block; }
.field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-ink-soft);
    margin-bottom: var(--s-2);
}
.field-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--c-ink);
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 2px rgba(20, 17, 15, 0.06);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.field-input::placeholder { color: var(--c-ink-muted); }
.field-input:focus {
    outline: none;
    border-color: var(--c-burnished);
    box-shadow: inset 0 1px 2px rgba(20, 17, 15, 0.06),
                0 0 0 3px rgba(149, 115, 64, 0.18);
}

.field-error {
    font-size: 0.85rem;
    color: var(--c-status-failed);
}

.signup-skip {
    margin-top: var(--s-4);
    font-size: 0.85rem;
    color: var(--c-ink-muted);
    text-align: center;
}
.signup-skip-note { color: var(--c-ink-muted); }
.signup-back { margin-top: var(--s-5); display: block; }

.signup-done { text-align: center; }
.signup-done-mark {
    font-size: 2.4rem;
    display: block;
    margin-bottom: var(--s-3);
}
.signup-done-note {
    font-size: 0.85rem;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-5);
}

/* ============================================================
   Motion
   ============================================================ */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Page-load stagger: each element carries its own --d. */
.reveal { animation: reveal-up 0.62s cubic-bezier(0.2, 0.75, 0.3, 1) both; animation-delay: var(--d, 0ms); }

/* Record rows arrive one at a time, as if being marked up. */
.record-row, .record-foot {
    animation: reveal-up 0.45s ease both;
    animation-delay: var(--r, 0ms);
}

/* The correction beat: ✗ (flagged) → ↻ (being fixed) → ✓ (resolved).
   All three delays are offsets from the row's own reveal (--r). */
.mark-failed {
    animation: fade-out-mark 0.3s ease both;
    animation-delay: calc(var(--r) + 600ms);
}
.mark-fixing {
    opacity: 0;
    animation: fixing-beat 0.9s ease both;
    animation-delay: calc(var(--r) + 600ms);
}
.mark-resolved {
    opacity: 0;
    animation: fade-in-mark 0.4s ease both;
    animation-delay: calc(var(--r) + 1300ms);
}
.record-correction {
    opacity: 0;
    animation: fade-in-mark 0.5s ease both;
    animation-delay: calc(var(--r) + 850ms);
}

@keyframes fade-out-mark { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in-mark  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fixing-beat {
    0%   { opacity: 0; transform: rotate(0deg); }
    18%  { opacity: 1; }
    82%  { opacity: 1; transform: rotate(300deg); }
    100% { opacity: 0; transform: rotate(360deg); }
}

/* Anyone who asked for less motion gets the resolved end-state
   immediately — the record still reads correctly, it just doesn't
   perform. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-hero-cycler] .record { transition: none; }
    .industry-panel { animation: none; }
    .reveal,
    .record-row,
    .record-foot,
    .modal-backdrop,
    .modal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mark-failed, .mark-fixing { animation: none !important; opacity: 0 !important; }
    .mark-resolved, .record-correction { animation: none !important; opacity: 1 !important; }
    .btn:hover { transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
    .hero { padding-top: var(--s-8); }
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-8);
    }
    .hero-lede, .hero-sub, .hero-note { max-width: 34rem; }
    .ledger { gap: var(--s-7) var(--s-8); }
    .memory-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

@media (max-width: 720px) {
    :root { --s-9: 4rem; --s-10: 5rem; }

    .site-nav-inner { padding: 0 var(--s-4); gap: var(--s-3); }
    .site-nav-link:not(.site-nav-signin) { display: none; }

    /* The industry switcher stays on mobile — it IS the nav between
       verticals once the section links hide. */
    .industry-menu > summary { font-size: 0.9rem; }
    .industry-panel { left: -3rem; min-width: 17rem; }

    /* Keep the brand + selector + actions on one 390px line. */
    .site-nav-inner { gap: var(--s-2); }
    .wordmark { font-size: 1.1rem; }
    .site-nav-links { gap: var(--s-3); }
    .btn-small { padding: 0.38rem 0.7rem; font-size: 0.85rem; }

    .hero, .section, .section-gate, .section-closing { padding-left: var(--s-4); padding-right: var(--s-4); }

    .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }
    .hero-cta { gap: var(--s-4); }

    .ledger { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }

    .step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    .step-num { font-size: 2.4rem; }

    .site-footer-inner { flex-direction: column; align-items: flex-start; }

    .modal { padding: var(--s-6) var(--s-5) var(--s-5); }
}