/* /create/animation — this page's entire visual layer.
 *
 * home-v3.css loads before this file for exactly two things it owns that are genuinely shared: the
 * home2026 chrome, and the closing CTA card (`#faq .final`, the back half of buildFinalCta()).
 * Nothing else in it can reach this markup — every content class here is `an-` prefixed and every
 * section id but #faq is this page's own, so `#read`, `#motion`, `.age-book`, `.shelf-book`,
 * `.spread` and `.center-head` match nothing. The contract test asserts precisely that.
 *
 * The sibling page /create/picture-book uses the same tokens and the same register, but not the
 * same file and not the same class vocabulary: `pb-` never appears here and `an-` never appears
 * there. Sharing selectors across the two is what made the first picture-book attempt read as a
 * shorter home page, and the same failure is available to any pair of pages that share a stylesheet.
 */

/* Margin reset, scoped to this page, so nothing here silently depends on home-v3.css for its box
   model. Without it the default heading and paragraph margins return and the page grows by well
   over a thousand pixels. lp.css only sets box-sizing. */
.lp-an :where(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption) { margin: 0; padding: 0; }
.lp-an :where(ul, ol) { list-style: none; }
.lp-an :where(img, svg) { max-width: 100%; }

.lp-an {
  /* Aliases for the short names the shared component markup expects. */
  --font-body: var(--rk-font-body);
  --font-display: var(--rk-font-display);
  --shadow-card: var(--rk-shadow-card);
  --shadow-object: var(--rk-shadow-object);

  --an-pad: clamp(36px, 3.6vw, 60px);
  /* Same pair as .landing2026HeaderInner and the home page's .spread — see the note in
     create-picture-book.css. A content column narrower than the shared header leaves the logo and
     the Start Creating button hanging outside the text on wide screens. */
  --an-gutter: clamp(24px, 4vw, 72px);       /* page side margin — matches the header */
  --an-max: 1560px;                          /* content column — matches the header */
  /* Film frames are dark objects. A near-black surround stops a bright poster from looking like a
     photograph that has been pasted onto paper. */
  --an-frame: #14171F;
  --an-frame-edge: rgba(20, 23, 31, .16);
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
}

.an-band {
  width: min(calc(100% - 2 * var(--an-gutter)), var(--an-max));
  margin-inline: auto;
  padding: var(--an-pad) 0;
}
/* Tinted bands mark the three blocks carrying the argument: the film, the editing proof, delivery. */
.an-band-tint {
  --an-inset: clamp(18px, 2.4vw, 44px);
  background: var(--rk-paper-2);
  border-radius: clamp(18px, 1.8vw, 26px);
  padding: var(--an-pad) var(--an-inset);
  width: min(calc(100% - 2 * var(--an-gutter)), var(--an-max));
}

.an-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 12.5px var(--rk-font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rk-emerald);
}
.an-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }

