/* ============================================================
   Valcat — Proof page
   Extends the shared design system in ../styles.css.
   No token is redefined here; only page-local additions.
   ============================================================ */

:root {
    --proof-border: #E7E9EE;
    --proof-border-strong: #D8DBE3;
    --proof-surface: #FFFFFF;
    --proof-radius: 14px;
    --proof-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 12px rgba(17, 24, 39, .04);
    --proof-shadow-lift: 0 2px 4px rgba(17, 24, 39, .05), 0 14px 32px rgba(17, 24, 39, .10);
    --proof-purple-tint: #F6F2FE;

    /* ---- motion design system ----------------------------------------
       One easing/duration vocabulary for the whole page.
         entrance  : decelerated, unhurried
         interact  : fast, responsive
         modal     : confident
         ambient   : slow, linear, never draws the eye              */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --ease-entrance: cubic-bezier(.16, .84, .44, 1);
    --ease-exit: cubic-bezier(.5, 0, .75, 0);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --dur-fast: .18s;
    --dur-interact: .28s;
    --dur-entrance: .62s;
    --dur-modal: .42s;

    --stagger: 70ms;
}

/* ---------- shared atoms ---------- */

.eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--magic-purple);
    margin-bottom: 1.25rem;
}

.accent {
    color: var(--magic-purple);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-ligatures: none;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0E7C5A;
    background: #ECFDF5;
    border: 1px solid #C9EFE0;
    border-radius: 999px;
    padding: .2rem .55rem;
    white-space: nowrap;
}

.verified-badge svg {
    width: 10px;
    height: 10px;
    flex: none;
}

/* ---------- ambient texture ----------
   Extremely low contrast. Never competes with content. */

.proof-hero,
.open-doors {
    position: relative;
}

/* faint grain, drawn once as an inline SVG turbulence */
.proof-hero::after,
.open-doors::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.proof-hero > .container,
.open-doors > .container,
.open-doors > .logo-wall {
    position: relative;
    z-index: 1;
}

/* Respect reduced-motion globally on this page.
   Everything still *arrives* — it just arrives instantly, in final state. */
@media (prefers-reduced-motion: reduce) {

    .proof-card,
    .logo-chip,
    .reveal,
    .proof-modal,
    .proof-modal__panel,
    [data-intro] [data-intro-step],
    [data-intro] .hero-headline .line-inner,
    .proof-shot__base,
    .proof-shot__quote,
    .trust-strip__line .line-inner,
    .trust-strip__domain,
    .cta-chain li,
    .marquee-row,
    .stream__frag,
    .stream__quote {
        transition: none !important;
        animation: none !important;
    }

    /* Anything whose resting state is hidden must be forced visible here,
       or killing its animation would hide it permanently. */
    [data-intro] [data-intro-step],
    .hero-headline .line-inner,
    .reveal,
    .trust-strip__line .line-inner,
    .trust-strip__domain,
    .cta-chain li,
    .marquee-row,
    .proof-card,
    .proof-metric,
    .signal__label {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }

    /* belts hold still; the row scrolls by hand instead */
    .marquee-row {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    /* the ambient stream has no still form worth showing */
    .stream {
        display: none !important;
    }

    .cta-arrow {
        animation: none !important;
    }
}

/* ---------- scroll reveal ---------- */

.anim .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-entrance) var(--ease-entrance),
                transform var(--dur-entrance) var(--ease-entrance);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- scroll progress ---------- */

.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 1200;
    pointer-events: none;
    background: transparent;
}

.scroll-progress i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--gradient-magic);
    transform: scaleX(0);
    transform-origin: 0 50%;
    /* set by JS on scroll; transform-only so it never triggers layout */
}

/* ============================================================
   HERO — staged intro
   ============================================================ */

/* The intro is pure CSS and self-starting. Nothing here waits on JS or on
   requestAnimationFrame — rAF is throttled in background tabs, and gating
   visibility on it would leave the hero permanently blank for anyone who
   opens the page in one. `both` holds the final frame. */
[data-intro] [data-intro-step] {
    animation: intro-rise var(--dur-entrance) var(--ease-entrance) both;
}

[data-intro] [data-intro-step="1"] { animation-delay: 0ms; }
[data-intro] [data-intro-step="2"] { animation-delay: 110ms; }
[data-intro] [data-intro-step="3"] { animation-delay: 220ms; }
[data-intro] [data-intro-step="4"] { animation-delay: 400ms; }
[data-intro] [data-intro-step="5"] { animation-delay: 520ms; }
[data-intro] [data-intro-step="6"] { animation-delay: 700ms; }

@keyframes intro-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.hero-headline {
    font-size: clamp(2.25rem, 5.2vw, 3.75rem);
    max-width: 18ch;
    margin: 0 auto 1.5rem;
}

/* Each line is a mask; .line-inner slides up out of it. */
.hero-headline .line {
    display: block;
    overflow: hidden;
    padding-bottom: .08em;
}

[data-intro] .hero-headline .line-inner {
    display: block;
}

/* The mask itself must stay visible — only its inner span travels. */
[data-intro] .hero-headline .line {
    animation: none;
    opacity: 1;
}

[data-intro] .hero-headline .line-inner {
    animation: line-rise .8s var(--ease-entrance) both;
}

[data-intro] .line[data-intro-step="2"] .line-inner { animation-delay: 110ms; }
[data-intro] .line[data-intro-step="3"] .line-inner { animation-delay: 240ms; }

