/* /create/picture-book — 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 `pb-` prefixed and every
 * section id but #faq is this page's own, so `#read`, `.age-book`, `.shelf-book`, `.spread` and
 * `.center-head` match nothing. The contract test asserts precisely that.
 *
 * Register: a landing page argues, a home page performs. So this is denser, flatter and shorter —
 * hairline rules instead of framed set pieces, one accent (emerald) used sparingly, and section
 * padding roughly two thirds of the home page's.
 */

/* Margin reset, scoped to this page. Kept even though home-v3.css now loads, so that this page does
   not silently depend on that file for its box model — if the chrome ever moves to its own
   stylesheet, nothing here shifts. Without it the default heading and paragraph margins return, the
   page grows by ~1700px and the hero overflows on phones. */
.lp-pb :where(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption) { margin: 0; padding: 0; }
.lp-pb :where(ul, ol) { list-style: none; }
.lp-pb :where(img, svg) { max-width: 100%; }

.lp-pb {
  /* Aliases for the names the shared component markup and the rules below use. */
  --font-body: var(--rk-font-body);
  --font-display: var(--rk-font-display);
  --shadow-card: var(--rk-shadow-card);
  --shadow-object: var(--rk-shadow-object);

  /* Section rhythm. Roughly half the home page's, which is the register difference: a home page
     gives each set piece room to land, a landing page keeps the argument moving. */
  --pb-pad: clamp(36px, 3.6vw, 60px);
  /* Gutter and column deliberately mirror .landing2026HeaderInner (landing2026-nav.css) and the home
     page's .spread (home-v3.css) character for character. The shared header is full-bleed with its
     own inner column, so any page whose content column differs drifts out of alignment with the logo
     and the Start Creating button — at 1920 the old 1240/clamp(20,4vw,64) pair put them 160px apart
     on each side, which read as the header belonging to a different page. */
  --pb-gutter: clamp(24px, 4vw, 72px);       /* page side margin — matches the header */
  --pb-max: 1560px;                          /* content column — matches the header */
  --pb-gap: clamp(18px, 2vw, 34px);
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
}

.pb-band {
  width: min(calc(100% - 2 * var(--pb-gutter)), var(--pb-max));
  margin-inline: auto;
  padding: var(--pb-pad) 0;
}
/* Tinted bands mark the two blocks that carry the page's argument: art styles and occasions. */
.pb-band-tint {
  --pb-inset: clamp(18px, 2.4vw, 44px);
  background: var(--rk-paper-2);
  border-radius: clamp(18px, 1.8vw, 26px);
  padding: var(--pb-pad) var(--pb-inset);
  width: min(calc(100% - 2 * var(--pb-gutter)), var(--pb-max));
}

.pb-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);
}
.pb-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }

.lp-pb 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-pb 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-pb h3 { font: 700 clamp(17px, 1.2vw, 20px)/1.3 var(--rk-font-body); color: var(--rk-ink); }

.pb-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; }
.pb-head { max-width: 720px; }
.pb-head .pb-kicker { justify-content: flex-start; }

/* ═══ SHARED COMPONENT STYLES, CARRIED ══════════════════════════════════════
   The composer, chips and trust line are shared component MARKUP (services/lp/components/
   composer.js). home-v3.css does style them, but its versions are tuned to a full-height home hero;
   these restatements are scoped to `.lp-pb` so they win on this page and can be sized for a shorter
   one, without touching the home page. Same tokens, same geometry language, tighter proportions. */
