/* youdown.css — marketing site. Design system v0.5, pushed to Bumble scale.
   Palette is unchanged from the app: Ink, Paper, warm neutrals. Signal Green
   and the category hues appear as ACCENTS only — never as section grounds.
   Boldness comes from type SIZE and full-bleed colour blocks, not from new
   colours or heavier weights than 800. Radius law holds: 14 on rectangular
   CTAs, pills for chips, half-width for circles. */

/* ── URBANE ROUNDED (self-hosted) ────────────────────────────────────
   The logo face, used for display type. Normalised from the vendor kit into
   ONE family on numeric weights — the supplied CSS put DemiBold under a
   separate family name ('Urbane Rounded Demi') and mapped Heavy to 900, so
   an 800 headline would silently fall back to Bold. Here: Medium 500,
   DemiBold 600, Bold 700, Heavy 800. woff2 first, woff fallback; eot/ttf
   dropped (IE-era formats no browser in use needs). */
@font-face{font-family:'Urbane Rounded';src:url('fonts/UrbaneRounded-Medium.woff2') format('woff2'),url('fonts/UrbaneRounded-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Urbane Rounded';src:url('fonts/UrbaneRounded-DemiBold.woff2') format('woff2'),url('fonts/UrbaneRounded-DemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Urbane Rounded';src:url('fonts/UrbaneRounded-Bold.woff2') format('woff2'),url('fonts/UrbaneRounded-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Urbane Rounded';src:url('fonts/UrbaneRounded-Heavy.woff2') format('woff2'),url('fonts/UrbaneRounded-Heavy.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}

:root{--ink:#0a0a0a;--paper:#fff;--cream:#f7f5f1;--warm:#f3f1ec;--line:#ECEAE3;--dim:#8a8680;--body:#57534a;--green:#00B368;--purple:#7C3AED;--red:#C9203E;--h-sports:190;--h-outdoor:220;--h-dining:112;--h-night:322;--h-arts:355;--h-events:45;
/* Display face = the logo face, Urbane Rounded, self-hosted above. */
--font-display:'Urbane Rounded',-apple-system,sans-serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--body)}
.matsym{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}
.matsym.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:820px;margin:0 auto;padding:0 32px}

/* ── type scale ─────────────────────────────────────── */
/* Display sizes run in the logo face at 800; Urbane Rounded is wider than
   Inter, so tracking is slightly looser here than the app's -0.045em. */
.d1,.d2,.d3,.d4{font-family:var(--font-display)}
.d1{font-size:clamp(46px,7.2vw,102px);font-weight:800;letter-spacing:-0.035em;line-height:0.98;margin:0;text-wrap:balance}
.d2{font-size:clamp(38px,5.4vw,78px);font-weight:800;letter-spacing:-0.03em;line-height:1.02;margin:0;text-wrap:balance}
.d3{font-size:clamp(27px,3.1vw,44px);font-weight:800;letter-spacing:-0.024em;line-height:1.1;margin:0;text-wrap:balance}
.d4{font-size:clamp(19px,1.6vw,25px);font-weight:800;letter-spacing:-0.012em;line-height:1.25;margin:0}
.lede{font-size:clamp(17px,1.35vw,21px);font-weight:500;line-height:1.55;color:var(--body);text-wrap:pretty;margin:0}
.body{font-size:16px;font-weight:500;line-height:1.65;color:var(--body);text-wrap:pretty;margin:0}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);margin:0}
/* Strike-through survives wrapping: an absolutely-positioned bar would only
   mark the first line. nowrap is deliberately absent — forcing this span onto
   one line makes it the h1's min-content width and starves the sibling grid
   track. */
.strike{color:var(--dim);text-decoration:line-through;text-decoration-thickness:0.07em;text-decoration-skip-ink:none}

/* ── on dark ────────────────────────────────────────── */
.dark{background:var(--ink);color:var(--paper)}
.dark .lede,.dark .body{color:rgba(255,255,255,0.66)}
.dark .eyebrow{color:rgba(255,255,255,0.5)}
.dark a{color:var(--paper)}
.dark a:hover{color:rgba(255,255,255,0.66)}

/* ── buttons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 28px;border-radius:14px;border:none;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:-0.01em;cursor:pointer;transition:transform .15s ease,opacity .15s ease;white-space:nowrap}
.btn:active{transform:scale(0.98)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{color:#fff;opacity:.86}
.btn-paper{background:#fff;color:var(--ink)}
.btn-paper:hover{color:var(--ink);opacity:.86}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-line:hover{color:var(--ink);background:var(--warm)}
.dark .btn-line{color:#fff;border-color:rgba(255,255,255,0.4)}
.dark .btn-line:hover{color:#fff;background:rgba(255,255,255,0.09)}
.btn-sm{height:46px;padding:0 20px;font-size:14.5px}
.store{display:flex;gap:12px;flex-wrap:wrap}
/* Store badges are OFFICIAL ARTWORK, never redrawn (CLAUDE.md §4). Until the
   files ship from Apple's and Google's kits these are labelled slots at the
   real badge proportions, so the layout is already correct when the artwork
   drops in. Apple: 119.66×40 (2.99:1). Google Play: 646×250 (2.58:1). */
.badge{display:block;transition:opacity .15s ease}
.badge:hover{opacity:.84}
.badge img{display:block;width:auto;height:54px}

/* ── nav ────────────────────────────────────────────── */
/* Transparent over the hero photo, solid once you leave it. The hero image
   runs UNDER the nav so the page opens as one full-bleed frame. */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease}