@keyframes line-rise {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* second line arrives with a touch more travel and a blur resolve */
[data-intro] .hero-headline .line:nth-child(2) .line-inner {
    animation-name: line-rise-accent;
}

@keyframes line-rise-accent {
    from {
        opacity: 0;
        transform: translateY(110%) scale(.985);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* metric tiles stagger within their own container */
/* tiles are JS-built, so their index comes from JS; the delay still runs
   without any is-ready gate */
[data-intro] .proof-metrics .proof-metric {
    animation: intro-rise .55s var(--ease-entrance) both;
    animation-delay: calc(620ms + var(--i, 0) * 90ms);
}

/* CTA arrow: a slow, finite nudge — not a permanent pulse */
.proof-hero__cta .cta-arrow {
    width: 13px;
    height: 15px;
    flex: none;
    animation: cta-nudge 2.6s var(--ease) infinite;
}

@keyframes cta-nudge {
    0%, 68%, 100% { transform: translateY(0); }
    78%           { transform: translateY(3px); }
    88%           { transform: translateY(0); }
}

.proof-hero__cta:hover .cta-arrow {
    animation-play-state: paused;
    transform: translateY(3px);
    transition: transform var(--dur-interact) var(--ease);
}

/* ============================================================
   REPLY SIGNAL
   ============================================================ */

.signal {
    padding: 0 0 1rem;
    background: var(--bg-white);
}

.signal__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
}

/* the rail the signal travels along */
.signal__track::before,
.signal__track::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
}

.signal__track::before {
    background: var(--proof-border);
}

.signal__track::after {
    background: var(--magic-purple);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.05s var(--ease) .15s;
}

.signal__track.is-live::after {
    transform: scaleX(1);
}

.signal__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.signal__dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg-white);
    border: 1.5px solid var(--proof-border-strong);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.signal__dot::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--magic-purple);
    transform: scale(0);
    transition: transform .32s var(--ease-spring);
}

.signal__stage.is-on .signal__dot {
    border-color: var(--magic-purple);
}

.signal__stage.is-on .signal__dot::after {
    transform: scale(1);
}

/* final stage resolves to a tick rather than a dot */
.signal__stage.is-done .signal__dot {
    background: var(--magic-purple);
    border-color: var(--magic-purple);
}

.signal__stage.is-done .signal__dot::after {
    background: transparent;
    inset: 0;
    transform: scale(1);
    border-radius: 0;
    /* small white check drawn with two borders */
    box-shadow: none;
    background-image:
        linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
        linear-gradient(-45deg, transparent 60%, #fff 60%, #fff 72%, transparent 72%);
    background-size: 7px 2px, 4px 2px;
    background-position: 4px 6px, 2px 5px;
    background-repeat: no-repeat;
}

.anim .signal__label {
    opacity: 0;
    transform: translateY(5px);
}

.signal__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .4s var(--ease);
}

.signal__stage.is-on .signal__label {
    opacity: 1;
    transform: none;
}

.signal__stage.is-done .signal__label {
    color: var(--text-gray);
}

/* ============================================================
   1. HERO
   ============================================================ */

.proof-hero {
    padding: 6rem 0 4rem;
    text-align: center;
    background:
        radial-gradient(60% 70% at 50% 0%, var(--proof-purple-tint) 0%, rgba(255, 255, 255, 0) 70%),
        var(--bg-white);
}

.proof-hero h1 {
    font-size: clamp(2.25rem, 5.2vw, 3.75rem);
    max-width: 18ch;
    margin: 0 auto 1.5rem;
}

.proof-hero__lead {
    max-width: 60ch;
    margin: 0 auto 3rem;
    font-size: 1.125rem;
    color: var(--text-gray);
}

/* metrics */

.proof-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
    margin: 0 auto 2.75rem;
    border: 1px solid var(--proof-border);
    border-radius: var(--proof-radius);
    background: var(--proof-surface);
    box-shadow: var(--proof-shadow);
    overflow: hidden;
}

.proof-metric {
    padding: 1.75rem 1rem;
    border-right: 1px solid var(--proof-border);
}

.proof-metric:last-child {
    border-right: none;
}

/* Word-based claims, not figures — sized for phrases rather than numerals. */
.proof-metric__value {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--text-dark);
}

.proof-metric__label {
    margin: .4rem 0 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--text-light);
}

.proof-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ============================================================
   2. FEATURED PROOF — asymmetric grid
   ============================================================ */

.section-head {
    max-width: 60ch;
    margin-bottom: 3rem;
}

.section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head h2 {
    color: var(--text-dark);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    margin-bottom: .75rem;
}

.section-head p {
    margin-bottom: 0;
    font-size: 1.0625rem;
}

/* ---------- editorial section heading ---------- */

.open-doors {
    padding: 7rem 0 6rem;
    background: var(--bg-white);
    overflow: hidden;
}

.open-doors__head {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 4.5rem;
}

/* Large, light, letter-spaced — editorial rather than marketing.
   "OPEN DOORS" carries the weight. */
