/* =============================================================================
   PRJCT LAZRUS — Design System v4 · "Technical Record, after dark"
   -----------------------------------------------------------------------------
   v3 was warm paper and warm ink with a blueprint blue. v4 keeps every
   structural decision it made — hairlines instead of shadows, numbered clauses
   instead of eyebrow chrome, tabular mono for every figure, square corners —
   and moves the whole thing onto a near-black ground with one violet signal.

   The ground is #0B0A11 — a near-black carrying the same violet hue as the
   accent, so the page reads purple-black rather than neutral. It is not pure
   black, so a 1px rule has somewhere to sit. Reading colour is grey, not
   white: a full page of white on black glares. Depth is a luminance step and
   a rule, never a blur.

   One accent, --signal (#AB89FF), does every accent job: link, clause number,
   focus ring, accent border, primary button fill. It measures 7.3:1 on the
   ground, which is what lets a single value be legible as small text, visible
   as a hairline border, and light enough to carry near-black labels as a fill.
   --signal-2 is hover, --signal-3 is press and never carries text.

   Every surface and rule is specified in OkLCh on hue 293 and converted, so
   the greys share the accent's hue and the ramp stays even by lightness
   rather than by eye.

   Type: Newsreader (serif, variable 300-800) for reading and display;
         JetBrains Mono (variable 400-700) for labels, figures and code.
   No sans-serif. That absence is the point.
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* === Faces ================================================================ */

@font-face {
    font-family: 'Newsreader';
    src: url('/assets/fonts/newsreader.woff2') format('woff2-variations');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Newsreader';
    src: url('/assets/fonts/newsreader-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrainsmono.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* === Tokens =============================================================== */

:root {
    color-scheme: dark;

    /* Black and grey. The field is near-black rather than pure #000 so the
       hairlines have somewhere to sit, and the type is grey rather than white
       so a full page of it does not glare. */
    --paper:    #0B0A11;
    --paper-2:  #15131D;
    --paper-3:  #201D2A;
    --ink:      #E9E8F2;
    --ink-2:    #B6B4C2;
    --ink-3:    #8C899C;
    --rule:     #2A2836;
    --rule-2:   #403D4F;

    /* One accent does every accent job. #AB89FF sits at 7.3:1 on the ground,
       which is what lets a single value work as small text (>4.5:1), as a 1px
       control border (>3:1), and as a button fill light enough for near-black
       labels. A deeper violet manages about 3.5:1 and would have forced a
       second purple for text. --signal-3 is only ever the pressed state, so it
       never has to carry text. The three status colours stay as they are: an
       error or a red roadmap item has to read as a state, not as emphasis. */
    --signal:      #AB89FF;                      /* accent + primary button fill */
    --signal-2:    #C6B2FF;                      /* hover */
    --signal-3:    #8B56F9;                      /* press — never carries text */
    --signal-dim:  rgba(171, 137, 255, 0.12);    /* selected-state tint */
    --signal-rule: rgba(171, 137, 255, 0.42);    /* accent borders */

    --red:       #D08A7A;
    --red-wash:  #1D1614;
    --green:     #93BFA3;
    --amber:     #D2B36B;

    --grid-line: color-mix(in srgb, var(--ink) 5%, transparent); /* unused since the hero grid was retired */
    --select:    rgba(171, 137, 255, 0.28);      /* text selection needs more than the dim tint */

    --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* A tight ramp through the reading sizes, broken by one deliberate jump to
       display. The discontinuity is the design decision; a uniform 1.25 ramp
       is what a tool picks for you. */
    --t-micro: 0.75rem;
    --t-meta:  0.8125rem;
    --t-small: 0.9375rem;
    --t-body:  1.125rem;
    --t-lede:  1.28rem;
    --t-h3:    1.28rem;
    --t-h2:    clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
    --t-h1:    clamp(2.5rem, 1.5rem + 3.5vw, 3.85rem);

    --idx:   5.5rem;   /* the index column that runs down the left of the page */
    --gap:   1.75rem;
    --measure: 66ch;

    --shell: 1180px;
    --pad:   clamp(1.25rem, 4vw, 3.5rem);
}

/* The page is black in every context, so there is no light-mode branch to
   maintain and no second palette to keep in sync. */

/* === Reset ================================================================ */

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; padding: 0; }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: 6.25rem;
    }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    img, svg, video { display: block; max-width: 100%; height: auto; }
    button, input, select, textarea { font: inherit; color: inherit; }
    ul, ol { list-style: none; }
    table { border-collapse: collapse; width: 100%; }
    ::selection { background: var(--select); }
}