.lp-pb .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-pb .composer:focus-within { border-color: var(--rk-emerald); box-shadow: 0 0 0 4px var(--rk-focus-ring); }
.lp-pb .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-pb .composer-idea-icon svg { width: 20px; height: 20px; }
/* Pale stand-in shown during the empty beats of the placeholder typing loop. */
.lp-pb .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-pb .composer:has(#hero-input[placeholder=""]):not(:focus-within) .composer-fallback { opacity: .72; }
.lp-pb .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-pb .composer input::placeholder { color: var(--rk-ink-muted); font-weight: 400; }
.lp-pb .composer button {
  /* Allowed to shrink: at 375px an unshrinkable button is what pushes the hero column past the
     viewport. min-width keeps the label from collapsing to nothing. */
  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-pb .composer button:hover { background: var(--rk-emerald-hover); transform: translateY(-1px); }
.lp-pb .composer button svg { transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.lp-pb .composer button:hover svg { transform: translateX(4px); }

.lp-pb .chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lp-pb .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-pb .chips .idea-chip:hover,
.lp-pb .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-pb .chips .idea-chip { min-height: 44px; }
}

/* Bound tightly to the chips above it so the two read as one group belonging to the composer. The
   old clamp(20px,3vh,32px) pushed it down until it sat a few pixels off the hero's bottom edge and
   looked like it belonged to the seam between sections rather than to the hero. */
.lp-pb .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-pb .trust span { display: flex; align-items: center; gap: 7px; }
/* Hairline between the three facts, as the design has it. Drawn as a left border on every item but
   the first so it disappears on its own when the row wraps to two lines on a phone — a separate
   divider element would have to be hidden by hand at each wrap point. */
.lp-pb .trust span + span { border-left: 1px solid var(--rk-line); padding-left: 20px; }
.lp-pb .trust svg { width: 16px; height: 16px; stroke: var(--rk-emerald); fill: none; flex: none; }

/* ═══ 1 · HERO ═══════════════════════════════════════════════════════════════
   Two thirds of a screen at most: the proof below has to be reachable fast. */
.pb-hero {
  display: grid;
  /* Right column widened 2026-07-24: with the spread rail gone, these three sheets ARE the page's
     quality evidence, so they get the room the rail used to justify taking. */
  grid-template-columns: minmax(300px, 0.76fr) minmax(460px, 1.24fr);
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
  min-height: 62svh;
  /* The bottom is deliberately the larger of the two. The copy column is the taller one at most
     widths and its last row is the trust line; with the old 3.5vh bottom that line ended up ~12px
     off the hero's edge at 1440, close enough to the next section to read as belonging to the seam
     rather than to the hero. */
  padding-block: clamp(34px, 4.5vh, 64px) clamp(20px, 2.5vh, 28px);
}
/* min-width:0 — a grid item defaults to min-width:auto and so refuses to shrink below its
   min-content width. Here that let the composer's fixed-width button push the whole column past the
   viewport on phones. */
.pb-hero-copy { max-width: 560px; min-width: 0; }
.pb-hero .composer { margin-top: clamp(20px, 2.6vh, 34px); }
.pb-try { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(14px, 2vh, 24px); }
.pb-try-label { font: 600 14px var(--rk-font-body); color: var(--rk-ink-muted); }

/* Three finished spreads in a loose pile. Not a shelf, not a page-turner — a still stack whose only
   job is to make the quality claim visible before the headline is read. */
/* Offsets are large enough that each sheet keeps at least ~25% of its own width clear of the one in
   front, so all three read as separate books once real artwork replaces the placeholders. Rotation
   stays under 5° — more starts to look like a stock "scattered photos" graphic. */
/* One image, no arrangement. The previous version built the pile in CSS from three separate sheets
   and needed rotation limits, overlap arithmetic and a per-breakpoint sheet count to stay inside
   its column; the composition is now baked into the artwork, so all of that is gone. The figure
   only has to not overflow, which `width:100%` guarantees at every width.
   No box-shadow or radius here: the scene carries its own shadows and is expected to arrive with a
   transparent background, so a frame around it would show as a rectangle behind the artwork. */
.pb-hero-scene { margin: 0; }
/* max-height is keyed to the VIEWPORT, not the column: at 1.21:1 the scene is tall, and on a short
   laptop screen (1280x720) filling the column made the hero 92% of the viewport — the visitor saw
   nothing below it, which is the one thing this page's ordering is built to avoid. Capping the
   height lets the art shrink and centre inside its box (object-fit: contain) instead of pushing the
   fold off-screen. On tall screens the cap never binds and the scene fills the column as designed. */
.pb-hero-scene img { display: block; width: 100%; height: auto; max-height: 64svh; object-fit: contain; }
@media (min-width: 1101px) {
  .pb-hero-scene img {
    width: 114%;
    max-width: none;
    max-height: 72svh;
    margin-left: -7%;
  }
}

/* The stage now carries the whole quality claim on its own — the spread rail that used to follow it
   is gone — so it is given more room here than the old two-thirds column allowed.
   align-items must stay `stretch`: every .pb-hero-spread inside the stage is absolutely positioned,
   so the stage has no in-flow content to size from and any centring value collapses it to zero
   width, taking all three spreads with it. The link centres itself instead. */
.pb-hero-right { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pb-hero-more { align-self: center; }
.pb-hero-more {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13.5px var(--rk-font-body); color: var(--rk-emerald); text-decoration: none;
  white-space: nowrap;
}
.pb-hero-more svg { width: 14px; height: 14px; }
.pb-hero-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.pb-hero-more:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 3px; border-radius: 4px; }

/* ═══ 2 · READING AGE ═══════════════════════════════════════════════════════
   Was a footnote under the spread rail (removed 2026-07-24) and is now a band of its own. Sample
   text and illustration sit side by side so the block carries a picture without a second exhibit:
   the text frame is the evidence, the art is there to stop a type-only band reading as bare.
   Sized to stay inside one screen — see the min-height cap on the frame. */
/* One panel: tabs on top, the demo inside, the summary underneath. Tight top margin on purpose —
   the heading, the control and the thing it controls have to read as a single object, which was
   the main thing wrong with the previous version. */
/* Was a hand-set 1380px, i.e. one notch wider than the old 1240 column. Now that the column matches
   the header at 1560 that literal would make this panel the only NARROWER band on the page — the
   opposite of the emphasis it was reaching for — so it rejoins the single grid. */
#reading-age {
  width: min(calc(100% - 2 * var(--pb-gutter)), var(--pb-max));
  padding-top: clamp(16px, 1.4vw, 22px);
  padding-bottom: calc(var(--pb-pad) + clamp(18px, 2.6vw, 44px));
}
.pb-ages { margin-top: clamp(18px, 2vw, 30px); }

.pb-ages-demo {
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 38px);
  align-items: start;
}
.pb-age-copy { min-width: 0; max-width: none; padding-top: clamp(8px, 1vw, 14px); }
.pb-age-copy .pb-head { max-width: none; }
.pb-age-copy .pb-lede { max-width: none; }
.pb-ages-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: clamp(22px, 2.4vw, 30px);
}
.pb-ages-tabs button {
  flex: none;
  font: 600 13.5px var(--rk-font-body);
  color: var(--rk-ink-soft);
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}
.pb-ages-tabs button:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); }
.pb-ages-tabs button.is-on { background: var(--rk-emerald); border-color: var(--rk-emerald); color: #fff; }
.pb-ages-tabs button:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 3px; }

/* ── reader settings ── */
.pb-reader {
  margin-top: clamp(18px, 2vw, 24px);
  padding: clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--rk-line);
  border-radius: 20px;
  background: var(--rk-surface);
  box-shadow: var(--rk-shadow-card);
}
.pb-reader-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pb-reader-head-icon {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  color: var(--rk-emerald); background: var(--rk-emerald-soft);
}
.pb-reader-head-icon svg { width: 16px; height: 16px; }
.pb-reader-title { font: 700 15.5px var(--rk-font-body); color: var(--rk-ink); }
.pb-reader-stack { display: grid; }
.pb-reader-set {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.pb-ages[data-age="0"] .pb-reader-set[data-age-set="0"],
.pb-ages[data-age="1"] .pb-reader-set[data-age-set="1"],
.pb-ages[data-age="2"] .pb-reader-set[data-age-set="2"] {
  opacity: 1; visibility: visible; transition: opacity .18s ease;
}
.pb-reader-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 0; border-top: 1px solid var(--rk-line);
}
.pb-reader-row:first-child { border-top: 0; }
.pb-reader-key { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pb-reader-icon {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--rk-paper-2) 72%, #fff);
  color: var(--rk-ink-soft);
}
.pb-reader-icon svg { width: 16px; height: 16px; }
.pb-reader-icon-level { font: 700 12px/1 var(--rk-font-display); letter-spacing: -.02em; }
.pb-reader-row dt { font: 600 13px var(--rk-font-body); color: var(--rk-ink); }
.pb-reader-value { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.pb-reader-row dd {
  margin: 0;
  font: 700 13.5px var(--rk-font-body);
  color: var(--rk-emerald);
  text-align: right;
}

/* ── the open book ──
   The book itself is a rendered object, not a CSS-constructed card. Only the story text changes;
   the printed geometry stays fixed, which is what keeps switching ages from shifting the layout. */
.pb-age-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  padding-top: clamp(4px, .6vw, 10px);
}
.pb-book-shell {
  position: relative;
  width: min(94%, 900px);
  margin-inline: auto;
  padding-inline: clamp(8px, .9vw, 14px);
}
.pb-book-shell::before {
  content: "";
  position: absolute;
  inset: 8% 8% 4%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%, rgba(255,253,248,.82) 0%, rgba(245,239,229,.34) 48%, rgba(250,248,244,0) 78%);
}
.pb-book { position: relative; width: 100%; }
.pb-book-base {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: brightness(1.055);
}
.pb-book-text {
  position: absolute;
  left: 58.1%;
  top: 11.5%;
  width: 28.5%;
  height: 66%;
  display: grid;
  /* Container on the TEXT layer only — never on an ancestor of .pb-book-base: a container creates a
     stacking context, which would trap the base image's mix-blend-mode inside it (the home ages
     module hit exactly that). Fonts below are in cqw so they scale WITH this box; the old vw clamps
     kept growing after .pb-book-shell hit its 900px cap, which is what pushed the 9-12 text off the
     page on wide viewports. */
  container-type: inline-size;
}
.pb-book-folio {
  position: absolute;
  left: 72.3%;
  /* 82.5% line: below the text box (ends at 77.5%) but still on the page — the paper area of the
     base art ends at ~86%; the old 7.9% put the folio at 92%, on the fore-edge stack OUTSIDE the
     page, where it read as a stray site footer. */
  bottom: 17.5%;
  transform: translateX(-50%);
  font: 600 clamp(10px, .85vw, 12.5px) var(--rk-font-body);
  color: var(--rk-ink-muted);
  letter-spacing: .2px;
}

/* Three panels stay in the DOM and crossfade in the same place. The book is fixed; only the copy
   layer changes, which is why the composition can stay faithful to the reference without jumping. */
.pb-age-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.pb-ages[data-age="0"] .pb-age-panel[data-age-text="0"],
.pb-ages[data-age="1"] .pb-age-panel[data-age-text="1"],
.pb-ages[data-age="2"] .pb-age-panel[data-age-text="2"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease;
}
.pb-book-text .pb-age-badge { display: none; }
.pb-age-panel p {
  margin: 0;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color: #3A382F;
  max-width: 100%;
}
/* cqw = % of the text box width, so lines-per-box and box-fill stay constant at every viewport.
   The 9-12 ratio is sized for its 911-char en text plus ~25% headroom for long locales (de/ru). */
.pb-age-lg p { font-size: clamp(14px, 11.2cqw, 28px); line-height: 1.56; }
.pb-age-md p { font-size: clamp(9px, 7.6cqw, 19px); line-height: 1.6; }
.pb-age-sm p { font-size: clamp(6.5px, 3.95cqw, 11px); line-height: 1.48; }
.pb-age-lg p span { display: block; }
.pb-age-lg p span + span { margin-top: .72em; }

/* ── closing notes ── */
.pb-ages-notes {
  width: min(94%, 900px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.pb-ages-notes li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 18px;
  font: 600 14.5px var(--rk-font-body);
  color: var(--rk-ink-soft);
  text-align: center;
}
.pb-ages-notes li + li { border-left: 1px solid var(--rk-line); }
.pb-ages-notes svg { width: 22px; height: 22px; color: var(--rk-emerald); flex: none; }

/* ═══ 3 · ART STYLES — the page's centrepiece ════════════════════════════════
   One scene, eight renderings, identical frames. The grid is uniform on purpose: any variation in
   tile size would read as a hierarchy that is not being claimed. */
.pb-styles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(26px, 3vw, 42px);
}
.pb-style { position: relative; border-radius: 10px; overflow: hidden; background: var(--rk-surface); box-shadow: var(--rk-shadow-card); }
.pb-style img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .3s cubic-bezier(.2, .9, .3, 1.1); }
.pb-style:hover img { transform: scale(1.06); }
.pb-style figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 10px;
  background: linear-gradient(to top, rgba(30, 42, 62, .88) 40%, rgba(30, 42, 62, 0));
  color: #fff;
  font: 600 13px var(--rk-font-body);
  letter-spacing: .3px;
}
.pb-styles-more { margin-top: clamp(20px, 2.2vw, 30px); text-align: center; font: 600 clamp(16px, 1.25vw, 18.5px) var(--rk-font-body); color: var(--rk-ink-soft); }

/* The Chinese styles lede fits comfortably inside the desktop band. Let it use that width instead
   of inheriting the generic 720px reading column, which stranded its final character on a new line. */
@media (min-width: 901px) {
  html[lang^="zh"] .lp-pb #styles .pb-head,
  html[lang^="zh"] .lp-pb #styles .pb-lede { max-width: none; }
  html[lang^="zh"] .lp-pb #styles .pb-lede { white-space: nowrap; }
}

/* ═══ 4 · AI DRAFTS IT, YOU DIRECT IT ════════════════════════════════════════ */
.pb-edits { display: flex; flex-direction: column; gap: clamp(30px, 3.4vw, 52px); margin-top: clamp(26px, 3vw, 42px); }
.pb-edit { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: clamp(20px, 2.6vw, 44px); align-items: center; }
/* Odd rows swap sides. Source order stays copy-then-images so a screen reader still meets the
   heading before the pictures it describes; only the visual columns move, via `order`.
   The image block's left edge shifts 381px between the two arrangements at 1440. That is inherent —
   it equals the copy column's width — and is an accepted trade for the zigzag, not a defect. See
   the note on editPairs() in the page module before "fixing" it. */
.pb-edit-flip { grid-template-columns: minmax(0, 2fr) minmax(220px, .8fr); }
.pb-edit-flip .pb-edit-copy { order: 2; }
.pb-edit-flip .pb-edit-pair { order: 1; }
.pb-edit + .pb-edit { padding-top: clamp(30px, 3.4vw, 52px); border-top: 1px solid var(--rk-line); }
.pb-edit-copy p { margin-top: 9px; color: var(--rk-ink-soft); font-size: clamp(14.5px, 1.02vw, 16px); line-height: 1.6; }
.pb-edit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 20px); }
.pb-edit-pair figure { margin: 0; }
/* Cropped to a wide band rather than shown at the source 1100×760. The comparison is between two
   images side by side, not a study of either one, and the full ratio made this the tallest block on
   the page for no added information. */
/* `height: auto` is required, not decorative: the img tag's height attribute is a presentational
   hint that maps to the CSS height property, and a specified height makes aspect-ratio a no-op —
   which left these rendering at their full 760px source height. */
.pb-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); }
.pb-edit-pair figcaption { margin-top: 10px; }
/* Solid chips rather than bare uppercase text — the pair now reads at a glance as two labelled
   states rather than two captions. One size up from the old 11.5px. */