.open-doors__title {
    font-size: clamp(1.5rem, 4.2vw, 3rem);
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.15;
    color: var(--text-dark);
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.open-doors__title strong {
    font-weight: 700;
}

.open-doors__sub {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0;
}

/* ---------- ClientLogoWall / LogoMarqueeRow ---------- */

.logo-wall {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* fade the ends so rows dissolve rather than clip */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee-row {
    display: flex;
    overflow: hidden;
}

/* rows slide in one after another when the section arrives */
.anim .marquee-row {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--ease-entrance), transform .7s var(--ease-entrance);
    transition-delay: calc(var(--row, 0) * 130ms);
}

.logo-wall.is-in .marquee-row {
    opacity: 1;
    transform: none;
}

/* Rows breathe at slightly different spacing so the wall doesn't read as a
   grid. --gap MUST feed both gap and padding-right: the -50% loop is only
   seamless while they are equal. */
.marquee-row:nth-child(2) .marquee-track { --gap: 1.75rem; }
.marquee-row:nth-child(3) .marquee-track { --gap: 1.5rem; }

.marquee-track {
    --gap: 1.25rem;
    display: flex;
    flex: none;
    gap: var(--gap);
    /* padding-right must equal --gap; see the note on .marquee-row */
    padding-right: var(--gap);
    /* translate exactly one copy's width — the track holds two identical
       copies, so the reset is invisible */
    animation: marquee var(--speed, 60s) linear infinite;
    will-change: transform;
}

/* Offscreen rows stop consuming compositor time (toggled by JS). */
.marquee-row.is-idle .marquee-track {
    animation-play-state: paused;
}

.marquee-row--reverse .marquee-track {
    animation-direction: reverse;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* pause only the hovered row */
.marquee-row:hover .marquee-track,
.marquee-row:focus-within .marquee-track {
    animation-play-state: paused;
}

.logo-chip {
    display: grid;
    place-items: center;
    flex: none;
    width: 210px;
    height: 96px;
    padding: 1rem 1.5rem;
    background: var(--proof-surface);
    border: 1px solid var(--proof-border);
    border-radius: var(--proof-radius);
    font: inherit;
    cursor: pointer;
    opacity: .72;
    transition: opacity .3s var(--ease), transform .3s var(--ease),
                box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.logo-chip:hover,
.logo-chip:focus-visible {
    opacity: 1;
    transform: scale(1.04);
    box-shadow: var(--proof-shadow-lift);
    border-color: var(--magic-purple-light);
    background: linear-gradient(180deg, #fff 0%, var(--proof-purple-tint) 100%);
}

/* The rest of the hovered row softens so the pick becomes the subject. */
.marquee-row:hover .logo-chip:not(:hover) {
    opacity: .34;
}

/* Floating label on hover */
.logo-chip__peek {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    white-space: nowrap;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    background: var(--text-dark);
    border-radius: 999px;
    padding: .35rem .7rem;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.logo-chip {
    position: relative;
}

.logo-chip:hover .logo-chip__peek,
.logo-chip:focus-visible .logo-chip__peek {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---- "opening the door" ----------------------------------------------
   The chosen chip lifts and its panel splits outward, then the modal takes
   over. Purely transform/opacity so it stays on the compositor.          */
.logo-chip.is-opening {
    z-index: 4;
    animation: door-lift 380ms var(--ease-entrance) forwards;
}

@keyframes door-lift {
    0%   { transform: scale(1.04); }
    45%  { transform: scale(1.13); }
    100% { transform: scale(1.06); opacity: .0; }
}

.logo-chip.is-opening::before,
.logo-chip.is-opening::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: var(--proof-surface);
    border: 1px solid var(--magic-purple-light);
    z-index: -1;
}

.logo-chip.is-opening::before {
    left: 0;
    border-right: none;
    border-radius: var(--proof-radius) 0 0 var(--proof-radius);
    animation: door-left 380ms var(--ease-entrance) forwards;
}

.logo-chip.is-opening::after {
    right: 0;
    border-left: none;
    border-radius: 0 var(--proof-radius) var(--proof-radius) 0;
    animation: door-right 380ms var(--ease-entrance) forwards;
}

@keyframes door-left {
    from { transform: translateX(0) }
    to   { transform: translateX(-38%) }
}

@keyframes door-right {
    from { transform: translateX(0) }
    to   { transform: translateX(38%) }
}

/* real logo, when one has been supplied.
   Definite box, not max-* only: the chip is a centred grid, so an image with
   no intrinsic size would collapse to 0x0 before it loads. */
.logo-chip__img {
    width: 100%;
    height: 52px;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1) contrast(.9);
    transition: filter .3s var(--ease);
}

/* squarish marks get more height so they read at the same optical weight
   as the wide wordmarks beside them (class set on load in proof.js) */
.logo-chip__img--mark {
    height: 64px;
}

/* ---- per-logo optical tuning ----
   Desaturating a set of marks drawn at different weights does not leave them
   equally legible. These are hand-corrected so no company reads as faded.
   Keyed by data-slug, set in LogoChip. */

/* light-grey source artwork — nearly vanishes at contrast(.9) */
.logo-chip__img[data-slug="delhivery"] {
    filter: grayscale(1) brightness(.45) contrast(1.7);
}

.logo-chip:hover .logo-chip__img[data-slug="delhivery"] {
    filter: brightness(.92);
}

/* heavy solid marks — pulled back so they don't dominate the row */
.logo-chip__img[data-slug="patreon"],
.logo-chip__img[data-slug="yext"] {
    filter: grayscale(1) contrast(.75) opacity(.82);
}

.logo-chip:hover .logo-chip__img[data-slug="patreon"],
.logo-chip:hover .logo-chip__img[data-slug="yext"] {
    filter: none;
}

/* The wordmark fallback sits beside real logos, so it has to read as a
   deliberate typographic mark rather than leftover text. */
.logo-chip__word {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text-gray);
}

.logo-chip:hover .logo-chip__img {
    filter: none;
}

/* typographic wordmark — used until a real logo asset is added */
.logo-chip__word {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    text-align: center;
    color: var(--text-gray);
    transition: color .3s var(--ease);
}

.logo-chip:hover .logo-chip__word {
    color: var(--text-dark);
}

.logo-chip__count {
    display: block;
    margin-top: .25rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--magic-purple);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.logo-chip:hover .logo-chip__count {
    opacity: 1;
}

/* Trademark notice + the CC attribution the licences require. Deliberately
   quiet — present and readable, never a design element. */
.logo-wall__note {
    margin: 2.5rem auto 0;
    max-width: 62ch;
    text-align: center;
    font-size: .6875rem;
    line-height: 1.6;
    color: var(--text-light);
}

.logo-wall__attrib {
    display: block;
    margin-top: .35rem;
    opacity: .8;
}

.logo-wall__note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.logo-wall__note a:hover {
    color: var(--magic-purple);
}

/* reduced motion: stop the belt, let people scroll it by hand */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }

    .marquee-row {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

/* ============================================================
   3. TRUST STRIP
   ============================================================ */

/* The page's thesis, and the one section that should stop you scrolling.
   It earns that by carrying evidence — the real domains that replied — not
   by acquiring gradients. One radial, one grain, one accent word. */

.trust-strip {
    position: relative;
    overflow: hidden;
    background: var(--text-dark);
    color: #fff;
    padding: 7rem 0 5.5rem;
}

/* a single soft purple bloom behind the headline */
.trust-strip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10%;
    width: min(900px, 90%);
    height: 70%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(ellipse at center,
            rgba(132, 94, 247, .17) 0%, rgba(132, 94, 247, 0) 68%);
}

/* Same turbulence source as the hero and logo wall — but that grain is BLACK,
   which is invisible on #111827. `overlay` lets it lighten as well as darken,
   so the texture actually reads without having to crank opacity (which would
   mottle the headline). */
.trust-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.trust-strip__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* verified-badge geometry, inverted for the dark ground */
.trust-strip__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6EE7B7;
    background: rgba(110, 231, 183, .09);
    border: 1px solid rgba(110, 231, 183, .22);
    border-radius: 999px;
    padding: .3rem .7rem;
    margin-bottom: 1.75rem;
}

.trust-strip__chip svg {
    width: 10px;
    height: 10px;
    flex: none;
}

.trust-strip__line {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    margin: 0 0 1.5rem;
    max-width: 20ch;
}

/* --magic-purple is ~3.7:1 on #111827 — fine for display type, thin for
   anything smaller. The lighter token reads properly on the dark ground. */
.trust-strip .accent {
    color: var(--magic-purple-light);
}

/* reuses the hero's mask so each clause rises independently */
.trust-strip__line .line {
    display: block;
    overflow: hidden;
    padding-bottom: .06em;
}

.trust-strip__line .line-inner {
    display: block;
}

.anim .trust-strip.is-in .trust-strip__line .line-inner {
    animation: line-rise .8s var(--ease-entrance) both;
}

.anim .trust-strip.is-in .line:nth-child(2) .line-inner {
    animation-delay: 130ms;
}

.trust-strip__sub {
    color: rgba(255, 255, 255, .58);
    margin: 0;
    max-width: 46ch;
    font-size: 1rem;
}

/* ---- the ledger ----
   The domains that actually replied. Texture first, readable second — it
   should register as evidence sitting under the claim, not as a link list. */

.trust-strip__ledger {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1.6rem;
    max-width: 1000px;
    margin: 3.5rem auto 0;
    padding: 2.25rem 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .35));
    mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .35));
}