/* === Base ================================================================= */

@layer base {
    body {
        font-family: var(--serif);
        font-size: var(--t-body);
        font-weight: 400;
        line-height: 1.68;
        color: var(--ink);
        background: var(--paper);
        font-variant-numeric: oldstyle-nums proportional-nums;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        counter-reset: sect;
    }

    h1, h2, h3, h4 {
        font-family: var(--serif);
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: -0.014em;
        text-wrap: balance;
        color: var(--ink);
    }
    h1 {
        font-size: var(--t-h1);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.026em;
    }
    h2 { font-size: var(--t-h2); letter-spacing: -0.02em; }
    h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.008em; }
    h4 { font-size: var(--t-small); }

    p { max-width: var(--measure); }
    p + p { margin-top: 1.05em; }

    a {
        color: var(--signal);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
        text-decoration-color: var(--signal-rule);
        transition: text-decoration-color .12s, color .12s;
    }
    a:hover { color: var(--signal-2); text-decoration-color: currentColor; }

    strong, b { font-weight: 700; }
    em, i { font-style: italic; }
    code, kbd, samp, pre { font-family: var(--mono); font-size: 0.875em; }

    :focus-visible {
        outline: 2px solid var(--signal);
        outline-offset: 2px;
        border-radius: 1px;
    }

    /* Every figure on this site is tabular and lining. Numbers line up in a
       column or they are decoration. */
    .num, .stat-value, .stat-val, .metric-val, table td, table th {
        font-variant-numeric: tabular-nums lining-nums;
    }
}

/* === Layout =============================================================== */

@layer layout {
    .container {
        width: 100%;
        max-width: var(--shell);
        margin-inline: auto;
        padding-inline: var(--pad);
    }

    /* Sections are separated by a rule, not by a colour swap. A rule is what a
       printed document uses; a swapped background band is what a template uses. */
    .section {
        padding-block: clamp(4.25rem, 8vw, 7.5rem);
        border-top: 1px solid var(--rule);
    }
    .section:first-of-type { border-top: 0; }

    /* section--alt survives from the old markup; it now means "recessed", a 4%
       luminance step, never a different hue. */
    .section--alt { background: var(--paper-2); }

    .skip-to-content {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 200;
        background: var(--ink);
        color: var(--paper);
        font-family: var(--mono);
        font-size: var(--t-meta);
        padding: 0.75rem 1.25rem;
        text-decoration: none;
    }
    .skip-to-content:focus {
        left: 0.75rem;
        top: 0.75rem;
    }

    /* The index column: section number and meta run down the left margin on
       wide screens, the way a specification sheet numbers its clauses. */
    .ruled {
        display: grid;
        grid-template-columns: var(--idx) minmax(0, 1fr);
        column-gap: var(--gap);
    }
    @media (max-width: 860px) {
        .ruled { grid-template-columns: 1fr; }
    }
}

/* === Components =========================================================== */