.pb-tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font: 700 12.5px var(--rk-font-body); letter-spacing: .7px; text-transform: uppercase;
}
.pb-tag-before { background: var(--rk-paper-2); color: var(--rk-ink-muted); }
.pb-tag-after { background: var(--rk-emerald); color: #fff; }

/* ═══ 5 · A BOOK FOR EVERY OCCASION ══════════════════════════════════════════ */
.pb-occasions { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 30px); margin-top: clamp(26px, 3vw, 42px); align-items: stretch; }
/* height:100% + margin-top:auto on the link puts every card's "See the book" on one baseline,
   however many lines the title above it wraps to. */
.pb-occasion { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pb-occasion-art { display: block; border-radius: 8px; overflow: hidden; box-shadow: var(--rk-shadow-object); background: var(--rk-surface); transition: transform .26s cubic-bezier(.2, .9, .3, 1.1); }
.pb-occasion:hover .pb-occasion-art, .pb-occasion:focus-visible .pb-occasion-art { transform: translateY(-5px); }
.pb-occasion-art img { display: block; width: 100%; height: auto; }
.pb-occasion-name { margin-top: 13px; font: 700 11.5px var(--rk-font-body); letter-spacing: 1.1px; text-transform: uppercase; color: var(--rk-emerald); }
.pb-occasion-book { margin-top: 5px; font: 700 clamp(15px, 1.1vw, 17px)/1.28 var(--rk-font-display); color: var(--rk-ink); }
.pb-occasion-when { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--rk-ink-soft); }
.pb-occasion-go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--rk-font-body); color: var(--rk-emerald); }
.pb-occasion-go svg { width: 14px; height: 14px; }

/* ═══ 6 · DELIVERY — one included, one paid ══════════════════════════════════
   The two cards must never be mistaken for one offer. The paid card is visually the heavier of the
   two and its badge is the loudest element in the block, by design and for compliance. */
/* Weighted towards the cards, not the photograph. At .95/1.05 the placeholder print photo was 568px
   and each offer card 303px — the paid card, which is both the commercial point of the block and
   the part with compliance requirements on it, was the narrowest thing in it and 265px slimmer than
   a stock photo. The photo still has to carry "a physical object exists", so it keeps a third of the
   row rather than being demoted to a thumbnail. */
.pb-delivery { display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); gap: clamp(24px, 3vw, 52px); align-items: center; margin-top: clamp(26px, 3vw, 42px); }
.pb-delivery-photo { margin: 0; border-radius: var(--rk-radius); overflow: hidden; box-shadow: var(--rk-shadow-object); }
.pb-delivery-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* The paid card is the wider of the two. Equal columns made the included plan and the paid add-on
   look like two equivalent options; they are not, and the block's whole job is that they never read
   that way. Width is doing the same work the emerald border and the badge already do. */
.pb-plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.pb-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background: var(--rk-surface);
}
.pb-plan-paid { border-color: var(--rk-emerald); box-shadow: var(--rk-shadow-card); }
.pb-plan-badge {
  align-self: flex-start;
  font: 700 11px var(--rk-font-body);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rk-paper-2);
  color: var(--rk-ink-muted);
}
/* The paid badge is the one element on the page allowed to shout. */
.pb-plan-badge-paid { background: var(--rk-emerald); color: #fff; }
.pb-plan h3 { margin-top: 12px; }
.pb-plan-price { margin-top: 6px; font: 700 clamp(18px, 1.4vw, 22px) var(--rk-font-display); color: var(--rk-ink); }
.pb-plan-price small { display: block; margin-top: 3px; font: 500 11.5px var(--rk-font-body); color: var(--rk-ink-muted); letter-spacing: 0; }
.pb-plan-desc { margin-top: 9px; font-size: 14px; line-height: 1.58; color: var(--rk-ink-soft); }
.pb-plan-points { list-style: none; margin-top: 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pb-plan-points li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--rk-ink-soft); }
.pb-plan-points li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--rk-emerald); }
.pb-plan-cta {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 14px var(--rk-font-body);
  color: var(--rk-emerald);
  text-decoration: none;
}
.pb-plan-cta svg { width: 15px; height: 15px; }
.pb-specs { margin-top: clamp(18px, 2vw, 26px); font-size: 13px; line-height: 1.6; color: var(--rk-ink-muted); }