.lp-an h1 {
  margin-top: 14px;
  font-family: var(--rk-font-display);
  font-size: clamp(36px, 3.3vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lp-an h2 {
  margin-top: 12px;
  font-family: var(--rk-font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-an h3 { font: 700 clamp(17px, 1.2vw, 20px)/1.3 var(--rk-font-body); color: var(--rk-ink); }

.an-lede { margin-top: 12px; color: var(--rk-ink-soft); font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.6; max-width: 62ch; }
.an-head { max-width: 760px; }

/* ═══ SHARED COMPONENT STYLES, CARRIED ══════════════════════════════════════
   The composer, chips and trust line are shared component MARKUP (services/lp/components/
   composer.js). home-v3.css styles them for a full-height home hero; these restatements are scoped
   to `.lp-an` so they win here and can be proportioned for a 0.7-screen hero, without touching the
   home page or its sibling. */
.lp-an .composer {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 62px;
  margin-top: 24px;
  padding: 6px 6px 6px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-composer-border, var(--rk-line));
  border-radius: var(--rk-radius-lg);
  box-shadow: var(--rk-shadow-card);
  transition: box-shadow .3s, border-color .3s;
}
.lp-an .composer:focus-within { border-color: var(--rk-emerald); box-shadow: 0 0 0 4px var(--rk-focus-ring); }
.lp-an .composer-idea-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--rk-emerald); opacity: .72; pointer-events: none; }
.lp-an .composer-idea-icon svg { width: 20px; height: 20px; }
.lp-an .composer-fallback {
  position: absolute; z-index: 1; left: 50px; right: 200px; top: 50%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--rk-ink-muted); font: 400 16px var(--rk-font-body);
  opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .16s ease;
}
.lp-an .composer:has(#hero-input[placeholder=""]):not(:focus-within) .composer-fallback { opacity: .72; }
.lp-an .composer input {
  position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent;
  font: 600 16px var(--rk-font-body); color: var(--rk-ink);
}
.lp-an .composer input::placeholder { color: var(--rk-ink-muted); font-weight: 400; }
.lp-an .composer button {
  /* Allowed to shrink: at 375px an unshrinkable button is what pushes the hero column past the
     viewport, because a grid item's default min-width:auto refuses to go below min-content. */
  flex: 0 1 auto; min-width: 140px; height: 50px; padding: 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 13px; cursor: pointer; white-space: nowrap;
  background: var(--rk-emerald); color: #fff; font: 700 15px var(--rk-font-body);
  transition: background .18s, transform .18s;
}
.lp-an .composer button:hover { background: var(--rk-emerald-hover); transform: translateY(-1px); }
.lp-an .composer button svg { transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.lp-an .composer button:hover svg { transform: translateX(4px); }

.lp-an .chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lp-an .chips .idea-chip {
  appearance: none; margin: 0; min-height: 36px; text-align: left;
  font: 600 13.5px var(--rk-font-body); color: var(--rk-ink-soft);
  border: 1px solid var(--rk-line); background: var(--rk-surface);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.lp-an .chips .idea-chip:hover,
.lp-an .chips .idea-chip.is-selected { border-color: var(--rk-emerald); color: var(--rk-emerald); background: var(--rk-emerald-soft); transform: translateY(-2px); }
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .lp-an .chips .idea-chip { min-height: 44px; }
}

.lp-an .trust { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; margin-top: 16px; color: var(--rk-ink-soft); font: 600 13.5px var(--rk-font-body); }
.lp-an .trust span { display: flex; align-items: center; gap: 7px; }
/* Hairline between the three facts, drawn as a left border on every item but the first so it
   disappears by itself when the row wraps on a phone. */
.lp-an .trust span + span { border-left: 1px solid var(--rk-line); padding-left: 20px; }
.lp-an .trust svg { width: 16px; height: 16px; stroke: var(--rk-emerald); fill: none; flex: none; }

/* ═══ THE VIDEO SLOT — used by every moving image on the page ════════════════
   Structure: a cover <img> in normal flow sizes the box, and the <video> sits on top of it, hidden
   until it has something to show. That order matters. The cover is a real image so it lazy-loads,
   goes through cdnify(), and survives the video never being attached at all; the video is layered
   over it so the handoff costs no layout shift and no flash of empty frame.
   `--an-ratio` is set per slot in the markup, next to the file it applies to. */
.an-video {
  position: relative;
  aspect-ratio: var(--an-ratio, 16 / 9);
  border-radius: 12px;
  overflow: hidden;
  background: var(--an-frame);
  isolation: isolate;
}
.an-video-poster,
.an-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Explicit height:auto is NOT wanted here — these are absolutely positioned and fully sized. But the
   width/height ATTRIBUTES on the <img> still matter: they give the aspect ratio to the layout before
   the file arrives, which is what stops the grid reflowing as covers land. */
.an-video-el { opacity: 0; transition: opacity .32s ease; z-index: 1; }
.an-video-youtube-el { border: 0; }
.an-video.is-playing .an-video-el { opacity: 1; }

/* The play affordance on the click-to-load film. It is a real <button>, so it is focusable and
   operable from the keyboard — the whole block is unreachable otherwise, since the video has no
   controls until it is loaded. */
.an-video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: rgba(20, 23, 31, .3);
  color: #fff;
  font: 700 15px var(--rk-font-body);
  cursor: pointer;
  transition: background .24s ease, opacity .24s ease;
}
.an-video-play::before {
  content: "";
  position: absolute;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px rgba(20, 23, 31, .34);
  transition: transform .24s cubic-bezier(.2, .9, .3, 1.2);
}
.an-video-play svg { position: relative; z-index: 1; width: 26px; height: 26px; fill: var(--an-frame); margin-left: 4px; }
/* The disc is the whole affordance. A caption along the bottom edge used to sit here too and read
   as a second, separate way in; the label lives on as the button's accessible name. */
.an-video-play:hover { background: rgba(20, 23, 31, .16); }
.an-video-play:hover::before { transform: scale(1.07); }
.an-video-play:focus-visible { outline: 3px solid var(--rk-emerald); outline-offset: -3px; }
/* Once the film is running the button gets out of the way entirely — the native controls take over
   and an overlay swallowing clicks on them would be worse than useless. */
.an-video.is-playing .an-video-play { opacity: 0; pointer-events: none; }

/* Hover slots get a quiet hint badge instead, so it is discoverable that they do anything at all. */
.an-video-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 0 0 var(--rk-emerald);
  transition: box-shadow .2s ease;
  pointer-events: none;
}
.an-video-hover:hover::after { box-shadow: inset 0 0 0 2px var(--rk-emerald); }

