.hero-email[data-astro-cid-piabyx2w]{display:inline-flex;align-items:center;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--pill);padding:4px 6px;margin-top:0;box-shadow:0 1px 2px rgba(14,16,20,0.04);max-width:380px;width:100%;transition:border-color 0.2s var(--ease),box-shadow 0.2s var(--ease)}.hero-email[data-astro-cid-piabyx2w]:focus-within{border-color:var(--line-strong);box-shadow:0 1px 2px rgba(14,16,20,0.06),0 0 0 4px rgba(47,110,75,0.08)}.hero-email-input[data-astro-cid-piabyx2w]{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);padding:14px 14px}.hero-email-input[data-astro-cid-piabyx2w]::placeholder{color:var(--ink-subtle)}.hero-email-btn[data-astro-cid-piabyx2w]{background-color:var(--btn-fill);color:var(--paper);border:none;border-radius:var(--pill);padding:13px 20px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color 0.25s var(--ease)}.hero-email-btn[data-astro-cid-piabyx2w]:hover{background:var(--btn-fill-hover)}/* homepage section styles (global; loaded per-route) */

    /* This bespoke page doesn't link shell.css, so the prototype has NO global
       heading text-wrap:balance — only the hero h1 is balanced (hand-tuned). Our
       global.css balances all h1-h4, so reset section headings to wrap to match
       the prototype's line breaks. (is:global, only loads on this page.) */
    h2,
    h3,
    h4 {
        text-wrap: wrap;
    }

    /* ===== Warm-verdant accent treatment =====
     Adopted from /playground R4-C1 (chosen 2026-06-11). Replaces the flat
     forest --accent fill on highlight text + button CTAs with a dithered
     warm-verdant gradient.
       - Highlight text (hero accent, CTA-band accent, $2.4B stat, "source
         of truth" emphasis): gradient clipped to the glyphs + a 22s
         background-position drift so the dither breathes. No hover.
       - Button CTAs (.nav-cta / .hero-email-btn / .btn-primary): flat green
         with a subtle vertical sheen (lighter on top), NO dither. Two static
         states only — rest, and a slightly lighter hover. Top/bottom stops are
         @property colors so the hover interpolates smoothly. */
    @property --cta-top {
        syntax: "<color>";
        inherits: false;
        initial-value: #3a8159;
    }
    @property --cta-bot {
        syntax: "<color>";
        inherits: false;
        initial-value: #2c6645;
    }
    :root {
        /* Monotonic dark → light ramp, pure left-to-right. Moderate tonal range
       (centered on the accent) — a visible fade, but not near-black → pale. */
        --grad-verdant: linear-gradient(
            90deg,
            #234f37 0%,
            #2f6e4b 42%,
            #4a875a 76%,
            #6ba870 100%
        );
        /* Warm sibling (agentic role hues: burnt → orange → soft amber). */
        --grad-warm: linear-gradient(
            90deg,
            #87381c 0%,
            #c85a2b 42%,
            #de7842 76%,
            #ec9a62 100%
        );
        /* Cool-blue sibling (tracking/data role hues: deep slate → soft sky). */
        --grad-cool: linear-gradient(
            90deg,
            #2b4a66 0%,
            #3d6c91 42%,
            #5a8fb4 76%,
            #7eabcb 100%
        );
    }
    .hl-green,
    .hl-warm,
    .hl-blue,
    .hero h1 .accent,
    .cta-inner h2 .accent,
    .quote-center blockquote b {
        /* Exactly 100% so the full dark→light ramp maps across the phrase — the
       whole fade shows even on short text, identically on each line of a wrap. */
        background-size: 100% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    /* Palette is the only thing that differs between the role highlights. Green
     is the default (covers the existing accent hooks); warm/blue are opt-in via
     class for role-matched copy (warm = agentic, blue = tracking/data). */
    .hl-green,
    .hero h1 .accent,
    .cta-inner h2 .accent,
    .quote-center blockquote b {
        background-image: var(--grad-verdant);
    }
    /* The $2.4B stat opts OUT of the verdant gradient — flat accent green
     instead, since the gradient clashed at large display sizes. */
    .proof-cell.head .stat-value {
        color: var(--accent);
    }
    .hl-warm {
        background-image: var(--grad-warm);
    }
    .hl-blue {
        background-image: var(--grad-cool);
    }
    /* Button CTAs — flat green with a subtle top-down sheen (lighter on top),
     no dither. The @property stops let :hover interpolate smoothly. */
    .hero-email-btn,
    .btn.btn-primary {
        background-color: #337750;
        background-image: none;
        transition:
            background-color 0.25s var(--ease),
            transform 0.25s var(--ease);
    }
    .hero-email-btn:hover,
    .btn.btn-primary:hover {
        background-color: #3c855d;
    }

    /* ===== Hero stage — 3-step stepper + filmstrip carousel =====
     Driven by a SINGLE JS clock (see script at end of file): a step counter
     0->1->2 writes data-step on .hero-stage and .is-active on the centred
     scene every 4s. The gradient, the active chip, and the centred card all
     key off that one attribute, so they switch on the exact same tick and can
     never drift apart. Each card's micro-anim (sparklines draw, cursor clicks
     Approve all, checks resolve top-to-bottom) is a one-shot that replays
     whenever its scene becomes .is-active. Hover pauses the clock. */
    .hero-stage {
        position: relative;
        width: 100%;
        max-width: none; /* full container width, rail-to-rail */
        min-height: 560px;
        border-radius: 12px; /* rounded panel against the square rails — matches the proof grid below */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        z-index: 2;
        color: var(--ink);
        /* Opt the whole stage out of scroll anchoring. In the mobile accordion the
       inner content oscillates (~425<->675px) as scenes collapse/expand while
       the stage itself clips to a fixed height. With the default (auto) the
       browser can pick an anchor node inside that oscillating region and shift
       scrollY to "hold it steady" — so while you're scrolled PAST the hero the
       page gets tugged up/down each rotation even though the gradient never
       resizes. Suppressing anchoring for the subtree stops the tug. */
        overflow-anchor: none;
    }

    /* background gradient layers — opacity follows data-step */
    .sc-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        transition: opacity 0.8s var(--ease);
    }
    .sc-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        background-size: 180px 180px;
        mix-blend-mode: overlay;
        opacity: 0.85;
        pointer-events: none;
    }
    .sc-bg.is-verd {
        background:
            radial-gradient(
                ellipse 95% 95% at 100% -5%,
                rgba(238, 242, 226, 0.65) 0%,
                rgba(200, 218, 170, 0.32) 28%,
                rgba(140, 165, 110, 0.1) 60%,
                transparent 90%
            ),
            radial-gradient(
                ellipse 75% 45% at 45% 55%,
                #6e8c4a 0%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 100% 55% at 50% 100%,
                #3a4a26 0%,
                transparent 60%
            ),
            linear-gradient(
                180deg,
                #7b9560 0%,
                #5a7038 45%,
                #3f4e26 85%,
                #2f3a1c 100%
            );
    }
    .sc-bg.is-warm {
        background:
            radial-gradient(
                ellipse 70% 60% at 22% 78%,
                #e8744a 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 60% 60% at 80% 80%,
                #d4a45c 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 80% 70% at 20% 18%,
                #a89cc4 0%,
                transparent 60%
            ),
            radial-gradient(
                ellipse 70% 50% at 80% 15%,
                #c89880 0%,
                transparent 55%
            ),
            linear-gradient(160deg, #b3a4c8 0%, #d49870 55%, #b88858 100%);
    }
    .sc-bg.is-blue {
        background:
            radial-gradient(
                ellipse 90% 80% at 85% -5%,
                rgba(244, 248, 252, 0.6) 0%,
                rgba(205, 217, 232, 0.3) 30%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 70% 50% at 40% 60%,
                #8aa2c0 0%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 100% 55% at 50% 105%,
                #3c5070 0%,
                transparent 62%
            ),
            linear-gradient(175deg, #a8bcd6 0%, #7890b0 50%, #51647f 100%);
    }
    /* AMB leads: warm at step 0, then verdant (analyze), then blue (track). */
    .hero-stage[data-step="0"] .sc-bg.is-warm,
    .hero-stage[data-step="1"] .sc-bg.is-verd,
    .hero-stage[data-step="2"] .sc-bg.is-blue {
        opacity: 1;
    }

    /* steps + stage above the gradient */
    .sc-steps {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 36px;
        padding: 36px 28px 0;
        flex-wrap: wrap;
    }
    .sc-stage {
        position: relative;
        z-index: 2;
        flex: 1;
        margin: 28px 0 40px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 13%,
            #000 87%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 13%,
            #000 87%,
            transparent 100%
        );
    }

    /* step tabs (option C treatment) — clickable text buttons: dim inactive,
     white active, with a sliding underline + a subtle arrow between each.
     Click jumps to that layer; absent interaction the JS clock carousels. */
    .sc-step {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 6px 2px 14px;
        font-size: 14px;
        font-weight: 600;
        background: none;
        border: 0;
        font-family: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    /* snappy base transition so hover feels responsive in/out */
    .sc-step .lbl {
        position: relative;
        z-index: 1;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.5);
        transition: color 0.2s var(--ease);
    }
    /* subtle hover brighten on inactive tabs */
    .sc-step:hover .lbl {
        color: rgba(255, 255, 255, 0.82);
    }
    .sc-step:focus {
        outline: none;
    }
    .sc-step:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 3px;
        border-radius: 5px;
    }
    /* active tab → white, with the delayed transition so it doesn't resolve
     before the 0.8s background crossfade on auto-advance */
    .hero-stage[data-step="0"] .sc-step-1 .lbl,
    .hero-stage[data-step="1"] .sc-step-2 .lbl,
    .hero-stage[data-step="2"] .sc-step-3 .lbl {
        color: #fff;
        transition: color 0.6s var(--ease) 0.2s;
    }
    /* Round 6 (Jerome): inter-tab arrows removed. They implied a linear sequence
     between the three layers that doesn't hold for customers — the tabs now read
     as peers. (Reorder to lead with Agentic media buying is a separate, larger
     change to the data-step choreography below.) */
    /* underline is positioned (left/width) by the JS clock under the active tab */
    .sc-underline {
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 0;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        pointer-events: none;
        opacity: 0;
        transition:
            left 0.55s var(--ease) 0.2s,
            width 0.55s var(--ease) 0.2s,
            opacity 0.35s var(--ease);
    }

    /* filmstrip: centred dominant card, neighbours peek + tuck under.
     Slot per (step, scene) — all driven by data-step, transitions handle the morph. */
    .sc-scene {
        position: absolute;
        top: 50%;
        left: 50%;
        width: fit-content;
        max-width: 74%;
        transform: translate(calc(-50% + 300px), -50%) scale(0.8);
        opacity: 0.35;
        z-index: 1;
        transition:
            transform 0.7s var(--ease),
            opacity 0.7s var(--ease);
        will-change: transform, opacity;
    }
    /* CENTRE */
    .hero-stage[data-step="0"] .scene-1,
    .hero-stage[data-step="1"] .scene-2,
    .hero-stage[data-step="2"] .scene-3 {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 1;
        z-index: 3;
    }
    /* LEFT — pushed out + scaled down so the dominant centre card reads big;
     neighbours peek + fade at the edges. */
    .hero-stage[data-step="1"] .scene-1,
    .hero-stage[data-step="2"] .scene-2,
    .hero-stage[data-step="0"] .scene-3 {
        transform: translate(calc(-50% - 540px), -50%) scale(0.7);
        opacity: 0.35;
        z-index: 1;
    }
    /* RIGHT */
    .hero-stage[data-step="2"] .scene-1,
    .hero-stage[data-step="0"] .scene-2,
    .hero-stage[data-step="1"] .scene-3 {
        transform: translate(calc(-50% + 540px), -50%) scale(0.7);
        opacity: 0.35;
        z-index: 1;
    }

    /* accordion bar header — desktop hides it; the mobile (<=820px) block turns
     each scene into a stacked accordion item with this as its tappable bar. */
    .sc-scene-head {
        display: none;
    }

    /* shared card chrome */
    .sc-card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 18px 44px -18px rgba(14, 16, 20, 0.3);
    }
    .sc-num {
        font-variant-numeric: tabular-nums;
        font-weight: 500;
        color: var(--ink);
    }
    .sc-card .r {
        text-align: right;
    }
    .sc-brand {
        width: 18px;
        height: 18px;
        object-fit: contain;
        display: block;
        flex: 0 0 auto;
    }
    .sc-brand.is-round {
        border-radius: 4px;
    }

    /* card 1 — analyze table (sparklines draw L->R when active) */
    .sc-analyze {
        width: 560px;
        max-width: 100%;
    }
    .sc-thead,
    .sc-row {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr 1.25fr 0.7fr 0.7fr 0.75fr;
        column-gap: 14px;
        align-items: center;
        padding: 12px 20px;
    }
    .sc-thead {
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        font-weight: 600;
        background: var(--paper-soft);
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
    }
    /* Stacked CPA header: "CPA" over a first-/last-touch qualifier so the two
     CPA columns are self-explanatory (Jerome R8). */
    .sc-th-2 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        line-height: 1.15;
    }
    .sc-th-2 em {
        font-style: normal;
        font-size: 8.5px;
        letter-spacing: 0.03em;
        opacity: 0.7;
        text-transform: none;
    }
    .sc-row {
        font-size: 13px;
        padding: 13px 20px;
    }
    .sc-row + .sc-row {
        border-top: 1px solid var(--line);
    }
    .sc-channel {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 600;
        color: var(--ink);
    }
    .sc-nv {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-self: end;
    }
    .sc-nv .bar {
        width: 34px;
        height: 4px;
        border-radius: 999px;
        background: var(--paper-sunken);
        position: relative;
        overflow: hidden;
    }
    .sc-nv .bar i {
        position: absolute;
        inset: 0;
        right: auto;
        border-radius: inherit;
        display: block;
    }
    .sc-nv .bar i.hi {
        background: var(--accent);
    }
    .sc-nv .bar i.lo {
        background: #5a8aa6;
    }
    .sc-spark {
        position: relative;
        justify-self: end;
        display: inline-block;
        width: 56px;
        height: 20px;
    }
    .sc-spark svg {
        display: block;
        overflow: visible;
        width: 56px;
        height: 20px;
    }
    /* trend line + dot are drawn/resolved by default so a peeking card reads
     complete; they replay (line draws L->R, dot rides the curve ahead of it)
     only while .is-active. */
    .sc-spk-line {
        stroke-dasharray: 56;
        stroke-dashoffset: 0;
    }
    .sc-spk-dot {
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        offset-anchor: center;
        offset-distance: 100%;
        opacity: 1;
    }
    .sc-spk-dot.is-down {
        background: #c45a2e;
    }

    /* ===== Attribute & analyze — row cascade + trend draw on focus =====
     Headers stay put (never animated). The four rows drop in quickly when the
     card centres, THEN each trend line draws left-to-right with its dot leading.
     `backwards` fill holds every element in its from-state through its delay, so
     an inactive (peeking) card still shows the table fully populated + drawn.
     Rows are nth-child(2..5) of .sc-analyze (child 1 is the header). */
    .sc-scene.is-active .sc-row:nth-child(2) {
        animation: scRowIn 0.34s var(--ease) 0.1s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(3) {
        animation: scRowIn 0.34s var(--ease) 0.24s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(4) {
        animation: scRowIn 0.34s var(--ease) 0.38s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(5) {
        animation: scRowIn 0.34s var(--ease) 0.52s backwards;
    }
    @keyframes scRowIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* trends begin after the cascade (~1.0s in), staggered; the dot starts a hair
     before its line so it leads the drawing tip. */
    .sc-scene.is-active .sc-row:nth-child(2) .sc-spk-dot {
        animation: scDotRide 0.8s linear 1s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(3) .sc-spk-dot {
        animation: scDotRide 0.8s linear 1.12s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(4) .sc-spk-dot {
        animation: scDotRide 0.8s linear 1.24s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(5) .sc-spk-dot {
        animation: scDotRide 0.8s linear 1.36s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(2) .sc-spk-line {
        animation: scSpark 0.8s linear 1.06s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(3) .sc-spk-line {
        animation: scSpark 0.8s linear 1.18s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(4) .sc-spk-line {
        animation: scSpark 0.8s linear 1.3s backwards;
    }
    .sc-scene.is-active .sc-row:nth-child(5) .sc-spk-line {
        animation: scSpark 0.8s linear 1.42s backwards;
    }
    @keyframes scSpark {
        from {
            stroke-dashoffset: 56;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes scDotRide {
        0% {
            offset-distance: 0%;
            opacity: 0;
        }
        14% {
            opacity: 1;
        }
        100% {
            offset-distance: 100%;
            opacity: 1;
        }
    }

    /* card 2 — agentic media buying: the AMB chat (chosen 2026-07-12 via
     /playground, option C2 per Jerome). The Run → Propose & review → Learn
     story as a chat thread running DIRECTLY on the warm dither (no card
     chrome): "Scaling winners" ran → plan artifact with two Meta proposals →
     approve #1 / reject #2 (tight ✓/✕ icon buttons resolve to chips) → the
     user's pushback in a neutral glassy bubble → two Learn artifacts
     (Memory updated +1 rule / expected precision 86% → 89%). Driven by a
     one-shot JS beat runner in the hero clock below: .is-N/.at-N classes on
     .sc-chat while the scene is centred; peeking scenes are pinned to the
     completed state; re-entry snaps empty via .no-anim (no reverse fade). */
    .sc-chat {
        width: 440px;
        max-width: 100%;
        color: var(--ink);
        font-size: 13.5px;
    }
    .sc-chat .m-a {
        display: flex;
        justify-content: flex-start;
    }
    .sc-chat .m-u {
        display: flex;
        justify-content: flex-end;
    }
    .sc-chat .bub-a {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--line);
        color: var(--ink);
        font-size: 13px;
        line-height: 1.4;
        padding: 8px 12px;
        border-radius: 12px;
        border-bottom-left-radius: 4px;
        max-width: 90%;
        box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.25);
    }
    .sc-chat .bub-u {
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        backdrop-filter: blur(8px);
        font-size: 13px;
        line-height: 1.4;
        padding: 8px 12px;
        border-radius: 12px;
        border-bottom-right-radius: 4px;
        max-width: 90%;
    }
    .sc-chat .xp-brand {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        display: inline-flex;
    }
    .sc-chat .xp-brand img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .sc-chat .xp-old {
        font-variant-numeric: tabular-nums;
        color: var(--ink-subtle);
        text-decoration: line-through;
    }
    .sc-chat .xp-new {
        font-variant-numeric: tabular-nums;
        color: var(--accent-deep);
        font-weight: 600;
    }
    .sc-chat .xp-arr {
        color: var(--ink-subtle);
    }
    .sc-chat .c-art {
        border: 1px solid var(--line-strong);
        border-radius: 11px;
        overflow: hidden;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.3);
    }
    .sc-chat .c-art-h {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 11px;
        background: var(--paper-soft);
        border-bottom: 1px solid var(--line);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-subtle);
    }
    .sc-chat .c-art-h svg {
        width: 11px;
        height: 11px;
        color: #b14a22;
    }
    .sc-chat .c-row {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        color: var(--ink-muted);
        white-space: nowrap;
        padding: 7px 11px;
    }
    .sc-chat .c-row + .c-row {
        border-top: 1px solid var(--line);
    }
    .sc-chat .c-row .ch {
        font-weight: 600;
        color: var(--ink);
    }
    /* tight ✓/✕ icon approvals; resolve to a chip in the same slot */
    .sc-chat .xp-act {
        position: relative;
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-width: 53px;
        flex: 0 0 auto;
    }
    .sc-chat .xp-ibs {
        display: inline-flex;
        gap: 5px;
        transition: opacity 0.3s var(--ease);
    }
    .sc-chat .xp-ib {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
    }
    .sc-chat .xp-ib svg {
        width: 11px;
        height: 11px;
        display: block;
    }
    .sc-chat .xp-ib.v {
        background: var(--accent-soft);
        border-color: rgba(47, 110, 75, 0.22);
        color: var(--accent-deep);
    }
    .sc-chat .xp-ib.x2 {
        background: rgba(184, 80, 63, 0.1);
        border-color: rgba(184, 80, 63, 0.22);
        color: #b8503f;
    }
    /* No scale transform on the resolved chip: scaling re-rasterizes the label
     at a fractional size and snaps it back at the end, which reads as a jitter.
     Pure opacity crossfade — the chip is absolutely positioned so nothing in
     the row shifts. */
    .sc-chat .xp-done {
        position: absolute;
        right: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        font-size: 10.5px;
        font-weight: 600;
        border-radius: 999px;
        padding: 4px 9px;
        opacity: 0;
        transition: opacity 0.3s var(--ease);
    }
    .sc-chat .xp-done svg {
        width: 10px;
        height: 10px;
        display: block;
    }
    .sc-chat .xp-done.ok {
        color: var(--accent-deep);
        background: var(--accent-soft);
    }
    .sc-chat .xp-done.rj {
        color: #b8503f;
        background: rgba(184, 80, 63, 0.12);
    }
    .sc-chat .xp-prop.ok .xp-ibs,
    .sc-chat .xp-prop.no .xp-ibs {
        opacity: 0;
    }
    .sc-chat .xp-prop.ok .xp-done.ok {
        opacity: 1;
    }
    .sc-chat .xp-prop.no .xp-done.rj {
        opacity: 1;
    }
    /* learn artifacts — the AMB page hero's Learn receipts */
    .sc-chat .c-fact {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        padding: 9px 12px;
        background: #fff;
        border: 1px solid var(--line-strong);
        border-radius: 11px;
        width: 92%;
        box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.3);
        color: var(--ink);
    }
    .sc-chat .c-fact > svg {
        width: 13px;
        height: 13px;
        color: var(--ink-subtle);
        flex: 0 0 auto;
    }
    .sc-chat .c-fact .f-lbl {
        font-weight: 600;
    }
    .sc-chat .c-fact .f-chip {
        font-size: 11px;
        font-weight: 700;
        padding: 1px 8px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-deep);
    }
    .sc-chat .c-fact .xp-prec {
        margin-left: auto;
        font-size: 12.5px;
    }
    .sc-chat .xp-prec {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .sc-chat .xp-prec .p-old {
        color: var(--ink-subtle);
        font-weight: 600;
    }
    .sc-chat .xp-prec .p-arr {
        color: var(--ink-subtle);
    }
    .sc-chat .xp-prec .p-new {
        color: var(--accent-deep);
        display: inline-block;
        transform: scale(0.6);
        opacity: 0;
        transition:
            transform 0.35s var(--ease) 0.4s,
            opacity 0.35s var(--ease) 0.4s;
    }
    .sc-chat.at-5 .xp-prec .p-new {
        transform: none;
        opacity: 1;
    }
    /* messages collapse until sent; expand at their beat */
    .sc-chat .ci {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        transition:
            max-height 0.45s var(--ease),
            opacity 0.35s var(--ease) 0.07s,
            margin 0.45s var(--ease);
    }
    .sc-chat.at-1 .ci.b1,
    .sc-chat.at-2 .ci.b2,
    .sc-chat.at-3 .ci.b3,
    .sc-chat.at-4 .ci.b4,
    .sc-chat.at-5 .ci.b5 {
        max-height: 96px;
        opacity: 1;
        margin-top: 7px;
    }
    .sc-chat.at-2 .c-wrap.ci.b2 {
        max-height: 150px;
    }
    .sc-chat .ci.b5.f2 {
        transition-delay: 0.35s, 0.42s, 0.35s;
    }
    /* instant reset on scene re-entry — no reverse fade of old messages */
    .sc-chat.no-anim * {
        transition: none !important;
    }

    /* card 3 — track (checks load then resolve top-to-bottom when active) */
    .sc-track {
        width: 400px;
        max-width: 100%;
    }
    .sc-tk-row {
        display: grid;
        grid-template-columns: 22px 1fr auto;
        align-items: center;
        gap: 11px;
        padding: 13px 18px;
    }
    .sc-tk-row + .sc-tk-row {
        border-top: 1px solid var(--line);
    }
    .sc-tk-name {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
    }
    /* Metric deltas sat at the inherited 18px body size (no rule) — read too big
     next to the 13.5px channel name. Size in line + green for the up delta (R8). */
    .sc-pill {
        font-size: 12.5px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--ink);
    }
    .sc-pill.is-up {
        color: var(--accent-deep);
    }
    .sc-tk-checks {
        border-top: 1px solid var(--line);
        background: var(--paper-soft);
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .sc-check {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink);
    }
    .sc-tick {
        position: relative;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }
    .sc-tick .ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(14, 16, 20, 0.18);
    }
    .sc-tick .fill {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--accent);
        display: grid;
        place-items: center;
        transform: scale(0);
        opacity: 0;
        transform-origin: center;
    }
    .sc-tick .fill svg {
        width: 9px;
        height: 9px;
        display: block;
    }
    .sc-scene.is-active .sc-check:nth-child(1) .fill {
        animation: scChk 0.45s var(--ease) 0.7s forwards;
    }
    .sc-scene.is-active .sc-check:nth-child(2) .fill {
        animation: scChk 0.45s var(--ease) 1s forwards;
    }
    .sc-scene.is-active .sc-check:nth-child(3) .fill {
        animation: scChk 0.45s var(--ease) 1.3s forwards;
    }
    @keyframes scChk {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        /* Still cycle through the three chapters (the content matters), but as a
       gentle opacity crossfade — no sliding/scaling filmstrip, no micro-anims.
       Cards stack centred; only the active one shows. The JS clock keeps
       running; we remove the *motion*, not the rotation. */
        .sc-underline,
        .sc-step .lbl {
            transition: none;
        }
        .sc-scene {
            transform: translate(-50%, -50%) scale(1) !important;
            opacity: 0 !important;
            z-index: 1 !important;
            transition: opacity 0.6s var(--ease) !important;
        }
        .sc-scene.is-active {
            opacity: 1 !important;
            z-index: 3 !important;
        }
        .sc-row,
        .sc-spk-line,
        .sc-spk-dot,
        .sc-tick .fill {
            animation: none !important;
        }
        .sc-chat * {
            transition: none !important;
        }
        /* resolved end states so each chapter reads complete the moment it shows */
        .sc-row {
            opacity: 1;
            transform: none;
        }
        .sc-spk-line {
            stroke-dashoffset: 0;
        }
        .sc-spk-dot {
            opacity: 1;
            offset-distance: 100%;
        }
        .sc-tick .fill {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (max-width: 960px) {
        section.hero .container {
            padding: 56px 24px 72px;
            gap: 40px;
        }
        .hero-stage {
            min-height: 440px;
        }
        .sc-steps {
            gap: 18px;
            padding: 26px 16px 0;
        }
        .sc-step {
            font-size: 12px;
            padding: 6px 2px 12px;
        }
    }

    /* ===== MOBILE HERO — vertical accordion stack (<=820px) =====
     The desktop filmstrip can't fit a phone, so below 820px the same three
     layers become a vertical stack: the active layer (driven by the same JS
     clock / data-step / .is-active) expands to its animated card, the other
     two collapse to slim colour-coded bars. Tap a bar to jump. Placed after
     the reduced-motion block so it wins for mobile + reduced-motion too. */
    @media (max-width: 820px) {
        section.hero .container {
            padding: 40px 16px 64px;
            gap: 26px;
        }
        /* HARD height, not min-height: while one card collapses and the next expands
       the stack momentarily sums taller than any resting scene, and a min-height
       lets that overshoot push everything below the hero up and down each cycle.
       A fixed height + overflow clip keeps the stage inert — the brief
       mid-transition overlap clips inside the stage instead of moving the page.
       Sized to the tallest resting scene (~486px) + headroom. */
        .hero-stage {
            height: 500px;
            border-radius: 14px;
            background: var(--paper);
            overflow: clip;
        }
        .hero-stage .sc-bg {
            display: none !important;
        }
        .hero-stage .sc-steps {
            display: none !important;
        }
        .hero-stage .sc-stage {
            position: static !important;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: initial;
            margin: 0;
            overflow: visible;
            -webkit-mask: none !important;
            mask: none !important;
        }
        /* each scene → a stacked accordion item carrying its own layer gradient */
        .hero-stage .sc-scene {
            position: static !important;
            transform: none !important;
            opacity: 1 !important;
            width: auto;
            max-width: none;
            z-index: auto !important;
            border-radius: 14px;
            overflow: hidden;
            transition: none;
        }
        .hero-stage .sc-scene::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            mix-blend-mode: overlay;
            opacity: 0.8;
            background-size: 170px 170px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }
        .hero-stage .sc-scene > * {
            position: relative;
            z-index: 1;
        }
        .hero-stage .sc-scene[data-layer="verd"] {
            background:
                radial-gradient(
                    ellipse 95% 120% at 100% -10%,
                    rgba(238, 242, 226, 0.6) 0%,
                    rgba(200, 218, 170, 0.28) 30%,
                    transparent 70%
                ),
                linear-gradient(150deg, #7b9560 0%, #5a7038 55%, #3f4e26 100%);
        }
        .hero-stage .sc-scene[data-layer="warm"] {
            background:
                radial-gradient(
                    ellipse 80% 120% at 20% 10%,
                    #a89cc4 0%,
                    transparent 60%
                ),
                radial-gradient(
                    ellipse 80% 120% at 90% 100%,
                    #e8744a 0%,
                    transparent 60%
                ),
                linear-gradient(150deg, #b3a4c8 0%, #d49870 55%, #b88858 100%);
        }
        .hero-stage .sc-scene[data-layer="blue"] {
            background:
                radial-gradient(
                    ellipse 90% 120% at 85% -10%,
                    rgba(244, 248, 252, 0.55) 0%,
                    transparent 60%
                ),
                linear-gradient(150deg, #a8bcd6 0%, #7890b0 55%, #51647f 100%);
        }
        /* tappable bar */
        .hero-stage .sc-scene-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            background: none;
            border: 0;
            cursor: pointer;
            text-align: left;
            font: 600 14px var(--font-ui);
            color: #fff;
            padding: 16px 18px;
        }
        .hero-stage .sc-scene-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            flex: 0 0 auto;
            transition:
                box-shadow 0.3s var(--ease),
                background 0.3s var(--ease);
        }
        .hero-stage .sc-scene.is-active .sc-scene-dot {
            background: #fff;
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
        }
        /* collapse / expand the card */
        .hero-stage .sc-card {
            width: auto !important;
            max-width: none !important;
            margin: 0 14px 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
            box-shadow: 0 12px 26px -16px rgba(14, 16, 20, 0.55);
            transition:
                max-height 0.5s var(--ease),
                opacity 0.35s var(--ease),
                padding 0.5s var(--ease),
                margin 0.5s var(--ease);
        }
        .hero-stage .sc-scene.is-active .sc-card {
            max-height: 520px;
            opacity: 1;
            padding-top: 16px;
            padding-bottom: 16px;
            margin: 0 14px 16px;
        }
        /* analyze table → compact 4-col (drop First/Last CPA) */
        .hero-stage .sc-analyze {
            width: auto;
        }
        .hero-stage .sc-analyze .sc-thead,
        .hero-stage .sc-analyze .sc-row {
            grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
            column-gap: 8px;
            padding-left: 14px;
            padding-right: 14px;
        }
        .hero-stage .sc-analyze .sc-thead > :nth-child(4),
        .hero-stage .sc-analyze .sc-thead > :nth-child(5),
        .hero-stage .sc-analyze .sc-row > :nth-child(4),
        .hero-stage .sc-analyze .sc-row > :nth-child(5) {
            display: none;
        }
        .hero-stage .sc-analyze .sc-row {
            font-size: 12px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .hero-stage .sc-track {
            width: auto;
        }
        /* chat thread → accordion expand/collapse (it has no card wrapper; give
       it the same collapse treatment the cards get) */
        .hero-stage .sc-chat {
            width: auto;
            margin: 0 14px;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                max-height 0.5s var(--ease),
                opacity 0.35s var(--ease),
                margin 0.5s var(--ease);
        }
        /* fixed-height viewport the moment it opens — the panel reaches full
       size immediately and bubbles fill it bottom-up; older messages push
       up and fade out through the top mask (same trick as the AMB page
       hero and the Agentic Marketing tile), keeping the panel short so the
       Track & forward bar below never gets squished */
        .hero-stage .sc-scene.is-active .sc-chat {
            max-height: 250px;
            height: 250px;
            opacity: 1;
            margin: 0 14px 16px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            -webkit-mask-image: linear-gradient(
                to bottom,
                transparent 0,
                #000 40px
            );
            mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
        }
        .hero-stage .sc-chat .ci {
            flex: 0 0 auto;
        }
        /* plan rows: drop the struck-through old price so the chips fit a phone */
        .hero-stage .sc-chat .c-row {
            font-size: 12px;
            gap: 5px;
            padding: 7px 9px;
        }
        .hero-stage .sc-chat .xp-old,
        .hero-stage .sc-chat .xp-arr {
            display: none;
        }
    }

    /* ===== RAMP-STYLE PROOF GRID =====
     7 cols × 2 rows. Col 1 = headline cell, spans both rows.
     Some logo cells are "case-study" cells with a "+" badge.
     A single floating expansion card auto-cycles between four 2x2 footprints. */
    section.proof {
        padding: 0;
        background: var(--paper);
    }
    section.proof > .container {
        padding: 0;
    }
    /* Ramp-style: off-white panel showing through as gap "dividers" between
     white rounded tiles. No actual border lines. */
    .proof-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1.4fr repeat(6, 1fr);
        gap: 2px;
        padding: 10px;
        background: var(--paper-cool);
        border-radius: 0;
    }
    .proof-cell {
        position: relative;
        aspect-ratio: 1 / 1;
        background: var(--paper);
        border-radius: 14px;
        display: grid;
        place-items: center;
        transition:
            background 0.3s var(--ease),
            opacity 0.5s var(--ease);
    }
    .proof-cell:hover {
        background: var(--paper);
    }
    .proof-cell img {
        max-width: 60%;
        max-height: 42px;
        object-fit: contain;
        /* brightness(0) flattens every logo to a dark silhouette regardless of
       whether the source PNG is white-on-transparent or dark-on-transparent. */
        filter: brightness(0);
        opacity: 0.42;
        transition: opacity 0.3s var(--ease);
        user-select: none;
        -webkit-user-drag: none;
    }
    .proof-cell:hover img {
        opacity: 0.85;
    }
    .proof-cell.is-covered {
        opacity: 0;
        transition-delay: 0.05s;
    }

    /* The headline cell — col 1, spans both rows. Leads with the $2.4B stat as
     the cell's primary visual hook, supporting copy below. */
    .proof-cell.head {
        grid-column: 1;
        grid-row: 1 / span 2;
        aspect-ratio: auto;
        background: transparent;
        border-radius: 0;
        padding: 26px 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
        gap: 14px;
    }
    .proof-cell.head:hover {
        background: transparent;
    }
    .proof-cell.head .head-stat {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .proof-cell.head .stat-value {
        font-size: clamp(40px, 4.4vw, 56px);
        line-height: 1;
        letter-spacing: -0.04em;
        font-weight: 600;
        /* Flat accent green (set in the highlight-text block above) — opts
       out of the verdant gradient that the other accent hooks use. */
    }
    .proof-cell.head .stat-copy {
        margin: 0;
        font-size: 15px;
        line-height: 1.4;
        letter-spacing: -0.005em;
        font-weight: 400;
        color: var(--ink);
        max-width: 100%;
    }
    .proof-cell.head .stat-copy b {
        color: var(--ink);
        font-weight: 600;
    }
    .proof-cell.head .head-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink);
    }
    .proof-cell.head .head-cta .arr {
        transition: transform 0.25s var(--ease);
    }
    .proof-cell.head .head-cta:hover .arr {
        transform: translateX(4px);
    }

    /* Mobile-only social-proof scroller — the 12 logos as six columns of two
     stacked tiles in a horizontal snap-scroll strip. Columns are sized so the
     next pair always peeks in from the right edge — the visible cut-off is the
     scroll affordance. User-driven (no auto-advance). Hidden on desktop (the
     interactive .proof-grid owns wide viewports); revealed in the ≤800px
     block below. */
    .proof-mobile {
        display: none;
    }
    /* The 3×4 grid nests inside .proof-mobile's own padded cool panel — no
     double panel chrome, and always 3 columns regardless of sp-grid's own
     width breakpoints. */
    .proof-mobile .sp-grid {
        /* display:grid + the tile aspect-ratio live in TrustedBy's scoped style,
           which doesn't reach here — restate them so the tiles form the compact
           square grid instead of stacking full-height. */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
        padding: 0;
        background: transparent;
        margin-top: 8px;
    }
    .proof-mobile .sp-tile {
        position: relative;
        aspect-ratio: 1 / 1;
        background: var(--paper);
        border-radius: 14px;
        display: grid;
        place-items: center;
        min-width: 0;
        color: inherit;
    }
    .proof-mobile .sp-tile img {
        max-width: 62%;
        max-height: 32px;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: brightness(0);
    }
    /* Case-study tiles are anchors carrying an .sp-arr chip. Its global styling
       lives in TrustedBy's scoped block, which doesn't reach these inline tiles —
       so pin it as an absolute corner chip (matching the prototype's global
       social-proof .sp-arr). Without this it grid-places as a second row and
       shoves the logo up, breaking the centering on every case-study tile. */
    .proof-mobile .sp-tile .sp-arr {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--paper);
        border: 1px solid var(--line-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-muted);
        transition:
            background 0.25s var(--ease),
            border-color 0.25s var(--ease),
            color 0.25s var(--ease),
            transform 0.25s var(--ease);
    }
    .proof-mobile .sp-tile .sp-arr svg {
        width: 13px;
        height: 13px;
        display: block;
    }
    .proof-mobile a.sp-tile:hover .sp-arr {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--paper);
        transform: translateX(1px);
    }

    /* "+" badge — text glyph, same family/weight as the → / ↓ arrows used
     elsewhere. Lighter circle so it recedes until hovered. The "+" glyph has
     a baseline offset that makes it sit ~1px low optically — countered by
     padding-bottom which shifts the centered content up by half its value. */
    .proof-cell .plus {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--paper);
        border: 1px solid var(--line-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 400;
        line-height: 1;
        padding-bottom: 2px;
        color: var(--ink-muted);
        transition:
            transform 0.4s var(--ease),
            opacity 0.4s var(--ease),
            border-color 0.25s var(--ease),
            color 0.25s var(--ease);
    }
    .proof-cell:hover .plus {
        border-color: var(--ink-soft);
        color: var(--ink-soft);
    }
    .proof-cell.is-active .plus {
        transform: rotate(45deg) scale(1.05);
    }
    .proof-cell.is-covered .plus {
        opacity: 0;
    }

    /* The floating expansion card — covers a 2×2 footprint at the active position */
    .proof-expand {
        position: absolute;
        border-radius: 18px;
        overflow: hidden;
        background: var(--ink);
        color: var(--paper);
        pointer-events: auto;
        /* Open state: opacity rides a steep ease-out — most of the fade happens
       in the first third of the balloon animation, then settles. */
        transition:
            top 0.95s var(--ease),
            left 0.95s var(--ease),
            width 0.95s var(--ease),
            height 0.95s var(--ease),
            opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 30px 60px -30px rgba(14, 16, 20, 0.35);
        z-index: 2;
    }
    /* Hidden state — used both as the boot/idle resting state and as the brief
     case-to-case fade-out (Phase 1 of setActive). Short ease-in. */
    .proof-expand.is-hidden {
        opacity: 0;
        pointer-events: none;
        transition:
            top 0.95s var(--ease),
            left 0.95s var(--ease),
            width 0.95s var(--ease),
            height 0.95s var(--ease),
            opacity 0.4s cubic-bezier(0.7, 0, 0.84, 0);
    }
    /* Auto-collapse fade-out: opacity rides a steep ease-in matched to the
     shrink duration — card stays near full opacity for most of the shrink,
     then drops fast at the very end. */
    .proof-expand.is-collapsing {
        opacity: 0;
        transition:
            top 0.95s var(--ease),
            left 0.95s var(--ease),
            width 0.95s var(--ease),
            height 0.95s var(--ease),
            opacity 0.95s cubic-bezier(0.7, 0, 0.84, 0);
    }
    /* Text + link layer that scales with the box. Fades in late on open (so
     the box starts ballooning before the text appears) and fades out fast
     on close (so the text disappears before it can overlap itself as the
     box shrinks back into the cell). */
    .proof-expand .ex-content {
        position: absolute;
        inset: 0;
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition:
            opacity 0.35s var(--ease) 0.18s,
            transform 0.45s var(--ease) 0.18s;
        pointer-events: none;
    }
    .proof-expand .ex-content > * {
        pointer-events: auto;
    }
    .proof-expand.is-hidden .ex-content,
    .proof-expand.is-collapsing .ex-content {
        opacity: 0;
        transform: scale(0.88);
        transition:
            opacity 0.3s var(--ease),
            transform 0.42s var(--ease);
    }
    .proof-expand::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                rgba(14, 16, 20, 0) 30%,
                rgba(14, 16, 20, 0.65) 100%
            ),
            linear-gradient(135deg, var(--grad-2), var(--grad-3), var(--grad-4));
        background-blend-mode: multiply;
        transition: opacity 0.5s var(--ease);
    }
    .proof-expand .ex-photo {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            var(--grad-4),
            var(--grad-2),
            var(--grad-1)
        );
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .proof-expand .ex-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            transparent 40%,
            rgba(14, 16, 20, 0.7) 100%
        );
    }
    .proof-expand .ex-brand {
        position: absolute;
        top: 22px;
        left: 22px;
        height: 28px;
        width: auto;
        max-width: 200px;
        object-fit: contain;
        object-position: left center;
        /* Flatten any brand mark (color or monochrome) to a clean white logo on the
       dark expansion card. Matches the dark-theme TrustedBy treatment. */
        filter: brightness(0) invert(1)
            drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
        z-index: 2;
        user-select: none;
        -webkit-user-drag: none;
    }
    /* Close button — sits opposite the brand mark. Inverted styling of the
     cell-level "+" badge so it reads as a clear "exit this case" on the
     dark card. Lives inside .ex-content, so the card's open/close opacity
     covers its show/hide for free. */
    .proof-expand .ex-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--paper);
        cursor: pointer;
        padding: 0;
        z-index: 4;
        transition:
            background 0.2s var(--ease),
            border-color 0.2s var(--ease),
            transform 0.2s var(--ease);
    }
    .proof-expand .ex-close:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.45);
    }
    .proof-expand .ex-close:active {
        transform: scale(0.94);
    }
    .proof-expand .ex-close svg {
        display: block;
    }
    .proof-expand .ex-body {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 22px;
        z-index: 2;
    }
    .proof-expand .ex-value {
        font-size: clamp(36px, 4vw, 56px);
        line-height: 1;
        letter-spacing: -0.04em;
        font-weight: 500;
        color: var(--paper);
        margin: 0 0 6px;
    }
    .proof-expand .ex-label {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.78);
        font-weight: 400;
    }
    /* "Read the case study" link — inline text, bottom-right of expanded card,
     sitting opposite the KPI label on the same baseline. No pill, no chrome. */
    .proof-expand .ex-link {
        position: absolute;
        right: 22px;
        bottom: 22px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--paper);
        font-size: 13px;
        font-weight: 500;
        z-index: 3;
        pointer-events: auto;
        transition: opacity 0.25s var(--ease);
    }
    .proof-expand .ex-link:hover {
        opacity: 0.78;
    }
    .proof-expand .ex-link .ex-arrow {
        display: inline-block;
        font-size: 13px;
        transition: transform 0.25s var(--ease);
    }
    .proof-expand .ex-link:hover .ex-arrow {
        transform: translateX(2px);
    }
    .proof-expand.is-hidden {
        opacity: 0;
    }

    /* ===== MODULES — Atio-style blueprint storytelling ===== */
    section.modules {
        padding: 0;
        position: relative;
    }
    /* Soft blue radial backdrop, sibling pattern to .cta-bg. Lives in a child
     element so it doesn't fight the global section::before divider or the
     full-bleed modules-item hatched margins below. */
    .modules-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(40% 22% at 85% 6%, var(--grad-2), transparent 60%),
            radial-gradient(35% 25% at 14% 32%, var(--grad-2), transparent 60%),
            radial-gradient(40% 25% at 88% 64%, var(--grad-2), transparent 62%),
            radial-gradient(42% 25% at 20% 90%, var(--grad-2), transparent 60%);
        pointer-events: none;
        z-index: 0;
        opacity: 0.7;
    }
    section.modules > * {
        position: relative;
        z-index: 1;
    }
    /* The article rows' hatched full-bleed background is transparent between
     stripes, so the section gradient reads through the outer margins. */

    /* Header strip at the top of each section — soft Hanken Grotesk label,
     not monospace. The body font carries through; we just tighten size,
     weight, and tracking so it reads as a quiet caption. */
    .modules-strip {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 14px 0;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        border-bottom: 1px solid var(--line);
    }
    .modules-strip .idx {
        color: var(--ink-muted);
        margin-right: 10px;
        font-weight: 500;
    }

    /* Section heading block: short feature title sitting above the article
     rows. No scroll-jack — flows normally. */
    .modules-title {
        padding: 144px 0 160px;
        max-width: 880px;
    }
    .modules-title h2 {
        margin: 0;
        font-size: clamp(36px, 4.4vw, 56px);
        line-height: 1.05;
        letter-spacing: -0.025em;
        font-weight: 500;
        color: var(--ink);
    }
    .modules-title .sub {
        margin: 12px 0 0;
        font-size: clamp(20px, 1.6vw, 22px);
        line-height: 1.5;
        letter-spacing: -0.005em;
        font-weight: 400;
        color: var(--ink-muted);
    }

    /* Item rows just need a top divider. The outer-margin hatching is now
     provided by the body pseudos (the section is no longer no-hatch), so
     painting another hatch here would stack on top and read 2–3× as dense. */
    .modules-item {
        border-top: 1px solid var(--line);
    }
    .modules-item .container {
        background: var(--paper);
        position: relative;
    }
    .modules-item-strip {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-subtle);
    }
    .modules-item-strip .idx {
        color: var(--ink-muted);
        margin-right: 10px;
        font-weight: 500;
    }

    .modules-item-grid {
        display: grid;
        grid-template-columns: 4fr 8fr;
        column-gap: 56px;
        row-gap: 32px;
        padding: 64px 0;
    }

    .item-copy {
        max-width: 36ch;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .item-copy h3 {
        margin: 0;
        font-size: 28px;
        letter-spacing: -0.015em;
        line-height: 1.15;
        font-weight: 600;
        color: var(--ink);
    }
    .item-copy p {
        margin: 0;
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink-muted);
    }
    .item-copy .cta {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--accent);
    }
    .item-copy .cta:hover {
        color: var(--accent-deep);
    }
    .item-copy .cta .arr {
        transition: transform 0.25s var(--ease);
    }
    .item-copy .cta:hover .arr {
        transform: translateX(3px);
    }

    .item-focus {
        aspect-ratio: 16 / 11;
        background: linear-gradient(
            135deg,
            var(--grad-4) 0%,
            var(--grad-3) 40%,
            var(--grad-2) 75%,
            var(--grad-1) 100%
        );
        position: relative;
        overflow: hidden;
    }
    .item-focus::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                60% 50% at 20% 20%,
                rgba(255, 255, 255, 0.55),
                transparent 70%
            ),
            radial-gradient(
                60% 50% at 85% 80%,
                rgba(205, 217, 232, 0.45),
                transparent 70%
            );
        pointer-events: none;
    }

    /* Layered focus variant: a dithered green gradient backdrop with a product
     UI placeholder card floating in front, slightly offset. Used on the
     Agentic Media Buying row to anchor the section visually. */
    .item-focus-stack {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 11;
    }
    .focus-gradient {
        position: absolute;
        top: 0;
        right: 0;
        width: 80%;
        height: 100%;
        border-radius: 22px;
        overflow: hidden;
        background: linear-gradient(
            180deg,
            #c9d4cf 0%,
            #93a594 25%,
            #5f7855 50%,
            #3a5230 75%,
            #1c2c15 100%
        );
    }
    .focus-gradient::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        background-size: 220px 220px;
        mix-blend-mode: overlay;
        opacity: 0.5;
    }
    .focus-product {
        position: absolute;
        top: 12%;
        left: 0;
        width: 74%;
        aspect-ratio: 5 / 4;
        border-radius: 0;
        overflow: hidden;
        background: linear-gradient(
            135deg,
            var(--grad-4) 0%,
            var(--grad-3) 40%,
            var(--grad-2) 75%,
            var(--grad-1) 100%
        );
        display: grid;
        place-items: center;
        font-size: 13px;
        color: var(--ink-subtle);
        letter-spacing: 0;
    }
    .focus-product::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                60% 50% at 20% 20%,
                rgba(255, 255, 255, 0.55),
                transparent 70%
            ),
            radial-gradient(
                60% 50% at 85% 80%,
                rgba(205, 217, 232, 0.45),
                transparent 70%
            );
        pointer-events: none;
    }
    .focus-product > * {
        position: relative;
        z-index: 1;
    }

    /* ===== BENTO SECTIONS — replaces blueprint scroll-stack on Agentic + Measurement.
     11 Labs-inspired 2-up + 3-up mosaic. Warm dither on Agentic, cool dither
     on Measurement — the alternation is baked in so every new bento page
     inherits the pattern. ~12px corner radii per Round 3 (down from 20–24px).
     No eyebrow strips, no scroll-jacked title. ===== */
    section.modules.bento-section {
        padding: 96px 0 77px;
    }
    .bento-section > .container {
        display: flex;
        flex-direction: column;
        gap: 64px;
    }
    /* Mobile-only sticky section label — see the @media (max-width:760px) block.
     Hidden on desktop, where the in-flow .bento-head .eyebrow carries the label. */
    .msticky {
        display: none;
    }
    .bento-head {
        max-width: 880px;
    }
    .bento-head .eyebrow {
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        margin: 0 0 28px;
    }
    .bento-head h2 {
        margin: 0;
        font-size: clamp(36px, 4.4vw, 56px);
        line-height: 1.05;
        letter-spacing: -0.025em;
        font-weight: 500;
        color: var(--ink);
    }
    .bento-head p {
        margin: 16px 0 0;
        font-size: 18px;
        line-height: 1.55;
        letter-spacing: 0;
        font-weight: 400;
        color: var(--ink-muted);
        max-width: 76ch;
    }
    .bento {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-rows: minmax(360px, auto) auto;
        gap: 12px;
    }
    /* Agentic v2 — Option C "Visualized story":
     Top row: AMB (1.2fr) | MCP (1fr) | Routines (1fr) — AMB slightly
     wider as the focused product.
     Bottom row: Self-learning spans full width as a wide chart strip. */
    .bento.is-agentic {
        grid-template-columns: 1.2fr 1fr 1fr;
        grid-template-rows: minmax(384px, auto) auto;
        gap: 12px;
    }
    /* === Top-row tiles ===
     Flex-column with illustration on TOP, meta on BOTTOM. Wide breathing
     gap between them so the two regions read clearly separated. */
    .bento.is-agentic .bento-tile.is-featured.is-warm,
    .bento.is-agentic .bento-tile.is-mcp,
    .bento.is-agentic .bento-tile.is-routines {
        padding: 28px;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Illustrations flow at the top now — override the old absolute
     positioning so the proposal card / chat bubbles / schedule cards sit
     naturally above a generous gap to the meta block. */
    .bento.is-agentic .amb-stage,
    .bento.is-agentic .mcp-stage,
    .bento.is-agentic .rt-stage {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        height: auto;
        min-height: 0;
        z-index: 0;
    }
    .bento.is-agentic .amb-stage {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .bento.is-agentic .mcp-stage {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .bento.is-agentic .rt-stage {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Meta gets pushed to the bottom of the column with visible top padding
     for the visual break the user asked for. */
    .bento.is-agentic .bento-tile .meta {
        margin-top: auto;
        padding-top: 18px;
    }

    /* Tile typography — design.md §2 "label + focal subtitle" pattern.
     The h3 product name reads as a quiet label (uppercase, tracked,
     subtle-ink); the p description is the focal copy that draws the
     eye. Same pattern for Measurement tiles below. */
    /* Title-case h3 matching Self-learning (design-system canon for the
     bottom-row label) — no uppercase eyebrow treatment. Body p is
     slightly smaller and muted so the title leads. */
    .bento.is-agentic .bento-tile .meta h3 {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 6px;
        font-size: 20px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.015em;
        line-height: 1.15;
    }
    /* The .meta block is bottom-anchored (margin-top: auto), so a body that
     wraps to a different line count than its siblings would push its title
     up and break title alignment across the row. Reserve a fixed 3-line box
     (3 x 1.4 line-height = 4.2em) and cap at 3 lines, so every tile's meta
     is the same height and the titles top-align at every width. */
    .bento.is-agentic .bento-tile .meta p {
        margin: 0;
        max-width: 40ch;
        font-size: 16.5px;
        font-weight: 400;
        color: var(--ink-muted);
        letter-spacing: -0.005em;
        line-height: 1.4;
        min-height: 4.2em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    /* AMB sits on the warm dither — title stays white-strong; body fades
     to a warm-tinted white so it reads as supporting. */
    .bento.is-agentic .bento-tile.is-featured.is-warm .meta h3 {
        color: #fff;
    }
    .bento.is-agentic .bento-tile.is-featured.is-warm .meta p {
        color: rgba(255, 255, 255, 0.78);
    }

    /* The old top-right corner arrow is gone in this layout. Hide it. */
    .bento.is-agentic .bento-tile .tile-arrow {
        display: none;
    }

    /* Inline arrow — only on linked product tiles. Hidden by default,
     fades + slides in when the tile is hovered. Sits next to the h3
     title rather than in the top-right corner. */
    /* Inline arrow — only on linked product tiles. Fill matches the warm
     gradient used by the Self-learning autopilot bars (#e8744a → #b14a22)
     so the arrow ties visually to the data viz below. */
    .bento.is-agentic a.bento-tile .arrow-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        /* Flat solid warm fill — a vertical gradient's light-top/dark-bottom
       end-stops read as cut-off "borders" at the arrow's small 24px size. */
        background: #cc5e33;
        color: #fff;
        border: 0;
        opacity: 0;
        transform: translateX(-4px);
        transition:
            opacity 0.2s var(--ease),
            transform 0.2s var(--ease);
        flex-shrink: 0;
    }
    .bento.is-agentic a.bento-tile .arrow-inline svg {
        width: 13px;
        height: 13px;
    }
    .bento.is-agentic a.bento-tile:hover .arrow-inline {
        opacity: 1;
        transform: translateX(0);
    }
    /* AMB's inline arrow on the warm dither — outlined white at rest, then
     fills to solid white on hover so it pops with contrast against the
     orange gradient (the warm gradient blends in too much on this tile). */
    .bento.is-agentic .bento-tile.is-featured.is-warm .arrow-inline {
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.36);
    }
    .bento.is-agentic .bento-tile.is-featured.is-warm:hover .arrow-inline {
        background: #fff;
        color: #b14a22;
        border-color: #fff;
    }

    /* === Self-learning row ===
     Copy block widened so the description holds to 2 lines max. Eyebrow
     label hidden per user request (the bars + axis already tell the
     "weeks 1 → 12" story). */
    /* Mirror the top row's grid (1.2fr 1fr 1fr) so the copy sits under the AMB
     tile and the chart (autonomy %, bars, agent learnings) lines up under the
     MCP + Routines tiles at EVERY width — a fixed copy width drifts once the
     container isn't at max width. No horizontal tile padding: the children pad
     themselves so the inner columns land exactly on the parent's (Round 8). */
    .bento.is-agentic .bento-tile.is-selflearning {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 12px;
        align-items: center;
        padding: 24px 0;
        min-height: 300px;
        overflow: hidden;
    }
    .bento.is-agentic .bento-tile.is-selflearning .sl-copy {
        grid-column: 1;
        padding: 0 12px 0 32px; /* left inset matches a card edge */
    }
    .bento.is-agentic .bento-tile.is-selflearning .sl-copy h3 {
        font-size: 20px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.015em;
        margin: 0 0 6px;
        line-height: 1.15;
    }
    .bento.is-agentic .bento-tile.is-selflearning .sl-copy p {
        font-size: 16.5px;
        line-height: 1.4;
        color: var(--ink-muted);
        letter-spacing: -0.005em;
        margin: 0;
    }
    /* Right side: an autonomy bar chart (weeks 1 -> 12 growing to 92%) over the
     agent's learned rules. Warm-dither branded — early "learning" weeks read
     muted warm, later "autonomous" weeks vivid warm. */
    .bento.is-agentic .bento-tile.is-selflearning .sl-auto {
        grid-column: 2 / -1;
        /* 28px left = MCP's text inset (top tiles pad 28px) so the chart aligns to
       the MCP copy, not the MCP cell edge; 28px right = Routines' text inset. */
        padding: 0 28px 0 28px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-self: stretch;
    }
    .sl-auto-chart {
        display: flex;
        flex-direction: column;
    }
    .sl-auto-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 14px;
    }
    .sl-auto-lbl {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        font-weight: 600;
    }
    /* Autonomy % counts up with the bars via an animated @property integer fed
     into a CSS counter (no JS). Resting value = 92 (shown before .is-playing). */
    @property --sl-pct {
        syntax: "<integer>";
        initial-value: 92;
        inherits: false;
    }
    .sl-auto-val {
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -0.03em;
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
        line-height: 1;
        counter-reset: slpct var(--sl-pct);
    }
    .sl-num::after {
        content: counter(slpct);
    }
    .sl-auto-val sup {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-subtle);
        vertical-align: super;
        margin-left: 1px;
    }
    .sl-bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        height: 116px;
    }
    .sl-bars i {
        flex: 1;
        min-width: 0;
        height: var(--h);
        border-radius: 5px 5px 2px 2px;
        background: linear-gradient(180deg, #f3a572 0%, #d35f2c 100%);
        transform-origin: bottom;
        transform: scaleY(0);
    }
    /* learning phase (early weeks) = muted warm; autonomous phase = vivid warm */
    .sl-bars i:nth-child(-n + 5) {
        background: linear-gradient(180deg, #f1cbad 0%, #e3a87b 100%);
    }
    .bento.is-agentic .bento-tile.is-selflearning .sl-axis {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 11px;
        color: var(--ink-muted);
        letter-spacing: 0.04em;
    }
    .sl-learn-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
    }
    .sl-learn-lbl {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        font-weight: 600;
    }
    /* vertical ticker: a 2-row window over a track of rules that scrolls up */
    .sl-learn-window {
        height: 96px;
        overflow: hidden;
    }
    /* Rows are slot-positioned by slDriver (newest at top, older pushed down
     and dimmed — mirrors the AMB page pillar and the production site). */
    .sl-learn-track {
        position: relative;
        height: 100%;
    }
    .sl-learn {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
        display: flex;
        align-items: center;
        gap: 11px;
        height: 44px;
        box-sizing: border-box;
        padding: 0 13px;
        border-radius: 9px;
        background: var(--paper-soft);
        border: 1px solid var(--line);
        flex-shrink: 0;
        will-change: transform, opacity;
    }
    .sl-learn-chip {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: #e8744a;
        color: #fff;
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }
    .sl-learn-chip svg {
        width: 11px;
        height: 11px;
        display: block;
    }
    .sl-learn-txt {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Self-learning tile — driven by JS (slDriver, bottom script) so each
     learning tick and its batch of three bars land in the SAME frame,
     mirroring the AMB page pillar (Round 11, Jan via Jerome). CSS here only
     owns the one-time reveals and the transition curves the driver rides. */
    .sl-auto-head,
    .sl-axis,
    .sl-learn-lbl,
    .sl-learn-window {
        opacity: 0;
    }
    .bento-tile.is-selflearning.is-playing .sl-auto-head {
        animation: sl-fade-in 0.6s var(--ease) 0.1s forwards;
    }
    .bento-tile.is-selflearning.is-playing .sl-axis {
        animation: sl-fade-in 0.6s var(--ease) 0.2s forwards;
    }
    .bento-tile.is-selflearning.is-playing .sl-learn-lbl {
        animation: sl-fade-in 0.6s var(--ease) 0.4s forwards;
    }
    .bento-tile.is-selflearning.is-playing .sl-learn-window {
        animation: sl-fade-in 0.6s var(--ease) 0.6s forwards;
    }
    /* Same entrance curve + duration as the AMB pillar bars (ENTRANCE_MS). */
    .sl-bars i {
        transition: transform 312ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes sl-fade-in {
        to {
            opacity: 1;
        }
    }

    /* ===== AMB tile animation — the AMB chat story at tile scale =====
     Mirrors the hero's scene-1 chat (option C2): agent announces the run ->
     "Scaling plan" artifact with two Meta proposals that resolve Approved /
     Rejected -> the user's pushback -> TWO learn artifacts (Memory updated
     +1 rule / Expected precision 86% -> 89%). The stage is a fixed-height,
     bottom-anchored viewport with a top fade mask (same trick as the AMB
     page hero's step 2): items take no space until sent, each new one pushes
     older ones up and out through the fade. Pure-CSS 9.5s loop, gated on
     .is-warm.is-playing like the MCP / Routines siblings; at rest the stage
     shows the completed bottom of the thread. */
    .bento.is-agentic .bento-tile.is-featured.is-warm {
        min-height: 0;
    }
    .bento.is-agentic .bento-tile.is-featured.is-warm .amb-stage {
        gap: 0;
        height: 270px;
        justify-content: flex-end;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 44px
        );
        mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
    }
    .amb-stage > * {
        flex: 0 0 auto;
        overflow: hidden;
        margin-top: 8px;
    }
    .amb-msg-agent {
        display: flex;
        justify-content: flex-start;
    }
    .amb-abub {
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--line);
        color: var(--ink);
        font-size: 14px;
        line-height: 1.4;
        padding: 7px 11px;
        border-radius: 12px;
        border-bottom-left-radius: 4px;
        max-width: 92%;
        box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.25);
    }
    .amb-msg-user {
        display: flex;
        justify-content: flex-end;
    }
    .amb-bub {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: #fff;
        backdrop-filter: blur(8px);
        font-size: 14px;
        line-height: 1.4;
        padding: 7px 11px;
        border-radius: 12px;
        border-bottom-right-radius: 4px;
        max-width: 86%;
    }
    .amb-card {
        position: relative;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 10px 12px 11px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        color: var(--ink);
    }
    .amb-card-h {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px 3px 7px;
        background: rgba(232, 116, 74, 0.1);
        border-radius: 999px;
        margin-bottom: 8px;
    }
    .amb-spark {
        color: #b14a22;
        display: inline-flex;
        flex: 0 0 auto;
    }
    .amb-spark svg {
        width: 11px;
        height: 11px;
        display: block;
    }
    .amb-card-t {
        font-size: 12.5px;
        font-weight: 500;
        color: #b14a22;
        letter-spacing: 0.02em;
    }
    .amb-row {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        font-weight: 400;
        color: var(--ink-muted);
        white-space: nowrap;
        padding: 6px 0;
    }
    .amb-row + .amb-row {
        border-top: 1px solid var(--line);
    }
    .amb-ch {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
    }
    .amb-logo {
        width: 14px;
        height: 14px;
        object-fit: contain;
        flex: 0 0 auto;
    }
    .amb-num {
        font-variant-numeric: tabular-nums;
    }
    .amb-old {
        color: var(--ink-subtle);
        text-decoration: line-through;
    }
    .amb-ar {
        color: var(--ink-subtle);
    }
    .amb-new {
        color: var(--accent-deep);
        font-weight: 600;
    }
    /* tight icon approvals resolving to a chip in the same slot */
    .amb-act {
        position: relative;
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-width: 50px;
        flex: 0 0 auto;
    }
    .amb-ibs {
        display: inline-flex;
        gap: 5px;
    }
    .amb-ib {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
    }
    .amb-ib svg {
        width: 10px;
        height: 10px;
        display: block;
    }
    .amb-ib.v {
        background: var(--accent-soft);
        border-color: rgba(47, 110, 75, 0.22);
        color: var(--accent-deep);
    }
    .amb-ib.x {
        background: rgba(184, 80, 63, 0.1);
        border-color: rgba(184, 80, 63, 0.22);
        color: #b8503f;
    }
    .amb-done {
        position: absolute;
        right: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        font-size: 10.5px;
        font-weight: 600;
        border-radius: 999px;
        padding: 3.5px 8px;
        opacity: 0;
    }
    .amb-done svg {
        width: 9px;
        height: 9px;
        display: block;
    }
    .amb-done.ok {
        color: var(--accent-deep);
        background: var(--accent-soft);
    }
    .amb-done.rj {
        color: #b8503f;
        background: rgba(184, 80, 63, 0.12);
    }
    /* learn artifacts — two receipt rows, same as the hero */
    .amb-learn {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 8px 11px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid var(--line);
        font-size: 12.5px;
        color: var(--ink);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    .amb-learn > svg {
        width: 12px;
        height: 12px;
        color: var(--ink-subtle);
        flex: 0 0 auto;
    }
    .amb-learn-b {
        font-weight: 600;
    }
    .amb-chip {
        font-size: 10.5px;
        font-weight: 700;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-deep);
    }
    .amb-prec {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .amb-prec .p-old {
        color: var(--ink-subtle);
        font-weight: 600;
    }
    .amb-prec .p-arr {
        color: var(--ink-subtle);
    }
    .amb-prec .p-new {
        color: var(--accent-deep);
    }

    /* The loop — 9.5s while in view (.is-playing). Items expand at their beat
     (collapsed until sent, pushing older content up through the top fade):
     agent ~4% · plan ~12% · approve ~30% · reject ~42% · pushback ~54% ·
     memory ~64% · precision ~74% · everything fades ~90-96%. At rest (not
     playing) the base styles above show the completed thread. */
    .bento-tile.is-warm.is-playing .amb-msg-agent {
        animation: amb-it1 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-card {
        animation: amb-it2 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-r1 .amb-ibs {
        animation: amb-ib1 9.5s steps(1, end) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-r1 .amb-done {
        animation: amb-dn1 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-r2 .amb-ibs {
        animation: amb-ib2 9.5s steps(1, end) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-r2 .amb-done {
        animation: amb-dn2 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-msg-user {
        animation: amb-it3 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-f1 {
        animation: amb-it4 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-f2 {
        animation: amb-it5 9.5s var(--ease) infinite;
    }
    .bento-tile.is-warm.is-playing .amb-prec .p-new {
        animation: amb-pp 9.5s var(--ease) infinite;
    }
    @keyframes amb-it1 {
        0%,
        3% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        7% {
            max-height: 64px;
            opacity: 1;
            margin-top: 8px;
        }
        90% {
            max-height: 64px;
            opacity: 1;
            margin-top: 8px;
        }
        94% {
            opacity: 0;
        }
        96%,
        100% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
    }
    @keyframes amb-it2 {
        0%,
        10% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        15% {
            max-height: 170px;
            opacity: 1;
            margin-top: 8px;
        }
        90% {
            max-height: 170px;
            opacity: 1;
            margin-top: 8px;
        }
        94% {
            opacity: 0;
        }
        96%,
        100% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
    }
    @keyframes amb-it3 {
        0%,
        52% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        56% {
            max-height: 64px;
            opacity: 1;
            margin-top: 8px;
        }
        90% {
            max-height: 64px;
            opacity: 1;
            margin-top: 8px;
        }
        94% {
            opacity: 0;
        }
        96%,
        100% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
    }
    @keyframes amb-it4 {
        0%,
        62% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        66% {
            max-height: 50px;
            opacity: 1;
            margin-top: 8px;
        }
        90% {
            max-height: 50px;
            opacity: 1;
            margin-top: 8px;
        }
        94% {
            opacity: 0;
        }
        96%,
        100% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
    }
    @keyframes amb-it5 {
        0%,
        72% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        76% {
            max-height: 50px;
            opacity: 1;
            margin-top: 8px;
        }
        90% {
            max-height: 50px;
            opacity: 1;
            margin-top: 8px;
        }
        94% {
            opacity: 0;
        }
        96%,
        100% {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
    }
    @keyframes amb-ib1 {
        0%,
        29% {
            opacity: 1;
        }
        30%,
        100% {
            opacity: 0;
        }
    }
    @keyframes amb-dn1 {
        0%,
        29% {
            opacity: 0;
        }
        33%,
        90% {
            opacity: 1;
        }
        96%,
        100% {
            opacity: 0;
        }
    }
    @keyframes amb-ib2 {
        0%,
        41% {
            opacity: 1;
        }
        42%,
        100% {
            opacity: 0;
        }
    }
    @keyframes amb-dn2 {
        0%,
        41% {
            opacity: 0;
        }
        45%,
        90% {
            opacity: 1;
        }
        96%,
        100% {
            opacity: 0;
        }
    }
    @keyframes amb-pp {
        0%,
        77% {
            opacity: 0;
            transform: scale(0.6);
        }
        82%,
        90% {
            opacity: 1;
            transform: scale(1);
        }
        96%,
        100% {
            opacity: 0;
        }
    }
    /* static (not playing): approvals read resolved */
    .bento-tile.is-warm:not(.is-playing) .amb-ibs {
        opacity: 0;
    }
    .bento-tile.is-warm:not(.is-playing) .amb-done {
        opacity: 1;
    }
    /* narrow tiles: drop the struck-through old price so the chips fit */
    @media (max-width: 700px) {
        .amb-old,
        .amb-ar {
            display: none;
        }
        .amb-row {
            font-size: 12.5px;
            gap: 5px;
        }
    }

    /* ===== MCP tile — cream Claude-style background with 3 query bubbles ===== */
    .bento-tile.is-mcp {
        background: var(--paper-cool);
        border-color: var(--line);
        color: var(--ink);
        min-height: 0;
    }
    .bento-tile.is-mcp h3 {
        color: var(--ink-muted);
    }
    .bento-tile.is-mcp p {
        color: var(--ink);
    }
    .mcp-stage {
        position: absolute;
        inset: 22px 22px 152px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 10px;
        z-index: 0;
    }
    .mcp-bubbles {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
    }
    /* Bubbles sit fully composed at rest — viewer sees the product moment
     without competing motion. Hover pops them in sequentially, then they
     stay (no fade-out) so the tile reads as "alive on hover". */
    .mcp-bubble {
        max-width: 88%;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 12px 12px 3px 12px;
        padding: 7px 11px;
        font-size: 15px;
        line-height: 1.35;
        color: var(--ink);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        opacity: 1;
        transform: translateY(0);
    }
    /* Looping cumulative pop-in — bubbles enter staggered then all fade
     out together at the end of the cycle so the loop boundary is clean. */
    @keyframes mcp-loop-1 {
        0%,
        4% {
            opacity: 0;
            transform: translateY(6px);
        }
        10%,
        86% {
            opacity: 1;
            transform: translateY(0);
        }
        94%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    @keyframes mcp-loop-2 {
        0%,
        20% {
            opacity: 0;
            transform: translateY(6px);
        }
        26%,
        86% {
            opacity: 1;
            transform: translateY(0);
        }
        94%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    @keyframes mcp-loop-3 {
        0%,
        36% {
            opacity: 0;
            transform: translateY(6px);
        }
        42%,
        86% {
            opacity: 1;
            transform: translateY(0);
        }
        94%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    .bento-tile.is-mcp.is-playing .mcp-b1 {
        animation: mcp-loop-1 9s ease-in-out infinite;
    }
    .bento-tile.is-mcp.is-playing .mcp-b2 {
        animation: mcp-loop-2 9s ease-in-out infinite;
    }
    .bento-tile.is-mcp.is-playing .mcp-b3 {
        animation: mcp-loop-3 9s ease-in-out infinite;
    }
    .mcp-input {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 5px 6px 5px 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }
    /* Cross-tool input (Round 8): the leading mark + placeholder cycle through
     the AI assistants the Converge MCP plugs into (Claude → ChatGPT → Manus),
     synced to the same 9s loop as the question bubbles. At rest = Claude. */
    .mcp-input-mark {
        position: relative;
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }
    .mcp-input-mark img {
        position: absolute;
        inset: 0;
        width: 15px;
        height: 15px;
        object-fit: contain;
        opacity: 0;
    }
    .mcp-input-mark .mcp-m1 {
        opacity: 1;
    }
    .mcp-input-placeholder {
        position: relative;
        flex: 1;
        font-size: 15px;
        color: var(--ink-subtle);
    }
    .mcp-input-placeholder > span {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        opacity: 0;
    }
    .mcp-input-placeholder > span.mcp-p1 {
        opacity: 1;
    }
    .mcp-input-placeholder > span.mcp-p-spacer {
        position: static;
        transform: none;
        opacity: 0;
        visibility: hidden;
    }
    @keyframes mcp-swap {
        0%,
        2% {
            opacity: 0;
        }
        8%,
        30% {
            opacity: 1;
        }
        36%,
        100% {
            opacity: 0;
        }
    }
    .bento-tile.is-mcp.is-playing .mcp-m1,
    .bento-tile.is-mcp.is-playing .mcp-p1 {
        animation: mcp-swap 9s ease-in-out infinite;
    }
    .bento-tile.is-mcp.is-playing .mcp-m2,
    .bento-tile.is-mcp.is-playing .mcp-p2 {
        animation: mcp-swap 9s ease-in-out infinite 3s;
    }
    .bento-tile.is-mcp.is-playing .mcp-m3,
    .bento-tile.is-mcp.is-playing .mcp-p3 {
        animation: mcp-swap 9s ease-in-out infinite 6s;
    }
    .mcp-input-send {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ink);
        color: #fff;
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }
    .mcp-input-send svg {
        width: 11px;
        height: 11px;
    }

    /* ===== Routines stack tile — 3 report cards pop in ===== */
    .rt-stage {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        height: 86px;
        margin-bottom: 8px;
    }
    /* All three schedule cards visible at rest — pop in sequentially only
     when the tile is hovered. */
    .rt-card {
        display: flex;
        align-items: center;
        gap: 9px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 7px 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        opacity: 1;
        transform: translateY(0);
    }
    /* Looping cumulative pop-in — schedule cards enter staggered then all
     fade out together at end of cycle so the loop boundary is clean. */
    @keyframes rt-loop-1 {
        0%,
        4% {
            opacity: 0;
            transform: translateY(8px);
        }
        10%,
        86% {
            opacity: 1;
            transform: translateY(0);
        }
        94%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    @keyframes rt-loop-2 {
        0%,
        20% {
            opacity: 0;
            transform: translateY(8px);
        }
        26%,
        86% {
            opacity: 1;
            transform: translateY(0);
        }
        94%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    @keyframes rt-loop-3 {
        0%,
        36% {
            opacity: 0;
            transform: translateY(8px);
        }
        42%,
        86% {
            opacity: 1;
            transform: translateY(0);
        }
        94%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }
    .bento-tile.is-routines.is-playing .rt-c1 {
        animation: rt-loop-1 8s ease-in-out infinite;
    }
    .bento-tile.is-routines.is-playing .rt-c2 {
        animation: rt-loop-2 8s ease-in-out infinite;
    }
    .bento-tile.is-routines.is-playing .rt-c3 {
        animation: rt-loop-3 8s ease-in-out infinite;
    }
    .rt-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    /* Routines schedule dots — three warm shades (orange · sienna · umber)
     so the section feels of-a-piece with the AMB warm dither. */
    .rt-dot-accent {
        background: #e8744a;
        box-shadow: 0 0 0 3px rgba(232, 116, 74, 0.22);
    }
    .rt-dot-warm {
        background: #b14a22;
        box-shadow: 0 0 0 3px rgba(177, 74, 34, 0.22);
    }
    .rt-dot-neutral {
        background: #5a2e12;
        box-shadow: 0 0 0 3px rgba(90, 46, 18, 0.2);
    }
    /* Routines report name — same calm weight + soft ink-muted as the MCP
     bubbles and the AMB illustration card; one consistent feel across
     the three tile illustrations. */
    .rt-name {
        flex: 1;
        font-size: 15px;
        font-weight: 400;
        color: var(--ink-muted);
        letter-spacing: -0.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Destination brand mark on the right of each row (Slack / Gmail) — the
     report's delivery channel, inline colour glyph. */
    .rt-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
    }
    .rt-icon svg {
        max-width: 100%;
        max-height: 100%;
        display: block;
    }

    .bento-tile {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: var(--paper-cool);
        padding: 28px;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
    }
    .bento-tile .meta {
        margin-top: auto;
    }
    .bento-tile h3 {
        margin: 0 0 8px;
        font-size: 15px;
        font-weight: 500;
        color: var(--ink-muted);
        letter-spacing: -0.005em;
    }
    .bento-tile p {
        margin: 0;
        max-width: 44ch;
        font-size: 20px;
        line-height: 1.45;
        color: var(--ink);
        letter-spacing: -0.01em;
    }

    /* Featured tile — Warm dither (Agentic Marketing) */
    .bento-tile.is-featured.is-warm {
        background:
            radial-gradient(
                ellipse 70% 60% at 22% 78%,
                #e8744a 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 60% 60% at 80% 80%,
                #d4a45c 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 80% 70% at 20% 18%,
                #a89cc4 0%,
                transparent 60%
            ),
            radial-gradient(
                ellipse 70% 50% at 80% 15%,
                #c89880 0%,
                transparent 55%
            ),
            linear-gradient(160deg, #b3a4c8 0%, #d49870 55%, #b88858 100%);
        color: #ffffff;
        border: 0;
        min-height: 360px;
    }
    /* Featured tile — Cool dither (Measurement) */
    .bento-tile.is-featured.is-cool {
        background:
      /* Soft, oversized bloom anchored just off the top-right corner. Three
         stops with a sage mid-tone so the highlight melts into the green
         instead of reading as a hard white disc. */
            radial-gradient(
                ellipse 95% 95% at 100% -5%,
                rgba(238, 242, 226, 0.65) 0%,
                rgba(200, 218, 170, 0.32) 28%,
                rgba(140, 165, 110, 0.1) 60%,
                transparent 90%
            ),
            /* Mid-tone wash through the body for depth. */
            radial-gradient(
                    ellipse 75% 45% at 45% 55%,
                    #6e8c4a 0%,
                    transparent 70%
                ),
            /* Deep anchor at the bottom so the SHIFT pills read against forest green. */
            radial-gradient(
                    ellipse 100% 55% at 50% 100%,
                    #3a4a26 0%,
                    transparent 60%
                ),
            /* Base top→bottom ramp: sage → forest. */
            linear-gradient(
                    180deg,
                    #7b9560 0%,
                    #5a7038 45%,
                    #3f4e26 85%,
                    #2f3a1c 100%
                );
        color: #ffffff;
        border: 0;
        min-height: 360px;
    }
    .bento-tile.is-featured::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        background-size: 180px 180px;
        mix-blend-mode: overlay;
        opacity: 0.85;
        pointer-events: none;
    }
    .bento-tile.is-featured h3 {
        color: rgba(255, 255, 255, 0.72);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    .bento-tile.is-featured p {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }
    .bento-tile.is-featured .meta {
        position: relative;
        z-index: 1;
    }

    /* Chat-bubble mock for Agentic featured — composed as a loose illustration,
     not a UI mock. Bubbles use translucent fills with soft borders (no drop
     shadows), and the action chips live OUTSIDE the bubble as floating
     options on the gradient. */
    .bento-chat {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 18px;
        align-items: flex-end;
        margin-top: 4px;
    }
    .bento-bubble {
        background: rgba(255, 255, 255, 0.86);
        color: #18181b;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 14px;
        padding: 14px 18px;
        font-size: 13.5px;
        line-height: 1.55;
        max-width: 80%;
        /* No drop shadow — keeps it feeling drawn-on rather than UI-floating. */
        box-shadow: none;
        backdrop-filter: blur(4px);
    }
    .bento-bubble.is-self {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: #ffffff;
        align-self: flex-start;
        backdrop-filter: blur(8px);
    }
    /* Agent label removed — the proposal bubble carries no inline eyebrow now,
     so the chat reads as a pure conversation, not a labeled UI surface. */
    .bento-bubble .agent-tag {
        display: none;
    }
    /* Illustrative action chips — float below the agent bubble on the gradient
     itself. Pill shape, translucent fills, no card chrome, so they read as
     "options being offered" rather than as a real button bar. */
    .bento-actions {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        /* Right-align so the chips sit directly under the right-aligned
       agent-proposal bubble. */
        align-self: flex-end;
        justify-content: flex-end;
        max-width: 80%;
    }
    .bento-action {
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1;
        padding: 9px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.32);
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(6px);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition:
            background 0.2s var(--ease),
            border-color 0.2s var(--ease);
    }
    .bento-action svg {
        width: 13px;
        height: 13px;
        display: block;
        flex: 0 0 auto;
    }
    .bento-action:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.45);
    }
    .bento-action.is-primary {
        background: rgba(255, 255, 255, 0.94);
        border-color: rgba(255, 255, 255, 0.94);
        color: var(--ink);
        text-shadow: none;
    }
    .bento-action.is-primary:hover {
        background: #ffffff;
        border-color: #ffffff;
    }

    /* MTA bar-comparison mock for Measurement featured */
    .bento-bars {
        position: relative;
        z-index: 1;
        background: rgba(14, 16, 20, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
    }
    .bento-bars .row {
        display: grid;
        grid-template-columns: 96px 1fr 52px;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: #ffffff;
        font-weight: 500;
    }
    .bento-bars .row .label {
        letter-spacing: 0.02em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }
    .bento-bars .row .bar {
        height: 8px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        overflow: hidden;
    }
    .bento-bars .row .bar i {
        display: block;
        height: 100%;
        background: linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.85) 100%
        );
    }
    .bento-bars .row .v {
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    /* Right-column product tile — small inline mock card */
    .bento-mock {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: 0 6px 18px rgba(15, 13, 46, 0.06);
    }
    .bento-mock .head {
        font-size: 10.5px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        font-weight: 600;
        padding-bottom: 2px;
    }
    .bento-mock .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--paper-cool);
        border-radius: 6px;
        padding: 7px 10px;
        font-size: 12px;
        color: var(--ink);
    }
    .bento-mock .row .v {
        font-weight: 600;
        color: var(--accent-deep);
        background: rgba(47, 110, 75, 0.1);
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 10.5px;
    }

    /* Country-table card mock — used in the MCP tile */
    .bento-table-card {
        position: relative;
        z-index: 1;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 16px 18px 6px;
        box-shadow: 0 8px 24px rgba(15, 13, 46, 0.06);
    }
    .btc-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 14px;
    }
    .btc-titles {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .btc-eyebrow {
        font-size: 11px;
        color: var(--ink-subtle);
        font-weight: 500;
        letter-spacing: 0;
    }
    .btc-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .btc-source {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--ink);
        display: grid;
        place-items: center;
        color: var(--paper);
    }
    .btc-source svg {
        width: 16px;
        height: 16px;
    }
    .btc-table {
        display: flex;
        flex-direction: column;
    }
    .btc-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
        padding: 9px 0;
        border-top: 1px solid var(--line);
        font-size: 12.5px;
        color: var(--ink);
    }
    .btc-row.btc-header {
        color: var(--ink-subtle);
        font-weight: 500;
    }
    .btc-col-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .btc-col-2 {
        font-variant-numeric: tabular-nums;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-self: end;
    }
    .btc-header .btc-col-2 {
        color: var(--ink-subtle);
    }
    .btc-sort {
        width: 14px;
        height: 14px;
        color: var(--ink-subtle);
    }

    /* MCP tile dressed as a Claude.ai-style chat exchange — illustrative, not
     a screenshot. The chat is wrapped in a faux browser/app window with a
     title bar so it reads clearly as "an illustration of software" rather
     than as a raw chat exchange. The window has fixed-ish proportions so
     the tile doesn't grow taller than its neighbor. */
    .bento-tile.is-claude {
        /* Tile background stays neutral; the cream/warm tone now lives inside
       the chat window so the window itself stands out as an artifact. */
        background: var(--paper-cool);
    }
    /* Loose, illustrative "window" frame — kept intentionally low-fidelity so
     it reads as a sketch of a Claude/chat UI rather than a literal screenshot.
     Offset toward the top-right of the tile so it doesn't feel centered. */
    .bcl-window {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(15, 13, 46, 0.04);
        /* Push toward the top-right of the tile. */
        width: 86%;
        margin: 0 0 32px auto;
    }
    /* Title strip — a thin, empty band; no traffic-light dots, no label.
     Just enough chrome to imply "this is software", not enough to imply a
     specific app. */
    .bcl-titlebar {
        height: 10px;
        background: #f6f3ec;
        border-bottom: 1px solid #ece6d6;
    }
    /* Chat canvas — warm cream like the Claude.ai conversation area */
    .bcl-canvas {
        background: #faf9f5;
        padding: 14px 14px 16px;
    }
    .bcl {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .bcl-msg-user {
        display: flex;
        justify-content: flex-end;
    }
    .bcl-user-bubble {
        background: #f1ede2;
        color: var(--ink);
        border: 1px solid #e5dfce;
        border-radius: 12px;
        padding: 7px 11px;
        font-size: 11.5px;
        line-height: 1.4;
        max-width: 86%;
        letter-spacing: -0.005em;
    }
    .bcl-msg-asst {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }
    .bcl-asst-mark {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        color: #c4593a; /* Claude coral, slightly muted */
        margin-top: 1px;
    }
    .bcl-asst-mark svg {
        width: 18px;
        height: 18px;
        display: block;
    }
    .bcl-asst-body {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* Higher specificity than the global `.bento-tile p { font-size: 18px }` so
     the assistant line matches the user bubble's text size. */
    .bento-tile .bcl-asst-text {
        margin: 0;
        font-size: 11.5px;
        line-height: 1.5;
        color: var(--ink);
        letter-spacing: -0.005em;
        max-width: none;
    }
    /* Soften and shrink the artifact card when it sits inside the chat window. */
    .bcl-asst-body .bento-table-card {
        box-shadow: 0 1px 0 rgba(15, 13, 46, 0.03);
        border-color: #ebe6d7;
        padding: 10px 12px 2px;
    }
    .bcl-asst-body .bento-table-card .btc-eyebrow {
        font-size: 10px;
    }
    .bcl-asst-body .bento-table-card .btc-title {
        font-size: 12px;
    }
    .bcl-asst-body .bento-table-card .btc-source {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .bcl-asst-body .bento-table-card .btc-source svg {
        width: 13px;
        height: 13px;
    }
    .bcl-asst-body .bento-table-card .btc-row {
        padding: 7px 0;
        font-size: 11px;
    }

    /* ===== Bento tiles as links =====================================
     Both featured tiles route to their respective product page when
     clicked. Keep the tile's existing flex/column behaviour. */
    a.bento-tile {
        text-decoration: none;
        color: inherit;
        /* Subtle hover lift, distinct from the .bento-small hover so featured
       tiles still feel "important" rather than card-y. */
        transition:
            transform 0.25s var(--ease),
            box-shadow 0.25s var(--ease);
    }
    /* Card-lift on hover intentionally suppressed in the new Agentic layout
     (Option C): only the corner arrow gets focused, not the whole tile.
     Keep the lift for any other section that uses a.bento-tile so we
     don't regress elsewhere. */
    a.bento-tile:not(.is-featured):not(.is-mcp):not(.is-routines):not(
            .is-mta
        ):not(.is-convtrack):not(.is-mktg):hover {
        transform: translateY(-2px);
    }

    /* Clickable-affordance arrow chip on the featured tiles, mirroring the
     `.bento-small .icon` arrow swap. Bottom-right corner so it doesn't fight
     the chat illustration above it. */
    .bento-tile.is-featured .tile-arrow,
    .bento-tile.is-claude .tile-arrow {
        position: absolute;
        bottom: 24px;
        right: 24px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.45);
        display: grid;
        place-items: center;
        color: var(--ink);
        z-index: 3;
        pointer-events: none;
        transition:
            background 0.25s var(--ease),
            color 0.25s var(--ease),
            border-color 0.25s var(--ease),
            transform 0.25s var(--ease);
    }
    /* MCP tile sits on a neutral cream surface — give the chip a clean border
     so it reads as a distinct affordance rather than blending in. */
    .bento-tile.is-claude .tile-arrow {
        background: var(--paper);
        border-color: var(--line);
    }
    .bento-tile.is-featured .tile-arrow svg,
    .bento-tile.is-claude .tile-arrow svg {
        width: 16px;
        height: 16px;
        display: block;
    }
    /* On hover, the chip turns brand green with a small diagonal kick — same
     accent + nudge pattern as the `.bento-small` icon swap below. */
    .bento-tile.is-featured:hover .tile-arrow,
    .bento-tile.is-claude:hover .tile-arrow {
        background: var(--accent);
        border-color: var(--accent);
        color: #ffffff;
        transform: translate(2px, -2px);
    }
    /* Reserve right padding on the meta block so the description text doesn't
     run under the arrow chip. */
    .bento-tile.is-featured .meta,
    .bento-tile.is-claude .meta {
        padding-right: 56px;
    }

    /* ===== Message-by-message entry animations =====================
     Each illustrative element starts hidden + slightly offset, then fades
     and floats up when its tile scrolls into view. Slow, sequential —
     so the chat "comes to life" rather than appearing all at once. */
    .bento-tile.is-warm .bento-bubble,
    .bento-tile.is-warm .bento-actions,
    .bento-tile.is-claude .bcl-window,
    .bento-tile.is-claude .bcl-msg-user,
    .bento-tile.is-claude .bcl-asst-mark,
    .bento-tile.is-claude .bcl-asst-text,
    .bento-tile.is-claude .bento-table-card {
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Agentic — user prompt → agent proposal → chip row */
    .bento-tile.is-warm.is-playing .bento-bubble.is-self {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.25s;
    }
    .bento-tile.is-warm.is-playing .bento-bubble:not(.is-self) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 1.3s;
    }
    .bento-tile.is-warm.is-playing .bento-actions {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 2.3s;
    }
    /* MCP — window chrome → user prompt → Claude mark + text → artifact */
    .bento-tile.is-claude.is-playing .bcl-window {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
    }
    .bento-tile.is-claude.is-playing .bcl-msg-user {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.75s;
    }
    .bento-tile.is-claude.is-playing .bcl-asst-mark,
    .bento-tile.is-claude.is-playing .bcl-asst-text {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 1.75s;
    }
    .bento-tile.is-claude.is-playing .bento-table-card {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 2.6s;
    }
    /* Respect users who prefer reduced motion. */
    @media (prefers-reduced-motion: reduce) {
        .bento-tile.is-warm .bento-bubble,
        .bento-tile.is-warm .bento-actions,
        .bento-tile.is-claude .bcl-window,
        .bento-tile.is-claude .bcl-msg-user,
        .bento-tile.is-claude .bcl-asst-mark,
        .bento-tile.is-claude .bcl-asst-text,
        .bento-tile.is-claude .bento-table-card {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }

    /* Bottom row — 2 small icon tiles (Routines + Self-learning). */
    .bento-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    /* `.is-static` strips the click affordance for cards that don't deep-link
     (value props like Self-learning). No cursor pointer, no hover lift,
     and the icon's hover-arrow swap is suppressed. */
    .bento-small.is-static {
        cursor: default;
    }
    .bento-small.is-static:hover {
        background: var(--paper);
        transform: none;
    }
    .bento-small.is-static:hover .icon {
        background: var(--paper-cool);
        color: var(--ink);
        border-color: var(--line);
    }
    .bento-small {
        border-radius: 12px;
        border: 1px solid var(--line);
        background: var(--paper);
        padding: 22px;
        min-height: 220px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition:
            background 0.18s var(--ease),
            transform 0.18s var(--ease);
    }
    .bento-small:hover {
        background: var(--paper-cool);
        transform: translateY(-1px);
    }
    .bento-small .icon {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--paper-cool);
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        color: var(--ink);
        /* No fixed gap below — h3 below uses `margin-top: auto` to push the
       title + body to the bottom of the card. */
        margin-bottom: 0;
        flex: 0 0 auto;
        transition:
            background 0.18s var(--ease),
            color 0.18s var(--ease),
            border-color 0.18s var(--ease);
    }
    .bento-small .icon svg {
        width: 18px;
        height: 18px;
    }
    .bento-small .icon .ic-default,
    .bento-small .icon .ic-arrow {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        transition:
            opacity 0.18s var(--ease),
            transform 0.18s var(--ease);
    }
    .bento-small .icon .ic-arrow {
        opacity: 0;
        transform: translate(-2px, 2px);
    }
    .bento-small:hover .icon {
        background: var(--accent);
        color: #ffffff;
        border-color: var(--accent);
    }
    .bento-small:hover .icon .ic-default {
        opacity: 0;
        transform: translate(2px, -2px);
    }
    .bento-small:hover .icon .ic-arrow {
        opacity: 1;
        transform: translate(0, 0);
    }
    .bento-small h3 {
        /* margin-top: auto floats the title (and the paragraph beneath it)
       down to the bottom of the flex column. */
        margin: auto 0 6px 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-muted);
    }
    .bento-small p {
        margin: 0;
        font-size: 16.5px;
        line-height: 1.4;
        color: var(--ink);
        letter-spacing: -0.005em;
    }

    /* Split layout — featured tile (tall) on the left, 2x2 quad of small
     tiles on the right. Used by the Measurement section. */
    .bento.is-split {
        /* 50/50 split: gives the right-hand 2×2 quad enough width that each card's
       body copy stops wrapping awkwardly. */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 12px;
    }
    .bento.is-split .bento-tile.is-featured.is-tall {
        /* Shorter so the right-side quad reads as a 2×2 of near-square cards
       instead of tall rectangles, and the left tile's title block + chips
       don't have a big empty middle. */
        min-height: 500px;
        padding: 36px;
    }
    .bento-quad {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 12px;
    }
    .bento-quad .bento-small {
        min-height: 0;
    }

    /* Featured tile — tall variant: eyebrow + title + body + shift chips */
    .bento-tile.is-featured.is-tall .feat-eyebrow {
        position: relative;
        z-index: 1;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }
    .bento-tile.is-featured.is-tall .feat-title {
        position: relative;
        z-index: 1;
        /* Eyebrow removed — title now sits at the top of the tile with no
       top offset. */
        margin: 0 0 18px;
        font-size: clamp(28px, 2.6vw, 36px);
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        /* Wider so the title can fill more of the tile horizontally. */
        max-width: 18ch;
    }
    .bento-tile.is-featured.is-tall .feat-body {
        position: relative;
        z-index: 1;
        margin: 0;
        /* Was 32ch, which wrapped this paragraph into four short lines.
       48ch lets it lay out as two fuller lines on this tile width. */
        max-width: 48ch;
        /* 18px — matches the sibling bento tiles' copy on this page (Round 12). */
        font-size: 18px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.94);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .bento-tile.is-featured.is-tall .feat-chips {
        position: relative;
        z-index: 1;
        margin-top: auto;
        padding-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .bento-shift {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: rgba(14, 16, 20, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        font-size: 13px;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(6px);
    }
    .bento-shift .tag {
        font-size: 10.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        padding: 3px 10px;
        font-weight: 600;
        text-shadow: none;
    }
    .bento-shift .label {
        font-weight: 500;
    }
    .bento-shift .delta {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    /* ===== MEASUREMENT — 3-up + full-width TOF band (Round 8 restructure) =====
     Row 1: Multi-touch Attribution · Conversion Tracking · Marketing
     Analytics as three compact product tiles whose stages share a
     hairline-ledger language (no bounded row containers; soft-gray
     content so the subtitles lead). Row 2: "Justify top-of-funnel
     spend" as a full-width band on the cool dither. */
    .bento.is-measurement {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(320px, auto) auto;
        gap: 12px;
    }
    .bento.is-measurement .is-tof {
        grid-column: 1 / -1;
    }
    .bento.is-measurement .bento-tile {
        padding: 28px;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition:
            transform 0.22s var(--ease),
            border-color 0.22s var(--ease);
    }
    /* The three illustrations have different natural heights (rows / events /
     KPI grid). Pin them to a common height so the .meta beneath them starts
     at the same y in every tile — that is what top-aligns the titles. */
    .bento.is-measurement .ms-stage {
        flex: 0 0 auto;
        min-height: 180px;
    }
    /* Top-anchored, NOT bottom-anchored (margin-top: auto). Bottom-anchoring
     makes the title position depend on how many lines the body wraps to, so a
     3-line body pushes its title up out of line with its siblings. Anchoring
     the meta directly under the fixed-height stage keeps every title on the
     same line; bodies simply run further down the tile. */
    .bento.is-measurement .bento-tile .meta {
        margin-top: 0;
        padding-top: 28px;
    }
    /* Title-case h3 matching Self-learning — same canon as Agentic
     (design.md §2). Body slightly smaller + muted so the title leads. */
    .bento.is-measurement .bento-tile .meta h3 {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 6px;
        font-size: 20px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.015em;
        line-height: 1.15;
    }
    .bento.is-measurement .bento-tile .meta p {
        margin: 0;
        max-width: 40ch;
        font-size: 16.5px;
        font-weight: 400;
        color: var(--ink-muted);
        letter-spacing: -0.005em;
        line-height: 1.4;
    }
    /* Featured cool-dither tile inverts contrast like AMB does. */
    .bento.is-measurement .bento-tile.is-featured.is-cool .meta h3 {
        color: rgba(255, 255, 255, 0.65);
    }
    .bento.is-measurement .bento-tile.is-featured.is-cool .meta p {
        color: #fff;
    }
    /* Linked product tiles — NO card lift on hover, only the inline arrow
     reveals (same pattern as Agentic). Animations keep looping
     uninterrupted; hover never restarts them. */
    .bento.is-measurement a.bento-tile:hover {
        transform: none;
        border-color: var(--line);
    }
    /* Square w/ rounded corners — matches the Agentic section's arrow
     shape so both bento sections share one inline-arrow language. */
    .bento.is-measurement a.bento-tile .arrow-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: var(--accent);
        color: #fff;
        border: 1px solid transparent;
        opacity: 0;
        transform: translateX(-4px);
        transition:
            opacity 0.2s var(--ease),
            transform 0.2s var(--ease);
        flex-shrink: 0;
    }
    .bento.is-measurement a.bento-tile .arrow-inline svg {
        width: 13px;
        height: 13px;
    }
    .bento.is-measurement a.bento-tile:hover .arrow-inline {
        opacity: 1;
        transform: translate(0, 0);
    }
    .bento.is-measurement .bento-tile .tile-arrow {
        display: none;
    }

    /* Touch devices have no hover state, so the inline card arrows would never
     appear. Surface them at rest on no-hover pointers (the agentic warm and
     measurement green chips both ride their resting style) so the tap
     affordance reads on mobile. */
    @media (hover: none) {
        .bento.is-agentic a.bento-tile .arrow-inline,
        .bento.is-measurement a.bento-tile .arrow-inline {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Value-prop card (cool dither) — feat-title/feat-body restyled to
     match the Self-learning label canon (20px title-case white title +
     15px muted-white body). White text preserved for contrast against
     the cool dither bg. */
    .bento.is-measurement .bento-tile.is-featured.is-cool {
        min-height: 0;
        isolation: isolate;
    }
    .bento.is-measurement .bento-tile.is-featured.is-cool.is-tof {
        min-height: 260px;
    }
    .bento.is-measurement .feat-title {
        position: relative;
        z-index: 1;
        margin: 0 0 8px;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.015em;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .bento.is-measurement .feat-body {
        position: relative;
        z-index: 1;
        margin: 0;
        max-width: 56ch;
        font-size: 16.5px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: -0.005em;
        color: rgba(255, 255, 255, 0.78);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .bento.is-measurement .feat-chips {
        position: relative;
        z-index: 1;
        margin-top: auto;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    @keyframes ms-shift-in {
        from {
            opacity: 0;
            transform: translateX(-8px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    .bento.is-measurement
        .is-featured.is-cool:hover
        .feat-chips
        .bento-shift:nth-child(1) {
        animation: ms-shift-in 0.4s var(--ease) both;
    }
    .bento.is-measurement
        .is-featured.is-cool:hover
        .feat-chips
        .bento-shift:nth-child(2) {
        animation: ms-shift-in 0.4s var(--ease) both 0.1s;
    }
    .bento.is-measurement
        .is-featured.is-cool:hover
        .feat-chips
        .bento-shift:nth-child(3) {
        animation: ms-shift-in 0.4s var(--ease) both 0.2s;
    }

    /* --- Justify TOF: production-style pie chart, restyled in Swiss Authority verdant. A white card holds the chart so it pops on the cool dither
     beneath. Three wedges + a "+15%" badge call out the increment that
     Converge unlocks. Hover replays the increment growth + badge entry. */
    /* Horizontal bar-chart "Share of ad spend" sitting directly on the
     cool-dither tile — no white card backdrop. Each row is a labeled
     track whose width represents its share. The TOF row's +15%
     increment fills in continuously to convey the Converge unlock. */
    /* --- Justify TOF: full-width band on the cool dither. Copy left; ONE
     thick stacked horizontal bar right. The TOF segment grows 20% → 35%
     (the +15% Converge unlocks) while Other fills the remainder; the
     legend percentages tick along with the growth (integer custom
     properties rendered via CSS counters, same trick as the
     self-learning autonomy readout) and the +15% pill fades in as the
     growth completes. Copy column is slightly wider than the chart so
     the body breaks without an orphaned last word. */
    .bento.is-measurement .is-tof {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 44px;
        align-items: center;
        min-height: 260px;
        padding-top: 44px;
        padding-bottom: 44px;
    }
    .is-tof .feat-copy {
        position: relative;
        z-index: 1;
    }
    .is-tof .tof-chart {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 13px;
        animation: tof-nums 6.5s ease-in-out infinite;
    }
    .is-tof .tof-cap {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }
    .is-tof .tof-bar {
        display: flex;
        gap: 3px;
        height: 68px;
    }
    .is-tof .tof-bar .seg {
        border-radius: 8px;
    }
    .is-tof .tof-seg-tof {
        width: 20%;
        background: #eaf3ea;
    }
    /* The Converge increment is its own segment that grows in — reads as a
     portion ADDED (not the whole bar resizing), and its width is exactly the
     +15% the pill claims. Its fill is the SAME #eaf3ea as the base TOF segment
     and the +15% pill, so the bar and the pill state the same thing in the
     same colour; the 3px seam is what distinguishes base from increment. */
    .is-tof .tof-seg-add {
        width: 0%;
        background: #eaf3ea;
        animation: tof-add-grow 6.5s ease-in-out infinite;
    }
    .is-tof .tof-seg-other {
        flex: 1;
        background: rgba(255, 255, 255, 0.2);
    }
    @keyframes tof-add-grow {
        0%,
        6% {
            width: 0%;
        }
        22%,
        80% {
            width: 15%;
        }
        92%,
        100% {
            width: 0%;
        }
    }
    @property --tof-pct {
        syntax: "<integer>";
        inherits: true;
        initial-value: 35;
    }
    @property --oth-pct {
        syntax: "<integer>";
        inherits: true;
        initial-value: 65;
    }
    @keyframes tof-nums {
        0%,
        6% {
            --tof-pct: 20;
            --oth-pct: 80;
        }
        22%,
        80% {
            --tof-pct: 35;
            --oth-pct: 65;
        }
        92%,
        100% {
            --tof-pct: 20;
            --oth-pct: 80;
        }
    }
    .is-tof .tof-legend {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14.5px;
    }
    .is-tof .tof-legend .lg {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: rgba(255, 255, 255, 0.8);
    }
    .is-tof .tof-legend .sw {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        flex: 0 0 auto;
    }
    .is-tof .tof-legend b {
        color: #fff;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        font-size: 16px;
    }
    .is-tof .tof-num-tof::after {
        counter-reset: tofpct var(--tof-pct);
        content: counter(tofpct) "%";
    }
    .is-tof .tof-num-oth::after {
        counter-reset: othpct var(--oth-pct);
        content: counter(othpct) "%";
    }
    .is-tof .tof-legend b.tof-delta {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        background: #eaf3ea;
        color: var(--accent-deep);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: -0.005em;
        opacity: 0;
        animation: tof-delta-fade 6.5s ease-in-out infinite;
    }
    @keyframes tof-delta-fade {
        0%,
        24% {
            opacity: 0;
            transform: translateY(2px);
        }
        32%,
        78% {
            opacity: 1;
            transform: translateY(0);
        }
        90%,
        100% {
            opacity: 0;
            transform: translateY(0);
        }
    }

    /* --- MTA stage: hairline ledger — Meta CPA by attribution model ---
     Caption (Meta logo + label) over three hairline-divided rows:
     model | verdict-colored track | soft-gray CPA | verdict chip. As
     models credit the upper funnel, the verdict shifts Pause → Hold →
     Scale; the fill color matches the verdict (pause red, hold orange,
     scale green). Bars grow in cascaded on a loop. */
    .mta-cap {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-subtle);
        margin-bottom: 2px;
    }
    .mta-cap img {
        width: 14px;
        height: 14px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .mta-rows {
        display: flex;
        flex-direction: column;
    }
    .mta-row {
        display: grid;
        grid-template-columns: 98px minmax(0, 1fr) 46px 58px;
        align-items: center;
        gap: 12px;
        padding: 13px 0;
        border-top: 1px solid var(--line);
    }
    .mta-row:first-of-type {
        border-top: 0;
    }
    .mta-model {
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-soft);
        letter-spacing: -0.005em;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mta-track {
        height: 7px;
        border-radius: 4px;
        overflow: hidden;
    }
    .mta-track i {
        display: block;
        height: 100%;
        border-radius: 4px;
        transform-origin: left;
    }
    .mta-row.is-pause .mta-track {
        background: rgba(155, 42, 42, 0.1);
    }
    .mta-row.is-pause .mta-track i {
        background: #b8503f;
    }
    .mta-row.is-hold .mta-track {
        background: rgba(217, 119, 6, 0.12);
    }
    .mta-row.is-hold .mta-track i {
        background: #c98a2e;
    }
    .mta-row.is-scale .mta-track {
        background: var(--accent-mist);
    }
    .mta-row.is-scale .mta-track i {
        background: var(--accent);
    }
    .mta-val {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
        text-align: right;
        line-height: 1;
    }
    .mta-decision {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 0;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
    }
    .mta-decision.is-pause {
        background: rgba(155, 42, 42, 0.1);
        color: #9b2a2a;
    }
    .mta-decision.is-hold {
        background: rgba(217, 119, 6, 0.12);
        color: #92400e;
    }
    .mta-decision.is-scale {
        background: var(--accent-soft);
        color: var(--accent-deep);
    }
    /* Bars grow in cascaded on a loop. */
    @keyframes mta-bar-grow {
        0%,
        6% {
            transform: scaleX(0.04);
        }
        26%,
        84% {
            transform: scaleX(1);
        }
        96%,
        100% {
            transform: scaleX(0.04);
        }
    }
    .mta-r1 .mta-track i {
        animation: mta-bar-grow 5.5s var(--ease) infinite;
    }
    .mta-r2 .mta-track i {
        animation: mta-bar-grow 5.5s var(--ease) infinite 0.15s;
    }
    .mta-r3 .mta-track i {
        animation: mta-bar-grow 5.5s var(--ease) infinite 0.3s;
    }

    /* --- Conversion Tracking stage: production-style 4-event funnel ---
     Events flow top → bottom: view → cart → checkout → purchase. Each
     event is a thin white row with an icon (progressive verdant tone),
     name, and three destination logos (Meta / Google Ads / Klaviyo)
     forwarded server-side. The final "Purchase" row tints faintly to
     signal the conversion. Hover cascades the rows top → bottom. */
    .ct-events {
        display: flex;
        flex-direction: column;
    }
    /* Hairline ledger rows — no bounded containers; thin dividers separate
     the events so the soft-gray content recedes behind the subtitle. */
    .ct-event {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 0;
        border-top: 1px solid var(--line);
    }
    .ct-event.ct-e1 {
        border-top: 0;
    }
    .ct-icon {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }
    .ct-icon svg {
        width: 11px;
        height: 11px;
    }
    /* Progressive verdant tones — lighter early funnel, darker as it
     converges to the Purchase conversion. */
    .ct-tone-1 {
        background: var(--paper-sunken);
        color: var(--ink-subtle);
    }
    .ct-tone-2 {
        background: rgba(47, 110, 75, 0.08);
        color: var(--accent);
    }
    .ct-tone-3 {
        background: rgba(47, 110, 75, 0.16);
        color: var(--accent-deep);
    }
    .ct-tone-4 {
        background: var(--accent);
        color: #fff;
    }
    .ct-name {
        flex: 1;
        font-size: 15px;
        font-weight: 400;
        color: var(--ink-soft);
        letter-spacing: -0.005em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ct-conv .ct-name {
        color: var(--accent-deep);
        font-weight: 600;
    }
    .ct-dests {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    .ct-dests img {
        width: 14px;
        height: 14px;
        object-fit: contain;
        flex-shrink: 0;
    }
    /* Continuous loop matching the production pattern (10s cycle).
     Each event starts hidden, slides in cumulatively, holds visible,
     then all four clear together so the next loop starts empty. */
    @keyframes ct-event-loop-1 {
        0%,
        3% {
            opacity: 0;
            transform: translateY(6px);
        }
        7%,
        90% {
            opacity: 1;
            transform: translateY(0);
        }
        96%,
        100% {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
    @keyframes ct-event-loop-2 {
        0%,
        13% {
            opacity: 0;
            transform: translateY(6px);
        }
        17%,
        90% {
            opacity: 1;
            transform: translateY(0);
        }
        96%,
        100% {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
    @keyframes ct-event-loop-3 {
        0%,
        23% {
            opacity: 0;
            transform: translateY(6px);
        }
        27%,
        90% {
            opacity: 1;
            transform: translateY(0);
        }
        96%,
        100% {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
    @keyframes ct-event-loop-4 {
        0%,
        33% {
            opacity: 0;
            transform: translateY(6px);
        }
        37%,
        90% {
            opacity: 1;
            transform: translateY(0);
        }
        96%,
        100% {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
    .ct-e1 {
        animation: ct-event-loop-1 10s ease-in-out infinite;
    }
    .ct-e2 {
        animation: ct-event-loop-2 10s ease-in-out infinite;
    }
    .ct-e3 {
        animation: ct-event-loop-3 10s ease-in-out infinite;
    }
    .ct-e4 {
        animation: ct-event-loop-4 10s ease-in-out infinite;
    }

    /* --- Marketing Analytics stage: mini bar chart --- */
    /* --- Marketing Analytics stage: production-style 3×2 KPI grid.
     Each tile shows a label + canonical value; hover flashes the value
     verdant with a stagger to suggest the live-ticking dashboard the
     real product is. */
    .ma-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    /* Hairline KPI cells — no boxes; a divided 2×3 grid so six metrics
     read as one quiet ledger. */
    .ma-tile {
        padding: 12px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        border-top: 1px solid var(--line);
    }
    .ma-tile:nth-child(-n + 2) {
        border-top: 0;
    }
    .ma-lbl {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ma-num {
        font-size: 19px;
        font-weight: 600;
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: -0.005em;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Continuous ticker — JS swaps each cell's value through 4 frames on
     a staggered cadence (see end-of-doc script). The CSS just handles
     the brief verdant flash on swap. Matches the production
     HomeMarketingAnalyticsAnim flash behavior. */
    .ma-num {
        transition: color 800ms ease;
    }
    .ma-tile.is-flash .ma-num {
        color: var(--accent-deep);
        transition: color 0ms;
    }
    /* Inline trend arrow — direction (up/down) + tone (good/bad/neutral) set by
     the ticker JS; pulses on each value change. */
    .ma-numrow {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .ma-arrow {
        display: inline-flex;
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        opacity: 0;
    }
    .ma-arrow.show {
        opacity: 1;
    }
    .ma-arrow svg {
        width: 100%;
        height: 100%;
        display: block;
        transition: transform 300ms var(--ease);
    }
    .ma-arrow.dir-down svg {
        transform: rotate(90deg);
    }
    .ma-arrow.dir-flat svg {
        transform: rotate(45deg);
    }
    .ma-arrow.tone-good {
        color: var(--accent);
    }
    .ma-arrow.tone-bad {
        color: #b8503f;
    }
    .ma-arrow.tone-neutral {
        color: var(--ink-subtle);
    }
    .ma-arrow.is-pulse.dir-up {
        animation: ma-pulse-up 560ms var(--ease);
    }
    .ma-arrow.is-pulse.dir-down {
        animation: ma-pulse-down 560ms var(--ease);
    }
    .ma-arrow.is-pulse.dir-flat {
        animation: ma-pulse-flat 560ms var(--ease);
    }
    @keyframes ma-pulse-up {
        0% {
            transform: translateY(0) scale(1);
        }
        42% {
            transform: translateY(-3px) scale(1.35);
        }
        100% {
            transform: translateY(0) scale(1);
        }
    }
    @keyframes ma-pulse-down {
        0% {
            transform: translateY(0) scale(1);
        }
        42% {
            transform: translateY(3px) scale(1.35);
        }
        100% {
            transform: translateY(0) scale(1);
        }
    }
    @keyframes ma-pulse-flat {
        0% {
            transform: scale(1);
        }
        42% {
            transform: scale(1.25);
        }
        100% {
            transform: scale(1);
        }
    }
    /* Looping bar growth — bars rise cascaded, hold, shrink, restart.
     6s cycle with a gentle stagger per bar. */
    @keyframes ma-grow-loop {
        0%,
        5% {
            height: 0;
        }
        22%,
        78% {
            height: var(--h);
        }
        92%,
        100% {
            height: 0;
        }
    }
    .is-mktg.is-playing .ma-bars i:nth-child(1) {
        animation: ma-grow-loop 6s ease-in-out infinite;
    }
    .is-mktg.is-playing .ma-bars i:nth-child(2) {
        animation: ma-grow-loop 6s ease-in-out infinite 0.08s;
    }
    .is-mktg.is-playing .ma-bars i:nth-child(3) {
        animation: ma-grow-loop 6s ease-in-out infinite 0.16s;
    }
    .is-mktg.is-playing .ma-bars i:nth-child(4) {
        animation: ma-grow-loop 6s ease-in-out infinite 0.24s;
    }
    .is-mktg.is-playing .ma-bars i:nth-child(5) {
        animation: ma-grow-loop 6s ease-in-out infinite 0.32s;
    }
    .is-mktg.is-playing .ma-bars i:nth-child(6) {
        animation: ma-grow-loop 6s ease-in-out infinite 0.4s;
    }
    .is-mktg.is-playing .ma-bars i:nth-child(7) {
        animation: ma-grow-loop 6s ease-in-out infinite 0.48s;
    }

    @media (max-width: 760px) {
        .bento {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
        .bento.is-split {
            grid-template-columns: 1fr;
        }
        .bento.is-measurement {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
        /* TOF band collapses to one column (copy above the bar) and stays
       last, concluding the section the same way it does on desktop. */
        .bento.is-measurement .is-tof {
            grid-template-columns: 1fr;
            gap: 22px;
            min-height: 0;
        }
        /* Agentic suite: stack the 3 product tiles + the self-learning strip into 1 column */
        .bento.is-agentic {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
        .bento.is-agentic .bento-tile.is-featured.is-warm,
        .bento.is-agentic .bento-tile.is-mcp,
        .bento.is-agentic .bento-tile.is-routines {
            padding: 22px;
            min-height: 0;
        }
        /* Self-learning strip: collapse the desktop 3-col grid to a single stacked
       column so it reads like the MCP / Routines cards above it — copy flush at
       the card's 22px edge (drop the desktop left-inset), chart + learnings
       below. */
        .bento.is-agentic .bento-tile.is-selflearning {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            grid-template-columns: none;
            gap: 18px;
            padding: 22px;
            min-height: 0;
        }
        .bento.is-agentic .bento-tile.is-selflearning .sl-copy {
            flex: 0 0 auto;
            padding: 0;
        }
        .bento.is-agentic .bento-tile.is-selflearning .sl-auto {
            padding: 0;
            gap: 18px;
        }
        .bento.is-agentic .bento-tile.is-selflearning .sl-bars {
            height: 96px;
        }
        .bento-row {
            grid-template-columns: 1fr;
        }
        .bento-quad {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
        .bento-tile.is-featured.is-tall {
            min-height: 480px;
            padding: 28px;
        }
        section.modules.bento-section {
            padding: 58px 0 46px;
        }
        /* Sticky section label: as each module scrolls under the nav its eyebrow
       pins right below the global nav and rides along with the section. The
       containing block is the <section>, so the label stays pinned across the
       whole module, then the next module's label rises into the slot as this
       one slides up behind the nav (the push-out). The testimonial that follows
       Measurement carries no label, so Measurement's scrolls fully out of view.
       Selector outweighs `section.modules > *{position:relative}` (0,1,1). */
        /* Round 11 (Jan): eyebrows/labels dropped on mobile — the sticky bar ate
       vertical space and read as clutter. Sections lead with the h2 alone. */
        section.modules > .msticky {
            display: none;
            position: sticky;
            top: 69px; /* global nav height */
            z-index: 40; /* under the nav (z-50), over the scrolling content */
            margin: 0 0 22px;
            padding: 11px 24px;
            background: var(--paper);
            border-bottom: 1px solid var(--line);
        }
        .msticky span {
            display: block;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink-subtle);
        }
        /* The sticky bar replaces the in-flow eyebrow on mobile. */
        .bento-section .bento-head .eyebrow {
            display: none;
        }
    }

    /* ===== INTEGRATIONS =====
       Categorized "logo wall" — many marks visible so buyers spot their own
       stack at a glance. Soft-blue dithered wash on the right side aligns
       with the cool/soft-blue accent direction from R3 — same backdrop
       treatment used on the hero and Converge-effect sections. */
    section.integrations {
        padding: 0;
        background: var(--paper);
        position: relative;
        overflow: hidden;
    }
    section.integrations .container {
        padding-top: 112px;
        padding-bottom: 112px;
        position: relative;
        z-index: 1;
    }
    /* Soft-blue radial wash — matches the hero + CTA band: white surface with
     two quiet blue washes, no dither. */
    section.integrations::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(45% 55% at 80% 25%, var(--grad-3), transparent 70%),
            radial-gradient(45% 55% at 20% 80%, var(--grad-2), transparent 70%);
        z-index: 0;
        pointer-events: none;
    }
    .int-head {
        max-width: 760px;
        margin-bottom: 56px;
    }
    .int-head h2 {
        margin: 0 0 14px;
        font-size: clamp(32px, 3.4vw, 44px);
        font-weight: 600;
        letter-spacing: -0.03em;
        line-height: 1.05;
        color: var(--ink);
    }
    .int-head p {
        margin: 0;
        font-size: 18px;
        color: var(--ink-muted);
    }

    /* Marquee belts — three rows of full-colour logo tiles auto-scrolling in
     alternating directions, edges masked. Hover eases the hovered row to a
     slow crawl (never stops) via the Web Animations API; tiles lift on hover.
     No gradient on the module itself — the section's soft-blue wash (above)
     is the only backdrop. */
    .int-belts {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    /* The belt clips the horizontal marquee spill with overflow:hidden and softens
     the left/right edges with the mask. overflow:hidden clips at the PADDING box,
     so the belt is padded taller than its 74px tiles (12px top, 26px bottom) —
     that padding is the clip box's breathing room for the hover lift (top) and
     drop shadow (bottom), so neither gets cut. The padding would loosen the row
     rhythm, so negative margins pull the rows back to a 14px visual gap
     (26 bottom − 24 margin + 12 top of next = 14). first/last child cancel the
     outer padding so the block's top/bottom sit where they did before. */
    .int-belt {
        overflow: hidden;
        padding: 12px 0 26px;
        margin-bottom: -24px;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );
        mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );
    }
    .int-belt:first-child {
        margin-top: -12px;
    }
    .int-belt:last-child {
        margin-bottom: -26px;
    }
    .int-track {
        display: flex;
        width: max-content;
        will-change: transform;
    }
    .int-btile {
        flex: 0 0 auto;
        position: relative;
        width: 74px;
        height: 74px;
        margin-right: 14px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 12px;
        text-decoration: none;
        display: grid;
        place-items: center;
        transition:
            transform 0.22s var(--ease),
            box-shadow 0.22s,
            border-color 0.22s;
    }
    .int-btile:hover {
        transform: translateY(-6px) scale(1.04);
        border-color: var(--line-strong);
        box-shadow: 0 14px 26px -14px rgba(14, 16, 20, 0.45);
        z-index: 2;
    }
    .int-btile img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        display: block;
    }

    .int-foot {
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }
    .int-foot a.btn-ghost {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
    }
    .int-foot a.btn-ghost:hover {
        color: var(--accent);
    }
    @media (max-width: 720px) {
        .int-btile {
            width: 62px;
            height: 62px;
            margin-right: 10px;
        }
        .int-btile img {
            width: 30px;
            height: 30px;
        }
    }

    /* ===== STATIC VISUAL STUBS (simplified versions of production animations) ===== */
    .mock {
        font-size: 12px;
        color: var(--ink);
    }
    .mock-card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px;
    }
    .mock-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mock-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 500;
    }

    /* Agentic Media Buying: suggested-change card — monochrome */
    .vis-suggest {
        background: var(--paper-cool);
        border-radius: 8px;
        padding: 14px;
    }
    .vis-suggest .head {
        font-size: 11px;
        color: var(--ink);
        margin-bottom: 8px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
    }
    .vis-suggest .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ink-soft);
        display: inline-block;
        margin-right: 6px;
    }
    .vis-suggest .body {
        font-size: 12px;
        color: var(--ink);
        margin-bottom: 4px;
    }
    .vis-suggest .body b {
        color: var(--ink);
        font-weight: 600;
    }
    .vis-suggest .sub {
        font-size: 11px;
        color: var(--ink-muted);
        margin-bottom: 12px;
    }
    .vis-suggest .btns {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }
    .vis-suggest button {
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        border: 0;
        cursor: default;
    }
    .vis-suggest button.reject {
        background: transparent;
        color: var(--ink-soft);
        border: 1px solid var(--line-strong);
    }
    .vis-suggest button.approve {
        background: var(--ink);
        color: var(--paper);
    }

    /* MCP chat — monochrome */
    .vis-chat {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 2px;
    }
    .vis-chat .bubble {
        align-self: flex-end;
        background: var(--paper);
        border: 1px solid var(--line);
        padding: 6px 12px;
        border-radius: 14px;
        font-size: 11px;
        color: var(--ink);
        max-width: 90%;
    }
    .vis-chat .input {
        margin-top: 8px;
        background: var(--paper-cool);
        border-radius: 10px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
    }
    .vis-chat .input .star {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--ink-soft);
        flex-shrink: 0;
    }
    .vis-chat .input span {
        color: var(--ink-subtle);
        flex: 1;
    }
    .vis-chat .input .send {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--paper);
        display: grid;
        place-items: center;
        font-size: 11px;
    }

    /* Routines list — monochrome */
    .vis-routines {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .vis-routines .row {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 9px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        color: var(--ink);
    }
    .vis-routines .row .ldot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .vis-routines .row .ldot.purple {
        background: var(--ink);
    }
    .vis-routines .row .ldot.green {
        background: var(--ink-soft);
    }
    .vis-routines .row .ldot.violet {
        background: var(--ink-muted);
    }
    .vis-routines .row span {
        flex: 1;
    }
    .vis-routines .row .pin {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        display: grid;
        place-items: center;
        font-size: 10px;
        font-weight: 600;
    }
    .vis-routines .row .pin.slack {
        background: var(--ink-subtle);
        color: var(--paper);
    }
    .vis-routines .row .pin.gmail {
        background: var(--paper-soft);
        border: 1px solid var(--line-strong);
        color: var(--ink-soft);
    }

    /* Self-learning autonomy card */
    .vis-autonomy {
        display: flex;
        flex-direction: column;
        gap: 14px;
        height: 100%;
    }
    .vis-autonomy .head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .vis-autonomy .head .lbl {
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-muted);
        font-weight: 500;
    }
    .vis-autonomy .head .val {
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--ink);
    }
    .vis-autonomy .head .val sup {
        font-size: 13px;
        color: var(--ink-muted);
        font-weight: 500;
    }
    .vis-autonomy .bars {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 14px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .vis-autonomy .bars .bar {
        height: 12px;
        border-radius: 3px;
        background: var(--ink);
    }
    .vis-autonomy .bars .bar.b1 {
        width: 36px;
    }
    .vis-autonomy .bars .bar.b2 {
        width: 72px;
    }
    .vis-autonomy .bars .week-labels {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: var(--ink-muted);
        margin-top: 6px;
    }
    .vis-autonomy .agent-learnings {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .vis-autonomy .agent-learnings .lbl {
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-muted);
        font-weight: 500;
    }
    .vis-autonomy .agent-learnings .learn {
        background: var(--paper-cool);
        border-radius: 6px;
        padding: 7px 10px;
        font-size: 11px;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .vis-autonomy .agent-learnings .learn .icon {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        background: var(--ink-soft);
        flex-shrink: 0;
    }
    .vis-autonomy .agent-learnings .learn .icon.b {
        background: var(--ink-subtle);
    }

    /* Conversion Tracking event rows */
    .vis-events {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .vis-events .row {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 7px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
    }
    .vis-events .row .icon {
        width: 14px;
        height: 14px;
        border-radius: 3px;
    }
    .vis-events .row .icon.viewed {
        background: var(--ink);
    }
    .vis-events .row .icon.cart {
        background: var(--ink-soft);
    }
    .vis-events .row .icon.checkout {
        background: var(--ink-muted);
    }
    .vis-events .row .icon.purchase {
        background: var(--ink-subtle);
    }
    .vis-events .row span.lbl {
        flex: 1;
        color: var(--ink);
    }
    .vis-events .row .chans {
        display: flex;
        gap: 4px;
    }
    .vis-events .row .chans .c {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        background: var(--paper-cool);
        border: 1px solid var(--line);
        font-size: 8px;
        display: grid;
        place-items: center;
        color: var(--ink-subtle);
        font-weight: 600;
    }
    .vis-events .row .chans .c.meta {
        background: var(--ink-soft);
        color: var(--paper);
        border-color: transparent;
    }
    .vis-events .row .chans .c.goog {
        background: var(--ink-muted);
        color: var(--paper);
        border-color: transparent;
    }
    .vis-events .row .chans .c.tt {
        background: var(--ink);
        color: var(--paper);
        border-color: transparent;
    }

    /* MTA compare row */
    .vis-mta {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 14px 16px;
    }
    .vis-mta .meta {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: var(--ink-soft);
        color: var(--paper);
        font-size: 12px;
        display: grid;
        place-items: center;
        font-weight: 700;
    }
    .vis-mta .label-eb {
        font-size: 10px;
        letter-spacing: 0.14em;
        color: var(--ink-muted);
    }
    .vis-mta .lbl {
        flex: 1;
        font-size: 13px;
        color: var(--ink);
    }
    .vis-mta .val {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
    }
    .vis-mta .badge {
        background: var(--paper-cool);
        color: var(--ink-soft);
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 99px;
        font-weight: 500;
        border: 1px solid var(--line);
    }

    /* Marketing Analytics KPI grid */
    .vis-kpis {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    .vis-kpis .kpi {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 8px 9px;
    }
    .vis-kpis .kpi .k {
        font-size: 8px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-subtle);
        font-weight: 500;
        margin-bottom: 3px;
    }
    .vis-kpis .kpi .v {
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.015em;
    }
    .vis-kpis .kpi.green .v {
        color: var(--ink);
    }

    /* Top of funnel pie */
    .vis-pie {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        height: 100%;
        justify-content: center;
    }
    .vis-pie .head {
        font-size: 11px;
        color: var(--ink-muted);
    }
    .vis-pie .donut {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: conic-gradient(
            var(--ink-soft) 0 22%,
            var(--ink) 22% 27%,
            var(--paper-cool) 27% 100%
        );
        position: relative;
        border: 1px solid var(--line);
    }
    .vis-pie .donut::after {
        content: "+15%";
        position: absolute;
        right: -4px;
        top: 36%;
        background: var(--ink);
        color: var(--paper);
        padding: 3px 8px;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 500;
    }
    .vis-pie .legend {
        display: flex;
        gap: 14px;
        font-size: 11px;
        color: var(--ink-muted);
    }
    .vis-pie .legend span {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .vis-pie .legend .sw {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .vis-pie .legend .sw.t {
        background: var(--ink-soft);
    }
    .vis-pie .legend .sw.o {
        background: var(--ink-subtle);
    }

    /* ===== CONVERGE EFFECT — Mosaic of case studies (ElevenLabs-inspired) =====
     Pill-toggle between Agentic Marketing + Measurement. Each tab shows
     three image tiles in a varied grid plus a few decorative accent tiles.
     Hover scales the focused tile + blurs the rest. */
    section.featured {
        padding: 0;
        background: var(--paper);
    }
    section.featured .container {
        padding-top: 96px;
        padding-bottom: 96px;
    }
    section.featured .modules-head {
        text-align: center;
    }
    section.featured .modules-head h2 {
        font-size: clamp(28px, 3vw, 40px);
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.1;
        color: var(--ink);
        margin: 10px auto 0;
        max-width: 720px;
    }

    /* Pill toggle */
    .case-toggle-wrap {
        display: flex;
        justify-content: center;
        margin: 26px 0 40px;
    }
    .case-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--paper-cool);
        border: 1px solid var(--line);
        border-radius: 99px;
        padding: 4px;
    }
    .ct-btn {
        padding: 9px 22px;
        border: 0;
        background: transparent;
        border-radius: 99px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-muted);
        cursor: pointer;
        transition:
            color 0.25s var(--ease),
            background 0.25s var(--ease),
            box-shadow 0.25s var(--ease);
    }
    .ct-btn:hover {
        color: var(--ink-soft);
    }
    .ct-btn.is-active {
        background: var(--paper);
        color: var(--ink);
        box-shadow:
            0 2px 6px -2px rgba(14, 16, 20, 0.1),
            0 1px 2px rgba(14, 16, 20, 0.04);
    }

    /* Mosaic grid — three content tiles staggered with two accent placeholders.
       Col 1: tile-left (top 75%) + acc-left (bottom 25%)
       Col 2: tile-big spans full height
       Col 3: acc-right (top 25%) + tile-right (bottom 75%)
     Creates the diagonal/staggered rhythm of the ElevenLabs reference. */
    .case-mosaic {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1.4fr 1fr;
        grid-template-rows: repeat(8, 1fr);
        gap: 18px;
        max-width: 1200px;
        margin: 0 auto;
        min-height: 600px;
    }
    /* Agentic layout (default): left tile anchored top, right tile anchored bottom */
    .tile-left {
        grid-column: 1;
        grid-row: 1 / 7;
    }
    .acc-left {
        grid-column: 1;
        grid-row: 7 / 9;
    }
    .tile-big {
        grid-column: 2;
        grid-row: 1 / 9;
    }
    /* acc-right floated DOWN (row 1 left empty); blue tile-right is SHORTER than
     Rove (5/8 rows vs 6/8) so the column reads as a mosaic, not a mirror. */
    .acc-right {
        grid-column: 3;
        grid-row: 2 / 4;
    }
    .tile-right {
        grid-column: 3;
        grid-row: 4 / 9;
    }

    /* Measurement layout — distinctly different proportions from Agentic.
     Side tiles are SHORTER (2 rows tall vs Agentic's 3), accents are
     TALLER (2 rows vs 1), creating a 50/50 split per side column
     instead of the 75/25 split. Reads as a different composition,
     not a mirror. */
    /* Round 8 (Scott): the two Measurement side tiles were too short for the hover
     reveal — give each one extra row (accents shrink to compensate). */
    .case-mosaic[data-tab="measurement"] .acc-left {
        grid-row: 1 / 4;
    }
    .case-mosaic[data-tab="measurement"] .tile-left {
        grid-row: 4 / 9;
    }
    .case-mosaic[data-tab="measurement"] .tile-right {
        grid-row: 1 / 6;
    }
    .case-mosaic[data-tab="measurement"] .acc-right {
        grid-row: 6 / 9;
    }

    /* Content tiles */
    .case-tile {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        text-decoration: none;
        color: var(--paper);
        background-color: var(--paper-cool);
        transition:
            transform 0.55s var(--ease),
            filter 0.55s var(--ease),
            opacity 0.55s var(--ease),
            box-shadow 0.55s var(--ease);
        will-change: transform;
    }
    .case-tile .ct-img {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: opacity 0.4s var(--ease);
    }
    .case-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        /* Top-left wash keeps the white wordmark legible over bright photos. */
        background:
            radial-gradient(
                120% 80% at 0% 0%,
                rgba(14, 16, 20, 0.45) 0%,
                rgba(14, 16, 20, 0.18) 34%,
                rgba(14, 16, 20, 0) 62%
            ),
            linear-gradient(
                180deg,
                rgba(14, 16, 20, 0) 35%,
                rgba(14, 16, 20, 0.78) 100%
            );
        pointer-events: none;
        z-index: 1;
    }
    .case-tile .ct-content {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 22px;
        z-index: 2;
        transition: opacity 0.32s var(--ease);
    }
    /* Metric stack. At rest only the first metric shows (the resting headline
     stat + label); on hover the other two metrics + the case title reveal.
     .ct-content is bottom-anchored, so the reveal grows upward. */
    .case-tile .ct-metrics {
        display: flex;
        flex-direction: column;
    }
    .case-tile .ct-metric {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-height 0.4s var(--ease),
            opacity 0.32s var(--ease),
            margin 0.4s var(--ease);
    }
    .case-tile .ct-metric:first-child {
        max-height: 96px;
        opacity: 1;
    }
    .case-tile .ct-metric-v {
        font-size: clamp(22px, 2.4vw, 32px);
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: var(--paper);
    }
    .case-tile.tile-big .ct-metric-v {
        font-size: clamp(28px, 3vw, 40px);
    }
    .case-tile .ct-metric-l {
        font-size: 13px;
        line-height: 1.3;
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.82);
        font-weight: 500;
    }
    /* Title visible AT REST (Round 10 — Jerome, citing ElevenLabs/Ramp). Hover
     still reveals the other two metrics above it. */
    .case-tile .ct-title {
        max-height: 120px;
        opacity: 1;
        overflow: hidden;
        margin-top: 12px;
        font-size: 17px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 500;
        transition: margin 0.4s var(--ease);
    }
    .case-tile.tile-big .ct-title {
        font-size: 18px;
    }

    /* Reveal on hover (mobile forces this open — see the responsive block). */
    .case-tile:hover .ct-metric {
        max-height: 96px;
        opacity: 1;
    }
    .case-tile:hover .ct-metric + .ct-metric {
        margin-top: 12px;
    }
    .case-tile:hover .ct-title {
        max-height: 120px;
        opacity: 1;
        margin-top: 16px;
    }
    /* Darken the photo further on hover so the fuller text block stays legible. */
    .case-tile:hover::after {
        background: linear-gradient(
            180deg,
            rgba(14, 16, 20, 0) 8%,
            rgba(14, 16, 20, 0.55) 45%,
            rgba(14, 16, 20, 0.9) 100%
        );
    }

    /* Brand wordmark — floats to the tile's top-left, over the photo. Source PNGs
     vary (white/dark/palette); brightness(0) invert(1) flattens any of them to a
     clean white silhouette that reads over the photo. */
    .ct-logo {
        position: absolute;
        top: 22px;
        left: 24px;
        z-index: 2;
        height: 24px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        object-position: left center;
        /* drop-shadow (not a box-shadow) so the glow traces the glyphs themselves —
       a white wordmark on a light patch of photo was disappearing otherwise. */
        filter: brightness(0) invert(1)
            drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
        opacity: 0.95;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
    }
    .case-tile.tile-big .ct-logo {
        top: 26px;
        height: 30px;
        max-width: 210px;
    }

    /* Accent placeholders — flat rounded SQUARES (not full-width strips). Each is
     floated to the inner corner nearest the big centre tile so the pair frames
     it; size + position match the annotated green-box reference (2026-06-18). */
    .case-accent {
        /* Small gray resting tiles. The visible fill is the cool-gray paper; a subtle
       white-glow gradient (white -> gray) is layered per accent below. */
        background: var(--paper-sunken);
        border: 1px solid var(--line);
        border-radius: 16px;
        transition:
            opacity 0.55s var(--ease),
            transform 0.55s var(--ease);
    }
    /* Subtle white gradient over the gray base — the white glow sits in a different
     corner per square for a touch of mosaic variety (no colour, just a soft sheen):
       agentic acc-left = bottom-left, measurement acc-right = bottom-right,
       agentic acc-right = top-right, measurement acc-left = top-left. */
    .case-mosaic[data-tab="agentic"] .acc-left {
        background: radial-gradient(
            70% 70% at 16% 84%,
            var(--paper) 0%,
            var(--paper-sunken) 68%
        );
    }
    .case-mosaic[data-tab="measurement"] .acc-right {
        background: radial-gradient(
            70% 70% at 84% 84%,
            var(--paper) 0%,
            var(--paper-sunken) 68%
        );
    }
    .case-mosaic[data-tab="agentic"] .acc-right {
        background: radial-gradient(
            70% 70% at 84% 16%,
            var(--paper) 0%,
            var(--paper-sunken) 68%
        );
    }
    .case-mosaic[data-tab="measurement"] .acc-left {
        background: radial-gradient(
            70% 70% at 16% 16%,
            var(--paper) 0%,
            var(--paper-sunken) 68%
        );
    }
    /* Measurement — square ~2/3 of the column, floated toward the mosaic's
     horizontal midline + the centre tile: acc-left bottom-right, acc-right top-left. */
    .case-mosaic[data-tab="measurement"] .case-accent {
        width: 68%;
        aspect-ratio: 1 / 1;
    }
    .case-mosaic[data-tab="measurement"] .acc-left {
        justify-self: end;
        align-self: end;
    }
    .case-mosaic[data-tab="measurement"] .acc-right {
        justify-self: start;
        align-self: start;
    }
    /* Agentic — accents sit in single-row bands; size the square to the band
     height and float it horizontally toward the centre tile. */
    .case-mosaic[data-tab="agentic"] .case-accent {
        height: 100%;
        aspect-ratio: 1 / 1;
    }
    .case-mosaic[data-tab="agentic"] .acc-left {
        justify-self: end;
        align-self: end;
    }
    .case-mosaic[data-tab="agentic"] .acc-right {
        justify-self: start;
        align-self: start;
    }

    /* Hover focus — just a soft scale-up + lift shadow on the hovered tile.
     Other tiles + accents stay fully visible. */
    .case-tile:hover {
        transform: scale(1.025);
        z-index: 3;
        box-shadow: 0 24px 60px -28px rgba(14, 16, 20, 0.45);
    }

    /* Dither placeholder tile — the warm (agentic) "chapter" gradient stands in
     for a not-yet-built case study. The dither lives on the .ct-img layer so it
     crossfades like any photo during a tab morph; the tile-level .is-dither just
     drops the scrim, content, and interactivity. Direct-child selectors (>) so
     the rules never reach the cloned old layer inside a .ct-fade overlay. */
    .case-tile.is-dither {
        cursor: default;
    }
    .case-tile.is-dither:hover {
        transform: none;
        box-shadow: none;
        z-index: auto;
    }
    .case-tile.is-dither::after {
        display: none;
    }
    .case-tile.is-dither > .ct-content {
        display: none;
    }
    .ct-img.is-dither.dither-warm {
        background:
            radial-gradient(
                ellipse 70% 60% at 22% 78%,
                #e8744a 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 60% 60% at 80% 80%,
                #d4a45c 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 80% 70% at 20% 18%,
                #a89cc4 0%,
                transparent 60%
            ),
            radial-gradient(
                ellipse 70% 50% at 80% 15%,
                #c89880 0%,
                transparent 55%
            ),
            linear-gradient(160deg, #b3a4c8 0%, #d49870 55%, #b88858 100%);
    }
    .ct-img.is-dither.dither-blue {
        background:
            radial-gradient(
                ellipse 90% 80% at 85% -5%,
                rgba(244, 248, 252, 0.6) 0%,
                rgba(205, 217, 232, 0.3) 30%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 70% 50% at 40% 60%,
                #8aa2c0 0%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 100% 55% at 50% 105%,
                #3c5070 0%,
                transparent 62%
            ),
            linear-gradient(175deg, #a8bcd6 0%, #7890b0 50%, #51647f 100%);
    }
    .ct-img.is-dither::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        background-size: 180px 180px;
        mix-blend-mode: overlay;
        opacity: 0.85;
        pointer-events: none;
    }

    /* Tab morph = direct image-to-image crossfade (no blank gap). On swap, each
     tile's current visual is cloned into a .ct-fade overlay shown on top; the
     new visual is applied to the base underneath; then the overlay dissolves out
     while the FLIP transform morphs the rectangles — so the imagery appears to
     morph into the next tab rather than fade out and back in. */
    .ct-fade {
        position: absolute;
        inset: 0;
        z-index: 4;
        border-radius: inherit;
        overflow: hidden;
        opacity: 1;
        pointer-events: none;
        transition: opacity 680ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ct-fade .ct-img {
        z-index: 0;
    }
    .ct-fade .ct-content {
        z-index: 2;
        opacity: 1;
    }
    .ct-fade.has-scrim::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            180deg,
            rgba(14, 16, 20, 0) 35%,
            rgba(14, 16, 20, 0.78) 100%
        );
        pointer-events: none;
    }

    /* ===== QUOTE band — centered quote + small avatar attribution =====
     Pushed-out vertical padding gives the H&H wordmark watermarks room to
     sit upper-left + lower-right behind the quote without crowding it. */
    section.quote-band {
        padding: 0;
        background: var(--paper);
        margin-top: -104px;
    }
    section.quote-band .container {
        padding-top: 200px;
        padding-bottom: 200px;
        position: relative;
        /* No overflow clipping — watermarks can extend past the band into the
       adjacent rail lines. Looks intentional, prevents the edge cropping
       we'd otherwise get at larger sizes. */
    }
    .quote-center {
        max-width: 880px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .quote-center blockquote {
        margin: 0;
        font-size: clamp(28px, 3.4vw, 44px);
        line-height: 1.18;
        letter-spacing: -0.025em;
        font-weight: 500;
        color: var(--ink);
        max-width: 820px;
    }
    /* Color comes from the highlight-gradient rule (--grad-verdant clipped to
     the glyphs); only the weight is set here. */
    .quote-center blockquote b {
        font-weight: 600;
    }

    /* H&H wordmark watermarks.
     - Rendered as <div>s (not <img>s) so we can tint via background-color
       (cool zinc-leaning gray, matches the rest of the system) instead of
       a brightness(0) crush which read as neutral/warm at low opacity.
     - Two mask layers per watermark, composited via mask-composite:
       `intersect` so the watermark only shows where BOTH the wordmark PNG
       AND a radial gradient are opaque. The radial gradient anchors at the
       inner corner (the corner pointing at the quote), so letters near the
       quote (right side of "hims", lower-left of "hers") fade to ~white
       while the outer letters stay visible. */
    .quote-watermark {
        position: absolute;
        width: clamp(380px, 42vw, 620px);
        background-color: var(--ink-muted);
        -webkit-mask-repeat: no-repeat, no-repeat;
        mask-repeat: no-repeat, no-repeat;
        -webkit-mask-size:
            contain,
            100% 100%;
        mask-size:
            contain,
            100% 100%;
        -webkit-mask-position: center, center;
        mask-position: center, center;
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 1.4s var(--ease),
            transform 1.4s var(--ease);
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }
    .quote-band.is-revealed .quote-watermark {
        opacity: 0.1;
        transform: translateY(0);
    }
    .quote-band.is-revealed .quote-watermark.is-bl {
        transition-delay: 0.25s;
    }

    /* hims — lower-left; inner corner is top-right of the wordmark. Radial
     fade anchored there dims the M/S that sit nearest the quote. */
    .quote-watermark.is-bl {
        bottom: 12%;
        left: 3%;
        aspect-ratio: 2378 / 872;
        -webkit-mask-image:
            url("/_astro/hims.E6oSJwgb.png"),
            radial-gradient(
                ellipse 145% 280% at 100% 0%,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 1) 88%
            );
        mask-image:
            url("/_astro/hims.E6oSJwgb.png"),
            radial-gradient(
                ellipse 145% 280% at 100% 0%,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 1) 88%
            );
    }
    /* hers — upper-right; inner corner is bottom-left of the wordmark. */
    .quote-watermark.is-tr {
        top: 4%;
        right: 3%;
        aspect-ratio: 2409 / 1056;
        -webkit-mask-image:
            url("/_astro/hers.DDF7uojp.png"),
            radial-gradient(
                ellipse 145% 280% at 0% 100%,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 1) 88%
            );
        mask-image:
            url("/_astro/hers.DDF7uojp.png"),
            radial-gradient(
                ellipse 145% 280% at 0% 100%,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 1) 88%
            );
    }

    /* Felix attribution row — mirrors the production runconverge.com layout:
     avatar | name + role | vertical divider | Hims & Hers wordmark.
     The wordmark sits alongside the name (not under it) so the H&H
     affiliation reads at the same hierarchy as Felix himself. */
    .quote-cite {
        display: inline-flex;
        align-items: center;
        gap: 18px;
        text-align: left;
    }
    .quote-cite .avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--paper-cool);
        border: 1px solid var(--line);
        flex-shrink: 0;
    }
    .quote-cite .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
    }
    .quote-cite .meta {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        line-height: 1.4;
    }
    .quote-cite .meta b {
        color: var(--ink);
        font-weight: 600;
        font-size: 15px;
    }
    .quote-cite .meta .role {
        color: var(--ink-muted);
    }
    /* Vertical hairline separating Felix's text from the H&H wordmark. */
    .quote-cite .divider {
        width: 1px;
        height: 36px;
        background: var(--line-strong);
        flex-shrink: 0;
    }
    /* Hims & Hers wordmark — the actual brand mark, matched in height to the
     name + role stack so it reads as a co-attribution. */
    .quote-cite .brand-mark {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .quote-cite .brand-mark img {
        height: 26px;
        width: auto;
        display: block;
    }

    @media (max-width: 880px) {
        /* Symmetric padding — the shallow 60px top let the quote crowd the "hers"
       watermark pinned to the band's upper-right. */
        section.quote-band .container {
            padding-top: 120px;
            padding-bottom: 120px;
        }
        .quote-center {
            gap: 32px;
        }
        .quote-center blockquote {
            font-size: 24px;
        }
        .quote-watermark {
            width: clamp(240px, 65vw, 380px);
        }
        .quote-band.is-revealed .quote-watermark {
            opacity: 0.08;
        }
        .quote-watermark.is-bl {
            bottom: 10%;
            left: 4%;
        }
        .quote-watermark.is-tr {
            top: 3%;
            right: 4%;
        }
    }

    /* ===== CTA band ===== */
    section.cta-band {
        padding: 0;
        background: var(--paper);
        position: relative;
        /* Do NOT put a z-index here. This section is `.no-hatch`, and that mask
       (section.no-hatch::after, z-index 2) is what covers the body hatch in the
       outer margins. A z-index here makes the section a stacking context, which
       traps the mask inside it — the whole section then ties with body::after
       (also z-index 1) and loses on tree order, so the hatch paints straight
       back over the right margin. Round 12. */
    }
    section.cta-band .container {
        padding-top: 96px;
        padding-bottom: 96px;
    }
    /* Soft radial backdrop in a child element so it doesn't conflict with
     either the section::before divider or the container::after corner dot. */
    .cta-bg {
        position: absolute;
        inset: 0;
        /* Corner-anchored wash: top-right (grad-3) + bottom-left (grad-2), never
       centred. Shared verbatim with the interior CTA (.cs-cta-bg). */
        background:
            radial-gradient(
                820px 520px at 100% 0%,
                var(--grad-3),
                transparent 72%
            ),
            radial-gradient(
                820px 520px at 0% 100%,
                var(--grad-2),
                transparent 72%
            );
        pointer-events: none;
        z-index: 0;
    }
    section.cta-band .cta-inner {
        position: relative;
        z-index: 1;
    }
    .cta-inner {
        position: relative;
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
    }
    .cta-inner h2 {
        margin: 0 0 16px;
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 600;
        letter-spacing: -0.035em;
        line-height: 1.04;
        color: var(--ink);
    }
    /* .accent color is owned by the highlight-gradient rule above. */
    .cta-inner p {
        font-size: 19px;
        color: var(--ink-muted);
        margin: 0 0 28px;
    }
    .cta-inner .row {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    /* ===== responsive ===== */
    @media (max-width: 960px) {
        .container {
            padding-left: 24px;
            padding-right: 24px;
        }
        /* Mosaic — collapse accent columns + stack tiles vertically on mobile */
        .case-mosaic {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            min-height: 0;
        }
        .case-mosaic .case-accent {
            display: none;
        }
        /* Drop the dithered placeholder tile (the blue/warm "not-yet-built" stand-in)
       on mobile — keep it on desktop. Real case studies only on small screens. */
        .case-mosaic .case-tile.is-dither {
            display: none;
        }
        /* Stack every tile full-width regardless of tab. The [data-tab] attribute
       matches the specificity of the desktop per-tab grid-row rules (e.g.
       [data-tab="measurement"] .tile-left { grid-row: 4 / 9 }) — without it
       those win on the Measurement tab and the tiles pile onto each other.
       Landscape ratio: with a single KPI + title the tall portrait isn't
       needed, so tiles read shorter and the section scrolls faster. */
        .case-mosaic[data-tab] .tile-left,
        .case-mosaic[data-tab] .tile-big,
        .case-mosaic[data-tab] .tile-right {
            grid-column: 1;
            grid-row: auto;
            aspect-ratio: 3 / 2;
        }
        /* No hover on touch — show ONLY the headline KPI + the case title.
       The two secondary metrics stay desktop-hover-only. */
        .case-tile .ct-metric:first-child {
            max-height: 96px;
            opacity: 1;
        }
        .case-tile .ct-metric + .ct-metric {
            display: none;
        }
        /* One copy spec for every tile — the big-tile (Proper Cloth) sizes. The
       .case-mosaic prefix outranks the desktop .case-tile.tile-big variants so
       side tiles don't render smaller than the centre one. */
        .case-mosaic .case-tile .ct-metric-v {
            font-size: 28px;
        }
        .case-mosaic .case-tile .ct-title {
            max-height: 140px;
            opacity: 1;
            margin-top: 12px;
            font-size: 18px;
        }
        .case-tile::after {
            background: linear-gradient(
                180deg,
                rgba(14, 16, 20, 0) 8%,
                rgba(14, 16, 20, 0.55) 45%,
                rgba(14, 16, 20, 0.9) 100%
            );
        }
        .modules-item-grid {
            grid-template-columns: 1fr;
            padding: 36px 0;
        }
        .modules-title {
            padding: 56px 0 64px;
        }
        .item-copy {
            max-width: none;
        }
    }

    /* Proof grid — mobile: swap the interactive 7-col grid for the rotating
     quadrant carousel (headline row above four-logo 2×2 panels). */
    @media (max-width: 800px) {
        .proof-grid {
            display: none;
        }
        .proof-mobile {
            display: block;
            padding: 8px;
            background: var(--paper-cool);
        }
        .proof-cell.head {
            grid-column: 1 / -1;
            grid-row: auto;
            aspect-ratio: auto;
            padding: 22px 20px 18px;
        }
        .proof-cell.head h2 {
            font-size: 17px;
        }
    }

    @media (max-width: 600px) {
        /* Testimonial: stack the attribution — avatar + name/role on one row,
       Hims & Hers wordmark dropped below (divider becomes a full-width break). */
        .quote-cite {
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px 14px;
        }
        .quote-cite .divider {
            flex-basis: 100%;
            width: 0;
            height: 0;
            background: none;
            margin: 0;
        }
        .quote-cite .brand-mark {
            margin-top: 2px;
        }
    }

    @media (max-width: 520px) {
        .container {
            padding-left: 16px;
            padding-right: 16px;
        }
        .msticky {
            padding-left: 16px;
            padding-right: 16px;
        }
        .nav-inner {
            padding-left: 16px;
            padding-right: 16px;
        }
        .nav ul {
            display: none;
        }
        .proof-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }