/* Remembrance — by My Front Page. Classic theme (ivory / warm charcoal / muted gold). */
:root {
  --bg: #F7F3EE;
  --bg-2: #EFE8DF;
  --card: #FFFDFA;
  --ink: #3A3532;
  --ink-soft: #6E655F;
  --line: #E2D8CC;
  --accent: #B08D57;
  --accent-deep: #8C6C3D;
  --accent-soft: #EADFCB;
  --ok: #5E8B6A;
  --warn: #B9874A;
  --sea: #CFDCE3;
  --land: #E9E1D3;
  --header-h: 64px;
  --footer-h: 58px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* no double-tap zoom */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}
a { color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: .005em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Locked header & footer ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(247, 243, 238, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 26px; line-height: 1; }
.brand-by { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn-primary { gap: .3em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  text-decoration: none; color: var(--ink); cursor: pointer;
  font-size: 16px; font-weight: 600; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #FBF8F3; }
.btn-primary:hover { background: #2A2624; }
.btn-gold { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-gold:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { border-color: var(--line); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 18px; }
.view-toggle { display: none; height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.has-toggle .view-toggle { display: inline-flex; }

.site-footer {
  position: fixed; inset: auto 0 0 0; height: var(--footer-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px 0 28px; font-size: 14px; color: var(--ink-soft);
  background: rgba(239, 232, 223, .96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.foot-nav { display: flex; align-items: center; gap: 6px; }
.foot-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.foot-btn svg { width: 19px; height: 19px; flex: none; color: var(--accent-deep); }
@media (hover: hover) { .foot-btn:hover { background: var(--card); border-color: var(--line); } }
.foot-primary { background: var(--ink); color: #FBF8F3; }
.foot-primary svg { color: #E8D3AE; }
@media (hover: hover) { .foot-primary:hover { background: #2A2624; border-color: #2A2624; } }
.foot-btn:active { transform: scale(.96); }
.foot-view { display: none; border-color: var(--line); background: var(--card); }
.has-toggle .foot-view { display: inline-flex; }
.foot-view[aria-pressed="true"] svg { color: var(--ink); }

main.page { padding-top: var(--header-h); padding-bottom: var(--footer-h); }

/* ---------- Landing hero ---------- */
.hero {
  min-height: min(calc(100vh - var(--header-h) - var(--footer-h)), 900px);
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 40px;
  padding: 40px 6vw 48px; max-width: 1440px; margin: 0 auto;
}
.eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.hero h1 { font-size: clamp(54px, 6vw, 88px); margin: 14px 0 6px; }
.beats { position: relative; height: 1.6em; margin-bottom: 4px; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); color: var(--ink-soft); }
.beat { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.beat.on { opacity: 1; transform: none; }
.hero-lede { max-width: 520px; color: var(--ink-soft); margin: 10px 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.price-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 6px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 14px; }

/* The animated "life journal" stage */
.stage {
  position: relative; aspect-ratio: 16 / 11; width: 100%;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, #FBF8F3 0%, #F1E9DD 100%);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(58, 53, 50, .35);
}
.stage svg.journey { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 3.2s var(--ease); }
.stage .path-trip { stroke: #7FA3B8; stroke-dasharray: 6 9; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s var(--ease) .6s; }
.stage[data-beat="2"] .path, .stage[data-beat="3"] .path, .stage[data-beat="4"] .path { stroke-dashoffset: 0; }
.stage[data-beat="2"] .path-trip, .stage[data-beat="3"] .path-trip, .stage[data-beat="4"] .path-trip { opacity: .9; }
.stage .land { fill: var(--land); }
.stage .sea-wave { fill: none; stroke: #D9E3E8; stroke-width: 2; }

.pin { position: absolute; transform: translate(-50%, -100%) scale(.6); opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); text-align: center; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); margin: 0 auto; }
.pin-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 9px 3px 4px; background: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0,0,0,.18); }
.flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.stage[data-beat="2"] .pin, .stage[data-beat="3"] .pin, .stage[data-beat="4"] .pin { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.pin:nth-of-type(2) { transition-delay: .5s; } .pin:nth-of-type(3) { transition-delay: 1.1s; } .pin:nth-of-type(4) { transition-delay: 1.7s; } .pin:nth-of-type(5) { transition-delay: 2.3s; }

.photo {
  position: absolute; width: 22%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: #fff; padding: 6px 6px 22px; box-shadow: 0 14px 28px -12px rgba(58,53,50,.45);
  opacity: 0; transform: translateY(18px) rotate(var(--r, -3deg)) scale(.92);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.photo .img { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; }
.photo .img svg { width: 100%; height: 100%; display: block; animation: drift 12s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.photo .cap { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-family: var(--serif); font-size: 13px; color: var(--ink-soft); }
.stage[data-beat="1"] .photo, .stage[data-beat="2"] .photo { opacity: 1; transform: rotate(var(--r, -3deg)); }
.stage[data-beat="2"] .photo { opacity: .35; }
.photo:nth-of-type(2) { transition-delay: .35s; } .photo:nth-of-type(3) { transition-delay: .7s; }
@keyframes drift { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.16) translate(-3%, -2%); } }

.badge {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff;
  box-shadow: 0 16px 30px -16px rgba(58,53,50,.45); font-weight: 600; font-size: 14.5px;
  opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.badge small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; line-height: 1.3; }
.badge .medal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); flex: none; }
.stage[data-beat="3"] .badge { opacity: 1; transform: none; }
.badge:nth-of-type(2) { transition-delay: .45s; } .badge:nth-of-type(3) { transition-delay: .9s; }

.share {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  opacity: 0; transition: opacity 1s var(--ease); pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(251,248,243,.96) 0%, rgba(251,248,243,.88) 60%, rgba(251,248,243,.6) 100%);
}
.stage[data-beat="4"] .share { opacity: 1; }
.share-card { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -20px rgba(58,53,50,.5); transform: scale(.9); transition: transform 1s var(--ease) .2s; }
.stage[data-beat="4"] .share-card { transform: none; }
.share-card .url { font-weight: 700; color: var(--ink); font-size: 15px; }
.share-card .t { font-family: var(--serif); font-size: 22px; }
.family { display: flex; gap: 22px; justify-content: center; margin-top: 26px; }
.person { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; position: relative; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.person::after { content: "♥"; position: absolute; right: -4px; top: -6px; font-size: 16px; color: #C46B6B; opacity: 0; transition: opacity .6s var(--ease) 1.4s; }
.stage[data-beat="4"] .person { opacity: 1; transform: none; }
.stage[data-beat="4"] .person::after { opacity: 1; }
.person:nth-child(2) { transition-delay: .5s; } .person:nth-child(3) { transition-delay: .8s; } .person:nth-child(4) { transition-delay: 1.1s; }

.stage-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.stage-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(58,53,50,.22); cursor: pointer; transition: background .3s, width .3s; }
.stage-dots button.on { background: var(--accent); width: 24px; border-radius: 6px; }

/* ---------- Landing sections ---------- */
.section { max-width: 1200px; margin: 0 auto; padding: 72px 6vw; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(36px, 3.4vw, 50px); margin: 10px 0 8px; }
.section-head p { color: var(--ink-soft); margin: 0; }
.purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.purpose-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
  padding: 24px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.purpose-card.wide { grid-column: span 2; }
.purpose-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 22px 40px -26px rgba(58,53,50,.5); }
.purpose-card h3 { font-size: 24px; }
.purpose-card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.purpose-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.purpose-icon svg { width: 30px; height: 30px; display: block; margin: 0; flex: none; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: s; }
.step3 { padding: 30px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.step3::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; margin-bottom: 14px; }
.step3 h3 { font-size: 26px; margin-bottom: 6px; }
.step3 p { margin: 0; color: var(--ink-soft); }
.reassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reassure div { padding: 22px; border-top: 2px solid var(--accent); }
.reassure strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.reassure span { color: var(--ink-soft); font-size: 15px; }
.cta-band { text-align: center; padding: 70px 6vw 90px; background: var(--bg-2); }
.cta-band h2 { font-size: clamp(36px, 3.6vw, 54px); margin-bottom: 18px; }
.director { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.director h2 { font-size: 38px; margin-bottom: 8px; }
.director p { color: var(--ink-soft); margin: 0 0 18px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Story builder (full screen) ---------- */
body.builder { overflow: hidden; }
.builder-main {
  position: fixed; top: var(--header-h); bottom: var(--footer-h); left: 0; right: 0;
  display: grid; grid-template-rows: auto 1fr;
}
.progress { padding: 14px 40px 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.progress-top strong { color: var(--ink); font-weight: 700; }
.track { position: relative; height: 22px; }
.track-line { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); border-radius: 2px; }
.track-fill { position: absolute; left: 0; top: 10px; height: 2px; width: 0; background: var(--accent); border-radius: 2px; transition: width 1s var(--ease); }
.track-pin { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.track-pin.done { background: var(--accent); border-color: var(--accent); }
.track-pin.now { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(176,141,87,.2); }
.track-traveller { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: left 1s var(--ease); }
.progress.halfway .track-fill { box-shadow: 0 0 12px rgba(176,141,87,.8); }

.builder-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.q-pane { position: relative; overflow: hidden auto; padding: 32px 56px 32px; }
.preview-pane { position: relative; padding: 36px 44px; background: var(--bg-2); border-left: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }

.q { max-width: 640px; animation: qIn .6s var(--ease) both; }
.q.out { animation: qOut .45s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes qOut { to { opacity: 0; transform: translateX(-28px); } }
.q h1 { font-size: clamp(36px, 3vw, 46px); margin-bottom: 8px; }
.q .hint { color: var(--ink-soft); margin: 0 0 22px; }
.q-actions { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.skip { background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: 15px; }
.back { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; padding: 0; margin-bottom: 18px; }
.back:hover { color: var(--ink); }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.choice {
  display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; min-height: 84px;
  border-radius: 18px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  animation: cardIn .7s var(--ease) both;
}
.choice:nth-child(2) { animation-delay: .07s; } .choice:nth-child(3) { animation-delay: .14s; } .choice:nth-child(4) { animation-delay: .21s; } .choice:nth-child(5) { animation-delay: .28s; } .choice:nth-child(6) { animation-delay: .35s; } .choice:nth-child(7) { animation-delay: .42s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.choice:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(58,53,50,.55); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: #FFF9EE; box-shadow: 0 0 0 3px rgba(176,141,87,.22); }
.choice .purpose-icon { flex: none; }
.choice strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.2; }
.choice .ctext > span { display: block; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; margin-top: 3px; }
.choice.wide { grid-column: span 2; }

.field { display: block; margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.input {
  width: 100%; height: 62px; padding: 0 20px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; font: inherit; font-size: 22px; color: var(--ink); transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(176,141,87,.18); }
.input-sm { height: 54px; font-size: 19px; }
.row2 { display: grid; grid-template-columns: 180px 1fr; gap: 14px; }

.address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px dashed var(--line); font-size: 16px; }
.address .host { font-weight: 700; word-break: break-all; }
.address .host input { font: inherit; font-weight: 700; border: 0; border-bottom: 1.5px solid var(--accent); background: transparent; color: var(--ink); width: 13ch; min-width: 6ch; padding: 0 2px; }
.address .host input:focus { outline: none; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.status.ok { background: #E6F0E8; color: var(--ok); }
.status.warn { background: #F6EBDC; color: var(--warn); }
.status.wait { background: #EEE9E2; color: var(--ink-soft); }
.suggest { margin-top: 12px; }
.suggest p { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; transition: border-color .3s, background .3s; }
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--accent); background: #FFF9EE; }

.cheer { min-height: 30px; margin-top: 18px; font-family: var(--serif); font-size: 22px; color: var(--accent-deep); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cheer.on { opacity: 1; transform: none; }

/* Live preview of their page */
.mini { width: 100%; max-width: 560px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(58,53,50,.5); border: 1px solid var(--line); }
.mini-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F3EEE7; border-bottom: 1px solid var(--line); }
.mini-bar i { width: 10px; height: 10px; border-radius: 50%; background: #DDD3C6; display: inline-block; }
.mini-url { flex: 1; margin-left: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-url b { color: var(--ink); }
.mini-hero { position: relative; height: 270px; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; background: linear-gradient(150deg, #6E5F52, #3A3532); transition: background 1.2s var(--ease); }
.mini-hero[data-purpose="celebrate"] { background: linear-gradient(150deg, #B9874A, #6E4F2A); }
.mini-hero[data-purpose="own"] { background: linear-gradient(150deg, #5F7A86, #2F4048); }
.mini-hero[data-purpose="history"] { background: linear-gradient(150deg, #7C7A5C, #3E3D2C); }
.mini-hero[data-purpose="other"] { background: linear-gradient(150deg, #7E6A80, #3E3240); }
.mini-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(0,0,0,.35) 100%); }
.mini-portrait { position: absolute; inset: 0; opacity: .09; animation: drift 14s ease-in-out infinite alternate; }
.mini-portrait svg { width: 100%; height: 100%; }
.mini-text { position: relative; z-index: 1; padding: 0 20px; }
.mini-title { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; min-height: 18px; }
.mini-name { font-family: var(--serif); font-size: 42px; line-height: 1.05; margin: 8px 0 6px; min-height: 46px; }
.mini-name.placeholder { opacity: .45; font-style: italic; }
.mini-years { font-size: 15px; opacity: .9; min-height: 22px; letter-spacing: .06em; }
.mini-body { padding: 18px 20px 22px; }
.mini-sec { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.mini-map { position: relative; height: 120px; border-radius: 10px; overflow: hidden; background: var(--sea); }
.mini-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-pin { position: absolute; left: 30%; top: 66%; transform: translate(-50%, -100%) scale(0); transition: transform .8s cubic-bezier(.34,1.56,.64,1); }
.mini-pin.on { transform: translate(-50%, -100%) scale(1); }
.mini-pin .pin-label { font-size: 11.5px; }
.mini-skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mini-skeleton div { height: 54px; border-radius: 8px; background: linear-gradient(90deg, #F3EEE7 0%, #FAF7F2 50%, #F3EEE7 100%); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.preview-note { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.typeset span { opacity: 0; display: inline-block; animation: letter .5s var(--ease) forwards; }
@keyframes letter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.done-card { text-align: left; }
.done-list { list-style: none; padding: 0; margin: 16px 0 0; }
.done-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; color: var(--ink-soft); }
.done-list li b { color: var(--ink); }

/* ---------- Mobile view (only when the visitor switches to it) ---------- */
@media (max-width: 860px) {
  :root { --header-h: 58px; --footer-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .site-header { padding: 0 16px; }
  .header-actions .view-toggle { display: none !important; }
  .site-footer { padding: 0 6px env(safe-area-inset-bottom, 0px); justify-content: center; }
  .site-footer .copy { display: none; }
  .foot-nav { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
  .foot-btn { flex-direction: column; justify-content: center; gap: 3px; height: 56px; padding: 0 2px; border-radius: 14px; font-size: 11.5px; line-height: 1.1; text-align: center; }
  .foot-btn svg { width: 23px; height: 23px; }
  .foot-view { border-color: transparent; background: transparent; }
  .foot-primary { background: var(--ink); }
  .brand-by { display: none; }
  .brand-name { font-size: 22px; }
  .header-actions .btn-ghost { display: none; }
  .hero { grid-template-columns: 1fr; padding: 28px 16px 40px; gap: 26px; }
  .hero h1 { font-size: 44px; }
  .beats { font-size: 24px; }
  .header-actions .btn-primary { height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .header-actions .long { display: none; }
  .stage { aspect-ratio: 4 / 3.4; }
  .pin-label { font-size: 10px; padding: 2px 7px 2px 3px; gap: 4px; }
  .pin-label .flag { width: 15px; height: 10px; }
  .photo { width: 30%; padding: 4px 4px 16px; }
  .photo .cap { font-size: 10px; }
  .badge { font-size: 12px; padding: 7px 10px 7px 7px; gap: 7px; }
  .badge .medal { width: 26px; height: 26px; }
  .badge small { font-size: 10.5px; }
  .share-card .t { font-size: 18px; }
  .share-card .url { font-size: 12.5px; }
  .person { width: 40px; height: 40px; }
  .family-note { font-size: 16px; }
  .section { padding: 54px 16px; }
  .purpose-grid { grid-template-columns: 1fr; }
  .purpose-card.wide { grid-column: auto; }
  .steps3, .reassure { grid-template-columns: 1fr; }
  .director { grid-template-columns: 1fr; padding: 24px; }
  .builder-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .q-pane { padding: 26px 16px 24px; }
  .preview-pane { padding: 12px 16px; border-left: 0; border-top: 1px solid var(--line); }
  .preview-note { display: none; }
  .mini-hero { height: 120px; }
  .mini-name { font-size: 28px; min-height: 30px; margin: 4px 0; }
  .mini-body { display: none; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice.wide { grid-column: auto; }
  .progress { padding: 10px 16px 8px; }
  #timeLeft { display: none; }
  .header-actions #saved { display: none; }
  .row2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; transition-delay: 0s !important; }
}

/* Beat 3: fade the map pins so the achievements are the focus */
.stage[data-beat="3"] .pin { opacity: .28; transition-delay: 0s; }
.family-note { margin: 14px 0 0; font-family: var(--serif); font-size: 20px; color: var(--ink-soft); opacity: 0; transition: opacity .8s var(--ease) 1.6s; }
.stage[data-beat="4"] .family-note { opacity: 1; }

/* ---------- A person's page (stage 1 placeholder) ---------- */
.person-hero {
  position: relative; min-height: calc(100vh - var(--header-h) - var(--footer-h));
  display: grid; place-items: center; text-align: center; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, #6E5F52, #3A3532);
}
.person-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.4) 100%); }
.person-portrait { position: absolute; inset: 0; opacity: .08; animation: drift 16s ease-in-out infinite alternate; }
.person-portrait svg { width: 100%; height: 100%; }
.person-text { position: relative; z-index: 1; padding: 40px 6vw; max-width: 900px; opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.person-hero[data-state="ready"] .person-text { opacity: 1; transform: none; }
.person-title { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.person-name { font-size: clamp(48px, 7vw, 96px); margin: 14px 0 8px; }
.person-years { font-size: 18px; letter-spacing: .1em; opacity: .9; }
.person-note { max-width: 560px; margin: 26px auto 26px; opacity: .85; }

/* ---------- Mobile view: compact chrome so the content gets the room ---------- */
@media (max-width: 860px) {
  :root { --header-h: 50px; --footer-h: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .site-header { padding: 0 12px; }
  .brand { gap: 9px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 20px; }
  .header-actions .btn-primary, .header-actions .btn { height: 34px; padding: 0 14px; font-size: 14px; }
  .foot-btn { height: 48px; gap: 2px; font-size: 11px; border-radius: 12px; }
  .foot-btn svg { width: 21px; height: 21px; }

  /* Story builder */
  .progress { padding: 6px 14px 4px; }
  .progress-top { font-size: 12.5px; margin-bottom: 2px; }
  .track { height: 16px; }
  .track-line, .track-fill { top: 7px; }
  .track-pin { top: 3px; width: 10px; height: 10px; margin-left: -5px; }
  .track-traveller { top: 1px; width: 14px; height: 14px; margin-left: -7px; border-width: 2px; }
  .q-pane { padding: 16px 14px 18px; }
  .q h1 { font-size: 29px; margin-bottom: 4px; }
  .q .hint { font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
  .back { margin-bottom: 8px; }
  .choice-grid { gap: 9px; }
  .choice { min-height: 0; padding: 10px 12px; gap: 12px; border-radius: 14px; }
  .choice .purpose-icon { width: 40px; height: 40px; border-radius: 12px; }
  .choice .purpose-icon svg { width: 22px; height: 22px; }
  .choice strong { font-size: 19px; }
  .choice .ctext > span { font-size: 13.5px; line-height: 1.35; margin-top: 1px; }
  .q-actions { margin-top: 16px; }
  .btn-lg { height: 48px; padding: 0 24px; font-size: 17px; }
  .input { height: 52px; font-size: 19px; }
  .cheer { margin-top: 10px; font-size: 19px; }

  /* Live preview becomes a slim strip */
  .preview-pane { padding: 6px 12px 8px; }
  .mini { border-radius: 12px; box-shadow: 0 10px 24px -18px rgba(58,53,50,.6); }
  .mini-bar { padding: 5px 10px; }
  .mini-bar i { display: none; }
  .mini-url { margin-left: 0; padding: 2px 10px; font-size: 12px; }
  .mini-hero { height: 62px; }
  .mini-portrait { display: none; }
  .mini-title { font-size: 9.5px; letter-spacing: .16em; min-height: 0; }
  .mini-name { font-size: 22px; min-height: 0; margin: 2px 0 0; }
  .mini-years { font-size: 11px; min-height: 0; }

  /* Home */
  .hero { padding: 20px 16px 32px; gap: 20px; }
  .hero h1 { font-size: 40px; margin: 8px 0 4px; }
  .section { padding: 40px 16px; }
}

/* ---------- Desktop view on phones / small tablets (861–1100px wide) ---------- */
@media (min-width: 861px) and (max-width: 1100px) {
  .builder-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
  .q-pane { padding: 28px 32px; }
  .preview-pane { padding: 46px 22px 28px; align-items: flex-start; }
  .choice-grid { grid-template-columns: 1fr; gap: 10px; }
  .choice { min-height: 0; padding: 12px 16px; }
  .choice strong { font-size: 21px; }
  .choice .ctext > span { font-size: 15px; }
  .hero-cta { flex-wrap: nowrap; }
}

/* ---------- Voice stories (microphone + AI proofread) ---------- */
.voice { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.mic {
  position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(140,108,61,.7); transition: background .3s var(--ease), transform .2s var(--ease);
}
.mic svg { width: 30px; height: 30px; display: block; }
.mic:active { transform: scale(.95); }
.mic[data-state="recording"] { background: #B5523F; }
.mic[data-state="recording"]::before, .mic[data-state="recording"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #B5523F; animation: micPulse 1.6s ease-out infinite;
}
.mic[data-state="recording"]::after { animation-delay: .8s; }
@keyframes micPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.mic[data-state="busy"] { background: var(--ink-soft); cursor: progress; }
.mic[data-state="busy"] svg { animation: micBusy 1.2s ease-in-out infinite alternate; }
@keyframes micBusy { from { opacity: .4; } to { opacity: 1; } }
.voice-text strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; }
.voice-text span { display: block; color: var(--ink-soft); font-size: 14.5px; }
textarea.input.story { height: auto; min-height: 150px; padding: 14px 16px; font-size: 18px; line-height: 1.6; resize: vertical; }
.ai-note { margin: 4px 0 6px; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.ai-note.ok { background: #EAF2EC; color: #3E6B4C; }
.ai-note.info { background: var(--bg-2); color: var(--ink-soft); }
.ai-note.warn { background: #F7EBDD; color: #8A5A27; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ai-diff { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; color: var(--ink); }
.ai-diff mark { background: #FFE9B8; color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 860px) {
  .voice { padding: 10px 12px; gap: 12px; }
  .mic { width: 58px; height: 58px; }
  .voice-text strong { font-size: 19px; }
  .voice-text span { font-size: 13px; }
  textarea.input.story { min-height: 120px; font-size: 17px; }
}
.btn { white-space: nowrap; }

.ai-note .encourage { margin: 0 0 6px; font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink); }
@media (max-width: 860px) { .ai-note .encourage { font-size: 19px; } }

/* ---------- Comforting motion in the story builder ---------- */
.track { overflow: visible; }
.track-glow { position: absolute; top: 10px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,196,128,.9) 0%, rgba(232,196,128,0) 70%); animation: trackGlow 2s ease-out forwards; pointer-events: none; }
@keyframes trackGlow { from { transform: scale(1); opacity: .9; } to { transform: scale(7); opacity: 0; } }
.mote { position: absolute; top: 8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; pointer-events: none;
  background: #E8C480; box-shadow: 0 0 8px 2px rgba(232,196,128,.7); opacity: 0; animation: moteRise 2.8s ease-out forwards; }
@keyframes moteRise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .95; }
  100% { transform: translate(var(--drift, 0), -30px) scale(1.1); opacity: 0; } }
/* While the AI reads the story: a slow, calm breath instead of a spinner */
.mic[data-state="busy"] { background: var(--accent); animation: breathe 4.4s ease-in-out infinite; cursor: progress; }
.mic[data-state="busy"] svg { animation: none; opacity: .9; }
.mic[data-state="busy"]::before { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,196,128,.45), rgba(232,196,128,0) 70%); animation: breatheHalo 4.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes breatheHalo { 0%, 100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.35); opacity: 1; } }
/* The story floating into the live preview */
.float-card { position: fixed; z-index: 80; padding: 12px 14px; border-radius: 12px; background: #FFFDF8;
  box-shadow: 0 18px 40px -18px rgba(58,53,50,.55); font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink); pointer-events: none; }
.mini.received { animation: received 1.6s ease-out .9s; }
@keyframes received { 0% { box-shadow: 0 30px 60px -30px rgba(58,53,50,.5), 0 0 0 0 rgba(232,196,128,0); }
  40% { box-shadow: 0 30px 60px -30px rgba(58,53,50,.5), 0 0 0 10px rgba(232,196,128,.45); }
  100% { box-shadow: 0 30px 60px -30px rgba(58,53,50,.5), 0 0 0 22px rgba(232,196,128,0); } }
.ai-note { animation: noteIn .7s cubic-bezier(.4,0,.2,1) both; }
@keyframes noteIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ai-note .encourage { animation: encourageIn 1.2s cubic-bezier(.4,0,.2,1) .15s both; }
@keyframes encourageIn { from { opacity: 0; letter-spacing: .02em; } to { opacity: 1; letter-spacing: 0; } }

.site-footer .copy a { color: inherit; font-weight: 600; text-decoration: none; }

/* ---------- First visit on a phone: choose a view ---------- */
.view-ask { position: fixed; inset: 0 0 var(--footer-h) 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: rgba(58, 53, 50, .45); animation: askIn .45s ease both; }
.view-ask.closing { animation: askOut .35s ease both; }
@keyframes askIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes askOut { to { opacity: 0; } }
.view-ask-card { width: min(560px, 100%); padding: 28px 24px 22px; border-radius: 22px; background: var(--card); text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); animation: cardRise .6s cubic-bezier(.4,0,.2,1) both; }
@keyframes cardRise { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.view-ask-card h2 { font-size: 34px; margin-bottom: 6px; }
.view-ask-card > p { color: var(--ink-soft); margin: 0 0 18px; font-size: 18px; }
.view-ask-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.view-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; border-radius: 18px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); transition: border-color .3s, background .3s, transform .2s; }
.view-opt svg { width: 46px; height: 46px; color: var(--accent-deep); }
.view-opt strong { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.view-opt span { color: var(--ink-soft); font-size: 15px; line-height: 1.35; }
.view-opt:active { transform: scale(.97); }
@media (hover: hover) { .view-opt:hover { border-color: var(--accent); background: #FFF9EE; } }
.view-ask-hint { margin: 16px 0 0 !important; font-size: 15.5px !important; }
.view-ask-pointer { position: fixed; z-index: 91; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  color: #FBF8F3; font-weight: 700; font-size: 15px; pointer-events: none; animation: pointerBob 1.6s ease-in-out infinite; }
.view-ask-pointer span { padding: 6px 12px; border-radius: 999px; background: var(--ink); white-space: nowrap; }
.view-ask-pointer svg { width: 34px; height: 34px; color: var(--ink); filter: drop-shadow(0 2px 3px rgba(255,255,255,.6)); }
@keyframes pointerBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
html.asking-view .site-footer { z-index: 92; }
.foot-highlight { position: relative; background: #FFF4DF !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(176,141,87,.25); }
@media (max-width: 860px) {
  .view-ask-card { padding: 22px 16px 18px; }
  .view-ask-card h2 { font-size: 27px; }
  .view-ask-card > p { font-size: 16px; }
  .view-opt { padding: 16px 8px; }
  .view-opt svg { width: 38px; height: 38px; }
  .view-opt strong { font-size: 20px; }
  .view-opt span { font-size: 13.5px; }
}
/* In desktop layout on a phone the page is scaled down, so make the chooser big enough to read and tap. */
html.has-toggle[data-view="desktop"] .view-ask-card { width: min(880px, 100%); padding: 44px 40px 34px; border-radius: 30px; }
html.has-toggle[data-view="desktop"] .view-ask-card h2 { font-size: 54px; }
html.has-toggle[data-view="desktop"] .view-ask-card > p { font-size: 26px; margin-bottom: 26px; }
html.has-toggle[data-view="desktop"] .view-ask-options { gap: 20px; }
html.has-toggle[data-view="desktop"] .view-opt { padding: 34px 18px; border-radius: 26px; gap: 10px; }
html.has-toggle[data-view="desktop"] .view-opt svg { width: 76px; height: 76px; }
html.has-toggle[data-view="desktop"] .view-opt strong { font-size: 38px; }
html.has-toggle[data-view="desktop"] .view-opt span { font-size: 22px; }
html.has-toggle[data-view="desktop"] .view-ask-hint { font-size: 23px !important; margin-top: 24px !important; }
html.has-toggle[data-view="desktop"] .view-ask-pointer { font-size: 22px; }
html.has-toggle[data-view="desktop"] .view-ask-pointer span { padding: 10px 18px; }
html.has-toggle[data-view="desktop"] .view-ask-pointer svg { width: 50px; height: 50px; }

/* ---------- Save & share step (free for 30 days → $20 to keep) ---------- */
.plan { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 12px; }
.plan-step { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  animation: cardIn .7s var(--ease) both; }
.plan-step:nth-child(2) { animation-delay: .12s; } .plan-step:nth-child(3) { animation-delay: .24s; }
.plan-step > .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
.plan-step strong { display: block; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.2; }
.plan-step div > span { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-top: 3px; }
.plan-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.plan-icon svg { width: 20px; height: 20px; display: block; }
.plan-step.done .plan-icon { background: #E6F0E8; color: var(--ok); }
.plan-step.locked { background: #FBF8F3; }
.plan-step.locked .plan-icon { background: var(--bg-2); color: var(--ink-soft); }
.plan-step .btn svg { width: 16px; height: 16px; }
.save-note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); color: var(--ink-soft); font-size: 15px; animation: noteIn .6s ease both; }
@media (max-width: 860px) {
  .plan-step { padding: 12px; gap: 4px 12px; }
  .plan-step strong { font-size: 20px; }
  .plan-step div > span { font-size: 14px; }
}

/* ---------- From the album, kept safe ---------- */
.album { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.album h2 { font-size: clamp(36px, 3.4vw, 50px); margin: 10px 0 10px; }
.album p { color: var(--ink-soft); margin: 0 0 16px; }
.album-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.album-points li { position: relative; padding-left: 30px; }
.album-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--accent); }
.album-art { position: relative; height: 360px; }
.album-book { position: absolute; left: 4%; top: 12%; width: 74%; height: 76%; border-radius: 10px; background: #6E5A48;
  box-shadow: 0 30px 50px -28px rgba(58,53,50,.7); transform: rotate(-4deg); padding: 14px; }
.album-page { width: 100%; height: 100%; border-radius: 4px; background: #F1E8DA; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.ap { border-radius: 2px; background: #D8C9B1; box-shadow: inset 0 0 0 5px #FBF6EC; }
.ap1 { background: #CBB79A; } .ap2 { background: #B9C3B0; } .ap3 { background: #C9B5A6; } .ap4 { background: #E0D3BF; }
.album-out { position: absolute; right: 2%; top: 24%; width: 52%; background: #fff; padding: 10px 10px 34px; border-radius: 6px;
  box-shadow: 0 30px 50px -22px rgba(58,53,50,.55); transform: rotate(5deg); }
.album-out svg { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 3px; }
.album-out em { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--serif); font-style: normal; font-size: 16px; color: var(--ink-soft); }
.album.reveal .album-out { opacity: 0; transform: translate(-46%, 10%) rotate(-4deg) scale(.8); transition: opacity 1s var(--ease) .3s, transform 1.6s var(--ease) .3s; }
.album.reveal.in .album-out { opacity: 1; transform: rotate(5deg); }
.album.reveal.in .album-out svg { animation: drift 12s ease-in-out 1.8s infinite alternate; }
@media (max-width: 860px) {
  .album { grid-template-columns: 1fr; gap: 20px; }
  .album-art { height: 250px; }
}

/* ---------- Photo: camera / album, crop & position ---------- */
.photo-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 16px;
  border-radius: 18px; border: 1.5px dashed var(--accent); background: var(--card); color: var(--ink); font-weight: 700; font-size: 17px; cursor: pointer;
  transition: background .3s, transform .2s; text-align: center; }
.pick-btn svg { width: 36px; height: 36px; color: var(--accent-deep); }
.pick-btn:active { transform: scale(.97); }
@media (hover: hover) { .pick-btn:hover { background: #FFF9EE; } }
.photo-pick.small .pick-btn { min-height: 0; flex-direction: row; padding: 10px 14px; font-size: 15px; }
.photo-pick.small .pick-btn svg { width: 22px; height: 22px; }
.photo-edit { animation: noteIn .6s ease both; }
.crop-stage { position: relative; height: 340px; border-radius: 16px; overflow: hidden; background: #2E2A27; touch-action: none; cursor: grab; user-select: none; }
.crop-stage.dragging { cursor: grabbing; }
.crop-canvas { position: absolute; inset: 0; display: block; }
.crop-frame { position: absolute; border: 2px solid #fff; border-radius: 4px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20,17,15,.55); transition: left .3s, top .3s, width .3s, height .3s; }
.crop-grid { position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.55) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255,255,255,.55) 66.6%, transparent 66.9%),
              linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.55) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255,255,255,.55) 66.6%, transparent 66.9%); }
.crop-stage.dragging .crop-grid { opacity: 1; }
.crop-tools { margin-top: 12px; display: grid; gap: 10px; }
.crop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip.tool { display: inline-flex; align-items: center; gap: 6px; }
.chip.tool svg { width: 18px; height: 18px; color: var(--accent-deep); }
.zoom { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.zoom input { flex: 1; accent-color: var(--accent); }
.crop-hint { margin: 0; font-size: 14px; color: var(--ink-soft); }
.rend { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #EAF2EC; color: #3E6B4C; font-size: 15px; line-height: 1.5; animation: noteIn .6s ease both; }
.rend-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rend-list span { padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 13px; }
.mini-hero.has-photo { background-size: cover; background-position: center; }
.mini-hero.has-photo .mini-portrait { display: none; }
@media (max-width: 860px) {
  .pick-btn { min-height: 96px; font-size: 15px; }
  .crop-stage { height: 260px; }
}

/* ---------- Help page ---------- */
.help { max-width: 820px; }
.help-title { font-size: clamp(40px, 4vw, 56px); margin: 10px 0 8px; }
.help-search { margin: 0 0 22px; }
.help-group { font-size: 28px; margin: 26px 0 10px; }
.help details { border-radius: 16px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; overflow: hidden; }
.help summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative; font-weight: 700; font-size: 18px; }
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(45deg); transition: transform .3s var(--ease); }
.help details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.help details p { margin: 0; padding: 0 18px 18px; color: var(--ink-soft); animation: noteIn .4s ease both; }
.help-none { color: var(--ink-soft); }
.foot-btn[aria-current="page"] { background: var(--card); border-color: var(--line); }
@media (max-width: 860px) {
  .help-group { font-size: 24px; }
  .help summary { font-size: 16.5px; padding: 14px 46px 14px 14px; }
  .help details p { padding: 0 14px 14px; font-size: 16px; }
}

/* ---------- Ways to tell their story ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool { padding: 22px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.tool h3 { font-size: 23px; margin: 12px 0 4px; }
.tool p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
@media (min-width: 861px) and (max-width: 1100px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .tools-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tool { padding: 14px; }
  .tool .purpose-icon { width: 44px; height: 44px; }
  .tool h3 { font-size: 19px; margin-top: 8px; }
  .tool p { font-size: 13.5px; }
}

/* ---------- Builder layout: question, scroll arrows, docked actions, preview ---------- */
.builder-body { position: relative; }
.q-pane { grid-row: 1; grid-column: 1; }
.preview-pane { grid-row: 1; grid-column: 2; }
.dock { display: none; }
.scroll-arrows { grid-row: 1; grid-column: 1; justify-self: end; align-self: stretch; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between; padding: 10px 10px; }
.sa-btn { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,253,250,.95);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(58,53,50,.45);
  opacity: 0; transform: scale(.8); visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.sa-btn svg { width: 24px; height: 24px; }
.sa-btn.show { opacity: 1; transform: none; visibility: visible; }
.sa-btn:active { transform: scale(.92); }
.mini-bar { width: 100%; border: 0; font: inherit; text-align: left; cursor: default; }
.mini-chev { display: none; }

/* Photo result shown in the step (static, so scrolling never moves the photo) */
.photo-result { animation: noteIn .6s ease both; }
.result-frame { border-radius: 14px; overflow: hidden; background: #2E2A27; box-shadow: 0 16px 30px -18px rgba(58,53,50,.6); }
.result-frame img { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; margin: 0 auto; }
.result-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.adjust-btn svg { width: 20px; height: 20px; color: var(--accent-deep); }
.result-shape { color: var(--ink-soft); font-size: 14px; }

/* Full-screen crop editor */
html.crop-open, html.crop-open body { overflow: hidden; }
.crop-overlay { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #1E1B19; color: #F7F3EE;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); animation: askIn .3s ease both; }
.crop-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.crop-top strong { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.crop-cancel { color: #F7F3EE; }
.crop-stage.full { flex: 1; height: auto; min-height: 0; border-radius: 0; background: #141210; }
.crop-bottom { padding: 12px 14px 14px; display: grid; gap: 10px; background: #1E1B19; }
.crop-bottom .crop-hint { color: #CFC6BB; text-align: center; }
.crop-bottom .zoom { color: #CFC6BB; }
.crop-bottom .chip { background: #2E2A27; border-color: #4A443F; color: #F7F3EE; }
.crop-bottom .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.crop-bottom .chip.tool svg { color: #E8C480; }
.crop-shapes, .crop-bottom .crop-row { justify-content: center; }

@media (max-width: 860px) {
  .builder-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; }
  .q-pane { grid-row: 1; }
  .scroll-arrows { grid-row: 1; padding: 8px 6px; }
  .sa-btn { width: 42px; height: 42px; }
  /* Continue / Skip docked just above the footer */
  .dock { display: block; grid-row: 2; grid-column: 1; padding: 12px 16px; overflow: visible; background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 18px -14px rgba(58,53,50,.5); }
  .dock[hidden] { display: none; }
  .dock .q-actions { margin: 0; padding: 2px 0; display: flex; align-items: center; gap: 10px; }
  .dock .q-actions .btn-lg { height: 46px; padding: 0 22px; font-size: 16.5px; flex: none; }
  .dock .skip { font-size: 13.5px; line-height: 1.25; text-align: left; }
  /* Preview folds to one slim line */
  .preview-pane { grid-row: 3; grid-column: 1; padding: 4px 12px 6px; }
  .mini-bar { cursor: pointer; }
  .mini-chev { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent-deep); flex: none; }
  .mini-chev svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
  .preview-pane:not(.open) .mini-hero { display: none; }
  .preview-pane:not(.open) .mini { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
  .preview-pane:not(.open) .mini-bar { border-bottom: 0; }
  .preview-pane.open .mini-chev svg { transform: rotate(180deg); }
  .preview-pane.open .mc-open { display: none; }
  .result-frame img { max-height: 40vh; }
}

/* ---------- Leave confirmation ---------- */
.leave-actions { display: grid; gap: 10px; }
.leave-actions .btn { width: 100%; }
html.has-toggle[data-view="desktop"] .leave-actions .btn { height: 74px; font-size: 26px; }

/* ---------- Story builder on phones: no site header, more room ---------- */
.exit-mini { display: none; }
@media (max-width: 860px) {
  body.builder .site-header { display: none; }
  body.builder { --header-h: 0px; }
  body.builder .builder-main { top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .progress-top { align-items: center; }
  .exit-mini { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin-left: 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; }
  .progress-top > span:first-child { flex: 1; }
}

/* ---------- Photo progress ---------- */
.photo-busy { margin: 4px 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); animation: noteIn .4s ease both; }
.busy-row { display: flex; align-items: center; gap: 10px; }
.busy-row strong { flex: 1; font-size: 16px; }
.busy-row span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 700; }
.busy-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: breathe 1.6s ease-in-out infinite; flex: none; }
.busy-track { height: 8px; margin-top: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.busy-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #E8C480); transition: width .35s var(--ease); }
.busy-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.busy-steps li::before { content: "○ "; }
.busy-steps li.now { color: var(--ink); font-weight: 700; }
.busy-steps li.now::before { content: "● "; color: var(--accent); }
.busy-steps li.done::before { content: "✓ "; color: var(--ok); }
.photo-pick.busy-on { opacity: .45; pointer-events: none; }

.busy-steps[hidden] { display: none; }
.leave-ask .view-ask-card { text-align: left; }
.leave-ask .view-ask-card h2 { text-align: center; }
.leave-ask .view-ask-card > p { text-align: center; }
.later { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.later strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.later > span { display: block; color: var(--ink-soft); font-size: 15px; margin: 2px 0 10px; }
.later-form { display: grid; gap: 8px; }
.later-form .btn { width: 100%; }
.later-note { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.leave-anyway { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--ink-soft); text-decoration: underline; font-size: 15px; cursor: pointer; }
html.has-toggle[data-view="desktop"] .later strong { font-size: 30px; }
html.has-toggle[data-view="desktop"] .later > span, html.has-toggle[data-view="desktop"] .leave-anyway { font-size: 22px; }
html.has-toggle[data-view="desktop"] .later-form .input { height: 70px; font-size: 24px; }
html.has-toggle[data-view="desktop"] .later-form .btn { height: 70px; font-size: 24px; }

/* ---------- Memories on a person's page ---------- */
.memories-sec { max-width: 980px; }
.mem-wall { columns: 2 320px; column-gap: 18px; }
.mem-card { break-inside: avoid; margin: 0 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.mem-card blockquote { margin: 0 0 12px; font-family: var(--serif); font-size: 22px; line-height: 1.4; }
.mem-card figcaption { font-weight: 700; font-size: 15px; }
.mem-card figcaption span { font-weight: 400; color: var(--ink-soft); }
.mem-private { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--ink-soft); margin: 6px 0 34px; font-size: 15.5px; }
.mem-private svg { width: 18px; height: 18px; flex: none; }
.mem-form { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 30px; max-width: 720px; margin: 0 auto; }
.mem-form h3 { font-size: 32px; margin: 0 0 4px; }
.mem-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mem-form select.input { appearance: auto; }
.field-err { display: block; color: #A2553A; font-size: 14.5px; margin-top: 6px; }
.field-err:empty { display: none; }
.mem-who { border: 0; padding: 0; margin: 0 0 20px; }
.mem-who legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.who-opt { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.who-opt:has(input:checked) { border-color: var(--accent); background: #FFF9EE; }
.who-opt input { margin-top: 4px; accent-color: var(--accent-deep); width: 18px; height: 18px; }
.who-opt strong { display: block; }
.who-opt small { display: block; color: var(--ink-soft); font-size: 14.5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mem-small { color: var(--ink-soft); font-size: 13.5px; margin: 14px 0 0; }
.mem-thanks { background: var(--accent-soft); border-radius: 14px; padding: 18px 20px; line-height: 1.55; }
.mem-thanks em { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 860px) { .mem-row { grid-template-columns: 1fr; gap: 0; } .mem-form { padding: 22px 18px; } }

/* ---------- Home: memories + pets ---------- */
.feature-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.feature-split h2 { font-size: clamp(36px, 3.4vw, 50px); margin: 10px 0 12px; }
.feature-split p { color: var(--ink-soft); }
.feature-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 9px; }
.feature-list strong { color: var(--ink); }
.mem-demo { display: grid; gap: 14px; }
.mem-demo .mem-card { margin: 0; }
.mem-demo .mem-card:nth-child(2) { margin-left: 34px; }
.mem-demo .lock-card { display: flex; align-items: center; gap: 12px; background: #3A3532; color: #F7F3EE; border-radius: 18px; padding: 18px 22px; }
.mem-demo .lock-card svg { width: 22px; height: 22px; flex: none; }
.mem-demo .lock-card small { display: block; opacity: .75; }
.pet-sec { background: linear-gradient(180deg, transparent, #EFE6D8 40%, transparent); max-width: none; }
.pet-sec > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.pet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pet-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pet-card svg { display: block; width: 100%; height: auto; }
.pet-card div { padding: 16px 18px 20px; }
.pet-card h3 { font-size: 22px; margin: 0 0 4px; }
.pet-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 860px) {
  .feature-split { grid-template-columns: 1fr; gap: 28px; }
  .pet-grid { grid-template-columns: 1fr 1fr; }
  .mem-demo .mem-card:nth-child(2) { margin-left: 0; }
}
.mem-form [hidden], .mem-private[hidden] { display: none !important; }

/* ---------- "Tap Continue" nudge after a choice ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn.attn { position: relative; isolation: isolate; overflow: visible; }
/* A white-to-gold light that keeps circling the button until it's pressed. */
.btn.attn::before {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 150deg, #fff 210deg, #E9CF96 270deg, var(--accent) 320deg, var(--accent-deep) 355deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: attn-spin 1.8s linear infinite;
}
@keyframes attn-spin { to { --ang: 360deg; } }
/* A quick breath in and out, twice, the moment a choice is made. */
.btn.nudge { animation: attn-pulse .8s var(--ease) 2; }
@keyframes attn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(176,141,87,0); }
  40% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(176,141,87,.22); }
  70% { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.nudge { animation: none; }
  .btn.attn::before { animation: none; background: linear-gradient(90deg, #fff, var(--accent)); }
}

/* ---------- Progress path: honest dots, tap or drag to move ---------- */
.track { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.track-fill { background: var(--accent-soft); }
.progress.halfway .track-fill { box-shadow: none; }
button.track-pin { padding: 0; cursor: pointer; appearance: none; z-index: 1; }
button.track-pin::before { content: ""; position: absolute; inset: -12px -8px; } /* bigger tap target */
.track-pin.needs { background: #FBEFD9; border-color: var(--warn); animation: needs-glow 2.4s ease-in-out infinite; }
@keyframes needs-glow { 50% { box-shadow: 0 0 0 5px rgba(185,135,74,.22); } }
.track-pin.end { border-radius: 3px; transform: rotate(45deg); }
.track-pin:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.track-traveller { z-index: 2; pointer-events: none; }
.track.dragging .track-traveller { transform: scale(1.25); }
.track-tip { position: absolute; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; z-index: 3;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.track-tip.edge-l { transform: none; margin-left: -8px; }
.track-tip.edge-r { transform: translateX(-100%); margin-left: 8px; }
.track-tip[hidden] { display: none; }
.todo-chip { margin-left: 10px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--warn); background: #FBEFD9;
  color: #7A5527; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.todo-chip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .track-pin.needs { animation: none; } }

/* ---------- Voice: show the work as it happens ---------- */
.levels { display: inline-flex; align-items: center; gap: 3px; height: 26px; margin-top: 6px; }
.levels[hidden] { display: none; }
.levels i { display: block; width: 4px; height: 100%; border-radius: 2px; background: #B5523F; transform: scaleY(.15); transform-origin: center; transition: transform .08s linear; }
.ai-work { margin: 0 0 14px; padding: 14px 16px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--accent-soft);
  box-shadow: 0 12px 30px -24px rgba(58,53,50,.6); animation: noteIn .4s ease both; }
.ai-work[hidden] { display: none; }
.aw-head { display: flex; align-items: center; gap: 10px; }
.aw-head strong { font-family: var(--serif); font-size: 21px; font-weight: 500; flex: 1; }
.aw-time { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.aw-spark { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--accent), #fff, var(--accent)); animation: aw-spin 1.1s linear infinite; flex: none; }
.ai-work.finished .aw-spark { animation: none; background: var(--ok); }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-bar { height: 4px; border-radius: 4px; background: var(--accent-soft); margin: 10px 0 10px; overflow: hidden; }
.aw-bar span { display: block; height: 100%; width: 8%; border-radius: 4px; transition: width .8s var(--ease);
  background: linear-gradient(90deg, var(--accent), #F0D9A6, var(--accent)); background-size: 200% 100%; animation: aw-shimmer 1.4s linear infinite; }
@keyframes aw-shimmer { to { background-position: -200% 0; } }
.aw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aw-steps li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-soft); opacity: .55; transition: opacity .4s, color .4s; }
.aw-steps li[hidden] { display: none; }
.aw-steps li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.aw-steps li.on { opacity: 1; color: var(--ink); font-weight: 600; }
.aw-steps li.on::before { border-color: var(--accent); border-top-color: transparent; animation: aw-spin .8s linear infinite; }
.aw-steps li.done { opacity: 1; color: var(--ink); }
.aw-steps li.done::before { border-color: var(--ok); background: var(--ok); }
.aw-steps li.done::after { content: ""; position: absolute; left: 7px; top: 6px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.aw-steps li.stopped { opacity: 1; color: #A2553A; }
.aw-tip { margin: 10px 0 0; font-size: 14px; color: var(--accent-deep); font-style: italic; min-height: 1.4em; }
.aw-tip.in { animation: noteIn .5s ease both; }
.ai-work.finished .aw-tip { visibility: hidden; }
.input.story.tidying { background: linear-gradient(100deg, #fff 30%, #FBF3E4 50%, #fff 70%); background-size: 300% 100%; animation: aw-shimmer 1.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .aw-spark, .aw-steps li.on::before, .aw-bar span, .input.story.tidying { animation: none; }
}

/* ---------- Try a different tone ---------- */
.tones { margin: 4px 0 16px; padding: 16px; border-radius: 16px; background: #FBF6EC; border: 1px solid var(--accent-soft); animation: noteIn .4s ease both; }
.tones[hidden] { display: none; }
.tones-head strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.tones-head span { display: block; color: var(--ink-soft); font-size: 14.5px; margin: 2px 0 10px; }
.v-mine { border-style: dashed; }
.versions { display: grid; gap: 12px; margin-top: 12px; }
.versions:empty { display: none; }
.version { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; animation: noteIn .4s ease both; transition: border-color .3s, box-shadow .3s; }
.version.chosen { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(94,139,106,.18); }
.v-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.v-label { font-weight: 700; color: var(--accent-deep); }
.v-status { font-size: 13px; color: var(--ink-soft); }
.version.loading .v-status::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent; animation: aw-spin .8s linear infinite; vertical-align: -1px; }
.v-text { white-space: pre-wrap; line-height: 1.55; font-size: 16px; }
.v-skel { display: block; height: 12px; border-radius: 6px; margin: 8px 0; background: linear-gradient(90deg, #F1EADF 25%, #FBF6EC 50%, #F1EADF 75%); background-size: 200% 100%; animation: aw-shimmer 1.3s linear infinite; }
.v-skel.short { width: 60%; }
.version.failed .v-text { color: var(--ink-soft); font-size: 14.5px; }
.v-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.v-actions .btn { height: 40px; padding: 0 16px; font-size: 15px; }

/* Filled-in steps: green with a tick */
.track-pin.done { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  border-color: var(--ok); width: 16px; height: 16px; margin-left: -8px; top: 3px; }
.track-pin.done.now { box-shadow: 0 0 0 5px rgba(94,139,106,.22); }
.track-pin.pop { animation: pin-pop .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes pin-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.pin-plus { position: absolute; top: -6px; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: var(--ok);
  pointer-events: none; animation: pin-plus 1.4s ease-out forwards; }
@keyframes pin-plus { 0% { opacity: 0; transform: translate(-50%, 6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px); } }
@media (max-width: 860px) { .track-pin.done { width: 14px; height: 14px; margin-left: -7px; top: 1px; } }

/* ---------- Three views: Mobile / Compact / Desktop ---------- */
.view-ask.three .view-ask-options { grid-template-columns: 1fr; gap: 10px; }
.view-ask.three .view-opt { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px;
  align-items: center; text-align: left; padding: 14px 16px; }
.view-ask.three .view-opt svg { grid-row: span 2; width: 40px; height: 40px; }
.view-ask.three .view-opt strong { font-size: 22px; line-height: 1.1; }
.view-ask.three .view-opt span { font-size: 14.5px; }
.view-ask.three .view-opt[aria-pressed="true"] { border-color: var(--accent); background: #FFF9EE; box-shadow: 0 0 0 3px rgba(176,141,87,.2); }
.view-ask-close { margin-top: 14px; background: none; border: 0; color: var(--ink-soft); font-size: 15px; text-decoration: underline; cursor: pointer; }
.view-ask.three .view-opt svg { grid-column: 1; grid-row: 1 / span 2; } .view-ask.three .view-opt strong, .view-ask.three .view-opt span { grid-column: 2; }

/* Back, at the far right of the Continue bar */
.act-back { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 16px 0 10px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; flex: none; }
.act-back svg { width: 18px; height: 18px; }
.act-back:hover { border-color: var(--accent); }
.q-actions { flex-wrap: nowrap; }
@media (max-width: 860px) {
  .dock .q-actions .skip { flex: 1; min-width: 0; }
  .dock .q-actions .act-back { height: 46px; }
}

/* ---------- Hero story: swipeable, six slides ---------- */
.stage { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage.grabbing { cursor: grabbing; }
.stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.stage[data-beat="5"] svg.journey, .stage[data-beat="6"] svg.journey { opacity: .25; transition: opacity .8s var(--ease); }
.stage svg.journey { transition: opacity .8s var(--ease); }
.stage-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 40px 6% 46px;
  opacity: 0; pointer-events: none; transition: opacity .8s var(--ease); }
.stage[data-beat="5"] .slide-mem, .stage[data-beat="6"] .slide-pets { opacity: 1; }
.slide-mem { flex-direction: column; align-items: stretch; justify-content: center; max-width: 520px; margin: 0 auto; }
.slide-mem .mem-card { margin: 0; padding: 14px 18px; transform: translateY(14px); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.slide-mem .mem-card blockquote { font-size: 19px; margin-bottom: 6px; }
.slide-mem .mem-card:nth-child(2) { margin-left: 30px; transition-delay: .25s; }
.slide-mem .lock-card { display: flex; align-items: center; gap: 12px; background: #3A3532; color: #F7F3EE; border-radius: 16px; padding: 12px 18px;
  transform: translateY(14px); opacity: 0; transition: transform .7s var(--ease) .5s, opacity .7s var(--ease) .5s; }
.slide-mem .lock-card svg { width: 20px; height: 20px; flex: none; }
.slide-mem .lock-card small { display: block; opacity: .75; font-size: 13px; }
.stage[data-beat="5"] .slide-mem .mem-card, .stage[data-beat="5"] .slide-mem .lock-card { transform: none; opacity: 1; }
.pet-mini { width: 31%; background: #fff; padding: 8px 8px 10px; border-radius: 6px; box-shadow: 0 14px 30px -16px rgba(58,53,50,.6);
  transform: rotate(var(--r)) translateY(20px) scale(.92); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.pet-mini:nth-child(2) { transition-delay: .18s; } .pet-mini:nth-child(3) { transition-delay: .36s; }
.pet-mini svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.pet-mini em { display: block; text-align: center; font-family: var(--serif); font-size: 17px; margin-top: 6px; color: var(--ink); }
.stage[data-beat="6"] .pet-mini { transform: rotate(var(--r)); opacity: 1; }
.stage-nav { position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,253,250,.9); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(0,0,0,.5); }
.stage-nav svg { width: 20px; height: 20px; }
.stage-nav.prev { left: 10px; } .stage-nav.next { right: 10px; }
.stage-cap { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap; background: rgba(58,53,50,.82); color: #fff;
  font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; pointer-events: none; }
.stage-cap.in { animation: noteIn .5s ease both; }
.stage-dots { z-index: 5; }
@media (max-width: 860px) {
  .stage-nav { width: 34px; height: 34px; margin-top: -17px; }
  .slide-mem .mem-card blockquote { font-size: 16px; }
  .pet-mini em { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .slide-mem .mem-card, .slide-mem .lock-card, .pet-mini { transition: opacity .3s; } }
.stage-cap { left: 0; right: 0; margin: 0 auto; width: max-content; transform: none; }
.slide-mem { padding-top: 58px; }
.view-ask.three .view-opt { grid-template-columns: auto 1fr; }
html.has-toggle[data-view="desktop"] .view-ask.three .view-opt { column-gap: 24px; padding: 22px 26px; }

/* ---------- First visit on a phone: a light circles the view button ---------- */
.foot-view.view-hint { position: relative; isolation: isolate; overflow: visible; background: #FFF9EE; }
.foot-view.view-hint::before {
  content: ""; position: absolute; inset: -3px; border-radius: 16px; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 150deg, #fff 210deg, #E9CF96 270deg, var(--accent) 320deg, var(--accent-deep) 355deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: attn-spin 1.8s linear infinite;
}
.foot-view.view-hint { animation: attn-pulse .9s var(--ease) 3; }
.view-tip { position: fixed; z-index: 95; max-width: 260px; background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); animation: noteIn .5s ease both; cursor: pointer; }
.view-tip strong { display: block; font-size: 15px; }
.view-tip span { display: block; font-size: 13.5px; opacity: .85; line-height: 1.35; margin-top: 2px; }
.view-tip::after { content: ""; position: absolute; bottom: -7px; right: var(--arrow, 40px); width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.view-tip.out { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
@media (prefers-reduced-motion: reduce) { .foot-view.view-hint, .foot-view.view-hint::before { animation: none; } }

/* ---------- More photos: the collection ---------- */
.drop-zone { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; margin-bottom: 12px; border-radius: 14px;
  border: 2px dashed var(--line); color: var(--ink-soft); font-size: 15px; transition: border-color .2s, background .2s; }
.drop-zone svg { width: 18px; height: 18px; }
.drop-zone.over { border-color: var(--accent); background: #FFF9EE; color: var(--ink); }
@media (pointer: coarse) { .drop-zone { display: none; } }
.coll-status { font-size: 15px; color: var(--ink-soft); margin: 2px 0 10px; display: flex; align-items: center; gap: 8px; min-height: 1.5em; }
.coll-status strong { color: var(--ok); }
.coll-status .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: aw-spin .8s linear infinite; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.coll-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--accent-soft); }
.coll-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-tile.arrived { animation: tile-in .45s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes tile-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.coll-tile.leaving { transform: scale(.7); opacity: 0; transition: transform .25s, opacity .25s; }
.coll-tile.loading { display: grid; place-items: center; background: linear-gradient(90deg, #F1EADF 25%, #FBF6EC 50%, #F1EADF 75%); background-size: 200% 100%; animation: aw-shimmer 1.3s linear infinite; }
.coll-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.coll-ring circle { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; transition: stroke-dashoffset .3s; }
.coll-tile.failed { display: grid; place-items: center; padding: 6px; text-align: center; font-size: 12px; color: #A2553A; background: #F6E6DF; }
.coll-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(58,53,50,.75); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }

/* ---------- Story ideas: a slow-drifting rail of prompts ---------- */
.ideas { margin: 0 0 14px; padding: 12px 0 10px; border-radius: 16px; background: #FBF6EC; border: 1px solid var(--accent-soft); overflow: hidden; }
.ideas-head { padding: 0 14px 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ideas-head strong { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.ideas-head span { color: var(--ink-soft); font-size: 14px; }
.ideas-row { overflow: hidden; padding: 4px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ideas-track { display: flex; gap: 8px; width: max-content; animation: ideas-drift 46s linear infinite; }
.ideas-row.rev .ideas-track { animation-direction: reverse; animation-duration: 54s; }
.ideas-rail:hover .ideas-track, .ideas-rail:active .ideas-track, .ideas-rail:focus-within .ideas-track { animation-play-state: paused; }
@keyframes ideas-drift { to { transform: translateX(-50%); } }
.idea-chip { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 15px;
  font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s; }
.idea-chip.on { border-color: var(--accent); background: #FFF3DC; }
.idea-chip.got { border-color: var(--ok); background: #EEF5F0; }
.idea-card { margin: 8px 14px 4px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--accent); }
.idea-card.in { animation: noteIn .35s ease both; }
.idea-card strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; }
.idea-card span { display: block; color: var(--ink-soft); font-size: 14.5px; margin-top: 2px; }
.idea-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.idea-acts .btn { height: 40px; padding: 0 16px; font-size: 15px; }
.covered { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; font-size: 13px; }
.cov-count { font-weight: 700; color: var(--ink-soft); margin-right: 2px; align-self: center; }
.cov { padding: 2px 9px; border-radius: 999px; background: #F1EADF; color: var(--ink-soft); }
.cov.got { background: #E3EFE6; color: #3F6B4B; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .ideas-track { animation: none; flex-wrap: wrap; width: auto; padding: 0 14px; }
  .ideas-track > [aria-hidden="true"] { display: none; }
}
.covered[hidden] { display: none; }

/* ---------- Their life so far: live timeline ---------- */
.ll-sec span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); }
.lifeline { position: relative; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.lifeline[hidden], .ll-sec[hidden], .mini-life[hidden], .mini-url[hidden] { display: none; }
.ll-line { position: absolute; left: 0; right: 0; top: 52px; height: 3px; background: var(--accent-soft); border-radius: 3px; min-width: 100%; }
.ll-draw { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), #E9CF96); border-radius: 3px; transform-origin: left; animation: ll-draw 1.2s var(--ease) both; }
@keyframes ll-draw { from { transform: scaleX(0); } }
.ll-items { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; width: max-content; min-width: 100%; }
.ll-item { flex: none; width: 112px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ll-item.new { animation: ll-pop .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 90ms + .2s); }
@keyframes ll-pop { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.ll-when { font-weight: 800; font-size: 14px; color: var(--accent-deep); height: 28px; line-height: 1.05; }
.ll-when small { display: block; font-weight: 600; font-size: 11px; color: var(--ink-soft); }
.ll-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--accent); font-size: 17px;
  box-shadow: 0 6px 14px -8px rgba(58,53,50,.6); margin: 2px 0 6px; overflow: hidden; }
.ll-dot.face { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 6px 14px -8px rgba(58,53,50,.6); }
.ll-dot img, .pin-face, .ml-dots i.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.ll-label { font-size: 13.5px; line-height: 1.25; color: var(--ink); }
.ll-label small { display: block; color: var(--ink-soft); font-size: 12px; }
.ll-undated { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.ll-u-head { width: 100%; font-size: 12.5px; color: var(--ink-soft); }
.ll-u { border: 1.5px dashed var(--accent); background: #FFF9EE; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ll-u b { color: var(--accent-deep); margin-left: 4px; }
.ll-u.new { animation: ll-pop .5s ease both; }
.ll-ask { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.ll-ask input { width: 90px; height: 34px; border: 1.5px solid var(--accent); border-radius: 10px; padding: 0 8px; font: inherit; margin-left: 4px; }
.ll-ask .btn { height: 34px; padding: 0 12px; font-size: 14px; }
.pin-face { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--accent); margin-right: 6px; vertical-align: middle; }
/* The slim strip above the footer */
.mini-life { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.ml-dots { display: inline-flex; align-items: center; position: relative; padding-left: 4px; }
.ml-dots::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--accent-soft); z-index: 0; }
.ml-dots i { position: relative; z-index: 1; font-style: normal; width: 22px; height: 22px; margin-left: -3px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent);
  display: grid; place-items: center; font-size: 11.5px; overflow: hidden; }
.ml-dots i.u { border-style: dashed; }
.ml-dots i.new { animation: ll-pop .5s cubic-bezier(.3,1.5,.5,1) both; }
.ml-text { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- Tell us more: follow the threads ---------- */
.dig { margin: 4px 0 14px; padding: 14px; border-radius: 16px; background: #fff; border: 1.5px solid var(--accent-soft); animation: noteIn .4s ease both; }
.dig[hidden], .answering[hidden] { display: none; }
.dig-head strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.dig-head span { display: block; color: var(--ink-soft); font-size: 14.5px; margin: 2px 0 10px; }
.dig-traits, .dig-threads { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dig-trait { border: 0; background: #F3ECF7; color: #5B4370; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dig-thread { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; animation: ll-pop .5s ease both; animation-delay: var(--d); }
.dig-thread em { font-style: normal; font-size: 11.5px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 6px; }
.dig-thread.on { border-color: var(--accent); background: #FFF3DC; }
.dig-skel { display: inline-block; width: 110px; height: 40px; border-radius: 12px; background: linear-gradient(90deg, #F1EADF 25%, #FBF6EC 50%, #F1EADF 75%); background-size: 200% 100%; animation: aw-shimmer 1.3s linear infinite; }
.dig-qs { display: grid; gap: 6px; }
.dig-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: #FBF6EC; font: inherit; font-size: 15px; cursor: pointer; animation: noteIn .35s ease both; }
.dig-q span { flex: none; font-size: 13px; font-weight: 700; color: var(--accent-deep); }
.answering { position: sticky; top: 0; z-index: 3; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; animation: noteIn .35s ease both; }
.ans-label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.answering strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; margin: 2px 0 2px; }
.answering .btn { height: 38px; font-size: 15px; padding: 0 14px; }
.answering .btn:not(.btn-gold) { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.ans-x { background: none; border: 0; color: #fff; opacity: .7; text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }

/* ---------- Welcome back ---------- */
.welcome-back { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 70px); transform: translateX(-50%); z-index: 96; display: flex; align-items: center; gap: 10px;
  width: min(520px, calc(100% - 24px)); background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 12px 10px 16px; font-size: 14.5px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); animation: noteIn .45s ease both; }
.welcome-back span { flex: 1; }
.wb-new { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.wb-x { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.welcome-back.out { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .ll-draw, .ll-item.new, .ml-dots i.new, .dig-thread { animation: none; } }

/* Phones: the opened preview shows the life-so-far timeline, scrollable */
@media (max-width: 860px) {
  .preview-pane.open .mini { max-height: 58vh; overflow-y: auto; }
  .preview-pane.open .mini-body { display: block; padding: 12px 14px 14px; }
  .preview-pane.open .mini-body .mini-map, .preview-pane.open .mini-body .mini-skeleton { display: none; }
  .preview-pane.open .mini-body .mini-sec:not(.ll-sec) { display: none; }
}
.welcome-back { left: 0; right: 0; margin: 0 auto; transform: none; }

/* ---------- Photos being added: a toast that follows them ---------- */
.photo-toast { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--footer-h) + 132px); z-index: 94; width: min(460px, calc(100% - 24px));
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 6px; padding: 10px 14px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 14.5px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); animation: noteIn .35s ease both; }
.photo-toast[hidden] { display: none; }
.pt-icon svg { width: 22px; height: 22px; color: #E9CF96; display: block; }
.pt-text strong { margin-right: 4px; }
.pt-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.pt-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #F0D9A6); transition: width .4s var(--ease); }
.photo-toast.done .pt-bar i { background: var(--ok); }
.photo-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
@media (min-width: 861px) { .photo-toast { bottom: 24px; } }

/* Idea rows: swipe with a finger; the drift is done in script so it can pause */
.ideas-row { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ideas-row::-webkit-scrollbar { display: none; }
.ideas-track { animation: none !important; padding: 0 10px; }

/* ---------- What you'll end up with ---------- */
.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.out-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.oc-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); font-size: 26px; margin-bottom: 10px; }
.out-card h3 { font-size: 24px; margin: 0 0 6px; }
.out-card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.out-foot { text-align: center; margin: 26px 0 0; color: var(--ink-soft); }
@media (max-width: 860px) { .out-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .out-card { padding: 16px; } .out-card h3 { font-size: 20px; } .out-card p { font-size: 14px; } }
/* Hero slide 7 */
.slide-out { gap: 18px; }
.out-movie { width: 54%; background: #1E1A18; border-radius: 12px; padding: 8px; box-shadow: 0 18px 36px -18px rgba(0,0,0,.6); transform: translateY(14px); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.om-screen { position: relative; border-radius: 6px; overflow: hidden; }
.om-screen svg { display: block; width: 100%; height: auto; animation: om-zoom 7s ease-in-out infinite alternate; }
@keyframes om-zoom { to { transform: scale(1.12) translateX(-3%); } }
.om-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.85); color: #3A3532; display: grid; place-items: center; }
.om-play svg { width: 20px; height: 20px; animation: none; }
.om-cap { position: absolute; left: 8px; bottom: 6px; font-family: var(--serif); font-size: 14px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.om-bar { height: 4px; background: rgba(255,255,255,.2); border-radius: 4px; margin: 8px 2px 6px; overflow: hidden; }
.om-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.stage[data-beat="7"] .om-bar i { animation: om-progress 5.4s linear forwards; }
@keyframes om-progress { to { width: 100%; } }
.om-meta { color: #EDE2CF; font-size: 12.5px; padding: 0 2px 2px; }
.out-side { width: 34%; display: grid; gap: 10px; transform: translateY(14px); opacity: 0; transition: transform .7s var(--ease) .25s, opacity .7s var(--ease) .25s; }
.out-book { position: relative; background: #F7F1E6; border: 1px solid var(--line); border-radius: 6px; padding: 14px 12px; text-align: center; box-shadow: 0 12px 26px -16px rgba(58,53,50,.6); transform: rotate(3deg); }
.out-book b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.out-book span { display: block; font-size: 11px; color: var(--ink-soft); }
.out-book em { display: block; font-size: 11px; color: var(--accent-deep); margin-top: 6px; }
.out-book .qr { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; background:
  conic-gradient(#3A3532 25%, transparent 0 50%, #3A3532 0 75%, transparent 0) 0 0 / 6px 6px; border-radius: 2px; }
.out-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.out-chips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.stage[data-beat="7"] .slide-out { opacity: 1; }
.stage[data-beat="7"] .out-movie, .stage[data-beat="7"] .out-side { transform: none; opacity: 1; }
.stage[data-beat="7"] svg.journey { opacity: .25; }
/* Builder: you'll get */
.youll-get { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: 13.5px; }
.youll-get strong { color: var(--ink-soft); margin-right: 2px; }
.youll-get span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .om-screen svg, .stage[data-beat="7"] .om-bar i { animation: none; } }

/* Hero: what you get, said plainly */
.hero-gets { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.hero-gets li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.4; }
.hero-gets li > span { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); font-size: 18px; }
.hero-gets strong { display: block; color: var(--ink); font-size: 16.5px; }
.hero-more { display: inline-block; margin: 2px 0 18px; font-size: 14.5px; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.hero-more:hover { text-decoration: underline; }

/* No double-tap zoom anywhere. touch-action isn't inherited, and inner scroll areas (the
   builder's question pane, idea rows) start fresh, so apply it to every element. More specific
   rules (crop stage, progress path, hero story) still set their own. */
*, *::before, *::after { touch-action: manipulation; }

/* iPhone: why the picker pauses after ✓ */
.ios-tip { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #EEF3F7; border: 1px solid #D5E0EA; color: #3D4C5A; font-size: 13.5px; line-height: 1.45; }
.ios-tip > span { font-size: 18px; flex: none; }
.ios-tip b { color: #1F6FD6; }
.ios-tip.noticed { background: #FBF3E4; border-color: #E9CF96; color: var(--ink); animation: noteIn .4s ease both; }

/* ---------- Answer box: its own mic and text, then check & add ---------- */
.ans-voice { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.ans-mic { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; position: relative; }
.ans-mic svg { width: 24px; height: 24px; }
.ans-mic[data-state="recording"] { background: #B5523F; animation: breathe 1.6s ease-in-out infinite; }
.ans-mic[data-state="busy"] { background: var(--ink-soft); }
.ans-mic[data-state="busy"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #E9CF96; border-top-color: transparent; animation: aw-spin .9s linear infinite; }
.ans-mic-text b { display: block; font-size: 16px; }
.ans-mic-text span { display: block; font-size: 13px; opacity: .75; }
.ans-levels { margin-top: 4px; }
.ans-levels i { background: #F0A08E; }
.ans-text { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: #fff; color: var(--ink); padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.ans-text:focus { outline: none; border-color: #E9CF96; box-shadow: 0 0 0 3px rgba(233,207,150,.35); }
.ans-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.ans-steps[hidden], .ans-note[hidden] { display: none; }
.ans-steps li { position: relative; padding-left: 24px; opacity: .55; }
.ans-steps li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); box-sizing: border-box; }
.ans-steps li.on { opacity: 1; font-weight: 700; }
.ans-steps li.on::before { border-color: #E9CF96; border-top-color: transparent; animation: aw-spin .8s linear infinite; }
.ans-steps li.done { opacity: 1; }
.ans-steps li.done::before { background: var(--ok); border-color: var(--ok); }
.ans-note { margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; background: rgba(255,255,255,.1); }
.ans-note.warn { background: #F6E6DF; color: #7A3A26; }
.ans-done { margin: 6px 0 0; font-size: 14.5px; opacity: .9; }
.answering .idea-acts { margin-top: 10px; }
.answering .ans-add:disabled { opacity: .45; }
.input.story.updated { animation: story-glow 2.2s ease both; }
@keyframes story-glow { 0% { box-shadow: 0 0 0 0 rgba(94,139,106,0); } 20% { box-shadow: 0 0 0 5px rgba(94,139,106,.35); border-color: var(--ok); } 100% { box-shadow: 0 0 0 0 rgba(94,139,106,0); } }
.answering { position: relative; top: auto; }

/* ---------- Preview strip: a light circles it for 10s when something new is added ---------- */
.mini-bar.attn-ring { position: relative; isolation: isolate; overflow: visible; }
.mini-bar.attn-ring::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px; padding: 3px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 150deg, #fff 210deg, #E9CF96 270deg, var(--accent) 320deg, var(--accent-deep) 355deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: attn-spin 1.8s linear infinite;
}
.preview-pane .mini { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .mini-bar.attn-ring::after { animation: none; } }

/* ---------- Build card in the steps ---------- */
.build-cta { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; margin: 18px 0 6px; padding: 16px; border-radius: 18px;
  background: linear-gradient(135deg, #3A3532, #5A4B40); color: #fff; box-shadow: 0 16px 34px -20px rgba(0,0,0,.6); }
.bc-art { display: flex; } .bc-art span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 20px; margin-right: -6px; border: 2px solid #4A3F37; }
.bc-text strong { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.bc-text span { display: block; font-size: 14px; opacity: .85; line-height: 1.4; }
.build-cta .bc-go { grid-column: 1 / -1; width: 100%; }

/* ---------- Build: email sheet ---------- */
.build-ask, .build-run { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(30,26,24,.55); animation: noteIn .3s ease both; }
.build-ask.closing, .build-run.closing, .page-prev.closing { opacity: 0; transition: opacity .3s; }
.build-card, .br-card { position: relative; width: min(460px, 100%); background: var(--card); border-radius: 22px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.ba-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink-soft); }
.ba-art { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.ba-art span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); font-size: 22px; animation: ll-pop .5s cubic-bezier(.3,1.5,.5,1) both; }
.ba-art span:nth-child(2) { animation-delay: .1s; } .ba-art span:nth-child(3) { animation-delay: .2s; }
.build-card h2 { font-size: 28px; margin: 4px 0 6px; }
.build-card > p { color: var(--ink-soft); font-size: 15px; margin: 0 0 14px; }
.build-card .input { text-align: center; }
.build-card .btn-lg { width: 100%; margin-top: 10px; }
.ba-small { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.45; }
/* ---------- Build: progress and results ---------- */
.br-spark { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; background: conic-gradient(var(--accent), #fff, var(--accent)); animation: aw-spin 1.4s linear infinite; }
.br-card h2 { font-size: 26px; margin: 0 0 12px; }
.br-steps { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 8px; text-align: left; max-width: 320px; }
.br-steps li { position: relative; padding-left: 28px; color: var(--ink-soft); opacity: .55; transition: opacity .3s; }
.br-steps li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.br-steps li.on { opacity: 1; color: var(--ink); font-weight: 700; }
.br-steps li.on::before { border-color: var(--accent); border-top-color: transparent; animation: aw-spin .8s linear infinite; }
.br-steps li.done { opacity: 1; color: var(--ink); }
.br-steps li.done::before { background: var(--ok); border-color: var(--ok); }
.br-done[hidden] { display: none; }
.br-done { margin-top: 16px; animation: noteIn .4s ease both; }
.build-run:has(.br-done:not([hidden])) .br-spark { animation: none; background: var(--ok); }
.br-done h3 { font-size: 22px; margin: 0 0 10px; }
.br-outs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.br-out { display: grid; justify-items: center; gap: 2px; padding: 16px 10px; border-radius: 16px; border: 1.5px solid var(--accent); background: #FFF9EE; cursor: pointer; font: inherit; }
.br-out span { font-size: 28px; } .br-out strong { font-size: 16px; } .br-out small { color: var(--ink-soft); font-size: 12.5px; }
.br-verify { font-size: 13.5px; background: #EEF3F7; border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; text-align: left; line-height: 1.45; }
.br-verify.ok { background: #E3EFE6; color: #3F6B4B; }
.br-small { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 12px; }
.linklike { border: 0; background: none; color: var(--accent-deep); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
/* ---------- Page preview ---------- */
.page-prev { position: fixed; inset: 0; z-index: 130; background: var(--bg); display: flex; flex-direction: column; animation: noteIn .3s ease both; }
.pp-bar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top,0px) + 8px) 12px 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.pp-url { flex: 1; font-size: 14px; background: var(--bg); border-radius: 999px; padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tag { font-size: 12px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 3px 8px; }
.pp-x { border: 0; background: none; font-size: 28px; cursor: pointer; line-height: 1; }
.pp-scroll { flex: 1; overflow-y: auto; }
.pp-hero { min-height: 52vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 30px 20px; background: #3A3532 center/cover; color: #fff; }
.pp-title { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.pp-hero h1 { font-size: clamp(40px, 9vw, 76px); margin: 8px 0 4px; animation: noteIn .8s ease both; }
.pp-years, .pp-place { opacity: .9; letter-spacing: .06em; }
.pp-sec { max-width: 760px; margin: 0 auto; padding: 30px 20px 6px; }
.pp-sec h2 { font-size: 30px; margin: 0 0 14px; }
.pp-sec p { line-height: 1.7; font-size: 17px; }
.pp-tl { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 3px solid var(--accent-soft); }
.pp-tl li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; padding: 10px 0 10px 26px; animation: ll-pop .5s ease both; animation-delay: calc(var(--i) * 90ms); }
.pp-dot { position: absolute; left: -17px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); display: grid; place-items: center; font-size: 15px; }
.pp-when { font-weight: 800; color: var(--accent-deep); }
.pp-lab small { color: var(--ink-soft); }
.pp-also { color: var(--ink-soft); font-size: 14.5px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.pp-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.pp-mem p { color: var(--ink-soft); }
.pp-foot { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 30px 0 calc(env(safe-area-inset-bottom,0px) + 30px); }
/* ---------- Movie preview ---------- */
.movie { position: fixed; inset: 0; z-index: 140; background: #000; color: #fff; overflow: hidden; }
.mv-stage, .mv-scene { position: absolute; inset: 0; }
.mv-scene { opacity: 0; transition: opacity 1.1s ease; }
.mv-scene.in { opacity: 1; }
.mv-img { position: absolute; inset: -6%; background: #222 center/cover; transform: scale(1.02); }
.mv-scene.in .mv-img { animation: mv-pan 6s linear forwards; }
.movie.paused .mv-img { animation-play-state: paused; }
@keyframes mv-pan { to { transform: scale(1.12) translateX(var(--pan)); } }
.mv-plain { background: radial-gradient(circle at 50% 40%, #5A4B40, #1E1A18); }
.mv-cap { position: absolute; left: 0; right: 0; bottom: 14%; padding: 0 8%; text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.mv-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.65)); }
.mv-cap { z-index: 1; }
.mv-scene.in .mv-cap { animation: noteIn 1.2s ease .3s both; }
.mv-cap h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 8vw, 72px); margin: 4px 0; }
.mv-cap small { display: block; letter-spacing: .22em; text-transform: uppercase; font-size: 12px; opacity: .85; margin-top: 6px; }
.mv-cap b { display: block; font-size: 15px; letter-spacing: .14em; color: #E9CF96; }
.mv-cap p { font-family: var(--serif); font-size: clamp(24px, 5vw, 40px); margin: 4px 0 0; }
.mv-cap p.q { font-style: italic; font-size: clamp(22px, 4.6vw, 36px); }
.mv-title .mv-cap, .mv-end .mv-cap { bottom: 38%; }
.mv-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(env(safe-area-inset-bottom,0px) + 12px); background: linear-gradient(transparent, rgba(0,0,0,.6)); z-index: 3; }
.mv-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 16px; cursor: pointer; flex: none; }
.mv-x { font-size: 24px; }
.mv-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.mv-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.mv-time { font-size: 13px; font-variant-numeric: tabular-nums; opacity: .85; }
.mv-note { position: absolute; top: calc(env(safe-area-inset-top,0px) + 12px); left: 0; right: 0; text-align: center; font-size: 12px; opacity: .7; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .mv-scene.in .mv-img { animation: none; } }

/* ---------- Import what you already have ---------- */
.import-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px;
  border: 1.5px dashed var(--accent); background: #FFFCF6; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; line-height: 1.4; }
.import-btn > :first-child { font-size: 20px; }
.import-btn strong { color: var(--ink); }
.import-btn:hover { background: #FFF3DC; }
.import-card { text-align: left; max-height: calc(100vh - 40px); overflow-y: auto; }
.import-card h2 { text-align: center; }
.im-files { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: 14px; }
.im-files li { background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.im-files span { color: var(--ink-soft); }
.im-files small { display: block; color: #A2553A; margin-top: 2px; }
.im-opt { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 6px; cursor: pointer; }
.im-opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent-deep); flex: none; }
.im-opt small { display: block; color: var(--ink-soft); font-size: 13px; }
.im-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px 30px; }
.im-thumbs img, .im-thumbs span { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.im-thumbs span { display: grid; place-items: center; background: var(--accent-soft); font-weight: 700; font-size: 13px; }
.im-text { width: 100%; box-sizing: border-box; font-size: 15px; line-height: 1.5; min-height: 140px; }
.import-card .btn-lg { margin-top: 12px; }
.import-card .im-text, .import-card .im-files, .import-card .im-opt { text-align: left; }
.cta-sub { color: var(--ink-soft); font-family: var(--serif); font-size: 21px; font-style: italic; margin: -6px 0 22px; }
.build-cta.built { background: linear-gradient(135deg, #3F5B48, #5E8B6A); }
.bc-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bc-row .btn { width: 100%; padding: 0 10px; }
.pp-back, .pp-movie { flex: none; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pp-movie { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Movie: clearly a preview ---------- */
.mv-preview { position: absolute; top: calc(env(safe-area-inset-top,0px) + 76px); right: 14px; z-index: 4; text-align: right; pointer-events: none; }
.mv-preview b { display: inline-block; background: rgba(176,141,87,.92); color: #fff; letter-spacing: .2em; font-size: 13px; padding: 5px 10px; border-radius: 6px; }
.mv-preview span { display: block; font-size: 11.5px; opacity: .8; margin-top: 4px; }
.mv-note { padding: 0 60px; line-height: 1.4; }
.mv-edit { flex: none; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.movie.look-classic .mv-img { filter: grayscale(1) contrast(1.05); }
.movie.look-bright .mv-img { filter: saturate(1.25) brightness(1.08); }
.movie.look-warm .mv-img { filter: sepia(.18) saturate(1.05); }
.mv-cap.top { bottom: auto; top: 12%; }
.mv-text { font-size: clamp(30px, 7vw, 58px) !important; }
.mv-map { position: absolute; inset: 8% 4% 18%; }
.mv-map svg { width: 100%; height: 100%; }
.mv-scene.in .mv-route { animation: mv-draw 3.6s ease .3s forwards; }
@keyframes mv-draw { to { stroke-dashoffset: 0; } }
.mv-pin { position: absolute; transform: translate(-50%, -130%); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; background: #fff; color: #3A3532; font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 999px; opacity: 0; }
.mv-pin .flag { width: 16px; height: 11px; }
.mv-scene.in .mv-pin { animation: pin-in .5s ease forwards; animation-delay: var(--d); }
@keyframes pin-in { from { opacity: 0; transform: translate(-50%, -100%) scale(.7); } to { opacity: 1; transform: translate(-50%, -130%); } }
.mv-tl { position: absolute; inset: 26% 6% 22%; display: flex; flex-direction: column; justify-content: center; gap: 10px; border-left: 3px solid #E9CF96; padding-left: 18px; }
.mv-tl div { display: grid; grid-template-columns: 64px 30px 1fr; align-items: center; gap: 8px; opacity: 0; }
.mv-scene.in .mv-tl div { animation: tl-in .6s ease forwards; animation-delay: var(--d); }
@keyframes tl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mv-tl b { color: #E9CF96; } .mv-tl p { margin: 0; font-family: var(--serif); font-size: clamp(18px, 3.4vw, 26px); }

/* ---------- Movie editor ---------- */
.mv-editor { position: fixed; inset: 0; z-index: 135; background: var(--bg); display: flex; flex-direction: column; animation: noteIn .3s ease both; }
.me-bar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top,0px) + 8px) 12px 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.me-bar h2 { flex: 1; font-size: 22px; margin: 0; text-align: center; }
.me-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 40px; max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.me-settings { display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.me-lab { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.me-len { margin: 0; font-size: 14px; color: var(--accent-deep); font-weight: 700; }
.me-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.me-scene { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.me-scene.new { animation: story-glow 2s ease both; }
.me-head { display: flex; align-items: center; gap: 10px; }
.me-thumb img, .me-icon { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--accent-soft); font-size: 22px; }
.me-kind { flex: 1; font-weight: 700; font-size: 15px; }
.me-acts { display: flex; gap: 4px; }
.me-acts button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; }
.me-acts button:disabled { opacity: .3; }
.me-fields { display: grid; gap: 6px; margin-top: 8px; }
.me-f { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.me-f input { height: 38px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; color: var(--ink); min-width: 0; }
.me-f input:focus { outline: none; border-color: var(--accent); }
.me-pics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.me-pics[hidden] { display: none; }
.me-pics button { width: 56px; height: 56px; padding: 0; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; overflow: hidden; cursor: pointer; font-size: 11px; }
.me-pics img { width: 100%; height: 100%; object-fit: cover; }
.me-add { background: #FBF6EC; border: 1px dashed var(--accent); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.me-note { font-size: 13px; color: var(--ink-soft); }
.bc-edit { grid-column: 1 / -1; background: none; border: 0; color: #fff; text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; opacity: .9; }
.pp-live { background: #FBF3E4; color: #7A5527; font-size: 13px; text-align: center; padding: 6px 12px; border-bottom: 1px solid var(--line); }

/* ---------- Clearer controls ---------- */
.back { padding: 8px 16px 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; box-shadow: 0 4px 12px -8px rgba(58,53,50,.5); }
.back:hover { border-color: var(--accent); }
.mv-ui { gap: 12px; padding-top: 18px; }
.mv-btn { width: 52px; height: 52px; font-size: 18px; background: rgba(255,255,255,.92); color: #1E1A18; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.mv-x-top { position: fixed; top: calc(env(safe-area-inset-top,0px) + 12px); left: 12px; width: auto; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 800; z-index: 5; }
.mv-note { padding: 0 16px 0 130px; text-align: left; }
.mv-preview { top: calc(env(safe-area-inset-top,0px) + 80px); }
.mv-bar { height: 6px; }
.mv-edit { height: 52px; padding: 0 18px; font-size: 15.5px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.pp-back, .me-back { height: 40px; padding: 0 16px; font-size: 15px; border: 1.5px solid var(--ink); }
.pp-movie, .me-play { height: 40px; padding: 0 16px; font-size: 15px; }

/* ===================== Studio ===================== */
.studio { position: fixed; inset: 0; z-index: 125; background: var(--bg); display: flex; flex-direction: column; animation: noteIn .3s ease both; }
.studio.closing { opacity: 0; transition: opacity .3s; }
.st-bar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top,0px) + 8px) 12px 8px; background: var(--card); }
.st-title { flex: 1; text-align: center; min-width: 0; }
.st-title strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.st-title span { display: block; font-size: 11.5px; color: var(--accent-deep); font-weight: 700; }
.st-tabs { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; background: var(--card); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs button { flex: none; height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.st-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.st-body { flex: 1; overflow-y: auto; padding: 14px 14px 60px; max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.st-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 12px; animation: noteIn .4s ease both; }
.st-card h3 { font-size: 23px; margin: 0 0 4px; }
.st-card > p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 12px; }
.st-hero-card, .st-reserve { text-align: center; }
.st-card .big { font-size: 40px; display: block; }
.st-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 8px; }
.st-wide { width: 100%; }
.st-small { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; }
.st-lock { font-size: 14px; background: #FBF3E4; border-radius: 12px; padding: 10px 12px; margin: 10px 0 0; }
.st-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.st-theme { display: grid; gap: 6px; justify-items: center; padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.st-theme[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176,141,87,.22); }
.st-theme .sw { display: flex; } .st-theme .sw i { width: 26px; height: 26px; border-radius: 50%; margin-left: -6px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.st-secs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.st-secs li { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.st-secs label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.st-secs input { width: 20px; height: 20px; accent-color: var(--accent-deep); }
.st-secs button, .st-tl-row button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.st-secs button:disabled { opacity: .3; }
.st-tl { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; }
.st-tl li { background: var(--bg); border-radius: 14px; padding: 10px; display: grid; gap: 6px; }
.st-tl-row { display: grid; grid-template-columns: 56px 72px 1fr 34px; gap: 6px; align-items: center; }
.st-tl-row select, .st-tl-row input, .st-tl textarea { height: 38px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 15px; background: #fff; min-width: 0; }
.st-tl textarea { height: auto; padding: 8px; resize: vertical; }
.st-tl-pics { display: flex; gap: 5px; overflow-x: auto; }
.st-tl-pics button { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; opacity: .65; }
.st-tl-pics button[aria-pressed="true"] { border-color: var(--accent); opacity: 1; }
.st-tl-pics img { width: 100%; height: 100%; object-fit: cover; }
.st-ticks { margin: 0; padding-left: 20px; line-height: 1.7; }
.st-music { display: grid; gap: 8px; margin-bottom: 8px; }
.st-music button { text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.st-music button small { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.st-music button[aria-pressed="true"] { border-color: var(--accent); background: #FFF9EE; }
.st-voices { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.st-voices li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.st-v-k { font-weight: 700; font-size: 14px; } .st-v-t { grid-column: 1; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-v-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.st-v-acts button { height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.st-v-acts .rec { background: var(--accent); color: #fff; border-color: var(--accent); }
.st-v-acts .rec.on { background: #B5523F; border-color: #B5523F; animation: breathe 1.4s ease-in-out infinite; }
.st-host { display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--bg); border-radius: 999px; padding: 6px 14px; margin: 10px 0 6px; font-size: 15px; }
.st-host input { width: 46%; border: 0; background: transparent; font: inherit; font-weight: 800; text-align: left; color: var(--ink); }
.st-host input:focus { outline: none; }
.st-slug { font-size: 14px; font-weight: 700; min-height: 1.4em; } .st-slug.ok { color: var(--ok); } .st-slug.warn { color: #A2553A; }
.st-locks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.st-soon { background: #EEF3F7; font-size: 14.5px; }
.bc-studio { grid-column: 1 / -1; width: 100%; background: #fff; color: var(--ink); border-color: #fff; font-weight: 800; }

/* ===================== The page: themes & alive ===================== */
.page-prev { --pp-bg: #F7F3EE; --pp-ink: #3A3532; --pp-acc: #B08D57; --pp-card: #FFFDFA; --pp-soft: #6E655F; background: var(--pp-bg); color: var(--pp-ink); }
.page-prev.theme-classic { --pp-bg: #FFFFFF; --pp-ink: #1F2A44; --pp-acc: #8A7350; --pp-card: #F6F7FA; --pp-soft: #5B6475; }
.page-prev.theme-coastal { --pp-bg: #EEF5F7; --pp-ink: #1F3B47; --pp-acc: #2E6F86; --pp-card: #FFFFFF; --pp-soft: #557280; }
.page-prev.theme-garden { --pp-bg: #F2F5EC; --pp-ink: #2F4234; --pp-acc: #5E8B6A; --pp-card: #FFFFFF; --pp-soft: #5C6E5F; }
.page-prev.theme-evening { --pp-bg: #1E1A18; --pp-ink: #F7F3EE; --pp-acc: #E9CF96; --pp-card: #2A2522; --pp-soft: #BFB3A6; }
.page-prev .pp-scroll { background: var(--pp-bg); }
.page-prev .pp-sec h2 { color: var(--pp-ink); }
.page-prev .pp-when, .page-prev .pp-stats b { color: var(--pp-acc); }
.page-prev .pp-dot { border-color: var(--pp-acc); background: var(--pp-card); }
.page-prev .pp-also, .page-prev .pp-hint, .page-prev .pp-mem p, .page-prev .pp-foot { color: var(--pp-soft); }
.pp-hero { position: relative; overflow: hidden; min-height: 62vh; }
.pp-slide { position: absolute; inset: -4%; background: center/cover; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease; }
.pp-slide.on { opacity: 1; animation: kb 9s ease-out forwards; }
@keyframes kb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-2%, -2%); } }
.pp-shade { position: absolute; inset: 0; background: linear-gradient(rgba(30,26,24,.15), rgba(30,26,24,.78)); }
.pp-hero > *:not(.pp-slide):not(.pp-shade) { position: relative; z-index: 1; }
.pp-hero .pp-title { animation: noteIn 1s ease .2s both; } .pp-hero h1 { animation: noteIn 1.1s ease .45s both; }
.pp-hero .pp-years, .pp-hero .pp-place { animation: noteIn 1s ease .8s both; }
.pp-hero-acts { display: flex; gap: 8px; margin-top: 16px; animation: noteIn 1s ease 1.1s both; }
.pp-hero-acts button { height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #1E1A18; font: inherit; font-weight: 800; cursor: pointer; }
.pp-hero-acts .pp-music { background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.reveal-pp { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal-pp.in { opacity: 1; transform: none; }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pp-stats div { background: var(--pp-card); border-radius: 16px; padding: 16px 12px; text-align: center; box-shadow: 0 10px 24px -18px rgba(0,0,0,.4); }
.pp-stats b { display: block; font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; }
.pp-stats span { font-size: 13.5px; color: var(--pp-soft); }
.pp-insight { margin: 14px 0 0; font-size: 16px; }
.pp-decades { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 14px; }
.pp-decades span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 12px; color: var(--pp-soft); gap: 4px; }
.pp-decades i { display: block; width: 100%; max-width: 46px; height: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(var(--pp-acc), color-mix(in srgb, var(--pp-acc) 50%, transparent)); transition: height 1.2s cubic-bezier(.3,1.3,.5,1) .3s; }
.pp-glance.in .pp-decades i { height: var(--h); }
.pp-tl-sec .pp-tl { border-left-color: transparent; position: relative; }
.pp-tl-sec .pp-tl::before { content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 0; background: var(--pp-acc); transition: height 2.2s ease .2s; }
.pp-tl-sec.in .pp-tl::before { height: 100%; }
.pp-tl-sec .pp-tl li { opacity: 0; animation: none; }
.pp-tl-sec.in .pp-tl li { animation: tl-in .6s ease forwards; animation-delay: calc(var(--i) * 160ms + .3s); }
.pp-tli { cursor: pointer; border-radius: 12px; transition: background .25s; }
.pp-tli:hover { background: color-mix(in srgb, var(--pp-acc) 10%, transparent); }
.pp-more { grid-column: 1 / -1; display: none; padding: 8px 0 4px; }
.pp-tli.open .pp-more { display: block; animation: noteIn .4s ease both; }
.pp-more img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.pp-more p { margin: 8px 0 0; font-size: 15.5px; }
.pp-tli.open .pp-dot { transform: scale(1.2); transition: transform .3s; }
.pp-map { position: relative; height: 300px; border-radius: 18px; overflow: hidden; background: #2A2522; }
.pp-map .mv-map { inset: 6%; }
.pp-map-sec.in .mv-route { animation: mv-draw 3.6s ease .3s forwards; }
.pp-map-sec.in .mv-pin { animation: pin-in .5s ease forwards; animation-delay: var(--d); }
.pp-album .pp-ph { padding: 0; border: 0; background: none; cursor: zoom-in; opacity: 0; transform: scale(.85); }
.pp-album.in .pp-ph { animation: tile-in .55s cubic-bezier(.3,1.4,.5,1) forwards; }
.pp-album.in .pp-ph:nth-child(3n+2) { animation-delay: .12s; } .pp-album.in .pp-ph:nth-child(3n) { animation-delay: .24s; }
.pp-album .pp-ph img { transition: transform .4s; } .pp-album .pp-ph:hover img { transform: scale(1.05); }
.pp-lightbox { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.92); display: grid; place-items: center; animation: noteIn .3s ease both; }
.pp-lightbox img { max-width: 94%; max-height: 82vh; border-radius: 8px; }
.pp-lightbox button { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 18px; }
.pp-memcard { background: var(--pp-card); border-radius: 16px; padding: 16px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--pp-soft); }
.pp-memcard blockquote { margin: 0; }
.pp-studio { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom,0px) + 14px); display: flex; justify-content: center; pointer-events: none; z-index: 4; }
.pp-studio .btn { pointer-events: auto; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); }
.pp-foot { padding-bottom: calc(env(safe-area-inset-bottom,0px) + 90px); }
@media (prefers-reduced-motion: reduce) { .reveal-pp, .pp-album .pp-ph, .pp-tl-sec .pp-tl li { opacity: 1; transform: none; animation: none !important; } .pp-slide.on { animation: none; } }

/* Movie controls: seek bar on top, then back 10 / back 5 / play / forward 10 / edit */
.mv-ui { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
.mv-seek { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; }
.mv-bar { cursor: pointer; height: 8px; position: relative; }
.mv-bar::after { content: ""; position: absolute; inset: -12px 0; }
.mv-skip { position: relative; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.mv-skip small { position: absolute; font-size: 10px; font-weight: 800; top: 50%; left: 50%; transform: translate(-50%, -38%); }
.mv-play { width: 62px; height: 62px; font-size: 20px; }
.mv-edit { margin-left: 6px; }
@media (max-width: 420px) { .mv-edit { padding: 0 12px; font-size: 14px; } .mv-btn { width: 48px; height: 48px; } .mv-play { width: 58px; height: 58px; } }
.mv-ui { column-gap: 10px; }
@media (max-width: 420px) { .mv-btn { width: 46px; height: 46px; } .mv-play { width: 56px; height: 56px; } .mv-ui { column-gap: 8px; } }

/* ===================== Eras timeline (after the Bruce Jenner Racing timeline, in a warm voice) ===================== */
.pp-sub { color: var(--pp-soft); margin: -6px 0 18px; font-size: 16px; }
.eras { position: relative; --dot: 22px; }
.eras::before, .era-fill { content: ""; position: absolute; left: var(--dot); top: 0; width: 4px; margin-left: -2px; border-radius: 2px; }
.eras::before { bottom: 0; background: color-mix(in srgb, var(--pp-acc) 22%, transparent); }
.era-fill { height: 0; background: linear-gradient(180deg, var(--pp-acc), color-mix(in srgb, var(--pp-acc) 55%, #3A3532)); z-index: 1; transition: height .15s linear; }
.era { display: grid; grid-template-columns: 96px 1fr; gap: 10px; position: relative; padding: 18px 0 6px; }
.era + .era { border-top: 1px dashed color-mix(in srgb, var(--pp-acc) 30%, transparent); }
.era-rail { position: relative; }
.era-mark { position: sticky; top: 14px; padding: 2px 0 10px calc(var(--dot) + 18px); z-index: 2; }
.era-mark::before { content: ""; position: absolute; left: calc(var(--dot) - 10px); top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--pp-card);
  border: 4px solid color-mix(in srgb, var(--pp-acc) 35%, transparent); box-sizing: border-box; transition: border-color .35s, transform .35s, background .35s; }
.era.passed .era-mark::before, .era.active .era-mark::before { border-color: var(--pp-acc); }
.era.active .era-mark::before { background: var(--pp-acc); transform: scale(1.2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pp-acc) 18%, transparent); }
.era-mark .flag { width: 30px; height: 21px; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.25); display: block; margin-bottom: 6px; }
.era-yr { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--pp-ink); }
.era-pl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-acc); margin-top: 5px; line-height: 1.3; }
.era-body { min-width: 0; }
.era-h { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 12px; color: var(--pp-ink); }
.mcard { background: var(--pp-card); border-radius: 14px; padding: 14px 16px 12px; margin: 0 0 14px; box-shadow: 0 10px 26px -20px rgba(0,0,0,.45); cursor: default; overflow: hidden;
  opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.pp-eras.in .mcard { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms); }
.mcard::after { content: ""; display: block; clear: both; }
.mc-ph { float: right; width: 42%; max-width: 220px; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin: 0 0 8px 14px; cursor: zoom-in; }
.mc-when { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-acc); margin-bottom: 6px; }
.mc-when .flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.mcard h4 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 6px; color: var(--pp-ink); }
.mc-q { font-family: var(--serif); font-style: italic; font-size: 17.5px; line-height: 1.5; margin: 0 0 8px; color: var(--pp-soft); }
.mc-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-facts span { font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--pp-acc) 12%, transparent); border-radius: 6px; padding: 4px 8px; color: var(--pp-ink); }
.mc-facts b { color: var(--pp-acc); }
.era-now { position: absolute; top: 108px; left: 50%; transform: translate(-50%, -12px); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(30,26,24,.88); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; white-space: nowrap; }
.era-now.show { opacity: 1; transform: translate(-50%, 0); }
.era-now .flag { width: 22px; height: 15px; border-radius: 2px; display: block; }
@media (max-width: 520px) { .era { grid-template-columns: 74px 1fr; } .era-yr { font-size: 20px; } .mc-ph { width: 100%; max-width: none; float: none; margin: 0 0 10px; } }

/* ===================== Journey map: a story told on a real map ===================== */
.jm-box { position: relative; height: 420px; border-radius: 18px; overflow: hidden; background: #DDE6EA; }
.jm-map, .jm-root, .jm-leaflet { position: absolute; inset: 0; }
.jm-fallback { position: absolute; inset: 0; background: #2A2522; }
.jm-root .leaflet-container { background: #DDE6EA; font-family: var(--sans); }
.jm-root .leaflet-control-attribution, .jm-root .leaflet-attribution-flag { display: none !important; }
.jm-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 450; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(20,16,14,.28) 100%); }
.jm-attrib { position: absolute; right: 6px; bottom: 4px; z-index: 460; font: 9.5px/1 var(--sans); color: rgba(58,53,50,.55); pointer-events: none; }
.jm-pinw { background: none; border: 0; }
.jm-pin { position: absolute; transform: translate(-50%, -150%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: #fff; color: #3A3532;
  font: 700 14px/1 var(--sans); padding: 7px 11px 7px 8px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); transition: opacity .6s, transform .6s; }
.jm-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); z-index: -1; }
.jm-pin.below { transform: translate(-50%, 55%); }
.jm-pin.below::after { bottom: auto; top: -5px; }
.jm-pin.trip { background: #EEF5F7; }
.jm-pin .flag { width: 18px; height: 13px; border-radius: 2px; display: block; }
.jm-pin.jm-hide { opacity: 0; transform: translate(-50%, -120%) scale(.7); }
.jm-vehw { background: none; border: 0; }
.jm-veh { position: relative; width: 84px; height: 84px; }
.jm-vbody { position: absolute; left: 50%; top: 50%; width: 56px; height: 36px; margin: -18px 0 0 -28px; transform: rotate(var(--rot, 0deg)); transition: transform .35s ease; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.jm-veh[data-kind="plane"] .jm-vbody { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.jm-vbody svg { width: 100%; height: 100%; display: block; }
.jm-face { position: absolute; left: 50%; top: -6px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px #B08D57, 0 6px 14px rgba(0,0,0,.4); }
.jm-face img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 30%; display: block; }
.jm-face span { display: grid; place-items: center; height: 100%; font-size: 20px; }
.jm-veh.jm-bounce .jm-face { animation: jm-b .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes jm-b { 40% { transform: scale(1.25); } }
/* The story of a move, as the vehicle sets off (big, for a room) */
.jm-narr, .jm-here { position: absolute; left: 50%; transform: translate(-50%, 10px); z-index: 470; max-width: min(640px, calc(100% - 28px)); opacity: 0; transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.jm-narr.in, .jm-here.in { opacity: 1; transform: translate(-50%, 0); }
.jm-narr { top: 14px; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.75); }
.jm-n-head { font-family: var(--serif); font-size: clamp(22px, 3.6vw, 38px); line-height: 1.15; }
.jm-n-body { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 2.2vw, 22px); line-height: 1.4; margin-top: 6px; opacity: .95; }
.jm-n-age { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; color: #E9CF96; }
.jm-here { bottom: 14px; display: flex; align-items: center; gap: 12px; background: rgba(255,253,250,.96); color: #3A3532; border-radius: 16px; padding: 10px 14px 10px 10px; box-shadow: 0 12px 28px -12px rgba(0,0,0,.55); width: max-content; }
.jm-here img, .jm-h-ico { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; background: #F1EADF; font-size: 26px; }
.jm-here b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; }
.jm-here span { display: block; font-size: 14px; color: #6E655F; line-height: 1.35; }
.jm-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.jm-sum.in { opacity: 1; transform: none; }
.jm-sum span { background: var(--pp-card); border-radius: 12px; padding: 8px 12px; font-size: 14px; box-shadow: 0 8px 20px -16px rgba(0,0,0,.5); }
.jm-sum b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--pp-acc); margin-right: 4px; }
/* In the movie: a fade in and out, and room for the controls */
.mv-map .mv-jm { opacity: 0; animation: jm-fade 1.4s ease forwards; }
@keyframes jm-fade { to { opacity: 1; } }
.mv-map .jm-narr { top: 0; padding-top: calc(env(safe-area-inset-top,0px) + 118px); background: linear-gradient(rgba(20,16,14,.92) 55%, rgba(20,16,14,.6) 85%, transparent); }
.mv-map .mv-preview { display: none; }
.mv-map .jm-here { bottom: calc(env(safe-area-inset-bottom,0px) + 236px); }
.mv-map .jm-n-head { font-size: clamp(26px, 5vw, 48px); }
.mv-map .jm-n-body { font-size: clamp(17px, 3vw, 28px); }
.mv-map .jm-here b { font-size: 22px; } .mv-map .jm-here span { font-size: 15px; }
.mv-map .mv-cap.top { display: none; }
.mv-jm { position: absolute; inset: 0; }
.leaflet-container { font-family: var(--sans); }

/* Music choice */
.st-mh { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 8px 0 -2px; }
.st-mh small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mus-menu { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 24px)); max-height: 70vh; overflow-y: auto;
  background: #FFFDFA; color: #3A3532; border-radius: 18px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); animation: noteIn .25s ease both; }
.movie .mus-menu { position: fixed; }
.mm-h { font-family: var(--serif); font-size: 21px; padding: 4px 8px 8px; }
.mm-h small { display: block; font-family: var(--sans); font-size: 12.5px; color: #6E655F; }
.mus-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid transparent; background: none; font: inherit; font-weight: 700; cursor: pointer; color: inherit; }
.mus-menu button small { display: block; font-weight: 400; font-size: 12.5px; color: #6E655F; }
.mus-menu button[aria-checked="true"] { border-color: #B08D57; background: #FFF9EE; }
.pp-hero-acts .pp-mchoose { width: 44px; padding: 0; background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.mv-mus { flex: none; height: 52px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); background: rgba(0,0,0,.35); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus-menu { left: 0; right: 0; margin: 0 auto; top: 14%; transform: none; }
.movie .mus-menu { top: 12%; }
.era-h small { display: none; }
@media (max-width: 620px) {
  .era { grid-template-columns: 44px 1fr; gap: 6px; }
  .era-mark { padding-left: 0; }
  .era-mark .flag, .era-yr, .era-pl { display: none; }
  .era-h small { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-acc); margin-top: 4px; }
  .era-h small .flag { width: 18px; height: 12px; border-radius: 2px; }
}

/* ---------- Movie controls: a tidy panel, caption kept clear above it ---------- */
.mv-ui { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding: 40px 14px calc(env(safe-area-inset-bottom,0px) + 14px);
  background: linear-gradient(transparent, rgba(0,0,0,.72) 32%, rgba(0,0,0,.86)); }
.mv-seek { flex: none; width: 100%; }
.mv-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.mv-skip { position: relative; display: grid; place-items: center; font-size: 0; }
.mv-skip svg { width: 30px; height: 30px; grid-area: 1 / 1; }
.mv-skip b { grid-area: 1 / 1; font: 800 10.5px/1 var(--sans); margin-top: 1px; }
.mv-btn.mv-skip { width: 50px; height: 50px; }
.mv-play { width: 64px; height: 64px; font-size: 20px; }
.mv-edit, .mv-mus { height: 46px; margin: 0; flex: 1; max-width: 200px; }
.mv-mus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mv-mus span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cap { bottom: calc(env(safe-area-inset-bottom,0px) + 230px); }
.mv-title .mv-cap, .mv-end .mv-cap { bottom: 46%; }
@media (max-width: 420px) { .mv-btn.mv-skip { width: 46px; height: 46px; } .mv-play { width: 60px; height: 60px; } .mv-row { gap: 10px; } }
/* Your songs */
.st-tracks { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.st-tracks li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border-radius: 12px; padding: 6px 8px 6px 12px; }
.st-tn { font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tn small { font-weight: 400; color: var(--ink-soft); }
.st-ta { display: flex; gap: 4px; flex: none; }
.st-ta button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.st-ta button:disabled { opacity: .3; }
.st-addtracks { width: 100%; margin: 4px 0 8px; }
.st-addtracks small { font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.mv-btn.mv-x-top { width: auto !important; height: 44px !important; padding: 0 16px; font-size: 15px; border-radius: 999px; }
.mm-g { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6E655F; padding: 10px 12px 4px; }
.mm-add { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed #B08D57; background: #FFF9EE; font: inherit; font-weight: 700; cursor: pointer; color: #3A3532; }
.mm-add small { display: block; font-weight: 400; font-size: 12.5px; color: #6E655F; }
.mm-note { font-size: 12.5px; color: #6E655F; padding: 6px 12px 0; margin: 0; }
.mv-credit { opacity: .7; font-size: 11px; letter-spacing: 0; text-transform: none; }
.pp-credit { display: block; font-size: 12px; margin-top: 4px; }
.jm-narr { top: 0; left: 0; right: 0; max-width: none; transform: translateY(-8px); padding: 14px 18px 20px; background: linear-gradient(rgba(20,16,14,.78), rgba(20,16,14,.55) 70%, transparent); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.jm-narr.in { transform: none; }
.jm-veh.jm-gone { opacity: 0; transition: opacity .8s; }
.jm-root .leaflet-control-zoom { margin-top: 8px; }
.jm-playing .leaflet-control-zoom { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* ---------- Journey map legend ---------- */
.jm-legend { position: absolute; left: 10px; top: 10px; z-index: 480; }
.jl-toggle { height: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,253,250,.95); color: #3A3532; font: 700 13.5px var(--sans); cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.jl-panel { margin-top: 8px; width: min(300px, calc(100vw - 60px)); background: rgba(255,253,250,.97); color: #3A3532; border-radius: 16px; padding: 12px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); animation: noteIn .25s ease both; }
.jl-panel[hidden] { display: none; }
.jl-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.jl-go { flex: 1; height: 40px; font-size: 15px; }
.jl-pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; }
.jl-pause[hidden] { display: none; }
.jl-g { margin-bottom: 8px; }
.jl-g > span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6E655F; margin-bottom: 4px; }
.jl-g .chip { height: 32px; padding: 0 10px; font-size: 13px; }
.jl-auto { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; cursor: pointer; }
.jl-auto input { width: 18px; height: 18px; accent-color: var(--accent-deep); }
.jl-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #6E655F; margin-top: 6px; }
.jl-key i { display: inline-block; width: 22px; height: 0; border-top: 4px solid #B08D57; border-radius: 2px; }
.jl-key i.k-trip { border-top: 3px dashed #2E6F86; }
.jm-legend.inline { position: static; } .jm-legend.inline .jl-panel { width: auto; box-shadow: none; padding: 0; background: none; animation: none; }
.jm-playing .jm-legend .jl-toggle { opacity: .85; }
.jm-noflags .jm-pin .jm-f { display: none; }
.jm-veh[data-kind="face"] .jm-vbody { display: none; }
.jm-veh[data-kind="face"] .jm-face { top: 22px; width: 44px; height: 44px; margin-left: -22px; }
.jm-paused .jm-vbody, .jm-paused .jm-face { filter: saturate(.6); }
.mv-map .jm-legend { display: none; }
.jl-panel { max-height: calc(100% - 60px); overflow-y: auto; }
.jm-legend { max-height: calc(100% - 20px); display: flex; flex-direction: column; }

/* ---------- Page preview: view switch, welcome, sizes ---------- */
.pp-live { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; text-align: left; }
.pp-views { display: inline-flex; gap: 4px; }
.pp-views button { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #E9CF96; background: #fff; font: 700 12px var(--sans); color: #7A5527; cursor: pointer; }
.pp-views button[aria-pressed="true"] { background: #7A5527; color: #fff; border-color: #7A5527; }
.pp-welcome { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.45; max-width: 560px; margin: 12px auto 0; opacity: .95; animation: noteIn 1s ease 1s both; }
.pp-tour { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom,0px) + 70px); z-index: 6; display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); animation: noteIn .6s ease 1.5s both; font-size: 14px; line-height: 1.4; }
.pp-tour strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; margin-bottom: 2px; }
.pp-tour span { display: block; opacity: .9; } .pp-tour b { color: #E9CF96; }
.pp-tour button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.pp-tour.out { opacity: 0; transition: opacity .35s; }
/* Desktop and wide: a composed, magazine-like page */
@media (min-width: 861px) {
  .pp-hero { min-height: 70vh; }
  .pp-hero h1 { font-size: clamp(56px, 7vw, 104px); }
  .pp-sec { padding: 54px 24px 10px; max-width: 900px; }
  .pp-sec h2 { font-size: 40px; }
  .pp-stats { grid-template-columns: repeat(4, 1fr); }
  .pp-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .jm-box { height: 520px; }
  .era { grid-template-columns: 130px 1fr; gap: 20px; }
  .mcard { padding: 20px 24px 16px; }
  .mc-ph { width: 38%; max-width: 300px; }
  .pp-foot { font-size: 14px; }
}
/* Phone in Mobile view: give the big type room and keep every control reachable */
html[data-view="mobile"] .pp-hero { min-height: 58vh; }
html[data-view="mobile"] .pp-live { font-size: 12px; }
html[data-view="mobile"] .pp-stats b { font-size: 36px; }
html[data-view="mobile"] .jm-box { height: 360px; }
html[data-view="mobile"] .pp-studio .btn { font-size: 15px; }
/* Hero: photo fills the whole hero at every size; text sits at the bottom over a soft shade */
.pp-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: #2A2522; }
.pp-hero > .pp-shade { background: linear-gradient(rgba(30,26,24,.05) 30%, rgba(30,26,24,.82)); }
.pp-hero .pp-title, .pp-hero h1, .pp-hero .pp-years, .pp-hero .pp-place, .pp-hero .pp-welcome, .pp-hero-acts { position: relative; z-index: 1; }
@media (min-width: 861px) { .pp-tour { left: 50%; right: auto; transform: translateX(-50%); width: min(620px, calc(100% - 40px)); bottom: 90px; } .pp-tour.out { transform: translateX(-50%); } }

/* ---------- Facebook picker ---------- */
.fb-btn .fb-f { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: #1877F2; color: #fff; font: 900 18px/1 Arial, sans-serif; }
.fb-steps { padding-left: 20px; line-height: 1.55; font-size: 14.5px; margin: 0 0 12px; }
.fb-steps li { margin-bottom: 6px; }
.fb-pick { position: fixed; inset: 0; z-index: 136; background: var(--bg); display: flex; flex-direction: column; animation: noteIn .3s ease both; }
.fb-pick .me-bar h2 { font-size: 20px; }
.fb-pick .fb-add:disabled { opacity: .45; }
.fb-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; font-size: 13.5px; color: var(--ink-soft); background: var(--card); border-bottom: 1px solid var(--line); }
.fb-info label { display: flex; gap: 6px; align-items: center; color: var(--ink); font-weight: 600; }
.fb-body { flex: 1; overflow-y: auto; padding: 10px 12px 40px; }
.fb-yh { display: flex; align-items: baseline; gap: 8px; margin: 14px 2px 8px; }
.fb-yh b { font-family: var(--serif); font-size: 24px; font-weight: 500; } .fb-yh span { color: var(--ink-soft); font-size: 13px; flex: 1; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.fb-ph { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #E9E1D3; cursor: pointer; }
.fb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.fb-ph span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; line-height: 1.25; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.7)); max-height: 46%; overflow: hidden; }
.fb-ph i { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); color: transparent; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; }
.fb-ph[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.fb-ph[aria-pressed="true"] img { transform: scale(.92); border-radius: 8px; }
.fb-ph[aria-pressed="true"] i { background: var(--accent); color: #fff; }

/* ---------- Movie readability: captions on a frosted panel, calmer top ---------- */
.mv-scene::after { background: linear-gradient(rgba(0,0,0,.25), transparent 22%, transparent 45%, rgba(0,0,0,.72) 100%); }
.mv-cap { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: min(680px, calc(100% - 32px)); box-sizing: border-box;
  padding: 16px 22px; border-radius: 20px; background: rgba(22,18,16,.62); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mv-scene.in .mv-cap { animation: cap-in 1.1s ease .3s both; }
@keyframes cap-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mv-cap p.q { font-style: normal; font-size: clamp(21px, 4.4vw, 34px); line-height: 1.35; }
.mv-cap p { line-height: 1.3; }
.mv-cap:empty { display: none; }
.mv-title .mv-cap, .mv-end .mv-cap { padding: 22px 28px; }
.mv-map .mv-cap, .mv-timeline .mv-cap { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Top: Close and PREVIEW share a row; the long note says its piece, then fades */
.mv-preview { top: calc(env(safe-area-inset-top,0px) + 16px); right: 14px; }
.mv-preview b { font-size: 12px; padding: 6px 10px; }
.mv-preview span { display: none; }
.mv-note { top: calc(env(safe-area-inset-top,0px) + 70px); padding: 0 18px; text-align: center; animation: note-fade 7s ease forwards; }
@keyframes note-fade { 0%, 75% { opacity: .75; } 100% { opacity: 0; visibility: hidden; } }
.mv-map .jm-narr { padding-top: calc(env(safe-area-inset-top,0px) + 72px); }
.bc-studio { white-space: normal; min-width: 0; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; padding: 12px 16px; height: auto; }
.bc-studio b { font-weight: 800; }
.bc-studio small { font-weight: 600; font-size: 13px; opacity: .7; }
.bc-row .btn { white-space: normal; min-width: 0; line-height: 1.2; }

/* ---------- Movie: controls hide while playing; captions sit low ---------- */
.movie .mv-ui, .movie .mv-x-top, .movie .mv-preview, .movie .mv-note { transition: opacity .5s ease, transform .5s ease; }
.movie.ui-off .mv-ui { opacity: 0; transform: translateY(24px); pointer-events: none; }
.movie.ui-off .mv-x-top, .movie.ui-off .mv-preview, .movie.ui-off .mv-note { opacity: 0; pointer-events: none; }
.movie.ui-off { cursor: none; }
.mv-cap, .mv-title .mv-cap, .mv-end .mv-cap { top: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 250px); transition: bottom .6s ease; }
.movie.ui-off .mv-cap { bottom: calc(env(safe-area-inset-bottom,0px) + 36px); }
.movie.ui-off .mv-scene::after { background: linear-gradient(rgba(0,0,0,.1), transparent 20%, transparent 55%, rgba(0,0,0,.6) 100%); }
/* No photo behind it: the words stay in the middle of the screen, on their own */
.mv-scene.noimg .mv-cap, .movie.ui-off .mv-scene.noimg .mv-cap { top: 50%; bottom: auto; transform: translate(-50%, -50%); transition: none; }
.mv-scene.noimg.in .mv-cap { animation: cap-mid 1.1s ease .3s both; }
@keyframes cap-mid { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.mv-cap small.mv-credit { display: block; margin-top: 14px; text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.4; opacity: .6; }
/* Hero buttons: Watch on its own row, music beneath; long track names trim instead of spilling out */
.pp-hero-acts { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; width: min(100%, 420px); margin-left: auto; margin-right: auto; }
.pp-hero-acts .pp-watch { grid-column: 1 / -1; }
.pp-hero-acts button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 46px; }

/* ---------- Keeping the memory alive: reactions + memories on each moment ---------- */
.mc-live { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(60,45,30,.14); }
.mr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mr-e { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 32px; min-width: 38px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(60,45,30,.14); background: #fff; font-size: 15px; line-height: 1; cursor: pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.mr-e b { font: 700 12px/1 var(--sans, system-ui); color: #6b5a48; }
.mr-e.on { background: #fbf1e3; border-color: #c9a46c; }
.mr-e:active { transform: scale(.92); }
.mr-e.pop { animation: mr-pop .45s ease; }
@keyframes mr-pop { 40% { transform: scale(1.25); } }
.mr-e b.tick { animation: mr-tick .5s ease both; }
@keyframes mr-tick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mr-float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); pointer-events: none; animation: mr-up .9s ease-out forwards; font-size: 18px; }
@keyframes mr-up { to { opacity: 0; transform: translate(-50%, -34px) scale(1.4); } }
.mr-add { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: #3a2f28; color: #fff; font: 700 13px var(--sans, system-ui); cursor: pointer; }
.mr-mem { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #faf6ef; }
.mr-mem.ex { background: repeating-linear-gradient(135deg, #faf6ef 0 10px, #f6efe3 10px 20px); border: 1px dashed #d9c3a0; }
.mr-mem.new { animation: mr-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mr-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.mr-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #b08d57; color: #fff; font: 700 15px var(--sans, system-ui); font-style: normal; }
.mr-mem > div { min-width: 0; }
.mr-who { font: 13px/1.3 var(--sans, system-ui); color: #6b5a48; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mr-who b { color: #2c241e; }
.mr-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: #efe3cf; color: #7a5a2e; }
.mr-on { font: 12px var(--sans, system-ui); color: #8a7663; margin-top: 2px; }
.mr-mem p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; color: #2c241e; }
.mr-typing { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 13px var(--sans, system-ui); color: #8a7663; animation: mr-in .4s ease both; }
.mr-typing em { display: inline-flex; gap: 3px; }
.mr-typing em i { width: 6px; height: 6px; border-radius: 50%; background: #b08d57; animation: mr-dot 1s infinite ease-in-out; }
.mr-typing em i:nth-child(2) { animation-delay: .15s; } .mr-typing em i:nth-child(3) { animation-delay: .3s; }
@keyframes mr-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.pm-list { display: grid; gap: 4px; margin: 6px 0 16px; }
.pp-mem .pm-add { width: 100%; max-width: 360px; }
.pm-lock { font: 13px/1.5 var(--sans, system-ui); color: #8a7663; margin-top: 12px; }
.pp-memtip { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom,0px) + 84px); z-index: 30; display: flex; align-items: flex-start; gap: 12px; max-width: 560px; margin: 0 auto; padding: 14px 16px; border-radius: 18px; background: #3a2f28; color: #fff; font: 14px/1.45 var(--sans, system-ui); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); animation: mr-in .5s ease both; }
.pp-memtip > span { font-size: 22px; }
.pp-memtip button { flex: none; align-self: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: #2c241e; font-weight: 800; cursor: pointer; }
.pp-memtip.out { opacity: 0; transform: translateY(10px); transition: .35s ease; }
/* The sign-in / write sheet */
.mem-sheet { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(30,24,20,.45); animation: fadeIn .2s ease both; }
.mem-sheet.out { opacity: 0; transition: opacity .25s ease; }
.ms-card { position: relative; width: 100%; max-width: 520px; max-height: 92%; overflow: auto; box-sizing: border-box; padding: 18px 20px calc(env(safe-area-inset-bottom,0px) + 20px); border-radius: 22px 22px 0 0; background: #fffdf9; animation: ms-up .35s cubic-bezier(.2,.8,.2,1) both; font-family: var(--sans, system-ui); }
@media (min-width: 640px) { .mem-sheet { align-items: center; } .ms-card { border-radius: 22px; } }
@keyframes ms-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ms-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f2ebe0; font-size: 16px; cursor: pointer; }
.ms-demo { display: inline-block; margin: 0 44px 10px 0; padding: 4px 10px; border-radius: 999px; background: #fbf1e3; color: #7a5a2e; font-size: 12px; font-weight: 700; }
.ms-card h3 { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 24px; margin: 4px 0 4px; color: #2c241e; }
.ms-sub { margin: 0 0 14px; color: #6b5a48; font-size: 14px; line-height: 1.45; }
.ms-card label { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #4a3d33; }
.ms-card label small { font-weight: 500; color: #8a7663; }
.ms-card input, .ms-card textarea, .ms-card select { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e2d6c4; background: #fff; font: 16px/1.4 var(--sans, system-ui); color: #2c241e; }
.ms-card textarea { resize: vertical; min-height: 120px; }
.ms-card input:focus, .ms-card textarea:focus, .ms-card select:focus { outline: none; border-color: #b08d57; box-shadow: 0 0 0 3px rgba(176,141,87,.18); }
.ms-vis { display: flex; gap: 8px; margin: 2px 0 14px; }
.ms-vis button { flex: 1; height: 42px; border-radius: 999px; border: 1.5px solid #e2d6c4; background: #fff; font: 700 14px var(--sans, system-ui); color: #4a3d33; cursor: pointer; }
.ms-vis button[aria-pressed="true"] { border-color: #b08d57; background: #fbf1e3; }
.ms-err { color: #a3402f; font-size: 14px; margin: -4px 0 10px; }
.ms-card .ms-go { width: 100%; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- QR code for gatherings ---------- */
.qr-card { display: flex; gap: 18px; align-items: flex-start; margin: 22px 0 6px; padding: 18px; border-radius: 18px; background: #fffdf9; border: 1px solid rgba(60,45,30,.1); box-shadow: 0 10px 30px -22px rgba(60,40,20,.45); font-family: var(--sans, system-ui); }
.st-card .qr-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.qr-box { flex: none; width: 132px; height: 132px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid #eadfcd; box-sizing: border-box; display: grid; place-items: center; font-size: 12px; color: #8a7663; text-align: center; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-text { min-width: 0; }
.qr-text h3 { margin: 0 0 6px; font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 21px; color: #2c241e; }
.qr-text p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: #5a4b3f; }
.qr-text .qr-priv { font-size: 13.5px; color: #6b5a48; }
.qr-acts { margin: 10px 0 6px; }
.qr-note { font-size: 12px !important; color: #9a8672 !important; margin: 0 !important; }
@media (max-width: 480px) { .qr-card { flex-direction: column; align-items: center; text-align: center; } .qr-box { width: 168px; height: 168px; } }
/* The printable table card */
.qr-print { position: fixed; inset: 0; z-index: 400; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: calc(env(safe-area-inset-top,0px) + 20px) 16px calc(env(safe-area-inset-bottom,0px) + 24px); background: rgba(30,24,20,.6); animation: fadeIn .2s ease both; }
.qrp-card { width: min(100%, 360px); box-sizing: border-box; padding: 28px 24px 22px; border-radius: 6px; background: #fffdf8; color: #2c241e; text-align: center; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.qrp-ph { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
.qrp-name { margin-top: 12px; font-family: var(--serif, Georgia, serif); font-size: 30px; line-height: 1.15; }
.qrp-yr { margin-top: 4px; font: 600 14px var(--sans, system-ui); color: #8a7663; letter-spacing: .1em; }
.qrp-ask { margin: 18px 0 10px; font: 700 13px var(--sans, system-ui); letter-spacing: .22em; text-transform: uppercase; color: #8c6a3c; }
.qrp-qr { width: 200px; height: 200px; margin: 0 auto; }
.qrp-qr svg { width: 100%; height: 100%; display: block; }
.qrp-how { margin-top: 10px; font: 14px var(--sans, system-ui); color: #5a4b3f; }
.qrp-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eadfcd; font: italic 15px var(--serif, Georgia, serif); color: #8a7663; }
.qrp-acts { display: flex; gap: 10px; }
.qrp-acts .qrp-x { background: #fff; }
@media print {
  html.printing-card body > *:not(.qr-print) { display: none !important; }
  html.printing-card .qr-print { position: static; background: none; padding: 0; animation: none; }
  html.printing-card .qrp-acts { display: none; }
  html.printing-card .qrp-card { box-shadow: none; border: 1px solid #ddd; margin: 20mm auto 0; }
}

/* ---------- Reactions, Facebook-style: one React button, emojis pop out ---------- */
.mc-live { position: relative; }
.mr-row { position: relative; gap: 10px; }
.mr-react { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid rgba(60,45,30,.16); background: #fff; font: 700 14px var(--sans, system-ui); color: #4a3d33; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mr-react .mr-mine { font-size: 19px; line-height: 1; }
.mr-react.on { background: #fbf1e3; border-color: #c9a46c; color: #7a5a2e; }
.mr-react.pop .mr-mine { animation: mr-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes mr-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.45); } 100% { transform: none; } }
.mr-sum { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--sans, system-ui); color: #6b5a48; }
.mr-stack { display: inline-flex; }
.mr-stack i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #fffdf9; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-size: 14px; }
.mr-stack i:first-child { margin-left: 0; }
.mr-sum.tick, .mr-sum.bump { animation: mr-pop .5s ease; }
.mr-tray { position: absolute; left: -4px; bottom: calc(100% + 10px); z-index: 20; display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -8px rgba(40,25,10,.35), 0 0 0 1px rgba(60,45,30,.06); animation: tray-in .22s cubic-bezier(.2,1.4,.4,1) both; transform-origin: 30px 100%; }
.mr-tray.out { animation: tray-out .18s ease forwards; }
@keyframes tray-in { from { opacity: 0; transform: translateY(8px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tray-out { to { opacity: 0; transform: translateY(6px) scale(.8); } }
.mr-t { position: relative; width: 46px; height: 46px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.mr-t span { font-size: 30px; line-height: 1; display: block; transition: transform .16s cubic-bezier(.3,1.6,.5,1); animation: emo-in .45s cubic-bezier(.3,1.7,.5,1) both; animation-delay: calc(var(--k) * 45ms); }
@keyframes emo-in { from { opacity: 0; transform: translateY(16px) scale(.3); } to { opacity: 1; transform: none; } }
.mr-t i { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) scale(.8); padding: 3px 8px; border-radius: 999px; background: rgba(30,24,20,.85); color: #fff; font: 700 11px var(--sans, system-ui); font-style: normal; white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s ease; }
.mr-t.hot span, .mr-t:hover span { transform: translateY(-10px) scale(1.4); }
.mr-t.hot i, .mr-t:hover i { opacity: 1; transform: translateX(-50%) scale(1); }
.mr-t.on::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #b08d57; }
@media (max-width: 380px) { .mr-t { width: 40px; height: 40px; } .mr-t span { font-size: 26px; } }
/* Private-for-family lock on a memory */
.ms-lock { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 16px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid #e2d6c4; background: #fff; text-align: left; cursor: pointer; font-family: var(--sans, system-ui); transition: background .2s ease, border-color .2s ease; }
.ms-lock.on { background: #f3ede2; border-color: #8c6a3c; }
.ml-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: #f6efe3; }
.ms-lock.on .ml-ico { background: #3a2f28; }
.ms-lock.snap .ml-ico { animation: mr-pop .45s cubic-bezier(.3,1.6,.5,1); }
.ml-t { flex: 1; min-width: 0; }
.ml-t b { display: block; font-size: 15px; color: #2c241e; }
.ml-t small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #6b5a48; }
.ml-sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: #d9cdbb; transition: background .2s ease; }
.ml-sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.ms-lock.on .ml-sw { background: #8c6a3c; }
.ms-lock.on .ml-sw i { transform: translateX(18px); }
.ms-hint { margin: -2px 0 14px; font-size: 13.5px; color: #6b5a48; }

/* ---------- Mute: off by default on the page and in the movie ---------- */
.pp-snd { position: absolute; z-index: 25; left: 14px; bottom: calc(env(safe-area-inset-bottom,0px) + 22px); display: inline-flex; align-items: center; gap: 8px; height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(40,32,27,.88); color: #fff; font: 700 14px var(--sans, system-ui); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pp-snd svg, .mv-snd svg { width: 22px; height: 22px; flex: none; }
.pp-snd.on { padding: 0; width: 48px; justify-content: center; background: #b08d57; }
.pp-snd.on svg { animation: snd-wave 1.6s ease-in-out infinite; }
@keyframes snd-wave { 50% { transform: scale(1.12); } }
.mv-snd { position: fixed; z-index: 6; top: calc(env(safe-area-inset-top,0px) + 12px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #2c241e; font: 800 14px var(--sans, system-ui); cursor: pointer; transition: opacity .5s ease; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.mv-snd.on { background: rgba(176,141,87,.95); color: #fff; }
.movie.ui-off .mv-snd { opacity: 0; pointer-events: none; }
@media (max-width: 400px) { .mv-snd span { display: none; } .mv-snd { width: 44px; padding: 0; justify-content: center; } }

/* ---------- Your stories (home page) and the shelf in the Exit box ---------- */
.my-stories { margin: 8px 0 22px; padding: 18px; border-radius: 20px; background: #fffdf9; border: 1px solid rgba(60,45,30,.12); box-shadow: 0 12px 30px -24px rgba(60,40,20,.5); }
.my-stories h2 { margin: 0 0 4px; font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 24px; }
.my-stories > p { margin: 0 0 12px; font-size: 14.5px; color: #6b5a48; }
.ms-item, .shelf-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid #eadfcd; background: #fff; color: #2c241e; text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.ms-item img, .shelf-item img, .ms-ph, .shelf-ph { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ms-ph, .shelf-ph { display: grid; place-items: center; background: #b08d57; color: #fff; font-weight: 800; font-size: 20px; }
.ms-item > span, .shelf-item > span { flex: 1; min-width: 0; }
.ms-item b, .shelf-item b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-item small, .shelf-item small { display: block; font-size: 13px; color: #8a7663; }
.ms-item i, .shelf-item i { flex: none; font-style: normal; font-weight: 800; font-size: 14px; color: #8c6a3c; }
.ms-new { display: block; margin-top: 12px; padding: 12px; border-radius: 14px; border: 1.5px dashed #c9a46c; text-align: center; font-weight: 800; color: #7a5a2e; text-decoration: none; }
.leave-new { width: 100%; margin-top: 14px; }
.leave-new-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: #6b5a48; text-align: center; }
.shelf { margin-top: 16px; text-align: left; }
.shelf > strong { display: block; font-size: 14px; color: #4a3d33; }
.ms-item > span.ms-ph, .shelf-item > span.shelf-ph { flex: none; width: 48px; }

/* ---------- Memory ticker: memories scroll along a banner ---------- */
.mtk { position: absolute; left: 0; right: 0; z-index: 4; display: flex; align-items: center; height: 46px; background: rgba(20,16,13,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: var(--sans, system-ui); overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); }
.mtk-lab { flex: none; height: 100%; display: flex; align-items: center; padding: 0 12px 0 14px; background: #b08d57; font-weight: 800; font-size: 13px; letter-spacing: .02em; white-space: nowrap; box-shadow: 8px 0 14px -6px rgba(0,0,0,.4); z-index: 1; }
.mtk-win { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent); }
.mtk-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.mtk-i { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 28px 0 0; font-size: 16px; }
.mtk-i::after { content: "✦"; margin-left: 22px; color: #e3c48f; font-size: 12px; }
.mtk-i b { font-weight: 800; color: #f3dcb1; }
.mtk-i small { font-size: 13px; opacity: .7; }
.mtk-i em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.16); color: #f3dcb1; }
.mtk-i em.new { background: #e3c48f; color: #2c241e; }
.mtk-i q { quotes: "“" "”"; }
.mtk-i.fresh q { animation: mtk-flash 2.4s ease 2; }
@keyframes mtk-flash { 50% { color: #ffe6b3; text-shadow: 0 0 12px rgba(255,214,140,.7); } }
/* In the movie: above the controls, or along the very bottom once they step aside */
.movie .mtk { bottom: calc(env(safe-area-inset-bottom,0px) + 188px); transition: bottom .5s ease; }
.movie.ui-off .mtk { bottom: env(safe-area-inset-bottom,0px); }
.movie.has-tk .mv-cap, .movie.has-tk .mv-title .mv-cap, .movie.has-tk .mv-end .mv-cap { bottom: calc(env(safe-area-inset-bottom,0px) + 250px); }
.movie.has-tk.ui-off .mv-cap { bottom: calc(env(safe-area-inset-bottom,0px) + 70px); }
.movie.has-tk .mv-scene.noimg .mv-cap { bottom: auto; }
.mv-row .mv-mem { flex: 1; min-width: 0; height: 48px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: 700 14px var(--sans, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; cursor: pointer; }
.mv-row .mv-mem[aria-pressed="true"] { background: rgba(176,141,87,.35); border-color: #e3c48f; }
.mv-row .mv-mus, .mv-row .mv-edit { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-memk { display: block; font: 700 12px var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: #f3dcb1; margin-bottom: 8px; }
.mv-who { display: block; margin-top: 10px; font: 600 15px var(--sans, system-ui); color: #f3dcb1; }
.mtk-pop { position: absolute; z-index: 8; top: calc(env(safe-area-inset-top,0px) + 70px); left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: rgba(255,253,249,.96); color: #2c241e; font: 14px var(--sans, system-ui); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); white-space: nowrap; animation: mr-in .5s ease both; }
.mtk-pop em { font-style: normal; color: #8a7663; }
.mtk-pop.out { opacity: 0; transition: opacity .5s ease; }
/* Gathering screen: loops, QR in the corner, the banner leaves room for it */
.movie.gathering .mtk { right: 0; }
.mv-qr { position: absolute; z-index: 5; right: 14px; bottom: calc(env(safe-area-inset-bottom,0px) + 58px); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; background: rgba(255,253,249,.95); color: #2c241e; font-family: var(--sans, system-ui); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); transition: bottom .5s ease; }
.movie.gathering:not(.ui-off) .mv-qr { bottom: calc(env(safe-area-inset-bottom,0px) + 246px); }
.mv-qr .qr-box { width: 86px; height: 86px; padding: 3px; border: 0; }
.mv-qr b { display: block; font-size: 15px; }
.mv-qr span { display: block; font-size: 12px; color: #6b5a48; max-width: 110px; }
.movie.gathering.has-tk.ui-off .mv-cap { bottom: calc(env(safe-area-inset-bottom,0px) + 170px); }
.mv-gtag { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top,0px) + 14px); padding: 6px 12px; border-radius: 999px; background: rgba(176,141,87,.92); color: #fff; font: 700 12px var(--sans, system-ui); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.movie.gathering .mv-preview, .movie.gathering .mv-note { display: none; }
.movie.gathering .mv-snd { top: calc(env(safe-area-inset-top,0px) + 52px); }
@media (min-width: 900px) { .mv-qr .qr-box { width: 150px; height: 150px; } .mv-qr b { font-size: 20px; } .mv-qr span { font-size: 14px; max-width: 150px; } .mtk { height: 58px; } .mtk-i { font-size: 21px; } }
/* On the page: a banner along the foot of the header photo */
.pp-hero.has-tk-hero { padding-bottom: 60px; }
.mtk.mtk-hero { bottom: 0; z-index: 2; }
.pm-gather { width: 100%; max-width: 420px; margin-top: 14px; }
.pm-gather-note { font: 13.5px/1.45 var(--sans, system-ui); color: #6b5a48; margin: 8px 0 0; }
/* fixes: hero banner spans the photo; gathering top row; QR placement on phones; centred pop */
.pp-hero > .mtk.mtk-hero { position: absolute !important; left: 0; right: 0; bottom: 0; width: auto; margin: 0; animation: none; }
.mv-gtag { top: calc(env(safe-area-inset-top,0px) + 66px); white-space: normal; text-align: center; line-height: 1.35; width: max-content; }
.movie.gathering .mv-snd { top: calc(env(safe-area-inset-top,0px) + 12px); }
.mtk-pop { left: 0; right: 0; margin: 0 auto; transform: none; width: max-content; max-width: calc(100% - 24px); top: calc(env(safe-area-inset-top,0px) + 116px); }
@media (max-width: 760px) {
  .mv-qr, .movie.gathering:not(.ui-off) .mv-qr { top: calc(env(safe-area-inset-top,0px) + 120px); bottom: auto; right: 12px; }
  .mtk-pop { top: calc(env(safe-area-inset-top,0px) + 240px); }
}
.mv-row .mv-mem[aria-pressed="false"] { opacity: .7; }

/* ---------- Live memories + author editing ---------- */
.mr-tag.live { background: #e7f1e4; color: #2f6a3a; }
.mr-mem.live { box-shadow: 0 0 0 2px rgba(78,140,90,.35); }
.mr-ed { font-size: 11.5px; color: #9a8672; font-style: italic; }
.mr-edit { margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid #d9c9b1; background: #fff; font: 700 13px var(--sans, system-ui); color: #6b4f2a; cursor: pointer; }
.ms-del { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 0; background: none; font: 700 14px var(--sans, system-ui); color: #a3402f; text-decoration: underline; cursor: pointer; }
.ms-del.sure { background: #fbe9e5; border-radius: 12px; text-decoration: none; }
.pp-live-pop { position: absolute; z-index: 35; left: 12px; right: 12px; top: 120px; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fffdf9; color: #2c241e; font: 14px/1.4 var(--sans, system-ui); box-shadow: 0 18px 40px -16px rgba(0,0,0,.45), 0 0 0 1px rgba(60,45,30,.08); animation: live-in .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes live-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.pp-live-pop.out { opacity: 0; transform: translateY(-8px); transition: .35s ease; }
.pp-live-pop > div { flex: 1; min-width: 0; }
.pp-live-pop small { display: block; margin-top: 2px; font-size: 12px; color: #6b8a6f; }
.pp-live-pop button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: #3a2f28; color: #fff; font-weight: 800; cursor: pointer; }
.lp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3c9a52; box-shadow: 0 0 0 0 rgba(60,154,82,.6); animation: lp-pulse 1.4s ease-out infinite; }
@keyframes lp-pulse { to { box-shadow: 0 0 0 10px rgba(60,154,82,0); } }
.shelf-top { margin: 0 0 22px; padding: 16px; border-radius: 18px; background: #fffdf9; border: 1px solid rgba(60,45,30,.12); }
.shelf-top > strong { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 21px; color: #2c241e; }
.shelf-or { margin: 10px 0 0; font-size: 14px; color: #8a7663; }

/* ---------- Your account ---------- */
.acct { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; background: rgba(30,24,20,.45); animation: fadeIn .2s ease both; }
@media (min-width: 640px) { .acct { align-items: center; } .ac-card { border-radius: 22px !important; } }
.ac-card { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; box-sizing: border-box; padding: 22px 20px calc(env(safe-area-inset-bottom,0px) + 22px); border-radius: 22px 22px 0 0; background: #fffdf9; animation: ms-up .35s cubic-bezier(.2,.8,.2,1) both; }
.ac-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f2ebe0; font-size: 16px; cursor: pointer; }
.ac-card h2 { margin: 2px 44px 6px 0; font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 28px; color: #2c241e; }
.ac-card h3 { margin: 20px 0 4px; font: 800 13px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #8c6a3c; }
.ac-sub { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #4a3d33; word-break: break-word; }
.ac-ok { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e7f1e4; color: #2f6a3a; font-size: 12.5px; font-weight: 700; }
.ac-warn { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fbf1e3; color: #8c5a1c; font-size: 12.5px; font-weight: 700; }
.ac-hint, .ac-small, .ac-empty { font-size: 13.5px; line-height: 1.45; color: #6b5a48; margin: 6px 0; }
.ac-small { margin-top: 14px; color: #8a7663; }
.ac-form { display: grid; gap: 10px; margin-top: 10px; }
.ac-note { font-size: 14px; line-height: 1.45; color: #4a3d33; background: #faf3e7; border-radius: 12px; padding: 10px 12px; }
.ac-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid #eadfcd; background: #fff; color: #2c241e; text-align: left; font: inherit; cursor: pointer; }
.ac-row.cur { cursor: default; background: #faf6ef; }
.ac-row img, .ac-row .shelf-ph { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ac-row > span:not(.shelf-ph) { flex: 1; min-width: 0; }
.ac-row b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-row small { display: block; font-size: 13px; color: #8a7663; }
.ac-row i { flex: none; font-style: normal; font-weight: 800; font-size: 14px; color: #8c6a3c; }
.ac-new { width: 100%; margin-top: 16px; }
.ac-out { display: block; margin: 14px auto 0; border: 0; background: none; font: 700 14px var(--sans, system-ui); color: #8a7663; text-decoration: underline; cursor: pointer; }

/* ---------- Keep it simple: full screen, big type, big buttons ---------- */
.bx { position: fixed; inset: 0; z-index: 115; display: flex; flex-direction: column; background: #f7f3ee; color: #2c241e; font-family: var(--sans, system-ui); font-size: 20px; }
html.basic-on .photo-toast { z-index: 150; bottom: 120px; }
.bx-top { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top,0px) + 10px) 14px 10px; border-bottom: 1px solid rgba(60,45,30,.08); background: #fffdf9; }
.bx-back { flex: none; height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #d9cdbb; background: #fff; font: 700 17px var(--sans, system-ui); color: #2c241e; cursor: pointer; }
.bx-back[hidden] { visibility: hidden; display: block; }
.bx-prog { flex: 1; min-width: 0; text-align: center; }
.bx-prog span { display: block; font-size: 15px; font-weight: 700; color: #6b5a48; }
.bx-prog i { display: block; height: 8px; margin: 6px auto 0; max-width: 220px; border-radius: 999px; background: #e9dfd0; overflow: hidden; }
.bx-prog b { display: block; height: 100%; background: #b08d57; border-radius: 999px; transition: width .4s ease; }
.bx-more { flex: none; border: 0; background: none; font: 600 14px var(--sans, system-ui); color: #8a7663; text-decoration: underline; cursor: pointer; padding: 8px 4px; }
.bx-main { flex: 1; overflow: auto; padding: 26px 22px 30px; max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.bx-main.in { animation: bx-in .4s ease both; }
@keyframes bx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bx-main h1 { margin: 0 0 10px; font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: clamp(30px, 8vw, 40px); line-height: 1.15; }
.bx-hint { margin: 6px 0 18px; font-size: 19px; line-height: 1.45; color: #5a4b3f; }
.bx-kicker { margin: 0 0 6px; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8c6a3c; }
.bx-say { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #e2d6c4; background: #fff; font: 700 16px var(--sans, system-ui); color: #6b4f2a; cursor: pointer; }
.bx-cards { display: grid; gap: 14px; margin-top: 8px; }
.bx-card { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 92px; padding: 16px 18px; border-radius: 22px; border: 2px solid #e2d6c4; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 8px 20px -16px rgba(60,40,20,.5); }
.bx-card[aria-pressed="true"] { border-color: #b08d57; background: #fbf1e3; }
.bx-ico { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; background: #f6efe3; }
.bx-card b { display: block; font-size: 22px; }
.bx-card small { display: block; margin-top: 2px; font-size: 17px; color: #6b5a48; }
.bx-lab { display: block; margin: 18px 0 8px; font-size: 18px; font-weight: 800; }
.bx-in { display: block; width: 100%; box-sizing: border-box; height: 66px; padding: 0 18px; border-radius: 18px; border: 2px solid #d9cdbb; background: #fff; font: 22px var(--sans, system-ui); color: #2c241e; }
.bx-in:focus { outline: none; border-color: #b08d57; box-shadow: 0 0 0 4px rgba(176,141,87,.2); }
.bx-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(env(safe-area-inset-bottom,0px) + 14px); background: #fffdf9; border-top: 1px solid rgba(60,45,30,.08); max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.bx-next { width: 100%; min-height: 66px; border-radius: 999px; border: 0; background: #8c6a3c; color: #fff; font: 800 22px var(--sans, system-ui); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(100,70,30,.7); }
.bx-next:disabled { background: #d7c9b4; box-shadow: none; }
.bx-soft { width: 100%; min-height: 54px; border-radius: 999px; border: 2px solid #d9cdbb; background: #fff; font: 700 19px var(--sans, system-ui); color: #4a3d33; cursor: pointer; }
.bx-big { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 96px; border-radius: 24px; border: 2px dashed #b08d57; background: #fffdf9; font-size: 24px; font-weight: 800; color: #6b4f2a; cursor: pointer; box-sizing: border-box; }
.bx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.bx-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.bx-grid img.main { outline: 4px solid #b08d57; outline-offset: -4px; }
.bx-busy, .bx-adding { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 19px; color: #5a4b3f; }
.bx-dot { width: 14px; height: 14px; border-radius: 50%; background: #b08d57; animation: lp-pulse 1.2s ease-out infinite; box-shadow: 0 0 0 0 rgba(176,141,87,.6); }
.bx-talk { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 10px; }
.bx-mic { width: 150px; height: 150px; border-radius: 50%; border: 0; background: #8c6a3c; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 18px 40px -16px rgba(100,70,30,.8); transition: background .2s ease, transform .15s ease; }
.bx-mic svg { width: 62px; height: 62px; }
.bx-mic:active { transform: scale(.96); }
.bx-mic.on { background: #c0392b; animation: bx-rec 1.4s ease-out infinite; }
@keyframes bx-rec { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.55); } 100% { box-shadow: 0 0 0 34px rgba(192,57,43,0); } }
.bx-mic.busy { background: #b9a587; animation: none; }
.bx-mic-say { margin: 18px 0 6px; font-size: 21px; line-height: 1.45; color: #4a3d33; }
.bx-stop { color: #c0392b; }
.bx-time { font-variant-numeric: tabular-nums; font-size: 18px; color: #6b5a48; }
.bx-type { margin-top: 10px; border: 0; background: none; font: 700 18px var(--sans, system-ui); color: #6b4f2a; text-decoration: underline; cursor: pointer; padding: 10px; }
.bx-review { width: 100%; text-align: left; }
.bx-heard { font-size: 18px; color: #5a4b3f; margin: 0 0 8px; }
.bx-text { display: block; width: 100%; box-sizing: border-box; min-height: 170px; padding: 14px 16px; border-radius: 18px; border: 2px solid #d9cdbb; background: #fff; font: 20px/1.5 var(--sans, system-ui); color: #2c241e; resize: vertical; }
.bx-text:focus { outline: none; border-color: #b08d57; }
.bx-revacts { display: grid; gap: 10px; margin-top: 12px; }
.bx-yes { min-height: 64px; border-radius: 999px; border: 0; background: #3c7a4a; color: #fff; font: 800 21px var(--sans, system-ui); cursor: pointer; }
.bx-again { min-height: 54px; border-radius: 999px; border: 2px solid #d9cdbb; background: #fff; font: 700 18px var(--sans, system-ui); color: #4a3d33; cursor: pointer; }
.bx-err { color: #a3402f; font-size: 18px; margin-top: 10px; }
.bx-make { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.bx-make li { display: flex; align-items: center; gap: 12px; font-size: 21px; color: #9a8672; }
.bx-make li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #e2d6c4; box-sizing: border-box; flex: none; }
.bx-make li.on { color: #2c241e; } .bx-make li.on::before { border-color: #b08d57; border-top-color: transparent; animation: spin .8s linear infinite; }
.bx-make li.done { color: #2c241e; } .bx-make li.done::before { content: "✓"; display: grid; place-items: center; background: #3c7a4a; border-color: #3c7a4a; color: #fff; font-size: 15px; font-weight: 800; }
@keyframes spin { to { transform: rotate(360deg); } }
.bx-done-art { font-size: 56px; margin-bottom: 4px; }
.bx-outs { display: grid; gap: 14px; margin: 18px 0 14px; }
.bx-out { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 84px; border-radius: 24px; border: 0; background: #8c6a3c; color: #fff; font: 800 24px var(--sans, system-ui); cursor: pointer; box-shadow: 0 14px 30px -16px rgba(100,70,30,.8); }
.bx-out.bx-page { background: #3a2f28; }
.bx-small { margin-top: 14px; font-size: 16px; color: #8a7663; }
/* The first question of a new journey */
.mode-ask { position: fixed; inset: 0; z-index: 118; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(247,243,238,.97); animation: fadeIn .25s ease both; }
.mode-ask.out { opacity: 0; transition: opacity .25s ease; }
.ma-card { width: 100%; max-width: 560px; }
.ma-card h1 { margin: 0 0 6px; font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: clamp(30px, 8vw, 40px); line-height: 1.15; color: #2c241e; }
.ma-card > p { margin: 0 0 20px; font-size: 18px; color: #6b5a48; }
.ma-opt { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; margin-bottom: 14px; padding: 20px 18px; border-radius: 24px; border: 2px solid #e2d6c4; background: #fff; text-align: left; font: inherit; color: #2c241e; cursor: pointer; box-shadow: 0 10px 24px -18px rgba(60,40,20,.6); }
.ma-basic { border-color: #b08d57; background: #fffaf1; }
.ma-ico { flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; background: #f6efe3; }
.ma-opt b { display: block; font-size: 23px; font-family: var(--sans, system-ui); }
.ma-opt small { display: block; margin-top: 4px; font-size: 16.5px; line-height: 1.4; color: #6b5a48; font-family: var(--sans, system-ui); }
.ma-opt em { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; background: #8c6a3c; color: #fff; font: 800 12px var(--sans, system-ui); font-style: normal; letter-spacing: .04em; }
.bx-main [hidden], .bx-foot [hidden] { display: none !important; }
.mode-ask { background: #f7f3ee; }

/* ---------- Home: the big Create button, right under the headline ---------- */
.big-create { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 460px; box-sizing: border-box; margin: 18px 0 10px; padding: 16px 20px 16px 16px; border-radius: 24px; background: #8c6a3c; color: #fff; text-decoration: none; box-shadow: 0 16px 34px -18px rgba(100,70,30,.85); transition: transform .15s ease; }
.big-create:active { transform: scale(.98); }
.bcr-plus { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #8c6a3c; font: 300 44px/1 var(--sans, system-ui); padding-bottom: 4px; box-sizing: border-box; }
.big-create b { display: block; font: 800 22px var(--sans, system-ui); }
.big-create small { display: block; margin-top: 3px; font: 15px var(--sans, system-ui); opacity: .88; }
.hero-continue { display: flex; align-items: center; gap: 10px; max-width: 460px; box-sizing: border-box; margin: 0 0 18px; padding: 10px 14px; border-radius: 16px; border: 1px solid #e2d6c4; background: #fffdf9; color: #2c241e; text-decoration: none; font: 16px var(--sans, system-ui); }
.hero-continue[hidden] { display: none; }
.hero-continue img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.hero-continue span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-continue i { font-style: normal; font-weight: 800; color: #8c6a3c; }

/* ---------- Tribute wall ---------- */
.pp-mem h2 { margin-bottom: 0; }
.pm-tag { margin: 4px 0 8px; font: italic 17px var(--serif, Georgia, serif); color: #8c6a3c; }
.pp-mem .pm-add { width: 100%; max-width: 420px; margin: 4px 0 16px; }
.pm-list.wall { display: block; columns: 2 280px; column-gap: 14px; margin: 0 0 16px; }
.pm-list.wall .mr-mem { break-inside: avoid; display: flex; margin: 0 0 14px; padding: 16px; border-radius: 18px; background: #fffdf9; border: 1px solid rgba(60,45,30,.1); box-shadow: 0 10px 26px -20px rgba(60,40,20,.55); }
.pm-list.wall .mr-mem.ex { background: repeating-linear-gradient(135deg, #fffdf9 0 12px, #faf4ea 12px 24px); border: 1px dashed #d9c3a0; }
.pm-list.wall .mr-mem p { font-size: 16.5px; }
.pm-empty { color: #8a7663; font-size: 15px; }
.mr-pics { display: grid; gap: 4px; margin-top: 10px; border-radius: 12px; overflow: hidden; }
.mr-pics.n2 { grid-template-columns: 1fr 1fr; } .mr-pics.n3 { grid-template-columns: 1fr 1fr; } .mr-pics.n4 { grid-template-columns: 1fr 1fr; }
.mr-pics.n3 img:first-child { grid-column: 1 / -1; }
.mr-pics img { width: 100%; height: 100%; max-height: 260px; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.mr-pics.n1 img { aspect-ratio: auto; max-height: 340px; }
.pm-owner { margin: 6px 0 18px; padding: 12px; border-radius: 16px; background: #f3ede2; }
.pm-owner-lab { display: block; margin: 0 0 8px 4px; font: 800 11.5px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #8a7663; }
.pm-owner .ms-lock { margin: 0; }
.pm-photos.on .ml-ico { background: #3a2f28; }
/* adding photos to a memory */
.ms-pics { margin: 0 0 14px; }
.ms-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-thumbs:empty { display: none; }
.ms-thumbs span { position: relative; width: 76px; height: 76px; }
.ms-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.ms-thumbs button { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #3a2f28; color: #fff; font-size: 12px; cursor: pointer; }
.ms-addpic { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; min-height: 52px; border-radius: 14px; border: 1.5px dashed #c9a46c; background: #fffaf1; font: 700 15px var(--sans, system-ui); color: #6b4f2a; cursor: pointer; }
.ms-addpic small { font-weight: 500; color: #8a7663; }
.ms-addpic[hidden] { display: none; }
.mtk-ph { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; align-self: center; margin-right: 2px; }
.mtk-i { align-items: center; }
.ms-addpic input[type="file"] { display: none !important; }
#stories { scroll-margin-top: 84px; }

/* ---------- Preview as family sees it: full screen, big, nothing small ---------- */
.pp-asfam { flex: none; height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #b08d57; background: #fbf1e3; color: #6b4f2a; font: 800 14px var(--sans, system-ui); cursor: pointer; white-space: nowrap; }
.pp-visitor .pp-bar, .pp-visitor .pp-live, .pp-visitor .pp-studio, .pp-visitor .pp-snd, .pp-visitor .pp-music, .pp-visitor .pp-mchoose,
.pp-visitor .pm-owner, .pp-visitor .qr-card, .pp-visitor .pm-gather, .pp-visitor .pm-gather-note, .pp-visitor .pm-lock,
.pp-visitor .jm-legend, .pp-visitor .pp-memtip, .pp-visitor .era-now { display: none !important; }
.pp-visitor { font-size: 19px; }
.pp-visitor .pp-scroll { padding-bottom: calc(env(safe-area-inset-bottom,0px) + 96px); }
.pp-visitor .pp-hero { min-height: 78vh; }
.pp-visitor .pp-hero h1 { font-size: clamp(40px, 11vw, 64px); }
.pp-visitor .pp-hero-acts { grid-template-columns: 1fr; }
.pp-visitor .pp-watch { height: 60px !important; font-size: 20px !important; }
.pp-visitor .pp-sec h2 { font-size: clamp(30px, 8vw, 40px); }
.pp-visitor .pp-sub, .pp-visitor .pp-sec p { font-size: 18px; }
.pp-visitor .mcard h4 { font-size: 22px; }
.pp-visitor .mr-react, .pp-visitor .mr-add { height: 46px; font-size: 16px; padding: 0 16px; }
.pp-visitor .mr-mem p { font-size: 17.5px; }
.pp-visitor .pm-add { min-height: 60px; font-size: 19px; }
.pv-x { position: absolute; z-index: 40; top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; height: 46px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(30,24,20,.72); color: #fff; font: 800 16px var(--sans, system-ui); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
.pv-nav { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 8px calc(env(safe-area-inset-bottom,0px) + 8px); background: rgba(255,253,249,.97); border-top: 1px solid rgba(60,45,30,.12); box-shadow: 0 -10px 24px -18px rgba(0,0,0,.4); }
.pv-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border: 0; border-radius: 16px; background: none; font: 800 14.5px var(--sans, system-ui); color: #3a2f28; cursor: pointer; }
.pv-nav button span { font-size: 24px; line-height: 1; }
.pv-nav button:active { background: #f3ede2; }
.pv-note { position: absolute; z-index: 41; left: 12px; right: 76px; top: calc(env(safe-area-inset-top,0px) + 14px); margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255,253,249,.96); color: #4a3d33; font: 600 14px/1.35 var(--sans, system-ui); box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); animation: mr-in .4s ease both; max-width: 480px; }
.pv-note.out { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.pp-visitor .pp-live-pop { top: 70px; }
.pp-visitor .mtk.mtk-hero { bottom: 0; }
/* the Preview button on the build card */
.bc-preview { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; height: auto; white-space: normal; background: #3a2f28; color: #fff; border-color: #3a2f28; font-weight: 800; }
.bc-preview small { font-weight: 600; font-size: 13px; opacity: .8; }
.pv-note { right: 128px; }
.pv-note.out { animation: pv-out .6s ease forwards; }
@keyframes pv-out { to { opacity: 0; transform: translateY(-6px); visibility: hidden; } }
.pp-visitor .pp-scroll { padding-bottom: env(safe-area-inset-bottom,0px); }

/* ---------- Preview scrolls the real page (browser bars tuck away) ---------- */
html.pv-doc, html.pv-doc body, html.pv-doc body.builder { height: auto !important; overflow: visible !important; }
html.pv-doc .page-prev.pp-visitor { position: relative; inset: auto; display: block; min-height: 100vh; animation: none; }
html.pv-doc .pp-visitor .pp-scroll { overflow: visible; height: auto; flex: none; }
html.pv-doc .pp-visitor .pv-x, html.pv-doc .pp-visitor .pv-note, html.pv-doc .pp-visitor .pp-live-pop { position: fixed; }
html.pv-doc .pp-visitor .mem-sheet, html.pv-doc .pp-visitor .pp-lightbox { position: fixed; z-index: 200; }
html.pv-doc .pp-visitor .pp-hero { min-height: 92vh; min-height: 92svh; }

/* ---------- A new message pops in ---------- */
.pp-live-pop { top: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 18px); align-items: flex-start; padding: 14px 14px 14px 12px; border-radius: 20px; animation: lp-pop .6s cubic-bezier(.2,1.6,.4,1) both; transform-origin: 50% 100%; }
.pp-visitor .pp-live-pop { top: auto; }
@keyframes lp-pop { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 60% { opacity: 1; transform: translateY(-6px) scale(1.04); } 100% { transform: none; } }
.pp-live-pop.out { opacity: 0; transform: translateY(20px) scale(.96); transition: .35s ease; }
.lp-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #b08d57; color: #fff; font: 800 18px var(--sans, system-ui); font-style: normal; }
.lp-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pp-live-pop q { display: block; margin: 4px 0 2px; font: italic 16px/1.4 var(--serif, Georgia, serif); color: #2c241e; quotes: "“" "”"; }
.pp-live-pop button { align-self: center; }
.mr-mem.pop-in { animation: card-pop .7s cubic-bezier(.2,1.5,.4,1) both, card-glow 2.6s ease .3s both; }
@keyframes card-pop { 0% { opacity: 0; transform: scale(.7) translateY(16px); } 65% { opacity: 1; transform: scale(1.03); } 100% { transform: none; } }
@keyframes card-glow { 0%, 40% { box-shadow: 0 0 0 4px rgba(60,154,82,.45), 0 12px 30px -12px rgba(60,154,82,.6); } 100% { box-shadow: 0 0 0 2px rgba(78,140,90,.35); } }

/* ---------- Floating reactions ---------- */
.mcard { position: relative; }
.mr-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 3; }
.mr-fl { position: absolute; left: var(--x); bottom: 64px; font-size: calc(26px * var(--s)); line-height: 1; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); animation: fl-up 2.3s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes fl-up {
  0% { opacity: 0; transform: translate(0, 20px) scale(.4); }
  15% { opacity: 1; transform: translate(calc(var(--dx) * .2), -10px) scale(1.1); }
  50% { transform: translate(calc(var(--dx) * -.4), -110px) scale(1); }
  80% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), -220px) scale(.85); }
}
@media (prefers-reduced-motion: reduce) { .mr-fl { display: none; } }
/* Air-bubble rise: from the React button to the top of the card */
.mr-fl { left: 0; top: 0; bottom: auto !important; font-size: 30px; animation: bubble 3s cubic-bezier(.35,.1,.45,1) forwards !important; }
@keyframes bubble {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  8%   { opacity: 1; transform: translate(0, -8px) scale(1); }
  25%  { transform: translate(var(--w), calc(var(--rise) * .25)) scale(1.04); }
  50%  { transform: translate(calc(var(--w) * -1), calc(var(--rise) * .5)) scale(1.08); }
  75%  { opacity: .9; transform: translate(var(--w), calc(var(--rise) * .75)) scale(1.12); }
  100% { opacity: 0; transform: translate(0, var(--rise)) scale(1.18); }
}

/* ---------- Free for 30 days / Keep it for good ---------- */
.pp-trial .linklike, .bc-trial .linklike { font-weight: 800; }
.bc-trial { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.88); }
.bc-trial .linklike { color: #fff; }
.kp-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; }
.kp-price b { font: 500 46px/1 var(--serif, Georgia, serif); color: #2c241e; }
.kp-price span { font-size: 15px; color: #6b5a48; }
.kp-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; font-size: 15.5px; color: #2c241e; }
.kp-go { width: 100%; margin-top: 10px; }
.kp-note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #faf3e7; font-size: 14px; line-height: 1.45; color: #4a3d33; }

/* ---------- The live page ---------- */
body.live-page > .site-header, body.live-page > main.builder-main, body.live-page > .site-footer, body.live-page > footer { display: none !important; }
.live-boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: #f7f3ee; color: #6b5a48; font: 17px var(--sans, system-ui); z-index: 300; }
.lb-spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #e2d6c4; border-top-color: #b08d57; animation: spin .9s linear infinite; }
.live-msg { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: #f7f3ee; text-align: center; }
.live-msg h1 { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: clamp(34px, 9vw, 52px); margin: 0 0 14px; color: #2c241e; }
.live-msg p { max-width: 440px; margin: 0 auto 10px; font: 18px/1.5 var(--sans, system-ui); color: #5a4b3f; }
.live-msg .lm-foot { margin-top: 26px; font-style: italic; font-family: var(--serif, Georgia, serif); color: #8a7663; }
/* read-only until the email is confirmed: hovering at the top */
.live-ro { position: fixed; z-index: 160; top: calc(env(safe-area-inset-top,0px) + 10px); left: 10px; right: 10px; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; background: rgba(40,32,27,.94); color: #fff; font: 14.5px/1.4 var(--sans, system-ui); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: mr-in .4s ease both; }
.live-ro > span { font-size: 20px; }
.live-ro > div { flex: 1; min-width: 0; }
.live-ro button { flex: none; height: 38px; padding: 0 12px; border-radius: 999px; border: 0; background: #fff; color: #2c241e; font-weight: 800; cursor: pointer; }
.live-ro.nudge { animation: ro-nudge .5s ease; }
@keyframes ro-nudge { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.live-dev { display: block; color: #f3dcb1; font-size: 12px; }
/* the family's tools on their live page */
.live-own { position: fixed; z-index: 150; top: calc(env(safe-area-inset-top,0px) + 10px); right: 10px; display: flex; align-items: center; gap: 8px; }
.lo-share { height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(40,32,27,.9); color: #fff; font: 800 15px var(--sans, system-ui); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.lo-trial { padding: 6px 10px; border-radius: 999px; background: rgba(255,253,249,.94); color: #6b4f2a; font: 700 12.5px var(--sans, system-ui); }
/* share sheet + go live */
.sh-live { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: #e7f1e4; color: #2f6a3a; font: 800 13px var(--sans, system-ui); }
.sh-list { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 10px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e2d6c4; font: 16px/1.4 var(--sans, system-ui); resize: vertical; }
.share-sheet .btn-lg { width: 100%; }
.sh-out { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #faf3e7; font: 14px/1.45 var(--sans, system-ui); }
.sh-out ul { margin: 6px 0 0; padding-left: 18px; }
.sh-qr { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; }
.sh-qr .qr-box { width: 140px; height: 140px; }
.sh-url { word-break: break-all; font-size: 12px !important; }
.share-sheet .sh-open { margin-top: 12px; }
.gl-lab { display: block; margin: 12px 0 6px; font: 800 13px var(--sans, system-ui); color: #4a3d33; }
.gl-host { display: flex; align-items: center; gap: 4px; }
.gl-host input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #e2d6c4; font: 17px var(--sans, system-ui); }
.gl-err { color: #a3402f; font-size: 14px; margin: 8px 0 0; }
.golive .gl-go { width: 100%; margin-top: 12px; }
.gl-steps { margin: 12px 0; }
.gl-pct { color: #6b5a48; font-size: 14px; }
.bc-golive { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px; height: auto; white-space: normal; background: #fff; color: #2c241e; border-color: #fff; font-weight: 800; }
.bc-golive b { font-size: 18px; }
.bc-golive small { font-weight: 600; font-size: 13px; opacity: .75; }
.bc-live { grid-column: 1 / -1; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.95); color: #2c241e; text-align: center; }
.bcl-dot { display: block; font: 800 13px var(--sans, system-ui); color: #2f6a3a; }
.bc-live b { display: block; margin: 2px 0 8px; font-size: 15px; word-break: break-all; }
.bcl-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bcl-acts .btn { height: 42px; padding: 0 6px; font-size: 14px; white-space: nowrap; }
.sh-warn { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: #fbf1e3; color: #7a4d14; font: 14px/1.45 var(--sans, system-ui); }
.mr-remove { margin-top: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid #e5c9c2; background: #fff; font: 700 12.5px var(--sans, system-ui); color: #a3402f; cursor: pointer; } .mr-remove.sure { background: #fbe9e5; }
/* The live page always uses the phone's own width, and never scrolls sideways */
html.pv-doc, html.pv-doc body { overflow-x: clip !important; max-width: 100%; }
body.live-page .page-prev { max-width: 100vw; overflow-x: clip; }
html.pv-doc body.live-page, body.live-page .acct { touch-action: pan-y; overscroll-behavior-x: none; }
body.live-page .ac-card { max-width: min(520px, 100vw); }
/* Reactions: one smooth, gentle rise (no bubbly wobble) */
.mr-fl { animation: rise 2.8s cubic-bezier(.22,.61,.36,1) forwards !important; will-change: transform, opacity; }
@keyframes rise {
  0%   { opacity: 0; transform: translate3d(0, 6px, 0) scale(.7); }
  12%  { opacity: 1; transform: translate3d(0, -6px, 0) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--w) * .8), var(--rise), 0) scale(1.05); }
}

/* Sheets on the page: full screen on a phone; the page behind stays still */
html.sheet-open, html.sheet-open body, html.pv-doc.sheet-open, html.pv-doc.sheet-open body { overflow: hidden !important; overscroll-behavior: none; }
.mem-sheet, .acct { overscroll-behavior: contain; touch-action: none; }
.mem-sheet .ms-card, .acct .ac-card { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 639px) {
  .mem-sheet { position: fixed !important; align-items: stretch; }
  .mem-sheet .ms-card { max-width: none; height: 100%; max-height: 100%; border-radius: 0; padding-top: calc(env(safe-area-inset-top,0px) + 18px); padding-bottom: calc(env(safe-area-inset-bottom,0px) + 28px); animation: ms-up .3s cubic-bezier(.2,.8,.2,1) both; }
  .mem-sheet .ms-x { top: calc(env(safe-area-inset-top,0px) + 12px); }
}
/* the Add photos button: centred, not a tall empty box */
.ms-card label.ms-addpic { display: flex; align-items: center; justify-content: center; margin: 8px 0 0; padding: 0 14px; min-height: 52px; }
.ms-card label.ms-addpic[hidden] { display: none; }
/* A new memory's green outline: glows, stays a minute, then slowly fades away */
.mr-mem.pop-in { animation: card-pop .7s cubic-bezier(.2,1.5,.4,1) both, card-glow 66s ease .3s both; }
.mr-mem.live { box-shadow: none; animation: card-glow 66s ease both; }
@keyframes card-glow {
  0%   { box-shadow: 0 0 0 4px rgba(60,154,82,.45), 0 12px 30px -12px rgba(60,154,82,.6); }
  4%   { box-shadow: 0 0 0 2px rgba(78,140,90,.35), 0 0 0 0 rgba(60,154,82,0); }
  90%  { box-shadow: 0 0 0 2px rgba(78,140,90,.35), 0 0 0 0 rgba(60,154,82,0); }
  100% { box-shadow: 0 0 0 2px rgba(78,140,90,0), 0 0 0 0 rgba(60,154,82,0); }
}
/* Mobile / Compact / Desktop on the live page: hovering at the top */
.live-view { position: fixed; z-index: 155; top: calc(env(safe-area-inset-top,0px) + 10px); left: 10px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,253,249,.94); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .4s ease, transform .4s ease; }
.live-view.away { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.live-view button { height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font: 700 12.5px var(--sans, system-ui); color: #4a3d33; white-space: nowrap; cursor: pointer; }
.live-view button[aria-pressed="true"] { background: #3a2f28; color: #fff; }
/* keep it clear of the family's Share button and the read-only banner */
body:has(.live-own) .live-view { top: calc(env(safe-area-inset-top,0px) + 62px); }
body:has(.live-ro) .live-view { top: calc(env(safe-area-inset-top,0px) + 92px); }
.lm-signin { display: grid; gap: 14px; max-width: 380px; margin: 22px auto 0; }
.lm-signin .btn { width: 100%; }
.lm-form { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: #fffdf9; border: 1px solid #eadfcd; }
.lm-form p { margin: 0 !important; font-size: 15px !important; }
.lm-form .input { height: 52px; font-size: 17px; }
.lm-note { color: #4a3d33 !important; }
.sh-link { display: flex; gap: 8px; margin: 6px 0 4px; }
.sh-link input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid #e2d6c4; background: #faf6ef; font: 14px var(--sans, system-ui); color: #4a3d33; }
.sh-link .btn { flex: none; height: 48px; padding: 0 16px; }
.sh-know { margin: 6px 0 10px; padding: 12px 14px; border-radius: 14px; background: #fbf1e3; border: 1px solid #ecd6b0; font: 14px/1.45 var(--sans, system-ui); color: #4a3d33; }
.sh-know ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.sh-know.flash { animation: know 1.2s ease; }
@keyframes know { 30% { box-shadow: 0 0 0 4px rgba(176,141,87,.45); } }

/* ---------- QR: scan with the camera, or show it to the person next to you ---------- */
.lm-scan { width: 100%; }
.live-qr { position: fixed; z-index: 150; right: 14px; bottom: calc(env(safe-area-inset-bottom,0px) + 18px); width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(40,32,27,.9); color: #fff; box-shadow: 0 12px 26px -12px rgba(0,0,0,.6); cursor: pointer; }
.live-qr svg { width: 26px; height: 26px; }
html.sheet-open .live-qr { display: none; }
.qr-scan, .qr-show { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: #000; color: #fff; }
.qr-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs-frame { position: relative; width: min(70vw, 300px); aspect-ratio: 1; border-radius: 24px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.9); }
.qs-say { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom,0px) + 40px); margin: 0; text-align: center; font: 700 18px/1.4 var(--sans, system-ui); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.qs-x { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; height: 46px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #2c241e; font: 800 16px var(--sans, system-ui); cursor: pointer; }
.qr-show { background: #f7f3ee; color: #2c241e; }
.qsh-card { width: min(88vw, 380px); padding: 26px 22px; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 24px 60px -30px rgba(0,0,0,.5); }
.qsh-name { font: 500 30px/1.15 var(--serif, Georgia, serif); }
.qsh-ask { margin: 8px 0 14px; font: 800 13px var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #8c6a3c; }
.qsh-qr { width: min(72vw, 300px); aspect-ratio: 1; margin: 0 auto; }
.qsh-qr svg { width: 100%; height: 100%; display: block; }
.qsh-card p { margin: 12px 0 0; font: 15px var(--sans, system-ui); color: #6b5a48; }
.qr-show .qs-x { background: #3a2f28; color: #fff; }
.qr-scan video { z-index: 0; }
.qs-frame, .qs-say { z-index: 1; }
.qs-photo { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom,0px) + 90px); padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.92); color: #2c241e; font: 800 15px var(--sans, system-ui); white-space: nowrap; cursor: pointer; }
.qs-say { bottom: calc(env(safe-area-inset-bottom,0px) + 150px); }
.lm-signin [hidden] { display: none !important; }

/* ---------- Share sheet, app-style ---------- */
.share-sheet .sh-live { background: #e7f1e4; color: #2f6a3a; }
.share-sheet h2 { margin-top: 6px; }
.sh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
.sh-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: 14px; border-radius: 18px; border: 1.5px solid #e8dcc8; background: #fff; text-align: left; font: inherit; color: #2c241e; cursor: pointer; box-shadow: 0 8px 20px -16px rgba(60,40,20,.5); }
.sh-act:active { transform: scale(.98); }
.sh-act span { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.sh-act b { font: 800 16px var(--sans, system-ui); }
.sh-act small { font: 13px/1.3 var(--sans, system-ui); color: #7a6957; }
.sh-a-link { background: #8c6a3c; border-color: #8c6a3c; color: #fff; }
.sh-a-link small { color: rgba(255,255,255,.85); }
.sh-rules { display: grid; gap: 2px; padding: 6px 14px; border-radius: 18px; background: #f6f0e6; }
.sh-rule { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(60,45,30,.08); }
.sh-rule:last-child { border-bottom: 0; }
.sh-rule > span { flex: none; font-size: 20px; line-height: 1.3; }
.sh-rule b { display: block; font: 800 15px var(--sans, system-ui); color: #2c241e; }
.sh-rule small { display: block; margin-top: 2px; font: 13.5px/1.4 var(--sans, system-ui); color: #6b5a48; }
.sh-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; padding: 3px; border-radius: 999px; background: #e9dfd0; }
.sh-seg button { height: 38px; border: 0; border-radius: 999px; background: none; font: 700 13.5px var(--sans, system-ui); color: #4a3d33; cursor: pointer; }
.sh-seg button[aria-pressed="true"] { background: #fff; color: #2c241e; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.sh-copyline { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font: 12.5px var(--sans, system-ui); color: #8a7663; }
.sh-copyline span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-sheet .sh-open { width: 100%; margin-top: 14px; }

/* ---------- The page card in the builder: one clear next step ---------- */
.build-cta.bc2 { display: grid; gap: 10px; grid-template-columns: 1fr; }
.bc2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: #fff; }
.bc2-head strong { display: block; font: 500 26px/1.15 var(--serif, Georgia, serif); }
.bc2-addr { display: block; margin-top: 3px; font: 14px var(--sans, system-ui); opacity: .85; word-break: break-all; }
.bc2-chip { flex: none; padding: 5px 10px; border-radius: 999px; background: #e7f1e4; color: #2f6a3a; font: 800 12.5px var(--sans, system-ui); white-space: nowrap; }
.bc2-chip.draft { background: rgba(255,255,255,.2); color: #fff; }
.bc2-trial { margin: -2px 0 2px; font: 14px var(--sans, system-ui); color: rgba(255,255,255,.9); }
.bc2-trial .linklike { color: #fff; font-weight: 800; }
.bc2-main, .bc2-second, .bc2-dark { width: 100%; height: auto; min-height: 58px; padding: 12px 16px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: normal; font: 800 18px var(--sans, system-ui); }
.bc2-main small, .bc2-dark small { font: 600 13px/1.3 var(--sans, system-ui); opacity: .85; }
.bc2-main { background: #b08d57; border-color: #b08d57; color: #fff; }
.bc2-second { background: #fff; border-color: #fff; color: #2c241e; }
.bc2-dark { background: #2f2723; border-color: #2f2723; color: #fff; }
.bc2-dirty { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.95); color: #2c241e; font: 14px/1.35 var(--sans, system-ui); }
.bc2-dirty > span { flex: 1; }
.bc2-dirty .btn { flex: none; height: 40px; padding: 0 14px; font-size: 14px; }
.bc2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.bc2-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 0; border-radius: 16px; background: rgba(255,255,255,.16); color: #fff; font: 700 14px var(--sans, system-ui); cursor: pointer; }
.bc2-tile span { font-size: 20px; line-height: 1; }
.bc2 .bc2-tiles { display: grid !important; grid-template-columns: repeat(3, 1fr); }
.bc2 .bc2-tiles:not(:has(.bc-preview)) { grid-template-columns: repeat(3, 1fr); }
.bc2 .bc2-tiles:has(.bc-preview) { grid-template-columns: repeat(2, 1fr); }
.bc2 .bc2-tile { width: auto !important; height: auto !important; min-height: 60px; margin: 0 !important; grid-column: auto !important; position: static !important; background: rgba(255,255,255,.16) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }

/* ---------- A live page's home screen (setup is done) ---------- */
.dash { position: fixed; inset: 0; z-index: 112; overflow: auto; background: linear-gradient(170deg, #4f6f57, #3c5a45 60%, #34503d); color: #fff; font-family: var(--sans, system-ui); -webkit-overflow-scrolling: touch; }
html.dash-on body { overflow: hidden; }
.dash-top { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top,0px) + 12px) 16px 6px; max-width: 560px; margin: 0 auto; }
.dash-home, .dash-acct { color: #fff; text-decoration: none; font: 700 15px var(--sans, system-ui); background: rgba(255,255,255,.14); border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.dash-body { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; padding: 14px 18px calc(env(safe-area-inset-bottom,0px) + 30px); }
.dash-hero { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.dash-hero img, .dash-ph { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.85); }
.dash-ph { display: grid; place-items: center; background: #b08d57; font: 800 30px var(--sans, system-ui); }
.dash-hero h1 { margin: 0 0 6px; font: 500 clamp(28px, 8vw, 38px)/1.1 var(--serif, Georgia, serif); }
.dash-addr { margin: 0; font-size: 15px; opacity: .85; word-break: break-all; }
.dash-trial { margin: -4px 0 4px; font-size: 14px; opacity: .92; }
.dash-trial .linklike { color: #fff; font-weight: 800; }
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.dash-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border: 0; border-radius: 18px; background: rgba(255,255,255,.14); color: #fff; font: 700 15px var(--sans, system-ui); cursor: pointer; }
.dash-tile span { font-size: 24px; line-height: 1; }
.dash-foot { margin: 14px 0 0; text-align: center; font: italic 16px var(--serif, Georgia, serif); opacity: .7; }
.dash-done { position: fixed; z-index: 96; top: calc(env(safe-area-inset-top,0px) + 8px); left: 50%; transform: translateX(-50%); height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: #3c5a45; color: #fff; font: 800 15px var(--sans, system-ui); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); cursor: pointer; }
.dash-done { top: auto; bottom: calc(var(--footer-h, 64px) + 140px); }
@media (min-width: 861px) { .dash-done { bottom: 24px; } }

/* ---------- My tributes ---------- */
.tr-main { max-width: 760px; margin: 0 auto; padding: 18px 16px 120px; font-family: var(--sans, system-ui); }
.tr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.tr-head h1 { margin: 0; font: 500 clamp(32px, 8vw, 44px)/1.1 var(--serif, Georgia, serif); color: #2c241e; }
.tr-new { flex: none; }
.tr-list { display: grid; gap: 14px; }
@media (min-width: 720px) { .tr-list { grid-template-columns: 1fr 1fr; } }
.tr-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; background: #fffdf9; border: 1px solid rgba(60,45,30,.1); box-shadow: 0 12px 30px -24px rgba(60,40,20,.55); }
.tr-top { display: flex; align-items: center; gap: 12px; }
.tr-top img, .tr-ph { flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.tr-ph { display: grid; place-items: center; background: #b08d57; color: #fff; font: 800 24px var(--sans, system-ui); }
.tr-id { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-id h2 { width: 100%; margin: 0; font: 500 23px/1.15 var(--serif, Georgia, serif); color: #2c241e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-chip { padding: 3px 9px; border-radius: 999px; font: 800 12px var(--sans, system-ui); background: #efe6d8; color: #6b4f2a; }
.s-live .tr-chip { background: #e7f1e4; color: #2f6a3a; }
.s-kept .tr-chip { background: #3c5a45; color: #fff; }
.s-warn .tr-chip { background: #fbe3c2; color: #8a4b0c; }
.s-off .tr-chip { background: #ebe7e2; color: #6b625b; }
.s-ready .tr-chip { background: #fbf1e3; color: #8c6a3c; }
.tr-days { font: 700 12.5px var(--sans, system-ui); color: #8a7663; }
.s-warn .tr-days { color: #a3560f; }
.tr-say { margin: 0; font-size: 14px; color: #6b5a48; }
.tr-addr { word-break: break-all; }
.tr-stats { margin: 0; font-size: 14px; color: #4a3d33; }
.tr-stats em { font-style: normal; font-weight: 800; color: #2f6a3a; background: #e7f1e4; padding: 1px 6px; border-radius: 999px; font-size: 12px; }
.tr-acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.tr-acts .btn { height: 48px; }
.tr-manage { padding: 0 18px; }
.tr-attn { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: #fbf1e3; border: 1px solid #ecd6b0; }
.tr-attn h3 { margin: 0 0 6px; font: 800 13px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #8c6a3c; }
.tr-attn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; color: #2c241e; }
.tr-attn a { color: #6b4f2a; font-weight: 800; }
.tr-empty { padding: 30px 16px; text-align: center; color: #6b5a48; }
.tr-signin { margin-top: 18px; padding: 18px; border-radius: 20px; background: #fffdf9; border: 1px solid #eadfcd; }
.tr-signin h3 { margin: 0 0 6px; font: 500 22px var(--serif, Georgia, serif); }
.tr-signin p { margin: 0 0 10px; font-size: 15px; color: #6b5a48; }
.tr-signin form { display: grid; gap: 10px; }
.tr-signin .input { height: 52px; font-size: 17px; }
.tr-wait { color: #8a7663; }

/* ---------- Tribute home additions ---------- */
.dash .tr-chip { display: inline-block; }
.dash .tr-chip.s-live { background: #e7f1e4; color: #2f6a3a; }
.dash .tr-chip.s-ready, .dash .tr-chip.s-draft { background: rgba(255,255,255,.22); color: #fff; }
.dash .tr-chip.s-warn { background: #fbe3c2; color: #8a4b0c; }
.dash .tr-chip.s-off { background: rgba(255,255,255,.2); color: #fff; }
.dash .tr-chip.s-kept { background: #fff; color: #2f6a3a; }
.dash-card { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.12); }
.dash-card h3 { margin: 0 0 10px; font: 800 12.5px var(--sans, system-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-stats div { position: relative; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.12); text-align: center; }
.dash-stats b { display: block; font: 500 28px/1 var(--serif, Georgia, serif); }
.dash-stats span { font-size: 12.5px; opacity: .85; }
.dash-stats em { position: absolute; top: -8px; right: -4px; padding: 2px 7px; border-radius: 999px; background: #e7f1e4; color: #2f6a3a; font: 800 11px var(--sans, system-ui); font-style: normal; }
.dash-meta { margin: 10px 0 6px; font-size: 13.5px; opacity: .9; }
.dash-card .linklike { color: #fff; font-weight: 800; }
.dash-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.dash-row.col { flex-direction: column; }
.dash-row b { word-break: break-all; text-align: right; }
.dash-settings .sh-seg { background: rgba(255,255,255,.18); }
.dash-settings .sh-seg button { color: #fff; }
.dash-settings .sh-seg button[aria-pressed="true"] { color: #2c241e; }
.dash-danger { display: block; width: 100%; margin-top: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: none; color: #ffd9cf; text-align: left; font: 800 15px var(--sans, system-ui); cursor: pointer; }
.dash-danger small { display: block; margin-top: 2px; font: 13px var(--sans, system-ui); color: rgba(255,255,255,.75); }
.dash-danger.sure { background: rgba(163,64,47,.35); }
.tr-main { padding-top: calc(var(--header-h) + 18px); }
/* Buttons answer the moment they're tapped */
.dash .btn, .dash-tile, .golive .gl-go, .sh-act, .tr-acts .btn { transition: transform .12s ease, filter .12s ease; }
.dash .btn:active, .dash-tile:active, .golive .gl-go:active, .tr-acts .btn:active { transform: scale(.97); filter: brightness(.92); }
.btn.busy { opacity: .85; pointer-events: none; }
.spin { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ---------- Who can see the page ---------- */
.ax-opt { display: flex; gap: 12px; width: 100%; margin: 0 0 10px; padding: 14px; border-radius: 18px; border: 2px solid #e2d6c4; background: #fff; text-align: left; font: inherit; color: #2c241e; cursor: pointer; }
.ax-opt[aria-pressed="true"] { border-color: #8c6a3c; background: #fbf4e8; box-shadow: 0 0 0 3px rgba(176,141,87,.2); }
.ax-opt[data-ax="public"][aria-pressed="true"] { border-color: #b4572e; background: #fdf1ea; box-shadow: 0 0 0 3px rgba(180,87,46,.18); }
.ax-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: #f3ede2; }
.ax-opt > span > b { font: 800 17px var(--sans, system-ui); }
.ax-opt b em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #e7f1e4; color: #2f6a3a; font-size: 11.5px; vertical-align: 2px; }
.ax-opt small { display: block; margin-top: 4px; font: 14px/1.45 var(--sans, system-ui); color: #5a4b3f; }
.ax-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fde8dc; color: #8a3a16; font: 14px/1.4 var(--sans, system-ui); }
.access-sheet .ax-post { margin: 6px 0 6px; }
.access-sheet .ax-save { width: 100%; margin-top: 10px; }
.ax-err { color: #a3402f; font-size: 14px; }
.sh-access { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0 4px; padding: 12px 14px; border-radius: 16px; border: 2px solid #8c6a3c; background: #fbf4e8; text-align: left; font: inherit; color: #2c241e; cursor: pointer; }
.sh-access.pub { border-color: #b4572e; background: #fdf1ea; }
.sh-access > span { font-size: 26px; }
.sh-access b { display: block; font: 800 17px var(--sans, system-ui); }
.sh-access small { display: block; font: 13.5px/1.35 var(--sans, system-ui); color: #6b5a48; }
.sh-change { display: block; margin: 4px 0 8px; font-weight: 800; color: #6b4f2a; }
.dash-access { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.ax-opt > span > b { display: block; }
.ax-opt small strong { font-weight: 800; color: #2c241e; }
/* while a form or sheet is open on the live page, its floating buttons step aside */
html.sheet-open .live-own, html.sheet-open .live-view, html.sheet-open .live-qr, html.sheet-open .live-ro { display: none !important; }
.tr-namel { display: block; margin: 8px 0 8px; font: 800 14px var(--sans, system-ui); color: #4a3d33; }
.tr-namel small { font-weight: 500; color: #8a7663; }
.tr-namel .input { margin-top: 6px; height: 50px; font-size: 17px; width: 100%; box-sizing: border-box; }
.tr-namesave { width: 100%; margin-bottom: 6px; }
/* the map never shows through a sheet: it keeps its layers to itself, and sheets sit on top */
.jm-box, .jm-map, .pp-map { isolation: isolate; position: relative; z-index: 0; }
.mem-sheet, html.pv-doc .pp-visitor .mem-sheet { z-index: 1000 !important; }
.acct { z-index: 1000; }
.mem-sheet .ms-card { background: #fffdf9; }
/* home: "more below" cue, just above the footer */
.scroll-cue { position: fixed; left: 50%; bottom: calc(var(--footer-h) + 14px); transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 18px 6px; border: 0; border-radius: 999px;
  background: rgba(43,38,34,.86); color: #fff; font: 700 13px/1.2 inherit; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: opacity .4s ease, transform .4s ease;
  animation: cueIn .5s .8s ease both; }
.scroll-cue svg { width: 20px; height: 20px; animation: cueBob 1.6s ease-in-out infinite; }
.scroll-cue.gone { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
@keyframes cueIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cueBob { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue, .scroll-cue svg { animation: none; } }

/* ---------- Home hero: answer "what is it?" in the first screen, then show it ---------- */
.hero { grid-template-columns: 1fr 1.15fr; grid-template-areas: "text stage" "act stage"; align-items: start; row-gap: 18px; }
.hero-text { grid-area: text; align-self: end; }
.hero > .stage { grid-area: stage; align-self: center; }
.hero-act { grid-area: act; }
.hero h1 { font-size: clamp(46px, 5vw, 76px); line-height: 1.02; }
.hero-sub { max-width: 560px; margin: 6px 0 4px; font-size: 19px; line-height: 1.5; color: var(--ink-soft); }
.hero-sub strong { color: var(--ink); }
.hero-again { display: none; }
.hero-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.hero-steps li { display: flex; gap: 12px; align-items: center; font-size: 15.5px; color: var(--ink-soft); line-height: 1.35; }
.hero-steps li b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; }
.hero-steps strong { display: block; color: var(--ink); font-size: 16.5px; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "text" "stage" "act"; padding: 26px 16px 36px; row-gap: 20px; min-height: 0; }
  .hero h1 { font-size: 42px; margin-top: 10px; }
  .hero-sub { font-size: 18px; }
  .big-create { max-width: none; margin: 20px 0 10px; }
  .hero-continue { max-width: none; margin-bottom: 0; }
  .hero-again { display: flex; width: 100%; justify-content: center; margin-bottom: 22px; }
  .hero-act .price-chip { margin-top: 18px; }
}

/* ---------- Home hero picture: photos → their page → family memories ---------- */
.hero { grid-template-areas: "text pic" "act pic"; }
.hero > .hero-pic { grid-area: pic; align-self: center; }
.hero-pic { margin: 0; container-type: inline-size; width: 100%; max-width: 640px; justify-self: center; }
.hp-scene { position: relative; width: 100%; aspect-ratio: 1 / .8; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, #fbf6ee 0%, #f1e6d6 70%, #eadcc7 100%); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -32px rgba(58,53,50,.38); }
/* old prints */
.hp-print { position: absolute; width: 27cqw; padding: 1.4cqw 1.4cqw 5cqw; background: #fffdf8; border-radius: 1cqw;
  box-shadow: 0 2cqw 4cqw -2cqw rgba(58,40,20,.45); transform: rotate(var(--r)); animation: hpIn .8s var(--ease) both; }
.hp-print svg { display: block; width: 100%; filter: sepia(.35) saturate(.85); border-radius: .5cqw; }
.hp-print em { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font: italic 2.5cqw/1 var(--serif); color: var(--ink-soft); white-space: nowrap; }
.hp-print:nth-child(1) { left: 3cqw; top: 5cqw; animation-delay: .1s; }
.hp-print:nth-child(2) { left: 7cqw; top: 29cqw; animation-delay: .3s; }
.hp-print:nth-child(3) { left: 2cqw; top: 53cqw; animation-delay: .5s; }
.hp-arrow { position: absolute; left: 27cqw; top: 33cqw; width: 11cqw; color: var(--accent-deep); opacity: .8; animation: hpFade .6s .8s both; z-index: 2; }
.hp-arrow svg { width: 100%; display: block; }
/* the phone with their page */
.hp-phone { position: absolute; left: 35cqw; top: 3.5cqw; width: 33cqw; aspect-ratio: 9 / 19; padding: 1.3cqw; border-radius: 5.5cqw;
  background: #2b2623; box-shadow: 0 4cqw 7cqw -3cqw rgba(30,20,10,.55); z-index: 3; animation: hpRise .9s .6s var(--ease) both; }
.hp-screen { width: 100%; height: 100%; border-radius: 4.3cqw; overflow: hidden; background: #fbf8f3; display: flex; flex-direction: column; }
.hp-cover { position: relative; height: 38%; flex: none; }
.hp-cover svg { width: 100%; height: 100%; display: block; }
.hp-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 6cqw 2.6cqw 2.2cqw; background: linear-gradient(transparent, rgba(40,28,18,.65)); color: #fff; }
.hp-name b { display: block; font: 3.6cqw/1.1 var(--serif); }
.hp-name span { font-size: 2.1cqw; opacity: .9; }
.hp-body { padding: 2.4cqw 2.6cqw; display: grid; gap: 1.6cqw; align-content: start; }
.hp-sec { font: 700 1.8cqw/1 var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
.hp-map { position: relative; height: 9cqw; border-radius: 1.6cqw; background: #efe6d8; }
.hp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-map i { position: absolute; bottom: .6cqw; font: normal 1.6cqw/1 var(--sans, system-ui); color: var(--ink-soft); }
.hp-map i:nth-of-type(1) { left: 1cqw; } .hp-map i:nth-of-type(2) { left: 42%; } .hp-map i:nth-of-type(3) { right: 1cqw; bottom: auto; top: .8cqw; }
.hp-tl { display: flex; gap: 1.6cqw; align-items: center; font-size: 2cqw; line-height: 1.25; color: var(--ink-soft); }
.hp-tl span { flex: none; width: 7cqw; height: 5.4cqw; border-radius: 1cqw; background: linear-gradient(#cfd3c8 60%, #8fa0a6 60%); }
.hp-tl span.t2 { background: linear-gradient(#e2d2b4 55%, #a89270 55%); }
.hp-tl b { display: block; color: var(--ink); }
.hp-play { margin-top: .6cqw; justify-self: start; padding: 1.2cqw 2.4cqw; border-radius: 99px; background: var(--ink); color: #fff; font: 700 2cqw/1 var(--sans, system-ui); }
/* family memories */
.hp-mems { position: absolute; right: 2.5cqw; top: 9cqw; width: 30cqw; display: grid; gap: 2.4cqw; z-index: 4; }
.hp-mem { display: flex; gap: 1.6cqw; align-items: flex-start; padding: 2cqw; border-radius: 3cqw; background: #fffdf9; border: 1px solid #e8dcc8;
  box-shadow: 0 2.4cqw 4cqw -2.4cqw rgba(58,40,20,.4); animation: hpPop .55s var(--ease) both; }
.hp-mem:nth-child(1) { animation-delay: 1.5s; margin-left: -4cqw; } .hp-mem:nth-child(2) { animation-delay: 2.2s; } .hp-mem:nth-child(3) { animation-delay: 2.9s; margin-left: -2cqw; }
.hp-mem i { flex: none; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; color: #fff; font: 700 2.4cqw/1 var(--sans, system-ui); font-style: normal; }
.hp-mem p { margin: 0; font: 2.35cqw/1.3 var(--sans, system-ui); color: var(--ink); }
.hp-mem p b { display: block; margin-top: .6cqw; font-size: 1.9cqw; color: var(--ink-soft); }
.hp-heart { position: absolute; right: 4cqw; bottom: -10cqw; font-size: 4cqw; opacity: 0; animation: hpFloat 4.5s 3.4s ease-in infinite; }
.hp-heart.h2 { right: 16cqw; animation-delay: 4.9s; } .hp-heart.h3 { right: 10cqw; animation-delay: 6.4s; }
.hp-caps { display: grid; grid-template-columns: 34% 33% 33%; margin-top: 10px; text-align: center; font-size: 14px; color: var(--ink-soft); }
.hp-caps b { color: var(--ink); font-weight: 800; }
.hp-caps span:not(:last-child)::after { content: "→"; float: right; color: var(--accent-deep); font-weight: 800; }
@keyframes hpIn { from { opacity: 0; transform: translateY(4cqw) rotate(0deg); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes hpRise { from { opacity: 0; transform: translateY(6cqw); } to { opacity: 1; transform: none; } }
@keyframes hpPop { 0% { opacity: 0; transform: translateX(5cqw) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes hpFade { from { opacity: 0; } to { opacity: .8; } }
@keyframes hpFloat { 0% { opacity: 0; transform: translateY(0) scale(.8); } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-48cqw) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hp-print, .hp-phone, .hp-mem, .hp-arrow { animation: none; } .hp-heart { display: none; } }
/* the animated example now opens "What you'll end up with" */
.stage-wrap { max-width: 860px; margin: 0 auto 34px; }
@media (max-width: 860px) {
  .hero { grid-template-areas: "text" "pic" "act"; }
  .hero-pic { max-width: none; }
  .hp-caps { font-size: 13px; }
  .stage-wrap { margin-bottom: 24px; }
}
/* hero picture: roomier layout so nothing overlaps */
.hp-scene { aspect-ratio: 1 / .86; }
.hp-print { width: 23cqw; padding: 1.2cqw 1.2cqw 4.6cqw; }
.hp-print em { font-size: 2.2cqw; }
.hp-print:nth-child(1) { left: 4cqw; top: 4cqw; }
.hp-print:nth-child(2) { left: 9cqw; top: 31cqw; }
.hp-print:nth-child(3) { left: 3cqw; top: 58cqw; }
.hp-arrow { left: 27cqw; top: 28cqw; width: 9cqw; }
.hp-phone { left: 35.5cqw; top: 4cqw; width: 32cqw; }
.hp-mems { top: 12cqw; }
.hp-caps span:not(:last-child)::after { float: none; margin-left: 8px; }
.hp-caps { grid-template-columns: 1fr 1fr 1fr; }
/* smaller "more below" cue, off to the side so it never covers the picture */
.scroll-cue { left: auto; right: 14px; transform: none; padding: 7px 12px 5px; font-size: 12px; }
.scroll-cue.gone { transform: translateY(10px); }
@keyframes cueIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  /* phones: the headline, then the picture straight away, then a line and the button */
  .hero { display: flex; flex-direction: column; gap: 0; padding-top: 20px; }
  .hero-text { display: contents; }
  .hero-text .eyebrow { display: none; }
  .hero h1 { order: 1; font-size: 38px; margin: 0 0 14px; }
  .hero > .hero-pic { order: 2; align-self: stretch; }
  .hero-sub { order: 3; margin-top: 16px; }
  .big-create { order: 4; }
  .hero-continue { order: 5; }
  .hero-act { order: 6; margin-top: 22px; }
  .hero-again { display: none; }
}
/* the cue is just a small round chevron at the side */
.scroll-cue { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }
.scroll-cue svg { width: 22px; height: 22px; }

/* ---------- Home: animated scenes (memories alive · in their own words) ---------- */
.an-alive, .an-voice { margin: 0; container-type: inline-size; width: 100%; }
.an-scene { position: relative; width: 100%; aspect-ratio: 1 / .9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(110% 90% at 50% 0%, #fbf6ee 0%, #f1e6d6 75%, #eadcc7 100%); box-shadow: 0 30px 60px -32px rgba(58,53,50,.38); }
.an-cap { margin-top: 10px; text-align: center; font-size: 14px; color: var(--ink-soft); }
/* senders around the wall */
.aa-sender { position: absolute; display: flex; align-items: center; gap: 1.8cqw; padding: 1.6cqw 2.6cqw 1.6cqw 1.6cqw; border-radius: 99px; background: #fffdf9;
  border: 1px solid #e8dcc8; box-shadow: 0 2cqw 4cqw -2.4cqw rgba(58,40,20,.4); z-index: 2; transition: transform .3s ease, box-shadow .3s ease; }
.aa-sender i { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; color: #fff; font: normal 700 2.8cqw/1 var(--sans, system-ui); }
.aa-sender span { font-size: 2.3cqw; line-height: 1.25; color: var(--ink-soft); }
.aa-sender b { display: block; color: var(--ink); font-size: 2.6cqw; }
.aa-sender.sending { transform: scale(1.06); box-shadow: 0 0 0 .8cqw rgba(140,106,60,.18), 0 2cqw 4cqw -2.4cqw rgba(58,40,20,.4); }
.aa-qr { position: absolute; right: 4cqw; top: 6cqw; width: 19cqw; padding: 1.8cqw; border-radius: 2.4cqw; background: #fff; border: 1px solid #e8dcc8; text-align: center; z-index: 2;
  box-shadow: 0 2cqw 4cqw -2.4cqw rgba(58,40,20,.4); }
.aa-qr svg { display: block; width: 100%; }
.aa-qr span { display: block; margin-top: 1.2cqw; font: 700 1.9cqw/1.2 var(--sans, system-ui); color: var(--ink); }
.aa-phone { position: absolute; left: 32cqw; top: 5cqw; width: 36cqw; aspect-ratio: 9 / 18; padding: 1.3cqw; border-radius: 5.5cqw; background: #2b2623;
  box-shadow: 0 4cqw 7cqw -3cqw rgba(30,20,10,.55); z-index: 1; }
.aa-screen { position: relative; height: 100%; border-radius: 4.3cqw; overflow: hidden; background: #fbf8f3; display: flex; flex-direction: column; }
.aa-head { padding: 4cqw 3cqw 2cqw; border-bottom: 1px solid #ece2d2; }
.aa-head b { display: block; font: 4cqw/1.1 var(--serif); color: var(--ink); }
.aa-head span { font: italic 2.2cqw/1.3 var(--serif); color: var(--ink-soft); }
.aa-list { flex: 1; overflow: hidden; padding: 2.2cqw; display: grid; gap: 1.8cqw; align-content: start; }
.aa-card { display: flex; gap: 1.6cqw; padding: 1.8cqw; border-radius: 2.4cqw; background: #fff; border: 1.5px solid #ece2d2; transition: border-color 4s ease; }
.aa-card.new { border-color: #4f9a5c; animation: aaIn .5s var(--ease) both; }
.aa-card.new.fade { border-color: #ece2d2; }
.aa-card i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; color: #fff; font: normal 700 2.3cqw/1 var(--sans, system-ui); }
.aa-card p { margin: 0; font: 2.2cqw/1.3 var(--sans, system-ui); color: var(--ink); }
.aa-card p b { display: block; margin-top: .4cqw; font-size: 1.8cqw; color: var(--ink-soft); }
.aa-count { padding: 1.8cqw 3cqw 2.6cqw; font: 700 2cqw/1 var(--sans, system-ui); color: var(--accent-deep); border-top: 1px solid #ece2d2; }
.aa-fly { position: absolute; z-index: 5; width: 30cqw; pointer-events: none; box-shadow: 0 3cqw 5cqw -2cqw rgba(58,40,20,.45); }
.aa-pop { position: absolute; z-index: 6; font-size: 4cqw; pointer-events: none; }
@keyframes aaIn { from { opacity: 0; transform: translateY(-3cqw) scale(.96); } to { opacity: 1; transform: none; } }
/* grandma's tablet */
.av-tablet { position: absolute; left: 4cqw; top: 5cqw; width: 58cqw; aspect-ratio: 3 / 3.7; padding: 1.6cqw; border-radius: 4.5cqw; background: #2b2623;
  box-shadow: 0 4cqw 7cqw -3cqw rgba(30,20,10,.55); }
.av-screen { position: relative; height: 100%; border-radius: 3.2cqw; overflow: hidden; background: #fbf8f3; padding: 4cqw 4cqw 3cqw; display: flex; flex-direction: column; }
.av-top b { display: block; font: 4.6cqw/1.1 var(--serif); color: var(--ink); }
.av-top span { font: italic 2.5cqw/1.3 var(--serif); color: var(--ink-soft); }
.av-ask { margin-top: 3cqw; align-self: flex-start; padding: 1.6cqw 2.6cqw; border-radius: 99px; background: var(--accent-soft); color: var(--accent-deep); font: 700 2.4cqw/1.2 var(--sans, system-ui); }
.av-text { margin: 3cqw 0 0; min-height: 17cqw; font: 3cqw/1.42 var(--serif); color: var(--ink); }
.av-text::after { content: ""; display: inline-block; width: .35cqw; height: 3cqw; margin-left: .4cqw; vertical-align: -0.4cqw; background: var(--accent-deep); animation: avBlink 1s steps(1) infinite; }
.an-voice.listening .av-text::after { opacity: 1; }
.av-wave { display: flex; align-items: center; justify-content: center; gap: .9cqw; height: 7cqw; margin-top: auto; }
.av-wave i { width: 1cqw; height: 1.2cqw; border-radius: 1cqw; background: #c7ab7f; transition: height .12s ease; }
.av-mic { position: relative; align-self: center; display: grid; place-items: center; width: 11cqw; height: 11cqw; margin-top: 1.5cqw; border-radius: 50%; background: #b5473a; color: #fff; }
.av-mic svg { width: 5.4cqw; height: 5.4cqw; }
.an-voice.listening .av-mic::before, .an-voice.listening .av-mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .5cqw solid rgba(181,71,58,.45); animation: avRing 1.6s ease-out infinite; }
.an-voice.listening .av-mic::after { animation-delay: .8s; }
.av-saved { position: absolute; left: 50%; bottom: 4cqw; transform: translate(-50%, 4cqw); opacity: 0; padding: 1.8cqw 3.4cqw; border-radius: 99px; background: #2f6f3e; color: #fff;
  font: 700 2.6cqw/1 var(--sans, system-ui); white-space: nowrap; transition: opacity .4s ease, transform .4s var(--ease); }
.an-voice.saved .av-saved { opacity: 1; transform: translate(-50%, 0); }
.an-voice.saved .av-mic { visibility: hidden; }
.av-shelf { position: absolute; right: 4cqw; top: 9cqw; width: 30cqw; display: grid; gap: 2.2cqw; }
.av-ch { display: grid; grid-template-columns: auto 1fr; column-gap: 1.8cqw; padding: 2cqw 2.4cqw; border-radius: 2.6cqw; background: #fffdf9; border: 1px solid #e8dcc8;
  box-shadow: 0 2cqw 4cqw -2.4cqw rgba(58,40,20,.4); }
.av-ch b { grid-row: span 2; font: 3.4cqw/1 var(--serif); color: var(--accent-deep); align-self: center; }
.av-ch span { font: 700 2.4cqw/1.2 var(--sans, system-ui); color: var(--ink); }
.av-ch em { font: normal 2cqw/1.3 var(--sans, system-ui); color: var(--ink-soft); }
.av-ch.new { opacity: 0; transform: translateX(-6cqw); transition: opacity .5s ease, transform .6s var(--ease), border-color 3s ease; }
.an-voice.saved .av-ch.new { opacity: 1; transform: none; border-color: #4f9a5c; }
.av-family { position: absolute; right: 4cqw; bottom: 6cqw; display: flex; align-items: center; flex-wrap: wrap; width: 30cqw; row-gap: 1.4cqw; }
.av-family i { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; margin-right: -1.4cqw; border-radius: 50%; border: .5cqw solid #f4ebdd; color: #fff; font: normal 700 2.2cqw/1 var(--sans, system-ui); }
.av-family span { flex-basis: 100%; font: 700 2.2cqw/1.2 var(--sans, system-ui); color: var(--ink-soft); }
@keyframes avRing { from { transform: scale(1); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes avBlink { 50% { opacity: 0; } }
.feature-split.flip { grid-template-columns: 1fr 1.05fr; }
#voices .feature-list { margin-bottom: 22px; }
@media (max-width: 860px) {
  .feature-split.flip { grid-template-columns: 1fr; }
  .an-scene { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .an-voice.listening .av-mic::before, .an-voice.listening .av-mic::after, .av-text::after { animation: none; } }
/* untold → told: the old print is faded and unexplained until she tells its story */
.av-print { position: absolute; right: 5cqw; top: 5cqw; width: 28cqw; padding: 1.4cqw 1.4cqw 5cqw; background: #fffdf8; border-radius: 1cqw; transform: rotate(4deg);
  box-shadow: 0 2cqw 4cqw -2cqw rgba(58,40,20,.45); }
.av-print svg { display: block; width: 100%; border-radius: .5cqw; filter: sepia(.9) saturate(.4) contrast(.55) brightness(1.25) blur(.25cqw); opacity: .55;
  transition: filter 2.4s ease, opacity 2.4s ease; }
.av-print em { position: absolute; left: 0; right: 0; bottom: 1.4cqw; text-align: center; font: italic 2.3cqw/1 var(--serif); white-space: nowrap; transition: opacity .8s ease; }
.av-print .ap-q { color: #b3a48f; } .av-print .ap-a { color: var(--ink); opacity: 0; }
.an-voice.listening .av-print svg, .an-voice.saved .av-print svg { filter: sepia(.25) saturate(.95); opacity: 1; }
.an-voice.listening .av-print .ap-q, .an-voice.saved .av-print .ap-q { opacity: 0; }
.an-voice.listening .av-print .ap-a, .an-voice.saved .av-print .ap-a { opacity: 1; }
.av-shelf { top: auto; bottom: 22cqw; }
.av-family { bottom: 5cqw; }

/* ---------- Home hero carousel: three short stories, sliding one to the next ---------- */
.hero > .hero-slides { grid-area: pic; align-self: center; min-width: 0; }
.hero-slides { position: relative; width: 100%; max-width: 640px; justify-self: center; }
.hs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 22px; }
.hs-track::-webkit-scrollbar { display: none; }
.hs-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.hs-slide .hero-pic { max-width: none; }
.hs-title { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; font: 700 17px/1.2 var(--sans, system-ui); color: var(--ink); }
.hs-title b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
.hs-nav { position: absolute; top: calc(38px + 40%); transform: translateY(-50%); z-index: 8; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,253,249,.94); color: var(--ink); box-shadow: 0 6px 16px -6px rgba(58,40,20,.45); cursor: pointer; }
.hs-nav svg { width: 22px; height: 22px; }
.hs-nav.prev { left: -6px; } .hs-nav.next { right: -6px; }
.hs-nav:active { transform: translateY(-50%) scale(.94); }
.hs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.hs-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: #d9ccb8; cursor: pointer; transition: width .3s ease, background .3s ease; position: relative; overflow: hidden; }
.hs-dots button.on { width: 34px; background: #e4d7c2; }
.hs-dots button.on::after { content: ""; position: absolute; inset: 0; background: var(--accent-deep); transform-origin: left; animation: hsFill var(--dur, 9s) linear both; }
.hero-slides.paused .hs-dots button.on::after { animation: none; transform: none; }
@keyframes hsFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* memory hearts drift behind the cards, never over the words */
.hp-mem { position: relative; z-index: 2; } .hp-heart { z-index: 1; }
/* lower sections: the voices section is text only now */
.feature-solo { max-width: 760px; margin: 0 auto; }
@media (max-width: 860px) {
  .hero > .hero-slides { order: 2; align-self: stretch; max-width: none; }
  .hs-nav { width: 40px; height: 40px; }
  .hs-nav.prev { left: -4px; } .hs-nav.next { right: -4px; }
}
@media (min-width: 861px) { .hero { grid-template-areas: "text pic" "act pic"; } }
.hs-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }
.hs-bar .hs-dots { margin: 0; }
.hs-nav, .hs-nav.prev, .hs-nav.next { position: static; transform: none; left: auto; right: auto; top: auto; }
.hs-nav:active { transform: scale(.94); }
/* outcome cards never push the page sideways */
.out-card { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Hero story 2: a private gathering, live ---------- */
.an-event { margin: 0; container-type: inline-size; width: 100%; }
.ev-scene { background: #efe4d3; }
.ev-wall { position: absolute; inset: 0 0 auto 0; height: 52cqw; background: linear-gradient(#f6eee2, #eadcc6); }
.ev-floor { position: absolute; inset: 52cqw 0 0 0; background: linear-gradient(#cdb08a, #b8966c); }
.ev-floor::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 11.8cqw, rgba(90,60,30,.12) 11.8cqw 12cqw); }
.ev-door { position: absolute; right: 0; top: 22cqw; width: 9cqw; height: 30cqw; background: #8a6a4a; border: .8cqw solid #6e5238; border-right: 0; }
.ev-door::after { content: ""; position: absolute; left: 1.2cqw; top: 15cqw; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #e4c48a; }
.ev-screen { position: absolute; left: 18cqw; top: 4cqw; width: 62cqw; height: 40cqw; padding: 1.2cqw; border-radius: 1.6cqw; background: #26211e; box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,.5); }
.ev-screen::after { content: ""; position: absolute; left: 45%; width: 10%; bottom: -3cqw; height: 3cqw; background: #4a3f37; }
.evs-head { display: flex; align-items: baseline; gap: 1.4cqw; padding: 1.4cqw 2cqw; border-radius: 1cqw 1cqw 0 0; background: linear-gradient(90deg, #7a5a3a, #a77f55); color: #fff; }
.evs-head b { font: 3.2cqw/1 var(--serif); } .evs-head span { font-size: 1.8cqw; opacity: .85; }
.evs-head em { margin-left: auto; font: normal 700 1.7cqw/1 var(--sans, system-ui); display: flex; align-items: center; gap: .8cqw; }
.evs-head em i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #ff6b5a; animation: evLive 1.4s ease-in-out infinite; }
.evs-feed { height: calc(100% - 5.8cqw); padding: 1.4cqw; background: #fbf8f3; border-radius: 0 0 1cqw 1cqw; overflow: hidden; display: grid; gap: 1.2cqw; align-content: start; }
.evs-card { display: flex; gap: 1.2cqw; align-items: flex-start; padding: 1.2cqw 1.6cqw; border-radius: 1.4cqw; background: #fff; border: 1.5px solid #ece2d2; transition: border-color 4s ease; animation: aaIn .5s var(--ease) both; }
.evs-card.new { border-color: #4f9a5c; } .evs-card.old { border-color: #ece2d2; }
.evs-card i { flex: none; display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; color: #fff; font: normal 700 1.9cqw/1 var(--sans, system-ui); }
.evs-card p { flex: 1; margin: 0; font: 2cqw/1.3 var(--sans, system-ui); color: var(--ink); }
.evs-card p b { font-size: 1.7cqw; color: var(--ink-soft); margin-left: .6cqw; font-weight: 700; }
.evs-card u { flex: none; text-decoration: none; font: 700 1.8cqw/1 var(--sans, system-ui); color: #b5473a; align-self: center; }
.ev-stand { position: absolute; right: 11cqw; top: 33cqw; width: 11cqw; padding: 1cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 1.6cqw 3cqw -1.6cqw rgba(0,0,0,.45); text-align: center; z-index: 3; }
.ev-stand::after { content: ""; position: absolute; left: 47%; width: 6%; top: 100%; height: 9cqw; background: #6e5238; }
.ev-stand svg { display: block; width: 100%; }
.ev-stand span { display: block; margin-top: .6cqw; font: 700 1.45cqw/1.15 var(--sans, system-ui); color: var(--ink); }
.ev-stand.scan { box-shadow: 0 0 0 .8cqw rgba(79,154,92,.35), 0 1.6cqw 3cqw -1.6cqw rgba(0,0,0,.45); }
/* chairs and guests, seen from behind, facing the screen */
.ev-people { position: absolute; inset: 0; }
.ev-chair { position: absolute; width: 9cqw; height: 6.4cqw; margin-left: -4.5cqw; border-radius: 1.4cqw 1.4cqw .6cqw .6cqw; background: #6e5238; box-shadow: inset 0 -1cqw 0 rgba(0,0,0,.15); }
.ev-guest { position: absolute; width: 8cqw; height: 11cqw; margin-left: -4cqw; transition: left 1.7s cubic-bezier(.45,.05,.4,1), top 1.7s cubic-bezier(.45,.05,.4,1), opacity .6s ease; }
.ev-guest .hd { position: absolute; left: 1.9cqw; top: 0; width: 4.2cqw; height: 4.6cqw; border-radius: 50%; background: var(--hair, #4b3a2c); }
.ev-guest .bd { position: absolute; left: 0; top: 4cqw; width: 8cqw; height: 7cqw; border-radius: 3.6cqw 3.6cqw 1cqw 1cqw; background: var(--top, #7FA3B8); }
.ev-guest.walking { animation: evBob .42s ease-in-out infinite; }
.ev-guest .ph { position: absolute; right: -1.6cqw; top: 2.4cqw; width: 2.4cqw; height: 4cqw; border-radius: .6cqw; background: #26211e; border: .35cqw solid #26211e; opacity: 0; transition: opacity .3s ease; }
.ev-guest .ph::after { content: ""; position: absolute; inset: 0; border-radius: .3cqw; background: #bfe3c5; }
.ev-guest.phone .ph { opacity: 1; }
.ev-guest.focus .bd { box-shadow: 0 0 0 .6cqw rgba(255,255,255,.75); }
.ev-bubble { position: absolute; z-index: 9; max-width: 30cqw; padding: 1.4cqw 2cqw; border-radius: 2.4cqw 2.4cqw 2.4cqw .6cqw; background: #fff; color: var(--ink); font: 2.1cqw/1.3 var(--sans, system-ui);
  box-shadow: 0 2cqw 3.6cqw -2cqw rgba(0,0,0,.45); animation: hpPop .4s var(--ease) both; }
.ev-bubble b { display: block; font-size: 1.7cqw; color: var(--ink-soft); }
.ev-heart { position: absolute; z-index: 8; font-size: 3.2cqw; pointer-events: none; }
/* the close-up of Aroha's phone */
.ev-phone { position: absolute; left: 2.5cqw; top: 27cqw; width: 23cqw; aspect-ratio: 9 / 17; padding: 1cqw; border-radius: 3.6cqw; background: #26211e; z-index: 10;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,.55); opacity: 0; transform: translateY(4cqw) scale(.92); transition: opacity .45s ease, transform .5s var(--ease); }
.ev-scene.p-show .ev-phone { opacity: 1; transform: none; }
.evp-screen { position: relative; height: 100%; border-radius: 2.8cqw; overflow: hidden; background: #fbf8f3; }
.evp-screen > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2cqw; text-align: center; opacity: 0; transition: opacity .35s ease; }
.ev-scene.p-cam .evp-cam, .ev-scene.p-in .evp-in, .ev-scene.p-talk .evp-talk, .ev-scene.p-done .evp-done { opacity: 1; }
.evp-cam { background: #3a332e !important; }
.evp-qr { width: 13cqw; height: 13cqw; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath fill='%232b2623' d='M0 0h7v7H0zM1 1v5h5V1zM2 2h3v3H2zM14 0h7v7h-7zM15 1v5h5V1zM16 2h3v3h-3zM0 14h7v7H0zM1 15v5h5v-5zM2 16h3v3H2zM9 0h2v2H9zM8 3h3v2H8zM12 4h1v3h-1zM9 8h4v1H9zM8 10h2v3H8zM11 11h3v2h-3zM15 9h2v2h-2zM18 8h3v2h-3zM14 14h2v2h-2zM17 13h2v3h-2zM19 17h2v4h-2zM14 18h3v3h-3zM9 15h3v2H9zM10 18h2v3h-2zM0 9h2v2H0zM3 8h3v2H3z'/%3E%3C/svg%3E") center / 84% no-repeat; border-radius: 1cqw; outline: .5cqw solid #ffd76a; outline-offset: 1cqw; }
.evp-beam { position: absolute; left: 22%; right: 22%; height: .5cqw; background: #6ee08a; box-shadow: 0 0 2cqw #6ee08a; top: 34%; animation: evBeam 1.1s ease-in-out infinite alternate; }
.evp-cam span { margin-top: 3cqw; color: #fff; font: 700 1.7cqw/1.2 var(--sans, system-ui); }
.evp-in b { color: #2f6f3e; font: 800 2.8cqw/1.2 var(--sans, system-ui); }
.evp-in span { margin-top: 1cqw; font: 1.8cqw/1.3 var(--sans, system-ui); color: var(--ink-soft); }
.evp-talk { justify-content: space-between !important; padding-top: 3cqw !important; }
.evp-text { margin: 0; text-align: left; font: 2.05cqw/1.4 var(--serif); color: var(--ink); min-height: 18cqw; }
.evp-mic { position: relative; display: grid; place-items: center; width: 8cqw; height: 8cqw; margin-bottom: 1.4cqw; border-radius: 50%; background: #b5473a; color: #fff; }
.evp-mic svg { width: 4cqw; height: 4cqw; }
.evp-mic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .45cqw solid rgba(181,71,58,.45); animation: avRing 1.6s ease-out infinite; }
.evp-done { color: #fff; background: #2f6f3e !important; font: 800 2.4cqw/1.3 var(--sans, system-ui); }
/* narration */
.ev-say { position: absolute; left: 50%; bottom: 2.6cqw; transform: translateX(-50%); z-index: 12; max-width: 90cqw; padding: 1.6cqw 3.2cqw; border-radius: 99px; background: rgba(38,33,30,.88); color: #fff;
  font: 700 2.6cqw/1.2 var(--sans, system-ui); white-space: nowrap; }
.ev-say.in { animation: evSay .45s ease both; }
@keyframes evSay { from { opacity: 0; transform: translate(-50%, 1.6cqw); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes evBob { 50% { transform: translateY(-.7cqw); } }
@keyframes evBeam { from { top: 26%; } to { top: 50%; } }
@keyframes evLive { 50% { opacity: .35; } }
/* every story the same height, so nothing jumps and there's no empty gap */
.hs-slide .hp-scene, .hs-slide .an-scene { aspect-ratio: 1 / .9 !important; }
.hs-slide { display: flex; flex-direction: column; }
/* "Next: …" says there's another story to see */
.hs-nav.next { width: auto; padding: 0 10px 0 16px; gap: 4px; border-radius: 99px; display: flex; align-items: center; background: var(--ink); color: #fff; border-color: var(--ink); }
.hs-next-l { font: 600 14px/1 var(--sans, system-ui); white-space: nowrap; }
.hs-next-l b { font-weight: 800; }
.hs-nav.next.nudge { animation: hsNudge 1.2s ease-in-out 2; }
@keyframes hsNudge { 0%, 100% { transform: none; } 30% { transform: translateX(6px); } 60% { transform: translateX(-2px); } }
@media (max-width: 420px) { .hs-bar { gap: 12px; } .hs-next-l { font-size: 13px; } }

/* ---------- Keep it for good (payment page) ---------- */
.pay-page { background: var(--bg); }
.pay-main { max-width: 620px; margin: 0 auto; padding: calc(var(--header-h) + 26px) 16px 40px; display: grid; gap: 18px; }
.pay-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px; box-shadow: 0 20px 40px -30px rgba(58,53,50,.35); }
.pay-center { text-align: center; }
.pay-card h1 { font-size: clamp(32px, 6vw, 44px); margin: 4px 0 6px; }
.pay-card h2 { font-size: 28px; margin: 0 0 12px; }
.pay-eyebrow { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); }
.pay-addr { margin: 0 0 18px; color: var(--ink-soft); font-weight: 600; overflow-wrap: anywhere; }
.pay-sub { color: var(--ink-soft); font-size: 17px; }
.pay-count { border-radius: 18px; background: var(--accent-soft); padding: 16px 16px 14px; text-align: center; margin-bottom: 20px; }
.pay-count.warn { background: #f5ddd6; }
.pc-label { font-weight: 700; color: var(--ink-soft); font-size: 14px; }
.pc-clock { display: flex; justify-content: center; gap: 10px; margin: 8px 0 10px; }
.pc-clock span { display: grid; min-width: 62px; padding: 8px 4px 6px; border-radius: 12px; background: #fffdf9; }
.pc-clock b { font: 600 32px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-clock i { font-style: normal; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.pc-bar { height: 8px; border-radius: 99px; background: #fffdf9; overflow: hidden; margin: 2px 6px 10px; }
.pc-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent-deep); }
.pc-date { font-size: 14.5px; color: var(--ink); font-weight: 600; }
.pay-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pay-price b { font: 600 44px/1 var(--serif); color: var(--ink); }
.pay-price span { color: var(--ink-soft); font-weight: 600; }
.pay-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: 16px; }
.pay-why { font-size: 15px; color: var(--ink-soft); background: #fbf6ee; border-radius: 12px; padding: 10px 12px; }
.pay-agree { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; font-size: 16px; cursor: pointer; }
.pay-agree input { width: 22px; height: 22px; accent-color: var(--accent-deep); }
.pay-go { width: 100%; justify-content: center; }
.pay-go.busy { opacity: .75; }
.pay-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff4e0; font-size: 15px; }
.pay-small { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.pay-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pay-steps li { display: grid; gap: 2px; padding-left: 16px; border-left: 3px solid var(--line); }
.pay-steps li.done { border-color: var(--accent-deep); }
.pay-steps b { font-size: 15.5px; } .pay-steps span { color: var(--ink-soft); font-size: 15px; }
.pay-tick { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 6px; border-radius: 50%; background: #2f6f3e; color: #fff; font-size: 32px; font-weight: 800; }
.pay-spin { width: 42px; height: 42px; margin: 6px auto; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent-deep); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-foot { text-align: center; padding: 0 16px 40px; font-size: 13.5px; color: var(--ink-soft); }
.pay-foot a { color: inherit; }
@media (max-width: 420px) { .pc-clock span { min-width: 54px; } .pc-clock b { font-size: 28px; } .pay-card { padding: 22px 18px; } }
/* Terms */
.terms-main { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + 26px) 18px 60px; }
.terms-main h1 { font-size: clamp(36px, 6vw, 52px); margin: 0 0 6px; }
.terms-main h2 { font-size: 26px; margin: 30px 0 8px; }
.terms-main p, .terms-main li { font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.terms-main .t-sum { background: var(--accent-soft); border-radius: 16px; padding: 14px 18px; }
.terms-main .t-sum li { margin: 4px 0; }
.terms-main .t-upd { color: var(--ink-soft); font-size: 14px; }
.lo-trial { text-decoration: none; }
/* Owners sheet and account deletion */
.ow-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.ow-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf9; }
.ow-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; flex: none; }
.ow-who { flex: 1; min-width: 0; display: grid; } .ow-who small { color: var(--ink-soft); overflow-wrap: anywhere; }
.ow-main { padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 13px; }
.ow-acts { display: flex; gap: 14px; width: 100%; padding-left: 50px; } .ow-rm { color: #a33c2e !important; }
.ow-acts .sure, .ow-rm.sure { font-weight: 800; }
.ow-count { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.ow-add { display: flex; gap: 8px; } .ow-add .input { flex: 1; min-width: 0; }
.ow-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #eef6ef; font-size: 15px; }
.ac-del { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.ac-del summary { cursor: pointer; color: #a33c2e; font-weight: 700; }
.ac-del .input { width: 100%; margin: 6px 0 10px; box-sizing: border-box; }
.ac-delgo { width: 100%; justify-content: center; background: #a33c2e; color: #fff; border-color: #a33c2e; }
.ac-delgo:disabled { opacity: .45; }
/* on phones these pages' only header button (Account / My tributes) stays visible */
@media (max-width: 860px) { .tributes-page .header-actions .btn-ghost, .pay-page .header-actions .btn-ghost, .following-page .header-actions .btn-ghost { display: inline-flex !important; height: 38px; padding: 0 14px; font-size: 14px; } }
/* "Buy now" — easy to find wherever an unpaid live page is managed */
.dash-buy { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; padding: 10px 10px 10px 14px; border-radius: 16px; background: rgba(255,253,249,.16); border: 1px solid rgba(255,255,255,.3); }
.dash-buy span { flex: 1; font-size: 13.5px; line-height: 1.35; opacity: .95; }
.dash-buy span b { display: block; font-size: 15.5px; }
.dash-buybtn { flex: none; padding: 11px 20px; border: 0; border-radius: 99px; background: #fff; color: #5a4223; font: 800 16px var(--sans, system-ui); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); }
.tr-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: 14px; }
.tr-buy b { color: var(--accent-deep); font-size: 15px; white-space: nowrap; }
.lo-trial b { color: #5a4223; }
.pay-ways { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.pay-ways span { display: inline-flex; align-items: center; gap: 2px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: 700 13.5px/1 -apple-system, system-ui, sans-serif; color: #111; }
.pay-ways .g { font-weight: 800; color: #4285F4; margin-right: 2px; }

/* ---------- "Next step" hint: a light runs round the button's border for 10 seconds, then fades ---------- */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hint-ring { position: relative; isolation: isolate; }
.hint-ring::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ring), transparent 0 55%, rgba(255,236,190,.0) 58%, #ffe7b0 70%, #f0b955 80%, #8c6a3c 88%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ringSpin 2.5s linear 4, ringFade 10s ease forwards;
}
@keyframes ringSpin { to { --ring: 360deg; } }
@keyframes ringFade { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hint-ring::after { animation: ringFade 10s ease forwards; background: linear-gradient(#f0b955, #8c6a3c); } }
.hint-ring::after { inset: -5px; padding: 4px; background: conic-gradient(from var(--ring), transparent 0 45%, #fff1cc 60%, #ffd27a 72%, #e09a2a 82%, #8c6a3c 90%, transparent 97%); filter: drop-shadow(0 0 4px rgba(240,185,85,.7)); }
/* "Link copied" toast — above everything, including open sheets */
.copied-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 12px;
  width: min(440px, calc(100% - 24px)); box-sizing: border-box; padding: 12px 16px; border-radius: 16px; background: #2b2623; color: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55);
  font: 14.5px/1.35 var(--sans, system-ui); animation: ctIn .35s cubic-bezier(.2,.8,.2,1.2) both; }
.copied-toast b { display: block; font-size: 16px; }
.ct-tick { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #4f9a5c; font-weight: 800; }
.copied-toast.out { opacity: 0; transform: translate(-50%, -10px); transition: opacity .4s ease, transform .4s ease; }
@keyframes ctIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
/* owner's tools on the live page wrap neatly on a phone */
.live-own { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 20px); }
.lo-set { height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,253,249,.95); color: var(--ink); font: 800 14px var(--sans, system-ui); text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
body:has(.live-own) .live-view { top: calc(env(safe-area-inset-top,0px) + 116px); }
.qsh-copy { margin-top: 12px; }
/* Sharing slider (most open → most private) */
.sx { margin: 8px 0 6px; }
.sx-end { font: 700 12px/1 var(--sans, system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-left: 2px; }
.sx-end:first-child { margin-bottom: 8px; } .sx-end:last-child { margin-top: 8px; }
.sx-rail { position: relative; display: grid; gap: 6px; padding-left: 0; }
.sx-track { position: absolute; left: 17px; top: 22px; bottom: 22px; width: 6px; border-radius: 99px; background: var(--accent-soft); }
.sx-fill { position: absolute; left: 0; right: 0; top: 0; border-radius: 99px; background: linear-gradient(#5e8b6a, #8c6a3c); transition: height .3s ease; }
.sx-stop { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 10px 8px 6px; border: 1px solid transparent; border-radius: 14px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.sx-knob { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--line); box-sizing: border-box; z-index: 1; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.sx-stop.past .sx-knob { border-color: #b39a72; }
.sx-stop[aria-checked="true"] { background: #fffaf0; border-color: #e3cfa9; }
.sx-stop[aria-checked="true"] .sx-knob { transform: scale(1.18); border-color: var(--accent-deep); background: var(--accent-deep); box-shadow: 0 0 0 5px rgba(140,106,60,.18); }
.sx-lab { display: grid; } .sx-lab b { font-size: 16px; } .sx-lab em { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.sx-say { margin: 4px 0 8px; padding: 12px 14px; border-radius: 14px; background: #fbf6ee; font-size: 15px; line-height: 1.45; }
/* hint colours: gold = the next step, green = the live page, blue = manage / settings, coral = share */
.hint-ring::after { background: conic-gradient(from var(--ring), transparent 0 45%, var(--r1, #fff1cc) 60%, var(--r2, #ffd27a) 72%, var(--r3, #e09a2a) 82%, var(--r4, #8c6a3c) 90%, transparent 97%); filter: drop-shadow(0 0 4px var(--rg, rgba(240,185,85,.7))); }
.hint-ring[data-ring="green"] { --r1: #e8ffec; --r2: #8fe3a0; --r3: #3fae5a; --r4: #2f6f3e; --rg: rgba(63,174,90,.75); }
.hint-ring[data-ring="blue"] { --r1: #e6f1ff; --r2: #93c5ff; --r3: #3b82d6; --r4: #2b5ea8; --rg: rgba(59,130,214,.7); }
.hint-ring[data-ring="coral"] { --r1: #ffe8e0; --r2: #ffae94; --r3: #e0704f; --r4: #b3492c; --rg: rgba(224,112,79,.7); }
@media (prefers-reduced-motion: reduce) { .hint-ring::after { background: linear-gradient(var(--r2, #f0b955), var(--r4, #8c6a3c)); } }
/* People sheet */
.sh-seg.three { grid-template-columns: repeat(3, 1fr); } .sh-seg.three button { font-size: 13px; padding: 0 4px; }
.lo-people { height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,253,249,.95); color: var(--ink); font: 800 14px var(--sans, system-ui); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.pe-mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fbf6ee; font-size: 14.5px; }
.pe-add { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 8px; margin-bottom: 8px; }
.pe-add .input { min-width: 0; }
@media (max-width: 480px) { .pe-add { grid-template-columns: 1fr 1fr; } .pe-add .btn { grid-column: span 2; } }
.pe-note { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: #eef6ef; font-size: 14.5px; overflow-wrap: anywhere; }
.pe-find { width: 100%; box-sizing: border-box; margin: 6px 0 10px; }
.pe-count { margin: 10px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.pe-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; padding: 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf9; }
.pe-row.is-blocked { background: #fbf1ef; border-color: #ecd3cd; }
.pe-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.pe-who { display: grid; min-width: 0; } .pe-who b small { font-weight: 600; color: var(--ink-soft); }
.pe-who small { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.pe-c { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.pe-c.ok { background: #e3f1e6; color: #2f6f3e; } .pe-c.wait { background: #fff1d6; color: #8a5a12; } .pe-c.ro { background: #ece7e0; color: #6e655f; } .pe-c.bad { background: #f8d9d2; color: #a33c2e; }
.pe-acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.pe-bad { color: #a33c2e !important; } .pe-acts .sure { font-weight: 800; }
.pe-also { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; color: var(--ink-soft); }

/* ---------- Live page: one tidy Manage button for owners; one small View pill for guests ---------- */
.lo-menu-btn { position: fixed; z-index: 156; top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px;
  border: 0; border-radius: 999px; background: rgba(40,32,27,.88); color: #fff; font: 800 15px var(--sans, system-ui); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .35s ease, transform .35s ease; }
.lo-menu-btn.away, .live-view-wrap.away { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.lo-burger { display: grid; gap: 3.5px; } .lo-burger i { display: block; width: 18px; height: 2.2px; border-radius: 2px; background: #fff; }
.live-view-wrap { position: fixed; z-index: 155; top: calc(env(safe-area-inset-top,0px) + 12px); left: 12px; transition: opacity .35s ease, transform .35s ease; }
body:has(.live-ro) .live-view-wrap { top: calc(env(safe-area-inset-top,0px) + 92px); }
.lv-pill { height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,253,249,.94); color: var(--ink); font: 700 14px var(--sans, system-ui); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lv-pop { position: absolute; top: 46px; left: 0; display: grid; gap: 2px; min-width: 160px; padding: 6px; border-radius: 16px; background: #fffdf9; box-shadow: 0 16px 34px -14px rgba(0,0,0,.45); }
.lv-pop[hidden] { display: none; }
.lv-pop button { text-align: left; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 700 15px var(--sans, system-ui); color: var(--ink); cursor: pointer; }
.lv-pop button[aria-pressed="true"] { background: var(--accent-soft); }
html.sheet-open .lo-menu-btn, html.sheet-open .live-view-wrap { display: none !important; }
/* the Manage menu */
.lo-eyebrow { margin: 0; font: 700 12px/1 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.lo-menu h2 { margin: 6px 0 14px; }
.lo-items { display: grid; gap: 8px; }
.lo-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; box-sizing: border-box; }
.lo-item:active { transform: scale(.99); }
.lo-item > span:nth-child(2) { flex: 1; display: grid; } .lo-item b { font-size: 16.5px; } .lo-item small { color: var(--ink-soft); font-size: 13.5px; }
.lo-item > i { font-style: normal; font-size: 22px; color: var(--ink-soft); }
.lo-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #f1ebe2; font-size: 20px; }
.lo-ic.c-coral { background: #fde6de; } .lo-ic.c-blue { background: #e3eefc; } .lo-ic.c-gold { background: #f6e7c8; }
.lo-view { display: grid; gap: 6px; margin-top: 16px; } .lo-view > span { font: 700 13px var(--sans, system-ui); color: var(--ink-soft); }
.live-qr.hint-ring, .lo-menu-btn.hint-ring { position: fixed; } .lv-pill.hint-ring { position: relative; }
/* the owner's guest view */
.gp-bar { position: fixed; z-index: 170; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom,0px) + 86px); max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 16px; background: #2f6f3e; color: #fff; font: 14.5px/1.35 var(--sans, system-ui); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.gp-bar span { flex: 1; } .gp-bar a { flex: none; padding: 9px 16px; border-radius: 99px; background: #fff; color: #2f6f3e; font-weight: 800; text-decoration: none; }
.lo-ic.c-green { background: #e3f1e6; }
html.sheet-open .gp-bar { display: none; }
/* Viewing as: Owner / Guest */
.va-wrap { position: fixed; z-index: 157; top: calc(env(safe-area-inset-top,0px) + 12px); left: 12px; transition: opacity .35s ease, transform .35s ease; }
.va-wrap.is-guest { left: auto; right: 12px; }
.va-wrap.away { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.va-pill { height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,253,249,.95); color: var(--ink); font: 700 14px var(--sans, system-ui); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.va-wrap.is-guest .va-pill { background: #2f6f3e; color: #fff; }
.va-pop { position: absolute; top: 50px; left: 0; width: min(300px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 6px; border-radius: 16px; background: #fffdf9; box-shadow: 0 16px 34px -14px rgba(0,0,0,.45); }
.va-wrap.is-guest .va-pop { left: auto; right: 0; }
.va-pop[hidden] { display: none; }
.va-opt { display: grid; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; } .va-opt small { color: var(--ink-soft); font-size: 13px; }
.va-opt[aria-current="true"] { background: var(--accent-soft); }
html.sheet-open .va-wrap { display: none !important; }
/* guest view: "Viewing as guest" takes the Manage button's place; tapping it goes back */
.va-wrap { display: none !important; }
.va-back { position: fixed; z-index: 157; top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px;
  border-radius: 999px; background: #2f6f3e; color: #fff; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); transition: opacity .35s ease, transform .35s ease; }
.va-back span:last-child { display: grid; line-height: 1.1; } .va-back b { font: 800 14.5px var(--sans, system-ui); } .va-back small { font: 600 11.5px var(--sans, system-ui); opacity: .85; }
.va-eye { font-size: 18px; }
.va-back.away { opacity: 0; transform: translateY(-14px); pointer-events: none; }
html.sheet-open .va-back { display: none !important; }
/* the table card and the big QR open on top of the share sheet (it used to open behind it) */
.qr-print { z-index: 1200; }
.qr-show { z-index: 1200; }
@media print {
  /* the page behind a sheet is pinned in place on screen; un-pin it so the card prints at the top */
  html.printing-card body { position: static !important; top: auto !important; overflow: visible !important; }
  html.printing-card, html.printing-card body { overflow: visible !important; height: auto !important; }
}
.qr-print { background: rgba(30,24,20,.88); }

/* ---------- (?) help buttons and their animated explanations ---------- */
.qh { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 0 0 0 6px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--accent-deep);
  background: #fffdf9; font: 800 13px/1 var(--sans, system-ui); cursor: pointer; vertical-align: middle; opacity: .9; position: relative; }
.qh::before { content: ""; position: absolute; inset: -10px; } /* a bigger tap target */
.qh:hover, .qh:focus-visible { opacity: 1; background: var(--accent-soft); outline: none; }
.qh { animation: qhPulse 2.4s ease-in-out 2 1s; }
@keyframes qhPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(140,106,60,0); } 50% { box-shadow: 0 0 0 6px rgba(140,106,60,.22); } }
.help-sheet { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: end center; background: rgba(30,24,20,.55); animation: fadeIn .2s ease both; }
.help-sheet.out { opacity: 0; transition: opacity .2s ease; }
.hs-card { width: min(520px, 100%); max-height: 88vh; overflow: auto; box-sizing: border-box; padding: 18px 20px calc(env(safe-area-inset-bottom,0px) + 18px); border-radius: 22px 22px 0 0; background: #fffdf9; color: var(--ink); animation: hsUp .3s cubic-bezier(.2,.8,.2,1) both; }
@media (min-width: 700px) { .help-sheet { place-items: center; } .hs-card { border-radius: 22px; } }
@keyframes hsUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.hs-card h3 { margin: 14px 0 6px; font: 600 24px/1.2 var(--serif); }
.hs-card p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.hs-ok { width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 99px; background: var(--accent-deep); color: #fff; font: 800 16px var(--sans, system-ui); cursor: pointer; }
.hs-anim { container-type: inline-size; position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #fbf6ee, #efe3d1); }
.hx { position: absolute; inset: 0; }
.hx-p { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: normal 800 14px/1 var(--sans, system-ui); box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); }
.hx-wall { position: absolute; right: 6%; top: 14%; width: 36%; height: 72%; padding: 8px; box-sizing: border-box; border-radius: 12px; background: #fff; border: 1px solid #e6d9c4; display: grid; align-content: start; gap: 6px; }
.hx-wall b { font: 600 13px var(--serif); }
.hx-card { height: 14px; border-radius: 5px; background: #efe6d8; } .hx-card.c2 { width: 70%; }
.hx-fly { position: absolute; width: 30px; height: 14px; border-radius: 5px; background: #fff; border: 1.5px solid #4f9a5c; left: 20%; top: 50%; opacity: 0; }
.hx-fly.f1 { animation: hxFly 3.6s ease-in-out infinite .4s; } .hx-fly.f2 { animation: hxFly 3.6s ease-in-out infinite 1.4s; } .hx-fly.f3 { animation: hxFly 3.6s ease-in-out infinite 2.2s; }
@keyframes hxFly { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 60% { opacity: 1; transform: translate(42cqw, -12px) scale(1); } 80%, 100% { opacity: 0; transform: translate(42cqw, -12px) scale(1); } }
.hx-fly.bounce { animation: hxBounce 3s ease-in-out infinite .4s; border-color: #a33c2e; }
@keyframes hxBounce { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 45% { transform: translateX(20cqw); } 60% { transform: translateX(8cqw); opacity: 1; } 80%, 100% { opacity: 0; transform: translateX(8cqw); } }
/* post: three people → wall (gated: only keys get through) */
.hx-post .hx-p:nth-child(1) { left: 8%; top: 18%; } .hx-post .hx-p:nth-child(2) { left: 8%; top: 42%; } .hx-post .hx-p:nth-child(3) { left: 8%; top: 66%; }
.hx-post .hx-fly.f1 { top: 24%; } .hx-post .hx-fly.f3 { top: 72%; } .hx-post .hx-fly.f2 { top: 48%; }
.hx-gate { position: absolute; left: 40%; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(#a33c2e 0 8px, transparent 8px 14px); display: grid; place-items: center; font-size: 20px; }
.hx-gate { font-size: 0; } .hx-gate::after { content: "🔒"; font-size: 20px; position: absolute; top: 40%; left: -10px; }
.hx-key { position: absolute; left: 18%; font-size: 14px; } .hx-key.k1 { top: 14%; } .hx-key.k3 { top: 62%; }
.hx-post.gated .hx-p.stop { animation: hxNo 3s ease-in-out infinite; }
@keyframes hxNo { 0%, 100% { transform: none; } 35% { transform: translateX(26cqw); } 50% { transform: translateX(22cqw); } 60% { transform: translateX(26cqw); } 75% { transform: none; } }
/* email */
.hx-email .hx-p { left: 8%; top: 40%; } .hx-env { position: absolute; left: 22%; top: 38%; font-size: 26px; animation: hxEnv 3.6s ease-in-out infinite; }
.hx-tick { position: absolute; left: 26%; top: 18%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2f6f3e; color: #fff; font-weight: 800; opacity: 0; animation: hxTick 3.6s ease infinite; }
@keyframes hxEnv { 0% { transform: none; opacity: 1; } 30% { transform: translate(10cqw, -16px) scale(.7); opacity: 0; } 100% { opacity: 0; } }
@keyframes hxTick { 0%, 25% { opacity: 0; transform: scale(.4); } 35%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hx-email .hx-fly.f1 { animation-delay: 1.2s; top: 46%; } .hx-name .hx-fly.f1 { animation-delay: 1.4s; top: 46%; }
/* name */
.hx-name .hx-p { left: 8%; top: 40%; } .hx-type { position: absolute; left: 22%; top: 44%; padding: 4px 8px; border-radius: 8px; background: #fff; border: 1px solid #e6d9c4; font: 700 13px var(--sans, system-ui); overflow: hidden; white-space: nowrap; animation: hxType 3.6s steps(6) infinite; width: 0; }
@keyframes hxType { 0% { width: 0; } 35%, 100% { width: 60px; } }
/* sharing levels */
.hx-page { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; padding: 10px 6px; border-radius: 12px; background: #fff; border: 1px solid #e6d9c4; text-align: center; font-size: 26px; display: grid; gap: 2px; }
.hx-page small { font: 700 11px var(--sans, system-ui); color: var(--ink-soft); }
.hx-lv .hx-p { opacity: .25; transition: none; }
.hx-lv .a1 { left: 6%; top: 12%; } .hx-lv .a2 { left: 6%; top: 62%; } .hx-lv .a3 { right: 6%; top: 12%; } .hx-lv .a4 { right: 6%; top: 62%; }
.hx-link, .hx-qrp { position: absolute; opacity: 0; font-size: 18px; }
.lv-anyone .hx-p { animation: hxIn 3s ease infinite; } .lv-anyone .a2 { animation-delay: .4s; } .lv-anyone .a3 { animation-delay: .8s; } .lv-anyone .a4 { animation-delay: 1.2s; }
.lv-link .a1 { opacity: 1; } .lv-link .a2, .lv-link .a3, .lv-link .a4 { animation: hxIn 3.6s ease infinite; } .lv-link .a2 { animation-delay: .6s; } .lv-link .a3 { animation-delay: 1.4s; } .lv-link .a4 { animation-delay: 2.1s; }
.lv-link .hx-link.l1 { left: 12%; top: 40%; animation: hxPass 3.6s ease infinite .2s; } .lv-link .hx-link.l2 { right: 14%; top: 40%; animation: hxPass 3.6s ease infinite 1.2s; }
.lv-qr .a1 { opacity: 1; } .lv-qr .a2 { animation: hxIn 3s ease infinite .8s; } .lv-qr .hx-qrp { left: 9%; top: 40%; font-size: 20px; animation: hxPass 3s ease infinite .1s; }
.lv-owners .a1 { opacity: 1; } .lv-owners .hx-page { box-shadow: 0 0 0 3px #e3cfa9; }
@keyframes hxIn { 0%, 20% { opacity: .25; transform: scale(.9); } 40%, 85% { opacity: 1; transform: none; } 100% { opacity: .25; } }
@keyframes hxPass { 0% { opacity: 0; transform: translateY(0); } 20%, 60% { opacity: 1; transform: translateY(14px); } 100% { opacity: 0; transform: translateY(14px); } }
/* private memory */
.hx-mem { position: absolute; left: 10%; top: 18%; width: 48%; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #e6d9c4; display: grid; font-size: 13px; }
.hx-mem small { color: var(--ink-soft); }
.hx-padlock { position: absolute; left: 50%; top: 10%; font-size: 26px; animation: hxLock 3.4s ease infinite; }
@keyframes hxLock { 0% { transform: translateY(-30px) scale(1.4); opacity: 0; } 30%, 100% { transform: none; opacity: 1; } }
.hx-who { position: absolute; left: 10%; right: 6%; bottom: 12%; display: flex; gap: 8px; flex-wrap: wrap; font: 700 12px var(--sans, system-ui); }
.hx-who span { padding: 4px 8px; border-radius: 99px; } .hx-who .in { background: #e3f1e6; color: #2f6f3e; } .hx-who .out { background: #f3e7e4; color: #8a3b2e; }
/* block */
.hx-block .hx-p { left: 8%; top: 40%; } .hx-no { position: absolute; left: 7%; top: 36%; font-size: 40px; opacity: 0; animation: hxTick 3s ease infinite .9s; } .hx-block .hx-fly.f1 { top: 46%; }
/* owners */
.hx-owners { display: flex; justify-content: center; align-items: center; gap: 12px; }
.hx-own { position: relative; display: inline-block; width: 34px; height: 34px; animation: hxIn 3.4s ease infinite; } .hx-own .hx-p { position: static; } .hx-own em { position: absolute; top: -14px; left: 9px; font-style: normal; font-size: 14px; }
.hx-own.o1 { animation-delay: .3s; } .hx-own.o2 { animation-delay: .6s; } .hx-own.o3 { animation-delay: .9s; } .hx-own.o4 { animation-delay: 1.2s; }
.hx-own.o0 em { font-size: 18px; top: -18px; left: 7px; }
/* 30 days */
.hx-days { display: flex; align-items: center; justify-content: center; gap: 16px; }
.hx-cal { position: relative; width: 90px; height: 90px; border-radius: 14px; background: #fff; border: 1px solid #e6d9c4; display: grid; place-items: center; }
.hx-cal b { position: absolute; top: 14px; font: 600 38px/1 var(--serif); color: var(--ink); opacity: 0; animation: hxCal 4s steps(1) infinite; }
.hx-cal b:nth-child(2) { animation-delay: 1s; } .hx-cal b:nth-child(3) { animation-delay: 2s; } .hx-cal b:nth-child(4) { animation-delay: 3s; color: #a33c2e; }
@keyframes hxCal { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.hx-cal small { position: absolute; bottom: 10px; font: 700 10px var(--sans, system-ui); color: var(--ink-soft); }
.hx-arrow { font-size: 26px; color: var(--accent-deep); }
.hx-keep { width: 90px; height: 90px; border-radius: 14px; background: #f6e7c8; display: grid; place-items: center; text-align: center; font-size: 28px; animation: hxIn 4s ease infinite 2.4s; }
.hx-keep small { font: 700 10.5px/1.25 var(--sans, system-ui); color: #5a4223; }
/* guest view, phones */
.hx-guest, .hx-qrs, .hx-tcard, .hx-closep { display: flex; align-items: center; justify-content: center; gap: 16px; }
.hx-phone { position: relative; width: 66px; height: 112px; padding: 8px 6px; box-sizing: border-box; border-radius: 12px; background: #fff; border: 3px solid #2b2623; display: grid; align-content: start; gap: 5px; font: 800 9px var(--sans, system-ui); }
.hx-phone i { display: block; height: 10px; border-radius: 4px; background: #efe6d8; } .hx-phone i.r { background: #f6d7cf; }
.hx-phone.g { animation: hxIn 3.4s ease infinite 1s; } .hx-phone.off { opacity: .55; filter: grayscale(1); } .hx-phone small { font: 600 9px var(--sans, system-ui); color: var(--ink-soft); }
.hx-code { font-size: 44px; line-height: 1; text-align: center; margin-top: 18px; }
.hx-beam { width: 40px; height: 3px; background: #6ee08a; box-shadow: 0 0 10px #6ee08a; animation: hxBeam 2.4s ease-in-out infinite; }
@keyframes hxBeam { 0%, 100% { opacity: .2; transform: scaleX(.4); } 50% { opacity: 1; transform: none; } }
.hx-open { display: grid; place-items: center; width: 34px; height: 34px; margin: 30px auto 0; border-radius: 50%; background: #2f6f3e; color: #fff; font-size: 18px; opacity: 0; animation: hxTick 2.4s ease infinite 1.1s; }
.hx-paper { width: 86px; height: 112px; border-radius: 6px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); display: grid; place-items: center; text-align: center; padding: 6px; box-sizing: border-box; font-size: 34px; }
.hx-paper b { font: 600 13px var(--serif); } .hx-paper small { font: 700 8px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.hx-tcard .hx-phone.s { animation: hxIn 3s ease infinite .6s; }
/* gathering screen */
.hx-screen .hx-tv { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); width: 56%; height: 52%; border-radius: 8px; background: #2b2623; display: grid; place-items: center; font-size: 30px; }
.hx-tick2 { position: absolute; right: 8px; bottom: 8px; width: 46%; height: 12px; border-radius: 4px; background: #fff; border: 1.5px solid #4f9a5c; animation: hxIn 3s ease infinite; }
.hx-screen .hx-p:nth-of-type(1) { left: 22%; bottom: 8%; } .hx-screen .hx-p:nth-of-type(2) { left: 45%; bottom: 8%; } .hx-screen .hx-p:nth-of-type(3) { left: 68%; bottom: 8%; }
/* photo */
.hx-photo .hx-p { left: 8%; top: 40%; } .hx-pic { position: absolute; left: 22%; top: 38%; font-size: 26px; animation: hxEnv 3.6s ease-in-out infinite; } .hx-photo .hx-fly.f1 { top: 46%; animation-delay: 1s; }
/* hosting */
.hx-host { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hx-srv, .hx-free { width: 82px; height: 82px; border-radius: 14px; background: #fff; border: 1px solid #e6d9c4; display: grid; place-items: center; text-align: center; font-size: 28px; animation: hxIn 3.4s ease infinite; }
.hx-srv + .hx-srv { animation-delay: .4s; } .hx-free { background: #e3f1e6; animation: none; }
.hx-srv small, .hx-free small { font: 700 10.5px var(--sans, system-ui); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .hs-anim *, .qh { animation: none !important; opacity: 1 !important; } }
/* the year they passed away — behind a button until the family adds it */
.died-add { margin-top: 14px; }
.died-box { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding: 14px; border-radius: 16px; background: #fbf6ee; border: 1px solid var(--line); }
.died-box[hidden], .died-add[hidden], .bx-died[hidden], .bx-diedadd[hidden] { display: none; }
.died-box .field { flex: 1; min-width: 180px; margin: 0; }
.died-err { margin: 6px 0 0; color: #a33c2e; font-size: 14px; }
.bx-diedadd { margin-top: 14px; }
.pay-next { margin: 10px 0 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); }
.pay-cur { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14.5px; color: var(--ink-soft); }
.pay-cur span { flex: none; font-weight: 700; }
.pay-cur select { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 15px var(--sans, system-ui); color: var(--ink); }
.pay-curnote { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); }
.pay-go { gap: .3em; }
/* Not another social network */
.hero-not { display: block; margin-top: 8px; font-weight: 700; color: var(--accent-deep); }
.ns-compare { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; max-width: 980px; margin: 0 auto; }
.ns-col { border-radius: 22px; padding: 22px 22px 14px; }
.ns-col h3 { margin: 0 0 10px; font-size: 24px; }
.ns-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ns-col li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; }
.ns-them { background: #efe9e1; color: #6e655f; } .ns-them h3 { color: #6e655f; }
.ns-them li::before { content: "✕"; position: absolute; left: 4px; top: 0; color: #b0857a; font-weight: 800; }
.ns-us { background: #fffdf9; border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(58,53,50,.4); }
.ns-us li::before { content: "✓"; position: absolute; left: 2px; top: -1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2f6f3e; color: #fff; font-size: 12px; font-weight: 800; }
@media (max-width: 860px) { .ns-compare { grid-template-columns: 1fr; } }

/* ---------- Hero story 1: made for memories, not a feed ---------- */
.an-ns { margin: 0; container-type: inline-size; width: 100%; --T: 12.5s; }
.ns-scene { background: radial-gradient(120% 90% at 50% 0%, #fbf6ee, #efe3d1); }
.ns-side { position: absolute; top: 3cqw; width: 41cqw; }
.ns-left { left: 3cqw; } .ns-right { right: 3cqw; }
.ns-tag { display: inline-block; margin: 0 0 2cqw 1cqw; padding: 1cqw 2.6cqw; border-radius: 99px; font: 800 2.6cqw/1 var(--sans, system-ui); }
.ns-tag.bad { background: #f3e1dc; color: #9a3f30; } .ns-tag.good { background: #e3f1e6; color: #2f6f3e; }
.ns-phone { position: relative; height: 70cqw; border-radius: 5cqw; border: 1.2cqw solid #2b2623; overflow: hidden; box-shadow: 0 4cqw 7cqw -3cqw rgba(30,20,10,.5); }
/* the noisy feed */
.ns-phone.feed { background: #f2f2f4; }
.ns-feedtrack { padding: 1.6cqw; display: grid; gap: 1.6cqw; animation: nsScroll 6s linear infinite; }
@keyframes nsScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ns-post { display: flex; gap: 1.6cqw; align-items: center; padding: 2cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.08); }
.ns-post span { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 1.6cqw; font-size: 4cqw; background: #eee; }
.ns-post p { margin: 0; display: grid; font: 2.3cqw/1.25 var(--sans, system-ui); color: #222; min-width: 0; }
.ns-post p small { color: #888; font-size: 1.9cqw; }
.ns-ad span { background: #ffe58a; } .ns-rant span { background: #ffc9c0; } .ns-meme span { background: #e2d6ff; } .ns-trend span { background: #ffd8a8; }
.ns-ad { outline: .4cqw solid #ffd34d; } .ns-rant p b { color: #c0392b; }
.ns-mem { background: #fffaf0; animation: nsFade var(--T) ease infinite; } .ns-mem span { background: #f6e7c8; }
@keyframes nsFade { 0%, 18% { opacity: 1; } 28%, 100% { opacity: .25; filter: grayscale(1); } }
.ns-badge { position: absolute; padding: .8cqw 1.8cqw; border-radius: 99px; background: #e0245e; color: #fff; font: 800 2.1cqw/1 var(--sans, system-ui); box-shadow: 0 1cqw 2cqw -1cqw rgba(0,0,0,.4); animation: nsPing 1.6s ease-in-out infinite; }
.ns-badge.b1 { right: 2cqw; top: 6cqw; } .ns-badge.b2 { left: 2cqw; top: 30cqw; animation-delay: .5s; background: #1d9bf0; } .ns-badge.b3 { right: 3cqw; top: 50cqw; animation-delay: 1s; background: #7b5cff; }
@keyframes nsPing { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.12); } }
.ns-phone.feed .ns-feedtrack { animation: nsScroll 6s linear infinite, nsBlur var(--T) ease infinite; }
@keyframes nsBlur { 0%, 22% { filter: none; } 30%, 100% { filter: blur(.35cqw) saturate(.7); } }
.ns-lost { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg); padding: 1.6cqw 3cqw; border-radius: 1.6cqw; background: #9a3f30; color: #fff; font: 800 3cqw/1 var(--sans, system-ui); white-space: nowrap; opacity: 0;
  box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,.5); animation: nsLost var(--T) ease infinite; }
@keyframes nsLost { 0%, 22% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1.4); } 28%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }
/* rescued: the memory lifts out of the feed and comes across */
.ns-flycard { position: absolute; left: 6cqw; top: 40cqw; z-index: 5; width: 36cqw; display: flex; gap: 1.6cqw; align-items: center; padding: 2cqw; border-radius: 2cqw; background: #fffaf0; border: .5cqw solid #4f9a5c;
  box-shadow: 0 0 0 1.2cqw rgba(240,185,85,.35), 0 3cqw 6cqw -2cqw rgba(0,0,0,.5); opacity: 0; animation: nsRescue var(--T) cubic-bezier(.45,.05,.3,1) infinite; }
.ns-flycard span { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 1.6cqw; background: #f6e7c8; font-size: 4cqw; }
.ns-flycard p { margin: 0; display: grid; font: 2.4cqw/1.25 var(--sans, system-ui); color: #222; } .ns-flycard small { color: #888; font-size: 2cqw; }
@keyframes nsRescue {
  0%, 30% { opacity: 0; transform: translate(0, 0) scale(.85); }
  34% { opacity: 1; transform: translate(0, -4cqw) scale(1.05); }
  46% { opacity: 1; transform: translate(53cqw, -13cqw) scale(.92); }
  50%, 100% { opacity: 0; transform: translate(53cqw, -13cqw) scale(.92); } }
.ns-arrow { position: absolute; left: 45.5cqw; top: 40cqw; font-size: 6cqw; color: #2f6f3e; opacity: 0; animation: nsArrow var(--T) ease infinite; }
@keyframes nsArrow { 0%, 30% { opacity: 0; transform: translateX(-2cqw); } 36%, 46% { opacity: 1; transform: translateX(1cqw); } 52%, 100% { opacity: 0; } }
/* the calm page */
.ns-phone.calm { background: #fbf8f3; }
.ns-head { padding: 3.4cqw 3cqw 2cqw; background: linear-gradient(160deg, #8c6a3c, #b48a62); color: #fff; display: grid; }
.ns-head b { font: 3.8cqw/1.1 var(--serif); } .ns-head span { font-size: 2cqw; opacity: .9; } .ns-head em { margin-top: 1.4cqw; font: italic 2.2cqw var(--serif); opacity: .95; }
.ns-wall { padding: 2cqw; display: grid; gap: 1.6cqw; }
.ns-m { display: flex; gap: 1.4cqw; padding: 1.6cqw; border-radius: 2cqw; background: #fff; border: .35cqw solid #ece2d2; opacity: 0; animation: nsIn var(--T) ease infinite; }
.ns-m i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; color: #fff; font: normal 800 2.3cqw/1 var(--sans, system-ui); }
.ns-m p { margin: 0; display: grid; font: 2.2cqw/1.3 var(--sans, system-ui); color: var(--ink); } .ns-m p b { font-size: 1.8cqw; color: var(--ink-soft); } .ns-m p em { font-style: normal; font-size: 1.8cqw; color: #8a5a12; }
.ns-m.m0 { animation-name: nsIn0; } .ns-m.m1 { animation-name: nsIn1; } .ns-m.m2 { animation-name: nsIn2; } .ns-m.m3 { animation-name: nsIn3; }
@keyframes nsIn0 { 0%, 46% { opacity: 0; transform: translateY(-2cqw); border-color: #4f9a5c; } 50% { opacity: 1; transform: none; border-color: #4f9a5c; } 70%, 100% { opacity: 1; border-color: #ece2d2; } }
@keyframes nsIn1 { 0%, 54% { opacity: 0; transform: translateX(4cqw); border-color: #4f9a5c; } 58% { opacity: 1; transform: none; border-color: #4f9a5c; } 76%, 100% { opacity: 1; border-color: #ece2d2; } }
@keyframes nsIn2 { 0%, 61% { opacity: 0; transform: translateX(4cqw); border-color: #4f9a5c; } 65% { opacity: 1; transform: none; border-color: #4f9a5c; } 82%, 100% { opacity: 1; border-color: #ece2d2; } }
@keyframes nsIn3 { 0%, 68% { opacity: 0; transform: translateX(4cqw); border-color: #4f9a5c; } 72% { opacity: 1; transform: none; border-color: #4f9a5c; } 88%, 100% { opacity: 1; border-color: #ece2d2; } }
.ns-kept { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); padding: 1.4cqw 3cqw; border-radius: 99px; background: #2f6f3e; color: #fff; font: 800 2.6cqw/1 var(--sans, system-ui); white-space: nowrap; opacity: 0; animation: nsKept var(--T) ease infinite; }
@keyframes nsKept { 0%, 80% { opacity: 0; transform: translate(-50%, 2cqw); } 85%, 100% { opacity: 1; transform: translate(-50%, 0); } }
.ns-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font: 700 13.5px/1.3 var(--sans, system-ui); text-align: center; }
.ns-caps .bad { color: #9a3f30; } .ns-caps .good { color: #2f6f3e; }
@media (prefers-reduced-motion: reduce) {
  .an-ns * { animation: none !important; } .ns-m, .ns-kept, .ns-lost { opacity: 1 !important; } .ns-mem { opacity: .3; } .ns-flycard, .ns-arrow { display: none; }
}
.ns-kept { left: auto; right: 2.4cqw; bottom: auto; top: 3cqw; transform: none; padding: 1.2cqw 2.2cqw; font-size: 2.2cqw; animation-name: nsKept2; }
@keyframes nsKept2 { 0%, 80% { opacity: 0; transform: scale(.7); } 85%, 100% { opacity: 1; transform: none; } }
/* the ✕ stays in reach when a sheet scrolls (it used to scroll away off the top) */
.ac-card > .ac-x { position: sticky; top: 0; float: right; z-index: 5; margin: -8px -6px 0 8px; box-shadow: 0 4px 12px -6px rgba(0,0,0,.35); }
/* gathering screen: new memories pop up, reactions float up the screen */
.g-new { position: absolute; z-index: 30; left: 50%; top: 14%; transform: translateX(-50%); width: min(720px, 86vw); padding: 18px 24px; border-radius: 20px; background: rgba(255,253,249,.96); color: #2c241e;
  box-shadow: 0 0 0 4px rgba(79,154,92,.55), 0 20px 50px -20px rgba(0,0,0,.6); animation: gNew .6s cubic-bezier(.2,.8,.2,1.2) both; }
.g-new small { display: block; font: 800 15px var(--sans, system-ui); color: #2f6f3e; letter-spacing: .02em; }
.g-new p { margin: 6px 0 0; font: italic 600 clamp(20px, 2.6vw, 34px)/1.3 var(--serif); }
.g-new.out { opacity: 0; transform: translate(-50%, -12px); transition: opacity .7s ease, transform .7s ease; }
@keyframes gNew { from { opacity: 0; transform: translate(-50%, -24px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
.g-react { position: absolute; z-index: 29; bottom: 70px; font-size: clamp(34px, 4vw, 56px); pointer-events: none; animation: gRise 4s ease-out forwards; }
@keyframes gRise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: 1; transform: translate(0, -40px) scale(1.1); } 100% { opacity: 0; transform: translate(var(--sway, 0), -62vh) scale(1); } }
/* the movie-file sheet */
.mf-view { margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000; }
.mf-view canvas, .mf-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; }
.mf-bar { height: 8px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; } .mf-bar i { display: block; height: 100%; width: 0; background: var(--accent-deep); }
.mf-time { margin: 6px 0 0; font: 700 14px var(--sans, system-ui); color: var(--ink-soft); }
.mf-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .mf-acts .btn { flex: 1; justify-content: center; }
.mv-save { }
.dash-tile.dash-wide { grid-column: 1 / -1; display: grid; justify-items: center; gap: 2px; } .dash-tile.dash-wide small { font: 600 12.5px var(--sans, system-ui); opacity: .8; }
/* while the movie or gathering screen is up, the page's floating buttons step out of the way */
body:has(.movie) .lo-menu-btn, body:has(.movie) .live-qr, body:has(.movie) .va-back, body:has(.movie) .live-view-wrap, body:has(.movie) .live-ro, body:has(.movie) .scroll-cue { display: none !important; }
/* the gathering screen fills the screen (phones can't go true full screen from a web page) */
.movie.gathering { position: fixed; inset: 0; width: 100vw; height: 100dvh; }
.tr-gather { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 14px; border: 1px solid #cfe3d3; border-radius: 14px; background: #f0f7f1; color: var(--ink); text-align: left; font: inherit; cursor: pointer; box-sizing: border-box; }
.tr-gather > span:first-child { font-size: 22px; } .tr-gather > span:nth-child(2) { flex: 1; display: grid; } .tr-gather b { font-size: 15px; } .tr-gather small { color: var(--ink-soft); font-size: 13px; }
.tr-gather > i { font-style: normal; font-size: 20px; color: var(--ink-soft); }

/* ---------- Hero story 5: make it a movie — any time ---------- */
.an-mv { margin: 0; container-type: inline-size; width: 100%; --T: 12s; }
.mv-scene2 { background: radial-gradient(120% 90% at 50% 0%, #fbf6ee, #efe3d1); }
.mvx-page { position: absolute; left: 3cqw; top: 6cqw; width: 34cqw; height: 74cqw; border-radius: 4.5cqw; border: 1.1cqw solid #2b2623; background: #fbf8f3; overflow: hidden; display: grid; align-content: start; gap: 1.8cqw; padding-bottom: 2cqw; box-shadow: 0 4cqw 7cqw -3cqw rgba(30,20,10,.5); }
.mvx-head { padding: 4cqw 2.6cqw 2.4cqw; background: linear-gradient(160deg, #8c6a3c, #b48a62); color: #fff; display: grid; }
.mvx-head b { font: 3.4cqw/1.1 var(--serif); } .mvx-head span { font-size: 1.9cqw; opacity: .9; }
.mvx-row { display: flex; align-items: center; gap: 1.4cqw; margin: 0 2.2cqw; font: 2cqw/1.25 var(--sans, system-ui); color: var(--ink); animation: mvxGlow var(--T) ease infinite; }
.mvx-row i { flex: none; width: 7cqw; height: 5cqw; border-radius: 1cqw; background: linear-gradient(#cfd3c8 60%, #8fa0a6 60%); } .mvx-row i.b { background: linear-gradient(#e2d2b4 55%, #a89270 55%); }
.mvx-row.r2 { animation-delay: .5s; }
.mvx-mem { margin: 0 2.2cqw; padding: 1.4cqw 1.6cqw; border-radius: 1.6cqw; background: #fff; border: .35cqw solid #ece2d2; font: 1.9cqw/1.3 var(--sans, system-ui); color: var(--ink); }
.mvx-mem b { display: block; font-size: 1.6cqw; color: var(--ink-soft); }
.mvx-mem.new { opacity: 0; animation: mvxNew var(--T) ease infinite; }
@keyframes mvxGlow { 0%, 4%, 22%, 100% { background: transparent; } 10% { background: #f6e7c8; } }
@keyframes mvxNew { 0%, 46% { opacity: 0; transform: translateY(-2cqw); border-color: #4f9a5c; } 50% { opacity: 1; transform: none; border-color: #4f9a5c; } 72% { border-color: #4f9a5c; } 90%, 100% { opacity: 1; border-color: #ece2d2; } }
/* film strip */
.mvx-strip { position: absolute; left: 42cqw; top: 6cqw; width: 16cqw; height: 74cqw; border-radius: 1.4cqw; background: #2b2623; overflow: hidden;
  background-image: radial-gradient(circle, #efe3d1 .7cqw, transparent .8cqw), radial-gradient(circle, #efe3d1 .7cqw, transparent .8cqw);
  background-size: 3.6cqw 4cqw; background-position: .2cqw 0, 12.6cqw 0; background-repeat: repeat-y; }
.mvx-track { position: absolute; left: 2.6cqw; right: 2.6cqw; top: 0; display: grid; gap: 2cqw; padding-top: 2cqw; animation: mvxRoll var(--T) linear infinite; }
.mvx-track .f { display: grid; place-items: center; height: 11cqw; border-radius: .8cqw; background: #8fa0a6; color: #fff; font: 600 1.9cqw/1.1 var(--serif); text-align: center; overflow: hidden; }
.f.t { background: linear-gradient(160deg, #8c6a3c, #b48a62); } .f.p1 { background: linear-gradient(#cfd3c8 60%, #8fa0a6 60%); } .f.p2 { background: linear-gradient(#e2d2b4 55%, #a89270 55%); }
.f.p3 { background: linear-gradient(#f3d9a8, #b48a62); } .f.q, .f.q2 { background: #fffaf0; color: #2b2623; font-size: 4cqw; } .f.end { background: #2b2623; border: .3cqw solid #b48a62; color: #E9CF96; }
.f.q2 { animation: mvxIn var(--T) ease infinite; }
@keyframes mvxRoll { 0% { transform: translateY(-34cqw); } 40% { transform: translateY(2cqw); } 55% { transform: translateY(2cqw); } 100% { transform: translateY(-10cqw); } }
@keyframes mvxIn { 0%, 52% { opacity: 0; transform: translateX(-30cqw) scale(.6); } 62% { opacity: 1; transform: none; box-shadow: 0 0 0 .6cqw #4f9a5c; } 80%, 100% { opacity: 1; box-shadow: none; } }
/* the file */
.mvx-file { position: absolute; right: 3cqw; top: 22cqw; width: 34cqw; display: grid; justify-items: center; gap: 2.4cqw; opacity: 0; animation: mvxFile var(--T) ease infinite; }
.mvx-doc { position: relative; width: 26cqw; padding: 3cqw 2cqw 2.6cqw; border-radius: 2cqw; background: #fff; border: 1px solid #e6d9c4; box-shadow: 0 3cqw 6cqw -3cqw rgba(0,0,0,.45); display: grid; justify-items: center; gap: 1cqw; text-align: center; }
.mvx-doc b { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: #2b2623; color: #fff; font-size: 4.4cqw; }
.mvx-doc span { font: 700 2.1cqw/1.2 var(--sans, system-ui); color: var(--ink); word-break: break-all; }
.mvx-doc small { font: 700 1.9cqw/1.2 var(--sans, system-ui); color: var(--ink-soft); }
.mvx-doc .v1 { animation: mvxV1 var(--T) steps(1) infinite; } .mvx-doc .v2 { position: absolute; bottom: 2.6cqw; color: #2f6f3e; opacity: 0; animation: mvxV2 var(--T) ease infinite; }
.mvx-dl { padding: 1.6cqw 3.4cqw; border-radius: 99px; background: #8c6a3c; color: #fff; font: 800 2.6cqw/1 var(--sans, system-ui); animation: mvxPulse var(--T) ease infinite; }
@keyframes mvxFile { 0%, 30% { opacity: 0; transform: translateY(3cqw) scale(.9); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes mvxV1 { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes mvxV2 { 0%, 70% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes mvxPulse { 0%, 38%, 50%, 70%, 82%, 100% { box-shadow: 0 0 0 0 rgba(140,106,60,0); } 44%, 76% { box-shadow: 0 0 0 1.4cqw rgba(140,106,60,.25); } }
@media (prefers-reduced-motion: reduce) { .an-mv * { animation: none !important; } .mvx-file, .mvx-mem.new, .f.q2 { opacity: 1 !important; } .mvx-doc .v1 { opacity: 0; } .mvx-doc .v2 { opacity: 1; } }
.mvx-doc span { font-size: 1.75cqw; word-break: normal; overflow-wrap: anywhere; } .mvx-doc { width: 30cqw; }
/* new-memory pop-up sits above the ticker, clear of the QR card */
.g-new { top: auto; bottom: 96px; }
@keyframes gNew { from { opacity: 0; transform: translate(-50%, 24px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }

/* Numbers in the serif face read as letters (old-style 1 = I, 0 = O): use lining figures */
.dash-stats b, .tr-stats b, .pay-price, .mf-time { font-variant-numeric: lining-nums tabular-nums; }
/* Automatic publishing: a quiet line while changes go up */
.bc2-dirty.auto { justify-content: flex-start; font-size: 14px; opacity: .9; }
.bc2-dirty.auto .spin { display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* Simple-mode header, tidied: back and "More options" on one line, the step and its bar full width below */
.bx-top { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "back . more" "prog prog prog"; row-gap: 10px; align-items: center; padding: calc(env(safe-area-inset-top,0px) + 10px) 16px 12px; }
.bx-back { grid-area: back; height: 42px; padding: 0 16px; font-size: 16px; }
.bx-more { grid-area: more; height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #d9cdbb; background: #fff; color: #5a4a3a; text-decoration: none; font: 700 15px var(--sans, system-ui); }
.bx-prog { grid-area: prog; display: flex; align-items: center; gap: 12px; text-align: left; }
.bx-prog span { flex: none; font-size: 14px; }
.bx-prog i { flex: 1; margin: 0; max-width: none; }
.bx-foot:empty { display: none; }
.bx-main { padding-bottom: 96px; }

/* Collection tiles: tap to edit (replace, move, main photo, remove) */
.coll-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.coll-edit { position: absolute; left: 4px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,253,249,.92); color: #3a3532; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.ph-sheet .ac-card { display: flex; flex-direction: column; gap: 10px; }
.ph-sheet h2 { margin-bottom: 0; }
.ph-sheet .ac-sub { margin: 0; }
.ph-big { border-radius: 14px; overflow: hidden; background: #efe7dc; display: grid; place-items: center; max-height: 42vh; }
.ph-big img { max-width: 100%; max-height: 42vh; object-fit: contain; display: block; }
.ph-move { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-move .btn:disabled { opacity: .4; }
.ph-sheet .btn { width: 100%; justify-content: center; text-align: center; }
.ph-sheet .ph-rm { color: #A2553A; }
.ph-sheet label.btn { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }

/* Photos in a memory: small attached thumbnails (like a comment), tap to see them full screen */
.mr-pics, .mr-pics.n2, .mr-pics.n3, .mr-pics.n4 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; border-radius: 0; overflow: visible; grid-template-columns: none; }
.mr-pic { flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #efe7dc; cursor: zoom-in; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mr-pics.n1 .mr-pic { width: 132px; height: 132px; }
.mr-pic img, .mr-pics img, .mr-pics.n1 img, .mr-pics.n3 img:first-child { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; display: block; grid-column: auto; }
.mr-pic:focus-visible { outline: 3px solid #b08d57; outline-offset: 2px; }
.phv-view { position: fixed; inset: 0; z-index: 3000; background: rgba(12,9,7,.97); display: grid; place-items: center; padding: calc(env(safe-area-inset-top,0px) + 64px) 12px calc(env(safe-area-inset-bottom,0px) + 56px); animation: noteIn .2s ease both; touch-action: pan-y; }
.phv-view.out { opacity: 0; transition: opacity .2s; }
.phv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); user-select: none; -webkit-user-drag: none; }
.phv-x { position: absolute; top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: #2c241e; font: 700 20px var(--sans, system-ui); box-shadow: 0 2px 10px rgba(0,0,0,.35); cursor: pointer; }
.phv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.phv-nav.prev { left: 10px; } .phv-nav.next { right: 10px; }
.phv-count { position: absolute; bottom: calc(env(safe-area-inset-bottom,0px) + 18px); left: 0; right: 0; text-align: center; color: #e8dccb; font: 600 14px var(--sans, system-ui); }
.phv-stage { width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
.phv-stage video.phv-img { width: 100%; background: #000; }

/* Short videos (an animal's page) */
.vid-sec { margin: 22px 0 6px; padding: 16px; border-radius: 18px; background: #fffaf1; border: 1px solid #eadfcb; }
.vid-sec h3 { margin: 0 0 4px; font: 600 22px var(--serif, Georgia, serif); }
.vid-sec .hint { margin: 0 0 12px; }
.vid-pick { display: flex; align-items: center; justify-content: center; min-height: 52px; border-style: dashed; }
.vid-pick[hidden] { display: none; }
.vid-status { margin: 10px 0 8px; font-size: 14px; color: #6b5a48; }
.vid-status:empty { display: none; }
.vid-tile video, .pp-vid video { width: 100%; height: 100%; object-fit: cover; display: block; background: #2b231e; pointer-events: none; }
.vid-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
.vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,253,249,.92); color: #2c241e; font-size: 15px; padding-left: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.vid-dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 700 12px var(--sans, system-ui); font-variant-numeric: tabular-nums; }
.pp-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 10px; }
.pp-vid { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #2b231e; }

/* Choosing 10 seconds of a longer video */
.trim-sheet .ac-card { display: flex; flex-direction: column; gap: 10px; }
.trim-sheet h2, .trim-sheet .ac-sub { margin: 0; }
.tr-view { border-radius: 14px; overflow: hidden; background: #000; display: grid; place-items: center; max-height: 40vh; }
.tr-vid { width: 100%; max-height: 40vh; object-fit: contain; display: block; }
.tr-track { position: relative; height: 56px; border-radius: 10px; overflow: hidden; background: #2b231e; touch-action: none; cursor: grab; margin-top: 4px; }
.tr-strip { position: absolute; inset: 0; display: flex; }
.tr-strip img { flex: 1; min-width: 0; height: 100%; object-fit: cover; opacity: .55; }
.tr-win { position: absolute; top: 0; bottom: 0; border: 3px solid #E9CF96; border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.45); background: rgba(233,207,150,.12); }
.tr-win span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 22px; border-radius: 3px; background: #E9CF96; }
.tr-range { width: 100%; accent-color: #b08d57; }
.tr-time { margin: 0; text-align: center; font: 700 15px var(--sans, system-ui); color: #3a2f28; font-variant-numeric: tabular-nums; }
.trim-sheet .btn { width: 100%; justify-content: center; }

/* The whole collection first, main photo included */
.coll-top.on { margin: 4px 0 18px; }
.coll-main { outline: 3px solid #b08d57; outline-offset: -3px; }
.coll-star { position: absolute; left: 6px; top: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(255,253,249,.94); color: #6b4f2a; font: 800 12px var(--sans, system-ui); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.cur-main { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; padding: 10px; border-radius: 16px; background: #fffaf1; border: 1px solid #eadfcb; }
.cur-main img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex: none; }
.cur-main b { display: block; font: 800 16px var(--sans, system-ui); }
.cur-main small { color: #6b5a48; font-size: 13.5px; }

/* Sheets never slide up under the phone's status bar or the browser's title bar: they stop short of the top,
   so the ✕ is always clear to tap (and the page shows above, which also makes it obvious it's a sheet). */
.ac-card { max-height: calc(100vh - env(safe-area-inset-top, 0px) - 84px); }
@supports (height: 100svh) { .ac-card { max-height: calc(100svh - env(safe-area-inset-top, 0px) - 84px); } }
.ms-card { max-height: calc(100% - env(safe-area-inset-top, 0px) - 84px); }
.ac-card > .ac-x { top: 6px; }
@media (max-width: 639px) {
  .mem-sheet .ms-card { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
  .mem-sheet .ms-x { top: calc(env(safe-area-inset-top, 0px) + 52px); }
}
.phv-x { top: calc(env(safe-area-inset-top, 0px) + 52px); }
.phv-view { padding-top: calc(env(safe-area-inset-top, 0px) + 108px); }

/* Close family */
.pe-c.fam, .mr-tag.fam { background: #e6f1e8; color: #2f6a3f; }
.pe-closeadd { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: 600 14px var(--sans, system-ui); color: #3a2f28; margin-top: 2px; }
.pe-closeadd input { width: 20px; height: 20px; accent-color: #2f6a3f; }
.pe-fam { color: #2f6a3f !important; font-weight: 700; }
.ax-famlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.ax-fampill { padding: 6px 12px; border-radius: 999px; background: #e6f1e8; color: #2f6a3f; font: 700 14px var(--sans, system-ui); }
.ax-fampill small { font-weight: 500; color: #6b5a48; }
.ax-famedit { width: 100%; justify-content: center; margin-bottom: 14px; }

/* Report a memory / the page */
.mr-report { margin-top: 6px; border: 0; background: none; padding: 4px 0; font: 600 13px var(--sans, system-ui); color: #8a7663; cursor: pointer; }
.mr-report:hover { color: #A2553A; text-decoration: underline; }
.pp-legal { display: block; margin-top: 8px; font-size: 13px; }
.pp-legal a, .pp-legal .linklike { color: inherit; opacity: .85; font-size: 13px; }
.rp-reasons { display: grid; gap: 6px; margin: 4px 0 12px; }
.rp-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #e2d8cc; background: #fff; font: 600 15px var(--sans, system-ui); cursor: pointer; }
.rp-r:has(input:checked) { border-color: #b08d57; background: #fffaf1; }
.rp-r input { width: 18px; height: 18px; accent-color: #8C6A3C; }
.rp-lab { display: block; font: 700 14px var(--sans, system-ui); margin-bottom: 10px; }
.rp-lab small { font-weight: 500; color: #8a7663; }
.rp-lab textarea { margin-top: 6px; width: 100%; box-sizing: border-box; }
.rp-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 480px) { .rp-who { grid-template-columns: 1fr; } }

/* Delete a draft from My tributes */
.tr-card { position: relative; }
.tr-del { position: absolute; top: 12px; right: 12px; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(60,45,30,.12); background: #fff; font: 700 14px var(--sans, system-ui); color: #6b5a48; cursor: pointer; }
.tr-del.sure { background: #A2553A; color: #fff; border-color: #A2553A; }
.tr-card:has(.tr-del) .tr-id { padding-right: 44px; }
.tr-legal { text-align: center; margin: 28px 0 10px; font-size: 13px; color: #8a7663; } .tr-legal a { color: inherit; }
.ms-privacy { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.45; color: #8a7663; } .ms-privacy a { color: inherit; text-decoration: underline; }

/* Preview stamp: until the page is live, the preview says so the whole time */
.pp-stamp { position: absolute; z-index: 41; left: 12px; top: calc(env(safe-area-inset-top,0px) + 14px); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 150px); padding: 7px 12px 7px 8px; border-radius: 999px; background: #8C3B2A; color: #fff; font: 600 12.5px/1.25 var(--sans, system-ui); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.pp-stamp.on { opacity: 1; transform: none; }
.pp-stamp b { padding: 3px 8px; border-radius: 999px; background: #fff; color: #8C3B2A; font: 900 11px var(--sans, system-ui); letter-spacing: .14em; }
.pp-stamp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-wm { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220'%3E%3Ctext x='20' y='130' transform='rotate(-24 160 110)' font-family='Helvetica,Arial,sans-serif' font-size='44' font-weight='800' letter-spacing='8' fill='%238C3B2A'%3EPREVIEW%3C/text%3E%3C/svg%3E");
  background-repeat: repeat; }
html.pv-doc .pp-visitor .pp-stamp, html.pv-doc .pp-visitor .pp-wm { position: fixed; }

/* Held for the owners' approval */
.mr-tag.held { background: #fbeedd; color: #8a5a1c; }
.mr-heldnote { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: #fbeedd; color: #6b4a1c; font: 600 13px/1.4 var(--sans, system-ui); }
.mr-approve { margin: 4px 10px 0 0; padding: 8px 14px; border-radius: 999px; border: 0; background: #2f6a3f; color: #fff; font: 700 14px var(--sans, system-ui); cursor: pointer; }
.mr-mem:has(.mr-tag.held) { outline: 2px dashed #e0b77a; outline-offset: 2px; }
.dash-held { display: block; width: 100%; margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; border: 0; background: #fbeedd; color: #6b4a1c; font: 500 14.5px/1.4 var(--sans, system-ui); text-align: left; cursor: pointer; }
.gl-err.ok { color: #2f6a3f; font-weight: 700; }

/* ---------- "Put it online" — the offer, and the step-by-step guide ---------- */
.go-offer { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 20px; background: rgba(30,24,20,.5); animation: fadeIn .25s ease both; }
.go-offer.out { opacity: 0; transition: opacity .25s; }
.go-card { width: 100%; max-width: 440px; padding: 28px 24px 22px; border-radius: 26px; background: #fffdf9; text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); animation: ms-up .4s cubic-bezier(.2,.8,.2,1) both; }
.go-card h2 { margin: 14px 0 8px; font: 500 30px/1.15 var(--serif, Georgia, serif); }
.go-card p { margin: 0 0 18px; font: 18px/1.5 var(--sans, system-ui); color: #4a3d33; }
.go-card .btn { width: 100%; justify-content: center; margin-top: 10px; font-size: 19px; min-height: 58px; }
.go-small { margin-top: 12px !important; font-size: 14px !important; color: #8a7663 !important; }
.go-art { position: relative; width: 112px; height: 112px; margin: 0 auto; }
.go-art img, .go-art span { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #b08d57; color: #fff; font: 700 44px var(--sans, system-ui); }
.go-ring { position: absolute; inset: -8px; border-radius: 50%; border: 3px solid #b08d57; animation: go-pulse 2s ease-out infinite; }
.go-spark { position: absolute; right: -6px; top: -6px; font-size: 30px; animation: go-twinkle 1.6s ease-in-out infinite; }
@keyframes go-pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes go-twinkle { 50% { transform: scale(1.25) rotate(15deg); } }

.gw { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; background: linear-gradient(180deg, #fbf7f1 0%, #f3ebdf 100%); color: #2c241e; font-family: var(--sans, system-ui); overflow: auto; -webkit-overflow-scrolling: touch; }
html.gw-on, html.gw-on body { overflow: hidden; }
.gw-top { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top,0px) + 70px) 16px 8px; background: rgba(251,247,241,.96); }
.gw-back, .gw-x { height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #d9cdbb; background: #fff; font: 700 17px var(--sans, system-ui); color: #2c241e; cursor: pointer; }
.gw-x { width: 48px; padding: 0; font-size: 18px; }
.gw-count { text-align: center; font: 800 16px var(--sans, system-ui); color: #6b5a48; }
.gw-dots { display: flex; justify-content: center; gap: 8px; padding: 4px 0 6px; }
.gw-dots i { width: 34px; height: 8px; border-radius: 999px; background: #e3d8c8; transition: background .3s; }
.gw-dots i.on { background: #b08d57; } .gw-dots i.done { background: #2f6a3f; }
.gw-body { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 22px calc(env(safe-area-inset-bottom,0px) + 30px); box-sizing: border-box; }
.gw-step { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.gw-step.in { opacity: 1; transform: none; }
.gw-step h1 { margin: 6px 0 10px; font: 500 36px/1.12 var(--serif, Georgia, serif); text-align: center; }
.gw-text { margin: 0 0 14px; font: 20px/1.5 var(--sans, system-ui); text-align: center; color: #3a2f28; }
.gw-why { margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #eadfcb; font: 17px/1.5 var(--sans, system-ui); color: #4a3d33; }
.gw-why b { color: #8C6A3C; }
.gw-read { display: block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid #d9cdbb; background: #fffaf1; font: 700 15px var(--sans, system-ui); color: #6b4f2a; cursor: pointer; }
.gw-acts { display: grid; gap: 12px; }
.btn-xl { min-height: 64px; font-size: 21px !important; width: 100%; justify-content: center; border-radius: 999px; }
.gw-acts .btn-lg { width: 100%; justify-content: center; min-height: 56px; font-size: 18px; }
.gw-input { width: 100%; box-sizing: border-box; min-height: 60px; font-size: 21px !important; text-align: center; }
.gw-slug { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 14px; border-radius: 18px; background: #fff; border: 1.5px solid #d9cdbb; }
.gw-slug .gw-input { flex: 1; min-width: 0; border: 0; min-height: 52px; text-align: left; padding: 0 4px; background: none; }
.gw-slug span { flex: none; font: 600 15px var(--sans, system-ui); color: #6b5a48; }
.gw-err { min-height: 1.4em; margin: 0; font: 600 17px/1.45 var(--sans, system-ui); color: #a3402f; text-align: center; }
.gw-err.ok { color: #2f6a3f; }
.gw-sug { margin: 6px 4px 0; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #b08d57; background: #fffaf1; font: 700 16px var(--sans, system-ui); color: #6b4f2a; cursor: pointer; }
.gw-prog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gw-prog li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; font: 600 18px var(--sans, system-ui); color: #8a7663; }
.gw-prog li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid #e3d8c8; }
.gw-prog li.on { color: #2c241e; } .gw-prog li.on::before { border-color: #b08d57; border-top-color: transparent; animation: gw-spin .8s linear infinite; }
.gw-prog li.done { color: #2f6a3f; } .gw-prog li.done::before { content: "✓"; border: 0; background: #2f6a3f; color: #fff; display: grid; place-items: center; font: 900 13px var(--sans, system-ui); }
@keyframes gw-spin { to { transform: rotate(360deg); } }
.gw-pct { margin: 0; text-align: center; font: 600 16px var(--sans, system-ui); color: #6b5a48; min-height: 1.3em; }

/* the animations: what's happening, in pictures */
.gw-art { position: relative; height: 210px; display: grid; place-items: center; margin: 4px 0 6px; }
.ga-page { position: relative; width: 170px; height: 196px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -18px rgba(60,40,20,.5); overflow: hidden; animation: ga-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.ga-hero { height: 84px; background: #3a2f28; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ga-hero img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.ga-hero b { font: 500 14px var(--serif, Georgia, serif); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-card { position: absolute; left: 14px; right: 14px; height: 24px; border-radius: 8px; background: #f3ebdf; opacity: 0; animation: ga-drop .5s ease forwards; }
.ga-card.c1 { top: 98px; animation-delay: .5s; } .ga-card.c2 { top: 130px; animation-delay: .8s; } .ga-card.c3 { top: 162px; animation-delay: 1.1s; width: 60%; }
@keyframes ga-rise { from { transform: translateY(30px) scale(.9); opacity: 0; } }
@keyframes ga-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.ga-mail { position: relative; width: 220px; height: 150px; }
.ga-env { position: absolute; left: 50%; top: 50%; font-size: 84px; transform: translate(-50%, -50%); animation: ga-float 2.4s ease-in-out infinite; }
.ga-mail i { position: absolute; top: 50%; height: 4px; border-radius: 2px; background: #d9c7a8; animation: ga-line 2.4s ease-in-out infinite; }
.ga-mail i:nth-of-type(1) { left: 0; width: 46px; margin-top: -18px; } .ga-mail i:nth-of-type(2) { left: 6px; width: 30px; animation-delay: .3s; } .ga-mail i:nth-of-type(3) { left: 0; width: 40px; margin-top: 18px; animation-delay: .6s; }
@keyframes ga-float { 50% { transform: translate(-46%, -56%) rotate(-4deg); } }
@keyframes ga-line { 0% { opacity: 0; transform: translateX(20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateX(-20px); } }
.ga-url { display: flex; align-items: center; max-width: 100%; padding: 14px 18px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -16px rgba(60,40,20,.5); font: 600 18px var(--sans, system-ui); animation: ga-rise .6s ease both; overflow: hidden; }
.ga-lock { margin-right: 8px; } .ga-typed { color: #2c241e; font-weight: 800; border-right: 2px solid #b08d57; padding-right: 2px; animation: ga-caret 1s step-end infinite; } .ga-dom { color: #8a7663; white-space: nowrap; }
@keyframes ga-caret { 50% { border-color: transparent; } }
.ga-cloud { position: relative; width: 240px; height: 200px; }
.ga-cl { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 96px; }
.ga-up { position: absolute; bottom: 4px; width: 48px; height: 48px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 26px; font-style: normal; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); overflow: hidden; }
.ga-up img { width: 100%; height: 100%; object-fit: cover; }
.ga-up.u0 { left: 30px; } .ga-up.u1 { left: 96px; } .ga-up.u2 { left: 162px; }
.gw-online.going .ga-up { animation: ga-upload 1.6s ease-in infinite; }
.gw-online.going .ga-up.u1 { animation-delay: .4s; } .gw-online.going .ga-up.u2 { animation-delay: .8s; }
@keyframes ga-upload { 0% { transform: none; opacity: 1; } 80% { transform: translateY(-120px) scale(.5); opacity: 0; } 100% { opacity: 0; } }
.ga-lockbig { position: absolute; right: 8px; top: 66px; font-size: 34px; animation: go-twinkle 2s ease-in-out infinite; }
.ga-share { position: relative; width: 260px; height: 190px; }
.ga-phone { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 74px; }
.ga-fam { position: absolute; right: 6px; font-size: 40px; font-style: normal; opacity: 0; animation: ga-pop .5s ease forwards; }
.ga-fam.f0 { top: 8px; animation-delay: 1s; } .ga-fam.f1 { top: 70px; right: 40px; animation-delay: 1.3s; } .ga-fam.f2 { top: 132px; animation-delay: 1.6s; }
.ga-fly { position: absolute; left: 70px; top: 80px; font-size: 32px; font-style: normal; animation: ga-send 2.2s ease-in-out infinite; }
@keyframes ga-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ga-send { 0% { transform: none; opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(130px, -50px) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gw *, .go-offer * { animation: none !important; } .ga-card, .ga-fam { opacity: 1; } }
.bc-guide { display: block; margin: 10px auto 2px; color: #fff; opacity: .92; font-size: 15px; text-decoration: underline; }

/* The page is never wider than the screen: nothing can push it sideways (sliders and carousels scroll inside themselves). */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { overscroll-behavior-x: none; }
.site-header, .site-footer { max-width: 100%; }

/* Tablets: keep the home animations and text to a comfortable size (they scale with their width) */
@media (min-width: 700px) and (max-width: 1100px) {
  .hero > .hero-slides, .hero-slides { max-width: 600px; width: 100%; margin-left: auto; margin-right: auto; align-self: center; }
  .hero-sub, .hero .big-create, .hero-not { max-width: 600px; margin-left: auto; margin-right: auto; }
  .hero h1, .hero .eyebrow { max-width: 600px; margin-left: auto; margin-right: auto; }
}

/* Nothing on the home page may be wider than a phone (iPhones widen the whole page to fit it) */
.hs-bar { max-width: 100%; min-width: 0; gap: 10px; }
.hs-nav.next { min-width: 0; max-width: calc(100% - 150px); flex: 0 1 auto; }
.hs-next-l { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 420px) { .hs-next-l .hs-next-pre { display: none; } }
.price-chip { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; }

/* ---------- Following ---------- */
.fw-main { max-width: 640px; margin: 0 auto; padding: 14px 16px 30px; box-sizing: border-box; }
.fw-hero { position: relative; margin: 0 0 14px; padding: 26px 22px 30px; border-radius: 24px; background: linear-gradient(160deg, #2f4a3a 0%, #23382c 100%); color: #f4ede1; text-align: center; overflow: hidden; }
.fw-hero h1 { margin: 0 0 10px; font: 500 34px var(--serif, Georgia, serif); color: #fff; }
.fw-q { margin: 0 auto; max-width: 420px; font: italic 19px/1.45 var(--serif, Georgia, serif); }
.fw-heart { display: block; margin-top: 12px; color: #d9b46a; font-style: normal; font-size: 18px; }
.fw-heart::before, .fw-heart::after { content: ""; display: inline-block; width: 46px; height: 1px; background: #d9b46a; vertical-align: middle; margin: 0 10px; }
.fw-flash { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #e6f1e8; color: #2f6a3f; font-weight: 700; }
.fw-flash.bad { background: #fbeee9; color: #a3402f; }
.fw-card { margin: 0 0 14px; padding: 16px; border-radius: 22px; background: #fffdf9; border: 1px solid rgba(60,45,30,.1); box-shadow: 0 12px 30px -24px rgba(60,40,20,.55); }
.fw-h h2 { margin: 0 0 10px; font: 800 13px var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: #2f4a3a; }
.fw-up { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; border-radius: 16px; background: #f7f2ea; color: inherit; text-decoration: none; }
.fw-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; filter: grayscale(.15); }
.fw-av.big { width: 72px; height: 72px; }
.fw-ph { display: grid; place-items: center; background: #b08d57; color: #fff; font: 800 22px var(--sans, system-ui); }
.fw-plus { background: #e9e1d3; color: #6b5a48; font-size: 30px; }
.fw-up-t { min-width: 0; display: grid; gap: 2px; }
.fw-up-t b { font: 700 17px var(--sans, system-ui); }
.fw-up-t span { font-size: 14.5px; color: #4a3d33; }
.fw-up-t small { font-size: 13.5px; color: #8a7663; }
.fw-days { min-width: 58px; padding: 8px 6px; border-radius: 12px; background: #fff; border: 1px solid #e2d8cc; text-align: center; line-height: 1.1; }
.fw-days b { display: block; font: 800 24px var(--sans, system-ui); color: #2c241e; font-variant-numeric: lining-nums tabular-nums; }
.fw-days small { font-size: 11.5px; color: #6b5a48; }
.fw-days.soon { border-color: #d9b46a; background: #fffaf1; }
.fw-days.today { background: #2f4a3a; border-color: #2f4a3a; } .fw-days.today b { color: #fff; font-size: 16px; }
.fw-loved { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.fw-lo { flex: none; width: 92px; display: grid; justify-items: center; gap: 4px; text-align: center; color: inherit; text-decoration: none; }
.fw-lo b { font: 700 13.5px/1.2 var(--sans, system-ui); }
.fw-lo small { font-size: 12px; color: #8a7663; }
.fw-mem { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px; margin-bottom: 10px; border-radius: 16px; background: #f7f2ea; color: inherit; text-decoration: none; }
.fw-mph { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.fw-mq { display: grid; place-items: center; background: #efe5d6; color: #b08d57; font: 40px var(--serif, Georgia, serif); }
.fw-mem b { font: 800 14px var(--sans, system-ui); }
.fw-mem p { margin: 3px 0; font: italic 15px/1.4 var(--serif, Georgia, serif); color: #3a2f28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fw-mem small { font-size: 12.5px; color: #8a7663; }
.fw-empty, .fw-small { margin: 0; font-size: 15px; color: #6b5a48; }
.fw-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #efe6d9; }
.fw-row .fw-av { width: 40px; height: 40px; }
.fw-sw { display: flex; align-items: center; gap: 6px; font: 600 14px var(--sans, system-ui); }
.fw-sw input { width: 20px; height: 20px; accent-color: #2f4a3a; }
.fw-signin form { display: grid; gap: 10px; }
.pp-follow { padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); color: #fff; font: 800 15px var(--sans, system-ui); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pp-follow.on { background: #d9b46a; border-color: #d9b46a; color: #2c241e; }
.dt-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #efe6d9; }
.dt-ic { font-size: 24px; } .dt-row b { display: block; } .dt-row small { color: #6b5a48; }
.dt-rm { color: #a3402f !important; }
.dt-lab { margin: 14px 0 6px; font: 800 14px var(--sans, system-ui); }
.dt-form { margin: 8px 0 12px; padding: 14px; border-radius: 16px; background: #fffaf1; border: 1px solid #eadfcb; }
.dt-f { display: grid; gap: 4px; font: 700 13.5px var(--sans, system-ui); margin-bottom: 8px; }
.dt-date { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.dt-acts { display: flex; gap: 8px; } .dates-sheet .dt-done { width: 100%; justify-content: center; margin-top: 12px; }
.pe-follow { margin-top: 18px; padding-top: 12px; border-top: 1px solid #efe6d9; }
.pe-follow h3 { margin: 0 0 8px; font: 800 15px var(--sans, system-ui); } .pe-follow h3 small { color: #8a7663; font-weight: 600; }
.pe-frow { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.pe-frow b { display: block; } .pe-frow small { color: #8a7663; }
.follow-sheet .input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.pp-next { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: 600 14.5px var(--sans, system-ui); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 420px) { .tributes-page .header-actions { gap: 6px; } .tributes-page .header-actions .btn-ghost { padding: 0 10px !important; font-size: 13px !important; } }

/* On this day */
.otd-bar{display:flex;align-items:center;gap:12px;max-width:640px;margin:12px auto;padding:10px 12px;background:#FFF8EC;border:1px solid #E8D3A8;border-radius:16px;box-shadow:0 4px 14px rgba(80,60,30,.08);animation:otdIn .5s ease both;box-sizing:border-box;width:calc(100% - 32px)}
.otd-bar img,.otd-bar .otd-ph{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:#EADBC4;color:#9A7B4F;font-size:20px}
.otd-bar a{flex:1;min-width:0;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.otd-bar a b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#9A7B4F}
.otd-bar a span{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.otd-bar button{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:16px;color:#7a6a55;cursor:pointer}
@keyframes otdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fw-otd{background:linear-gradient(180deg,#FFF8EC,#fff);border-color:#E8D3A8}
.fw-otd .fw-h small{color:#9A7B4F}
.fw-otd-i{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #f0e6d6;color:inherit;text-decoration:none}
.fw-otd-i:first-of-type{border-top:0}
.fw-otd-i>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.fw-otd-i b{font-size:17px}
.fw-otd-i span{color:#5a4a36}
.fw-otd-i small{color:#7a6a55}
.fw-otd-i p{margin:2px 0;font-style:italic;overflow-wrap:anywhere}

/* Need help? assistant */
.hb-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 14px var(--sans,system-ui);cursor:pointer;white-space:nowrap;flex:none}
.hb-btn span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent,#B08D57);color:#fff;font-size:14px}
.hb-btn.in-builder{display:none}
@media (max-width: 860px){
  .hb-btn.in-builder{display:inline-flex;height:30px;font-size:13.5px;padding:0 10px 0 4px;margin-left:8px}
  .hb-btn.in-builder span{width:22px;height:22px;font-size:13px}
  .site-header .hb-btn.in-header{height:34px;font-size:13.5px}
}
@media (max-width: 420px){ .progress-top #stepName{display:none} }
html.hb-open,html.hb-open body{overflow:hidden}
.hb-sheet{position:fixed;inset:0;z-index:300;background:rgba(30,27,25,.45);display:flex;align-items:flex-end;justify-content:center;animation:askIn .25s ease both}
.hb-card{width:100%;max-width:560px;height:min(86dvh,720px);margin-top:env(safe-area-inset-top,0px);background:var(--bg,#F7F3EE);border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.2);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box}
@media (min-width: 700px){ .hb-sheet{align-items:center} .hb-card{border-radius:22px} }
.hb-top{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line)}
.hb-top h2{margin:0;font:600 22px var(--serif,Georgia)}
.hb-top small{color:var(--muted,#7a6a55);font-size:13.5px}
.hb-top>div{flex:1;min-width:0}
.hb-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#2f4a3a;color:#E8C480;font-size:18px;flex:none}
.hb-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:17px;cursor:pointer;flex:none}
.hb-log{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.hb-msg{max-width:86%;padding:10px 14px;border-radius:18px;font-size:16.5px;line-height:1.45;overflow-wrap:anywhere}
.hb-msg.bot{align-self:flex-start;background:var(--card,#fff);border:1px solid var(--line);border-bottom-left-radius:6px}
.hb-msg.me{align-self:flex-end;background:#2f4a3a;color:#fff;border-bottom-right-radius:6px}
.hb-msg a{color:inherit;font-weight:700}
.hb-msg.typing{display:flex;gap:5px;padding:14px 16px}
.hb-msg.typing i{width:7px;height:7px;border-radius:50%;background:#B08D57;animation:hbDot 1s infinite ease-in-out}
.hb-msg.typing i:nth-child(2){animation-delay:.15s}.hb-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes hbDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.hb-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:4px 14px 8px}
.hb-sugg .chip{font-size:14.5px;white-space:normal;text-align:left}
.hb-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);background:var(--card,#fff)}
.hb-form textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line);border-radius:16px;padding:11px 14px;font:16px var(--sans,system-ui);background:#fff;color:var(--ink);max-height:120px}
.hb-send{height:46px;flex:none}
.hb-foot{margin:0;padding:6px 14px 10px;font-size:12.5px;color:var(--muted,#7a6a55);text-align:center;background:var(--card,#fff)}
.hb-btn b{font-weight:700}
.hb-btn .hb-short{display:none}
@media (max-width: 600px){
  .site-header .hb-btn.in-header{height:34px;padding:0 10px 0 4px;gap:4px;font-size:13.5px}
  .site-header .hb-btn.in-header .hb-long{display:none}
  .site-header .hb-btn.in-header .hb-short{display:inline}
  .site-header .hb-btn.in-header span{width:24px;height:24px}
}
@media (max-width: 440px){
  .site-header .hb-btn.in-header{width:36px;height:36px;padding:0;justify-content:center}
  .site-header .hb-btn.in-header .hb-short{display:none}
  .site-header .hb-btn.in-header span{width:28px;height:28px;font-size:16px}
}
@media (max-width: 400px){
  .tributes-page .header-actions, .following-page .header-actions, .pay-page .header-actions { gap: 2px; }
  .tributes-page .header-actions .btn-ghost, .following-page .header-actions .btn-ghost, .pay-page .header-actions .btn-ghost { padding: 0 7px !important; font-size: 12.5px !important; }
}

/* Switch tribute: top right, the tribute's photo in a glowing ring */
.sw-btn{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 10px 0 3px;margin-left:8px;border-radius:999px;border:1px solid #E8D3A8;background:#FFF8EC;color:var(--ink);font:700 14px var(--sans,system-ui);cursor:pointer;white-space:nowrap;flex:none;box-shadow:0 2px 10px rgba(176,141,87,.25)}
.sw-ring{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none}
.sw-ring::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,#E8C480,#B08D57,#fff3d6,#C9A46B,#E8C480);animation:swSpin 3.2s linear infinite;-webkit-mask:radial-gradient(circle,transparent 17px,#000 17.5px);mask:radial-gradient(circle,transparent 17px,#000 17.5px)}
.sw-ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;animation:swGlow 2.4s ease-in-out infinite}
.sw-av{width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#EADBC4;color:#8a6a3a;font:700 15px var(--sans,system-ui);flex:none}
.sw-name{max-width:96px;overflow:hidden;text-overflow:ellipsis}
.sw-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2f4a3a;color:#E8C480;font-size:13px}
.sw-btn[aria-expanded="true"] .sw-ico{transform:rotate(180deg)}
@keyframes swSpin{to{transform:rotate(360deg)}}
@keyframes swGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,196,128,.0),0 0 6px 1px rgba(232,196,128,.45)}50%{box-shadow:0 0 0 4px rgba(232,196,128,.18),0 0 14px 4px rgba(232,196,128,.7)}}
@media (prefers-reduced-motion: reduce){ .sw-ring::before,.sw-ring::after{animation:none} }
/* phones: it takes the top-right spot (My tributes is in the footer and in the menu) */
@media (max-width: 860px){
  .progress-top.has-sw .exit-mini{display:none}
  .progress-top.has-sw > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width: 440px){
  .progress-top.has-sw #stepName{display:none}
  .progress-top.has-sw .hb-btn.in-builder{width:32px;padding:0;justify-content:center;margin-left:6px}
  .progress-top.has-sw .hb-btn.in-builder b{display:none}
  .sw-name{max-width:72px}
}
.bx-top.has-sw{grid-template-areas:"back . sw" "prog prog more"}
.bx-top.has-sw .bx-more{grid-area:more}
.bx-top.has-sw .bx-prog{grid-area:prog}
.bx-top .sw-btn{grid-area:sw;margin:0;justify-self:end}
.dash-top .sw-btn{margin-left:auto}
.sw-drop{position:fixed;inset:0;z-index:260;background:rgba(30,27,25,.18);animation:askIn .2s ease both}
.sw-card{position:fixed;width:min(360px,calc(100vw - 20px));max-height:calc(100dvh - 90px);overflow-y:auto;background:var(--bg,#F7F3EE);border:1px solid #E8D3A8;border-radius:20px;padding:12px;box-sizing:border-box;box-shadow:0 18px 50px rgba(40,30,20,.28);transform-origin:top right;animation:swDrop .22s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes swDrop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.sw-sub{margin:2px 4px 10px;color:var(--muted,#7a6a55);font-size:14px;line-height:1.4}
.sw-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px;margin:0 0 8px;border-radius:14px;border:1px solid var(--line);background:var(--card,#fff);text-align:left;font:inherit;color:inherit;cursor:pointer;box-sizing:border-box}
.sw-row.cur{background:#FFF8EC;border-color:#E8D3A8;cursor:default}
.sw-row .sw-av{width:46px;height:46px;font-size:19px}
.sw-row>span:not(.sw-av){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sw-row b{font-size:16.5px;overflow-wrap:anywhere}
.sw-row small{color:var(--muted,#7a6a55);font-size:13.5px}
.sw-row i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2f4a3a;color:#E8C480;flex:none}
.sw-plus{background:transparent!important;border:2px dashed #C9A46B;color:#8a6a3a!important}
.sw-all{display:block;text-align:center;padding:8px 0 4px;font-weight:700;color:var(--accent-deep,#8a6a3a);text-decoration:none}

/* Share an idea (in the help assistant) */
.hb-idea-btn{display:block;width:calc(100% - 24px);margin:0 12px 8px;padding:10px 14px;border-radius:14px;border:1px dashed #C9A46B;background:#FFF8EC;color:var(--ink);font:700 15px var(--sans,system-ui);text-align:left;cursor:pointer}
.hb-idea-btn small{font-weight:400;color:var(--muted,#7a6a55)}
.hb-card{position:relative;overflow:hidden}
.hb-idea{position:absolute;inset:0;z-index:2;background:var(--bg,#F7F3EE);display:flex;flex-direction:column;gap:10px;padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 16px);overflow-y:auto;animation:askIn .2s ease both;box-sizing:border-box}
.hb-idea-top{display:flex;align-items:center;gap:10px}
.hb-idea-top h3{margin:0;font:600 23px var(--serif,Georgia)}
.hb-idea-back{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:18px;cursor:pointer;flex:none}
.hb-idea-sub{margin:0;color:var(--muted,#7a6a55);font-size:15px;line-height:1.45}
.hb-kinds{display:flex;flex-wrap:wrap;gap:8px}
.hb-kinds .chip{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
.hb-kinds .chip[aria-checked="true"]{background:#2f4a3a!important;border-color:#2f4a3a!important;color:#fff!important}
.hb-idea textarea{width:100%;box-sizing:border-box;min-height:120px;resize:vertical;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:16px/1.45 var(--sans,system-ui);background:#fff;color:var(--ink)}
.hb-idea .input{width:100%;box-sizing:border-box}
.hb-ok{display:flex;align-items:center;gap:8px;font-size:15px}
.hb-ok input{width:20px;height:20px}
.hb-idea-err{margin:0;color:#a3412e;font-size:14px;min-height:0}
.hb-idea-err:empty{display:none}

/* Home: hero "Watch" button, two film cards, and the full-screen player */
.hero-watch { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 460px; box-sizing: border-box; margin: 0 0 10px; padding: 10px 18px 10px 10px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit; box-shadow: 0 10px 26px -18px rgba(100,70,30,.6); }
.hero-watch:active { transform: scale(.98); }
.hw-thumb { position: relative; width: 62px; height: 62px; border-radius: 16px; overflow: hidden; flex: none; background: #1e1b19; }
.hw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hw-thumb i, .wc-media i { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #8c6a3c; font-style: normal; font-size: 14px; padding-left: 3px; box-sizing: border-box; box-shadow: 0 0 0 0 rgba(232,196,128,.7); animation: wPulse 2.2s ease-in-out infinite; }
.hero-watch b { display: block; font: 800 18px var(--sans, system-ui); }
.hero-watch small { color: var(--ink-soft); font-size: 14px; }
@keyframes wPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,196,128,.75); } 50% { box-shadow: 0 0 0 10px rgba(232,196,128,0); } }
.watch-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 920px; margin: 0 auto; }
.watch-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--card); overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); box-shadow: 0 20px 44px -28px rgba(70,45,20,.55); transition: transform .2s ease; }
.watch-card:hover { transform: translateY(-3px); }
.wc-media { position: relative; display: block; aspect-ratio: 4 / 5; background: #1e1b19; }
.wc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.wc-media i { width: 72px; height: 72px; font-size: 26px; padding-left: 6px; }
.wc-media em { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(20,16,14,.75); color: #fff; font: 700 13px var(--sans, system-ui); font-style: normal; }
.wc-text { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.wc-tag { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #FFF8EC; border: 1px solid #E8D3A8; color: #8c6a3c; font: 800 12px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; }
.wc-text b { font: 500 22px/1.3 var(--serif, Georgia); }
.wc-text small { color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.watch-cta { text-align: center; margin: 30px 0 0; }
@media (max-width: 760px) {
  .watch-cards { grid-template-columns: 1fr; gap: 20px; }
  .wc-media { aspect-ratio: 1 / 1; }
}
html.wv-open, html.wv-open body { overflow: hidden; }
.wv { position: fixed; inset: 0; z-index: 400; background: rgba(10,8,7,.94); display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); animation: askIn .2s ease both; }
.wv video { max-width: 100vw; max-height: 100dvh; width: auto; height: 100%; aspect-ratio: 9 / 16; background: #000; }
.wv-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #222; font-size: 20px; cursor: pointer; z-index: 2; }
.wv-end { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); display: grid; gap: 10px; animation: askIn .3s ease both; z-index: 2; }
.wv-end .btn { width: 100%; }
.wv-end .wv-next { background: rgba(255,255,255,.95); }
/* remembrance.website/<name> is longer than the old addresses: keep it on one line on small phones */
.ga-url { font-size: clamp(13px, 4.2vw, 18px); white-space: nowrap; overflow: hidden; }
.ga-url .ga-dom { flex: none; }
.ga-url .ga-typed { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* play button: a drawn triangle (the ▶ character becomes a blue emoji on iPhone) */
.hw-thumb i, .wc-media i { padding-left: 0; }
.hw-thumb i svg, .wc-media i svg { width: 46%; height: 46%; fill: #8c6a3c; margin-left: 8%; display: block; }
.watch-cards.one { grid-template-columns: minmax(0, 440px); justify-content: center; }