/* On touch the ring above never appears — there is no hover to reveal it — so these eleven tiles
   read as flat stills and nothing suggests they play. A small corner disc says "this moves" without
   the full-bleed overlay the film's own button uses, which at tile size would bury the frame it is
   advertising. Decorative only: the tap target is the whole slot (see create-animation.js). */
@media (hover: none) {
  .an-video-hover::before {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    z-index: 3;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%2314171F'/%3E%3C/svg%3E")
      no-repeat center / 13px 13px;
    box-shadow: 0 4px 12px rgba(20, 23, 31, .3);
    pointer-events: none;
    transition: opacity .2s ease;
  }
  /* Once it is running the frame speaks for itself. */
  .an-video-hover.is-playing::before { opacity: 0; }
}

/* ═══ 1 · HERO ══════════════════════════════════════════════════════════════
   The right side follows the picture-book page's composed-scene pattern: one baked product story
   instead of a second video player. The full film remains immediately below the fold. */
.an-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(460px, 1.18fr);
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
  min-height: 52svh;
  padding-block: clamp(26px, 3.4vh, 46px) clamp(30px, 4vh, 52px);
}
/* min-width:0 — a grid item defaults to min-width:auto and refuses to shrink below its min-content
   width, which is how the composer's button pushes the column past a phone viewport. */
.an-hero-copy { max-width: 560px; min-width: 0; }
.an-hero .composer { margin-top: clamp(18px, 2.4vh, 30px); }
.an-try { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(12px, 1.8vh, 22px); }
.an-try-label { font: 600 14px var(--rk-font-body); color: var(--rk-ink-muted); }

.an-hero-right { min-width: 0; }
.an-hero-showcase { margin: 0; min-width: 0; }
.an-hero-showcase img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64svh;
  object-fit: contain;
}
@media (min-width: 1101px) {
  .an-hero-showcase img {
    width: 114%;
    max-width: none;
    max-height: 70svh;
    margin-left: -7%;
  }
}

/* ═══ 2 · THE FILM ══════════════════════════════════════════════════════════
   The spine of the page. One player, centred, at roughly three quarters of the content column —
   large enough to be the block and small enough that the two facts under it stay in the same view. */
