/* The landing pages: the home page and the ten pack pages.

   Every rule is prefixed with .lp, because a landing page loads styles.css
   for the masthead, the shopbar and the footer and then this file for the
   sheet inside them. Unscoped rules on body, nav, h1 and .cta would reach out
   of the article and restyle the site chrome.

   The tokens sit on .lp rather than :root for the same reason. They are the
   Sticker system of 6 October 2026: blue and yellow, hard offset shadows,
   2 to 3px outlines, 8px corners. A pack page takes its own colour from the
   body class build.py writes, through --accent, and uses it for edges, bands
   and shadows. Text never sits on a pack colour here, so no pack colour has
   to pass a contrast test it would fail. */

main.lp {
  box-sizing: border-box;
  width: min(56rem, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
  padding: 1.25rem 1.25rem 2.5rem;
}
@media (min-width: 40rem) {
  main.lp { width: min(56rem, calc(100% - 4rem)); padding-left: 2rem; padding-right: 2rem; }
}
.lp .four { padding-right: 1.4rem; }
.lp .four .nums span { right: 0; }

/* The sheet's palette and type tokens.

   Declared on the phone buy bar as well as the sheet, because build.py puts
   <aside class="buybar"> beside <main class="lp"> and not inside it, so the
   bar inherits none of these down the tree. The first version of the bar set
   background: var(--paper) and got nothing, and the page scrolled straight
   through it. Tokens only here: the type and padding below stay on the sheet,
   which is why this is two rules and not one.

   Not put on body.page-lp, deliberately. styles.css already defines --muted
   on :root for the masthead and the footer, and redeclaring it at body level
   would repaint parts of the page this file has no business touching. */

.lp,
.page-lp .buybar {
  --paper: #ffffff;
  --sheet: #ffffff;
  --ink: #16253f;
  --muted: #56657a;
  --blue: #0968d8;
  --blue-dark: #064aa4;
  --blue-deep: #053a80;
  --blue-tint: #eef6ff;
  --yellow: #ffd333;
  --yellow-soft: #fff2a8;
  --wash: #fff9d7;
  --cyan: #12c7e8;
  --line: #bddcf5;
  /* The plate keeps the printed sheet: grey outer pair, and the inner pair
     in #b68235, GOLD in worksheets/wsgen/tokens.py. The plate demonstrates
     the product, so it follows the PDF and not the palette. */
  --grey: #c0b9ab;
  --rule: #b68235;
  --radius: 8px;
  --border-card: 2px solid rgba(9, 104, 216, 0.34);
  --shadow-btn: 4px 4px 0 var(--blue);
  --shadow-card: 5px 5px 0 rgba(255, 211, 51, 0.76);
  --shadow-hero: 7px 7px 0 var(--cyan);
  /* The pack this page sells. body.pack-* in styles.css sets it; the home
     page has none and falls back to the brand blue. */
  --accent: var(--pack, var(--blue));
  --accent-tint: var(--pack-tint, var(--blue-tint));
  --display: "Chelsea Market", "Baloo 2", cursive;
  --body: "Comic Relief", "Nunito", system-ui, sans-serif;
  --glyph: "Cedarville Cursive", cursive;
  --script: "Dancing Script", cursive;
}

.lp {
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  padding: 0 0 1rem;
}

/* styles.css justifies body copy from 46rem up. The sheet is a worksheet, not
   a column of prose, so it stays ragged right at every width. */
.lp p,
.lp li,
.lp dd { text-align: left; }

.lp a { color: inherit; }

/* Design preview only. One notebook sheet, Copybook tokens, no scripts.
   Every rule lives here because the live CSP strips inline <style>. */

.lp a:focus-visible,
.lp .cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* The sheet ------------------------------------------------------------- */

.lp .sheet {
  width: min(52rem, calc(100% - 1.5rem));
  margin: 1rem auto 3rem;
  background: var(--sheet);
  border: 3px solid var(--blue-dark);
  border-top: 10px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
}

.lp .sheet > section {
  padding: 1.4rem 1.4rem 1.6rem;
  border-bottom: 2px dashed var(--line);
}

.lp .sheet > section:last-child { border-bottom: 0; }

.lp .sheet h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--blue-dark);
  margin: 0 0 0.7rem;
}

/* Hero ------------------------------------------------------------------ */

.lp .hero { padding-top: 1.6rem; }

.lp .hero-copy { min-width: 0; }

.lp .kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  margin: 0 0 0.6rem;
}

.lp .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.45rem;
  list-style: none;
  margin: 0 0 0.95rem;
  padding: 0;
}

.lp .chips li {
  border: 2px solid var(--yellow);
  background: var(--yellow-soft);
  color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The class badges wear the class colours: UKG yellow, Class 1 cyan,
   Class 2 green, Class 3 violet. build.py writes chip-ukg, chip-1 and so on
   from the chip's text, because a pack for Class 2 and 3 starts its list on
   Class 2 and a colour by position would paint that one yellow. Ink text on
   every tint. */
.lp .chips .chip-1 { border-color: #12c7e8; background: #eaf7fb; }
.lp .chips .chip-2 { border-color: #16a86f; background: #edf8ef; }
.lp .chips .chip-3 { border-color: #8a5cff; background: #f1effb; }

.lp h1 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blue-dark);
  font-size: clamp(1.7rem, 4.2vw, 2.45rem);
  line-height: 1.15;
  margin: 0 0 0.85rem;
}

.lp .lede { margin: 0 0 0.7rem; max-width: 38rem; }

.lp .meta { font-size: 0.9rem; color: var(--muted); margin: 0.9rem 0 1.1rem; }

/* The primary button: yellow, a blue-dark outline, a hard blue shadow that
   shrinks when pressed. */
.lp .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--blue-dark);
  text-decoration: none;
  padding: 0.7rem 1.5rem;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  min-height: 48px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.lp .cta:hover { color: var(--blue-dark); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--blue); }
.lp .cta:active { transform: translate(4px, 4px); box-shadow: none; }

/* On a phone every call to action takes the whole measure. A 44px target
   sitting two-thirds of the way across a 390px sheet is a target a thumb
   has to aim for, and each one here is a standalone block already, never a
   word inside a sentence. */