header.nav.solid{background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:88px}
.nav-logo img{height:42px;width:auto;filter:invert(1);transition:filter .25s ease}
header.nav.solid .nav-logo img{filter:none}
.nav-right{display:flex;align-items:center;gap:34px;margin-left:auto}
.nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:700}
.nav-burger{display:none}
.nav-logo{position:relative;z-index:2}
.nav-links a{letter-spacing:-0.01em;color:#fff}
.nav-links a:hover{color:rgba(255,255,255,0.7)}
header.nav.solid .nav-links a{color:var(--ink)}
header.nav.solid .nav-links a:hover{color:var(--body)}
.nav-cta{background:#fff;color:var(--ink)}
.nav-cta:hover{color:var(--ink);opacity:.86}
header.nav.solid .nav-cta{background:var(--ink);color:#fff}
header.nav.solid .nav-cta:hover{color:#fff}
html.nav-open header.nav,html.nav-open header.nav.solid{background:transparent;
  backdrop-filter:none;border-bottom-color:transparent}
html.nav-open header.nav.solid .nav-logo img{filter:invert(1)}
html.nav-open header.nav.solid .nav-links a{color:#fff}
html.nav-open header.nav.solid .nav-burger-box span{background:#fff}
html.nav-open header.nav.solid .nav-cta{background:#fff;color:var(--ink)}

/* ── hero ───────────────────────────────────────────── */
/* The photo IS the pitch: a table of people who didn't know each other. Type
   sits on a bottom-weighted scrim so faces stay visible. */
.hero{position:relative;min-height:min(940px,100svh);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;background:var(--ink) url('media/hero-table.png') center 38%/cover no-repeat}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,0.62) 0%,rgba(10,10,10,0.28) 26%,rgba(10,10,10,0.55) 62%,rgba(10,10,10,0.92) 100%)}
/* Ticks, not arrows: every scene is one click away instead of N clicks deep,
   and it reuses the showreel's indicator language. */
.hero-switch{display:flex;align-items:center;gap:14px;margin-top:30px}
.hs-ticks{display:flex;gap:6px}
.hs-tick{width:30px;height:3px;padding:0;border:none;border-radius:2px;background:rgba(255,255,255,0.3);cursor:pointer;transition:background .2s ease,transform .2s ease}
.hs-tick:hover{background:rgba(255,255,255,0.6)}
.hs-tick.on{background:#fff;transform:scaleY(1.6)}
.hs-label{font-size:11px;font-weight:800;letter-spacing:0.13em;text-transform:uppercase;color:rgba(255,255,255,0.66);white-space:nowrap}
.hero-in{position:relative;z-index:2;width:100%;padding-top:132px;padding-bottom:clamp(48px,6vw,84px)}
.hero .d1,.hero .lede{color:#fff}
.hero .lede{color:rgba(255,255,255,0.78)}
.hero .eyebrow{color:rgba(255,255,255,0.62)}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}

/* Delfina's tape, playing in a phone. The photo is the payoff; this is the
   mechanism, so they belong in the same frame. Top-aligned with the headline
   (margin-top clears the eyebrow above it) and cropped by the hero's bottom
   edge — a phone floating mid-frame reads as a small object next to 124px
   type. The caption is positioned from the TOP so it stays visible whatever
   the viewport height crops off the bottom. */
.tape-phone{position:relative;width:100%;max-width:356px;aspect-ratio:402/874;border-radius:40px;background:var(--ink);padding:8px;box-shadow:0 40px 90px -20px rgba(0,0,0,0.6);margin:0 0 -150px auto}
/* Caption sits ABOVE the phone rather than over the video — it labels the
   tape without covering the person in it. Right-aligned to the phone's edge,
   which is itself right-aligned in the column. */
.tape-head{text-align:right;margin-bottom:30px;text-shadow:0 1px 14px rgba(10,10,10,0.6)}
.tape-head .t{font-size:15px;font-weight:800;color:#fff;letter-spacing:-0.015em}
.tape-head .s{font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.68);margin-top:2px}
.tape-phone video{width:100%;height:100%;object-fit:cover;border-radius:33px;display:block;background:#111}
/* Centred sound toggle. The video autoplays muted (browsers require it);
   this is the affordance to actually hear Delfina. Circle → radius is half
   the width, per the shape law. */
.tape-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:72px;height:72px;border-radius:36px;border:none;background:rgba(255,255,255,0.94);backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(0,0,0,0.34);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .16s ease,opacity .25s ease}
.tape-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.tape-play .matsym{font-size:34px;color:var(--ink)}
.tape-phone.sound-on .tape-play{opacity:0}
.tape-phone.sound-on:hover .tape-play{opacity:1}
.tape-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 13px;border-radius:999px;background:#fff;font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.tape-tag .dot{width:6px;height:6px;border-radius:3px;background:var(--red)}
@media(max-width:860px){.tape-phone{margin:0 auto -120px;max-width:300px}.tape-head{text-align:center;margin-top:34px}}
/* ---- Short laptop viewports -------------------------------------------
   The hero is a fixed stage: min(940px,100svh) with overflow:hidden. At full
   size the tape column needs ~1004px (132 top pad + caption + 774 phone +
   bottom pad), so anything under that clipped the phone off the bottom. A
   16" MacBook gives about 900px of browser height, which is exactly where
   the developer saw it. Scoped above 860px so the stacked mobile layout,
   which has its own rules, is untouched. */
@media(min-width:861px) and (max-height:1240px){
  /* Full-size the tape is 774px tall and sits ~254px down the column, so it
     needs ~1030px of viewport. Below that it must come down a size. */
  .hero-in{padding-top:112px}
  .tape-phone{max-width:304px}
}
/* Natural hero height is ~1240px, so anything shorter than that pushed the tape
   below the fold -- a 16" MacBook is about 1000px of browser height, which is
   where the developer hit it. min-height:100svh keeps the hero filling the
   screen exactly, so the approved full-bleed look survives while the dead
   padding goes. */
@media(min-width:861px) and (max-height:1240px){
  .hero{padding-top:0;padding-bottom:0;min-height:100svh}
}
@media(min-width:861px) and (max-height:850px){
  .hero-in{padding-top:98px;padding-bottom:36px}
  .tape-phone{max-width:266px}
  .tape-head{margin-bottom:10px}
}
@media(min-width:861px) and (max-height:760px){
  .hero-in{padding-top:92px;padding-bottom:28px}
  .tape-phone{max-width:232px}
}

/* ── SHOWREEL ───────────────────────────────────────────
   Full-height scroll takeover. The hero holds still on one scene; this
   section's copy is about BREADTH, so the visual has to be plural — five
   activities cross-fading. Each frame is its own <image-slot> (drops persist
   individually); the cycle is pure CSS opacity on a stack, so there's no JS
   and no layout thrash. 5 slides × 4s = 20s loop. */
/* ── SCROLL TAKEOVER (hero) ───────────────────────────────────────────
   One full-height stage that pins while you scroll: the scenes advance under
   fixed copy instead of the page moving. Scroll length = one viewport per
   scene, so the takeover ends exactly when the last scene has had its turn. */
.reel{position:relative;min-height:min(1040px,100svh);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);padding:0}
.reel-stack{position:absolute;inset:0;z-index:0}
.reel-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;background:rgba(255,255,255,0.05)}
.reel-slide.on{opacity:1}
/* Unfilled scenes: image-slot hardcodes its colours and exposes no theming
   hook, so the drop affordance is authored in the light DOM. */
.reel-slide::before,.hero-slide::before{content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;max-width:60%;text-align:center;font-size:13px;font-weight:700;line-height:1.5;color:rgba(255,255,255,0.6);pointer-events:none}
.reel-slide.filled::before,.hero-slide.filled::before{display:none}
/* Scrim MUST outrank the slides: a z-index on the slot with no stacking
   context on the wrapper put the photo above the scrim and killed the copy. */
/* Lighter than the hero's scrim — the photo is the argument here, so it stays
   readable. Weighted to the bottom-left where the copy sits rather than flat,
   so the top two-thirds of the image comes through nearly clean. */
.reel-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,0.34) 0%,rgba(10,10,10,0.1) 26%,rgba(10,10,10,0.34) 62%,rgba(10,10,10,0.76) 100%)}
/* The copy occupies roughly 39–69% of the section height, which is exactly
   where the scrim above is lightest — white type was landing on 200+ luminance
   sand and sky. This second layer darkens only that band, anchored bottom-left
   where the copy actually sits, so the top ~35% of every photo stays as clean
   as the scrim leaves it. */
