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

    html {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color-scheme: dark;
        font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'cv11' 1;
        font-optical-sizing: auto;
        -webkit-tap-highlight-color: transparent;
    }

    :root {
        --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-ui: 'Inter', sans-serif;
        --font-mono: 'Space Mono', monospace;
        --font-serif: 'Instrument Serif', serif;
        /* v108-light: flipped to light theme. Background is the off-white
           from the main site palette so the page feels like part of the
           same brand. Text uses the same deep ink (#171620). Translucent
           surfaces and glows tuned for contrast on a light field. */
        --bg: #000000;     /* v45 (2026-05-31): full dark mode — page matches the ontology's pure black. */
        --bg-surface: rgba(255, 255, 255, 0.04);
        --line: rgba(255, 255, 255, 0.09);
        --text-100: #f4f4f6;
        --text-80: rgba(255, 255, 255, 0.80);
        --text-60: rgba(255, 255, 255, 0.55);
        --text-40: rgba(255, 255, 255, 0.40);
        --accent: rgba(75, 120, 215, 1);
        --accent-soft: rgba(75, 120, 215, 0.10);
        --map-blue: rgba(75, 120, 215, 0.95);
        --map-green: rgba(50, 150, 105, 0.95);
        --map-warm: rgba(215, 125, 70, 0.95);
        --map-purple: rgba(140, 105, 215, 0.95);
    }

    body {
        background: var(--bg);
        color: var(--text-80);
        font-family: var(--font-ui);
        font-size: 16px;
        line-height: 1.6;
        overflow-x: hidden;
    }

    /* Page-wide grain — same family as main site, tuned for light bg.
       Multiply blend so grain reads as soft paper texture, not noise. */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
        opacity: 0.5;
        mix-blend-mode: screen;   /* v45: screen so grain never mottles light text on the dark page */
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
    }

    /* NAV styles removed — page now uses the shared _includes/nav.html
       which carries its own styles from /styles/components/nav.css and
       /styles/v111-homepage.css. */

    /* ──────────────── HERO ──────────────── */
    .hero {
        padding: 220px 48px 140px;
        max-width: 1440px;
        margin: 0 auto;
        position: relative;
    }
    .hero-eyebrow {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-60);
        margin-bottom: 32px;
        display: inline-block;
        position: relative;
    }
    .hero-eyebrow::before {
        content: '';
        position: absolute;
        inset: -16px -36px;
        background: radial-gradient(ellipse 70% 70% at 50% 50%,
            rgba(75, 120, 215, 0.20) 0%,
            rgba(75, 120, 215, 0.08) 45%,
            transparent 80%);
        filter: blur(12px);
        z-index: -1;
        border-radius: 999px;
        pointer-events: none;
    }
    .hero-title {
        font-family: var(--font-serif);
        font-size: clamp(56px, 7.5vw, 108px);
        font-weight: 400;
        line-height: 1.04;
        letter-spacing: -0.02em;
        color: var(--text-100);
        margin: 0 0 32px;
        max-width: 1100px;
    }
    .hero-title em {
        font-style: italic;
        color: var(--text-60);
    }
    .hero-sub {
        font-family: var(--font-ui);
        font-size: 19px;
        line-height: 1.55;
        color: var(--text-80);
        max-width: 620px;
        margin: 0 0 48px;
        letter-spacing: -0.005em;
    }
    .hero-cta-row {
        display: flex;
        gap: 16px;
        align-items: center;
    }
    .btn-primary {
        background: #ffffff;
        color: #0a0a0a;
        padding: 13px 24px;
        border-radius: 999px;
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: -0.005em;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.25s ease, transform 0.12s ease;
    }
    .btn-primary:hover { background: #e9e9ec; transform: translateY(-1px); }
    .btn-secondary {
        color: var(--text-80);
        padding: 13px 22px;
        border-radius: 999px;
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 500;
        text-decoration: none;
        letter-spacing: -0.005em;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.04);
        transition: background 0.25s ease, color 0.25s ease;
    }
    .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-100); }

    /* ──────────────── PROBLEM SECTION ──────────────── */
    section.section-problem {
        padding: 120px 48px;
        max-width: 1440px;
        margin: 0 auto;
        /* v33 (2026-05-29): the homepage's .section-problem (black bg + white
           text) leaks onto this page via the shared stylesheet, but this
           page is light and the text uses dark ink. Force white bg + ink so
           the copy is readable. Higher specificity (section.) wins the cascade. */
        background: var(--bg);
        color: var(--text-100);
    }
    .section-eyebrow {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-60);
        margin-bottom: 36px;
        display: block;
    }
    .problem-statement { font-family: var(--font-sans); font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.16; color: var(--text-100); max-width: 880px; margin: 0 0 24px; }
    .problem-statement em {
        font-style: normal;
        color: var(--text-40);
    }
    .problem-body { font-family: var(--font-ui); font-size: 18px; line-height: 1.6; color: var(--text-60); max-width: 600px; margin: 0 0 16px; }
    .problem-resolve { font-family: var(--font-ui); font-size: 18px; line-height: 1.6; color: var(--text-100); max-width: 600px; margin: 0; }
    .problem-resolve strong { font-weight: 600; color: var(--text-100); }
    .problem-aside strong {
        color: var(--text-100);
        font-weight: 600;
    }

    /* ──────────────── FROST TREE (Live Ontology) ────────────────
       v34 (2026-05-29): the frost-tree CSS was lost (markup survived,
       styles did not), so this section is recreated here — a mountain
       photo card with a dark overlay, and a glowing white node graph
       that draws itself in when scrolled into view. */
    /* v39 (2026-05-30): full-bleed dark band (edge-to-edge) instead of a
       rounded card on white. A 100vw ::before slab paints the dark; content
       stays centered at 1440. */
    /* v46 (2026-05-31): full-viewport HERO. The illustration is anchored to
       the bottom and scaled so the WHOLE graph fits one screen; the headline +
       CTA are overlaid on the empty sky in the upper-left. */
    .section-frost-tree {
        position: relative;
        height: 100vh;
        min-height: 660px;
        overflow: hidden;
    }
    .section-frost-tree::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        top: 0;
        bottom: 0;
        background: #000;
        z-index: 0;
    }
    .frost-tree-card {
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 0;
    }
    /* v38 (2026-05-29): mountain moved into the 16:9 stage below (so the
       SVG peak markers align to it); the card itself is now flat black. */
    .frost-tree-bg { display: none; }
    .frost-tree-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.82) 100%);
    }
    .frost-tree-inner { position: absolute; inset: 0; max-width: 1440px; margin: 0 auto; }
    .frost-tree-head {
        position: absolute;
        top: 150px;
        left: 48px;
        right: 48px;
        max-width: 720px;
        z-index: 3;
    }
    .frost-cta-row { margin-top: 26px; }
    .section-frost-tree .frost-eyebrow { color: rgba(255,255,255,0.6); }
    .frost-title {
        font-family: var(--font-sans);
        font-size: clamp(36px, 4vw, 54px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.1;
        color: #ffffff;
        margin: 12px 0 14px;
    }
    .frost-sub {
        font-family: var(--font-ui);
        font-size: 17px;
        line-height: 1.6;
        color: rgba(255,255,255,0.72);
        max-width: 640px;
        margin: 0;
    }
    /* v56: hero text condenses out of vapor — heavy blur + drift dissolving
       into crisp type. Eyebrow -> headline (per word) -> sub -> CTAs. Runs on
       load since the hero is in view immediately. */
    @keyframes vaporIn {
        0%   { opacity: 0; filter: blur(16px); transform: translateY(14px) scale(1.06); }
        55%  { opacity: 1; }
        100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
    }
    .frost-tree-head .frost-eyebrow,
    .frost-tree-head .frost-sub,
    .frost-tree-head .frost-cta-row {
        opacity: 0;
        animation: vaporIn 1.3s cubic-bezier(0.2,0.7,0.2,1) both;
        will-change: filter, transform, opacity;
    }
    .frost-tree-head .frost-eyebrow { animation-delay: 0.1s; }
    .frost-tree-head .frost-sub { animation-delay: 0.9s; }
    .frost-tree-head .frost-cta-row { animation-delay: 1.1s; }
    .frost-title .vword {
        display: inline-block;
        opacity: 0;
        animation: vaporIn 1.5s cubic-bezier(0.2,0.7,0.2,1) var(--w, 0s) both;
        will-change: filter, transform, opacity;
    }
    @media (prefers-reduced-motion: reduce) {
        .frost-tree-head .frost-eyebrow,
        .frost-tree-head .frost-sub,
        .frost-tree-head .frost-cta-row,
        .frost-title .vword { animation: none !important; opacity: 1 !important; filter: none !important; }
    }
    .frost-tree-stage {
        position: absolute;
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translateX(-50%);
        /* v51: back to the big illustration centered in the 1440 content box,
           with the headline overlaid on the upper-left sky. */
        width: min(1440px, calc(100vw - 48px), calc((100vh - 20px) * 1.792));
        aspect-ratio: 1792 / 1000;
        overflow: hidden;
        background: transparent;
        z-index: 1;
    }
    .frost-tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }

    /* v42 (2026-05-30): layered parallax. Contract's hero peak rises BEHIND the
       supporting range. Every layer uses screen blend, so the black drops to
       transparent and the luminous wireframes add where they overlap. Nudge the
       hero peak with --hero-x / --hero-y / --hero-scale if its summit and the
       Contract dot don't line up once contract-peak.png is in place. */
    .frost-range {
        position: absolute; inset: 0; z-index: 1;
        background: url('/assets/images/map-range.jpg') center / cover no-repeat;
        mix-blend-mode: screen;
        /* v58: feather the rectangular edges so the JPG's near-black border
           dissolves into the page black instead of showing a hard box seam. */
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0%, #000 14%, #000 95%, transparent 100%),
            linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to bottom, transparent 0%, #000 14%, #000 95%, transparent 100%),
            linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        mask-composite: intersect;
        /* v57: emerges from the dark after the hero text — slow fade, focus-pull
           out of blur, and a subtle push-in. Resting state = opacity 0.5. */
        opacity: 0;
        transform: scale(1.05);
        filter: blur(7px);
        transition: opacity 2.4s ease, transform 2.9s cubic-bezier(0.22,1,0.36,1), filter 2.4s ease;
    }
    .frost-tree-stage.in-view .frost-range { opacity: 0.5; transform: scale(1); filter: blur(0); }
    .frost-hero {
        position: absolute; inset: 0; z-index: 0;
        background: url('/assets/images/map-peak.jpg') no-repeat;
        background-position: var(--hero-x, 115%) var(--hero-y, 13%);
        background-size: var(--hero-scale, 72%) auto;
        mix-blend-mode: screen;
        /* v58: feather the floating peak's box edges into the dark. */
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0%, #000 11%, #000 90%, transparent 100%),
            linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to bottom, transparent 0%, #000 11%, #000 90%, transparent 100%),
            linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-composite: intersect;
        /* v57: surfaces from the dark with the range. Only opacity + blur are
           animated; transform stays free so the parallax JS keeps control. */
        opacity: 0;
        filter: blur(11px);
        transform: translateY(var(--hero-parallax, 0px));
        transition: opacity 2.7s ease, filter 2.7s ease;
        will-change: transform, opacity;
    }
    .frost-tree-stage.in-view .frost-hero { opacity: 0.45; filter: blur(1.4px); }
    @media (prefers-reduced-motion: reduce) {
        .frost-range { opacity: 0.5 !important; transform: none !important; filter: none !important; transition: none !important; }
        .frost-hero { opacity: 0.45 !important; filter: blur(1.4px) !important; transition: none !important; }
    }

    /* Connecting paths draw themselves in (pathLength=1 → dashoffset 1→0) */
    /* v36 (2026-05-29): branches read as frosted glass, NOT white wires.
       Soft blur diffuses the stroke so it looks etched/hazy rather than a
       crisp bright line, opacity is very low so the mountain shows through,
       and the white glow halo is pulled right down. */
    /* v40 (2026-05-30): ontology trails climbing the mountain — luminous
       white routes (glow via SVG ft-glow-line filter), drawn in on scroll. */
    .frost-path {
        fill: none;
        stroke: rgba(255,255,255,0.46);
        stroke-width: 2;
        stroke-linecap: round;
        /* v49: dotted trails (a route on a topo map), not solid wires.
           pathLength removed from the markup so dot spacing is in real
           viewBox units and even across every path. Reveal via fade. */
        stroke-dasharray: 0.5 9;
        stroke-dashoffset: 46;
        opacity: 0;
    }
    /* v55: trails flow outward from the source — dots stream along each route
       while the line fades up, on a long soft ease. */
    .frost-tree-stage.in-view .frost-path {
        animation: ftDraw 1.5s cubic-bezier(0.22,1,0.36,1) var(--d, 0s) both;
    }
    @keyframes ftDraw {
        0%   { opacity: 0; stroke-dashoffset: 46; }
        40%  { opacity: 1; }
        100% { opacity: 1; stroke-dashoffset: 0; }
    }
    .frost-path--leaf { stroke-width: 1.7; stroke: rgba(255,255,255,0.38); }
    .frost-path--glow { stroke: rgba(255,255,255,0.2); stroke-width: 0.8; }
    /* v52: distant decorative trail on the far peak. Gradient fades it out at
       the bottom (reads as going behind the front mountains); blurred = distant. */
    .frost-path--distant { stroke: url(#distantFade); stroke-width: 2.4; }
    .frost-label--distant {
        fill: rgba(255,255,255,0.55);
        font-family: var(--font-sans);
        font-size: 12px; font-weight: 600;
        text-anchor: middle; letter-spacing: 0.01em;
        opacity: 0; transition: opacity 1s ease; transition-delay: var(--d, 0.2s);
    }
    .frost-tree-stage.in-view .frost-label--distant { opacity: 1; }

    /* Nodes scale + fade in. v37 (2026-05-29): pills are frozen glass —
       translucent white fill + a brighter frost rim — not solid white. */
    .frost-node {
        opacity: 0;
        transform: scale(0.35);
        transform-box: fill-box;
        transform-origin: center;
        fill: rgba(255,255,255,0.07);
        stroke: rgba(255,255,255,0.26);
        stroke-width: 1.1;
    }
    /* v55: nodes bloom softly with an expo-out settle. */
    .frost-tree-stage.in-view .frost-node {
        animation: ftBloom 0.95s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both;
    }
    @keyframes ftBloom {
        0%   { opacity: 0; transform: scale(0.5); }
        100% { opacity: 1; transform: scale(1); }
    }
    .frost-node--root   { fill: rgba(255,255,255,0.11); stroke: rgba(255,255,255,0.38); }
    .frost-node--branch { fill: rgba(255,255,255,0.09); stroke: rgba(255,255,255,0.32); }
    .frost-node--leaf   { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.24); }

    /* Labels: dark ink inside the white root/branch nodes, white for the
       leaf labels that sit above their nodes on the dark photo. */
    .frost-label {
        font-family: var(--font-ui);
        text-anchor: middle;
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
    }
    /* v55: labels rise + fade in after their node lands. */
    .frost-tree-stage.in-view .frost-label {
        animation: ftRise 0.8s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both;
    }
    @keyframes ftRise {
        0%   { opacity: 0; transform: translateY(8px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    /* v37: all labels white; subtle shadow keeps them legible on the
       translucent frozen-glass pills and the dark photo. */
    .frost-label { fill: rgba(255,255,255,0.74); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
    .frost-label--root   { font-size: 18px; font-weight: 600; fill: rgba(255,255,255,0.95); }
    .frost-label--branch { font-size: 15px; font-weight: 600; }
    .frost-label--leaf   { font-size: 13px; font-weight: 500; }
    /* v41 (2026-05-30): "source of truth" tag under the Contract apex */
    .frost-sublabel {
        fill: rgba(255,255,255,0.55);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-anchor: middle;
        opacity: 0;
    }
    /* v55: the SOURCE OF TRUTH tag tightens its tracking as it settles. */
    .frost-tree-stage.in-view .frost-sublabel {
        animation: ftTag 1s ease var(--d, 0s) both;
    }
    @keyframes ftTag {
        0%   { opacity: 0; letter-spacing: 0.32em; }
        100% { opacity: 1; letter-spacing: 0.14em; }
    }
    @media (prefers-reduced-motion: reduce) {
        .frost-tree-stage.in-view .frost-path,
        .frost-tree-stage.in-view .frost-node,
        .frost-tree-stage.in-view .frost-label,
        .frost-tree-stage.in-view .frost-sublabel { animation-duration: 0.01ms !important; }
    }

    @media (max-width: 768px) {
        .frost-tree-card { padding: 40px 24px 32px; }
    }

    /* ──────────────── THE MAP DIAGRAM ────────────────
       v108-light-island: this section flips to DARK mode and breaks
       full-bleed out of the page's light field. The dark slab makes
       the diagram feel like the "specimen" sitting under the light.
       Background extends to viewport edges via a viewport-wide
       ::before; content stays inside the 1280px container. */
    .section-diagram {
        padding: 140px 48px 160px;
        max-width: 1440px;
        margin: 0 auto;
        position: relative;
        color: rgba(255, 255, 255, 0.78);
    }
    .section-diagram::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        top: 0; bottom: 0;
        background: #000000;
        z-index: -2;
    }
    /* Page-grain effect mirrored on the dark slab so the texture
       carries across the transition without breaking. */
    .section-diagram::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        top: 0; bottom: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.45;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
    }
    .diagram-head {
        max-width: 720px;
        margin-bottom: 64px;
    }
    /* Scoped overrides: text colors flipped for dark slab. */
    .section-diagram .section-eyebrow {
        color: rgba(255, 255, 255, 0.55);
    }
    .diagram-title {
        font-family: var(--font-sans);
        font-size: clamp(32px, 3.4vw, 48px);
        font-weight: 500;
        letter-spacing: -0.022em;
        line-height: 1.16;
        color: rgba(255, 255, 255, 0.96);
        margin: 0 0 20px;
    }
    .diagram-sub {
        font-family: var(--font-ui);
        font-size: 17px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.60);
        max-width: 580px;
    }

    .map-stage {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 640px;
        border-radius: 16px;
        background:
            radial-gradient(120% 80% at 50% -10%, rgba(195, 220, 255, 0.07) 0%, rgba(170, 200, 240, 0.028) 60%, transparent 100%);
        border: 1px solid rgba(195, 220, 255, 0.06);
        overflow: hidden;
    }
    .map-stage svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    /* Nodes — white dots on dark field, soft colored glow halos. */
    .map-node circle.map-node-dot {
        fill: #ffffff;
    }
    .map-node-pulse {
        transform-origin: center;
        animation: mapPulse 3.6s ease-in-out infinite;
    }
    @keyframes mapPulse {
        0%, 100% { opacity: 0.45; transform: scale(1); }
        50% { opacity: 0.92; transform: scale(1.6); }
    }
    .map-edge {
        stroke: rgba(195, 220, 255, 0.20);
        stroke-width: 1;
        fill: none;
    }
    .map-edge.is-highlight {
        stroke: rgba(195, 220, 255, 0.55);
        stroke-width: 1.2;
    }
    .map-node-label {
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: 600;
        fill: rgba(255, 255, 255, 0.96);
        letter-spacing: -0.005em;
    }
    .map-node-sub {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 700;
        fill: rgba(255, 255, 255, 0.38);
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    /* ──────────────── HOW IT'S BUILT — 4 layers ──────────────── */
    .section-build {
        padding: 120px 48px;
        max-width: 1440px;
        margin: 0 auto;
        border-top: 1px solid var(--line);
    }
    .build-head {
        max-width: 760px;
        margin-bottom: 72px;
    }
    .build-title {
        font-family: var(--font-sans);
        font-size: clamp(32px, 3.4vw, 48px);
        font-weight: 500;
        letter-spacing: -0.022em;
        line-height: 1.16;
        color: var(--text-100);
        margin: 0 0 20px;
    }
    .build-sub {
        font-family: var(--font-ui);
        font-size: 17px;
        line-height: 1.55;
        color: var(--text-60);
        max-width: 580px;
    }
    .build-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
    /* v53: "What you get" value cards reuse the .build-card chrome in a 3-up grid */
    /* v58: tall vertical "monolith" cards — narrower columns, big min-height,
       number pinned at top and title/body anchored to the base. */
    .unlocks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 16px auto 0; max-width: 1180px; }
    .unlocks-grid .build-card { display: flex; flex-direction: column; min-height: 520px; padding: 30px 28px 34px; }
    /* Push the text block to the bottom of the card. Min-heights below
       lock title + body to a uniform vertical footprint across the three
       cards so the baselines line up even when one card's copy is longer
       (e.g. "Scale without adding headcount" wraps to 2 lines). */
    .value-card-title {
        font-family: var(--font-sans);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.018em;
        line-height: 1.18;
        color: #171620;
        margin-top: auto;
        margin-bottom: 12px;
        min-height: calc(24px * 1.18 * 2); /* 2 lines worth */
        display: flex;
        align-items: flex-end;
    }
    .value-card-body {
        font-family: var(--font-ui);
        font-size: 15px;
        line-height: 1.55;
        color: rgba(23, 22, 32, 0.62);
        min-height: calc(15px * 1.55 * 5); /* 5 lines worth — matches the longest body */
    }

    /* v54: section-unlocks + section-closer never had a container rule (the 1440
       frame + headings lived on the old section-diagram/section-build classes,
       which were removed with those sections). Re-establish framing to match
       the problem section: capped at 1440, centered, same dark ink. */
    section.section-unlocks {
        padding: 120px 48px;
        max-width: 1440px;
        margin: 0 auto;
        background: var(--bg);
        color: var(--text-100);
    }
    .unlocks-head { max-width: 760px; margin-bottom: 56px; }
    .unlocks-title {
        font-family: var(--font-sans);
        font-size: clamp(28px, 3vw, 42px);
        font-weight: 500; letter-spacing: -0.022em; line-height: 1.16;
        color: var(--text-100); margin: 0 0 20px;
    }
    .unlocks-sub {
        font-family: var(--font-ui); font-size: 17px; line-height: 1.55;
        color: var(--text-60); max-width: 600px; margin: 0;
    }
    section.section-closer {
        padding: 140px 48px 180px;
        max-width: 1440px;
        margin: 0 auto;
        background: var(--bg);
        color: var(--text-100);
        text-align: center;
    }
    .closer-statement {
        font-family: var(--font-sans);
        font-size: clamp(34px, 4vw, 56px);
        font-weight: 500; letter-spacing: -0.025em; line-height: 1.12;
        color: var(--text-100); max-width: 920px; margin: 0 auto;
    }
    .closer-name {
        font-family: var(--font-ui); font-size: 18px;
        color: var(--text-60); margin: 28px 0 0;
    }
    .closer-name strong { color: var(--text-100); font-weight: 600; }
    .closer-cta { margin-top: 44px; }
    @media (max-width: 860px) { .unlocks-grid { grid-template-columns: 1fr; } }

    /* The value cards carry a photographic illustration behind the text.
       Shared chrome lives here; each card's specific image is set by a
       modifier class below so all three share identical treatment. */
    .build-card.build-card--photo {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #15171c;
        border: none;
        overflow: hidden;
    }
    .build-card--photo.is-fog    { background-image: url('/assets/images/card-fog-valley.jpg'); }
    .build-card--photo.is-canyon { background-image: url('/assets/images/card-canyon-river.jpg'); }
    .build-card--photo.is-sky    { background-image: url('/assets/images/card-sky-horizon.jpg'); }
    /* Light frosted layer over the panorama: a soft glass blur + pale veil
       softens the photo and unifies the three cards; the base darkens a touch
       so the white text stays legible (the bright sky card especially). The
       text sits above this because ::before paints before the card content. */
    /* Heavy frosted-glass overlay: the photo is the atmosphere, not the
       content. Strong blur + a darker base ensures the text reads crisp
       on top with no halo. */
    .build-card--photo::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(10,14,22,0.18) 0%,
            rgba(10,14,22,0.32) 55%,
            rgba(6,9,16,0.62) 100%);
        backdrop-filter: blur(18px) saturate(0.85);
        -webkit-backdrop-filter: blur(18px) saturate(0.85);
    }
    /* Text sits above the frost (z-index 1 ensures it never inherits any
       backdrop-filter optical noise). No text-shadow — the dark frost is
       the contrast surface, so the type stays sharp. */
    .build-card.build-card--photo > * { position: relative; z-index: 1; }
    .build-card.build-card--photo .value-card-num { color: rgba(255,255,255,0.72); text-shadow: none; }
    .build-card.build-card--photo .value-card-title { color: #ffffff; text-shadow: none; }
    .build-card.build-card--photo .value-card-body { color: rgba(255,255,255,0.88); text-shadow: none; }

    .build-card {
        padding: 28px 24px 26px;
        /* v108-light: cards sit on white with a subtle blueish wash at
           the top, soft shadow for elevation, and a faint paper grain.
           Same translucent-card vocabulary as the dark version, just
           tuned for a light field. */
        background:
            radial-gradient(120% 80% at 50% -10%, rgba(75, 120, 215, 0.045) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.92) 100%);
        border: 1px solid rgba(23, 22, 32, 0.07);
        border-radius: 14px;
        box-shadow:
            0 1px 2px rgba(23, 22, 32, 0.04),
            0 8px 24px rgba(23, 22, 32, 0.05);
        position: relative;
       
    }