.trust-strip__domain {
    font-size: .75rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .3);
    white-space: nowrap;
}

.anim .trust-strip__domain {
    opacity: 0;
}

.trust-strip.is-in .trust-strip__domain {
    animation: intro-rise .5s var(--ease-entrance) both;
    animation-delay: calc(340ms + var(--i, 0) * 40ms);
}

@media (max-width: 768px) {
    .trust-strip {
        padding: 4.5rem 0 3.5rem;
    }

    /* 24 domains wrap to 11 rows at 375px — a wall of small text and 866px
       of banner. Twelve keeps it as texture rather than a list; the full set
       is on the cards below either way. */
    .trust-strip__domain:nth-child(n+13) {
        display: none;
    }

    .trust-strip__ledger {
        gap: .4rem 1.1rem;
        margin-top: 2.5rem;
        padding-top: 1.75rem;
    }
}

/* ============================================================
   3b. THE PLAY — outbound beside the reply it earned
   ============================================================ */

.plays {
    padding: 6rem 0;
    background: var(--bg-white);
}

/* ---- tab rail ---- */

.play-rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

.play-tab {
    display: grid;
    place-items: center;
    width: 124px;
    height: 60px;
    padding: .6rem .9rem;
    background: var(--proof-surface);
    border: 1px solid var(--proof-border);
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
    opacity: .55;
    transition: opacity var(--dur-interact) var(--ease),
                border-color var(--dur-interact) var(--ease),
                box-shadow var(--dur-interact) var(--ease);
}

.play-tab:hover {
    opacity: .85;
}

.play-tab[aria-selected="true"] {
    opacity: 1;
    border-color: var(--magic-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 247, .12);
}

.play-tab__img {
    width: 100%;
    height: 30px;
    object-fit: contain;
    filter: grayscale(1);
}

.play-tab[aria-selected="true"] .play-tab__img {
    filter: none;
}

.play-tab__word {
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: var(--text-gray);
}

/* ---- the pair ---- */

.play-stage {
    max-width: 1000px;
    margin: 0 auto;
}

.play-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1.25rem;
}

.play-pair__arrow {
    align-self: center;
    color: var(--proof-border-strong);
}

.play-pair__arrow svg {
    width: 26px;
    height: 13px;
    display: block;
}

.play-msg {
    display: flex;
    flex-direction: column;
    background: var(--proof-surface);
    border: 1px solid var(--proof-border);
    border-radius: var(--proof-radius);
    box-shadow: var(--proof-shadow);
    overflow: hidden;
}