@media (max-width: 39.99rem) {
  .lp .cta {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  main.lp { width: calc(100% - 1rem); padding-left: 0; padding-right: 0; }
  .lp .sheet { width: 100%; }
  .lp .sheet > section { padding: 1.25rem 1rem 1.4rem; }
}

.lp .hint {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 24rem;
}

/* Four-line ruling -------------------------------------------------------
   The band is three equal gaps: line 1 top, the gold pair at a third and two
   thirds, line 4 at the bottom. The writing baseline is line 3.

   Every number below was measured off the shipped Cedarville Cursive TTF,
   1024 units per em: cap height 0.7568em, x-height 0.3906em, ascent
   1.2490em, descent 0.6475em. Do not change one without measuring again.

   Size. A capital has to fill two gaps, so font-size = 2 * gap / 0.7568,
   which is band * 0.880882 since gap is band / 3. That same size puts the
   x-height at 1.03 gaps, so small letters fill the gold pair on their own.
   One size for the whole band, exactly as the printed sheet does it.

   Baseline. A span with line-height 0 carries its baseline
   (ascent - descent) / 2 = 0.3008em below the top of its box, so the glyph
   is dropped on line 3 and pulled back up by that much. No eyeballed nudge.

   Descenders run past line 4 in this hand (g reaches 1.30 gaps below the
   baseline), so the band keeps clear space under it and never clips. */

.lp .four {
  --band: 7.2rem;
  --rail: 0rem;
  --inset: 6%;
  position: relative;
  height: var(--size, var(--band));
  margin-bottom: 1rem;
}

.lp .four i {
  position: absolute;
  left: 0;
  right: var(--rail);
  height: 0;
  border-top: 1.2px solid var(--grey);
  pointer-events: none;
}

.lp .four i:nth-child(1) { top: 0; }

.lp .four i:nth-child(2) { top: 33.3333%; border-color: var(--rule); }

.lp .four i:nth-child(3) { top: 66.6667%; border-color: var(--rule); }

.lp .four i:nth-child(4) { top: 100%; }

.lp .four .g,
.lp .four .w {
  position: absolute;
  left: var(--inset);
  top: 66.6667%;
  transform: translateY(-0.3008em);
  font-family: var(--glyph);
  font-size: calc(var(--size, var(--band)) * 0.880882);
  line-height: 0;
  white-space: nowrap;
  color: var(--ink);
}

/* Height modifiers. Same font-size, because the letterform itself carries
   the height: a fills the gold pair, h rises 1.92 gaps to line 1, g drops
   1.30 gaps past line 4. Only the left inset is tuned, since each glyph
   starts a different distance right of its own origin. */

.lp .four .g.mid { left: calc(var(--inset) + 0.2rem); }

.lp .four .g.tall { left: calc(var(--inset) + 0.2rem); }

.lp .four .g.tail { left: calc(var(--inset) + 0.15rem); }

.lp .four .nums span {
  position: absolute;
  right: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  transform: translateY(-0.45em);
}

.lp .four .nums span:nth-child(1) { top: 0; }

.lp .four .nums span:nth-child(2) { top: 33.3333%; }

.lp .four .nums span:nth-child(3) { top: 66.6667%; }

.lp .four .nums span:nth-child(4) { top: 100%; }

.lp .four-hero { --band: 7.2rem; --rail: 1.6rem; }

.lp .four-sm { --band: 5rem; }

.lp .four-word { --band: 3.6rem; --inset: 4%; }

/* Labels sit above the band. Nothing is ever written on the ruling. */

.lp .plate-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* The first label is a yellow pill, the second the letter's name in the
   script face, which is a label and never the letter a child copies. */
.lp .plate-label span:first-child {
  color: var(--blue-dark);
  background: var(--yellow-soft);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.lp .plate-label span:last-child {
  font-family: var(--script);
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blue);
}

.lp .plate {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 2px dashed var(--line);
}

.lp .plate-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Entity line ----------------------------------------------------------- */

.lp .entity p {
  margin: 0;
  max-width: 44rem;
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--blue-dark);
}

/* Prose blocks ---------------------------------------------------------- */

.lp .eve p,
.lp .honest p {
  margin: 0 0 0.7rem;
  max-width: 40rem;
}

.lp .eve p:last-child,
.lp .honest p:last-child { margin: 0; }

/* The "what this will not do" block, 8 September 2026.

   It is the most trustworthy section on a sales letter and it read like an
   afterthought set in the same prose as everything around it. A hairline and a
   little air make a parent stop on it, which is the whole point: the page that
   admits what it cannot do is the page you believe about what it can. Outlined
   on paper like the rest of the sheet, no fill, no warning colour. */

.lp .honest {
  border: 2px solid var(--ink);
  border-left: 8px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--yellow-soft);
  padding: 1.4rem 1.5rem;
}

.lp .honest p { max-width: 42rem; }

.lp .sec-lede {
  margin: 0 0 1.2rem;
  max-width: 38rem;
  font-size: 0.98rem;
  color: var(--muted);
}

.lp .sec-foot {
  margin: 0.4rem 0 0;
  max-width: 38rem;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Four heights ---------------------------------------------------------- */

/* The last row of this block is a caption under a band that already carries
   1rem of clear space below line 4, so the section trims its own padding. */

.lp .examples { padding-bottom: 0.9rem; }

.lp .exgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 1.8rem;
}

.lp .exgrid figure {
  margin: 0;
  padding: 0.9rem 1rem 0.4rem;
  background: var(--sheet);
  border: var(--border-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.lp .exgrid figcaption {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Letters, joins, words ------------------------------------------------- */

.lp .path .sec-lede { margin-bottom: 0.9rem; }

.lp .pathline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}

.lp .pathline li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.8rem 0;
  border-top: 2px solid var(--blue);
}

.lp .pathline strong {
  grid-column: 2;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}

.lp .path-note {
  grid-column: 2;
  font-size: 0.95rem;
}

.lp .tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.35rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.lp .tag-now {
  border-color: var(--blue-dark);
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 700;
}

.lp .path-foot {
  margin: 1.1rem 0 0;
  max-width: 38rem;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Words ----------------------------------------------------------------- */

.lp .wordlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 1.8rem;
}

/* Look, trace, copy, write ---------------------------------------------- */

.lp .steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.lp .steps li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.lp .steps li:first-child { border-top: 2px solid var(--blue); }

.lp .steps li:last-child { border-bottom: 2px solid var(--blue); }

.lp .steps strong {
  grid-column: 2;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
}

.lp .steps li > span:last-child {
  grid-column: 2;
  font-size: 0.95rem;
}

.lp .n {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: 0.06em;
  line-height: 2.1;
}

/* Who it is for --------------------------------------------------------- */

.lp .who ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp .who li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 0.9rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
}

.lp .who li:first-child { border-top: 2px solid var(--blue); }

.lp .who li:last-child { border-bottom: 2px solid var(--blue); }

.lp .who strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
}

/* The learn block borrows the who rows. Its headings are links, so they take
   the same gold rule the rest of the sheet uses for a line. */
.lp .learn strong a {
  text-decoration-color: var(--blue);
  text-underline-offset: 0.18em;
}

.lp .learn li > span:last-child {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Buy ------------------------------------------------------------------- */

.lp .buy {
  display: grid;
  gap: 0.9rem;
}

.lp .buy-book h2 { margin: 0 0 0.3rem; font-size: 1.45rem; }

.lp .buy-book p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 30rem;
}