.an-film { margin-top: clamp(22px, 2.6vw, 36px); }
.an-film-frame {
  width: min(75%, 100%);
  margin-inline: auto;
  border-radius: clamp(12px, 1.2vw, 18px);
  border: 1px solid var(--an-frame-edge);
  box-shadow: var(--rk-shadow-object);
}
/* Two facts, one line each, centred under the player. Source sentence first: it is the claim being
   evidenced. Runtime second: it is the caveat. */
.an-film-meta {
  margin-top: clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.an-film-source { font: 400 clamp(15px, 1.15vw, 17.5px)/1.5 var(--rk-font-body); color: var(--rk-ink); }
.an-film-source span,
.an-film-run span {
  font: 700 11.5px var(--rk-font-body);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--rk-ink-muted);
  margin-right: 6px;
}
.an-film-run { font: 600 14px var(--rk-font-body); color: var(--rk-ink-soft); }
.an-film-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(14px, 1.6vw, 22px);
  font: 700 13.5px var(--rk-font-body);
  color: var(--rk-emerald);
  text-decoration: none;
}
.an-film-more svg { width: 14px; height: 14px; }
.an-film-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.an-film-more:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 3px; border-radius: 4px; }

/* ═══ 3 · THE LOOK AND THE CAMERA ═══════════════════════════════════════════
   Four styles in a uniform row: any variation in tile size would claim a hierarchy between styles
   that does not exist. 4:3 rather than the source 16:9 — a squarer crop gives the row enough height
   to read as an exhibit instead of a filmstrip, and the subject is centred in every frame. */
.an-looks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(24px, 2.8vw, 40px);
}
.an-look { position: relative; }
/* The 4:3 ratio itself is set inline by the page module — an inline custom property beats any rule
   here, so trying to declare it in this file would silently do nothing. */
.an-look .an-video { box-shadow: var(--rk-shadow-card); }
/* Style cards are deliberately static. Hover may identify the card, but the picture never scales
   or swaps source — movement belongs to the proof row below. */
.an-look .an-video-still:hover {
  outline: 2px solid var(--rk-emerald);
  outline-offset: 0;
}
.an-look figcaption {
  margin-top: 11px;
  font: 700 13.5px var(--rk-font-body);
  color: var(--rk-ink);
  text-align: center;
}
.an-looks-more {
  margin-top: clamp(18px, 2vw, 28px);
  text-align: center;
  font: 600 clamp(15.5px, 1.2vw, 18px) var(--rk-font-body);
  color: var(--rk-ink-soft);
}

/* The camera row. Separated by a hairline rather than a second heading block: it is the same claim
   continued ("and it moves"), not a new section. */
.an-moves-wrap {
  margin-top: clamp(32px, 3.6vw, 54px);
  padding-top: clamp(28px, 3.2vw, 46px);
  border-top: 1px solid var(--rk-line);
}
.an-moves-title {
  text-align: center;
  font: 700 clamp(19px, 1.5vw, 24px)/1.25 var(--rk-font-display);
  color: var(--rk-ink);
}
.an-moves-sub {
  width: min(620px, 100%);
  margin: 8px auto 0;
  text-align: center;
  color: var(--rk-ink-soft);
  font: 400 clamp(14px, 1vw, 16px)/1.55 var(--rk-font-body);
}
.an-moves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(18px, 2.2vw, 30px);
}
.an-move .an-video { box-shadow: var(--rk-shadow-card); }
.an-camera-demo { background: #151a20; }
.an-camera-demo .an-video-play { background: rgba(20, 23, 31, .22); }
.an-camera-demo .an-video-play::before { width: 58px; height: 58px; }
.an-camera-demo .an-video-play svg { width: 21px; height: 21px; }
.an-move figcaption {
  margin-top: 10px;
  text-align: center;
  font: 700 11.5px var(--rk-font-body);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--rk-emerald);
}

/* ═══ 4 · AI DRAFTS IT, YOU DIRECT IT ═══════════════════════════════════════
   Rows alternate sides. The swing equals the copy column's own width and cannot be tuned down —
   swing = container − wide block = narrow column + gap — so it is either accepted or the layout
   changes. Accepted here, as on the sibling page. */
