/* ============================================================
   CARDETTA PAGE                                      (2026-09-24)
   Loaded on /apps/cardetta/ only, after styles.css and apps.css.

   Six chapters, each doing one thing at a time:
     1.  the film      a Blender render, pinned, played by scrolling;
     1b. your turn     five cards to turn over and grade;
     2.  the app       a phone that holds while the scroll steps it on;
     2b. everything    drifting card fronts, then five small moving
         else          pictures of what else the app does;
     3.  the promise   one card, its highlights marking themselves;
     4.  the close     the price with its full terms, and the sign-up.

   Colours come from the app ("The Pile", Docs/design/design-system.md
   in the Cardetta repo): the table, white card stock, one evergreen
   for "press this". Serif (Newsreader, for New York) for headlines
   and a card's own words; Mirentha's Outfit for everything else.
   The site header, footer and cluster bar stay the site's.
   Class prefix: cd-.
   ============================================================ */

.cd {
  --cd-table: #E7E5E0;
  --cd-card: #FFFFFF;
  --cd-edge: #8C877D;
  --cd-hair: #E3E0D9;
  --cd-ink: #16181D;
  --cd-ink-body: #33363C;
  --cd-ink2: #5B5F66;
  --cd-accent: #1F6F5B;
  --cd-accent-hover: #185A49;
  --cd-accent-ink: #185A49;
  --cd-accent-soft: rgba(31, 111, 91, 0.12);
  --cd-again: #C0392B;
  --cd-hard: #8F5E0F;
  --cd-easy: #2B5EA7;

  --cd-film: #070908;
  /* The film is drawn (deck_film.py, style "drawn"): flat sage ground with
     a paler pool where the light falls, ink lines. The hero's words sit on
     the same sage. */
  --cd-studio: #DCE7DF;
  --cd-pool: #EEF4EF;
  --cd-inkline: #23272D;
  --cd-wash: 220, 231, 223;
  --cd-night: #111312;
  --cd-night-ink: #F1F0EC;
  --cd-night-accent: #4FB397;

  --cd-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --cd-sans: 'Outfit', system-ui, sans-serif;
  --cd-app: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;

  --cd-wrap: 1320px;
  --cd-gutter: clamp(20px, 4.2vw, 56px);
  /* the left edge of the content column, inside any full-bleed stage */
  --cd-left: max(var(--cd-gutter), calc((100vw - var(--cd-wrap)) / 2));
  --cd-sec: clamp(96px, 11vw, 168px);
  --cd-radius: 14px;
  --cd-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--cd-film);
  color: var(--cd-ink);
}
.cd main { overflow-x: clip; }
.cd .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.cd-wrap {
  width: 100%;
  max-width: calc(var(--cd-wrap) + var(--cd-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--cd-gutter);
}
.cd :focus-visible { outline: 2px solid var(--cd-night-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- shared type and controls ---------- */
.cd-kicker {
  display: block;
  font-family: var(--cd-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cd-night-accent);
  margin-bottom: 0.9rem;
}
.cd-h2 {
  font-family: var(--cd-serif);
  font-weight: 360;
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--cd-ink);
}
.cd-h2 em { font-style: italic; }
.cd-h2--light { color: var(--cd-night-ink); }
.cd-center { text-align: center; }
/* A phrase kept whole where the line allows, so a headline breaks between
   its phrases ("One pile. / The right card on top.") and never inside one. */
.cd-ph { display: inline-block; }

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 1.75rem;
  border-radius: 26px;
  border: 0;
  font-family: var(--cd-sans);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s var(--cd-ease);
}
.cd-btn--primary { background: var(--cd-accent); color: #fff; }
.cd-btn--primary:hover { background: var(--cd-accent-hover); transform: translateY(-1px); }
.cd-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.25rem;
  font-family: var(--cd-sans);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
}
.cd-link svg { transition: transform 0.3s var(--cd-ease); }
.cd-link:hover svg { transform: translateY(3px); }
.cd-link--light { color: rgba(241, 240, 236, 0.9); }
.cd-link--light:hover { color: #fff; }
.cd-link--ink { color: var(--cd-ink); }
.cd-link--ink:hover { color: var(--cd-accent-ink); }

.cd-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--cd-radius);
  background: var(--cd-card);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
}
.cd-grade small { font-size: 12.5px; font-weight: 400; color: #62666D; }
.cd-grade--again { color: var(--cd-again); }
.cd-grade--hard { color: var(--cd-hard); }
.cd-grade--easy { color: var(--cd-easy); }
.cd-grade--good { background: var(--cd-accent); color: #fff; }
.cd-grade--good small { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   1. THE FILM
   ============================================================ */
.cd-film { position: relative; background: var(--cd-studio); color: var(--cd-ink); }
.cd-film-track { height: 620vh; }
.cd-film-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cd-film-media { position: absolute; inset: 0; }
.cd-film-media picture,
.cd-film-poster,
#cdFilm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cd-film-poster { object-fit: cover; transition: opacity 0.4s ease; }
/* (If the portrait film ever needs its top cropping, scale this from the
   bottom to match PORT_ZOOM in cardetta.js.) */
#cdFilm { opacity: 0; transition: opacity 0.4s ease; }
.cd-film.is-live #cdFilm { opacity: 1; }
.cd-film.is-live .cd-film-poster { opacity: 0; }
/* The film is framed with the cards in the gap to the right. At the left
   it fades to the flat sage it's drawn on, so the pool of light never
   shows behind the words; a soft glow covers a card passing behind. */
.cd-film-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(var(--cd-wash), 1) 0%,
    rgba(var(--cd-wash), 0.9) 26%,
    rgba(var(--cd-wash), 0) 44%);
}
.cd-film .cd-h1,
.cd-film .cd-lede,
.cd-film .cd-beat-title,
.cd-film .cd-beat-sub,
.cd-film .cd-beat-grades { text-shadow: 0 0 22px rgba(var(--cd-wash), 0.9), 0 0 2px rgba(var(--cd-wash), 0.6); }
.cd-film .cd-kicker { color: var(--cd-accent-ink); }
.cd-film .cd-kicker b { margin-right: 0.55em; font-weight: 600; font-variant-numeric: tabular-nums; }

.cd-beats { position: absolute; inset: 0; pointer-events: none; }
.cd-beat {
  position: absolute;
  left: var(--cd-left);
  bottom: clamp(56px, 11vh, 112px);
  width: min(40rem, 52vw);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.8s var(--cd-ease);
  pointer-events: none;
}
.cd-beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* Each line in its own place down the left, clear of the deck. */
.cd-beat[data-beat="2"] { top: clamp(104px, 17vh, 170px); bottom: auto; }
.cd-beat[data-beat="3"] { top: 50%; bottom: auto; transform: translateY(calc(-50% + 18px)); }
.cd-beat[data-beat="3"].is-on { transform: translateY(-50%); }
.cd-beat[data-beat="4"] { width: min(46rem, 50vw); }
.cd-beat--intro {
  top: 50%;
  bottom: auto;
  width: min(36rem, 46vw);
  margin-top: 28px; /* clears the floating site nav */
  transform: translateY(calc(-50% - 28px));
}
.cd-beat--intro.is-on { transform: translateY(-50%); }
.cd-beat-title {
  font-family: var(--cd-serif);
  font-weight: 360;
  font-size: clamp(2.3rem, 1.3rem + 3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--cd-ink);
  text-wrap: balance;
}
.cd-beat-title--xl { font-size: clamp(3.2rem, 1.2rem + 5.4vw, 6.6rem); line-height: 0.95; letter-spacing: -0.03em; }
.cd-beat-pre {
  display: block;
  margin-bottom: 0.25em;
  font-size: 0.42em;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--cd-accent-ink);
}
.cd-beat-sub {
  margin-top: 0.9rem;
  font-family: var(--cd-sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cd-ink-body);
  text-wrap: balance;
}
.cd-beat-grades {
  margin-top: 1.1rem;
  font-family: var(--cd-serif);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  font-style: italic;
  color: var(--cd-ink2);
}
.cd-beat-grades i { margin: 0 0.3em; font-style: normal; color: rgba(22, 24, 29, 0.3); }
.cd-beat-grades b {
  font-weight: 500;
  color: var(--cd-accent-ink);
  background: linear-gradient(transparent 64%, rgba(31, 111, 91, 0.16) 64%);
}