.lp .buy-book .buy-spec {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lp .buy-act { align-self: end; }

.lp .price {
  margin: 0;
  justify-self: start;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.35rem 0.8rem;
  transform: rotate(-3deg);
}

.lp .pain ul,
.lp .inside ul,
.lp .checks ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.lp .pain li,
.lp .inside li,
.lp .checks li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  padding-left: 1.5rem;
  position: relative;
}

.lp .pain li:first-child,
.lp .inside li:first-child,
.lp .checks li:first-child { border-top: 2px solid var(--blue);
}

.lp .pain li::before,
.lp .inside li::before,
.lp .checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--yellow);
  border: 2px solid var(--blue-dark);
  border-radius: 50%;
}

.lp .days ol,
.lp .parent ol,
.lp .ladder ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* On a phone this is two rows, not three columns: the number beside the
   title, then the note on its own line under the title. The three-column
   version wants about 17rem of text width and a 390px screen does not have
   it, so the note used to wrap one or two words at a time down a skinny
   third column. The wide layout is in the 40rem block below. */

.lp .days li,
.lp .parent li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.lp .days li:first-child,
.lp .parent li:first-child { border-top: 2px solid var(--blue);
}

.lp .days strong,
.lp .parent strong,
.lp .ladder strong {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
}

/* "Day 30" is the widest number in this list, so its column is wider. */
.lp .days li { grid-template-columns: 4.8rem 1fr; }

.lp .days .n { font-size: 0.78rem; letter-spacing: 0.02em; }

.lp .days strong,
.lp .parent strong { grid-column: 2; }

.lp .days li > span:last-child,
.lp .parent li > span:last-child { grid-column: 2; font-size: 0.95rem;
}

.lp .ladder ol {
  display: grid;
  gap: 0;
}

.lp .ladder li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.lp .ladder li:first-child { border-top: 2px solid var(--blue); }

.lp .ladder li:last-child { border-bottom: 2px solid var(--blue); }

.lp .faq dl { margin: 0; }

.lp .faq dt {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blue-dark);
  font-size: 1.15rem;
  margin: 0.9rem 0 0.25rem;
}

.lp .faq dt:first-child { margin-top: 0; }

.lp .faq dd {
  margin: 0;
  max-width: 40rem;
  color: var(--ink);
}

.lp .close .cta { margin: 0.4rem 0 0.8rem; }

.lp .note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 36rem;
}

/* Wider than a phone ---------------------------------------------------- */

@media (min-width: 34rem) {
  .lp .exgrid { grid-template-columns: 1fr 1fr; }

  .lp .wordlist { grid-template-columns: 1fr 1fr; }

  .lp .who li { grid-template-columns: 6rem 1fr; }

  .lp .steps li { grid-template-columns: 2.2rem 6.5rem 1fr; align-items: baseline;
  }

  .lp .steps strong { grid-column: 2; }

  .lp .steps li > span:last-child { grid-column: 3; }

  .lp .n { line-height: inherit; }
}

@media (min-width: 40rem) {
  .lp .sheet { margin-top: 1.5rem; }

  .lp .sheet > section { padding-left: 2rem; padding-right: 2rem; }

  /* Room for three columns now: number, title, note on one line. */
  .lp .days li,
  .lp .parent li { align-items: baseline; }

  .lp .parent li { grid-template-columns: 2.4rem 7.2rem 1fr; }

  .lp .days li { grid-template-columns: 4.8rem 8.5rem 1fr; }

  .lp .days li > span:last-child,
  .lp .parent li > span:last-child { grid-column: 3; }

  .lp .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2.5rem;
    align-items: center;
  }

  .lp .plate { margin-top: 0; padding-top: 0; border-top: 0; }

  .lp .four-hero { --band: 8.2rem; }

  .lp .buy {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 1.5rem;
  }

  .lp .price { justify-self: end; }

  .lp .buy-act { grid-column: 1 / -1; }
}

@media (min-width: 48rem) {
  .lp .pathline { grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; }

  .lp .pathline li { align-content: start; }

  .lp .path-note { min-height: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .lp .cta { transition: none; }
}

/* ---- not in preview.css from here down ---------------------------------

   The home page doors. Two, not eleven: the letters book and the daily book.
   Same outlined-card language as the rest of the sheet, so a door is a gold
   hairline and a price, never a filled tile. */

.lp .doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp .doors li {
  margin: 0;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.lp .doors h2 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
}
.lp .doors .door-for {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lp .doors p { margin: 0 0 0.7rem; max-width: 30rem; font-size: 0.98rem; }
.lp .doors .door-spec {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.lp .doors .cta { font-size: 1rem; }

/* One line under the doors, for the parent who wants everything at once. */
.lp .also {
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 38rem;
}
.lp .also a { text-decoration-color: var(--blue); text-underline-offset: 0.2em; }

/* Read next, and the page-updated line. Both come from the base template and
   sit outside the sheet, so they take the sheet's measure and nothing else. */

.lp .related,
.lp .updated {
  width: min(52rem, calc(100% - 1.5rem));
  margin-left: auto;
  margin-right: auto;
}
.lp .related { margin-bottom: 1.5rem; }
.lp .related h2 { font-size: 1.2rem; }
.lp .updated { margin-top: 0; }

@media (min-width: 40rem) {
  .lp .doors { grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; }
}

/* The phone buy bar ------------------------------------------------------

   build.py fills the {{SHOPBAR}} slot with this on a priced landing page. A
   sales letter is long, and on a phone the price and the button are gone two
   scrolls in, so they stay pinned to the bottom of the screen instead. Above
   40rem the page is short enough to reach a button by scrolling, and a fixed
   rail there would only cover the sheet, so it is hidden.

   Scoped to .page-lp on the body and NOT to .lp, because the template puts
   the aside next to <main class="lp"> and not inside it. Written as .lp
   .buybar first, which matched nothing at all: the bar landed in the flow
   under the masthead, unstyled, on every phone. lp.css only ever loads on a
   landing page, so the body class is the honest hook here.

   Outlined on paper, one gold hairline on top, same as everything else. It is
   a link to the order form, not a payment: money still happens on PayU. */

.page-lp .buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--wash);
  border-top: 3px solid var(--blue);
  padding: 0.5rem 0.9rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  font-family: var(--body);
}

.page-lp .buybar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.15rem 0.8rem;
  max-width: 34rem;
  margin: 0 auto;
}

.page-lp .buybar p { margin: 0; }

.page-lp .buybar-book {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}

.page-lp .buybar-price { color: var(--blue-dark); white-space: nowrap; }

.page-lp .buybar-link {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--blue);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blue-dark);
  text-decoration: none;
  white-space: nowrap;
}

.page-lp .buybar-note {
  font-size: 0.78rem;
  color: var(--muted);
}