.an-edits { display: flex; flex-direction: column; gap: clamp(28px, 3.2vw, 48px); margin-top: clamp(24px, 2.8vw, 40px); }
.an-edit { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: clamp(20px, 2.6vw, 44px); align-items: center; }
.an-edit-flip { grid-template-columns: minmax(0, 2fr) minmax(220px, .8fr); }
.an-edit-flip .an-edit-copy { order: 2; }
.an-edit-flip .an-edit-pair { order: 1; }
.an-edit + .an-edit { padding-top: clamp(28px, 3.2vw, 48px); border-top: 1px solid var(--rk-line); }
.an-edit-copy p { margin-top: 9px; color: var(--rk-ink-soft); font-size: clamp(14.5px, 1.02vw, 16px); line-height: 1.6; }
.an-edit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 20px); }
.an-edit-pair figure { margin: 0; }
/* height:auto is load-bearing. The width/height ATTRIBUTES on an <img> map to CSS width and height,
   and a mapped height overrides aspect-ratio outright — the crop then does nothing and the image
   renders at its intrinsic height. That is a several-thousand-pixel block, and it looks like a
   layout bug rather than a missing line of CSS. */
.an-edit-pair img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--rk-line); background: var(--rk-surface);
}
.an-edit-pair figcaption { margin-top: 10px; }
.an-tag {
  display: inline-block;
  font: 700 10.5px var(--rk-font-body);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.an-tag-before { background: var(--rk-paper-2); color: var(--rk-ink-muted); }
.an-tag-after { background: var(--rk-emerald); color: #fff; }
/* One finished-sound player, not an editing timeline. The proof is audible; the UI stays light. */
.an-edit-audio { grid-template-columns: 1fr; align-content: center; }
.an-soundtrack-panel {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 18px;
  border: 1px solid var(--rk-line);
  background: linear-gradient(135deg, var(--rk-surface) 58%, var(--rk-emerald-soft));
  box-shadow: var(--rk-shadow-object);
}
.an-soundtrack-player {
  display: grid;
  grid-template-columns: 52px minmax(180px, .72fr) minmax(180px, 1.28fr) auto;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rk-line);
}
.an-soundtrack-play {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rk-ink);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(34, 40, 37, .16);
  transition: background-color .18s, transform .18s, box-shadow .18s;
}
.an-soundtrack-play:hover { background: var(--rk-emerald); transform: translateY(-2px); box-shadow: 0 11px 26px rgba(23, 157, 119, .22); }
.an-soundtrack-play:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 3px; }
.an-soundtrack-play-icon {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: #fff;
}
.an-soundtrack-play-icon svg { width: 18px; height: 18px; fill: currentColor; }
.an-soundtrack-icon-play { transform: translateX(1px); }
.an-soundtrack-icon-stop,
.an-soundtrack-label-stop { display: none; }
.an-soundtrack-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.an-soundtrack-label-play,
.an-soundtrack-label-stop {
  color: var(--rk-ink);
  font: 750 clamp(13.5px, 1vw, 15px)/1.3 var(--rk-font-body);
}
.an-soundtrack-mix {
  overflow: hidden;
  color: var(--rk-ink-muted);
  font: 550 12px var(--rk-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-soundtrack-duration {
  color: var(--rk-ink-muted);
  font: 600 12.5px var(--rk-font-body);
  font-variant-numeric: tabular-nums;
}
.an-soundtrack-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  padding: 7px 0;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent 49%, var(--rk-line) 49%, var(--rk-line) 51%, transparent 51%);
}
.an-soundtrack-wave i {
  display: block;
  width: 2px;
  height: 30%;
  flex: 1 1 0;
  max-width: 4px;
  border-radius: 999px;
  background: var(--rk-ink-muted);
  opacity: .65;
  transform-origin: center;
}
.an-soundtrack-wave i:nth-child(3n + 1) { height: 72%; }
.an-soundtrack-wave i:nth-child(4n + 2) { height: 46%; }
.an-soundtrack-wave i:nth-child(5n + 3) { height: 92%; }
.an-soundtrack-wave i:nth-child(7n) { height: 60%; }
.an-soundtrack-wave i:nth-child(6n + 1) { background: var(--rk-emerald); }
.an-soundtrack-proofs {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  padding: 16px 0 0 64px;
  color: var(--rk-ink-soft);
  font: 650 12px var(--rk-font-body);
}
.an-soundtrack-proofs span { display: inline-flex; align-items: center; gap: 7px; }
.an-soundtrack-proofs span::before {
  content: '✓';
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rk-emerald-soft);
  color: var(--rk-emerald);
  font-size: 11px;
  line-height: 1;
}
/* Playback changes colour and icon only; fixed geometry prevents the row from jumping. */
.an-soundtrack-play.is-playing { background: var(--rk-emerald); }
.an-soundtrack-play.is-playing .an-soundtrack-icon-play,
.an-soundtrack-panel:has(.an-soundtrack-play.is-playing) .an-soundtrack-label-play { display: none; }
.an-soundtrack-play.is-playing .an-soundtrack-icon-stop { display: block; }
.an-soundtrack-panel:has(.an-soundtrack-play.is-playing) .an-soundtrack-label-stop { display: block; }
.an-soundtrack-panel:has(.an-soundtrack-play.is-playing) .an-soundtrack-wave i {
  background: var(--rk-emerald);
  animation: an-voice-pulse .72s ease-in-out infinite alternate;
}
.an-soundtrack-panel:has(.an-soundtrack-play.is-playing) .an-soundtrack-wave i:nth-child(3n + 2) { animation-delay: -.22s; }
.an-soundtrack-panel:has(.an-soundtrack-play.is-playing) .an-soundtrack-wave i:nth-child(3n) { animation-delay: -.4s; }
@keyframes an-voice-pulse {
  from { transform: scaleY(.45); opacity: .5; }
  to { transform: scaleY(1); opacity: 1; }
}