/* The outbound is ours, so it is NOT evidence — it stays entirely neutral and
   never carries a verified badge. Only the reply is third-party verifiable,
   and it gets the page's existing green "verified" coding. Purple stays
   reserved for interaction. */
.play-msg--in {
    border-left: 3px solid #0E7C5A;
}

.play-msg__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--proof-border);
    background: var(--bg-gray);
}

.play-msg--in .play-msg__bar {
    background: #F3FBF7;
}

.play-msg__label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.play-msg--in .play-msg__label {
    color: #0E7C5A;
}

.play-msg__chip {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light);
    border: 1px solid var(--proof-border-strong);
    border-radius: 999px;
    padding: .15rem .5rem;
    white-space: nowrap;
}

.play-msg__hdr {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.15rem 0;
    font-size: .8125rem;
}

.play-msg__subject {
    font-weight: 600;
    color: var(--text-dark);
}

.play-msg__date {
    color: var(--text-light);
    white-space: nowrap;
}

/* Body copy, not code — these are emails. Inter, never mono. */
.play-msg__bd {
    padding: 1.15rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-gray);
}

.play-msg--in .play-msg__bd {
    color: var(--text-dark);
    font-weight: 500;
}

.play-msg__bd p {
    font-size: inherit;
    color: inherit;
    margin: 0 0 .75rem;
}

.play-msg__bd p:last-child {
    margin-bottom: 0;
}

.play-msg__note {
    margin: 0;
    padding: 0 1.15rem 1.05rem;
    font-size: .6875rem;
    line-height: 1.5;
    color: var(--text-light);
}

.play-pair__foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.play-pair__id {
    font-size: .6875rem;
    color: var(--text-light);
}

.btn-ghost--sm {
    font-size: .8125rem;
    padding: .55rem 1.1rem;
}

/* Entrance: the reply lands after the outbound so the eye reads cause then
   effect. Transform/opacity only — nothing here gates readability. */
.plays.is-in .play-msg--out {
    animation: intro-rise var(--dur-entrance) var(--ease-entrance) both;
}

.plays.is-in .play-msg--in {
    animation: intro-rise var(--dur-entrance) var(--ease-entrance) both;
    animation-delay: 180ms;
}

/* tab swap reuses the modal's directional keyframes */
.play-stage.dir-next > * { animation: stage-in-next .34s var(--ease-entrance) both; }
.play-stage.dir-prev > * { animation: stage-in-prev .34s var(--ease-entrance) both; }

/* ---- modal split panel ---- */

.proof-modal__stage.is-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.25rem;
    align-items: start;
}

.proof-modal__stage.is-split .play-msg {
    max-height: 100%;
    overflow-y: auto;
}

/* card affordance */
.proof-card__play {
    align-self: flex-start;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--magic-purple);
    background: var(--proof-purple-tint);
    border-radius: 999px;
    padding: .2rem .5rem;
}

@media (max-width: 860px) {
    .play-pair {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    .play-pair__arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .proof-modal__stage.is-split {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   4. PROOF WALL — controls
   ============================================================ */

.proof-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.proof-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 320px;
}

.proof-search svg {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-light);
    pointer-events: none;
}

.proof-search input {
    width: 100%;
    font: inherit;
    font-size: .9375rem;
    color: var(--text-dark);
    padding: .7rem .875rem .7rem 2.4rem;
    border: 1px solid var(--proof-border-strong);
    border-radius: 10px;
    background: var(--proof-surface);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.proof-search input::placeholder {
    color: var(--text-light);
}

.proof-search input:focus {
    outline: none;
    border-color: var(--magic-purple);
    box-shadow: 0 0 0 3px rgba(132, 94, 247, .15);
}

.proof-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.filter-pill {
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-gray);
    background: var(--proof-surface);
    border: 1px solid var(--proof-border-strong);
    border-radius: 999px;
    padding: .5rem .9rem;
    cursor: pointer;
    white-space: nowrap;
    /* explicit, not `all`: `all` also transitions visibility, which delays
       inherited visibility on modal descendants and blocks focus */
    transition: background .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}

.filter-pill:hover {
    border-color: var(--magic-purple-light);
    color: var(--text-dark);
}

.filter-pill:active {
    transform: scale(.96);
}

.filter-pill[aria-pressed="true"] {
    background: var(--magic-purple);
    border-color: var(--magic-purple);
    color: #fff;
    animation: pill-pick .34s var(--ease-spring);
}

@keyframes pill-pick {
    0%   { transform: scale(.94); }
    100% { transform: scale(1); }
}

/* Cards being removed by a filter change fade out in place before the
   survivors slide to their new slots (FLIP, see ProofGallery). */
.proof-card.is-leaving {
    animation: card-out .2s var(--ease-exit) forwards;
    pointer-events: none;
}

@keyframes card-out {
    to {
        opacity: 0;
        transform: translateY(-6px) scale(.985);
    }
}

.filter-pill__count {
    opacity: .6;
    font-weight: 500;
}

/* Announced to screen readers when filters change, but never shown —
   the page publishes no running totals. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- wall grid ---------- */

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    transition: opacity .22s var(--ease);
}

.proof-grid.is-swapping {
    opacity: 0;
}

.proof-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--proof-surface);
    border: 1px solid var(--proof-border);
    border-radius: var(--proof-radius);
    box-shadow: var(--proof-shadow);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    animation: card-in .4s var(--ease) both;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.proof-card:hover,
.proof-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--proof-shadow-lift);
    border-color: var(--magic-purple);
}

@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* layered depth: the screenshot creeps in behind a still card face */
.proof-card:hover .proof-shot__base {
    transform: scale(1.045);
}

.proof-shot__base {
    transition: transform .5s var(--ease), filter .5s var(--ease), opacity .5s var(--ease);
}