.cd-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.8rem;
  font-family: var(--cd-sans);
}
.cd-brand-icon {
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: -0.2rem;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08), 0 4px 10px -4px rgba(22, 24, 29, 0.35);
}
.cd-brand-name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--cd-ink); }
.cd-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 0.7rem;
  border-radius: 13px;
  background: var(--cd-accent-soft);
  color: var(--cd-accent-ink);
  font-size: 0.8rem;
  font-weight: 500;
}
.cd-h1 {
  font-family: var(--cd-serif);
  font-weight: 340;
  font-optical-sizing: auto;
  font-size: clamp(3rem, 1.1rem + 4.6vw, 6rem);
  line-height: 0.97;
  letter-spacing: -0.028em;
  color: var(--cd-ink);
}
.cd-h1 em { font-style: italic; }
.cd-h1 .cd-line { display: block; }
/* What it is, in one line under the promise. */
.cd-lede {
  margin-top: 1.4rem;
  font-family: var(--cd-sans);
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--cd-ink-body);
  text-wrap: balance;
}
.cd-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
}

.cd-rail {
  position: absolute;
  right: clamp(18px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-rail i {
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.06);
  transition: background 0.4s ease;
}
.cd-rail i.is-on { background: var(--cd-accent); }
.cd-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--cd-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(22, 24, 29, 0.55);
  transition: opacity 0.4s ease;
}
.cd-cue::after {
  content: '';
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(22, 24, 29, 0.5), transparent);
  transform-origin: top;
  animation: cd-cue 2.2s var(--cd-ease) infinite;
}
@keyframes cd-cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.cd-film.is-moving .cd-cue { opacity: 0; }

/* No JS, or reduced motion: the first frame with the promise over it, and
   the four lines as a list underneath. Nothing waits on scrolling. */