@layer components {

    /* --- Mono label ------------------------------------------------------- */
    /* The old eyebrow was uppercase, letterspaced, with a dot in front and a
       line trailing after. That exact ornament is the single most recognisable
       piece of generated-site chrome. This is its replacement: a clause number
       in mono, set like a reference, not a badge. */
    .overline,
    .card-eyebrow,
    .stat-label,
    .metric-label,
    .label {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--ink-3);
        text-transform: none;
        font-variant-numeric: tabular-nums lining-nums;
    }

    .section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
    .section-head .overline {
        display: block;
        margin-bottom: 1.1rem;
        color: var(--ink-3);
    }
    .section-head .overline::before {
        counter-increment: sect;
        content: counter(sect, decimal-leading-zero) "\00a0\00a0/\00a0\00a0";
        color: var(--signal);
        font-weight: 600;
    }
    .section-head h2 { max-width: 22ch; }
    .section-sub {
        margin-top: 1.15rem;
        font-size: var(--t-lede);
        color: var(--ink-2);
        max-width: 62ch;
    }

    /* --- Navigation ------------------------------------------------------- */
    /* Opaque. No backdrop blur: a blurred translucent bar is chrome borrowed
       from an operating system, and it makes serif type shimmer as it scrolls
       underneath. */
    .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--paper);
        border-bottom: 1px solid transparent;
        transition: border-color .15s;
    }
    .nav.scrolled { border-bottom-color: var(--rule); }

    .nav-inner {
        max-width: var(--shell);
        margin-inline: auto;
        padding: 0 var(--pad);
        height: 4.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .nav-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--mono);
        font-size: var(--t-small);
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--ink);
        text-decoration: none;
    }
    .nav-logo:hover { color: var(--ink); }
    .nav-logo .mark { width: 1.5rem; height: 1.5rem; flex: none; }

    .nav-links {
        display: flex;
        align-items: center;
        gap: clamp(1rem, 2.2vw, 2rem);
    }
    .nav-links a {
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 500;
        color: var(--ink-2);
        text-decoration: none;
        padding-block: 0.45rem;
        border-bottom: 1px solid transparent;
    }
    .nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
    .nav-links a[aria-current='page'] {
        color: var(--ink);
        border-bottom-color: var(--signal);
    }

    .nav-toggle {
        display: none;
        background: none;
        border: 1px solid var(--rule);
        color: var(--ink);
        font-family: var(--mono);
        font-size: var(--t-meta);
        padding: 0.4rem 0.7rem;
        cursor: pointer;
    }

    @media (max-width: 860px) {
        .nav-toggle { display: block; }
        .nav-links {
            position: absolute;
            inset-inline: 0;
            top: 100%;
            display: none;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            background: var(--paper);
            border-block: 1px solid var(--rule);
            padding: 0.5rem var(--pad) 1rem;
        }
        .nav-links.active { display: flex; }
        .nav-links a {
            padding-block: 0.8rem;
            border-bottom: 1px solid var(--rule);
        }
        .nav-links a:last-child { border-bottom: 0; }
    }

    /* --- Buttons ---------------------------------------------------------- */
    /* Square. A 12px radius on everything is the tell; a rule-bounded button is
       what a form on paper looks like. */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
        padding: 0.95rem 1.5rem;
        border: 1px solid var(--ink);
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        text-decoration: none;
        cursor: pointer;
        transition: background .12s, color .12s, border-color .12s;
    }
    .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--paper); }
    .btn-primary:hover { background: var(--signal-2); border-color: var(--signal-2); color: var(--paper); }
    .btn-primary:active { background: var(--signal-3); border-color: var(--signal-3); color: var(--paper); }
    .btn-ghost, .btn-secondary {
        background: transparent;
        color: var(--ink);
        border-color: var(--rule-2);
    }
    .btn-ghost:hover, .btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
    .btn[disabled] { opacity: .5; cursor: not-allowed; }

    /* --- Hero ------------------------------------------------------------- */
    /* The hero used to be ruled like graph paper. The grid competed with the
       type for attention and won, which is the opposite of what a page of
       reading wants. What is left is a single warm wash that lifts the top of
       the page off the body and then gets out of the way. */
    .hero, .product-hero {
        position: relative;
        padding-block: clamp(4rem, 8.5vw, 7.75rem) clamp(3.25rem, 6.5vw, 5.5rem);
        background-image:
            linear-gradient(180deg,
                color-mix(in srgb, var(--paper-2) 70%, transparent) 0%,
                transparent 100%);
    }
    .hero-inner, .product-hero-inner { position: relative; }

    .hero h1, .product-hero h1 { max-width: 20ch; }
    .hero-sub {
        margin-top: 1.75rem;
        font-size: var(--t-lede);
        color: var(--ink-2);
        max-width: 58ch;
    }
    .hero-actions, .product-cta-actions {
        margin-top: 2.5rem;
        display: flex;
        gap: 0.9rem;
        flex-wrap: wrap;
    }
    .hero-meta {
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink-3);
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 1.5rem;
    }
    .hero-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }

    /* --- Datasheet strip (was: the four-number vanity bar) ---------------- */
    .metrics {
        border-block: 1px solid var(--rule);
        background: var(--paper-2);
    }
    .metrics-inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 0;
    }
    .metric {
        padding: 1.9rem var(--gap) 1.9rem 0;
        border-left: 1px solid var(--rule);
        padding-left: 1.5rem;
    }
    .metric:first-child { border-left: 0; padding-left: 0; }
    .metric-val {
        display: block;
        font-family: var(--mono);
        font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem);
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--ink);
    }
    .metric-label { display: block; margin-top: 0.5rem; }
    @media (max-width: 720px) {
        .metrics-inner { grid-template-columns: repeat(2, 1fr); }
        .metric { border-left: 0; padding-left: 0; padding-block: 1.35rem; }
        .metric:nth-child(n+3) { border-top: 1px solid var(--rule); }
    }

    /* --- The ruled matrix (replaces floating cards) ----------------------- */
    /* Cards used to be boxes with radii and shadows on a dark field. They are
       now cells in a ruled table: one hairline between them, a clause number in
       the corner, nothing floating. */
    .cards, .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
        gap: 0;
        border-top: 1px solid var(--rule);
        border-left: 1px solid var(--rule);
        counter-reset: cell;
    }
    .card, .product-card {
        position: relative;
        padding: 2.25rem 2.25rem 2.4rem;
        border-bottom: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
        background: transparent;
        transition: background .15s;
    }
    .card:hover, .product-card:hover { background: var(--paper-2); }
    .cards > *:last-child, .product-grid > *:last-child { border-right: 1px solid var(--rule); }

    .card::before, .product-card::before {
        counter-increment: cell;
        content: counter(cell, decimal-leading-zero);
        position: absolute;
        top: 2.25rem;
        right: 2.25rem;
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-variant-numeric: tabular-nums lining-nums;
        color: var(--rule-2);
    }

    .card--wide { grid-column: 1 / -1; }
    .card h3, .product-card h3 {
        margin-top: 0.4rem;
        margin-bottom: 0.75rem;
        padding-right: 2.75rem;
    }
    .card-eyebrow { display: block; }
    .card-body, .product-card p { color: var(--ink-2); font-size: var(--t-small); }
    .card--wide .card-body { font-size: var(--t-body); max-width: 70ch; }

    .card-link {
        display: inline-block;
        margin-top: 1.35rem;
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid var(--signal-rule);
        padding-bottom: 1px;
    }
    .card-link:hover { border-bottom-color: currentColor; }
    .card-link::after { content: "\00a0\2192"; }

    /* The old markup put a decorative Font Awesome glyph at the top of every
       feature card. Nothing was communicated by 192 identical circles. */
    .product-card-icon { display: none; }

    /* --- Product page furniture ------------------------------------------ */
    .product-hero-content { max-width: 62ch; }
    .product-hero-content > p { font-size: var(--t-lede); color: var(--ink-2); margin-top: 1.25rem; }

    .product-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        margin-top: 3rem;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
    }
    .stat {
        padding: 1.45rem 1.5rem 1.5rem 0;
        border-left: 1px solid var(--rule);
        padding-left: 1.5rem;
    }
    .stat:first-child { border-left: 0; padding-left: 0; }
    .stat-value, .stat-val {
        display: block;
        font-family: var(--mono);
        font-size: clamp(1.2rem, 1rem + 0.9vw, 1.45rem);
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--ink);
    }
    .stat-label { display: block; margin-top: 0.45rem; }

    /* An attribution band, not a badge. */
    .client-strip, .client-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink-2);
        border-left: 2px solid var(--signal);
        padding: 0.15rem 0 0.15rem 0.7rem;
        margin-bottom: 1rem;
    }
    .client-note {
        margin-top: 2.5rem;
        border-left: 2px solid var(--red);
        background: var(--red-wash);
        padding: 1.1rem 1.35rem;
    }
    .client-note p {
        font-size: var(--t-small);
        color: var(--ink-2);
        max-width: 78ch;
    }

    /* --- Split ------------------------------------------------------------ */
    .product-split {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }
    @media (max-width: 900px) { .product-split { grid-template-columns: 1fr; } }
    .product-split-text p { color: var(--ink-2); }

    /* --- Code ------------------------------------------------------------- */
    .code-block {
        border: 1px solid var(--rule);
        background: var(--paper-2);
        overflow: hidden;
    }
    .code-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.9rem;
        border-bottom: 1px solid var(--rule);
        background: var(--paper-3);
    }
    .filename, .code-filename {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
    }
    .code-header .dot { display: none; }
    .code-block pre {
        margin: 0;
        padding: 1.25rem 1.35rem 1.4rem;
        overflow-x: auto;
        font-size: var(--t-small);
        line-height: 1.75;
        color: var(--ink-2);
        -moz-tab-size: 4;
        tab-size: 4;
    }
    .keyword  { color: var(--signal); }
    .string   { color: #9C9C9C; }
    .function { color: #F2F2F2; font-weight: 600; }
    .comment  { color: #6F6F6F; font-style: italic; }

    /* --- Info / tech / roadmap lists ------------------------------------- */
    .info-item, .tech-item {
        display: flex;
        gap: 0.75rem;
        align-items: baseline;
        padding: 0.95rem 0;
        border-bottom: 1px solid var(--rule);
        font-size: var(--t-small);
        color: var(--ink-2);
    }
    .info-item::before, .tech-item::before {
        content: "\2014";
        color: var(--rule-2);
        flex: none;
    }
    .roadmap-status {
        font-family: var(--mono);
        font-size: var(--t-micro);
        padding: 0.2rem 0.5rem;
        border: 1px solid currentColor;
    }
    .roadmap-status.green  { color: var(--green); }
    .roadmap-status.yellow { color: var(--amber); }
    .roadmap-status.red    { color: var(--red); }

    /* --- Definition/spec rows -------------------------------------------- */
    .spec {
        display: grid;
        grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
        border-top: 1px solid var(--rule);
    }
    .spec > dt {
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink-3);
        padding: 1.2rem 1.25rem 1.2rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .spec > dd {
        padding: 1.2rem 0;
        border-bottom: 1px solid var(--rule);
        font-size: var(--t-small);
        color: var(--ink-2);
    }
    @media (max-width: 640px) {
        .spec { grid-template-columns: 1fr; }
        .spec > dt { padding-bottom: 0.2rem; border-bottom: 0; }
    }

    /* --- Index list (table of contents) ---------------------------------- */
    .index-list { border-top: 1px solid var(--rule); }
    .index-row {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 1.25rem;
        padding: 1.45rem 0;
        border-bottom: 1px solid var(--rule);
        text-decoration: none;
        color: var(--ink);
        transition: padding-left .15s, background .15s;
    }
    .index-row:hover { background: var(--paper-2); padding-left: 0.6rem; color: var(--ink); }
    .index-row .n {
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--signal);
        font-variant-numeric: tabular-nums lining-nums;
    }
    .index-row .t { font-weight: 600; }
    .index-row .d {
        display: block;
        font-size: var(--t-small);
        color: var(--ink-2);
        font-weight: 400;
        margin-top: 0.3rem;
    }
    .index-row .k {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
        white-space: nowrap;
    }
    @media (max-width: 640px) {
        .index-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
        .index-row .k { display: none; }
    }

    /* --- About / values --------------------------------------------------- */
    .about-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: start;
    }
    @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
    .about-text p { color: var(--ink-2); margin-top: 1rem; }
    .about-values { border-top: 1px solid var(--rule); }
    .value {
        padding: 1.4rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .value > i { display: none; }
    .value strong {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.4rem;
    }
    .value p { font-size: var(--t-small); color: var(--ink-2); }

    /* --- Contact ---------------------------------------------------------- */
    .contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }
    @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
    .contact-info { border-top: 1px solid var(--rule); }
    .contact-item {
        display: block;
        padding: 1.15rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .contact-item > i { display: none; }
    .contact-item strong {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        color: var(--ink-3);
        margin-bottom: 0.3rem;
    }
    .contact-item span, .contact-item a { font-size: var(--t-small); }

    /* --- Forms ------------------------------------------------------------ */
    /* Underlined fields, not rounded boxes. */
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 1.25rem;
    }
    .form-field { margin-bottom: 1.6rem; }
    .form-field label {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
        margin-bottom: 0.45rem;
    }
    .form-field input,
    .form-field textarea {
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--rule-2);
        border-radius: 0;
        padding: 0.7rem 0;
        font-family: var(--serif);
        font-size: var(--t-body);
        color: var(--ink);
    }
    .form-field textarea { min-height: 7rem; resize: vertical; }
    .form-field input::placeholder,
    .form-field textarea::placeholder { color: var(--ink-3); opacity: .7; }
    .form-field input:focus,
    .form-field textarea:focus {
        outline: 0;
        border-bottom-color: var(--signal);
        border-bottom-width: 2px;
        padding-bottom: calc(0.7rem - 1px);
    }
    .form-field input:focus-visible,
    .form-field textarea:focus-visible { outline: 0; }
    .form-field input[aria-invalid='true'],
    .form-field textarea[aria-invalid='true'] { border-bottom-color: var(--red); }
    .field-error {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--red);
        margin-top: 0.3rem;
    }
    .form-notice {
        font-size: var(--t-small);
        color: var(--ink-3);
        max-width: 62ch;
        margin-bottom: 1.5rem;
        padding-left: 0.9rem;
        border-left: 1px solid var(--rule);
    }
    .form-status {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-meta);
        margin-top: 1rem;
    }
    .form-status[data-state='ok']   { color: var(--green); }
    .form-status[data-state='err']  { color: var(--red); }
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* --- CTA -------------------------------------------------------------- */
    .product-cta {
        border: 1px solid var(--rule);
        background: var(--paper-2);
        padding: clamp(2rem, 5vw, 3.25rem);
    }
    .product-cta-inner h2 { max-width: 20ch; }
    .product-cta-inner > p { color: var(--ink-2); margin-top: 0.9rem; }

    /* --- Footer ----------------------------------------------------------- */
    .footer {
        border-top: 1px solid var(--rule);
        background: var(--paper-2);
        padding-top: clamp(2.5rem, 5vw, 4rem);
    }
    .footer-inner {
        display: grid;
        grid-template-columns: 1.6fr repeat(4, 1fr);
        gap: 2rem var(--gap);
    }
    @media (max-width: 1040px) { .footer-inner { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 640px)  { .footer-inner { grid-template-columns: repeat(2, 1fr); } }

    .footer-brand strong {
        font-family: var(--mono);
        font-size: var(--t-small);
        letter-spacing: 0.01em;
    }
    .footer-brand p {
        font-size: var(--t-small);
        color: var(--ink-3);
        margin-top: 0.65rem;
        max-width: 32ch;
    }
    .footer-col h2, .footer-col h3, .footer-col h4 {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        color: var(--ink-3);
        margin-bottom: 0.9rem;
    }
    .footer-col a {
        display: block;
        font-size: var(--t-small);
        color: var(--ink-2);
        text-decoration: none;
        padding: 0.4rem 0;
    }
    .footer-col a:hover { color: var(--ink); text-decoration: underline; }
    .footer-bottom {
        margin-top: clamp(2rem, 4vw, 3rem);
        padding-block: 1.25rem;
        border-top: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .footer-bottom p {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
    }

    /* --- Consent banner --------------------------------------------------- */
    .consent-banner {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 300;
        background: var(--paper);
        border-top: 1px solid var(--ink);
        padding: 1.25rem var(--pad);
        display: grid;
        gap: 0.6rem;
        max-width: none;
    }
    .consent-title {
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        letter-spacing: 0.01em;
    }
    .consent-desc {
        font-size: var(--t-small);
        color: var(--ink-2);
        max-width: 78ch;
    }
    .consent-actions { display: flex; gap: 0.6rem; margin-top: 0.35rem; }

    /* --- Prose (legal pages) ---------------------------------------------- */
    .prose { max-width: 72ch; }
    .prose h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
    .prose h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
    .prose p, .prose li { color: var(--ink-2); }
    .prose ul, .prose ol { margin: 0.75rem 0 0.75rem 1.15rem; }
    .prose ul li { list-style: none; position: relative; padding-left: 1.15rem; margin-bottom: 0.5rem; }
    .prose ul li::before {
        content: "\2014";
        position: absolute;
        left: 0;
        color: var(--rule-2);
    }
    .prose ol { list-style: decimal; }
    .prose ol li { margin-bottom: 0.5rem; }
    .prose table { margin: 1.25rem 0; font-size: var(--t-small); }
    .prose th, .prose td {
        text-align: left;
        padding: 0.9rem 1.1rem 0.9rem 0;
        border-bottom: 1px solid var(--rule);
        vertical-align: top;
    }
    .prose th {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        color: var(--ink-3);
        border-bottom-color: var(--rule-2);
    }

    /* --- The pulse rule --------------------------------------------------- */
    /* The wordmark is a flatline that comes back. The same figure divides the
       page: one hairline, one beat. */
    .rule-pulse {
        border: 0;
        height: 1.25rem;
        margin-block: clamp(2rem, 5vw, 3.5rem);
        background: no-repeat center / auto 100%
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='20' viewBox='0 0 240 20'%3E%3Cpath d='M0 14h96l7 0 6-11 7 16 5-5h114' fill='none' stroke='%23B6AD97' stroke-width='1.25'/%3E%3C/svg%3E");
    }
}

/* === Utilities ============================================================ */

@layer utilities {
    .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .mono { font-family: var(--mono); }
    .muted { color: var(--ink-3); }
    .u-mt-0 { margin-top: 0; }

    /* One orchestrated reveal, short and once. Not a scattering of
       micro-interactions. */
    .fade-in {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .fade-in.visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
        .fade-in { opacity: 1; transform: none; }
    }
}

/* === Additions for the rebuilt home page ================================== */

@layer components {
    /* The footnote under the record strip. Every figure above it is qualified
       here, in the same view, because a number without its scope is a claim
       nobody can check. */
    .record-note {
        font-family: var(--mono);
        font-size: var(--t-micro);
        line-height: 1.85;
        color: var(--ink-3);
        max-width: 76ch;
        padding: 1.4rem 0 1.7rem;
        border-top: 1px solid var(--rule);
    }

    /* The lead case study: a block quote from the ledger, not a card. */
    .case {
        border-left: 2px solid var(--ink);
        padding: 0.25rem 0 0.25rem clamp(1rem, 2.5vw, 1.75rem);
        margin-bottom: clamp(2rem, 4vw, 3rem);
    }
    .case-title {
        font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
        font-weight: 600;
        letter-spacing: -0.018em;
        max-width: 26ch;
        margin-bottom: 0.85rem;
    }
    .case-body {
        color: var(--ink-2);
        max-width: 72ch;
    }
    .case .card-link { margin-top: 1rem; }
}

/* === Legal pages ========================================================== */

@layer components {
    .legal { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 7vw, 6rem); }
    .legal-inner { max-width: 74ch; }
    .legal-inner > .overline { display: block; margin-bottom: 0.9rem; }
    .legal-inner h1 { font-size: clamp(2rem, 1.5rem + 1.9vw, 2.75rem); margin-bottom: 1.25rem; }
    .legal-inner h2 {
        font-size: 1.5rem;
        margin-top: 3rem;
        margin-bottom: 0.7rem;
        padding-top: 1.1rem;
        border-top: 1px solid var(--rule);
    }
    .legal-inner h3 {
        margin-top: 1.9rem;
        margin-bottom: 0.5rem;
    }
    .legal-inner p, .legal-inner li { color: var(--ink-2); }
    .legal-inner p { margin-top: 1rem; }
    .legal-inner ul, .legal-inner ol { margin: 0.85rem 0 0.85rem 0; }
    .legal-inner li { position: relative; padding-left: 1.25rem; margin-bottom: 0.6rem; }
    .legal-inner ul li::before {
        content: "\2014";
        position: absolute;
        left: 0;
        color: var(--rule-2);
    }
    .legal-inner ol { counter-reset: li; }
    .legal-inner ol li { counter-increment: li; padding-left: 1.9rem; }
    .legal-inner ol li::before {
        content: counter(li, decimal-leading-zero);
        position: absolute;
        left: 0;
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
    }

    .legal-meta {
        font-family: var(--mono);
        font-size: var(--t-meta);
        line-height: 1.8;
        color: var(--ink-3);
        border-left: 1px solid var(--rule-2);
        padding-left: 0.9rem;
        margin-top: 1.5rem;
    }

    /* The summary a reader actually reads. Marked with the annotation colour,
       because it is the editor's note on the document. */
    .legal-callout {
        margin: 2rem 0;
        border-left: 2px solid var(--signal);
        background: var(--signal-dim);
        padding: 1.15rem 1.35rem;
    }
    .legal-callout p { margin-top: 0; color: var(--ink-2); }
    .legal-callout p + p { margin-top: 0.8rem; }

    .legal-table-wrap {
        margin: 1.25rem 0 1.5rem;
        overflow-x: auto;
        border-top: 1px solid var(--rule-2);
    }
    .legal-table-wrap table { font-size: var(--t-small); min-width: 34rem; }
    .legal-table-wrap th, .legal-table-wrap td {
        text-align: left;
        vertical-align: top;
        padding: 0.9rem 1.25rem 0.9rem 0;
        border-bottom: 1px solid var(--rule);
        color: var(--ink-2);
    }
    .legal-table-wrap thead th {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        color: var(--ink-3);
    }
    .legal-table-wrap tbody th {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        color: var(--ink-3);
        white-space: nowrap;
        width: 11rem;
    }
    .legal-inner code {
        background: var(--paper-2);
        border: 1px solid var(--rule);
        padding: 0.05em 0.35em;
    }
}