/* ═══ 5 · A FILM FOR EVERY MOMENT ═══════════════════════════════════════════ */
.an-moments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(24px, 2.8vw, 40px);
  align-items: stretch;
}
.an-moment { display: flex; flex-direction: column; }
.an-moment-media { position: relative; }
.an-moment .an-video { box-shadow: var(--rk-shadow-object); }
.an-moment-cover-open {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: var(--rk-radius-sm);
  background: transparent;
  cursor: pointer;
}
.an-moment-cover-open:hover { box-shadow: inset 0 0 0 2px var(--rk-emerald); }
.an-moment-cover-open:focus-visible { outline: 3px solid var(--rk-emerald); outline-offset: 3px; }
/* Runtime badge, in the cover's bottom-right corner. Anchored to .an-moment-media, which is exactly
   the cover's box — anchoring to the card would put it against the card's full height, i.e. down
   over the copy. z-index 3 clears the hover slot's inset ring (2). */
.an-moment-time {
  position: absolute;
  z-index: 3;
  bottom: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(20, 23, 31, .78);
  color: #fff;
  font: 700 11.5px var(--rk-font-body);
  letter-spacing: .4px;
  pointer-events: none;
}
.an-moment-name { margin-top: 13px; font: 700 clamp(15px, 1.1vw, 17px)/1.28 var(--rk-font-display); color: var(--rk-ink); }
.an-moment-when { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--rk-ink-soft); }

