/* THE LANDING PAGE (owner, 2026-10-09). CREAM, with the colour in the things on it, and SUBTLE life: few
   moving parts, each one a small detail that rewards a look (his words: "like Kabir walking in - not many
   moving elements, but the footsteps made it interesting"). The cast of The Midnight Ghost turns up through the
   page: Kabir and Biscuit pitch in the hero; Grandma peeks at the worries and sits by "Hindi helping"; a monkey
   eyes the practice sheets; the watchman sleeps beside the coming-soon books; the ghost waits at the end.

   ITS OWN TOKENS, --lp-*, never --frame-*. Cream in both themes (below). Motion is decoration only and stops
   under prefers-reduced-motion. Phone first: one column at 360px, tap targets 44px or more. */

:root {
  --lp-bg: #FDF7EF; --lp-bg2: #F8EEDF; --lp-card: #ffffff; --lp-ink: #2A2119; --lp-muted: #6E5E4C; --lp-line: #EADFCE;
  --lp-orange: #E8924E; --lp-orange-ink: #8a4a12; --lp-blue: #2D6BE4; --lp-green: #12855E; --lp-gold: #F2BE45; --lp-coral: #E5604A;
  --lp-purple: #7B55E0; --lp-teal: #138A85;
  --lp-shadow: 0 22px 40px -28px rgba(42, 33, 25, .45);
}
/* CREAM IN BOTH THEMES (2026-10-09): the landing page is designed as a picture, like a book cover - his ask was a
   cream page with the colour in the things on it. The app inside (/play/, the stories) still follows the phone. */