.no-js .cd-film-track,
.cd-film.is-static .cd-film-track { height: auto; }
.no-js .cd-film-stage,
.cd-film.is-static .cd-film-stage { position: relative; height: auto; overflow: visible; }
.no-js .cd-film-media,
.cd-film.is-static .cd-film-media { position: relative; height: 100vh; height: 100svh; }
/* The intro fills the first screen on its own, whatever follows it. */
.no-js .cd-beat--intro,
.cd-film.is-static .cd-beat--intro {
  top: 0;
  bottom: auto;
  height: 100vh;
  height: 100svh;
  margin-top: 0;
  padding-top: 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.no-js .cd-beats,
.cd-film.is-static .cd-beats {
  position: static;
  background: var(--cd-table);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  padding: 80px var(--cd-left) 96px;
  pointer-events: auto;
}
.no-js .cd-beats .cd-beat,
.cd-film.is-static .cd-beats .cd-beat { position: static; width: auto; opacity: 1; transform: none; }
.no-js .cd-rail, .no-js .cd-cue,
.cd-film.is-static .cd-rail, .cd-film.is-static .cd-cue { display: none; }

/* ============================================================
   2. THE APP
   ============================================================ */
.cd-story { background: var(--cd-table); color: var(--cd-ink); }
.cd-story-track { height: 440vh; }
.cd-story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.cd-story-grid {
  display: grid;
  /* The words and the phone as one centred pair, not pushed to the edges. */
  grid-template-columns: minmax(0, 32rem) auto;
  justify-content: center;
  column-gap: clamp(56px, 9vw, 140px);
  align-items: center;
}
.cd-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cd-sans);
  font-size: 0.82rem;
  color: var(--cd-ink2);
}
.cd-steps-bar { display: flex; gap: 6px; }
.cd-steps-bar i { width: 22px; height: 3px; border-radius: 2px; background: #C9C5BC; transition: background 0.4s ease; }
.cd-steps-bar i.is-on { background: var(--cd-accent); }
.cd-story-lines {
  position: relative;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  min-height: 15rem;
}
.cd-sline {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.7s var(--cd-ease);
}
.cd-sline.is-on { opacity: 1; transform: none; }
.cd-sline h3 {
  font-family: var(--cd-serif);
  font-weight: 360;
  font-size: clamp(2.3rem, 1.3rem + 3vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cd-sline p {
  margin-top: 1.1rem;
  max-width: 28rem;
  font-family: var(--cd-sans);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--cd-ink-body);
  text-wrap: balance;
}
.cd-story-phone { display: flex; justify-content: center; }
.cd-phonebox {
  --sp-phone-scale: 0.74;
  position: relative;
  width: calc(416px * var(--sp-phone-scale));
  height: calc(870px * var(--sp-phone-scale));
}
.cd-phonebox > .sp-device { transform: scale(var(--sp-phone-scale)); transform-origin: top left; }

.no-js .cd-story-track,
.cd-story.is-static .cd-story-track { height: auto; }
.no-js .cd-story-stage,
.cd-story.is-static .cd-story-stage { position: relative; height: auto; padding: var(--cd-sec) 0; }
.no-js .cd-story-lines,
.cd-story.is-static .cd-story-lines { min-height: 0; display: grid; gap: 2rem; }
.no-js .cd-sline,
.cd-story.is-static .cd-sline { position: static; opacity: 1; transform: none; }
.no-js .cd-sline h3,
.cd-story.is-static .cd-sline h3 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); max-width: none; }
.no-js .cd-steps,
.cd-story.is-static .cd-steps { display: none; }

/* ============================================================
   1b. YOUR TURN
   ============================================================ */
.cd-try {
  position: relative;
  padding: clamp(88px, 10vw, 140px) 0;
  color: var(--cd-ink);
  /* The film's drawn table: flat sage, with its paler pool of light. */
  background:
    radial-gradient(25% 38% at 70% 48%, var(--cd-pool) 0 99%, transparent 100%),
    var(--cd-studio);
}
.cd-try .cd-kicker { color: var(--cd-accent-ink); }
.cd-try .cd-h2--light { color: var(--cd-ink); }
.cd-try .cd-link--light { color: var(--cd-ink); }
.cd-try .cd-link--light:hover { color: var(--cd-accent-ink); }
.cd-try-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.cd-try-count {
  margin-top: 1.4rem;
  font-family: var(--cd-sans);
  font-size: 0.95rem;
  color: var(--cd-ink-body);
  font-variant-numeric: tabular-nums;
}
.cd-try-count span { font-weight: 600; color: var(--cd-ink); }