.page-lp .buybar-note a { color: var(--muted); text-decoration-color: var(--blue); }

/* The bar covers the last inch of the page, so the sheet ends above it. */
.page-lp main.lp { padding-bottom: 6rem; }

@media (min-width: 40rem) {
  .page-lp .buybar { display: none; }
  .page-lp main.lp { padding-bottom: 2.5rem; }
}

/* ---- homepage redesign sections ---------------------------------------- */

/* Hero CTAs and trust microcopy */

.lp .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin-top: 1.2rem;
}

/* The secondary button: the same sticker on white. */
.lp .cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-dark);
  background: var(--paper);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  min-height: 48px;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.lp .cta-link:hover { color: var(--blue-dark); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--blue); }

/* Final polish, 22 September 2026. Two rails under the hero.

   The sticky bar is the desktop counterpart of .home-sticky at the bottom of
   the phone screen: a name, a price and one button that ride along while the
   page scrolls. Hooked on .page-lp like the phone buy bar, hidden until 48rem
   because the phone already has its own rail. position: sticky, no script.
   The homepage carries no .shopbar, so top: 0 meets nothing else. It is
   aria-hidden with the link at tabindex -1 for the same reason .home-sticky
   is: the hero and the pricing cards hold the real buttons, and a screen
   reader does not need the same link a third time.

   The value strip replaces the hero's trust-micro line, which said the same
   four things in smaller type inside the copy column. */

.page-lp .sticky-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--wash);
  border-bottom: 2px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink);
}

.page-lp .sticky-bar-title {
  font-family: var(--display);
  font-weight: 400;
}

.page-lp .sticky-bar-meta {
  color: var(--muted);
  flex: 1;
}

.page-lp .sticky-bar-cta {
  display: inline-flex;
  align-items: center;
  background: var(--yellow);
  color: var(--blue-dark);
  text-decoration: none;
  padding: 0.35rem 1rem;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--blue);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
}

.page-lp .sticky-bar-cta:hover { color: var(--blue-dark); box-shadow: 1px 1px 0 var(--blue); transform: translate(2px, 2px); }

@media (min-width: 48rem) {
  .page-lp .sticky-bar { display: flex; }
}

.lp .value-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 0 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

.lp .value-strip span + span::before {
  content: "\2605";
  margin-right: 1.5rem;
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--blue-dark);
}

@media (max-width: 29.99rem) {
  .lp .value-strip {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    white-space: normal;
  }
  .lp .value-strip span + span::before { margin-right: 0.75rem; }
}

/* Price line above the primary button, 22 September 2026. The amber chip
   carries the number at 1.5rem and the page count sits beside it, so a parent
   knows the price and the volume before the button. Amber ground, ink text:
   6.7 on the Playbook sheet. */

.lp .hero-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.lp .hero-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}

/* The price tag: yellow, an ink outline and shadow, tilted three degrees,
   like a sticker slapped on the cover. */
.lp .price-chip {
  display: inline-flex;
  align-items: center;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
  white-space: nowrap;
}

.lp .price-meta {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

/* The hero plate is a filled card on every width, so the product reads as an
   object and not as four lines floating on the paper. */

.lp .hero .plate {
  background: var(--sheet);
  border: 3px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hero);
  padding: 1.3rem 1.3rem 1.2rem;
  margin-top: 1.6rem;
}

.lp .hero .four-hero { --band: 12rem; --rail: 1.7rem; }

/* Conversion polish, 22 September 2026. The hero plate is the product, so on
   a wide screen it takes the right half of the hero and a band well above the
   plates elsewhere on the page. Scoped to .hero so those plates do
   not grow with it. Written after the base rule above, because the two share
   a selector and the later one has to be the wide one.

   Final polish, same day: both bands grew by a quarter, 9.6rem to 12rem on a
   phone and 12rem to 15rem wide, so the plate is the centrepiece of the hero.
   The glyph scales with the band (font-size is band * 0.880882), so nothing
   else moves. */
@media (min-width: 40rem) {
  .lp .hero .four-hero { --band: 15rem; --rail: 1.8rem; }
  .lp .hero .plate { padding: 1.6rem 1.8rem 1.4rem; margin-top: 0; }
}

@media (max-width: 39.99rem) {
  .lp .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .lp .hero-ctas .cta-link {
    justify-content: center;
  }
  .lp .hero-buy { align-items: stretch; gap: 0.6rem; }
}

/* Why the four-line ruling matters */

.lp .why-ruling .why-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 0.9rem;
}

.lp .why-ruling .why-text p { margin: 0 0 0.7rem; max-width: 38rem; }

.lp .why-ruling .why-text p:last-child { margin: 0; }

.lp .why-ruling .why-plate {
  padding: 1rem 1.1rem 0.4rem;
  background: var(--sheet);
  border: var(--border-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

@media (min-width: 40rem) {
  .lp .why-ruling .why-body {
    grid-template-columns: 1.2fr 0.85fr;
    gap: 0 2rem;
    align-items: start;
  }

}

/* Five-step method. Final polish, 22 September 2026: a numbered circle, a
   bold label and one line each. Stacked on a phone with the circle in a left
   column; a five-across row from 48rem with an arrow drawn between the
   circles by ::after, so there is no markup for the connector and nothing for
   a screen reader to read out. The circle is filled with the deep teal, not
   the base: white on the base measures 4.7 and the number is small text. */

.lp .method-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.lp .method-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  align-items: start;
}

.lp .method-num {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--blue-dark);
  box-shadow: 3px 3px 0 var(--yellow);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}

.lp .method-step strong {
  grid-column: 2;
  align-self: center;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
}

.lp .method-desc {
  grid-column: 2;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (min-width: 48rem) {
  .lp .method-flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 1.5rem;
  }
  .lp .method-step {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
    row-gap: 0.45rem;
  }
  .lp .method-num { grid-row: 1; }
  .lp .method-step strong { grid-column: 1; }
  .lp .method-desc { grid-column: 1; font-size: 0.88rem; }
  .lp .method-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 1.25rem;
    right: -0.75rem;
    transform: translate(50%, -50%);
    color: var(--blue);
    font-size: 1.4rem;
    line-height: 1;
  }
}

/* What you get, the stat cards */

.lp .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.lp .stat-card {
  background: var(--sheet);
  border: var(--border-card);
  border-radius: var(--radius);
  padding: 1.2rem 1rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.lp .stat-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--blue);
  margin: 0 0 0.2rem;
  line-height: 1;
}

.lp .stat-num-sm {
  font-size: 1.55rem;
  line-height: 1.2;
}

.lp .stat-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}

/* Block level, so the tile lines up with the left aligned number under it. */
.lp .stat-card .icon-tile { display: grid; margin-bottom: 0.7rem; }

@media (min-width: 40rem) {
  .lp .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Product pricing cards */

.lp .price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1rem;
}