/* ── Cinematic payoff — embedded "agents working the map" module ── */

/* ── Stats / payoff band — bridges the problem to the cinematic ── */
.section-stats { max-width: 1440px; margin: 0 auto; padding: 0 48px 130px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.12); }
.stat { padding: 40px 32px 4px 0; border-right: 1px solid rgba(255,255,255,0.07); }
.stat:last-child { border-right: none; padding-right: 0; }
.stat-num { font-family: var(--font-sans); font-size: clamp(38px, 4vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--text-100); }
.stat-label { font-family: var(--font-ui); font-size: 14px; line-height: 1.45; color: var(--text-60); margin-top: 16px; max-width: 17ch; }
@media (max-width: 860px) { .stats-row { grid-template-columns: repeat(2, 1fr); } .stat { border-right: none; } }

.section-cinematic{position:relative;background:#000;}
.section-cinematic .cinematic-intro{max-width:1440px;margin:0 auto;padding:110px 48px 48px;}
.section-cinematic .cinematic-lead{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:rgba(255,255,255,.9);margin:14px 0 0;max-width:26ch;}
.section-cinematic .cinematic-body{font-size:18px;line-height:1.6;color:rgba(255,255,255,.6);max-width:620px;margin:20px 0 0;}
.section-cinematic .cinematic-frame{display:block;width:100%;height:100vh;border:0;background:#000;}
@media (max-width:768px){.section-cinematic .cinematic-intro{padding:64px 24px 28px;}}
.section-cinematic .cinematic-outro{max-width:1200px;margin:0 auto;padding:84px 48px 124px;text-align:center;}
.section-cinematic .cinematic-outro-line{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.22;letter-spacing:-.02em;color:#fff;margin:0 auto 38px;max-width:22ch;}
.section-cinematic .cinematic-outro .btn-primary{display:inline-flex;align-items:center;gap:8px;}
@media (max-width:768px){.section-cinematic .cinematic-outro{padding:56px 24px 84px;}}


/* ── Peak entity cards — frosted ontology-unit cards at the peaks (half size) ── */
.peak-fo{overflow:visible;}
.peak-fo-inner{display:flex;justify-content:center;}
.peak-card{width:116px;text-align:left;padding:8px 10px 9px;border-radius:10px;
  background:rgba(15,17,23,0.62);border:1px solid rgba(255,255,255,0.15);
  -webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--font-ui,'Inter',-apple-system,sans-serif);
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);}
.frost-tree-stage.in-view .peak-card{opacity:1;transform:none;}
.peak-card .pc-name{font-size:11px;font-weight:600;color:#f4f5f7;letter-spacing:-.01em;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);}
.peak-card .pc-rows{display:flex;flex-direction:column;gap:5px;}
.peak-card .pc-row{font-size:9.5px;color:rgba(255,255,255,.5);font-weight:450;letter-spacing:.02em;}

.section-frost-tree .frost-node{display:none;}
.section-frost-tree .frost-path--leaf{display:none;}


/* Contract card (source-of-truth hub) sits over the converging dotted lines,
   so it stays opaque — no see-through, no frosted blur showing the cables. */
.peak-fo[style*="--d:0.42s"] .peak-card{
    background:rgba(14,16,21,0.98);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:0 14px 30px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
}