/* The proof section on / and /ads (features/proof/pages.mjs). Tokens from mobile-tokens.css, the button from journey.css.
   Rails scroll sideways on a phone and show arrows when they overflow (public/proof.js). Every card carries a tag that
   says what it is: their ad, ours, our own, or a demo brand. Phone first; wider from 48rem and 64rem. */
.proof{display:flex;flex-direction:column;gap:30px}
.proof h2{font-size:var(--text-title);letter-spacing:var(--track-title);line-height:1.1;text-wrap:balance}
.proof h3{font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.proof p{text-wrap:pretty}
.proof-head{display:flex;flex-direction:column;gap:10px}
.proof-head>p:last-child{color:var(--muted);font-size:1.0625rem;line-height:1.5;max-width:36em}
.proof-kicker{font-size:var(--text-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.proof-block{display:flex;flex-direction:column;gap:12px;min-width:0}
.proof-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.proof-sub,.proof-fine{color:var(--muted);font-size:.875rem;line-height:1.5}
.proof-fine{color:var(--faint);font-size:.8125rem}

/* The rail: a row of cards that scrolls sideways, bleeding to the screen edge on a phone. */
.proof-rail{display:flex;gap:14px;margin:0 -16px;padding:6px 16px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
.proof-rail::-webkit-scrollbar{display:none}
.proof-card{flex:none;width:min(58vw,230px);margin:0;display:flex;flex-direction:column;gap:10px;scroll-snap-align:start}
.proof-card figcaption,.proof-pair figcaption{font-size:.8125rem;line-height:1.45;color:var(--muted)}
.proof-card figcaption b,.proof-pair figcaption b{display:block;color:var(--ink);font-weight:800;font-size:.875rem}

/* One ad, 9:16, with its tag in the corner and a play mark while paused. */
.proof-media{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:20px;background:var(--media-bg,#0d0f11);box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--elev-2);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.proof-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);pointer-events:none}
.proof-media video,.proof-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proof-media.is-after{box-shadow:0 0 0 1.5px var(--accent-ring),var(--elev-3),var(--glow-accent)}
.proof-media.is-before img,.proof-media.is-before video{filter:saturate(.9) brightness(.94)}
.proof-media.is-before img{object-fit:contain}
.proof-media.is-paused::before{content:'';position:absolute;left:50%;top:50%;z-index:2;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--glass-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f4f1ee' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.proof-tag{position:absolute;left:10px;top:10px;z-index:2;padding:4px 10px;border-radius:var(--radius-pill);background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1);color:var(--ink);font-size:.6875rem;font-weight:800;line-height:1.4;white-space:nowrap}
.proof-tag.is-ours{background:var(--grad-accent);color:var(--on-accent);box-shadow:var(--btn-primary)}
.proof-tag.is-demo{background:rgba(24,20,12,.82);box-shadow:inset 0 0 0 1px rgba(255,194,75,.55);color:#ffd88a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* A brand's pair: their ad and ours side by side, one pair per slide. */
.proof-pair{flex:none;width:min(86vw,440px);margin:0;display:flex;flex-direction:column;gap:12px;scroll-snap-align:start}
.proof-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Arrows, only when a rail overflows. */
.proof-arrows{display:flex;gap:8px}
.proof-arrows[hidden]{display:none}
.proof-arrows button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);cursor:pointer;transition:background var(--dur-hover) var(--ease-out),opacity var(--dur-hover)}
.proof-arrows button:disabled{opacity:.35;cursor:default}
.proof-arrows svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Words: what brands said, or the founding invite in their place. */
.proof-quotes{display:grid;gap:12px}
.proof-pair .proof-quote{padding:16px 18px}
.proof-quote{margin:0;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.proof-quote blockquote{margin:0;font-size:1.0625rem;line-height:1.5}
.proof-by{display:flex;flex-direction:column;gap:2px;font-size:.8125rem;color:var(--muted)}
.proof-by b{color:var(--ink);font-weight:800}
.proof-invite{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 20px;border-radius:26px;background:radial-gradient(110% 80% at 100% 0%,rgba(255,121,74,.18),rgba(255,121,74,0) 62%),var(--grad-surface);box-shadow:var(--hi),0 0 0 1px rgba(255,121,74,.35),var(--elev-2);scroll-margin-top:90px}
.proof-invite h3{font-size:1.5rem;letter-spacing:var(--track-title);line-height:1.12}
.proof-invite>p{color:var(--muted);line-height:1.55;max-width:38em}
.proof-invite .proof-why{color:var(--ink);font-weight:700}
.proof-invite.is-quiet{background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.proof-invite.is-quiet h3{font-size:1.1875rem}
.proof-go{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
.proof-go .journey-primary>svg{width:32px;height:32px;stroke-width:2.4;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.proof-count{font-size:.875rem;color:var(--muted);text-align:center}
.proof-count b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.proof-dev{padding:10px 14px;border-radius:12px;background:rgba(255,194,75,.14);color:#ffd88a;font-weight:700}

@media (hover:hover){.proof-arrows button:not(:disabled):hover{background:rgba(255,255,255,.12)}}

@media (min-width:48rem){
 .proof-rail{margin:0;padding:6px 2px 10px;scroll-padding:0}
 .proof-card{width:220px}
 .proof-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .proof-go{flex-direction:row;align-items:center;gap:18px}
 .proof-go .journey-primary{width:auto;padding-inline:26px 28px}
 .proof-invite{padding:32px}
}
@media (min-width:64rem){
 .proof h2{font-size:2.25rem;letter-spacing:var(--track-display)}
 .proof{gap:40px}
 .proof-card{width:240px}
 .proof-pair{width:min(100%,920px);display:grid;grid-template-columns:520px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:32px;row-gap:14px}
 .proof-pair .proof-two{grid-row:1 / span 2}
 .proof-pair>figcaption{align-self:end}
 .proof-pair>figcaption b{font-size:1.25rem;letter-spacing:-.01em}
 .proof-pair .proof-quote{align-self:start;grid-column:2;grid-row:2}
 .proof-pair .proof-quote blockquote{font-size:1.25rem}
 .proof-invite h3{font-size:1.875rem}
}