.lp .price-card {
  border: var(--border-card);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.6rem;
  background: var(--sheet);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp .price-card-featured {
  border: 3px solid var(--blue-dark);
  background: var(--blue-tint);
}

.lp .price-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--yellow-soft);
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  margin: 0 0 0.6rem;
}

.lp .price-card h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blue-dark);
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.lp .price-spec {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 0.8rem;
  line-height: 1.5;
  flex: 1;
}

.lp .price-amount {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1;
}

@media (min-width: 40rem) {
  .lp .price-grid { grid-template-columns: repeat(3, 1fr); }
}

/* See the actual pages. Real pages of the book, rendered out of the PDF by
   scripts/render_pack_pages.py, laid out like sheets dropped on a desk:
   white paper, a 2px ink edge, tipped between -2 and 2 degrees, and a small
   yellow PDF tag on each. Two by two on a phone, one overlapping row from
   40rem. The tilt is a pose, not motion, so it stays under reduced motion;
   only the hover lift is switched off there. */

.lp .page-fan {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin: 1.2rem 0 0;
  padding: 0.7rem 0.3rem 0.3rem;
}
.lp .page-fan li { margin: 0; padding: 0; min-width: 0; }
.lp .page-fan li::before { content: none; }

.lp .sheet-page {
  --tilt: -2deg;
  position: relative;
  margin: 0;
  transform: rotate(var(--tilt));
  transition: transform 0.15s ease;
}
.lp .page-fan li:nth-child(2) .sheet-page { --tilt: 1.5deg; }
.lp .page-fan li:nth-child(3) .sheet-page { --tilt: -1deg; }
.lp .page-fan li:nth-child(4) .sheet-page { --tilt: 2deg; }

.lp .sheet-page img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--accent);
}

.lp .pdf-pill {
  position: absolute;
  top: -0.6rem;
  right: 0.5rem;
  z-index: 1;
  padding: 0.15rem 0.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.lp .sheet-page figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}

.lp .sheet-page:hover { transform: rotate(0deg) translateY(-4px); }

.lp .gallery-caption {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.9rem 0 0;
}

@media (min-width: 40rem) {
  .lp .page-fan {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0.9rem 0.6rem 0.3rem;
  }
  .lp .page-fan li { flex: 0 1 12.5rem; position: relative; }
  .lp .page-fan li + li { margin-left: -0.6rem; }
  .lp .page-fan li:hover { z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .sheet-page { transition: none; }
  .lp .sheet-page:hover { transform: rotate(var(--tilt)); }
}

/* Free pack email capture */

/* The free pack band: the yellow wash, a heavy outline and the cyan hero
   shadow, with the blue button that the guidelines give to downloads. */
.lp .free-capture {
  background: var(--wash);
  border: 3px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hero);
  padding: 1.6rem 1.4rem;
}

.lp .free-capture .cta,
.lp .free-capture button {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: none;
}

.lp .free-capture .cta:hover,
.lp .free-capture button:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; transform: none; }

.lp .subscribe-form { margin-top: 1rem; }

/* The pencil mascot. Floated so the heading and the lede wrap round it, and
   pulled up so it stands on the top edge of the band like a sticker. Small on
   a phone, so the form starts where it did. */
.lp .free-capture .mascot,
.lp .milestones .mascot {
  float: right;
  width: 84px;
  margin: -2.2rem -0.3rem 0.3rem 0.8rem;
}
.lp .milestones .mascot { margin-top: 1.4rem; }
.lp .milestones .stat-grid { clear: both; }
@media (min-width: 40rem) {
  .lp .free-capture .mascot { width: 132px; margin: -3.4rem 0 0.4rem 1.2rem; }
  .lp .milestones .mascot { width: 120px; margin: 1rem 0.4rem 0 1.2rem; }
}

.lp .sub-field {
  margin: 0 0 0.65rem;
}

.lp .sub-field input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--sheet);
}

.lp .sub-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--yellow-soft);
}

.lp .sub-submit { margin: 0.5rem 0 0; }

.lp .sub-foot {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
}

/* Audience cards. Five filled surfaces, one per class plus teachers. */

.lp .audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1rem;
}

.lp .audience-card {
  background: var(--paper);
  border: 2px solid var(--blue-dark);
  border-top: 8px solid var(--yellow);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-card);
}

.lp .audience-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  color: var(--blue-dark);
}

/* The cards run UKG, Class 1, Class 2, Class 3, then teachers, so each class
   card takes its class colour along the top edge. */
.lp .audience-card:nth-child(2) { border-top-color: #12c7e8; }
.lp .audience-card:nth-child(3) { border-top-color: #16a86f; }
.lp .audience-card:nth-child(4) { border-top-color: #8a5cff; }
.lp .audience-card:nth-child(5) { border-top-color: var(--blue); }

.lp .audience-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (min-width: 34rem) {
  .lp .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  .lp .audience-grid { grid-template-columns: repeat(3, 1fr); }
}

/* A to Z explorer. Twenty-six pills, each a 44px target, the letter set in
   the school hand so the grid previews the product and not the UI font. */

.lp .az-explorer p { max-width: 36rem; margin: 0 0 1rem; }

.lp .az-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp .az-grid li { margin: 0; padding: 0; }

.lp .az-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.6rem;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--yellow);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--glyph);
  font-size: 1.45rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.lp .az-grid a:hover {
  background: var(--yellow-soft);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--yellow);
  transform: translate(2px, 2px);
}

.lp .az-foot {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.lp .az-foot a { text-decoration-color: var(--blue); text-underline-offset: 0.18em; }

/* Mobile-only sticky CTA */

.lp .home-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  border-top: 3px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 14px color-mix(in srgb, var(--ink) 18%, transparent);
}

.lp .home-sticky-label {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1;
}

.lp .home-sticky-btn {
  background: var(--yellow);
  color: var(--blue-dark);
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  padding: 0.4rem 1.1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.lp .home-sticky-btn:hover { background: var(--yellow-soft); }

@media (min-width: 48rem) {
  .lp .home-sticky { display: none; }
}

/* ---- conversion polish, 22 September 2026 -------------------------------

   Heading hierarchy. The homepage sections sit directly under main.lp with
   no .sheet wrapper, so their h2 came from styles.css at one size for every
   section. The four sections that sell (hero, what you get, pricing, final
   close) now sit a step above the sections that support them. Scoped to
   direct children of main.lp so the other landing pages, which wrap their
   sections in .sheet, keep their own scale. */

main.lp > section > h2 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--blue-dark);
  font-size: clamp(1.35rem, 3.2vw, 1.6rem);
  line-height: 1.2;
  margin: 2.2rem 0 0.7rem;
}

main.lp > .stat-cards > h2,
main.lp > .pricing-cards > h2,
main.lp > .final-cta > h2 {
  font-size: clamp(1.7rem, 4.4vw, 2.2rem);
}

