/* The page itself. Scenes follow the app's welcome pager; motion is at the bottom. */

.lede { max-width: 50ch; margin: 22px auto 0; color: var(--ink); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.caption { margin: 22px 0 0; color: var(--text-soft); font-size: 14px; text-align: center; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.text-link span { transition: translate .35s var(--calm); }
.text-link:hover span { translate: 3px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 28px; }
.play { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent) url("img/icons/play-cream.svg") center / 52% no-repeat; }

/* Hero: big words, then the phone with the family's keepsakes fanned around it. */
.hero { position: relative; padding: clamp(36px, 6vw, 84px) 0 0; overflow: clip; }
.hero-copy { position: relative; z-index: 2; text-align: center; }
.hero h1 { font-size: clamp(2.7rem, 7vw, 6.1rem); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 0; }
.flower { position: absolute; top: 12px; right: 0; width: clamp(180px, 21vw, 320px); aspect-ratio: 1024 / 1536; pointer-events: none; }
.flower img, .flower-tendril { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flower-tendril path { fill: none; stroke: var(--ink); stroke-width: 3.9; stroke-linecap: round; stroke-linejoin: round; }
.hero-sprig { top: 26px; width: clamp(110px, 12vw, 180px); }

.stage { --k: 1px; position: relative; height: calc(var(--k) * 770); margin-top: 52px; }
.stage-glow { position: absolute; left: 50%; top: 2%; width: calc(var(--k) * 1200); height: 96%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(207, 167, 148, .34), rgba(207, 167, 148, 0)); }
.keepsakes > * { position: absolute; z-index: 1; left: calc(50% + var(--k) * var(--l)); top: calc(var(--k) * var(--t)); width: calc(var(--k) * var(--w)); transform: rotate(var(--r)); translate: 0 calc(var(--scroll, 0) * var(--d, 0) * -1px); will-change: translate; }
.print { margin: 0; padding: calc(var(--k) * 10) calc(var(--k) * 10) calc(var(--k) * 12); background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(107, 79, 58, .08), 0 22px 44px rgba(107, 79, 58, .18); }
.print img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; border-radius: 2px; }
.print figcaption { padding-top: calc(var(--k) * 9); color: var(--ink); font: 500 calc(var(--k) * 23)/1.1 "Caveat", cursive; text-align: center; }
.p-laugh { --l: -610; --t: 30; --w: 262; --r: -6deg; --d: .1; --fx: 480px; --fy: 200px; }
.p-baby { --l: -345; --t: 360; --w: 172; --r: 5deg; --d: .2; --fx: 260px; --fy: -20px; z-index: 2 !important; }
.p-note { --l: -590; --t: 490; --w: 240; --r: 3deg; --d: .05; --fx: 470px; --fy: -150px; }
.p-beach { --l: 212; --t: 18; --w: 340; --r: 4deg; --d: .08; --fx: -380px; --fy: 200px; --ratio: 3 / 2; }
.p-drawing { --l: 260; --t: 290; --w: 214; --r: -5deg; --d: .18; --fx: -360px; --fy: 60px; }
.p-audio { --l: 200; --t: 636; --w: 300; --r: 2deg; --d: .04; --fx: -350px; --fy: -220px; z-index: 3 !important; }
.note { padding: calc(var(--k) * 22); background: #FFF9EC; border-radius: 4px; box-shadow: 0 16px 32px rgba(107, 79, 58, .16); }
.note::before { content: ""; position: absolute; left: 50%; top: calc(var(--k) * -11); width: calc(var(--k) * 86); height: calc(var(--k) * 24); translate: -50% 0; rotate: -2deg; background: rgba(207, 167, 148, .55); }
.note .eyebrow { margin-bottom: 8px; font-size: calc(var(--k) * 11); letter-spacing: .12em; }
.note p:last-child { margin: 0; color: var(--text); font: 500 calc(var(--k) * 30)/1.08 "Caveat", cursive; }
.audio-pill { display: flex; align-items: center; gap: calc(var(--k) * 12); padding: calc(var(--k) * 10) calc(var(--k) * 18) calc(var(--k) * 10) calc(var(--k) * 10); background: var(--surface); border-radius: 999px; box-shadow: 0 14px 30px rgba(107, 79, 58, .18); color: var(--ink); font-size: calc(var(--k) * 13); font-weight: 500; }
.audio-pill .play { width: calc(var(--k) * 40); height: calc(var(--k) * 40); }
.audio-pill .waveform { flex: 1; justify-content: space-between; height: calc(var(--k) * 38); gap: calc(var(--k) * 3); }
.audio-pill .waveform i { width: calc(var(--k) * 3); height: calc(var(--bar) * .9 * var(--scale, 1)); }

/* A phone: 390x844 screens, scaled by --s. */
.phone { --s: .84; position: relative; z-index: 2; box-sizing: content-box; margin: 0; width: calc(390px * var(--s)); height: calc(844px * var(--s)); padding: 9px; border-radius: 52px; background: #2A211B; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 6px rgba(107, 79, 58, .2), 0 44px 80px rgba(107, 79, 58, .3); }
.phone-hero { position: absolute; left: 50%; top: 0; translate: -50% 0; }
.screens { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 44px; background: var(--bg); }
.screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden; padding: 0 22px; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.35; transform: scale(var(--s)); transform-origin: top left; opacity: 0; visibility: hidden; transition: opacity .34s var(--calm), visibility .34s, translate .46s var(--calm); }
.screen.active { opacity: 1; visibility: visible; }
.s-chooser, .s-form { translate: 0 44px; }
.s-chooser.active, .s-form.active { translate: 0 0; }
.screen b { font-weight: 600; }
.screen .ic { display: block; flex: none; }
.status-bar { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 12px 10px 0; font-size: 15px; font-weight: 600; }
.status-right { display: flex; align-items: center; gap: 6px; }
.signal { width: 18px; height: 11px; border-radius: 2px; background: linear-gradient(90deg, var(--text) 0 18%, transparent 18% 27%, var(--text) 27% 45%, transparent 45% 55%, var(--text) 55% 73%, transparent 73% 82%, var(--text) 82%); clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%); }
.battery { width: 24px; height: 11px; border-radius: 3px; background: var(--text); }
.tab-bar { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; height: 86px; padding-top: 10px; background: var(--bg); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); font-size: 10.5px; }
.tab.on { color: var(--accent); }
.tab-add { justify-self: center; display: grid; place-items: center; width: 58px; height: 58px; margin-top: -24px; border-radius: 50%; background: var(--accent); }
.home-top { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.home-logo { height: 30px; width: auto; }
.home-flower { position: absolute; right: -32px; top: 82px; width: 138px; height: auto; }
.home-hello { position: relative; max-width: 220px; margin-top: 14px; }
.home-hello b { display: block; font: 600 24px/1.2 "Lora", Georgia, serif; }
.home-hello span { display: block; margin-top: 2px; color: var(--ink); font-size: 16px; }
.home-cta { position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; margin-top: 18px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 16px; box-shadow: 0 6px 14px rgba(107, 79, 58, .2); }
.home-wave { display: block; width: 230px; height: auto; margin: -2px 0 -10px auto; }
.s-title { font: 600 16.5px/1.3 "Lora", Georgia, serif; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 0 9px; background: var(--surface); border-radius: 16px; box-shadow: 0 2px 8px rgba(107, 79, 58, .08); color: var(--ink); font-size: 10.5px; }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; color: var(--ink); font-size: 13px; font-weight: 600; }
.recent-head .s-title { color: var(--text); }
.rows { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.railed { padding-left: 18px; }
.railed::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 1.5px; background: var(--accent); }
.row { position: relative; display: flex; align-items: center; gap: 12px; }
.rail-dot { display: none; }
.railed .rail-dot { display: block; position: absolute; left: -19px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--bg); }
.railed .rail-dot.filled { background: var(--accent); }
.thumb { display: grid; place-items: center; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 14px; background: var(--bg-soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.row-text em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-soft); font-style: normal; font-size: 13px; }
.row-meta { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12px; }
.mini-avatar { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 10px; font-weight: 600; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 64px 0 44px; }
.sheet-head b { font: 600 24px/1.2 "Lora", Georgia, serif; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { display: flex; gap: 10px; min-height: 104px; padding: 16px 10px 14px 14px; background: var(--surface); border-radius: 20px; box-shadow: 0 2px 10px rgba(107, 79, 58, .09); }
.choice b { display: block; color: var(--ink); font-size: 16px; }
.choice span { display: block; margin-top: 3px; color: var(--ink); font-size: 12.5px; }
.back-bar { display: flex; align-items: center; gap: 12px; margin: 6px 0 20px; }
.back-bar b { font: 600 20px/1.2 "Lora", Georgia, serif; }
.form-card { position: relative; min-height: 210px; padding: 24px 22px; background: var(--surface); border-radius: 20px; box-shadow: 0 2px 10px rgba(107, 79, 58, .09); }
.form-quote-mark { display: block; color: var(--accent-muted); font: 600 54px/.6 "Lora", Georgia, serif; }
.form-text { margin: 8px 0 0; font: 500 32px/1.15 "Caveat", cursive; color: var(--text); }
.caret { display: none; width: 2px; height: 26px; margin-left: 2px; vertical-align: -3px; background: var(--accent); }
.typing .caret { display: inline-block; }
.form-label { display: block; margin: 24px 0 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.form-kids { display: flex; gap: 8px; }
.kid { display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; }
.kid.on { border-color: var(--c); background: var(--surface); font-weight: 600; }
.form-save { position: absolute; left: 22px; right: 22px; bottom: 44px; display: grid; place-items: center; height: 54px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 16px; font-weight: 600; box-shadow: 0 6px 14px rgba(107, 79, 58, .2); }
.tl-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.tl-head b { font: 600 24px/1.2 "Lora", Georgia, serif; }
.tl-chips { display: flex; gap: 8px; margin-right: -22px; overflow: hidden; }
.tl-chips span { flex: none; padding: 7px 15px; background: var(--surface); border-radius: 999px; box-shadow: 0 1px 6px rgba(107, 79, 58, .1); font-size: 13px; }
.tl-chips .on { background: var(--accent); color: var(--accent-text); }
.tl-rows { margin-top: 18px; }
.month { position: relative; font-size: 14px; font-weight: 600; }
.month::before { content: ""; position: absolute; left: -19px; top: 5px; width: 11px; height: 11px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--bg); }
.child-card { overflow: hidden; background: var(--surface); border-radius: 22px; box-shadow: 0 2px 12px rgba(107, 79, 58, .1); }
.child-tint { padding: 16px 20px 18px; background: #DFE5DA; color: var(--text); font-size: 11px; letter-spacing: .08em; }
.child-tint img { display: block; width: 104px; height: 104px; margin-top: 10px; object-fit: cover; border: 3px solid #7C9478; border-radius: 50%; }
.child-body { padding: 16px 20px 18px; }
.child-body b { display: block; font-size: 30px; line-height: 1.1; }
.child-body span { display: block; margin-top: 6px; color: var(--text-soft); font-size: 13px; }
.child-actions { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; padding-left: 8px; }
.child-actions span { padding: 7px 16px; border: 1px solid var(--accent); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 600; }

/* The line: in from the left edge, once around the heart, out to the right. */
.line-scene { margin-top: 28px; padding: 0 0 80px; text-align: center; }
.heart-line { position: relative; aspect-ratio: 1448 / 330; }
.heart-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.heart-stroke { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.heart-fill { fill: var(--accent); fill-opacity: .2; }
.float-heart { position: absolute; left: 50%; top: 30%; width: 14px; height: 14px; opacity: 0; background: url("img/icons/heart-fill.svg") center / contain no-repeat; }
.float-heart.one { margin-left: -28px; }
.float-heart.two { margin-left: 16px; width: 11px; height: 11px; }
.float-heart.three { margin-left: -6px; margin-top: -10px; width: 12px; height: 12px; }
.line-scene .eyebrow { margin-top: 8px; }
.line-words { max-width: 34ch; margin: 0 auto 12px; color: var(--ink); font: 500 italic clamp(20px, 2.4vw, 30px)/1.35 "Lora", Georgia, serif; }
.line-scene .signature { width: max-content; margin-inline: auto; font-size: 36px; }

.ticker { display: flex; overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-soft); }
.ticker-run { display: flex; flex: none; flex-wrap: nowrap; gap: 44px; padding: 16px 22px; color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.ticker-run span { display: inline-flex; align-items: center; gap: 12px; }
.ticker-run span::before { content: ""; width: 12px; height: 12px; background: url("img/icons/heart-fill.svg") center / contain no-repeat; }
.ticker-run.copy { display: none; }

section.band { position: relative; padding: clamp(72px, 9vw, 128px) 0; overflow: clip; }
.section-intro { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-intro > p:last-child { max-width: 50ch; margin: 18px auto 0; color: var(--ink); font-size: 18px; }

/* Drawings run past the edge and stay clear of the text. */
.sprig { position: absolute; pointer-events: none; }
.sprig img { display: block; width: 100%; height: auto; scale: -1 1; }
.sprig.at-left { left: -2px; }
.sprig.at-right { right: -2px; }

/* Every kind of memory, in its own way. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 190px; gap: 18px; }
.bento-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bento-card .eyebrow { margin: 0; font-size: 11px; letter-spacing: .12em; }
.bento-card h3 { margin: 0; }
.b-photo { justify-content: flex-end; padding: 22px; background: var(--bg-soft); color: #fff; }
.b-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--calm); }
.b-photo:hover > img { scale: 1.04; }
.b-photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(36, 28, 23, .68)); }
.bento-over { position: relative; z-index: 1; }
.bento-over .eyebrow { color: rgba(255, 255, 255, .86); }
.bento-over h3 { color: #fff; font-size: 22px; }
.b-photo .play { position: absolute; z-index: 1; left: 22px; top: 22px; background-color: rgba(36, 28, 23, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.b-tall { grid-column: span 4; grid-row: span 3; }
.b-quote { grid-column: span 5; grid-row: span 2; justify-content: space-between; background: #96604A; color: var(--accent-text); }
.b-quote h3 { color: var(--accent-text); font: 500 clamp(30px, 3.1vw, 44px)/1.08 "Caveat", cursive; letter-spacing: 0; }
.b-quote .eyebrow { color: var(--accent-text); }
.quote-mark { font: 600 72px/.5 "Lora", Georgia, serif; opacity: .55; margin-top: 14px; }
.b-drawing { grid-column: span 3; grid-row: span 2; }
.b-audio { grid-column: span 5; grid-row: span 2; background: #6B4F3A; color: var(--accent-text); gap: 8px; }
.b-audio h3 { color: var(--accent-text); font-size: 24px; margin-top: auto; }
.b-audio p { margin: 0 0 8px; opacity: .92; font-size: 15px; }
.b-audio .eyebrow { color: var(--accent-text); margin: 0; }
.audio-head { display: flex; align-items: center; gap: 16px; }
.audio-head .play { background-color: var(--accent-text); background-image: url("img/icons/play.svg"); }
.waveform { display: flex; align-items: center; gap: 5px; height: 64px; }
.waveform i { display: block; flex: none; width: 4px; height: var(--bar); border-radius: 4px; background: var(--accent-muted); }
.audio-pill .waveform i { background: var(--accent); }
.b-milestone { grid-column: span 3; grid-row: span 2; justify-content: space-between; background: #DFE5DA; }
.b-milestone h3 { font-size: 21px; line-height: 1.25; }
.b-video { grid-column: span 4; grid-row: span 1; }

.story-band { background: var(--bg-soft); overflow: visible !important; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 110px); align-items: start; max-width: 1140px; }
.story-phone { position: sticky; top: calc(50vh - 340px); display: grid; place-items: center; }
.phone-story { --s: .78; }
.story-heading { margin-bottom: 48px; }
.story-heading > p:last-child { margin: 16px 0 0; max-width: 46ch; color: var(--ink); font-size: 18px; }

/* The timeline's rail: a line with a ring per moment. */
.steps { position: relative; display: flex; flex-direction: column; margin: 0 0 28px; padding: 0 0 0 44px; list-style: none; }
.steps::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 44px; width: 2px; border-radius: 2px; background: var(--accent); transform-origin: top; }
.steps li { position: relative; padding-bottom: clamp(48px, 13vh, 150px); }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: -44px; top: 6px; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg-soft); transition: background-color .4s var(--calm), scale .4s var(--calm); }
.steps li.current::before { background: var(--accent); scale: 1.2; }
.steps h3 { margin-bottom: 8px; font-size: 26px; }
.steps p { margin: 0; max-width: 44ch; color: var(--ink); font-size: 16px; }

/* The book opens as it scrolls in: a real cover turns over on the spine. */
.keepsake { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.keepsake-copy > p:not(.eyebrow) { color: var(--ink); }
.book-art { perspective: 1800px; }
.book { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; filter: drop-shadow(0 26px 34px rgba(107, 79, 58, .22)); }
.page-right, .cover { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.page-right { display: flex; flex-direction: column; justify-content: center; padding: 8cqw 5cqw 4cqw; background: var(--surface); border-radius: 0 10px 10px 0; box-shadow: inset 14px 0 18px -14px rgba(107, 79, 58, .28); }
.page-eyebrow { margin: 0 0 1.4cqw; color: var(--ink); font-size: 1.5cqw; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.page-quote { margin: 0; color: var(--text); font: 500 5.4cqw/1.08 "Caveat", cursive; }
.page-right img { display: block; width: 100%; height: auto; margin-top: auto; }
.page-number { position: absolute; bottom: 1.8cqw; right: 2.4cqw; color: var(--text-soft); font-size: 1.5cqw; }
.cover { transform-origin: left center; transform-style: preserve-3d; transform: rotateY(-180deg); }
.cover-front, .cover-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-front { display: flex; flex-direction: column; padding: 6cqw 4.5cqw 3cqw; background: #96604A; border-radius: 0 10px 10px 0; color: var(--accent-text); }
.cover-front .page-eyebrow { color: var(--accent-text); }
.cover-title { margin: 0; color: var(--accent-text); font: 600 4.3cqw/1.2 "Lora", Georgia, serif; }
.cover-front img { display: block; width: 100%; height: auto; margin-top: auto; }
.cover-back { display: flex; flex-direction: column; padding: 3.4cqw 3.4cqw 2cqw; background: var(--surface); border-radius: 0 10px 10px 0; transform: rotateY(180deg); box-shadow: inset 14px 0 18px -14px rgba(107, 79, 58, .28); }
.cover-back img { display: block; width: 100%; height: 76%; object-fit: cover; border-radius: 4px; }
.cover-back .signature { margin: 1.6cqw auto 0; font-size: 3.2cqw; }
.cover-back .page-number { right: auto; left: 2.4cqw; }

/* Privacy: the one dark moment on the page. */
.privacy-band { background: #6B4F3A; color: var(--accent-text); }
.privacy-band > .sprig { top: 40px; width: 200px; opacity: .55; }
.privacy-band h2, .privacy-band h3, .privacy-band em, .privacy-band .eyebrow, .privacy-band a { color: var(--accent-text); }
.privacy-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.privacy-layout > div:first-child > p:not(.eyebrow) { max-width: 54ch; margin-top: 18px; font-size: 18px; }
.privacy-points { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-block: 32px 16px; }
.privacy-points h3 { font-size: 20px; }
.privacy-points p { margin: 0; opacity: .92; font-size: 15px; }
.share-card { overflow: hidden; max-width: 380px; justify-self: center; width: 100%; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(36, 28, 23, .34); color: var(--text); }
.share-card > img { display: block; width: 100%; height: 190px; object-fit: cover; }
.share-body { padding: 20px 22px 14px; }
.share-body b { display: block; font: 600 20px/1.25 "Lora", Georgia, serif; }
.share-sub { display: block; margin: 14px 0 2px; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.person { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.person:first-of-type { border-top: 0; }
.person .mini-avatar { width: 30px; height: 30px; font-size: 13px; }
.person em { margin-left: auto; color: var(--text-soft); font-style: normal; font-size: 13px; }
.person .ask { position: absolute; right: 0; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 600; opacity: 0; }

.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.faq-layout > div:first-child > p:not(.eyebrow) { margin-bottom: 4px; color: var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 22px 40px 22px 0; cursor: pointer; list-style: none; font: 600 19px/1.3 "Lora", Georgia, serif; color: var(--text); transition: color .3s var(--calm); }
.faq summary:hover { color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 25px; width: 22px; height: 22px; background: url("img/icons/chevron-down.svg") center / contain no-repeat; transition: rotate .4s var(--calm); }
.faq details[open] summary::after { rotate: 180deg; }
.faq details p { margin: 0; padding: 0 32px 24px 0; color: var(--ink); font-size: 16px; }

/* The invitation: a large warm card. */
.cta { padding: 0 0 clamp(48px, 7vw, 88px); }
.cta-card { position: relative; overflow: clip; padding: clamp(56px, 8vw, 104px) 24px; border-radius: 40px; background: #96604A; color: var(--accent-text); text-align: center; }
.cta-card h2, .cta-card em, .cta-card .eyebrow, .cta-card a:not(.btn), .cta-card .store-note { color: var(--accent-text); }
.cta-card h2 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); line-height: 1.08; }
.cta-card > p:not(.eyebrow) { font-size: 18px; }
.cta-card .btn { border-color: var(--accent-text); background: var(--accent-text); color: var(--ink); box-shadow: 0 8px 22px rgba(36, 28, 23, .24); }
.cta-card .sprig { top: 36px; opacity: .75; }
.cta-card .sprig-sprig-buds { width: 150px; }
.cta-card .sprig-branch-sparkle { width: 190px; }
.download-mark { display: block; width: 80px; height: auto; margin: 0 auto 22px; }

/* Legal pages: a single sprig in the free space beside the text. */
.page::after { content: ""; position: absolute; top: 56px; right: -2px; width: 220px; aspect-ratio: 2548 / 3320; background: url("img/art/branch-sparkle.svg") center / contain no-repeat; scale: -1 1; pointer-events: none; }

/* Motion. Base styles above are the finished state: nothing depends on an animation. */
.new-row { display: grid; grid-template-rows: 1fr; }
@keyframes arrive { from { opacity: 0; translate: 0 14px; } }
@keyframes rise-phone { from { opacity: 0; margin-top: 60px; } }
@keyframes fan { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(0deg) scale(.82); } }
@keyframes grow-in { from { clip-path: circle(0% at var(--from)); } to { clip-path: circle(150% at var(--from)); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes breathe { 50% { fill-opacity: .34; } }
@keyframes warm { from { fill-opacity: 0; } }
@keyframes rise { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: .85; scale: 1; } 70% { opacity: .5; } 100% { opacity: 0; translate: var(--drift, 0) -52px; scale: .8; } }
@keyframes voice { 50% { transform: scaleY(.5); } }
@keyframes slide { to { translate: -100% 0; } }
@keyframes press { 40% { scale: .95; filter: brightness(.94); } }
@keyframes drift-photo { from { scale: 1.08; } to { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: arrive .8s var(--calm) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .phone-hero { animation: rise-phone 1.1s var(--calm) .2s both; }
  .keepsakes > * { animation: fan 1.5s var(--calm) both; animation-delay: calc(.55s + var(--o, 0) * .12s); }
  .p-baby { --o: 1; } .p-beach { --o: 2; } .p-drawing { --o: 3; } .p-note { --o: 4; } .p-audio { --o: 5; }
  .flower img { --from: 100% 47%; animation: grow-in 1.8s var(--calm) .3s both; }
  .flower-tendril path { stroke-dasharray: 1; animation: draw 2.2s var(--calm) 1.1s both; }
  .page::after { --from: 0% 70%; animation: grow-in 1.8s var(--calm) .2s both; }
  .waveform i { animation: voice 2.4s ease-in-out calc(var(--i) * -170ms) infinite; }
  .ticker-run { animation: slide 46s linear infinite; }
  .ticker-run.copy { display: flex; }
  .ticker:hover .ticker-run { animation-play-state: paused; }

  .motion .tapping { animation: press .42s var(--calm); }
  .motion .phone-hero .new-row { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--calm), opacity .55s var(--calm) .1s; }
  .motion .phone-hero .new-row > * { min-height: 0; overflow: hidden; }
  .motion .phone-hero.saved .new-row { grid-template-rows: 1fr; opacity: 1; }

  .motion [data-reveal]:not(.heart-line, .sprig) { transition: opacity .8s var(--calm), translate .8s var(--calm); }
  .motion [data-reveal]:not(.in, .heart-line, .sprig) { opacity: 0; translate: 0 18px; }

  .motion .sprig img { --from: 0% 70%; }
  .motion .sprig-sprig-buds img { --from: 100% 90%; }
  .motion .sprig:not(.in) img { clip-path: circle(0% at var(--from)); }
  .motion .sprig.in img { animation: grow-in 1.8s var(--calm) both; }
  .motion .cta-card:not(.in) .sprig img { clip-path: circle(0% at var(--from)); }

  .motion .heart-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .heart-fill { fill-opacity: 0; }
  .motion .heart-line.in .heart-stroke { animation: draw 2.8s ease-in-out .2s both; }
  .motion .heart-line.in .heart-fill { animation: warm 1s var(--calm) 1.9s backwards, breathe 4.4s ease-in-out 2.9s infinite; fill-opacity: .2; }
  .motion .heart-line.in .float-heart { animation: rise 3.6s ease-out 3s infinite; }
  .motion .heart-line.in .float-heart.two { --drift: 10px; animation-delay: 4.2s; }
  .motion .heart-line.in .float-heart.three { --drift: -8px; animation-delay: 5.4s; }
  .motion .line-scene .eyebrow { transition-delay: .6s; }
  .motion .line-words { transition-delay: .8s; }
  .motion .line-scene .signature { transition: opacity 1s var(--calm) 2.6s, translate 1s var(--calm) 2.6s; }

  .motion [data-stagger] > * { transition: opacity .8s var(--calm), translate .8s var(--calm); }
  .motion [data-stagger]:not(.in) > * { opacity: 0; translate: 0 20px; }
  .motion [data-stagger] > :nth-child(2) { transition-delay: .09s; }
  .motion [data-stagger] > :nth-child(3) { transition-delay: .18s; }
  .motion [data-stagger] > :nth-child(4) { transition-delay: .27s; }
  .motion [data-stagger] > :nth-child(5) { transition-delay: .36s; }
  .motion [data-stagger] > :nth-child(6) { transition-delay: .45s; }
  .motion .bento.in .b-photo > img { animation: drift-photo 2.4s var(--calm) both; }

  .motion .steps::before { transform: scaleY(var(--progress, 0)); }

  /* Closed book, centred on its right half; the cover turns over as it arrives. */
  .motion .book { transition: translate 1.5s var(--calm) .25s; }
  .motion .cover { transition: transform 1.6s var(--calm) .25s; }
  .motion .book-art:not(.in) .book { translate: -25% 0; }
  .motion .book-art:not(.in) .cover { transform: rotateY(0deg); }

  /* Opa Wim asks; the owner approves a moment after the card arrives. */
  .motion .share-card .ok { transition: opacity .5s var(--calm) 2.2s; }
  .motion .share-card .ask { transition: opacity .4s var(--calm) 1.9s; }
  .motion .share-card:not(.in) .ok { opacity: 0; }
  .motion .share-card:not(.in) .ask { opacity: 1; }

  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--calm), content-visibility .45s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker { flex-wrap: wrap; justify-content: center; }
  .ticker-run { flex-wrap: wrap; justify-content: center; white-space: normal; }
}

@media print {
  .motion [data-reveal], .motion [data-stagger] > * { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}

@media (max-width: 1320px) { .stage { --k: .86px; } .phone-hero { --s: .78; } .story-layout { max-width: 1040px; } }

@media (max-width: 1100px) {
  .stage { --k: .72px; height: calc(var(--k) * 830); }
  .phone-hero { --s: .68; }
  .bento { grid-auto-rows: 170px; }
  .b-tall { grid-column: span 6; }
  .b-quote { grid-column: span 6; }
  .b-drawing { grid-column: span 6; }
  .b-audio { grid-column: span 6; }
  .b-milestone { grid-column: span 6; }
  .b-video { grid-column: span 12; grid-row: span 2; }
  .page::after, .hero-sprig { display: none; }
  .privacy-band > .sprig { display: none; }
}

@media (max-width: 860px) {
  .nav .nav-cta { display: none; }
  .nav { gap: 18px; font-size: 14px; }
  .flower { display: none; }
  .story-layout, .keepsake, .privacy-layout, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .story-phone { position: static; }
  .phone-story { --s: .7; }
  .steps li { padding-bottom: 44px; }
  .privacy-points { gap: 20px; }
  .cta-card { border-radius: 28px; }
  .cta-card .sprig { top: 18px; }
  .cta-card .sprig-sprig-buds { width: 82px; }
  .cta-card .sprig-branch-sparkle { width: 100px; }
  .heart-stroke { stroke-width: 5; }
  .line-scene { padding-bottom: 56px; }
  .site-footer .wrap { flex-direction: column; }
}

@media (max-width: 680px) {
  .stage { --k: 1px; height: 590px; margin-top: 36px; }
  .phone-hero { --s: .62; padding: 7px; border-radius: 40px; }
  .phone-hero .screens { border-radius: 34px; }
  .p-baby, .p-drawing { display: none; }
  .p-laugh { --l: -232; --t: 44; --w: 142; --fx: 150px; }
  .p-beach { --l: 88; --t: 26; --w: 186; --fx: -120px; }
  .p-note { --l: -192; --t: 372; --w: 186; --fx: 120px; z-index: 3 !important; }
  .p-audio { --l: -46; --t: 524; --w: 232; --fy: -80px; --fx: 0px; }
  .note p:last-child { font-size: 24px; }
  .print figcaption { font-size: 17px; }
  .bento { grid-auto-rows: auto; grid-template-columns: 1fr; }
  .bento-card { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 240px; }
  .b-photo { min-height: 340px; }
  .b-audio .waveform { overflow: hidden; }
  .privacy-points { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .cta-card h2 { font-size: 2.15rem; }
  .site-header { position: static; }
  .site-header .wrap { flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  .cta .wrap { padding-inline: 12px; }
}