/* ═══ FAQ + CLOSING ══════════════════════════════════════════════════════════
   Matched to the home page's accordion (the `.faq` rules in home-v3.css) rule for rule — same
   divider, same row padding, same 17px summary, same "+" that rotates 45° into a "×" on open. It is
   the same component; only the max-width is this page's, to sit on its narrower column. */
/* The FAQ is a self-contained closing block, so its heading and accordion share one centred column.
   Questions and answers stay left-aligned inside that column for scanning. */
#faq > .pb-head { margin-inline: auto; text-align: center; }
#faq > .pb-head .pb-kicker { justify-content: center; }
/* The accordion itself is on the whitelist of parts shared with the home page, so it is styled once
   in home-v3.css under `.faq` — which this page already loads. The copy that used to live here had
   drifted to a 720px column against the home page's 640 and grown its own marker geometry, which is
   how one "shared" component came to render three different ways across three pages. The
   ::-webkit-details-marker line this block carried was the one thing it had that the shared rule
   did not; it moved there rather than being lost. */

/* Demoted to a single quiet line and moved below the closing CTA (see the template). It used to
   sit between the FAQ and the CTA, offering four ways to leave at the exact point the page is
   asking for a decision. The links stay — the internal linking is worth keeping. */
.pb-crosslinks {
  width: min(calc(100% - 2 * var(--pb-gutter)), var(--pb-max));
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 34px) 0 clamp(30px, 3vw, 46px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  font-size: 14px;
}
.pb-crosslinks-lead { color: var(--rk-ink-muted); font-weight: 600; }
.pb-crosslink {
  color: var(--rk-ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--rk-line);
  padding-bottom: 1px;
  transition: color .18s, border-color .18s;
}
.pb-crosslink:hover { color: var(--rk-emerald); border-color: var(--rk-emerald); }

/* The closing CTA is fully owned by styles/final-cta.css, shared with the home page. Nothing is
   restated here on purpose: a local override is exactly how the two drifted apart before. */

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

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

@media (max-width: 1100px) {
  .pb-styles { grid-template-columns: repeat(3, 1fr); }
  .pb-occasions { grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 30px); }
}

/* Tablet: the book keeps top billing and moves below the settings, which collapse from a stacked
   list into a single summary row. Tabs stay where they are, on top of the panel. */