main.lp > .hero h1 {
  font-size: clamp(1.9rem, 4.8vw, 2.9rem);
  line-height: 1.1;
}

main.lp > .hero .lede { font-size: 1.15rem; }

/* Sections with no h2 of their own, or with a filled ground, get their own
   air, because the h2 margin that spaces the others cannot reach outside a
   filled box. */
main.lp > .entity { margin-top: 2rem; padding-top: 1.4rem; border-top: 2px dashed var(--line); }
main.lp > .free-capture { margin-top: 2.4rem; }
main.lp > .free-capture > h2 { margin-top: 0; }
main.lp > .final-cta { margin-top: 2.6rem; }

/* The shared "Before you pay" rows have a 6rem label column sized for the
   .sheet pages. Under main.lp the labels are three or four words, so they
   get room to sit on one or two lines instead of four. */
@media (min-width: 34rem) {
  main.lp > .trust li { grid-template-columns: 11rem 1fr; }
}

/* Pricing cards: labels, fit line, the bundle's real sum and the saving. */

.lp .price-label {
  align-self: flex-start;
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: var(--yellow-soft);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}

.lp .price-fit {
  margin: -0.4rem 0 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

/* The spec line is the card's flexible spacer so the prices line up across
   the row. On a card that also has a fit line, the fit line follows the spec
   directly and takes over as the spacer, otherwise it lands at the bottom. */
.lp .price-card:has(.price-fit) .price-spec { flex: 0 0 auto; margin-bottom: 0.3rem; }
.lp .price-card:has(.price-fit) .price-fit { flex: 1; margin-top: 0; }

.lp .price-card { position: relative; }

/* The bundle badge sits in the flow where the other two cards carry their
   label, so the three cards line up: "Start here", "Daily practice", and a
   filled pill reading "Most complete". Final polish, 22 September 2026. */
.lp .price-best {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 0.6rem;
  background: var(--yellow);
  color: var(--blue-dark);
  border: 2px solid var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.lp .price-was {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* The old price is crossed out in the muted ink, and the saving under it is
   what carries the colour. */
.lp .price-was s {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--muted);
  font-weight: 600;
  color: var(--muted);
}

.lp .price-amount-lg { font-size: 2.6rem; margin-bottom: 0.35rem; }

.lp .price-save {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 1rem;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}

.lp .price-card-featured {
  box-shadow: var(--shadow-hero);
}

@media (min-width: 40rem) {
  .lp .price-grid { align-items: stretch; margin-top: 1.6rem; }
  .lp .price-card-featured {
    transform: translateY(-0.6rem);
    padding-top: 1.7rem;
    padding-bottom: 1.9rem;
  }
}

/* Delivery: one short paragraph, 22 September 2026. The four-row table it
   replaced repeated what the FAQ already answers. The .parent ol styles above
   still serve the other landing pages, which keep their step list. */

.lp .delivery-note {
  margin: 1rem 0 0;
  max-width: 40rem;
  padding: 0.9rem 1.1rem;
  background: var(--blue-tint);
  border: 2px dashed var(--blue);
  border-radius: var(--radius);
  font-size: 1rem;
}

/* FAQ as native disclosure rows. No script: <details> opens itself. The
   marker is drawn with a plus that turns into a minus, in teal when open. */

/* FAQ accordion rows: a blue-dark outline, yellow when open. */
.lp .faq details {
  max-width: 44rem;
  margin: 0 0 0.7rem;
  background: var(--paper);
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
}

.lp .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  padding: 0.6rem 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--blue-dark);
  border-radius: 6px;
}

.lp .faq summary::-webkit-details-marker { display: none; }

.lp .faq summary::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid var(--blue-dark);
  border-radius: 50%;
  color: var(--blue-dark);
  background: var(--paper);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

.lp .faq details[open] summary { background: var(--yellow-soft); border-radius: 6px 6px 0 0; }

.lp .faq details[open] summary::after {
  content: "\2212";
  background: var(--yellow);
}

.lp .faq summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.lp .faq details p {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  max-width: 40rem;
  font-size: 1rem;
  color: var(--ink);
}

/* Final close. One card, teal wash, one button, one quieter way out. */

.lp .final-cta {
  margin-top: 2rem;
  padding: 2rem 1.4rem 2.1rem;
  border-radius: var(--radius);
  background: var(--wash);
  border: 3px solid var(--blue-dark);
  box-shadow: var(--shadow-hero);
  text-align: center;
}

main.lp > .final-cta > h2 { margin-top: 0; }

.lp .final-lede {
  margin: 0 auto 0.9rem;
  max-width: 32rem;
  font-size: 1.1rem;
  text-align: center;
}

.lp .final-spec {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.lp .final-cta .cta { font-size: 1.1rem; padding: 0.8rem 1.9rem; }

.lp .final-alt {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}

.lp .final-alt a { color: var(--blue-dark); text-decoration-color: var(--blue); text-underline-offset: 0.18em; }

@media (min-width: 40rem) {
  .lp .final-cta { padding: 2.6rem 2rem 2.8rem; }
}

/* ---- Phase 1 product pages, 22 September 2026 ---------------------------

   Blocks the A to Z pair and the bundle need that the homepage did not. All
   scoped to .lp like everything above, so the other landing pages, which
   do not write these classes, are untouched. Tokens only, no new values. */

/* The hero on the bundle carries the loose sum struck through above the
   chip, and the saving as an amber pill beside it. .price-was and
   .price-save already exist for the pricing cards; here they only need to
   sit in the flex column of .hero-buy. */
.lp .hero-buy .price-was { margin: 0; }
.lp .hero-buy .price-save { margin: 0; align-self: center; }

/* "What is inside" on the pair keeps the .inside rows, and the label at the
   front of each row is set in the heading face so the five nouns scan. */
.lp .inside li strong {
  font-family: var(--display);
  font-weight: 400;
}

/* One sentence that must be read before the money is paid, directly under
   the hero CTA. The names pack uses it for "not a personalised name book"
   (SITE-SPEC section 13). Ink on the amber wash with the amber edge the
   honest block already wears, so it reads as the same voice. It is set
   above the muted .hint on purpose: the hint is small print, this is not. */
.lp .hero-note {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.8rem;
  max-width: 26rem;
  border: 2px solid var(--ink);
  border-left: 6px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--yellow-soft);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.lp .hero-note strong { font-family: var(--display); font-weight: 400; }

/* One cross-sell, one line, a teal hairline top and bottom like the
   delivery note. Not a card: the page has one card, the final close. */
.lp .cross-sell {
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--blue-tint);
  border: 2px dashed var(--blue);
  border-radius: var(--radius);
}

.lp .cross-sell p { margin: 0; max-width: 40rem; font-size: 1rem; }