.proof-card:hover .proof-shot--quoted .proof-shot__base {
    opacity: .48;
}

.proof-card:hover .proof-shot__quote {
    transform: translate(-50%, -50%) scale(1.022);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .17);
}

.proof-shot__quote {
    transition: transform var(--dur-interact) var(--ease), box-shadow var(--dur-interact) var(--ease);
}

/* proof id, revealed on hover only */
.proof-card__id {
    display: block;
    font-size: .625rem;
    color: var(--text-light);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--dur-interact) var(--ease), transform var(--dur-interact) var(--ease);
}

.proof-card:hover .proof-card__id,
.proof-card:focus-visible .proof-card__id {
    opacity: 1;
    transform: none;
}

.proof-card__action {
    transition: color var(--dur-interact) var(--ease);
}

.proof-card__action span {
    display: inline-block;
    transition: transform var(--dur-interact) var(--ease);
}

.proof-card:hover .proof-card__action span {
    transform: translateX(4px);
}

/* ---- highlight sweep -------------------------------------------------
   On entry the quote panel is wiped in from the left, as if someone ran
   their eye across the line and stopped on it. Clip-path only.          */
.proof-shot__quote {
    clip-path: inset(0 0 0 0);
}

.proof-card.is-revealing .proof-shot__quote {
    animation: quote-sweep .78s var(--ease-entrance) both;
    animation-delay: .18s;
}

@keyframes quote-sweep {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: .2;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* the screenshot under it resolves from soft to sharp */
.proof-card.is-revealing .proof-shot__base {
    animation: shot-focus .8s var(--ease-entrance) both;
}

@keyframes shot-focus {
    from { filter: blur(7px); opacity: .25; }
    to   { filter: blur(1.1px) saturate(.86); opacity: .58; }
}

.proof-card__body {
    padding: 1.125rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.proof-card__name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--text-dark);
    line-height: 1.3;
}

.proof-card__title {
    font-size: .8125rem;
    color: var(--text-gray);
    line-height: 1.4;
}

.proof-card__meta {
    font-size: .75rem;
    color: var(--text-light);
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.proof-card__meta span::after {
    content: "·";
    margin-left: .5rem;
    opacity: .5;
}

.proof-card__meta span:last-child::after {
    content: none;
}

.proof-card__action {
    margin-top: auto;
    padding-top: .875rem;
    border-top: 1px solid var(--proof-border);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--magic-purple);
}

.proof-card:hover .proof-card__action {
    text-decoration: underline;
}

/* ---------- proof thumbnail / placeholder ---------- */

.proof-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-gray);
    border-bottom: 1px solid var(--proof-border);
    overflow: hidden;
}

.proof-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* ---------- ProofScreenshot: real evidence + editorial emphasis ----------
   The screenshot stays the base layer and is only lightly de-emphasised —
   never obscured. The verbatim positive line sits on top in a clean panel. */

.proof-shot {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.proof-shot__base {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Softening applies only when a quote sits over the image. With no quote
   the evidence is shown untouched. */
.proof-shot--quoted .proof-shot__base {
    filter: blur(1.1px) saturate(.86);
    opacity: .58;
    transform: scale(1.02);
}

.proof-shot__quote {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 34rem;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--proof-border);
    border-left: 3px solid var(--magic-purple);
    border-radius: 8px;
    padding: .875rem 1rem;
    box-shadow: 0 6px 24px rgba(17, 24, 39, .13);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-dark);
    text-align: left;
    /* long replies stay contained rather than overflowing the card */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* modal variant — roomier, no clamping */
.proof-modal__stage .proof-shot {
    max-height: 100%;
}

.proof-modal__stage .proof-shot__base {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--proof-border);
    background: #fff;
}

.proof-modal__stage .proof-shot__quote {
    font-size: 1.0625rem;
    padding: 1.125rem 1.375rem;
    max-width: 40rem;
    -webkit-line-clamp: none;
    display: block;
}

/* quote shown when the screenshot itself is not published yet */
.proof-shot--noimage {
    background: linear-gradient(135deg, #FCFCFD 0%, #F4F5F8 100%);
}

/* padding only when a quote sits on the gradient; the bar placeholder
   brings its own */
.proof-shot--noimage.proof-shot--quoted {
    padding: 1.25rem;
}

.proof-thumb__badge {
    position: absolute;
    top: .625rem;
    left: .625rem;
    z-index: 2;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(4px);
}

/* Abstract redacted-document placeholder. Deliberately reads as a
   placeholder, never as a real screenshot. */
.proof-thumb--empty {
    /* Must fill its parent: the bars below are sized in %, so a shrink-wrapped
       box (e.g. inside .proof-shot's centred grid) collapses them to 0. */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    background:
        linear-gradient(135deg, #FCFCFD 0%, #F4F5F8 100%);
}

.proof-thumb--empty i {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: #DFE2E9;
}

.proof-thumb--empty i:nth-child(1) { width: 38%; }
.proof-thumb--empty i:nth-child(2) { width: 74%; }
.proof-thumb--empty i:nth-child(3) { width: 62%; }

/* the "interested" line, highlighted the way a real redaction would be */
.proof-thumb--empty i:nth-child(4) {
    width: 52%;
    background: var(--magic-purple-light);
    opacity: .55;
}

.proof-thumb__note {
    position: absolute;
    right: .625rem;
    bottom: .625rem;
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ---------- load more ---------- */

.proof-more {
    text-align: center;
    margin-top: 2.5rem;
}

.btn-ghost {
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--proof-surface);
    border: 1px solid var(--proof-border-strong);
    border-radius: 10px;
    padding: .8rem 1.75rem;
    cursor: pointer;
    /* explicit, not `all`: `all` also transitions visibility, which delays
       inherited visibility on modal descendants and blocks focus */
    transition: background .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}

.btn-ghost:hover {
    border-color: var(--magic-purple);
    color: var(--magic-purple);
    transform: translateY(-1px);
}

/* Transform-only entrance: this is a message the user needs to read, so its
   visibility must never depend on an animation running. */
.proof-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-light);
    animation: empty-in .45s var(--ease-entrance) both;
}

