@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --bg: #0a0a0a;
  --ink: #f5f2ee;
  --muted: #a39d95;
  --line: rgba(245, 242, 238, .12);
  --accent: #ff5000;
  --accent-hi: #ff7a3d;
  --rec: #ff2d2d;
  --card: #141414;
  --gutter: 20px;
  --head: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 var(--head);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }

.kicker {
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* In-app browser hint */
.inapp {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 8px) 44px 8px 16px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; text-align: center;
}
.inapp[hidden] { display: none; }
.inapp button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: none;
  font-size: 22px; color: var(--bg); cursor: pointer;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
/* The reel fills the top of the screen and fades to black, so the copy
   always sits on solid ground and never fights the reel's own subtitles. */
.hero-video {
  position: absolute; top: 0; left: 0; z-index: -2;
  width: 100%; height: 64svh; object-fit: cover; object-position: center 20%;
}
.hero-shade {
  position: absolute; top: 0; left: 0; right: 0; height: 64svh; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 20%),
    linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(10,10,10,.6) 22%, rgba(10,10,10,0) 50%);
}
/* Desktop: the reel becomes a phone-shaped panel beside the copy. */
@media (min-width: 700px) {
  .hero { justify-content: center; }
  .hero-video {
    left: auto; right: 6vw; top: 50%; transform: translateY(-50%);
    width: min(36vw, 460px); height: auto; aspect-ratio: 3 / 4;
    border-radius: 24px; border: 1px solid var(--line);
    box-shadow: 0 30px 80px -20px rgba(255, 80, 0, .35);
  }
  .hero-shade { display: none; }
  .hero-copy { padding-left: 6vw; max-width: 52vw; }
}
.slate {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top) + 18px) var(--gutter) 0;
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.brand { font: 800 15px/1 var(--head); letter-spacing: .02em; text-transform: none; }
.rec { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.rec i, .dock-name i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rec);
  box-shadow: 0 0 10px var(--rec);
  animation: blink 1.2s steps(2, start) infinite;
}
.rec b { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .85; }
@keyframes blink { to { visibility: hidden; } }