.cd-try-table { position: relative; display: flex; flex-direction: column; align-items: center; }
.cd-try-stage,
.cd-try-pile {
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 8 / 5;
}
.cd-try-stage { perspective: 1600px; }
.cd-try-pile { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
/* Drawn like the film: flat pastel cards with ink outlines. */
.cd-try-pile i {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid var(--cd-inkline);
  background: #FFFDF8;
  transition: opacity 0.4s ease;
}
.cd-try-pile i:nth-child(1) { transform: translate(-3px, 22px) rotate(-1.4deg); background: #C6DCF3; }
.cd-try-pile i:nth-child(2) { transform: translate(3px, 16px) rotate(0.9deg); background: #F7E4A3; }
.cd-try-pile i:nth-child(3) { transform: translate(-2px, 11px) rotate(-0.6deg); background: #F8CFB2; }
.cd-try-pile i:nth-child(4) { transform: translate(1px, 5px) rotate(0.4deg); background: #BFE6D3; }
.cd-try-pile i.is-gone { opacity: 0; }

/* The button slides and fades; the span inside it turns over. (Fading
   the element that holds the 3D turn would flatten it, and the front
   would show through backwards.) */
.cd-try-card {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1600px;
  transition: transform 0.6s var(--cd-ease), opacity 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}
.cd-try-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.75s var(--cd-ease);
}
.cd-try-card:focus-visible { outline: none; }
.cd-try-card:focus-visible .cd-try-face { box-shadow: 0 0 0 4px var(--cd-accent), 8px 10px 0 rgba(35, 39, 45, 0.1); }
.cd-try-card:hover:not(.is-flipped) .cd-try-flip { transform: translateY(-4px) rotateX(3deg); }
.cd-try-card.is-flipped { cursor: default; }
.cd-try-card.is-flipped .cd-try-flip { transform: rotateY(180deg); }
.cd-try-card.is-arriving { transform: translateY(22px) scale(0.965); opacity: 0; transition: none; }
.cd-try-card.is-arriving .cd-try-flip { transition: none; }
.cd-try-card.is-leaving { transform: translateX(115%) rotate(9deg); opacity: 0; transition: transform 0.6s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.5s ease 0.1s; }
.cd-try-card.is-under { transform: translateY(30px) scale(0.93); opacity: 0; transition: transform 0.5s ease, opacity 0.35s ease 0.1s; }
.cd-try-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 32px);
  border-radius: 14px;
  background: #FFFDF8;
  color: var(--cd-ink);
  text-align: left;
  border: 2px solid var(--cd-inkline);
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 8px 10px 0 rgba(35, 39, 45, 0.1);
}
.cd-try-back { transform: rotateY(180deg); }
.cd-try-deck { font-family: var(--cd-app); font-size: 12.5px; color: #62666D; }
.cd-try-q {
  margin: auto 0;
  font-family: var(--cd-serif);
  font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cd-try-q--small { margin: 14px 0 0; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); color: #62666D; }
.cd-try-rule { display: block; height: 1px; margin: 14px 0; background: var(--cd-hair); }
.cd-try-a {
  font-family: var(--cd-serif);
  font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  line-height: 1.2;
  text-wrap: pretty;
}

.cd-try-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: cd-rise 0.7s var(--cd-ease) both;
}
.cd-try-done[hidden] { display: none; }
.cd-try-done-title { font-family: var(--cd-serif); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.05; }
.cd-try-done-sub { margin-top: 0.6rem; font-family: var(--cd-sans); font-weight: 400; color: var(--cd-ink-body); }
.cd-try-done-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 1.5rem; }
.cd-try-done .cd-link { background: none; border: 0; cursor: pointer; }
@keyframes cd-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cd-try-controls { position: relative; width: min(480px, 100%); height: 60px; margin-top: 44px; }
.cd-try-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cd-sans);
  font-size: 0.92rem;
  color: var(--cd-ink-body);
  transition: opacity 0.3s ease;
}
.cd-try-grades {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s var(--cd-ease);
  font-family: var(--cd-app);
}
.cd-try-grades .cd-grade { border: 2px solid var(--cd-inkline); cursor: pointer; font-family: var(--cd-app); transition: transform 0.2s var(--cd-ease), filter 0.2s ease; }
.cd-try-grades .cd-grade:hover { transform: translateY(-2px); filter: brightness(1.04); }
.cd-try-table.is-flipped .cd-try-hint,
.cd-try-table.is-done .cd-try-hint { opacity: 0; }
.cd-try-table.is-flipped .cd-try-grades { opacity: 1; transform: none; pointer-events: auto; }
.cd-try-toast {
  position: absolute;
  left: 0;
  right: 0;
  top: -54px;
  text-align: center;
  font-family: var(--cd-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  color: var(--cd-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.5s var(--cd-ease);
  pointer-events: none;
}
.cd-try-toast.is-on { opacity: 1; transform: none; }

/* ============================================================
   2b. EVERYTHING ELSE
   ============================================================ */
.cd-more { padding: 0 0 var(--cd-sec); background: var(--cd-table); color: var(--cd-ink); }
.cd-drift {
  display: grid;
  gap: 18px;
  padding: clamp(56px, 7vw, 96px) 0 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.cd-drift-row {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 6px 0;
  animation: cd-drift 70s linear infinite;
}
.cd-drift-row--back { animation-duration: 85s; animation-direction: reverse; }
@keyframes cd-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cd-dcard {
  flex: none;
  display: flex;
  align-items: center;
  width: 240px;
  height: 128px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #FFFDF8;
  border: 2px solid var(--cd-inkline);
  box-sizing: border-box;
  font-family: var(--cd-serif);
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--cd-ink);
}
.cd-dcard:nth-child(5n + 2) { background: #BFE6D3; }
.cd-dcard:nth-child(5n + 4) { background: #F7E4A3; }
.cd-drift-row--back .cd-dcard:nth-child(5n + 2) { background: #F8CFB2; }
.cd-drift-row--back .cd-dcard:nth-child(5n + 4) { background: #C6DCF3; }
.cd-dcard:nth-child(3n + 1) { transform: rotate(-1.2deg); }
.cd-dcard:nth-child(3n + 2) { transform: rotate(0.8deg); }
.cd-dcard b { font-family: var(--cd-sans); font-weight: 500; color: var(--cd-accent); }
.cd-more .cd-h2 { margin-top: clamp(56px, 7vw, 96px); }

.cd-bento {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1120px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 0;
}
.cd-tile {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 26px;
  border-radius: 24px;
  background: var(--cd-card);
  box-shadow: 0 1px 0 rgba(22, 24, 29, 0.05);
}
.cd-tile--wide { grid-column: span 2; }
.cd-tile h3 {
  margin: 20px 6px 0;
  font-family: var(--cd-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cd-tile p {
  margin: 6px 6px 0;
  font-family: var(--cd-sans);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cd-ink-body);
}
.cd-art {
  position: relative;
  height: 168px;
  border-radius: 16px;
  background: #F3F1EC;
  overflow: hidden;
  font-family: var(--cd-app);
}
/* (::before too: the cloze's [...] is one, and left running on its own it
   drifts out of step with the answer it hands over to.) */
.cd-art *, .cd-art *::before { animation-play-state: paused !important; }
.cd-more.is-in .cd-art *, .cd-more.is-in .cd-art *::before { animation-play-state: running !important; }
.cd-more:not(.is-in) .cd-drift-row { animation-play-state: paused; }

/* Anki in, Anki out */
.cd-chip-file {
  position: absolute;
  top: 50%;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--cd-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--cd-ink);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(22, 24, 29, 0.08), 0 8px 16px -10px rgba(22, 24, 29, 0.5);
  animation: cd-file-in 7s var(--cd-ease) infinite;
}
.cd-chip-file--1 { margin-top: -54px; left: 6%; }
.cd-chip-file--2 { margin-top: -15px; left: 10%; animation-delay: 0.6s; }
.cd-chip-file--3 { margin-top: 24px; left: 4%; animation-delay: 1.2s; }
.cd-chip-file--out { margin-top: -16px; left: 72%; background: var(--cd-accent); color: #fff; animation-name: cd-file-out; }
@keyframes cd-file-in {
  0%, 8% { transform: none; opacity: 1; }
  30% { transform: translateX(150%) scale(0.7); opacity: 0; }
  31%, 55% { transform: none; opacity: 0; }
  70%, 100% { transform: none; opacity: 1; }
}
@keyframes cd-file-out {
  0%, 38% { transform: translateX(-120%) scale(0.7); opacity: 0; }
  56%, 100% { transform: none; opacity: 1; }
}
.cd-art-stack { position: absolute; left: 50%; top: 50%; width: 88px; height: 58px; margin: -29px 0 0 -44px; }
.cd-art-stack i {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--cd-card);
  box-shadow: 0 1px 0 rgba(22, 24, 29, 0.12);
}
.cd-art-stack i:nth-child(1) { transform: translate(-2px, 8px) rotate(-3deg); background: #E8E5DE; }
.cd-art-stack i:nth-child(2) { transform: translate(2px, 4px) rotate(2deg); background: #F0EEE8; }
.cd-art-stack i:nth-child(3) { animation: cd-stack 7s var(--cd-ease) infinite; }
.cd-art-stack i:nth-child(3)::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 22px;
  top: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--cd-accent);
  box-shadow: 0 9px 0 #C9C5BC, -0px 18px 0 #C9C5BC;
}
@keyframes cd-stack { 0%, 12%, 40%, 100% { transform: none; } 22% { transform: translateY(-4px); } }

/* Cloze */
.cd-art--cloze { display: flex; align-items: center; justify-content: center; padding: 0 18px; }
.cd-cloze-line { font-family: var(--cd-serif); font-size: 1.3rem; line-height: 1.35; text-align: center; color: var(--cd-ink); }
.cd-cloze-end { white-space: nowrap; } /* the full stop stays with the gap */
.cd-cloze-gap {
  position: relative;
  display: inline-block;
  min-width: 5.4em;
  border-bottom: 2px solid var(--cd-accent);
  color: var(--cd-accent);
  text-align: center;
}
.cd-cloze-gap > span { display: inline-block; animation: cd-cloze 4.5s ease infinite; }
.cd-cloze-gap::before {
  content: '[\2026]';
  position: absolute;
  left: 0;
  right: 0;
  font-family: var(--cd-sans);
  font-size: 0.85em;
  opacity: 0; /* at rest (and with reduced motion) the answer shows */
  animation: cd-cloze-hint 4.5s ease infinite;
}
/* The gap, then the answer, then a beat of nothing before it loops: the
   two never cross, so they never print over each other. */
@keyframes cd-cloze { 0%, 44% { opacity: 0; transform: translateY(6px); } 54%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes cd-cloze-hint { 0% { opacity: 0; } 6%, 36% { opacity: 1; } 42%, 100% { opacity: 0; } }

/* Pictures and your voice */
.cd-art--media { display: flex; align-items: center; justify-content: center; }
.cd-media-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--cd-card);
  box-shadow: 0 1px 0 rgba(22, 24, 29, 0.08), 0 10px 20px -14px rgba(22, 24, 29, 0.5);
}
.cd-media-pic {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 34% 40%, #2B8A6E 0 9px, transparent 10px),
    radial-gradient(circle at 66% 62%, #C58B3A 0 7px, transparent 8px),
    linear-gradient(135deg, #DCEBE5, #F3E6D2);
}
.cd-media-wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.cd-media-wave i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--cd-accent);
  transform-origin: 50% 50%;
  animation: cd-wave 1.1s ease-in-out infinite alternate;
}
.cd-media-wave i:nth-child(2n) { animation-duration: 0.8s; }
.cd-media-wave i:nth-child(3n) { animation-duration: 1.4s; }
.cd-media-wave i:nth-child(1), .cd-media-wave i:nth-child(9) { height: 40%; }
.cd-media-wave i:nth-child(4), .cd-media-wave i:nth-child(6) { height: 80%; }
@keyframes cd-wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* On every iPhone */
.cd-art--sync { display: flex; align-items: center; justify-content: center; gap: 54px; }
.cd-sync-phone {
  position: relative;
  width: 50px;
  height: 96px;
  border-radius: 12px;
  border: 3px solid #2A2D33;
  background: #FBFAF6;
}
.cd-sync-phone i { position: absolute; top: 5px; left: 50%; width: 16px; height: 5px; margin-left: -8px; border-radius: 3px; background: #2A2D33; }
.cd-sync-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 20px;
  margin: -10px 0 0 -15px;
  border-radius: 4px;
  background: var(--cd-accent);
  animation: cd-sync 3.2s ease-in-out infinite alternate;
}
@keyframes cd-sync { 0%, 15% { transform: translateX(-52px); } 85%, 100% { transform: translateX(52px); } }

/* No account */
.cd-art--private { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--cd-ink); }
.cd-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: #E8A33A; /* at rest: on */
  animation: cd-toggle-bg 4s ease infinite;
}
.cd-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateX(20px);
  animation: cd-toggle 4s ease infinite;
}
@keyframes cd-toggle { 0%, 25% { transform: none; } 40%, 100% { transform: translateX(20px); } }
@keyframes cd-toggle-bg { 0%, 25% { background: #D9D6CF; } 40%, 100% { background: #E8A33A; } }

/* ============================================================
   3. THE PROMISE
   ============================================================ */
.cd-promise { padding: var(--cd-sec) 0; background: var(--cd-card); color: var(--cd-ink); }
.cd-promise-sub {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--cd-sans);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  font-weight: 300;
  color: var(--cd-ink-body);
}
.cd-bigcard { position: relative; max-width: 860px; margin: clamp(40px, 5vw, 64px) auto 0; }
.cd-bigcard-stack {
  position: relative;
  padding-bottom: 18px;
  transition: transform 1s var(--cd-ease), opacity 0.8s ease;
}
/* three edges under the card, each 6pt lower and 2pt narrower a side */
.cd-edge {
  position: absolute;
  top: 0; bottom: 18px; left: 0; right: 0;
  border-radius: var(--cd-radius);
  background: var(--cd-card);
  box-shadow: inset 0 0 0 1px var(--cd-edge);
}
.cd-edge--1 { transform: translateY(6px); left: 4px; right: 4px; }
.cd-edge--2 { transform: translateY(12px); left: 8px; right: 8px; }
.cd-edge--3 { transform: translateY(18px); left: 12px; right: 12px; }
.cd-bigcard-face {
  position: relative;
  border-radius: var(--cd-radius);
  background: var(--cd-card);
  box-shadow: 0 6px 16px rgba(22, 24, 29, 0.08), 0 0 0 1px rgba(22, 24, 29, 0.05), 0 30px 60px -20px rgba(22, 24, 29, 0.18);
  padding: clamp(26px, 3.4vw, 44px) clamp(22px, 4vw, 56px) clamp(30px, 3.8vw, 50px);
}
.cd-bigcard-front {
  font-family: var(--cd-serif);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  color: var(--cd-ink2);
}
.cd-bigcard-rule { height: 1px; border: 0; background: var(--cd-hair); margin: clamp(16px, 2vw, 22px) 0; }
.cd-bigcard-back {
  font-family: var(--cd-serif);
  font-weight: 360;
  font-size: clamp(1.55rem, 1.05rem + 1.7vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
  text-wrap: pretty;
}
.cd-quirk {
  background-image: linear-gradient(transparent 62%, rgba(31, 111, 91, 0.18) 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 0.8s var(--cd-ease);
  transition-delay: calc(0.5s + var(--i, 0) * 0.45s);
}
.cd-quirk sup {
  font-family: var(--cd-sans);
  font-size: 0.36em;
  font-weight: 600;
  color: var(--cd-accent);
  vertical-align: 1.5em;
  margin-left: 0.1em;
  transition: opacity 0.4s ease;
  transition-delay: calc(0.7s + var(--i, 0) * 0.45s);
}
.cd-quirks {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 40px;
  font-family: var(--cd-sans);
  font-size: 0.95rem;
  color: var(--cd-ink2);
}
.cd-quirks li {
  display: flex;
  align-items: center;
  gap: 9px;
  transition: opacity 0.5s ease, transform 0.6s var(--cd-ease);
  transition-delay: calc(0.7s + var(--i, 0) * 0.45s);
}
.cd-quirks b {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 12px;
  background: var(--cd-accent-soft);
  color: var(--cd-accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
}
/* Before it scrolls in (set by cardetta.js, never without it): */
.cd-promise.is-waiting .cd-bigcard-stack { transform: translateY(40px); opacity: 0; }
.cd-promise.is-waiting .cd-quirk { background-size: 0% 100%; }
.cd-promise.is-waiting .cd-quirk sup,
.cd-promise.is-waiting .cd-quirks li { opacity: 0; }
.cd-promise.is-waiting .cd-quirks li { transform: translateY(8px); }

/* ============================================================
   4. PRICE AND LAUNCH
   ============================================================ */
.cd-close { padding: var(--cd-sec) 0; background: var(--cd-night); color: var(--cd-night-ink); }
.cd-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.cd-pricecards {
  list-style: none;
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.cd-pricecard {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border-radius: var(--cd-radius);
  background: #FBFAF7;
  color: var(--cd-ink);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  font-family: var(--cd-sans);
}
.cd-pricecard:nth-child(1) { transform: rotate(-2deg); }
.cd-pricecard:nth-child(2) { transform: rotate(1.2deg) translateY(14px); }
.cd-pricecard:nth-child(3) { transform: rotate(-0.8deg); }
.cd-pricecard-name { font-size: 0.85rem; font-weight: 500; color: var(--cd-ink2); }
.cd-pricecard-name--best { display: flex; align-items: center; gap: 7px; color: var(--cd-accent-ink); }
.cd-pricecard-name--best b {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cd-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
}
.cd-pricecard-amt {
  margin: 10px 0 6px;
  font-family: var(--cd-serif);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1;
}
.cd-pricecard-per { font-size: 0.88rem; color: var(--cd-ink2); }
.cd-terms {
  margin-top: clamp(36px, 4vw, 48px);
  max-width: 40rem;
  font-family: var(--cd-sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(241, 240, 236, 0.74);
}
.cd-terms strong { font-weight: 500; color: var(--cd-night-ink); }
.cd-spec { margin-top: 18px; font-family: var(--cd-sans); font-size: 0.82rem; color: rgba(241, 240, 236, 0.56); }

.cd-indexcard {
  position: relative;
  transform: rotate(-1.6deg);
  background-color: #FBFAF7;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(43, 94, 167, 0.18) 39px, rgba(43, 94, 167, 0.18) 40px);
  background-position: 0 68px;
  border-radius: var(--cd-radius);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.7);
  padding: 28px clamp(24px, 3vw, 40px) 30px;
  color: var(--cd-ink);
}
.cd-indexcard::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 66px;
  height: 1.5px;
  background: rgba(192, 57, 43, 0.45);
}
.cd-indexcard-title { font-family: var(--cd-serif); font-size: 1.6rem; height: 40px; margin-bottom: 28px; }
.cd-indexcard .form-group { margin: 0 0 1.25rem; }
.cd-indexcard label {
  display: block;
  font-family: var(--cd-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cd-ink2);
  margin-bottom: 0.2rem;
}
.cd-indexcard input[type="email"] {
  width: 100%;
  height: 48px;
  border: 0;
  border-bottom: 1.5px solid var(--cd-ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0.1rem;
  font-family: var(--cd-serif);
  font-size: 1.4rem;
  color: var(--cd-ink);
}
.cd-indexcard input[type="email"]::placeholder { color: #A7A39A; font-style: italic; }
.cd-indexcard input[type="email"]:focus { outline: none; border-bottom-color: var(--cd-accent); }
.cd-indexcard .cd-btn { width: 100%; margin-top: 0.4rem; }
.cd-indexcard .cf-turnstile { margin: 0 0 0.75rem; }
.cd-indexcard .sp-notify-foot { margin-top: 0.9rem; }
.cd-indexcard .sp-notify-status { font-family: var(--cd-sans); font-size: 0.92rem; color: var(--cd-accent); margin: 0 0 0.5rem; }
.cd-indexcard .sp-notify-status.is-error { color: var(--cd-again); }
.cd-indexcard .sp-notify-status:empty { display: none; }
.cd-indexcard .sp-notify-note { font-family: var(--cd-sans); font-size: 0.8rem; line-height: 1.55; color: var(--cd-ink2); }
.cd-indexcard .sp-notify-note a { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 2px; }
.cd-indexcard :focus-visible { outline-color: var(--cd-accent); }

.cd .cta-section--light { background: var(--cd-table); }

/* ============================================================
   PHONES AND NARROW SCREENS
   ============================================================ */
@media (max-width: 980px) {
  .cd-close-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-indexcard { max-width: 520px; }
}

/* The film's words on a phone, and wherever the film is the tall portrait
   render (an iPad upright, say): the deck up top, one line at a time
   along the foot, over a wash that rises from the bottom. */
@media (max-width: 800px), (max-aspect-ratio: 4/5) {
  .cd-film-track { height: 560vh; }
  .cd-film-shade {
    background: linear-gradient(to top,
      rgba(var(--cd-wash), 0.96) 0%,
      rgba(var(--cd-wash), 0.86) 34%,
      rgba(var(--cd-wash), 0) 60%);
  }
  .cd-beat[data-beat] { top: auto; bottom: calc(36px + env(safe-area-inset-bottom)); transform: translateY(18px); }
  .cd-beat[data-beat].is-on { transform: none; }
  .cd-beat[data-beat="4"] { width: auto; }
  .cd-beat,
  .cd-beat--intro {
    left: var(--cd-gutter);
    right: var(--cd-gutter);
    width: auto;
    max-width: 44rem;
    top: auto;
    bottom: calc(36px + env(safe-area-inset-bottom));
    margin-top: 0;
    transform: translateY(18px);
  }
  .cd-beat--intro.is-on { transform: none; }
  /* The same four short lines as on a wide screen, rather than a ragged
     three; no taller than the screen's height allows. */
  .cd-h1 { font-size: clamp(2.75rem, 1.5rem + 7vw, 5rem); }
  .cd-h1 { font-size: min(clamp(2.75rem, 1.5rem + 7vw, 5rem), 7.4svh); }
  .cd-brand { gap: 0.6rem; margin-bottom: 1rem; }
  .cd-brand-icon { width: 30px; height: 30px; border-radius: 7px; }
  .cd-lede { margin-top: 0.85rem; }
  .cd-actions { margin-top: 1.35rem; }
  .cd-beat-title { font-size: clamp(2rem, 1.3rem + 4vw, 3.2rem); }
  .cd-beat-title--xl { font-size: clamp(3rem, 1.7rem + 7vw, 4.6rem); }
  .cd-rail { top: 96px; transform: none; right: 14px; }
  .cd-rail i { height: 18px; }
  .cd-cue { display: none; }
  .no-js .cd-beat--intro,
  .cd-film.is-static .cd-beat--intro { justify-content: flex-end; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .no-js .cd-beats,
  .cd-film.is-static .cd-beats { grid-template-columns: minmax(0, 1fr); padding: 56px var(--cd-gutter) 72px; }
}

/* A short phone (an iPhone SE): the intro drawn tighter, so the name and
   the promise stay clear of the deck overhead. */
@media (max-width: 800px) and (max-height: 720px) {
  .cd-h1 { font-size: min(clamp(2.75rem, 1.5rem + 7vw, 5rem), 6.3svh); }
  .cd-brand { margin-bottom: 0.7rem; }
  .cd-lede { margin-top: 0.6rem; }
  .cd-actions { margin-top: 1rem; }
  .cd-film .cd-btn { height: 46px; }
  .cd-beat,
  .cd-beat--intro,
  .cd-beat[data-beat] { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (max-width: 800px) {
  .cd-story-track { height: 420vh; }
  .cd-story-stage { align-items: stretch; }
  .cd-story-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    height: 100%;
    padding-top: 88px;
    padding-bottom: 16px;
  }
  .cd-story-lines { min-height: 7.2rem; margin-top: 10px; }
  .cd-sline h3 { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.2rem); max-width: none; }
  .cd-sline p { margin-top: 0.4rem; font-size: 0.98rem; }
  .cd-story-phone { align-items: center; }

  .cd-try { background: radial-gradient(70% 26% at 50% 66%, var(--cd-pool) 0 99%, transparent 100%), var(--cd-studio); }
  .cd-try-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .cd-try-controls { margin-top: 36px; }
  .cd-dcard { width: 190px; height: 104px; font-size: 1.1rem; }

  /* Two small tiles a row under the wide one: one short grid to take in
     at a glance, not five screens of tiles. The little pictures shrink
     to suit. */
  .cd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cd-tile--wide { grid-column: 1 / -1; }
  .cd-tile { padding: 10px 10px 18px; border-radius: 20px; }
  .cd-art { height: 116px; border-radius: 13px; }
  .cd-tile--wide .cd-art { height: 136px; }
  .cd-tile h3 { margin: 14px 5px 0; font-size: 1.16rem; text-wrap: balance; }
  .cd-tile p { margin: 5px 5px 0; font-size: 0.87rem; line-height: 1.45; }
  .cd-art--cloze { padding: 0 10px; }
  .cd-cloze-line { font-size: 1rem; }
  .cd-media-card { transform: scale(0.74); }
  .cd-art--sync { gap: 38px; }
  .cd-sync-phone { width: 36px; height: 70px; border-width: 2.5px; border-radius: 9px; }
  .cd-sync-phone i { top: 4px; width: 12px; height: 4px; margin-left: -6px; }
  .cd-sync-card { width: 24px; height: 16px; margin: -8px 0 0 -12px; }
  @keyframes cd-sync { 0%, 15% { transform: translateX(-37px); } 85%, 100% { transform: translateX(37px); } }
  .cd-art--private { gap: 12px; }

  .cd-pricecards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cd-pricecard { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .cd-pricecard-amt { margin: 0; order: 2; margin-left: auto; }
  .cd-pricecard-per { flex-basis: 100%; order: 3; }
  .cd-pricecard:nth-child(2) { transform: rotate(0.8deg); }
  .cd-quirks { gap: 10px 22px; }
}

/* Wide but short (a phone on its side): the film's words scale to the
   height, so the intro and its button fit on the screen. */
@media (min-width: 801px) and (max-height: 560px) {
  .cd-h1 { font-size: min(clamp(3rem, 1.1rem + 4.6vw, 6rem), 10.5vh); }
  .cd-brand { margin-bottom: 0.9rem; }
  .cd-lede { margin-top: 0.7rem; }
  .cd-actions { margin-top: 1.1rem; }
  .cd-film .cd-btn { height: 46px; }
  .cd-beat--intro { margin-top: 20px; }
  .cd-beat-title--xl { font-size: min(clamp(3.2rem, 1.2rem + 5.4vw, 6.6rem), 17vh); }
  .cd-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cd *, .cd *::before, .cd *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}