@media (max-width: 1023px) {
  .pb-ages-demo { grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
  .pb-reader { order: 1; }
  .pb-age-stage { order: 2; }
  .pb-book-shell { width: min(100%, 760px); }
  .pb-age-copy { padding-top: 0; }
  .pb-reader-title { margin-bottom: 8px; }
  .pb-reader-set { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .pb-reader-row { flex-direction: row; align-items: baseline; gap: 6px; padding: 0; border-top: 0; }
  .pb-reader-row dt::after { content: ":"; }
  .pb-reader-row dd { font-size: 13.5px; }
}

@media (max-width: 900px) {
  .pb-hero { grid-template-columns: 1fr; min-height: auto; gap: clamp(26px, 4vw, 40px); }
  .pb-hero-copy { max-width: none; }
  /* Stacked, the copy and the scene add up rather than sitting side by side, so the scene needs a
     tighter cap than the two-column case or the hero runs past a full screen on its own (110% at
     768x1024 before this). */
  .pb-hero-scene img { max-height: 38svh; }
  /* Before/after stacks rather than shrinking to two unreadable thumbnails. */
  .pb-edit { grid-template-columns: 1fr; gap: 18px; }
  /* Drop the mirrored row's `order` once the grid is a single column. Side-by-side it swaps left
     and right; stacked it would swap TOP and BOTTOM, putting that row's pictures above its own
     heading while the other two keep heading-first. The zigzag has no meaning in one column. */
  .pb-edit-flip .pb-edit-copy,
  .pb-edit-flip .pb-edit-pair { order: 0; }
  .pb-delivery { grid-template-columns: 1fr; }
  .pb-delivery-photo { order: 2; }
}

@media (max-width: 767px) {
  .pb-styles { grid-template-columns: repeat(2, 1fr); }
  /* Phone: ONE page, not a shrunken spread. Two 160px-wide pages would be a picture of a book
     rather than a readable one, and the brief rules that out explicitly. Dropping the verso also
     removes the gutter, so the crease is turned off with it. */
  .pb-book-shell { width: 100%; padding-inline: 0; }
  /* The ONE page, implemented: the base art is a full spread, so the phone crops it to the recto
     (text) page — 210% width, window starting at 53.8% of the art, just right of the baked crease.
     Before this the spread shrank whole: an 89px text column that overflowed its own book by 3-5x
     image heights on every tab. Text box and folio are the desktop percentages remapped through the
     same 2.1x crop (left = old x 2.1 - 113). Fonts need no override — they are in cqw, and the box
     is now ~2x wider than the shrunken-spread column was. */
  .pb-book { overflow: hidden; }
  .pb-book-base { width: 210%; max-width: none; margin-left: -113%; }
  .pb-book-text { left: 9%; top: 11.5%; width: 59.9%; height: 66%; }
  .pb-book-folio { left: 38.8%; }
  /* Tabs scroll sideways rather than wrapping — three pills on two lines read as a broken control.
     justify-content has to become flex-start or the row cannot be scrolled back to its first item. */
  .pb-ages-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .pb-ages-tabs::-webkit-scrollbar { display: none; }
  .pb-ages-notes { grid-template-columns: 1fr; gap: 0; }
  .pb-ages-notes li {
    justify-content: flex-start;
    min-height: 0;
    padding: 12px 0;
    text-align: left;
  }
  .pb-ages-notes li + li { border-left: 0; border-top: 1px solid var(--rk-line); }
  /* Stacked, per the brief — but each frame is cropped shallower so three stacked pairs do not run
     to two and a half screens. */
  .pb-edit-pair { grid-template-columns: 1fr; gap: 12px; }
  .pb-edit-pair img { aspect-ratio: 2 / 1; }
  /* Two columns, not one: four full-height covers in a single column made this the tallest block on
     the phone by a wide margin, and the point of the block is seeing four DIFFERENT books together
     rather than examining any one of them. */
  .pb-occasions { grid-template-columns: 1fr 1fr; gap: 18px 14px; max-width: none; }
  .pb-occasion-when { font-size: 13px; }
  /* Cards stack — and the paid badge has to stay just as unmissable as it is side by side, so it
     gains a rule above it rather than relying on adjacency to distinguish the two offers. */
  .pb-plans { grid-template-columns: 1fr; }
  .pb-plan-paid { border-width: 2px; }
  .pb-plan-badge { font-size: 11.5px; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-pb .pb-reveal { opacity: 1; transform: none; transition: none; }
  .pb-style img, .pb-occasion-art { transition: none; }
  .pb-reader-set, .pb-age-panel { transition: none; }
  .lp-pb .chips .idea-chip { transition: none; }
  .pb-ages[data-age="0"] .pb-reader-set[data-age-set="0"],
  .pb-ages[data-age="1"] .pb-reader-set[data-age-set="1"],
  .pb-ages[data-age="2"] .pb-reader-set[data-age-set="2"],
  .pb-ages[data-age="0"] .pb-age-panel[data-age-text="0"],
  .pb-ages[data-age="1"] .pb-age-panel[data-age-text="1"],
  .pb-ages[data-age="2"] .pb-age-panel[data-age-text="2"] { transition: none; }
}