.lp .cross-sell a {
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration-color: var(--blue);
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

/* The bundle block, section 2.4 of the spec. A filled card on the paper,
   the saving in the amber pill, the old sum struck through in muted ink. */
.lp .bundle-block {
  margin-top: 1.4rem;
  padding: 1.3rem 1.4rem 1.4rem;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius);
  background: var(--sheet);
  box-shadow: var(--shadow-card);
}

.lp .bundle-block p { margin: 0 0 0.5rem; max-width: 40rem; font-size: 1rem; }

.lp .bundle-lead {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.2;
}

.lp .bundle-was {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.lp .bundle-save {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.2rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}

.lp .bundle-block .cta-link { min-height: 40px; padding: 0.2rem 0; }

/* The seven packs in the bundle: a cover thumbnail, the pack name as a
   link, one line on what it is, and the page count on the right. Stacked
   rows with a hairline between, gold at the top and bottom like .who. */
.lp .pack-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.lp .pack-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0 0.9rem;
  align-items: center;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.lp .pack-list li:first-child { border-top: 2px solid var(--blue); }

.lp .pack-list li:last-child { border-bottom: 2px solid var(--blue); }

.lp .pack-list img {
  display: block;
  width: 4.5rem;
  height: 3rem;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--blue-dark);
  border-radius: 6px;
  background: var(--sheet);
}

.lp .pack-body { min-width: 0; }

.lp .pack-body a {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
  text-decoration-color: var(--blue);
  text-underline-offset: 0.18em;
}

.lp .pack-body a:hover { color: var(--blue-dark); }

.lp .pack-body span {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
}

.lp .pack-pages {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--blue-dark);
  white-space: nowrap;
}

/* The progression path reuses the five method circles. Its descriptions
   are a sentence longer than the method's, so the wide row gets a little
   more room under each circle. */
.lp .progression .sec-lede { margin: 0.4rem 0 0; }

@media (min-width: 48rem) {
  .lp .progression .method-desc { font-size: 0.86rem; line-height: 1.45; }
}

/* ---- Sticker system, 6 October 2026 ------------------------------------

   The home page hero sits on the yellow wash inside a heavy outline with the
   cyan hero shadow, over a faint four-line pattern. The pattern is the
   guidelines' decorative blue and red ruling, kept faint enough that it
   reads as paper and never as a plate a parent compares with the sheet.
   Two soft circles in the corners, yellow and magenta, as the guidelines
   ask for the hero. */

main.lp > .hero {
  position: relative;
  margin-top: 0.75rem;
  padding: 1.5rem 1.25rem 1.6rem;
  background-color: var(--wash);
  background-image:
    radial-gradient(circle at 100% 0, rgba(255, 211, 51, 0.34) 0, rgba(255, 211, 51, 0) 9rem),
    radial-gradient(circle at 0 100%, rgba(233, 75, 214, 0.16) 0, rgba(233, 75, 214, 0) 8rem),
    linear-gradient(transparent 13px, rgba(9, 104, 216, 0.07) 13px, rgba(9, 104, 216, 0.07) 14px, transparent 14px,
      transparent 27px, rgba(255, 77, 93, 0.08) 27px, rgba(255, 77, 93, 0.08) 28px, transparent 28px,
      transparent 41px, rgba(255, 77, 93, 0.08) 41px, rgba(255, 77, 93, 0.08) 42px, transparent 42px,
      transparent 55px, rgba(9, 104, 216, 0.07) 55px, rgba(9, 104, 216, 0.07) 56px, transparent 56px);
  background-size: auto, auto, 100% 72px;
  border: 3px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hero);
}

/* The card's padding takes about 32px from the plate column, so the hero
   band comes down a tenth, 15rem to 13.5rem, to keep a word plate like bat
   inside its rules. The glyph scales with the band, nothing else moves. */
@media (min-width: 40rem) {
  main.lp > .hero { padding: 2.2rem 2rem 2.2rem; }
  main.lp > .hero .four-hero { --band: 13.5rem; }
}

/* Section headings on the home page get a short yellow underline swash. */
main.lp > section > h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 6px;
  margin-top: 0.45rem;
  border-radius: 3px;
  background: var(--yellow);
}

main.lp > .final-cta > h2::after { margin-left: auto; margin-right: auto; }

/* A pack page's hero buttons and price sit in a white card on the sheet, so
   the pack colour band at the top of the sheet reads as the cover. */
.lp .sheet .hero { background: var(--accent-tint); }

@media (prefers-reduced-motion: reduce) {
  .lp .cta:hover, .lp .cta-link:hover, .lp .az-grid a:hover { transform: none; }
}

/* A pack page wears its pack colour as a thick band across the top of the
   hero, the cover of the book. The home page has no pack and keeps the
   plain outline. */
.page-lp[class*="pack-"] main.lp > .hero { border-top: 12px solid var(--accent); }
.page-lp[class*="pack-"] .stat-card,
.page-lp[class*="pack-"] .price-card { border-top: 6px solid var(--accent); }

/* Words that fit their plate. build.py tags a word plate fit-N, N being the
   word's ink width in hundredths of the band, from Cedarville's measured
   advances. On a hero or gallery plate the band shrinks to whatever lets the
   word end before the right-hand rule: 94 per cent of the plate, because the
   glyph starts at a 6 per cent inset, less the rail and a little air. The
   capital still lands on line 1 because the glyph scales with the band, the
   same as everywhere else. A single letter has no fit class and no change.
   With no container query support the declaration is dropped and the band
   keeps its old size. */
.lp .plate,
.lp .gallery-plate { container-type: inline-size; }

.lp :is(.plate, .gallery-plate) .four[class*="fit-"] {
  --size: min(var(--band), calc((94cqi - var(--rail) - 0.6rem) / var(--fit)));
}

.lp .four.fit-100 { --fit: 1; }
.lp .four.fit-125 { --fit: 1.25; }
.lp .four.fit-150 { --fit: 1.5; }
.lp .four.fit-175 { --fit: 1.75; }
.lp .four.fit-200 { --fit: 2; }
.lp .four.fit-225 { --fit: 2.25; }
.lp .four.fit-250 { --fit: 2.5; }
.lp .four.fit-275 { --fit: 2.75; }
.lp .four.fit-300 { --fit: 3; }
.lp .four.fit-325 { --fit: 3.25; }
.lp .four.fit-350 { --fit: 3.5; }

/* ---- sticker motion, 6 October 2026 ------------------------------------
   CSS only. Doodles are background SVGs on ::before/::after, so they never
   enter the accessibility tree. The plate ruling is untouched. Looping
   motion is idle bob and twinkle; the price chip and method numbers pop
   once. lp.css already collapses animation duration under reduced motion. */