.hero-copy {
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom) + 34px);
  max-width: 640px;
}
.hero h1 {
  margin: 12px 0 10px;
  font: 800 clamp(38px, 10.5vw, 72px)/1 var(--head);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.lede { color: var(--muted); font-size: 18px; max-width: 30ch; }

/* The button. Every road on the page ends here. */
.cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; margin-top: 24px; padding: 0 28px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font: 800 18px/1 var(--head); letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 10px 40px -8px rgba(255, 80, 0, .65);
  transition: transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta span { transition: transform .2s ease; }
.cta:hover { background: #e64800; transform: translateY(-2px); box-shadow: 0 16px 48px -8px rgba(255, 80, 0, .8); }
.cta:hover span { transform: translateX(4px); }
.cta:active { transform: scale(.97); }
.cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.2s ease-in-out 1.2s infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (min-width: 700px) { .cta { width: auto; display: inline-flex; } }

.proof {
  margin-top: 14px; text-align: center;
  font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted);
}
.proof b { color: var(--ink); font-weight: 500; }
@media (min-width: 700px) { .proof { text-align: left; } }

/* Tapes carousel */
section { padding: 64px 0; }
.section-head, .last { padding-left: var(--gutter); padding-right: var(--gutter); }
h2 {
  margin-top: 10px;
  font: 800 clamp(30px, 8vw, 48px)/1.05 var(--head);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.reel {
  display: flex; gap: 14px;
  margin-top: 28px; padding: 0 var(--gutter) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.tape {
  flex: 0 0 84%; max-width: 420px;
  scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.tape:active { transform: scale(.98); }
.tape:hover { border-color: rgba(255, 80, 0, .6); }
.tape figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.tape img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tape:hover img { transform: scale(1.04); }
.tape figcaption {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 6px;
  background: rgba(10,10,10,.7); backdrop-filter: blur(6px);
  font: 500 11px/1 var(--mono); letter-spacing: .1em;
}
.tape figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.tape-body { padding: 16px 18px 18px; }
.tape h3 { font: 800 22px/1.1 var(--head); letter-spacing: -.01em; }
.tape p { margin-top: 8px; color: var(--muted); font-size: 16px; font-style: italic; min-height: 3em; }
.tape .watch {
  display: inline-block; margin-top: 14px;
  font: 700 15px/1 var(--head); color: var(--accent);
}
.swipe {
  margin-top: 14px; padding: 0 var(--gutter);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Last call */
.last { text-align: center; padding-top: 40px; padding-bottom: 72px; }
.last h2 { max-width: 16ch; margin: 0 auto; }

footer {
  padding: 28px var(--gutter) calc(env(safe-area-inset-bottom) + 110px);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); text-align: center;
}
footer p + p { margin-top: 6px; }

/* Sticky dock: the button is always one thumb away */
.dock {
  position: fixed; left: 12px; right: 12px; z-index: 20;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(20, 20, 20, .82); backdrop-filter: blur(14px);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.dock.on { transform: translateY(0); }
.dock-name { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--head); white-space: nowrap; }
.cta-sm { width: auto; min-height: 46px; margin: 0; padding: 0 20px; font-size: 15px; box-shadow: none; }
@media (min-width: 700px) { .dock { left: 50%; right: auto; width: 520px; margin-left: -260px; } }

@media (prefers-reduced-motion: reduce) {
  .cta::after, .rec i, .dock-name i { animation: none; }
}

/* Desktop: one centred 1200px column, cards as a grid, steps side by side. */
@media (min-width: 900px) {
  :root { --edge: max(6vw, calc((100vw - 1200px) / 2)); }
  .slate { padding-left: var(--edge); padding-right: var(--edge); }
  .hero-copy { padding-left: var(--edge); max-width: calc(var(--edge) + 620px); }
  .hero h1 { font-size: clamp(56px, 5.6vw, 84px); }
  .lede { font-size: 20px; }
  .hero-video { right: var(--edge); width: min(34vw, 440px); aspect-ratio: 4 / 5; }

  section { padding: 110px 0; }
  .section-head, .last { padding-left: var(--edge); padding-right: var(--edge); }
  .reel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    overflow: visible; padding: 0 var(--edge);
  }
  .tape { max-width: none; }
  .swipe { display: none; }

  .last { padding-bottom: 120px; }
}

/* Vault wall: two rows of locked tapes sliding past forever. Each track holds
   its tiles twice, so moving it by -50% loops without a seam. */
.wall { position: relative; padding: 40px 0 56px; overflow: hidden; }
.wall-row { overflow: hidden; }
.wall-row + .wall-row { margin-top: 12px; }
.wall-track {
  display: flex; gap: 12px; width: max-content;
  animation: wall 46s linear infinite;
}
.wall-row-rev .wall-track { animation-direction: reverse; animation-duration: 54s; }
@media (hover: hover) { .wall:hover .wall-track { animation-play-state: paused; } }
@keyframes wall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.wall-track { will-change: transform; backface-visibility: hidden; }
.wall-row { contain: paint; touch-action: pan-y; }
.vault {
  position: relative; flex: 0 0 auto;
  width: 132px; aspect-ratio: 9 / 16;
  border-radius: 14px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
}
.vault video, .vault img { width: 100%; height: 100%; object-fit: cover; }
.vault::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,.85) 100%);
}
.vault.locked img, .vault.locked video { filter: blur(7px) brightness(.7); transform: scale(1.12); }
.vault-tag {
  position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--ink);
}
.vault-lock {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,10,10,.6); backdrop-filter: blur(4px);
}
.vault-lock svg { width: 15px; height: 15px; fill: var(--ink); }
.wall::before, .wall::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 18vw; z-index: 2; pointer-events: none;
}
.wall::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.wall::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.wall-copy { position: relative; z-index: 3; padding: 32px var(--gutter) 0; text-align: center; }
.wall-copy h2 { margin: 0 auto; max-width: 14ch; }
.wall-copy h2 b { color: var(--accent); }
@media (min-width: 900px) {
  .vault { width: 180px; }
  .wall-copy .cta { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .wall-track { animation: none; } }

.dock-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cta-sm { white-space: nowrap; flex: 0 0 auto; }
.dock-name { font: 500 12px/1 var(--mono); letter-spacing: .14em; }

/* Casting sheet: a paper form that tells the story in two timestamps. */
.sheet-wrap {
  padding: 72px var(--gutter);
  border-top: 1px solid var(--line);
  display: grid; gap: 44px;
}
.sheet {
  position: relative;
  max-width: 420px; width: 100%; margin: 0 auto;
  padding: 22px 22px 76px;
  background: #f1ece3; color: #1b1814;
  border-radius: 4px;
  transform: rotate(-1.6deg);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.04) inset;
  font: 500 14px/1.3 var(--mono);
}
.sheet::before {
  content: ''; position: absolute; top: -10px; left: 50%; width: 92px; height: 22px; margin-left: -46px;
  background: rgba(255, 236, 200, .55); transform: rotate(2deg);
}
.sheet-head {
  display: flex; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 2px solid #1b1814;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.sheet dl > div {
  display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px dashed rgba(27,24,20,.25);
}
.sheet dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7a7166; }
.sheet dd { font-size: 15px; }
.redact { display: inline-block; width: 120px; height: 15px; background: #1b1814; vertical-align: middle; }
.sheet .note { font: 600 22px/1.15 'Caveat', cursive; color: #1d3fa8; }
.stamp {
  position: absolute; right: 22px; bottom: 20px;
  padding: 6px 12px; border: 3px solid var(--rec); border-radius: 6px;
  font: 800 18px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--rec);
  transform: rotate(-12deg); opacity: .85; mix-blend-mode: multiply;
}
.sheet-copy { text-align: center; }
.sheet-copy h2 { max-width: 15ch; margin-left: auto; margin-right: auto; }
.sheet-copy .lede { margin: 12px auto 0; }
@media (min-width: 900px) {
  .sheet-wrap {
    grid-template-columns: 1fr 1fr; align-items: center; gap: 80px;
    padding: 120px var(--edge);
  }
  .sheet { margin: 0 0 0 auto; }
  .sheet-copy { text-align: left; }
  .sheet-copy h2, .sheet-copy .lede { margin-left: 0; }
}
.last .lede { margin: 12px auto 0; }

/* ── One-screen page ───────────────────────────────────────────────────────
   Reel, two lines, the wall, then the button lowest on the screen where the
   thumb rests. The reel and every tile open the same link as the button. */
.has-hint .slate { padding-top: calc(env(safe-area-inset-top) + 52px); }
.one .screen { min-height: 100svh; display: flex; flex-direction: column; }
.stage {
  position: relative; display: block; flex: 1 1 auto; min-height: 36svh;
  overflow: hidden; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.stage-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%),
    linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 40%);
}
.play-chip {
  position: absolute; right: var(--gutter); bottom: 58px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  background: rgba(10,10,10,.55); backdrop-filter: blur(8px);
  font: 700 13px/1 var(--head); color: var(--ink);
}
.play-chip svg { width: 14px; height: 14px; fill: var(--ink); }
.pitch { position: relative; padding: 0 var(--gutter); margin-top: -44px; pointer-events: none; }
.one h1 { font: 800 clamp(32px, 9vw, 64px)/1.02 var(--head); letter-spacing: -.03em; text-wrap: balance; }
.one .lede { margin-top: 8px; font-size: 17px; max-width: 34ch; color: #cfc9c1; text-wrap: pretty; }
.wall-one { padding: 16px 0 0; flex: 0 0 auto; }
.wall-one::before, .wall-one::after { width: 10vw; }
.wall-one .vault { width: 76px; border-radius: 10px; }
.wall-one .vault-tag { left: 6px; right: 6px; bottom: 6px; font-size: 8px; }
.wall-one .vault-tag span + span { display: none; }
.wall-one .vault-lock { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.wall-one .vault-lock svg { width: 10px; height: 10px; }
.wall-one .wall-track { animation-duration: 60s; }
.act { padding: 14px var(--gutter) calc(env(safe-area-inset-bottom) + 14px); }
.act .cta { margin-top: 0; }
.cta.going { opacity: .85; }
.proof { margin-top: 10px; font-size: 13px; }
.proof b { color: var(--accent); }
.iab-note { margin-top: 6px; text-align: center; font: 500 11px/1.3 var(--mono); color: var(--muted); }

/* Reels carry burned-in subtitles low in the frame, exactly where the headline sits on a
   phone. Let the video run past the stage's bottom edge so the subtitle band is cut off. */
@media (max-width: 700px) {
  .one .stage-video { height: 128%; object-position: center top; }
}

/* On a phone the copy wrapper dissolves, so the wall can sit between the two halves. */
.copy { display: contents; }
@media (max-width: 899.98px) {
  .one .stage { order: 1; } .one .pitch { order: 2; } .one .wall-one { order: 3; } .one .act { order: 4; }
}

@media (hover: hover) {
  .vault { transition: transform .2s ease, border-color .2s ease; }
  .vault:hover { transform: scale(1.04); border-color: var(--accent); }
  .vault:hover .vault-lock { background: var(--accent); }
}

@media (min-width: 900px) {
  /* The copy and the reel are one group, centred on the page with the same air on
     both sides. The copy column is as wide as the headline (about 7em of it), the
     reel column as wide as the panel; the gap between them is a fixed 96px. */
  .one .screen {
    --h1: clamp(56px, 6vw, 96px);
    --copy-w: calc(var(--h1) * 7.1);
    --reel-h: min(500px, calc(100svh - 300px));
    --reel-w: calc(var(--reel-h) * .8);
    --gx: max(var(--edge), calc((100vw - var(--copy-w) - 96px - var(--reel-w)) / 2));
    display: grid; grid-template-columns: var(--copy-w) var(--reel-w); justify-content: stretch;
    grid-template-rows: 1fr auto 1fr auto; column-gap: 96px; padding: 28px var(--gx) 0;
  }
  .one .stage {
    grid-column: 2; grid-row: 2; align-self: start;
    height: var(--reel-h); width: var(--reel-w); aspect-ratio: 4 / 5; min-height: 0; justify-self: end;
    border-radius: 24px; border: 1px solid var(--line);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  }
  /* A portrait reel on a landscape screen leaves dead black on both sides. The
     reel's own frame, blurred, glows behind it (the Shorts / TikTok-web trick),
     so the hero is lit by what it shows and changes with the daily reel. */
  .one { position: relative; isolation: isolate; }
  .one::before {
    content: ''; position: fixed; z-index: -1; pointer-events: none;
    top: 0; right: calc(var(--gx, 10vw) - 12vw); width: 54vw; height: 56vh;
    background: var(--hero-poster) center / cover no-repeat;
    filter: blur(90px) saturate(1.4); opacity: .62; border-radius: 50%;
  }
  .one .stage .slate { padding: 16px 18px 0; }
  /* The copy sits beside the reel here, not over it: only the label needs a shade. */
  .one .stage-shade { background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%); }
  .play-chip {
    left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) scale(.9);
    padding: 14px 20px 14px 16px; font-size: 16px; background: var(--accent); opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
  }
  .play-chip svg { width: 18px; height: 18px; }
  .stage:hover .play-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  /* The copy block sits on the reel's vertical centre, button directly under the copy. */
  .one .copy { display: block; grid-column: 1; grid-row: 2; align-self: center; }
  .one .pitch { margin: 0; padding: 0; }
  .one h1 { font-size: var(--h1); }
  .one .lede { margin-top: 14px; font-size: 22px; max-width: 30ch; }
  .one .act { padding: 40px 0 0; width: fit-content; }
  .one .act .cta { min-height: 72px; padding: 0 44px; font-size: 22px; }
  .one .proof, .one .iab-note { text-align: center; }
  .wall-one { grid-column: 1 / -1; grid-row: 4; margin: 0 calc(var(--gx) * -1); padding: 28px 0 24px; }
  .wall-one .vault { width: clamp(90px, 13svh, 120px); }
  .wall-one .wall-track { animation-duration: 90s; }
}