*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green: #9ad68a;
  --dark: #1d1e1e;
  --dark-2: #333434;
  --text: #f0efe8;
  --text-muted: rgba(240, 239, 232, 0.4);
}

html, body {
  height: 100%;
}

body {
  background: var(--dark);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── page ── */
.page {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

/* ── doc-main ── */
.doc-main {
  width: 100%;
  max-width: 640px;
}

/* ── doc-header ── */
.doc-header {
  margin-bottom: 2rem;
}

.doc-header a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── doc-title ── */
.doc-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

/* ── doc-updated ── */
.doc-updated {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* ── doc-body ── */
.doc-body h2 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
}

.doc-body h3 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.4rem;
}

.doc-body p {
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.85;
  margin-bottom: 0.9rem;
}

.doc-body ul,
.doc-body ol {
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
}

.doc-body li {
  margin-bottom: 0.35rem;
}

.doc-body strong {
  font-weight: 600;
}

.doc-body a {
  color: var(--green);
}

/* ── doc-back ── */
.doc-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--green);
  text-decoration: none;
}

/* ── footer ── */
.footer {
  text-align: center;
  padding: 1.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.footer a {
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .page {
    padding: 4rem 1.5rem;
  }
}

/* ══ video page (/v/<slug>) ══════════════════════════════════════════════ */

/* ── video-page ── */
/* Deliberately a full viewport on its own, which pushes the footer below the
   fold. Terms and Privacy are worth a scroll; the video and the download panel
   are not, so they get the whole first screen. */
.video-page {
  min-height: 100dvh;
  padding: 1.25rem 1.25rem 1rem;
}

/* ── video-main ── */
.video-main {
  --stage-max-width: 420px;
  width: 100%;
  max-width: var(--stage-max-width);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* ── video-header ── */
.video-header {
  text-align: center;
}

/* ── brand-lockup ── */
/* The cat sits behind the wordmark so only its chin and whiskers are hidden —
   favicon.svg is cropped at the chin, which reads as peeking rather than as a
   floating head.
   The overlap is derived from the cat's own size rather than hard-coded, so
   changing --cat-width at any breakpoint keeps the same tuck.
   In favicon.svg the green eyes run from 50.6% to 85.6% of the artwork's
   height. --cat-reveal is where the wordmark's top edge lands, so the fraction
   of the eyes covered is (0.856 - reveal) / 0.35 — at 0.79 that is about a
   fifth of them. Keep it above ~0.72 or the eyes are more hidden than shown. */
.brand-lockup {
  --cat-width: 67px;
  --cat-aspect: 1.646;  /* favicon.svg viewBox: 83.76 x 50.82 */
  --cat-reveal: 0.79;   /* wordmark edge; covers ~1/5 of the eyes */
  position: relative;
  display: inline-block;
  padding-top: calc(var(--cat-width) / var(--cat-aspect) * var(--cat-reveal));
  line-height: 0;
}

.brand-cat {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cat-width);
  z-index: 0;
}

.brand-wordmark {
  position: relative;
  display: block;
  width: 142px;
  z-index: 1;
}

/* ── video-stage ── */
/* Absorbs whatever vertical room the rest of the page leaves rather than taking
   a fixed share of the viewport, so the video is as large as it can be while
   the CTA panel stays above the fold. Width follows from the 9:16 ratio. */
.video-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  height: auto;
  width: auto;
  max-width: 100%;
  /* Without this, a very tall viewport grows the stage past what its own
     max-width can match and the 9:16 box distorts, over-cropping the video. */
  max-height: calc(var(--stage-max-width) * 16 / 9);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: var(--dark-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── video-player ── */
.video-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── sound-chip ── */
/* Frosted glass rather than brand green: the download panel is the only thing
   on this page allowed to be the loudest. The chip carries its "there is audio
   here" signal with motion (bouncing bars) instead of saturation. */
.sound-chip {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  padding: 0 0.6rem;
  border: none;
  border-radius: 999px;
  background: rgba(29, 30, 30, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: gap 0.25s ease, padding 0.25s ease;
}

/* ── sound-bars ── */
.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.85rem;
}

.sound-bars i {
  display: block;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--green);
  transform-origin: bottom;
  animation: sound-bounce 0.9s ease-in-out infinite;
}

.sound-bars i:nth-child(2) { animation-delay: 0.15s; }
.sound-bars i:nth-child(3) { animation-delay: 0.3s; }

@keyframes sound-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* ── sound-label ── */
/* Present for the first few seconds, then removed by the inline script. */
.sound-label {
  display: none;
}

.sound-chip.is-expanded .sound-label {
  display: block;
}

/* ── video-meta ── */
.video-meta {
  text-align: center;
}

.video-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

/* Sized to keep a short blurb on one line at 375px — keep blurbs in
   content/videos.tsv terse enough to fit. */
.video-blurb {
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.7;
}

/* ── cta-panel ── */
/* Apple forbids recolouring or animating their badge, so the contrast comes
   from the panel behind it. Black badge on brand green is their preferred
   variant and far more legible than black on #1d1e1e. */
.cta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem 0.95rem;
  border-radius: 18px;
  background: var(--green);
  text-decoration: none;
}

.cta-panel.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* ── cta-pitch ── */
.cta-pitch {
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ── cta-badge ── */
/* Apple's minimum onscreen height is 40px; clear space is >= 1/4 of the badge
   height, which the panel's padding and gap satisfy. Do not restyle. */
.cta-badge {
  display: block;
  width: auto;
  height: 48px;
}

@media (prefers-reduced-motion: reduce) {
  .sound-bars i {
    animation: none;
    transform: scaleY(0.7);
  }

  .sound-chip {
    transition: none;
  }
}

@media (min-width: 768px) {
  /* Only the cat's width changes; the overlap follows from it automatically. */
  .brand-lockup {
    --cat-width: 81px;
  }

  .brand-wordmark {
    width: 176px;
  }
}