html { scroll-behavior: smooth; }
body.lp { margin: 0; background: var(--lp-bg); color: var(--lp-ink); font-family: var(--font-ui); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* `:where()` keeps this blanket rule at zero weight, so a link's own class always wins (it out-ranked .lp-cta and
   turned the green button's text dark - CLAUDE.md recurring bug 14; found 2026-10-11). */
:where(.lp) a { color: inherit; }
.lp button { color: inherit; font-family: inherit; }
.lp img { max-width: 100%; }
.lp-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

/* ---------------------------------------------------------------- header */
.lp-top { position: sticky; top: 0; z-index: 50; background: rgba(253, 247, 239, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.lp-top[data-solid] { border-color: var(--lp-line); }
.lp-top .lp-wrap { display: flex; align-items: center; gap: 8px; min-height: 62px; }
.lp-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 900; font-size: 19px; margin-right: auto; }
.lp-logo svg { width: 30px; height: 30px; flex: 0 0 auto; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 99px;
  font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .15s; }
.lp-btn:active { transform: scale(.97); }
.lp-btn.ghost { border: 2px solid var(--lp-line); }
.lp-btn.solid { background: var(--lp-green); color: #fff; }
@media (max-width: 380px) { .lp-top .lp-logo span { display: none; } .lp-btn { padding: 0 13px; font-size: 14px; } }

/* ---------------------------------------------------------------- hero */
.lp-hero { padding: 26px 0 40px; }
.lp-hero .lp-wrap { display: grid; gap: 22px; align-items: center; }
@media (min-width: 920px) { .lp-hero .lp-wrap { grid-template-columns: .92fr 1.08fr; gap: 40px; padding-top: 18px; } }
/* THE FIRST SCREEN ON A DESKTOP (his note, 2026-10-11: too much empty space at the top, the scene and its words
   not all visible). Less padding, a smaller headline, both columns from the top, and the scene's WIDTH capped
   by the screen's height so the picture, its subtitles and the controls fit in one screen (the width axis
   only - never a max-height on a canvas). */
@media (min-width: 920px) {
  .lp-hero { padding: 8px 0 32px; }
  .lp-hero .lp-wrap { align-items: start; padding-top: 6px; }
  .lp-h1 { font-size: clamp(36px, 4.4vw, 52px); }
  .lp-show { width: min(100%, calc((100dvh - 300px) * 1000 / 760)); justify-self: end; }
}
.lp-kick { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 99px; background: #FFE7CF; color: #8a4a12; font-weight: 800; font-size: 15px; }
.lp-h1 { margin: 0; font-size: clamp(36px, 9.4vw, 62px); line-height: 1.04; font-weight: 900; letter-spacing: -.025em; }
.lp-h1 .hl { color: var(--lp-orange); display: block; }   /* the second sentence on its own line (his pick, 2026-10-11) */
.lp-goods { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.lp-goods li { padding: 7px 12px; border-radius: 99px; font-weight: 800; font-size: 15px; background: var(--lp-card); border: 2px solid var(--lp-line); }
.lp-goods li:nth-child(1) { border-color: #9fd9c0; } .lp-goods li:nth-child(2) { border-color: #f6cf8f; } .lp-goods li:nth-child(3) { border-color: #b9cdf6; }
.lp-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; margin-top: 22px; border-radius: 99px; background: var(--lp-green);
  color: #fff; font-weight: 900; font-size: 18px; text-decoration: none; box-shadow: 0 12px 24px -12px rgba(18, 133, 94, .85), inset 0 -3px 0 rgba(0,0,0,.15);
  transition: transform .15s, box-shadow .2s; }
.lp-cta:hover { transform: translateY(-2px); }
.lp-cta:active { transform: scale(.97); }
.lp-cta .arr { transition: transform .2s; } .lp-cta:hover .arr { transform: translateX(4px); }
.lp-cta[data-glow] { animation: lp-glow 1.3s ease-out 2; }
@keyframes lp-glow { 50% { box-shadow: 0 0 0 12px rgba(242, 190, 69, .45), 0 12px 24px -12px rgba(18, 133, 94, .85); } }
.lp-trust { margin: 12px 0 0; font-size: 14px; color: var(--lp-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lp-trust span::before { content: "✓ "; color: var(--lp-green); font-weight: 900; }

/* the scene (intro.js) and its subtitles */
.lp-show { position: relative; }
.in-box { position: relative; width: 100%; aspect-ratio: 1000 / 760; border-radius: 28px; overflow: hidden; border: 2px solid var(--lp-line);
  box-shadow: var(--lp-shadow); background: #FFF6E8; }
.in-stage { position: absolute; left: 0; top: 0; width: 1000px; height: 760px; transform-origin: 0 0; }
.in-stage > .p { position: absolute; }
.in-wall { left: 0; top: 0; width: 1000px; height: 690px; background: linear-gradient(#FFF7EA, #FCE9CF); }
.in-floor { left: 0; top: 690px; width: 1000px; height: 70px; background: linear-gradient(#F0D9B8, #E8CDA5); }
.in-bush { left: 850px; top: 545px; width: 190px; z-index: 3; }
.in-print { top: 684px; width: 24px; height: 10px; border-radius: 50%; background: rgba(110, 94, 76, .35); z-index: 1; animation: in-fade 2.4s ease-out forwards; }
@keyframes in-fade { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.in-paw { width: 18px; height: 18px; z-index: 1; opacity: 0; transition: opacity .2s; }
.in-paw[data-on] { opacity: .75; animation: in-fade 3.8s ease-out forwards; }
.in-paw::before { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 9px; border-radius: 50% 50% 45% 45%; background: var(--lp-orange); }
.in-paw::after { content: ""; position: absolute; left: 1px; top: 1px; width: 4px; height: 5px; border-radius: 50%; background: var(--lp-orange);
  box-shadow: 6px -2px 0 var(--lp-orange), 12px 0 0 var(--lp-orange); }
/* who is speaking: three soft arcs beside his head, as in the stories */
.in-arcs { left: 400px; top: 300px; width: 60px; height: 70px; opacity: 0; transition: opacity .2s; z-index: 9; }
.in-arcs[data-on] { opacity: 1; }
.in-arcs i { position: absolute; left: 0; top: 50%; border: 5px solid var(--lp-orange); border-left: 0; border-top-color: transparent; border-bottom-color: transparent;
  border-radius: 50%; transform: translateY(-50%); opacity: .25; animation: in-arc 1.1s ease-in-out infinite; }
.in-arcs i:nth-child(1) { width: 18px; height: 22px; } .in-arcs i:nth-child(2) { width: 32px; height: 40px; animation-delay: .18s; }
.in-arcs i:nth-child(3) { width: 46px; height: 58px; animation-delay: .36s; }
@keyframes in-arc { 50% { opacity: 1; } }
/* the things he talks about */
.in-chip, .in-kid, .in-shelf, .in-skills, .in-sheetbox, .in-go { opacity: 0; transform: translateY(18px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.4); z-index: 6; pointer-events: none; }
[data-on].in-chip, [data-on].in-kid, [data-on].in-shelf, [data-on].in-skills, [data-on].in-sheetbox, [data-on].in-go { opacity: 1; transform: none; pointer-events: auto; }
/* v5 (2026-10-11): the shelf's label, the four skill tiles, the sheet that zooms in, the labelled button */
.in-shelf-tag { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-weight: 900; font-size: 30px; color: #2A2119; }
.in-skills { left: 520px; top: 175px; width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.in-skill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 170px; border-radius: 26px;
  background: #fff; border: 3px solid #EADFCE; font-weight: 900; font-size: 30px; color: #2A2119; box-shadow: 0 16px 26px -18px rgba(0,0,0,.45);
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s cubic-bezier(.2,.9,.3,1.5); }
.in-skill .e { font-size: 58px; line-height: 1; }
.in-skill[data-on] { opacity: 1; transform: none; }
.in-skill:nth-child(1) { border-color: #9fd9c0; } .in-skill:nth-child(2) { border-color: #f6cf8f; }
.in-skill:nth-child(3) { border-color: #b9cdf6; } .in-skill:nth-child(4) { border-color: #f3b2a6; }
.in-sheetbox { left: 520px; top: 120px; width: 440px; height: 560px; transform: scale(.4) rotate(-8deg); transform-origin: 70% 20%; }
[data-on].in-sheetbox { transform: none; }
.in-sheetbox .in-sheetpic { position: absolute; left: 0; top: 0; width: 330px; border-radius: 10px; background: #fff; box-shadow: 0 24px 40px -18px rgba(0,0,0,.5); }
.in-stag { position: absolute; right: 0; padding: 10px 18px; border-radius: 99px; background: var(--lp-green); color: #fff; font-weight: 900; font-size: 28px;
  white-space: nowrap; box-shadow: 0 10px 18px -10px rgba(0,0,0,.5); opacity: 0; transform: translateX(30px); transition: opacity .25s, transform .35s ease-out; }
.in-stag[data-on] { opacity: 1; transform: none; }
.in-go { left: 540px; top: 210px; width: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 22px 36px; min-height: 150px; border-radius: 60px; line-height: 1.15;
  background: var(--lp-green); font-weight: 900; font-size: 40px; text-decoration: none;
  box-shadow: 0 0 0 16px rgba(18,133,94,.14), 0 24px 40px -16px rgba(18,133,94,.9); }
:where(.lp) a.in-go { color: #fff; }
[data-on].in-go { animation: in-breathe 2.4s ease-in-out infinite; }
@keyframes in-breathe { 50% { box-shadow: 0 0 0 30px rgba(18,133,94,.06), 0 24px 40px -16px rgba(18,133,94,.9); } }
/* Paused: CSS motion holds still with the rest */
.in-box[data-paused] * { animation-play-state: paused !important; }
.in-chip { left: 560px; top: 200px; padding: 16px 26px; border-radius: 99px; background: #fff; border: 3px solid #9fd9c0; font-weight: 900; font-size: 36px; color: #2A2119; white-space: nowrap; }
.in-chip span { display: inline-block; animation: in-wave 1s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes in-wave { 50% { transform: rotate(18deg); } }
.in-kid { left: 40px; top: 120px; padding: 14px 24px 18px; border-radius: 28px; background: #fff; border: 3px solid #2A2119; font-weight: 900; font-size: 38px; color: #2A2119; white-space: nowrap; }
.in-kid small { display: block; font-size: 20px; color: var(--lp-orange-ink); letter-spacing: .04em; text-transform: uppercase; }
.in-kid::after { content: ""; position: absolute; left: 40px; bottom: -18px; border: 16px solid transparent; border-bottom: 0; border-top-color: #2A2119; }
.in-shelf { left: 540px; top: 230px; width: 420px; height: 330px; }
.in-plank { position: absolute; left: 0; right: 0; top: 260px; height: 18px; border-radius: 6px; background: #c99a63; box-shadow: 0 8px 0 #a67a47; }
.in-book { position: absolute; top: 60px; width: 115px; height: 200px; border-radius: 6px 14px 14px 6px; color: #fff; font-weight: 900; padding: 12px 10px; box-sizing: border-box;
  box-shadow: inset 7px 0 0 rgba(0,0,0,.2), 0 12px 18px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(-260px) rotate(-8deg);
  transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .2s; }
.in-book[data-on] { opacity: 1; transform: none; }
.in-book-t { display: block; font-size: 17px; line-height: 1.1; }
.in-book-e { position: absolute; left: 0; right: 0; top: 82px; text-align: center; font-size: 46px; }
.in-book-tag { position: absolute; left: 8px; right: 8px; bottom: 10px; text-align: center; border-radius: 8px; background: rgba(255,255,255,.92); color: #2b2b2b; font-size: 15px; padding: 3px 0; }
.t-teal { background: linear-gradient(160deg, #19a7a0, #0d5f74); } .t-orange { background: linear-gradient(160deg, #f6a33a, #c4512a); } .t-purple { background: linear-gradient(160deg, #9b6bf2, #4b2fa0); }

.lp-subs { margin-top: 12px; min-height: 96px; padding: 12px 16px; border-radius: 18px; background: var(--lp-card); border: 2px solid var(--lp-line); }
.lp-subs .en { font-size: clamp(17px, 4.6vw, 21px); font-weight: 800; line-height: 1.45; min-height: 1.45em; }
.lp-subs .en .w { padding: 0 .06em; margin: 0 -.06em; border-radius: .16em; transition: background-color .08s, color .08s; }
.lp-subs .en .w[data-now] { background: #E8924E; color: #2b1400; }
.lp-subs .hi { margin-top: 4px; font-size: clamp(15px, 4vw, 18px); line-height: 1.5; color: var(--lp-muted); opacity: .45; transition: opacity .3s; min-height: 1.5em; }
.lp-subs .hi[data-on] { opacity: 1; }
.lp-ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lp-ctrl button { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 2px solid var(--lp-line); background: var(--lp-card); font-weight: 800; font-size: 14px; cursor: pointer; }
.lp-ctrl .snd { background: var(--lp-ink); color: var(--lp-bg); border-color: var(--lp-ink); }
.lp-ctrl .snd[data-pulse] { animation: lp-glow 1.6s ease-out infinite; }
.lp-ctrl [hidden] { display: none; }

/* ---------------------------------------------------------------- sections */
.lp-sec { padding: 76px 0; position: relative; }
.lp-sec.alt { background: var(--lp-bg2); }
.lp-sec:not(.alt):not([hidden]) + .lp-sec:not(.alt) { padding-top: 0; }   /* two sections on the same ground: one gap between them, not two */
.lp-eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-orange-ink); }
.lp-h2 { margin: 0; font-size: clamp(28px, 7.2vw, 44px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; max-width: 18em; }
/* THE TITLE'S KEY WORDS (his pick, 2026-10-11: option B of lab/title-options, on 2-3 words per title, never the
   whole line): a soft highlighter swipes behind the lower half of them once, as the title scrolls into view.
   Static under reduced motion and without script. */
.lp-h2 .mk { background: linear-gradient(#F9D77E, #F9D77E) 0 88% / 0 .42em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .8s cubic-bezier(.3,.7,.2,1) .2s; }
.lp-h2[data-in] .mk, .no-js .lp-h2 .mk { background-size: 100% .42em; }
@media (prefers-reduced-motion: reduce) { .lp-h2 .mk { transition: none; background-size: 100% .42em; } }
.lp-intro { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--lp-muted); max-width: 40em; }
.lp-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 640px) { .lp-grid.two, .lp-grid.three, .lp-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lp-grid.three { grid-template-columns: repeat(3, 1fr); } .lp-grid.four { grid-template-columns: repeat(4, 1fr); } }
.lp-card { position: relative; background: var(--lp-card); border-radius: 22px; padding: 22px; border: 2px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-card h3 { margin: 12px 0 6px; font-size: 20px; line-height: 1.25; font-weight: 850; }
.lp-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp-muted); }
.lp-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; }
.c-coral .lp-ico { background: #FFE1DC; } .c-gold .lp-ico { background: #FFF0C4; } .c-green .lp-ico { background: #D4F2E4; }
.c-blue .lp-ico { background: #DFE8FF; } .c-purple .lp-ico { background: #EBE2FF; } .c-teal .lp-ico { background: #D3F1EF; }
.c-coral { border-top: 5px solid var(--lp-coral); } .c-gold { border-top: 5px solid var(--lp-gold); } .c-green { border-top: 5px solid var(--lp-green); }
.c-blue { border-top: 5px solid var(--lp-blue); } .c-purple { border-top: 5px solid var(--lp-purple); } .c-teal { border-top: 5px solid var(--lp-teal); }
.lp-punch { margin: 34px 0 0; font-size: clamp(20px, 5.4vw, 27px); line-height: 1.35; font-weight: 850; max-width: 26em; }
.lp-punch b { background: linear-gradient(transparent 60%, rgba(242, 190, 69, .55) 60%); }

/* ---- cameos: the cast, small and quiet ---- */
.cameo { position: absolute; pointer-events: none; z-index: 2; }
/* Grandma peeks over the worries */
.cm-gma { right: 6%; top: 52px; width: 92px; transform: translateY(40px); opacity: 0; transition: transform .8s cubic-bezier(.2,.9,.3,1.3) .4s, opacity .4s .4s; }
[data-in] > .cm-gma, .cm-gma[data-in] { transform: none; opacity: 1; }
/* Biscuit's trail across the benefits */
.cm-trail { position: relative; height: 34px; margin: 4px 0 -34px; }   /* the paws trot through the gap above the cards; the strip takes no room once they fade */
.cm-trail .in-paw { position: absolute; top: 8px; }
/* the monkey eyeing the practice sheets */
.cm-monkey { width: 86px; right: 12%; top: -46px; transform: translateY(30px) rotate(-8deg); opacity: 0; transition: transform .8s cubic-bezier(.2,.9,.3,1.4), opacity .4s; z-index: 0; }
.lp-paper[data-in] .cm-monkey { transform: rotate(-8deg); opacity: 1; animation: cm-peek 5s ease-in-out 1.4s infinite; }
@keyframes cm-peek { 0%, 70%, 100% { transform: rotate(-8deg) translateY(0); } 78% { transform: rotate(4deg) translateY(-6px); } 86% { transform: rotate(-8deg) translateY(10px); } }
/* Grandma beside "Hindi helping" (the flip words she cheered were removed 2026-10-11) */
.cm-cheer { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.cm-cheer img { width: 76px; }
/* the watchman asleep beside the coming-soon books */
.cm-watch { position: relative; width: 210px; height: 190px; margin: 30px auto 0; pointer-events: auto; cursor: pointer; border: 0; background: none; padding: 0; display: block; }
.cm-watch img { position: absolute; }
.cm-watch .z { position: absolute; left: 34px; top: -6px; font-weight: 900; color: var(--lp-muted); font-size: 22px; animation: cm-z 2.6s ease-in infinite; }
.cm-watch .z:nth-of-type(2) { animation-delay: .9s; font-size: 17px; } .cm-watch .z:nth-of-type(3) { animation-delay: 1.8s; font-size: 13px; }
@keyframes cm-z { 0% { opacity: 0; transform: translate(0, 10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -40px); } }
.cm-watch[data-awake] .z { display: none; }
.cm-watch .say { position: absolute; left: 118px; top: -30px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--lp-card); border: 2px solid var(--lp-line);
  font-weight: 900; font-size: 15px; white-space: nowrap; color: var(--lp-ink); opacity: 0; transform: scale(.7); transform-origin: 0 100%; transition: opacity .2s, transform .3s cubic-bezier(.2,.9,.3,1.5); }
.cm-watch[data-awake] .say { opacity: 1; transform: none; }
.cm-hint { text-align: center; font-size: 13px; color: var(--lp-muted); margin-top: 4px; }

/* how it works */
.lp-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 960px) { .lp-steps { grid-template-columns: repeat(5, 1fr); } }   /* five steps since "Decide" (2026-10-11) */
.lp-step { background: var(--lp-card); border-radius: 22px; padding: 20px; border: 2px solid var(--lp-line); box-shadow: var(--lp-shadow);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
@media (min-width: 960px) { .lp-step { grid-template-columns: 1fr; } }
.lp-step .n { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; }
.lp-step:nth-child(1) .n { background: #DFE8FF; } .lp-step:nth-child(2) .n { background: #FFE7CF; } .lp-step:nth-child(3) .n { background: #EBE2FF; } .lp-step:nth-child(4) .n { background: #D4F2E4; }
.lp-step h3 { margin: 0; font-size: 19px; font-weight: 850; }
.lp-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lp-muted); }
.lp-demo span { padding: 0 .08em; border-radius: .18em; font-weight: 800; color: var(--lp-ink); animation: lp-light 4s infinite; }
.lp-demo span:nth-child(2) { animation-delay: .45s; } .lp-demo span:nth-child(3) { animation-delay: .9s; }
@keyframes lp-light { 0%, 10% { background: #E8924E; color: #2b1400; } 13%, 100% { background: transparent; } }
.lp-together { margin-top: 28px; display: grid; gap: 18px; align-items: center; background: var(--lp-card); border: 2px solid var(--lp-line); border-radius: 24px; padding: 22px; box-shadow: var(--lp-shadow); }
@media (min-width: 720px) { .lp-together { grid-template-columns: 150px 1fr; } }
.lp-together img { width: 120px; margin: 0 auto; display: block; }
.lp-together h3 { margin: 0 0 10px; font-size: 21px; font-weight: 900; }
.lp-together ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px; line-height: 1.55; color: var(--lp-muted); }
.lp-together b { color: var(--lp-ink); }

/* practice sheets */
.lp-sheets { display: grid; gap: 30px; align-items: center; }
@media (min-width: 920px) { .lp-sheets { grid-template-columns: 1fr 1fr; } }
.lp-paper { position: relative; height: clamp(320px, 92vw, 450px); }
.lp-paper img.sh { position: absolute; width: 58%; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 24px 40px -18px rgba(0,0,0,.45); z-index: 1; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lp-paper img.s1 { left: 2%; top: 8%; transform: rotate(-7deg); }
.lp-paper img.s2 { left: 22%; top: 3%; transform: rotate(2deg); z-index: 2; }
.lp-paper img.s3 { right: 2%; top: 9%; transform: rotate(8deg); }
.lp-paper:hover img.s1 { transform: rotate(-10deg) translateX(-8px); }
.lp-paper:hover img.s3 { transform: rotate(11deg) translateX(8px); }
.lp-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lp-list li { display: flex; gap: 12px; font-size: 17px; line-height: 1.5; }
.lp-list li::before { content: "✓"; flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-green); color: #fff; font-weight: 900; font-size: 15px; }

/* made for India: the language chips */
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-chip { padding: 8px 14px; border-radius: 99px; background: var(--lp-card); border: 2px solid var(--lp-line); font-weight: 700; font-size: 15px; white-space: nowrap; }  /* a chip never breaks inside itself */
.lp-chip.on { background: var(--lp-green); color: #fff; border-color: transparent; }

/* the bookshelf */
.lp-shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; margin-top: 32px; perspective: 900px; }
@media (min-width: 920px) { .lp-shelf { grid-template-columns: repeat(4, 1fr); gap: 26px; } }
.lp-book { display: block; text-decoration: none; color: inherit; }
.lp-cover { position: relative; aspect-ratio: 3 / 4; border-radius: 10px 18px 18px 10px; overflow: hidden; box-shadow: inset 8px 0 0 rgba(0,0,0,.2), 0 22px 34px -18px rgba(0,0,0,.5); transition: transform .25s ease-out; }
.lp-cover > * { position: absolute; }
.lp-cover .ttl { left: 9%; right: 9%; color: #fff; font-weight: 900; line-height: 1.05; font-size: clamp(16px, 4.6vw, 22px); }
.lp-book h3 { margin: 12px 0 2px; font-size: 17px; font-weight: 850; }
.lp-book p { margin: 0; font-size: 14px; color: var(--lp-muted); }
.cv-night { background: linear-gradient(#1b2350, #2c2a6b 60%, #4a3a7c); }
.cv-night .moon { width: 30%; right: 9%; top: 8%; }
.cv-night .house { width: 80%; left: 10%; bottom: 3%; filter: brightness(.7); }
.cv-night .ghost { width: 46%; left: 7%; top: 32%; animation: cv-float 3.4s ease-in-out infinite; }
@keyframes cv-float { 50% { translate: 0 -8px; rotate: -4deg; } }
.cv-night .ttl { top: 7%; width: 54%; color: #fff4d6; }
.cv-teal { background: linear-gradient(160deg, #19a7a0, #0d5f74); } .cv-orange { background: linear-gradient(160deg, #f6a33a, #c4512a); } .cv-purple { background: linear-gradient(160deg, #9b6bf2, #4b2fa0); }
.lp-cover .emo { left: 0; right: 0; top: 30%; text-align: center; font-size: clamp(48px, 15vw, 76px); }
.lp-cover:not(.cv-night) .ttl { bottom: 9%; }
.lp-rib { top: 12px; right: -36px; width: 128px; transform: rotate(35deg); text-align: center; padding: 5px 0; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lp-rib.free { background: #12c27a; color: #052a19; }
.lp-rib.soon { background: rgba(255,255,255,.92); color: #2b2b2b; font-size: 10px; letter-spacing: .03em; }
.lp-topic { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--lp-card); border: 1px solid var(--lp-line); }

/* pricing */
.lp-plans { display: grid; gap: 18px; margin-top: 32px; }
@media (min-width: 900px) { .lp-plans { grid-template-columns: repeat(3, 1fr); max-width: 1080px; } }
.lp-plan { position: relative; border-radius: 26px; padding: 26px 24px; background: var(--lp-card); border: 2px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-plan.best { border: 3px solid var(--lp-green); }
.lp-plan h3 { margin: 0; font-size: 20px; font-weight: 900; }
.lp-best { position: absolute; top: -15px; right: 18px; padding: 6px 12px; border-radius: 99px; background: var(--lp-green); color: #fff; font-size: 13px; font-weight: 900; }
.lp-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 4px; }
.lp-amt s { font-size: 20px; color: var(--lp-muted); }
.lp-amt b { font-size: clamp(40px, 11vw, 52px); font-weight: 900; letter-spacing: -.02em; }
.lp-amt span { color: var(--lp-muted); font-weight: 700; }
.lp-lbl { font-size: 13px; color: var(--lp-muted); margin: 0; }
.lp-lbl em { font-style: normal; color: var(--lp-green); font-weight: 800; }
.lp-plan ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.lp-plan li::before { content: "✓  "; color: var(--lp-green); font-weight: 900; }
/* the free card leads (2026-10-11): green ground, its own tags; the dark-green ink clears AA on it */
.lp-plan.free { background: #E3F5EC; border: 3px solid var(--lp-green); color: #12352a; }
.lp-plan.free .lp-amt b, .lp-plan.free h3 { color: #12352a; }
.lp-plan.free .lp-amt span, .lp-plan.free .lp-lbl { color: #2f5a4b; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.lp-tags span { padding: 5px 11px; border-radius: 99px; background: var(--lp-green); color: #fff; font-size: 13px; font-weight: 900; }
.lp-tags span + span { background: #fff; color: #12352a; border: 2px solid var(--lp-green); padding: 3px 9px; }
.lp-reassure { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 20px 0 0; padding: 0; list-style: none; font-weight: 800; font-size: 16px; }
.lp-reassure li::before { content: "✓ "; color: var(--lp-green); }
.lp-maker { margin: 26px 0 0; font-size: 16px; color: var(--lp-muted); max-width: 38em; line-height: 1.55; }
.lp-maker::before { content: "♥ "; color: var(--lp-coral); }
.lp-feedback { margin: 8px 0 0; font-size: 15px; color: var(--lp-muted); }
.lp-feedback a, .lp-faq details p a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--lp-blue); font-weight: 800; }

/* FAQ */
.lp-faq { margin-top: 28px; display: grid; gap: 12px; max-width: 840px; }
.lp-faq details { background: var(--lp-card); border: 2px solid var(--lp-line); border-radius: 18px; padding: 0 20px; }
.lp-faq summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 850; font-size: 17px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 26px; font-weight: 400; transition: transform .25s; color: var(--lp-orange); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--lp-muted); }

/* the last call: the ghost waits */
.lp-final { text-align: center; padding: 84px 0 90px; position: relative; overflow: hidden; }
.lp-final .lp-h2 { margin: 0 auto; }
.lp-final .lp-cta { margin-top: 26px; }
.lp-final .ghost { position: absolute; width: 110px; left: 50%; top: 18px; margin-left: 150px; opacity: .9; animation: cv-float 3.6s ease-in-out infinite; }
.lp-foot { border-top: 1px solid var(--lp-line); padding: 26px 0 calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 15px; color: var(--lp-muted); }
.lp-foot .lp-wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.lp-foot a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lp-foot a:hover { text-decoration: underline; }
.lp-foot .lp-logo { margin-right: auto; color: var(--lp-ink); }

/* ---------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal][data-in] { opacity: 1; transform: none; }
.lp-grid [data-reveal]:nth-child(2), .lp-steps [data-reveal]:nth-child(2), .lp-shelf [data-reveal]:nth-child(2) { transition-delay: .08s; }
.lp-grid [data-reveal]:nth-child(3), .lp-steps [data-reveal]:nth-child(3), .lp-shelf [data-reveal]:nth-child(3) { transition-delay: .16s; }
.lp-grid [data-reveal]:nth-child(4), .lp-steps [data-reveal]:nth-child(4), .lp-shelf [data-reveal]:nth-child(4) { transition-delay: .24s; }
.lp-grid [data-reveal]:nth-child(5) { transition-delay: .32s; } .lp-grid [data-reveal]:nth-child(6) { transition-delay: .4s; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .in-arcs i, .in-chip span, .cm-monkey, .cm-watch .z, .cv-night .ghost, .lp-final .ghost, .lp-demo span, .in-go[data-on], .lp-cta[data-glow], .lp-ctrl .snd[data-pulse] { animation: none !important; }
  .cm-gma, .lp-cover, .lp-paper img.sh { transition: none; }
  .cm-gma { transform: none; opacity: 1; }
}

/* on a phone Grandma peeks from the corner above the heading, never over its words */
@media (max-width: 720px) { .cm-gma { width: 62px; top: 22px; right: 14px; } #why .lp-h2 { padding-right: 8px; margin-top: 18px; } }
.lp-feedback a, .lp-faq details p a { padding: 12px 0; margin: -12px 0; }

/* ---- NO BOUNDARY (his note, 2026-10-09: "check version A, where there is no boundary and the story looks part of
   the page"): the scene sits on the page itself - no frame, no shadow, no panel; a soft floor line for the
   ground, and the cast may walk in from beyond its edge. The text sits below on the same ground, in the
   STORY'S OWN FORMAT (story.css .say): centred, bold, Kabir's green ink, the word being read lit orange. */
.in-box { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.in-wall { background: transparent; }
.in-floor { top: 688px; height: 5px; border-radius: 5px; background: var(--lp-line); left: 40px; width: 920px; }
.lp-subs { background: transparent; border: 0; padding: 4px 8px 0; text-align: center; min-height: 92px; }
.lp-subs .en { font-size: clamp(20px, 5.4vw, 28px); line-height: 1.25; font-weight: 800; color: #2f5a3a; text-wrap: balance; }
.lp-subs .en .w { padding: 0 .07em; margin: 0 -.07em; border-radius: .16em; transition: background-color .08s linear, color .08s linear; }
.lp-subs .hi { margin-top: 6px; font-size: clamp(15px, 4.2vw, 18px); font-weight: 600; color: var(--lp-muted); }
.lp-ctrl { justify-content: center; }
/* soft, invisible edges: the cast fades in as it walks in (and the ghost fades out as it zips away), so nothing
   crosses the headline beside it - no frame, just a gentle fade at the left and right */
.in-box { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 93%, transparent 100%); }

/* the real coming-soon covers (2026-10-09): the title sits over each picture's calm top third */
.cv-img img.art { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-cover.cv-img .ttl { top: 8%; bottom: auto; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(0,0,0,.25); }
.in-book.cv-pic { padding: 0; overflow: hidden; }
.in-book.cv-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- "TAP FOR SOUND" ON THE SCENE ITSELF (his note, 2026-10-09: on a phone it fell below the first screen) ---- */
.lp-show .snd { position: absolute; z-index: 8; right: 4px; top: 4px; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0;
  background: var(--lp-ink); color: var(--lp-bg); font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0,0,0,.45); }
.lp-show .snd[data-pulse] { animation: lp-glow 1.6s ease-out infinite; }
.lp-subs { min-height: 70px; }

/* ---- SECTIONS CENTRED (his note, 2026-10-09: "some sections don't seem centre aligned"): every section's heading,
   intro and closing line sit on the page's centre line, and the narrower blocks (the plans, the free-now note, the
   FAQ, the Hindi words) are centred under them. The practice-sheet section keeps its two columns. ---- */
.lp-sec .lp-eyebrow, .lp-sec .lp-h2, .lp-sec .lp-intro, .lp-sec .lp-punch { text-align: center; margin-left: auto; margin-right: auto; }
.lp-sheets .lp-eyebrow, .lp-sheets .lp-h2 { text-align: left; margin-left: 0; }
#price .lp-wrap { text-align: center; }
#price .lp-plan { text-align: left; }
.lp-plans, .lp-faq, .lp-maker, .lp-feedback { margin-left: auto; margin-right: auto; }
.lp-reassure, .lp-chips, .cm-cheer { justify-content: center; }
.lp-trail, .cm-trail { max-width: 900px; margin-left: auto; margin-right: auto; }