/* === 404 ================================================================== */

@layer components {
    .error-page {
        min-height: 100svh;
        display: grid;
        place-items: center;
        padding: 3rem var(--pad);
        background-image:
            linear-gradient(180deg,
                color-mix(in srgb, var(--paper-2) 70%, transparent) 0%,
                transparent 60%);
    }
    .error-content {
        max-width: 46rem;
        width: 100%;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        padding-block: clamp(2rem, 5vw, 3.25rem);
    }
    .error-code {
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-variant-numeric: tabular-nums lining-nums;
        color: var(--signal);
        margin-bottom: 0.9rem;
    }
    .error-code::after { content: "\00a0\00a0/\00a0\00a0not found"; color: var(--ink-3); }
    .error-title { font-size: clamp(2rem, 1.5rem + 1.9vw, 2.75rem); margin-bottom: 0.9rem; }
    .error-message { color: var(--ink-2); max-width: 52ch; }
    .error-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.9rem; }
    .error-terminal {
        font-family: var(--mono);
        font-size: var(--t-micro);
        line-height: 1.9;
        color: var(--ink-3);
        margin-top: 2rem;
        padding-top: 1.1rem;
        border-top: 1px solid var(--rule);
    }
    .error-terminal span { color: var(--signal); }
}

@layer utilities {
    /* Inline qualifier inside a heading, e.g. "(contact form only)". */
    .muted-inline { color: var(--ink-3); font-weight: 400; font-size: 0.8em; }
}