@keyframes empty-in {
    from { transform: translateY(10px) }
    to   { transform: none }
}

.proof-empty strong {
    display: block;
    font-size: 1.125rem;
    color: var(--text-dark);
    margin-bottom: .4rem;
}

.proof-empty span {
    font-size: .9375rem;
}

/* ============================================================
   5. MODAL
   ============================================================ */

.proof-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(17, 24, 39, .72);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    /* visibility flips instantly on open so the close button is focusable
       right away; on close it is delayed so the fade-out stays visible. */
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
}

.proof-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s var(--ease), visibility 0s linear 0s;
}

.proof-modal__panel {
    display: flex;
    flex-direction: column;
    width: min(1040px, 100%);
    max-height: min(90vh, 900px);
    background: var(--proof-surface);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    overflow: hidden;
    transform: translateY(12px) scale(.985);
    transition: transform .28s var(--ease);
}

.proof-modal.is-open .proof-modal__panel {
    transform: none;
    /* Pin visibility on the panel: descendants otherwise inherit the root's
       in-flight transition value and stay unfocusable. */
    visibility: visible;
}

.proof-modal__panel {
    transition: transform var(--dur-modal) var(--ease-entrance);
}

/* ---- directional slide between proofs ---- */

.proof-modal__stage > * {
    animation: stage-in .34s var(--ease-entrance) both;
}

.proof-modal__stage.dir-next > * { animation-name: stage-in-next; }
.proof-modal__stage.dir-prev > * { animation-name: stage-in-prev; }

@keyframes stage-in      { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }
@keyframes stage-in-next { from { opacity: 0; transform: translateX(34px) } to { opacity: 1; transform: none } }
@keyframes stage-in-prev { from { opacity: 0; transform: translateX(-34px) } to { opacity: 1; transform: none } }

/* the quote lands after the screenshot has settled */
.proof-modal__stage .proof-shot__quote {
    animation: quote-land .5s var(--ease-entrance) both;
    animation-delay: .2s;
}

@keyframes quote-land {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* counter ticks when it changes */
.proof-modal__counter.is-ticking {
    animation: tick .3s var(--ease-spring);
}

@keyframes tick {
    0%   { transform: translateY(4px); opacity: .4 }
    100% { transform: none; opacity: 1 }
}

/* ============================================================
   PROOF STREAM — ambient inbox noise, occasional clear reply
   ============================================================ */

.stream {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: var(--bg-gray);
    border-top: 1px solid var(--proof-border);
    border-bottom: 1px solid var(--proof-border);
    /* content stays the focus: everything here is very low contrast */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.stream__noise {
    position: absolute;
    inset: 0;
}

/* one drifting fragment — deliberately unreadable */
.stream__frag {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 190px;
    padding: 11px 13px;
    background: var(--proof-surface);
    border: 1px solid var(--proof-border);
    border-radius: 8px;
    opacity: .5;
    will-change: transform;
}

.stream__frag i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #E3E6EC;
}

.stream__focus {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    pointer-events: none;
}

.stream__quote {
    max-width: 40rem;
    text-align: center;
    font-size: clamp(1.125rem, 2.4vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--text-dark);
    background: rgba(255, 255, 255, .93);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    box-shadow: 0 8px 40px rgba(17, 24, 39, .09);
    opacity: 0;
}

.stream__quote.is-live {
    animation: quote-surface 5.2s var(--ease) both;
}

@keyframes quote-surface {
    0%       { opacity: 0; transform: translateY(12px) scale(.99); filter: blur(9px) }
    14%, 76% { opacity: 1; transform: none; filter: blur(0) }
    100%     { opacity: 0; transform: translateY(-10px) scale(.995); filter: blur(7px) }
}

/* With no verbatim reply text, this section has nothing to say: the drifting
   fragments alone read as 340px of blank page. Collapse it entirely rather
   than fabricating a quote to fill it. It returns on its own as soon as any
   record carries highlightedText. */
.stream--silent {
    display: none;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */

/* ============================================================
   CTA CHAIN
   ============================================================ */

.cta-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.anim .cta-chain li {
    opacity: 0;
    transform: translateY(6px);
}

.cta-chain li {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: opacity .45s var(--ease-entrance), transform .45s var(--ease-entrance), color .45s var(--ease);
}

.cta-chain li:not(:last-child)::after {
    content: "→";
    margin-left: .55rem;
    opacity: .45;
}

.cta-chain.is-in li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 130ms);
}

.cta-chain.is-in li.is-final {
    color: var(--magic-purple);
}

/* refined CTA button */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.btn-cta .btn-arrow {
    width: 15px;
    height: 13px;
    flex: none;
    transition: transform var(--dur-interact) var(--ease);
}

.btn-cta:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 10px 34px rgba(132, 94, 247, .34);
}

.btn-cta:hover .btn-arrow {
    transform: translateX(4px);
}

.proof-modal__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--proof-border);
    flex: none;
}

.proof-modal__name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-right: .25rem;
}

.proof-modal__meta {
    font-size: .75rem;
    color: var(--text-light);
    white-space: nowrap;
}

.proof-modal__id {
    margin-left: auto;
    font-size: .6875rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
}