html.an-film-open { overflow: hidden; }
.an-full-film {
  /* home-v3.css resets every element's margin to 0, including the UA margin that normally centres
     a modal dialog. With fixed positioning and a zero inset, auto margins restore deterministic
     horizontal and vertical centring in the top layer. */
  margin: auto;
  width: min(1100px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100svh - 40px);
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
}
.an-full-film::backdrop {
  background: rgba(20, 23, 31, .74);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.an-full-film-shell {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  background: var(--rk-paper);
  box-shadow: 0 28px 90px rgba(20, 23, 31, .32);
}
.an-full-film-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 0 2px 12px 8px;
}
.an-full-film-head h3 {
  margin: 0;
  color: var(--rk-ink);
  font: 700 clamp(17px, 1.7vw, 22px)/1.3 var(--rk-font-display);
}
.an-full-film-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  background: #fff;
  color: var(--rk-ink);
  cursor: pointer;
}
.an-full-film-close:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); }
.an-full-film-close:focus-visible { outline: 3px solid var(--rk-emerald); outline-offset: 2px; }
.an-full-film-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.an-full-film-frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #121212;
}
.an-full-film-player-host,
.an-full-film-player {
  display: block;
  width: 100%;
  height: 100%;
}
.an-full-film-player { border: 0; }

/* ═══ 6 · WHAT YOU WALK AWAY WITH ═══════════════════════════════════════════ */
.an-delivery {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  margin-top: clamp(22px, 2.6vw, 36px);
}
.an-delivery-photo { margin: 0; border-radius: var(--rk-radius); overflow: hidden; box-shadow: var(--rk-shadow-object); }
.an-delivery-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* One row of three, per the brief — not cards. These are three facts about a file, and boxing them
   would give each one more weight than it is claiming. */
.an-delivers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.an-deliver-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  color: var(--rk-emerald);
  margin-bottom: 13px;
}
.an-deliver-icon svg { width: 21px; height: 21px; }
.an-deliver p { margin-top: 8px; color: var(--rk-ink-soft); font-size: 14px; line-height: 1.55; }
/* Runtime and resolution are plan-dependent, so the figure is not written here — it lives on
   /pricing, and this line points at it. A number duplicated onto a landing page is a number that
   goes stale without anyone noticing. */
.an-delivery-note {
  margin-top: clamp(20px, 2.4vw, 32px);
  text-align: center;
  font: 600 14px var(--rk-font-body);
  color: var(--rk-ink-soft);
}
.an-delivery-note a {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; color: var(--rk-emerald); text-decoration: none; font-weight: 700;
}
.an-delivery-note a svg { width: 13px; height: 13px; }
.an-delivery-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ FAQ ═══════════════════════════════════════════════════════════════════
   The +/× marker: `content` values MUST be quoted. An unquoted one is an invalid declaration and
   the whole pseudo-element silently fails to generate — combined with list-style:none that leaves
   six questions with no visible affordance and no error anywhere. */
/* The closing section centres, unlike every block above it. Those blocks lead with a left-aligned
   heading because content follows underneath across the full band; here the only things in the
   section are a 720px column of questions and the full-width CTA card below it, so leaving the
   column hard left stranded half the band empty and read as a layout fault rather than a choice.
   Only the BLOCK is centred — the question text stays left-aligned, because centred body copy is
   hard to read down a list. */
#faq .an-head { max-width: 720px; margin-inline: auto; text-align: center; }
#faq .an-head .an-kicker { justify-content: center; }
/* Styled once in home-v3.css under `.faq` — see the note in create-picture-book.css. This copy had
   drifted furthest: a clamped 15.5–17.5px question against the shared 17px, and an absolutely
   positioned marker where the shared rule uses the flex row. Both are gone in favour of the one
   definition, so the accordion now reads identically on all three pages that carry it. */

/* ═══ CROSS-LINKS ═══════════════════════════════════════════════════════════ */
.an-crosslinks {
  width: min(calc(100% - 2 * var(--an-gutter)), var(--an-max));
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 38px) 0 clamp(34px, 3.6vw, 54px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 12px;
  font: 600 13.5px var(--rk-font-body);
}
.an-crosslinks-lead { color: var(--rk-ink-muted); font-weight: 600; }
.an-crosslink {
  color: var(--rk-ink-soft); text-decoration: none;
  border: 1px solid var(--rk-line); border-radius: 999px; padding: 6px 14px;
  transition: color .18s, border-color .18s;
}
.an-crosslink:hover { color: var(--rk-emerald); border-color: var(--rk-emerald); }
.an-crosslink:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 3px; }

