/* Write a Song for Me — the home page and the five occasion pages (home-video; landings-quiz-video, owner 2026-09-30):
   the hero with its TV of three clips (hero-explainer-1014, Amendment 5), the "focus" carousel, the sticky start bar, "How it works" look 1 and, on the
   occasion pages, the ideas block. Moved from index.html's inline <style> and the draft's landing.css
   (site-drafts/merge/); js/home.js drives the same markup on every one of these pages. Linked after style.css.
   no-jerks (.contracts/no-jerks.md, Result 1): every height here that follows the screen's height reads --vh0 / --svh0
   (1 % of 100vh / 100svh as the page opened, set by js/home.js, measured again only when the width changes) instead of
   the live vh / svh, so the page does not jump when Instagram's or Safari's bars hide and show; before the script runs
   they fall back to the live units, which are the same numbers (Result 2). A browser without svh gets --svh0 from the
   script's 100vh. */
.vh { text-align:center; padding:18px 0 8px; }
.vh h1 { margin:6px 0 8px; }
.vh .lead { max-width:560px; margin:0 auto; }
/* hero-explainer-1014 (Amendment 5; owner 14.10, after the demos of five hero layouts): the hero's frame is a TV, not a
   phone — 16/9, a dark bezel (#1d1b1a; 14 px, 8 px under 720 px), no notch, a small stand under its bottom edge (a bar 28 %
   of the frame's width, centred), a soft shadow. Inside, three vertical clips side by side, each a third, black behind:
   the page's hero clip in the middle, the carousel's first two cards on its sides (js/home.js adds them after load).
   Width: under 720 px the column's; above, min(760px, 100%, the width at which the page's whole hero — eyebrow to
   .vh-sub2 — fits the first screen): 16/9 of the screen's height (no-jerks' --vh0) less the page's --hero-rest. */