.proof-modal__close {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--proof-border);
    border-radius: 8px;
    background: var(--proof-surface);
    color: var(--text-gray);
    cursor: pointer;
    /* explicit, not `all`: `all` also transitions visibility, which delays
       inherited visibility on modal descendants and blocks focus */
    transition: background .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}

.proof-modal__close:hover {
    background: var(--bg-gray);
    color: var(--text-dark);
}

.proof-modal__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-gray);
    overflow: auto;
    overscroll-behavior: contain;
}

.proof-modal__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--proof-border);
    background: #fff;
    cursor: zoom-in;
    transition: transform .3s var(--ease);
}

.proof-modal__stage img.is-zoomed {
    cursor: zoom-out;
    transform: scale(1.75);
}

/* placeholder shown until the redacted screenshot is wired in */
.proof-placeholder {
    text-align: center;
    max-width: 460px;
    padding: 2.5rem 1.5rem;
}

.proof-placeholder__doc {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid var(--proof-border);
    border-radius: 10px;
}

.proof-placeholder__doc i {
    display: block;
    height: 9px;
    border-radius: 4px;
    background: #E4E7ED;
}

.proof-placeholder__doc i:nth-child(1) { width: 40%; }
.proof-placeholder__doc i:nth-child(2) { width: 88%; }
.proof-placeholder__doc i:nth-child(3) { width: 71%; }
.proof-placeholder__doc i:nth-child(4) {
    width: 56%;
    background: var(--magic-purple-light);
    opacity: .6;
}
.proof-placeholder__doc i:nth-child(5) { width: 33%; }

.proof-placeholder p {
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}

.proof-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--proof-border);
    flex: none;
}

.proof-modal__counter {
    font-size: .8125rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.proof-nav {
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-gray);
    background: var(--proof-surface);
    border: 1px solid var(--proof-border-strong);
    border-radius: 8px;
    padding: .5rem .9rem;
    cursor: pointer;
    /* explicit, not `all`: `all` also transitions visibility, which delays
       inherited visibility on modal descendants and blocks focus */
    transition: background .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}

.proof-nav:hover:not(:disabled) {
    border-color: var(--magic-purple);
    color: var(--magic-purple);
}

.proof-nav:disabled {
    opacity: .4;
    cursor: not-allowed;
}

body.modal-open {
    overflow: hidden;
}

/* ============================================================
   6. FINAL CTA
   ============================================================ */

.proof-cta {
    text-align: center;
    background: var(--bg-gray);
}

.proof-cta h2 {
    color: var(--text-dark);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    max-width: 20ch;
    margin: 0 auto .75rem;
}

.proof-cta p {
    max-width: 48ch;
    margin: 0 auto 2.25rem;
}

.proof-cta__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    background: var(--proof-surface);
    border: 1px solid var(--proof-border-strong);
    color: var(--text-dark) !important;
}

.btn-secondary:hover {
    border-color: var(--magic-purple);
    color: var(--magic-purple) !important;
    transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: single column. Kept at 640px so 768px tablets still get two
   columns — the shared nav breakpoint at 768px is intentionally separate. */
@media (max-width: 640px) {
    .proof-metrics {
        grid-template-columns: 1fr;
    }

    .proof-metric {
        border-right: none;
        border-bottom: 1px solid var(--proof-border);
        padding: 1.25rem 1rem;
    }

    .proof-metric:last-child {
        border-bottom: none;
    }

    .proof-grid {
        grid-template-columns: 1fr;
    }

    /* Narrow the chip on phones, never the type — logos stay legible. */
    .open-doors {
        padding: 4rem 0 3.5rem;
    }

    .open-doors__head {
        margin-bottom: 2.5rem;
    }

    .logo-chip {
        width: 168px;
        height: 84px;
        padding: .875rem 1rem;
    }

    .logo-chip__word {
        font-size: .9375rem;
    }

    .logo-wall {
        gap: .875rem;
    }

    .marquee-track {
        gap: .875rem;
        padding-right: .875rem;
    }
}

@media (max-width: 768px) {
    .proof-hero {
        padding: 3.5rem 0 3rem;
    }

    .trust-strip__inner {
        gap: 1.25rem;
    }

    .proof-search {
        max-width: none;
    }

    .proof-modal {
        padding: 0;
    }

    .proof-modal__panel {
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .proof-modal__id {
        display: none;
    }

    .proof-modal__stage img.is-zoomed {
        transform: scale(1.35);
    }

    /* ---- mobile motion budget ----
       Fewer things moving at once, and nothing cursor-dependent. */

    .stream {
        height: 210px;
    }

    /* half the drifting fragments are dropped rather than scaled down */
    .stream__frag:nth-child(2n) {
        display: none;
    }

    .stream__quote {
        font-size: 1.0625rem;
        padding: .9rem 1.1rem;
    }

    /* hover labels and row-dimming are pointer affordances; on touch the tap
       goes straight to the proof, so they only add noise */
    .logo-chip__peek {
        display: none;
    }

    .marquee-row:hover .logo-chip:not(:hover) {
        opacity: .72;
    }

    /* tap feedback instead */
    .logo-chip:active {
        transform: scale(.97);
        opacity: 1;
    }

    .proof-card:active {
        transform: scale(.99);
    }

    .signal__label {
        font-size: .625rem;
        letter-spacing: .08em;
    }

    .scroll-progress {
        height: 3px;
    }
}

/* Touch devices: no hover state should ever stick after a tap. */
@media (hover: none) {
    .logo-chip:hover,
    .proof-card:hover {
        transform: none;
    }

    .marquee-row:hover .logo-chip:not(:hover) {
        opacity: .72;
    }
}