/* === Client-platform pages ================================================ */

@layer components {
    /* The same class does two jobs in the existing markup: an inline
       attribution inside a card, and a full-bleed band under a product hero.
       The band is the one that carries an inner wrapper. */
    .client-strip:has(.client-strip-inner) {
        display: block;
        border-block: 1px solid var(--rule);
        border-left: 0;          /* the inline variant's accent rule is not wanted full-bleed */
        background: var(--paper-2);
        padding: 0;
        margin: 0;
    }
    .client-strip-inner {
        max-width: var(--shell);
        margin-inline: auto;
        padding: 1.15rem var(--pad);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4rem 1rem;
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink-2);
    }
    .client-strip-label {
        font-size: var(--t-micro);
        color: var(--ink-3);
        border-right: 1px solid var(--rule-2);
        padding-right: 1rem;
    }
    .client-strip-inner strong { font-weight: 600; color: var(--ink); }
    .client-strip-meta { color: var(--ink-3); font-size: var(--t-micro); }

    /* info-item wraps its content in a bare div; give that div the layout. */
    .info-item > div, .tech-item > div { min-width: 0; }
    .info-item strong, .tech-item strong {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.2rem;
    }
    .info-item p, .tech-item p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
}

@layer components {
    .split-heading {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 600;
        color: var(--ink-3);
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--rule-2);
    }
    .boundary-note {
        margin-top: 1.75rem;
        padding-left: 0.9rem;
        border-left: 1px solid var(--rule);
        font-size: var(--t-small);
        color: var(--ink-3);
        max-width: 80ch;
    }
}

@layer components {
    .form { min-width: 0; }
    /* An alias the Kairos code sample uses for a highlighted key name. */
    .code-block .key { color: var(--signal); }
}