@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes chip-pop {
  0% { transform: rotate(-14deg) scale(0.82); }
  70% { transform: rotate(-1deg) scale(1.05); }
  100% { transform: rotate(-3deg) scale(1); }
}
@keyframes swash-grow {
  from { width: 0; }
  to { width: 3.5rem; }
}
@keyframes scribble-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes chip-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-8deg) translate3d(0, -3px, 0); }
}
@keyframes bar-pulse {
  0%, 100% { transform: translate3d(0, 0, 0); box-shadow: 4px 4px 0 var(--blue); }
  50% { transform: translate3d(0, -3px, 0); box-shadow: 6px 7px 0 var(--blue); }
}
@keyframes plate-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
@keyframes num-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes tile-wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(7deg); }
}
@keyframes pill-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}
@keyframes star-spin-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); }
  50% { transform: translate3d(0, -8px, 0) rotate(12deg) scale(1.1); }
}


main.lp > .hero { overflow: visible; }
main.lp > .hero::before,
main.lp > .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
main.lp > .hero::before {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: url("/img/decor/star-sticker.svg") no-repeat center / contain;
  animation: doodle-bob 3.2s ease-in-out infinite;
}
main.lp > .hero::after {
  top: 44px;
  right: 44px;
  width: 16px;
  height: 16px;
  background: url("/img/decor/sparkle.svg") no-repeat center / contain;
  animation: doodle-twinkle 2.2s ease-in-out infinite;
}
.page-lp[class*="pack-"] main.lp > .hero::before { top: 20px; }
.page-lp[class*="pack-"] main.lp > .hero::after { top: 54px; }

.lp .price-chip { animation: chip-pop 0.55s ease-out both; }

.lp .method-num { animation: pop-in 0.4s ease-out both; }
.lp .method-step:nth-child(2) .method-num { animation-delay: 0.07s; }
.lp .method-step:nth-child(3) .method-num { animation-delay: 0.14s; }
.lp .method-step:nth-child(4) .method-num { animation-delay: 0.21s; }
.lp .method-step:nth-child(5) .method-num { animation-delay: 0.28s; }

main.lp > section > h2::after { animation: swash-grow 0.55s ease-out both; }

.lp .stat-card { transition: transform 0.15s ease; animation: pop-in 0.45s ease-out both; }
.lp .stat-card:nth-child(2) { animation-delay: 0.06s; }
.lp .stat-card:nth-child(3) { animation-delay: 0.12s; }
.lp .stat-card:nth-child(4) { animation-delay: 0.18s; }
.lp .stat-card:hover { transform: translateY(-3px); }
.lp .stat-card:hover .icon-tile { transform: rotate(-8deg) scale(1.06); }

.lp .price-card-featured { position: relative; }
.lp .price-card-featured::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: url("/img/decor/star-sticker.svg") no-repeat center / contain;
  pointer-events: none;
  animation: doodle-twinkle 2.6s ease-in-out 0.3s infinite;
}

.lp .scribble-draw {
  display: block;
  width: min(11rem, 72%);
  height: auto;
  margin: 0.15rem 0 0.4rem;
  overflow: visible;
}
.lp .scribble-draw path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: scribble-draw 1.5s ease-out 0.2s forwards;
}

/* Touch and phones: hover never fires, and one-shot pop-ins finish before
   a parent scrolls to them. Idle loops keep the first screen and the pinned
   buy bar moving. Landscape phones are wider than 40rem, so hover:none is
   the real hook; the max-width query covers a narrow desktop window. */
@media (hover: none), (max-width: 39.99rem) {
  main.lp > .hero::before {
    top: 8px;
    right: 8px;
    width: 42px;
    height: 42px;
    animation: star-spin-bob 2.4s ease-in-out infinite;
  }
  main.lp > .hero::after {
    top: 48px;
    right: 48px;
    width: 20px;
    height: 20px;
    animation: doodle-twinkle 1.6s ease-in-out infinite;
  }
  .page-lp[class*="pack-"] main.lp > .hero::before { top: 18px; }
  .page-lp[class*="pack-"] main.lp > .hero::after { top: 58px; }

  .lp .hero-price { position: relative; }
  .lp .hero-price::after {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: -0.7rem;
    width: 18px;
    height: 18px;
    background: url("/img/decor/sparkle.svg") no-repeat center / contain;
    pointer-events: none;
    animation: doodle-twinkle 1.5s ease-in-out infinite;
  }

  .lp .price-chip {
    animation: chip-pop 0.55s ease-out both, chip-wiggle 2.4s ease-in-out 0.55s infinite;
  }
  .lp .chips li { animation: pill-bob 2s ease-in-out infinite; }
  .lp .chips li:nth-child(2) { animation-delay: 0.12s; }
  .lp .chips li:nth-child(3) { animation-delay: 0.24s; }
  .lp .chips li:nth-child(4) { animation-delay: 0.36s; }

  .lp .hero .plate { animation: plate-float 3.6s ease-in-out infinite; }

  .lp .hero .cta,
  .page-lp .buybar-link,
  .lp .home-sticky-btn {
    animation: bar-pulse 1.8s ease-in-out infinite;
  }
  .lp .hero .cta:active,
  .page-lp .buybar-link:active,
  .lp .home-sticky-btn:active {
    animation: none;
    transform: translate(4px, 4px);
    box-shadow: none;
  }

  .lp .method-num {
    animation: pop-in 0.4s ease-out both, num-pulse 1.8s ease-in-out 0.5s infinite;
  }
  .lp .stat-card .icon-tile { animation: tile-wiggle 2.2s ease-in-out infinite; }
  .lp .stat-card:nth-child(2) .icon-tile { animation-delay: 0.15s; }
  .lp .stat-card:nth-child(3) .icon-tile { animation-delay: 0.3s; }
  .lp .stat-card:nth-child(4) .icon-tile { animation-delay: 0.45s; }

  .lp .value-strip span + span::before {
    display: inline-block;
    animation: doodle-twinkle 1.8s ease-in-out infinite;
  }
  .lp .value-strip span:nth-child(3)::before { animation-delay: 0.35s; }
  .lp .value-strip span:nth-child(4)::before { animation-delay: 0.7s; }

  .lp .mascot { animation: mascot-bob 2.6s ease-in-out infinite; }
  .lp .price-card-featured::after {
    width: 36px;
    height: 36px;
    animation: star-spin-bob 2.2s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp .cta:hover, .lp .cta-link:hover, .lp .az-grid a:hover { transform: none; }
  .lp .stat-card:hover { transform: none; }
  .lp .stat-card:hover .icon-tile { transform: none; }
  .lp .price-chip { transform: rotate(-3deg); }
  .lp .scribble-draw path { stroke-dashoffset: 0; animation: none; }
  .lp .hero .plate,
  .lp .chips li,
  .lp .hero .cta,
  .page-lp .buybar-link,
  .lp .home-sticky-btn,
  .lp .hero-price::after { animation: none; transform: none; }
}