.reel-copyshade{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,10,10,0.6) 0%,rgba(10,10,10,0.5) 42%,rgba(10,10,10,0.28) 62%,rgba(10,10,10,0) 76%)}
@media(min-width:1100px){
  /* Wide viewports: fade it out to the right so the photo's right half is
     untouched — the copy never reaches past ~60% of the width there. */
  .reel-copyshade{mask-image:linear-gradient(to right,#000 0%,#000 52%,transparent 88%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 52%,transparent 88%)}
}
.reel-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,7vw,96px);padding-top:120px}
.reel .d2{color:#fff;text-shadow:0 2px 28px rgba(10,10,10,0.5)}
.reel .lede{color:rgba(255,255,255,0.86);text-shadow:0 1px 16px rgba(10,10,10,0.6)}
.reel-cap .t,.reel-cap .s{text-shadow:0 1px 14px rgba(10,10,10,0.7)}
/* Caption follows the selected frame. */
.reel-caps{position:relative;height:50px;margin-top:26px}
.reel-cap{position:absolute;left:0;top:0;opacity:0;transition:opacity .45s ease;display:flex;align-items:center;gap:11px;pointer-events:none}
.reel-cap.on{opacity:1}
.reel-cap .matsym{font-size:22px;color:#fff}
.reel-cap .t{font-size:16px;font-weight:800;color:#fff;letter-spacing:-0.015em}
.reel-cap .s{font-size:13px;font-weight:600;color:rgba(255,255,255,0.6);margin-top:1px}
/* Ticks are real buttons — click any scene directly; scrolling advances them
   too, so a click scrolls to that scene's segment rather than fighting it. */
.reel-ticks{display:flex;gap:6px;margin-top:6px}
.reel-tick{width:30px;height:3px;padding:0;border:none;border-radius:2px;background:rgba(255,255,255,0.26);cursor:pointer;transition:background .2s ease,transform .2s ease}
.reel-tick:hover{background:rgba(255,255,255,0.6)}
.reel-tick.on{background:#fff;transform:scaleY(1.6)}
@media(prefers-reduced-motion:reduce){
  .reel-slide,.reel-cap{transition:none}
}

/* ── sections ───────────────────────────────────────── */
section{padding:clamp(80px,9vw,148px) 0}
.tight{padding:clamp(56px,6vw,96px) 0}
.hr{height:1px;background:var(--line);border:none;margin:0}

/* Two-column media rows. min-width:0 on every track: an fr track's automatic
   min-content floor lets one long unbreakable child eat the whole row and
   collapse the media beside it. */
.duo{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.duo>*{min-width:0}
.duo-hero{grid-template-columns:1.15fr 0.85fr;align-items:start}
.duo-tapes{grid-template-columns:1.05fr 0.95fr}
.duo-get{grid-template-columns:1.1fr 0.9fr}
@media(max-width:860px){.duo-hero,.duo-tapes,.duo-get{grid-template-columns:1fr}.duo-tapes>div:first-child{order:2}}

/* ── slots ──────────────────────────────────────────── */
image-slot{--is-bg:var(--warm);--is-fg:var(--dim)}
.phone-shell{position:relative;width:100%;max-width:352px;aspect-ratio:402/874;border-radius:44px;background:var(--ink);padding:9px;box-shadow:0 40px 90px -20px rgba(10,10,10,0.42),0 8px 24px rgba(10,10,10,0.14)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--warm)}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:14px;background:var(--ink);z-index:3}

/* ── grids ──────────────────────────────────────────── */
.beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.beat{background:var(--paper);padding:26px 24px 30px;display:flex;flex-direction:column;gap:11px}
.beat .n{font-size:11px;font-weight:800;letter-spacing:0.14em;color:var(--dim)}
.beat h3{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-0.018em;margin:0}
.beat p{font-size:14px;font-weight:500;line-height:1.55;color:var(--body);margin:0;text-wrap:pretty}

.hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:22px}
.host{display:flex;flex-direction:column}
/* Host tapes — the poster still is the portrait, so the card looks identical
   at rest and the video only loads on demand. Click plays with sound (a
   silent host video would defeat the point of showing one). */
.host-img{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--warm);cursor:pointer}
.host-img img,.host-img video{width:100%;height:100%;object-fit:cover;display:block}
.host-img video{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.host-img.playing video{opacity:1}
.host-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:56px;height:56px;border-radius:28px;border:none;background:rgba(255,255,255,0.94);backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .16s ease,opacity .25s ease}
.host-img:hover .host-play{transform:translate(-50%,-50%) scale(1.07)}
.host-play .matsym{font-size:28px;color:var(--ink)}
.host-img.playing .host-play{opacity:0;pointer-events:auto}
.host-img.playing:hover .host-play{opacity:1}
.host-tape{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:rgba(10,10,10,0.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);font-size:9px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.host-tape .dot{width:5px;height:5px;border-radius:3px;background:var(--red)}
.host-body{padding:20px 2px 0}
.host q{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-0.018em;line-height:1.38;quotes:'“' '”';text-wrap:pretty}
.host .who{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:700}
.host .who .sub{color:var(--dim);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--warm);border:1px solid var(--line);font-size:11.5px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.chip .matsym{font-size:14px}
.dark .chip,.hero .chip{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.22);color:#fff}

.split{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.split>div{padding:32px 30px 36px}
.split .col-a{background:var(--cream)}
.split .col-b{background:var(--paper)}
.split h3{font-size:13px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;margin:0 0 20px}
.split ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.split li{display:flex;gap:11px;font-size:15.5px;font-weight:600;line-height:1.45;text-wrap:pretty}
.split li .matsym{font-size:19px;flex-shrink:0;margin-top:1px}
.split .col-a li{color:var(--dim)}

.cats{display:flex;gap:10px;flex-wrap:wrap}
.cat{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:14px;background:var(--paper);border:1px solid var(--line);font-size:15px;font-weight:700;letter-spacing:-0.01em}
.cat .matsym{font-size:20px}

/* ── why-video collage ────────────────────────────────────── */
/* Two real tapes plus the payoff still: host asking, guest applying, crew
   who met that way. They autoplay muted (browsers require it) — the section's
   claim is about video, so a static still would undercut it. */
.tape-cell{position:relative;border-radius:16px;overflow:hidden;background:var(--warm);aspect-ratio:9/16}
.tape-cell.tall{grid-row:span 2;aspect-ratio:auto;min-height:420px}
.tape-cell.square{aspect-ratio:1}
.tape-cell video,.tape-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tape-role{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;height:23px;padding:0 10px;border-radius:999px;background:rgba(10,10,10,0.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);font-size:9px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.tape-sound{position:absolute;right:10px;bottom:10px;z-index:2;width:38px;height:38px;border-radius:19px;border:none;background:rgba(10,10,10,0.5);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .16s ease}
.tape-sound:hover{transform:scale(1.07)}
.tape-sound .matsym{font-size:19px;color:#fff}

/* ── footer ─────────────────────────────────────────── */
footer{background:var(--ink);color:var(--paper);padding:84px 0 40px}

/* Closing CTA — the four-hands high five sits behind it, faint. It's the
   payoff image, so it belongs on the last thing you read before the store
   badges. Kept far back (low opacity + ink wash) so white type on it never
   loses contrast. */
#get{position:relative;overflow:hidden;isolation:isolate}
#get::before{content:'';position:absolute;inset:0;z-index:-2;background:url('media/footer-volleyball.png') center 30%/cover no-repeat;opacity:0.62}
#get::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,0.4) 0%,rgba(10,10,10,0.2) 45%,rgba(10,10,10,0.55) 100%)}
/* Both ledes sit at 17px/500 over bright, high-key photography, so the
   .dark alpha fails AA there. Full white on the same samples clears it
   without darkening the images. */
#get .d2,#get .lede{text-shadow:0 2px 24px rgba(10,10,10,0.6)}
#get .lede,.reel .lede{color:#fff}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-logo img{height:40px;width:auto;filter:invert(1)}
.foot-col h4{font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.44);margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,0.82)}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.14);font-size:13px;font-weight:600;color:rgba(255,255,255,0.44)}

/* ── legal pages ────────────────────────────────────── */
.legal-hero{padding:clamp(64px,7vw,108px) 0 clamp(36px,4vw,56px);border-bottom:1px solid var(--line)}
.legal-body{padding:clamp(48px,5vw,76px) 0 clamp(80px,9vw,132px)}
.legal-body h2{font-family:var(--font-display);font-size:clamp(23px,2.2vw,31px);font-weight:800;letter-spacing:-0.02em;margin:56px 0 14px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-0.012em;margin:32px 0 10px}
.legal-body p,.legal-body li{font-size:16.5px;font-weight:500;line-height:1.7;color:var(--body);text-wrap:pretty}
.legal-body p{margin:0 0 16px}
.legal-body ul{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.legal-body strong{color:var(--ink);font-weight:700}
.legal-body .note{padding:20px 22px;border-radius:14px;background:var(--cream);border:1px solid var(--line);margin:0 0 24px}
.legal-body .note p:last-child{margin:0}

/* ── secondary-page nav ───────────────────────────────
   These pages never receive .solid — that class comes from index.html's
   scroll listener, which they do not load. So the fixed nav stayed fully
   transparent over a white page and the inverted logo went white-on-white.
   Frosted rather than opaque, so the page still reads as continuous. */
body.legal header.nav{background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border-bottom-color:var(--line)}
body.legal .nav-logo img{filter:none}
body.legal .nav-links a{color:var(--ink)}
body.legal .nav-links a:hover{color:var(--body)}
/* Clear the 88px fixed nav. The old floor was 64px, so on a short viewport
   the h1 sat underneath it. */
body.legal .legal-hero{padding-top:calc(88px + clamp(28px,3vw,52px))}

/* ── end-of-page CTA ──────────────────────────────────
   The legal pages are long and used to dead-end in the footer with no way
   into the app. */
.legal-cta{margin:0 0 clamp(56px,6vw,96px);padding:clamp(32px,4vw,52px) clamp(22px,4vw,48px);
  border-radius:22px;background:var(--cream);border:1px solid var(--line);text-align:center}
.legal-cta h2{font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);font-weight:800;
  letter-spacing:-0.025em;line-height:1.1;margin:0 0 10px;color:var(--ink)}
.legal-cta p{font-size:16.5px;font-weight:500;line-height:1.6;color:var(--body);
  margin:0 auto 22px;max-width:46ch}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.toc a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--warm);border:1px solid var(--line);font-size:13px;font-weight:700}