/* Reveal-on-scroll, driven by this page's own script. */
.lp-an .an-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.lp-an .an-reveal.is-in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .an-film-frame { width: min(88%, 100%); }
  .an-moments { grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 30px); }
}

@media (max-width: 1023px) {
  .an-hero { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); min-height: 0; }
  .an-hero-copy { max-width: none; }
  /* Stacked, copy and artwork add up vertically. Keep the composed scene concise so the full film
     remains close and the hero does not become a page by itself. */
  .an-hero-showcase img { max-height: 42svh; }
  .an-film-frame { width: 100%; }
  .an-delivery { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 30px); }
  .an-delivery-photo { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .lp-an { --an-pad: clamp(30px, 4.4vw, 44px); }
  .an-looks { grid-template-columns: repeat(2, 1fr); }
  /* The camera row goes vertical rather than staying a squeezed three-across: at this width three
     16:9 tiles are 180px each and the movement in them stops being legible. */
  .an-moves { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .an-edit { grid-template-columns: 1fr; gap: 18px; }
  /* `order` swaps left/right at wide widths, but once the grid is a single column it swaps TOP and
     BOTTOM — the flipped row would put its images above its own heading, out of step with the other
     two. It has to be zeroed at every stacking breakpoint. */
  .an-edit-flip .an-edit-copy,
  .an-edit-flip .an-edit-pair { order: 0; }
  .an-delivers { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin-inline: auto; }
  .an-deliver { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
  .an-deliver-icon { grid-row: 1 / span 2; margin-bottom: 0; }
}

@media (max-width: 767px) {
  .an-moments { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .an-moment-when { font-size: 13px; }
  .an-edit-pair { grid-template-columns: 1fr; gap: 12px; }
  .an-edit-pair img { aspect-ratio: 2 / 1; }
  .an-soundtrack-panel { padding: 18px; border-radius: 14px; }
  .an-soundtrack-player {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: 'play meta duration' 'wave wave wave';
    gap: 12px;
    padding-bottom: 16px;
  }
  .an-soundtrack-play { grid-area: play; width: 44px; height: 44px; }
  .an-soundtrack-meta { grid-area: meta; }
  .an-soundtrack-mix { display: none; }
  .an-soundtrack-wave { grid-area: wave; height: 38px; gap: 2px; }
  .an-soundtrack-duration { grid-area: duration; }
  .an-soundtrack-proofs { gap: 14px; padding: 14px 0 0; }
  .an-video-play::before { width: 60px; height: 60px; }
  .an-video-play svg { width: 22px; height: 22px; }
  .an-full-film {
    width: calc(100vw - 20px);
    max-height: calc(100svh - 20px);
  }
  .an-full-film-shell { padding: 10px; border-radius: 16px; }
  .an-full-film-head { min-height: 38px; padding: 0 0 8px 4px; }
  .an-full-film-close { width: 36px; height: 36px; }
  .an-full-film-frame { border-radius: 10px; }
}

/* ═══ MOTION AND DATA PREFERENCES ═══════════════════════════════════════════
   Reduced-motion removes decorative transitions. Explicit play buttons remain available because
   the visitor, rather than hover or autoplay, decides whether a proof should move. */
@media (prefers-reduced-motion: reduce) {
  .lp-an .an-reveal { opacity: 1; transform: none; transition: none; }
  .an-video-el { transition: none; }
  .an-video-play::before,
  .an-soundtrack-play,
  .lp-an .chips .idea-chip,
  .lp-an .composer button { transition: none; }
  .an-video-hover::after { transition: none; }
  .an-soundtrack-panel:has(.an-soundtrack-play.is-playing) .an-soundtrack-wave i { animation: none; }
}