.vh-phone { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:minmax(0, 1fr); gap:4px; width:min(760px, 100%, calc((var(--vh0, 1vh) * 100 - var(--hero-rest, 555px)) * 16 / 9)); aspect-ratio:16/9; min-height:0;
            margin:16px auto 30px; padding:14px; border-radius:18px; background:linear-gradient(#000, #000) content-box, #1d1b1a;
            box-shadow:0 18px 40px rgba(60,30,20,.22); }
/* Amendment 6 (2): each page's own rest of the hero — from the top of the screen to 12 px under .vh-sub2, the TV left
   out — measured at 1280x800 (.progress): home 543 + 12, love 472 + 12, the other four 445 + 12. A browser without
   :has() takes home's, the largest (the fallback in the width rule). */
.vh:has([data-hero-example="love"]) { --hero-rest:485px; }
.vh:has([data-hero-example="birthday"], [data-hero-example="mom"], [data-hero-example="dad"], [data-hero-example="christmas"]) { --hero-rest:457px; }
.vh-phone::after { content:""; position:absolute; top:100%; left:36%; width:28%; height:10px; background:#1d1b1a; border-radius:0 0 6px 6px; }
.vh-phone video { grid-row:1; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; display:block; background:#000; }
.vh-phone #vh-video { grid-column:2; }
.vh-phone .vh-side-l { grid-column:1; }
.vh-phone .vh-side-r { grid-column:3; }
@media (max-width:719px) { .vh { padding-top:8px; } .vh .eyebrow { display:none; } .vh-phone { width:100%; padding:8px; border-radius:12px; margin:12px auto 24px; } .vh-phone::after { height:8px; } .vh-sound { top:14px; right:14px; } }
/* hero-explainer-1014 (Result 2; owner 14.10): on phones the lead line shows again — it says what the site sells
   (clips Result 9 had hidden it); Amendment 5: the phone frame's flex fill (hero-fill) is gone with the phone frame. */
@media (max-width:600px) {
  .vh h1 { margin:4px 0 0; }
}
/* clips (Result 4): the hero's "Play with sound" — a round white button with a speaker in the TV's top right corner
   (Amendment 5); while its clip plays with sound, accent with a pause icon (js/home.js sets .live) */
.vh-sound { position:absolute; top:22px; right:22px; z-index:3; width:44px; height:44px; padding:0; border:0; border-radius:50%;
            background:#fff; color:var(--ink); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.28); cursor:pointer; }
.vh-sound svg { width:22px; height:22px; fill:currentColor; }
.vh-sound .i-pause, .vh-phone.live .vh-sound .i-sound { display:none; }
.vh-phone.live .vh-sound { background:var(--accent); color:#fff; }
.vh-phone.live .vh-sound .i-pause { display:block; }
.vh .btn-xl { font-size:1.2rem; padding:16px 34px; min-width:min(360px, 88vw); }
/* hero-explainer-1014 (Results 3, 4): «▶ Hear an example» under the start button — outlined, filled terracotta while it
   plays (js/hero-example.js sets .live); under it, while it plays, «Song for <name> · <genre>» and the chorus' first two
   lines in italics, the name marked */
.vh-hx { margin:12px auto 0; max-width:min(360px, 88vw); }
.vh-hx-btn { min-height:44px; padding:10px 20px; border:2px solid var(--accent); border-radius:999px; background:transparent;
             color:var(--accent-text); font:700 1rem/1.2 var(--sans); cursor:pointer; }
.vh-hx-btn small { margin-left:4px; font-size:.85em; font-weight:600; }
.vh-hx.live .vh-hx-btn { background:var(--accent); color:#fff; }
.vh-hx-cap { margin:8px 0 0; color:var(--ink-2); font-size:.95rem; line-height:1.35; text-wrap:balance; }
.vh-hx-lyr { display:block; margin-top:2px; }
.vh-hx-cap mark { padding:0 3px; border-radius:4px; background:var(--hl); color:var(--ink); }
.vh-sub { margin:10px 0 0; color:var(--muted); font-size:.95rem; }
.vh-sub2 { margin:2px 0 0; color:var(--accent-text); font-weight:600; font-size:.875rem; text-wrap:balance; }
.reelband { background:var(--bg-2); padding:34px 0 30px; }
.reelband h2 { text-align:center; margin:0 0 6px; }
.vh-sticky { position:fixed; left:0; right:0; bottom:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,248,241,.96); border-top:1px solid var(--line); display:none; z-index:50; text-align:center; }
.vh-sticky .btn { width:100%; }
.vh-sticky small { display:block; color:var(--accent-text); font-weight:600; font-size:.875rem; margin-top:4px; text-wrap:balance; }
/* guarantee-30 (Result 4): the shield before the 30-day promise lines (L1 hero, L2 sticky bar) */
.vh-sub2 .g-shield, .vh-st-sub .g-shield { display:inline-block; width:15px; height:15px; margin-right:5px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:720px) { .vh-sticky .btn { max-width:420px; } }
.vh-sticky.show { display:block; } /* home.js: once the hero button has scrolled off screen, and no cookie banner */
/* start button: "Start my song" with a yellow "Free preview" badge (look 4, Vitaly 30.09) */
.cta-badge { position:absolute; top:-11px; right:18px; background:#FFD86B; color:#2A1E1B; font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
#vh-cta, #vh-sticky .btn { position:relative; }
#vh-sticky .cta-badge { top:-9px; }
.foot { padding-bottom:110px; } /* room for the sticky start button */

/* ===== carousel: "focus" — the centre clip plays; side clips smaller, blurred, darkened (Vitaly 29.09) ===== */
.car { position:relative; height:min(560px, calc(var(--vh0, 1vh) * 66)); max-width:980px; margin:0 auto; touch-action:pan-y; user-select:none; }
.car-track { position:absolute; inset:0; }
.cc { position:absolute; top:50%; left:50%; height:100%; aspect-ratio:9/16; border-radius:22px; overflow:hidden; background:#222;
      transform:translate(-50%,-50%); transition:transform .45s ease, opacity .45s ease, filter .45s ease, box-shadow .45s ease; box-shadow:0 10px 26px rgba(60,30,20,.22); }
.cc video, .cc img { width:100%; height:100%; object-fit:cover; display:block; }
.cc .play { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; border:0; border-radius:999px; padding:14px 20px; font:700 16px/1 var(--sans);
            background:#fff; color:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,.28); cursor:pointer; white-space:nowrap; display:none; }
.cc.on .play { display:block; }
.cc.live .play { background:var(--accent); color:#fff; }
.cc .eq { position:absolute; top:14px; left:14px; z-index:3; display:none; gap:3px; align-items:flex-end; height:18px; }
.cc.live .eq { display:flex; }
.cc .eq i { width:4px; background:#fff; border-radius:2px; animation:eq .9s ease-in-out infinite; }
.cc .eq i:nth-child(2){animation-delay:.2s} .cc .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq { 0%,100%{height:5px} 50%{height:18px} }
.car-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.92); font-size:28px; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.18); color:var(--ink); }
.car-nav.prev { left:10px; } .car-nav.next { right:10px; }
.car-dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.car-dots i { width:8px; height:8px; border-radius:50%; background:var(--line-2); cursor:pointer; } .car-dots i.on { background:var(--accent); width:22px; border-radius:4px; }
.cc[data-o="0"] { transform:translate(-50%,-50%) scale(1); z-index:3; }
.cc[data-o="-1"] { transform:translate(calc(-50% - 78%),-50%) scale(.74); filter:blur(3px) brightness(.55); z-index:2; }
.cc[data-o="1"]  { transform:translate(calc(-50% + 78%),-50%) scale(.74); filter:blur(3px) brightness(.55); z-index:2; }
.cc.live { transform:translate(-50%,-50%) scale(1.04); box-shadow:0 0 0 4px var(--accent), 0 18px 44px rgba(209,71,47,.35); }
@media (max-width:719px) { .car { height:min(520px, calc(var(--vh0, 1vh) * 62)); } .cc[data-o="-1"] { transform:translate(calc(-50% - 62%),-50%) scale(.7); } .cc[data-o="1"] { transform:translate(calc(-50% + 62%),-50%) scale(.7); } .car-nav { width:44px; height:44px; font-size:24px; } }

/* ===== How it works: mini phone screens (look 1, Vitaly 30.09) ===== */
.lz-h2 { text-align:center; }
.hw-sub { text-align:center; color:var(--muted); margin:8px 0 0; }
.hw { list-style:none; padding:0; margin:26px auto 0; }
.hw .t { margin:0; font-weight:700; font-size:1.12rem; line-height:1.25; }
.hw .t small { display:block; margin-top:4px; font-weight:400; color:var(--muted); font-size:.95rem; line-height:1.35; }
.hw1 { display:grid; gap:20px; max-width:980px; }
.hw1 li { display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center; }
.hw1 li:nth-child(2) { grid-template-columns:1fr 120px; text-align:right; }
.hw1 li:nth-child(2) .ph { order:2; }
.ph { width:120px; aspect-ratio:9/17; background:var(--ink); border-radius:22px; padding:5px; position:relative; box-shadow:0 12px 26px rgba(60,30,20,.18); }
.ph::before { content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:34px; height:8px; border-radius:6px; background:var(--ink); z-index:1; }
.ph .sc { height:100%; background:var(--paper); border-radius:18px; padding:26px 10px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; text-align:left; }
.sk { display:block; height:6px; border-radius:3px; background:var(--line); }
.sk.w3 { width:34%; } .sk.w6 { width:62%; } .sk.w7 { width:74%; } .sk.w8 { width:84%; } .sk.w9 { width:94%; } .sk.c { margin:0 auto; }
.q-prog { display:flex; gap:4px; margin-bottom:4px; } .q-prog i { flex:1; height:4px; border-radius:2px; background:var(--line); } .q-prog i.on { background:var(--accent); }
.q-in { border:1.5px solid var(--line-2); border-radius:9px; height:30px; padding:0 8px; display:flex; align-items:center; font:700 15px/1 var(--sans); color:var(--ink); }
.q-in.on { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.caret { width:2px; height:17px; margin-left:2px; background:var(--accent); animation:hwBlink 1s steps(1) infinite; }
.q-btn { margin-top:auto; height:26px; border-radius:13px; background:var(--accent); color:#fff; font:700 15px/26px var(--sans); text-align:center; }
.p-play { width:44px; height:44px; border-radius:50%; background:var(--accent); display:grid; place-items:center; margin:2px auto 4px; box-shadow:0 4px 12px rgba(209,71,47,.35); }
.p-play svg { width:20px; height:20px; fill:#fff; margin-left:3px; }
.p-wave { width:100%; height:22px; display:block; } .p-wave rect { fill:var(--line-2); } .p-wave rect.on { fill:var(--accent); }
.p-time { margin:-4px 0 2px; text-align:right; font:600 14px/1 var(--sans); color:var(--muted); }
.p-lyr { display:flex; align-items:center; gap:5px; margin:0; } .p-lyr .sk { flex:none; }
.p-lyr mark { background:var(--hl); color:var(--ink); font:700 15px/1 var(--sans); padding:3px 5px; border-radius:5px; }
.g-top { height:46px; margin:-26px -10px 2px; padding-top:14px; background:var(--accent); display:grid; place-items:center; }
.g-top svg { width:22px; height:22px; fill:#fff; }
.g-for { margin:4px 0 0; text-align:center; font:700 16px/1.1 var(--serif); color:var(--ink); }
.g-bar { display:flex; align-items:center; gap:6px; background:var(--bg-2); border-radius:14px; padding:5px 7px; margin:2px 0; }
.g-bar i { width:18px; height:18px; border-radius:50%; background:var(--accent); flex:none; position:relative; }
.g-bar i::after { content:""; position:absolute; left:7px; top:5px; border-left:6px solid #fff; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.g-bar b { flex:1; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--accent) 30%, var(--line-2) 30%); }
.g-gift { margin-top:auto; align-self:center; width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:760px) {
  .hw1 { grid-template-columns:repeat(3, 1fr); gap:32px; }
  .hw1 li, .hw1 li:nth-child(2) { grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; }
  .hw1 li:nth-child(2) .ph { order:0; }
  .ph { width:150px; border-radius:26px; } .ph .sc { border-radius:21px; padding:30px 12px 14px; gap:10px; }
}
@keyframes hwBlink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .hw *, .hw *::before, .hw *::after { animation:none !important; }
}
/* a11y-us-privacy (Result 1): a muted clip's own pause control (js/home.js adds it) — round, 44 px, top left of the TV and
   of the centre card; "❚❚" while the clip plays, "▶" once paused; hidden while the clip plays with sound, where the
   sound button is its Pause. Result 2: under reduced motion the clips hold their posters (js/home.js) and the carousel
   neither slides nor shows the moving equaliser. */
.vpause { position:absolute; top:22px; left:22px; z-index:3; width:44px; height:44px; padding:0; border:0; border-radius:50%;
          background:rgba(255,255,255,.92); color:var(--ink); display:grid; place-items:center; font:700 15px/1 var(--sans);
          box-shadow:0 4px 14px rgba(0,0,0,.28); cursor:pointer; }
.vpause .i-go, .vpause[aria-pressed="true"] .i-hold { display:none; }
.vpause[aria-pressed="true"] .i-go { display:inline; }
.cc .vpause { top:14px; left:14px; display:none; }
.cc.on .vpause { display:grid; }
.vh-phone.live .vpause, .cc.live .vpause { display:none; }
@media (max-width:719px) { .vh-phone .vpause { top:14px; left:14px; } }
@media (prefers-reduced-motion: reduce) {
  .cc { transition:none; }
  .cc .eq i { animation:none; }
}
/* side clips of the carousel stick out; without this phones lay the page out wider than the screen */
main { overflow-x:clip; }

/* ===== ideas block: the page's own words (anti-doorway, site/BRIEF.md:31) ===== */
.ideas { padding:34px 0 36px; }
.ideas .lz-h2 { margin:0; }
.ideas-sub { text-align:center; color:var(--muted); margin:8px 0 0; }
.ideas-list { list-style:none; padding:0; margin:18px auto 0; display:grid; gap:10px; max-width:460px; }
.ideas-list a { display:block; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:18px; padding:12px 18px; text-align:center; min-height:44px; }
.ideas-list b { display:block; font-weight:700; }
.ideas-list span { display:block; margin-top:3px; color:var(--muted); font-style:italic; font-size:.95rem; }
.ideas-list.pills { display:flex; flex-wrap:wrap; justify-content:center; max-width:620px; gap:8px; }
.ideas-list.pills a { border-radius:999px; padding:11px 16px; }
.ideas-when { text-align:center; color:var(--muted); font-size:.92rem; margin:14px 0 0; }
@media (min-width:760px) { .ideas-list:not(.pills) { grid-template-columns:repeat(3, 1fr); max-width:900px; } .ideas-list:not(.pills) a { height:100%; } }