.toc a:hover{background:var(--line)}

@media(max-width:900px){
  /* ---- Mobile menu -------------------------------------------------
     A disclosure, not a modal: the panel covers the viewport, so nothing
     behind it is reachable and a focus trap would be ceremony. It is
     visibility:hidden when shut so its links leave the tab order rather
     than sitting there invisible but focusable. */
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;
    position:relative;z-index:2;margin-left:auto;margin-right:-12px;
    width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer}
  .nav-burger-box{display:block;position:relative;width:22px;height:14px}
  .nav-burger-box span{position:absolute;left:0;width:100%;height:2px;
    border-radius:2px;background:#fff;transition:transform .26s ease,background .25s ease}
  header.nav.solid .nav-burger-box span{background:var(--ink)}
  .nav-burger-box span:first-child{top:0}
  .nav-burger-box span:last-child{bottom:0}
  html.nav-open .nav-burger-box span:first-child{transform:translateY(6px) rotate(45deg)}
  html.nav-open .nav-burger-box span:last-child{transform:translateY(-6px) rotate(-45deg)}

  .nav-right{position:fixed;inset:0;z-index:1;margin:0;background:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    padding:calc(88px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right))
            calc(40px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .24s ease,transform .24s ease,visibility 0s .24s}
  html.nav-open .nav-right{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-links{display:flex;flex-direction:column;gap:0;font-size:30px}
  /* 56px rows: comfortably past the 44px minimum without looking spaced-out. */
  .nav-links a{display:flex;align-items:center;min-height:56px;letter-spacing:-0.02em}
  .nav-cta{margin-top:28px;display:inline-flex;align-items:center;height:52px;padding:0 26px;font-size:16px}
  .nav-right .btn-ink{margin-top:28px;display:inline-flex;align-items:center;height:52px;
    padding:0 26px;font-size:16px;background:#fff;color:var(--ink)}
  body.legal .nav-burger-box span{background:var(--ink)}
  /* body.legal paints the nav links ink for the white docked bar. Inside the
     open ink panel that is black-on-black, so put them back to white. */
  html.nav-open body.legal .nav-links a{color:#fff}
  html.nav-open body.legal .nav-links a:hover{color:rgba(255,255,255,0.7)}
  html.nav-open body.legal .nav-burger-box span{background:#fff}
  .split{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:640px){
  .wrap,.narrow{padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right))}
  /* Clear the home indicator so the last row is not half-swipeable. */
  .foot{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  /* 44px is the floor for anything you tap. The ticks keep their 30x3 look
     and gain the hit area through a pseudo-element instead. */
  .tape-sound{width:44px;height:44px;border-radius:22px}
  .toc a{height:44px}
  .hs-tick{position:relative}
  .hs-tick::after{content:'';position:absolute;inset:-20px -7px}
  .foot-top{grid-template-columns:1fr}
  /* The nav is fixed at 88px but section top padding is only 80px here,
     so a footer anchor jump lands the heading underneath it. Desktop
     escapes this because its section padding grows past the nav. */
  section[id]{scroll-margin-top:96px}

  /* ---- Mobile hero ----------------------------------------------------
     The desktop hero is two columns; on a phone it collapses into a tower
     of seven blocks and nothing but the headline is above the fold. So the
     supporting detail steps back and the photo, headline and tape stay. */

  /* The photo becomes a picture instead of a backdrop.
     Why: a 375px-wide window over a 1448px-wide group shot shows about 30%
     of it no matter where you set background-position — pan out and you get
     the dark ceiling, pan in and you get one face. Ratio-matching a short
     block instead (375x340 is 1.10 against the image's 1.33) shows ~83% of
     the frame, so the whole table survives. The copy then sits on solid ink
     underneath, which also ends the contrast fight over the headline. */
  /* The global `section{padding:clamp(80px,...)}` was inert while .hero-bg
     was absolutely positioned; putting the photo in flow exposed it and
     pushed the picture 80px clear of the scrim above it. */
  .hero{display:block;min-height:0;overflow:visible;padding:0}
  .hero-in{padding-top:28px;padding-bottom:40px;background:var(--ink)}
  .hero .store{margin-top:24px!important}
  .hero .lede{font-size:16px;line-height:1.5}

  /* The headline carries the screen alone; the eyebrow is a desktop nicety. */
  .hero .eyebrow{display:none}
  /* Third sentence is a desktop measure — five lines on a 390px phone. */
  .lede-more{display:none}
  /* The HOST VIDEO tag on the phone already says what this is. */
  .tape-head{display:none}

  /* Chips earn their space: four words each, and they answer the three
     objections a stranger has right where the download buttons are. One
     row that scrolls beats two rows that wrap. */
  .hero-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin-right:-20px;padding-right:20px}
  .hero-chips::-webkit-scrollbar{display:none}
  .hero-chips .chip{flex:0 0 auto}

  /* Show only the store the visitor can actually use. Guarded on the class
     so no-JS shows both rather than none. */
  html.ios .badge-play{display:none}
  html.android .badge-apple{display:none}

  /* ---- Art-directed crops --------------------------------------------
     Every one of these images is landscape on `cover`. In a portrait
     viewport the browser scales to fill the height and slices a narrow
     column out of the middle, which is where the people are not. */
  .hero-bg{position:relative;height:min(48svh,340px);
    background-size:cover;background-position:50% 44%}
  /* Shade only the top of the photo — just enough to hold the white logo of
     the fixed nav. The old full-height scrim has nothing left to protect. */
  .hero-scrim{height:min(48svh,340px);bottom:auto;background:linear-gradient(
    180deg,rgba(10,10,10,0.55) 0%,rgba(10,10,10,0.14) 32%,rgba(10,10,10,0) 60%)}
  #get::before{background-position:52% 34%}
  .tape-cell img,.tape-cell video{object-position:50% 28%}
  .host-img img,.host-img video{object-position:50% 22%}
}