/* The Wedding Envelope — mobile-first fictional demo */
:root {
  --cream: #faf3ea;
  --paper: #fffdf7;
  --paper-warm: #fdf7ed;
  --blush: #f7dfd8;
  --pink: #e9a49e;
  --pink-soft: #f4cdc6;
  --lav: #cec4e6;
  --lav-soft: #e7dff3;
  --lav-deep: #7764ad;
  --lav-dark: #604c91;
  --ink: #554a56;
  --ink-soft: #756775;
  --ink-blue: #3f3a5e;
  --wax: #c24b5a;
  --wax-dark: #a93c4d;
  --gold: #c5a260;
  --green: #35765d;
  --green-soft: #e7f3ed;
  --line: rgba(119,100,173,.22);
  --shadow-env: 0 24px 55px rgba(105,76,129,.24);
  --shadow-card: 0 3px 8px rgba(85,74,86,.08), 0 28px 64px rgba(93,65,108,.16);
  --font-ui: 'Sarabun', system-ui, sans-serif;
  --font-hand: 'Mali', 'Sarabun', cursive;
  --font-script: 'Dancing Script', 'Mali', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100dvh;
  padding-top: 58px;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--cream);
  -webkit-tap-highlight-color: transparent;
}
body:has(dialog[open]) { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, textarea, summary { font: inherit; }
button, summary { cursor: pointer; }
input, textarea { font-size: 16px; }
a { color: var(--lav-deep); }
[hidden] { display: none !important; }
::selection { background: var(--pink-soft); }
:focus-visible { outline: 3px dashed var(--lav-deep); outline-offset: 3px; border-radius: 8px; }

.sky {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(100% 70% at 50% -12%, #eee4f7 0%, transparent 65%),
    radial-gradient(80% 52% at 96% 112%, #fde8dc 0%, transparent 62%),
    linear-gradient(180deg, #f3e9f8 0%, #fae9e4 54%, #fdf3e7 100%);
}
.sky::before, .sky::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .46;
}
.sky::before { width: 46vmin; height: 46vmin; left: -13vmin; top: 20%; background: radial-gradient(circle, rgba(206,196,230,.65), transparent 70%); }
.sky::after { width: 52vmin; height: 52vmin; right: -17vmin; bottom: 10%; background: radial-gradient(circle, rgba(235,167,158,.48), transparent 70%); }

/* Shared demo chrome */
.demo-ribbon {
  position: fixed; inset: 0 0 auto; z-index: 120;
  min-height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right));
  background: rgba(63,58,94,.96); color: #fff;
  box-shadow: 0 6px 20px rgba(45,35,62,.18);
  backdrop-filter: blur(12px);
}
.demo-ribbon-copy { min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.demo-ribbon-copy strong { white-space: nowrap; }
.demo-ribbon-copy > span:last-child { color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-status-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #8ee0b6; box-shadow: 0 0 0 5px rgba(142,224,182,.12); }
.demo-ribbon-actions { flex: 0 0 auto; display: flex; gap: 7px; }
.demo-text-btn, .demo-lead-btn { border-radius: 999px; padding: 7px 10px; font-size: 11.5px; font-weight: 600; }
.demo-text-btn { border: 1px solid rgba(255,255,255,.36); background: transparent; color: #fff; }
.demo-lead-btn { border: 0; background: #fff1dc; color: #6d4d20; }

.demo-dock {
  position: fixed; z-index: 110;
  left: 50%; bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100% - 20px), 560px);
  transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px;
  padding: 7px;
  border: 1px solid rgba(119,100,173,.2);
  border-radius: 24px;
  background: rgba(255,253,247,.94);
  box-shadow: 0 14px 35px rgba(63,58,94,.2);
  backdrop-filter: blur(13px);
  transition: transform .2s ease, opacity .2s ease;
}
body.keyboard-open .demo-dock,
body.form-control-focus .demo-dock,
body:has(input:not([type="radio"]):focus, textarea:focus) .demo-dock {
  transform: translate(-50%, calc(100% + 34px));
  opacity: 0;
  pointer-events: none;
}
.demo-dock a { min-width: 0; padding: 5px 2px 6px; border-radius: 17px; color: var(--ink-soft); text-align: center; text-decoration: none; font-size: 10px; line-height: 1.1; }
.demo-dock a span { display: block; margin-bottom: 3px; font-size: 18px; line-height: 1; }
.demo-dock a b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.demo-dock a[aria-current="page"] { background: var(--lav-soft); color: var(--lav-dark); }

.demo-toast {
  position: fixed; z-index: 180; left: 50%; bottom: calc(98px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100% - 32px); transform: translate(-50%, 14px);
  padding: 11px 16px; border-radius: 999px; background: rgba(63,58,94,.96); color: white;
  box-shadow: 0 10px 25px rgba(40,30,55,.26); text-align: center; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }

.music-toggle {
  position: fixed; z-index: 100; top: 69px; right: 13px;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,253,247,.88); color: var(--lav-dark); box-shadow: 0 5px 15px rgba(85,74,86,.15); backdrop-filter: blur(7px);
  font-size: 20px; transition: transform .15s;
}
.music-toggle:active { transform: scale(.92); }
.music-playing { display: none; }
.music-toggle[aria-pressed="true"] .music-playing { display: inline; }
.music-toggle[aria-pressed="true"] .music-muted { display: none; }

/* Ambient envelopes */
.float-field { position: fixed; inset: 58px 0 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mini-env, .burst-env { position: absolute; width: 38px; height: 26px; border-radius: 5px; background: linear-gradient(150deg,#fbf4fa,#efe2f1); box-shadow: 0 3px 9px rgba(120,90,140,.16); }
.mini-env { opacity: 0; animation: float-up var(--dur,14s) linear var(--delay,0s) infinite; }
.mini-env::before, .burst-env::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0,100% 0,50% 62%); background: rgba(157,140,201,.25); border-radius: inherit; }
.mini-env::after { content: '♥'; position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); color: var(--wax); font-size: 9px; }
.mini-env.tint-b, .burst-env.tint-b { background: linear-gradient(150deg,#fdf1ec,#f6dcd6); }
.mini-env.tint-c, .burst-env.tint-c { background: linear-gradient(150deg,#f3ecfb,#ded2f0); }
.mini-env.tint-d, .burst-env.tint-d { background: linear-gradient(150deg,#fdf6ea,#f3e4cd); }
@keyframes float-up { 0%{transform:translateY(106vh) rotate(var(--rot,4deg));opacity:0} 9%{opacity:var(--op,.5)} 91%{opacity:var(--op,.5)} 100%{transform:translateY(-14vh) rotate(calc(var(--rot,4deg)*-1));opacity:0} }
.burst-env { bottom: -60px; }

/* Scene shell */
.stage { min-height: calc(100dvh - 58px); display: grid; }
.scene { display: none; min-height: calc(100dvh - 58px); padding: 28px 18px 38px; place-items: center; }
.scene.active { display: grid; animation: scene-in .48s ease both; }
@keyframes scene-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.kicker { margin: 0; font-family: var(--font-script); font-size: clamp(22px,5.5vw,29px); color: var(--lav-deep); line-height: 1.1; }
.experience-pill, .tiny-demo-label, .success-chip, .optional-badge, .demo-payment-banner {
  display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; font-weight: 600; letter-spacing: .05em;
}
.experience-pill { padding: 6px 11px; background: rgba(255,253,247,.74); border: 1px solid var(--line); color: var(--lav-dark); font-size: 11px; text-transform: uppercase; }

/* Welcome */
.welcome-wrap { width: min(100%, 720px); display: grid; justify-items: center; gap: 16px; text-align: center; }
.welcome-copy { display: grid; justify-items: center; gap: 8px; }
.welcome-copy h1 { margin: 0; max-width: 18ch; font-family: var(--font-hand); color: var(--ink-blue); font-size: clamp(31px,8vw,49px); line-height: 1.18; }
.welcome-lede { margin: 0; max-width: 48ch; color: var(--ink-soft); font-size: 15px; }
.feature-peek { display: flex; max-width: 100%; gap: 7px; overflow-x: auto; padding: 3px 3px 7px; scrollbar-width: none; }
.feature-peek::-webkit-scrollbar { display: none; }
.feature-peek span { flex: 0 0 auto; border: 1px solid rgba(119,100,173,.18); border-radius: 999px; padding: 7px 10px; background: rgba(255,253,247,.75); color: var(--ink); font-size: 11.5px; }
.welcome-actions { width: min(100%, 440px); display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; }
.safe-note { margin: 0; max-width: 52ch; color: var(--ink-soft); font-size: 11.5px; }
.text-link { border: 0; background: transparent; color: var(--lav-deep); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

.button-primary, .button-secondary, .button-ghost, .send-btn, .inline-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; font-weight: 600; text-align: center;
}
.button-primary { min-height: 48px; padding: 12px 18px; border: 0; color: white; background: linear-gradient(140deg,var(--lav-deep),#6750a0); box-shadow: 0 10px 23px rgba(103,80,160,.3); }
.button-secondary { min-height: 48px; padding: 11px 17px; border: 1.5px solid var(--lav-deep); color: var(--lav-deep); background: rgba(255,253,247,.72); }
.button-ghost { min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--ink-soft); }
.full { width: 100%; }
.button-primary:active, .button-secondary:active, .send-btn:active { transform: scale(.975); }

/* Envelope component */
.envelope { position: relative; width: min(82vw,340px); aspect-ratio: 33/22; perspective: 1000px; }
.showcase-envelope { margin: 3px 0; cursor: pointer; filter: drop-shadow(0 20px 20px rgba(99,71,117,.13)); }
.env-body { position: absolute; inset: 0; z-index: 1; border-radius: 13px; background: linear-gradient(165deg,#efe4f4,#e5d6ee); box-shadow: var(--shadow-env); }
.env-letter { position: absolute; left: 5%; right: 5%; top: 7%; bottom: 10%; z-index: 2; overflow: hidden; display: grid; place-items: center; padding: 8px; border-radius: 8px; background: var(--paper); box-shadow: 0 4px 14px rgba(90,70,110,.16); text-align: center; }
.env-letter-preview { display: grid; justify-items: center; gap: 5px; font-family: var(--font-hand); color: var(--ink-soft); font-size: 14px; line-height: 1.25; }
.env-letter-preview img { width: 47px; height: 47px; border-radius: 50%; object-fit: cover; }
.env-pocket { position: absolute; inset: 0; z-index: 3; border-radius: 13px; background: linear-gradient(165deg,#f4e9f7 0%,#ecdff2 55%,#e4d4ee 100%); clip-path: polygon(0 0,50% 62%,100% 0,100% 100%,0 100%); }
.env-pocket::after { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0,50% 62%,100% 0,100% 3%,50% 65%,0 3%); background: linear-gradient(180deg,rgba(120,90,140,.1),transparent); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 55%; z-index: 4; transform-origin: top center; will-change: transform; }
.env-stamp { position: absolute; right: 4.5%; top: 58%; z-index: 4; width: 22%; padding: 3px; border-radius: 4px; transform: rotate(3.5deg); background: white; box-shadow: 0 3px 9px rgba(90,70,110,.22); }
.env-stamp img { aspect-ratio: 1; border-radius: 3px; object-fit: cover; }
.env-address { position: absolute; left: 6%; bottom: 9%; z-index: 4; max-width: 58%; font-family: var(--font-hand); color: #766876; font-size: clamp(15px,4.6vw,19px); line-height: 1.25; text-align: left; transform: rotate(-1.5deg); }
.env-address small { font-family: var(--font-ui); font-size: .58em; letter-spacing: .02em; }
.env-seal { position: absolute; left: 50%; top: 50%; z-index: 5; width: 27%; aspect-ratio: 1; padding: 0; border: 0; transform: translate(-50%,-50%); background: transparent; filter: drop-shadow(0 4px 8px rgba(140,50,60,.38)); animation: seal-pulse 2s ease-in-out infinite; }
@keyframes seal-pulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.07)} }
.envelope.opened .env-seal { animation: none; opacity: 0; transition: opacity .25s; }
.envelope.opened .env-flap { transform: rotateX(-180deg); z-index: 1; }
.envelope.css-open .env-flap { transition: transform .46s ease-in .08s,z-index 0s .3s; transform: rotateX(-180deg); z-index: 1; }
.envelope.css-open .env-letter { transition: transform .52s ease .46s; transform: translateY(-82%); z-index: 5; }
.tap-hint { margin: -2px 0 0; color: var(--wax-dark); font-size: 14px; font-weight: 600; animation: hint-bob 1.7s ease-in-out infinite; }
@keyframes hint-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Wish form */
.wish-card, .confirm-card { width: min(100%,460px); padding: 28px 22px 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,253,247,.96); box-shadow: var(--shadow-card); }
.wish-card { position: relative; display: grid; gap: 15px; }
.wish-card::before { content: ''; position: absolute; top: -11px; left: 50%; width: 118px; height: 27px; border-radius: 3px; transform: translateX(-50%) rotate(-2deg); background: linear-gradient(100deg,rgba(206,196,230,.88),rgba(235,167,158,.86)); opacity: .75; }
.card-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; }
.card-head img { width: 64px; height: 64px; border: 3px solid white; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 14px rgba(120,90,140,.22); }
.tiny-demo-label { padding: 3px 7px; background: var(--lav-soft); color: var(--lav-dark); font-size: 9px; }
.card-head h2, .confirm-card h2, .gift-sheet h2 { margin: 3px 0 0; font-family: var(--font-hand); color: var(--ink-blue); line-height: 1.2; }
.card-head h2 { font-size: 25px; }
.card-head p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; }
.quick-fill { justify-self: start; border: 1px solid rgba(119,100,173,.32); border-radius: 999px; padding: 8px 12px; background: #f8f3fc; color: var(--lav-dark); font-size: 12.5px; font-weight: 600; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--ink-blue); font-size: 15px; font-weight: 600; }
.field label span { color: var(--ink-soft); font-size: 11px; font-style: italic; font-weight: 400; }
.name-input { width: 100%; padding: 5px 2px 7px; border: 0; border-bottom: 2px dashed var(--lav); border-radius: 0; background: transparent; color: var(--ink-blue); font-family: var(--font-hand); font-size: 22px; }
.name-input:focus { outline: 0; border-bottom-color: var(--lav-deep); }
.wish-input { width: 100%; min-height: 145px; resize: vertical; padding: 4px 12px; border: 1px solid #efe6f2; border-radius: 12px; color: var(--ink-blue); font-family: var(--font-hand); font-size: 20px; line-height: 36px; background: repeating-linear-gradient(to bottom,transparent 0,transparent 35px,rgba(157,140,201,.25) 35px,rgba(157,140,201,.25) 36px),var(--paper-warm); }
.wish-input:focus { outline: 0; border-color: var(--lav); box-shadow: 0 0 0 3px rgba(206,196,230,.24); }
.photo-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.photo-btn { border: 1.5px dashed var(--lav-deep); border-radius: 999px; padding: 8px 13px; background: rgba(231,223,243,.3); color: var(--lav-deep); font-size: 13px; font-weight: 600; }
.photo-btn span { color: var(--ink-soft); font-size: 10px; font-style: italic; }
.polaroid { position: relative; width: 108px; padding: 6px 6px 21px; border-radius: 4px; transform: rotate(2deg); background: white; box-shadow: 0 6px 17px rgba(90,70,110,.24); }
.polaroid img { width: 96px; height: 96px; border-radius: 2px; object-fit: cover; }
.remove-photo { position: absolute; top: -9px; right: -9px; width: 25px; height: 25px; border: 0; border-radius: 50%; background: var(--ink-blue); color: white; }
.visibility-choice { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.visibility-choice legend { margin-bottom: 5px; color: var(--ink-blue); font-size: 14px; font-weight: 600; }
.visibility-choice label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; }
.visibility-choice label:has(input:checked) { border-color: var(--lav-deep); background: #f8f4ff; box-shadow: 0 0 0 2px rgba(119,100,173,.1); }
.visibility-choice input { margin-top: 4px; accent-color: var(--lav-deep); }
.visibility-choice strong, .visibility-choice small { display: block; }
.visibility-choice strong { color: var(--ink-blue); font-size: 13px; }
.visibility-choice small { margin-top: 2px; color: var(--ink-soft); font-size: 10.5px; }
.demo-privacy-note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; padding: 10px 11px; border-radius: 13px; background: var(--green-soft); color: #2c6650; font-size: 11px; }
.demo-privacy-note p { margin: 0; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-error { display: none; margin: 0; color: var(--wax-dark); text-align: center; font-size: 13px; font-weight: 600; }
.form-error.show { display: block; animation: shake .35s ease; }
@keyframes shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.send-btn { width: 100%; min-height: 51px; padding: 13px 18px; border: 0; color: white; background: linear-gradient(140deg,var(--wax),var(--wax-dark)); box-shadow: 0 10px 23px rgba(171,68,82,.31); font-size: 16px; }
.form-note { margin: -5px 0 0; color: var(--ink-soft); text-align: center; font-size: 11px; }
.inline-link { justify-self: center; color: var(--lav-deep); font-size: 12px; }

/* Seal ceremony */
#overlay-seal { position: fixed; inset: 0; z-index: 160; display: none; place-items: center; background: radial-gradient(100% 60% at 50% 0%,rgba(243,232,248,.98),transparent 75%),linear-gradient(180deg,rgba(244,234,248,.98),rgba(251,234,227,.98) 58%,rgba(253,243,231,.98)); }
#overlay-seal.active { display: grid; }
.seal-stage { display: grid; justify-items: center; gap: 8px; }
.sig-area { width: min(86vw,420px); height: 100px; display: grid; place-items: center; }
.sig-wrap { position: relative; display: grid; justify-items: center; }
.sig-mask { overflow: hidden; white-space: nowrap; }
.sig-inner { font-family: var(--font-hand); font-size: 44px; font-weight: 700; color: var(--ink-blue); text-shadow: 0 0 1.5px rgba(63,58,94,.45); line-height: 1.3; }
.sig-nib { position: absolute; left: 0; bottom: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-blue); box-shadow: 0 0 5px rgba(63,58,94,.45); }
.seal-caption { min-height: 22px; color: var(--ink-soft); font-size: 14px; }
#overlay-seal .envelope { width: min(64vw,250px); }

/* Confirmation */
.confirm-card { position: relative; display: grid; justify-items: center; gap: 13px; text-align: center; overflow: hidden; }
.success-burst { position: absolute; top: 20px; left: 30px; color: var(--gold); font-size: 29px; animation: spin-spark 4s linear infinite; }
@keyframes spin-spark { to{transform:rotate(360deg)} }
.confirm-art { width: 88px; height: 88px; border: 4px solid white; border-radius: 50%; object-fit: cover; box-shadow: 0 7px 18px rgba(120,90,140,.26); }
.success-chip { padding: 5px 9px; background: var(--green-soft); color: var(--green); font-size: 10px; }
.confirm-card h2 { margin: 0; font-size: 27px; }
.confirm-card > p { margin: 0; max-width: 36ch; color: var(--ink-soft); font-size: 13px; }
.gift-teaser { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; padding: 15px; border: 1px dashed var(--lav-deep); border-radius: 18px; background: linear-gradient(145deg,#fbf8ff,#fff9f3); text-align: left; }
.gift-teaser-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--lav-soft); font-size: 21px; }
.gift-teaser .optional-badge { padding: 3px 6px; background: #fff1dc; color: #795a28; font-size: 8.5px; }
.gift-teaser h3 { margin: 5px 0 3px; color: var(--ink-blue); font-size: 16px; }
.gift-teaser p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.gift-teaser .button-secondary { grid-column: 1/-1; min-height: 42px; font-size: 13px; }
.after-demo-cta { width: 100%; padding: 11px; border-radius: 15px; background: var(--blush); }
.after-demo-cta p { margin: 0 0 3px; font-family: var(--font-hand); font-size: 14px; color: var(--ink-blue); }
.after-demo-cta button { border: 0; background: transparent; color: var(--wax-dark); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Gift dialog */
dialog { max-width: none; }
dialog::backdrop { background: rgba(45,35,56,.56); backdrop-filter: blur(4px); }
.gift-dialog, .lead-dialog { width: min(calc(100% - 20px),520px); max-height: calc(var(--visual-viewport-height, 100dvh) - 24px); margin: auto; padding: 0; border: 0; border-radius: 27px; background: transparent; overflow: visible; }
.gift-dialog[open], .lead-dialog[open] { animation: dialog-in .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes dialog-in { from{opacity:0;transform:translateY(25px) scale(.97)} to{opacity:1;transform:none} }
.gift-sheet, .lead-card { position: relative; max-height: calc(var(--visual-viewport-height, 100dvh) - 24px); overflow-y: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 27px; background: var(--paper); box-shadow: 0 30px 70px rgba(35,25,50,.34); }
.gift-sheet { padding: 28px 20px 22px; text-align: center; }
.dialog-close { position: sticky; top: 8px; z-index: 3; width: 40px; height: 40px; margin: -16px -8px -24px auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lav-soft); color: var(--ink-blue); box-shadow: 0 3px 10px rgba(63,58,94,.12); font-size: 25px; line-height: 1; }
.demo-payment-banner { margin: 0 auto 15px; padding: 5px 9px; background: #ffe9e9; color: #9b3745; font-size: 9px; }
.gift-sheet .kicker { font-size: 21px; }
.gift-sheet h2 { margin: 6px auto 10px; max-width: 22ch; font-size: 24px; }
.gift-reassurance { margin: 0 auto 14px; max-width: 39ch; color: var(--ink-soft); font-size: 12px; }
.gift-reassurance strong { color: var(--ink-blue); }
.recipient-card { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--green-soft); color: #2d6651; }
.recipient-card span, .recipient-card small { font-size: 10px; }
.recipient-card strong { font-size: 14px; }
.demo-qr { width: min(62vw,250px); margin: 14px auto 6px; border-radius: 17px; box-shadow: 0 11px 24px rgba(85,74,86,.13); }
.qr-caption { margin: 0 0 11px; color: var(--wax-dark); font-size: 10px; font-weight: 600; }
.same-device-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.same-device-actions button, .same-device-actions a { min-width: 0; padding: 10px 7px; border: 1px solid var(--line); border-radius: 12px; background: #f8f4ff; color: var(--lav-dark); text-decoration: none; font-size: 11.5px; font-weight: 600; }
.same-device-tip { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; margin: 11px 0; padding: 11px; border-radius: 13px; background: var(--paper-warm); text-align: left; }
.same-device-tip p { margin: 0; color: var(--ink-soft); font-size: 10.5px; }
.same-device-tip strong { color: var(--ink-blue); }
.gift-record-form { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fffaf4; text-align: left; }
.gift-record-form details { border: 1px dashed var(--line); border-radius: 12px; padding: 9px 11px; }
.gift-record-form summary { color: var(--lav-dark); font-size: 12px; font-weight: 600; }
.amount-field { margin-top: 10px; }
.truth-note { margin: 0; color: var(--ink-soft); text-align: center; font-size: 10px; }
.gift-done { padding: 28px 0 4px; }
.done-icon { width: 72px; height: 72px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 35px; font-weight: 700; }
.gift-done h2 { font-size: 25px; }
.gift-done p { color: var(--ink-soft); font-size: 13px; }
.gift-done .button-secondary { margin-top: 9px; }

/* Lead dialog */
.lead-card { padding: 32px 22px 24px; text-align: center; background: linear-gradient(160deg,#fffdf7,#f7eef9); }
.lead-kicker { margin: 0; font-family: var(--font-script); color: var(--lav-deep); font-size: 27px; }
.lead-card h2 { margin: 5px 0 10px; font-family: var(--font-hand); color: var(--ink-blue); font-size: 27px; line-height: 1.25; }
.lead-card > p:not(.lead-kicker,.lead-footnote) { margin: 0 auto; max-width: 39ch; color: var(--ink-soft); font-size: 13px; }
.lead-feature-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 18px 0; text-align: left; }
.lead-feature-list span { min-width: 0; padding: 9px; border-radius: 12px; background: white; color: var(--ink-blue); font-size: 11px; }
.lead-actions { display: grid; gap: 8px; }
.lead-primary, .lead-secondary { min-height: 47px; border-radius: 999px; font-weight: 600; }
.lead-primary { display: inline-flex; align-items: center; justify-content: center; border: 0; background: linear-gradient(140deg,var(--wax),var(--wax-dark)); color: white; box-shadow: 0 9px 22px rgba(171,68,82,.25); text-decoration: none; }
.lead-secondary { border: 1.5px solid var(--lav-deep); background: transparent; color: var(--lav-deep); }
.lead-copy-fallback { display: grid; gap: 5px; margin-top: 10px; text-align: left; color: var(--ink-blue); font-size: 11px; font-weight: 600; }
.lead-copy-fallback[hidden] { display: none; }
.lead-copy-fallback textarea { width: 100%; resize: vertical; border: 1px solid var(--lav-line); border-radius: 10px; padding: 9px; background: white; color: var(--ink); font: 12px/1.45 var(--font-ui); }
.lead-footnote { margin: 11px 0 0; color: var(--ink-soft); font-size: 9.5px; }

/* Shared page headers */
.page-top, .book-top { position: relative; z-index: 2; display: grid; justify-items: center; gap: 5px; padding: 26px 18px 8px; text-align: center; }
.page-top h1, .book-top h1 { margin: 0; font-family: var(--font-hand); font-size: clamp(30px,8vw,43px); line-height: 1.15; }
.page-top .count, .book-top .count { margin: 0; color: var(--ink-soft); font-size: 12px; }
.demo-page-chip { padding: 5px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 600; letter-spacing: .05em; }
.nav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 7px 0 2px; }
.nav-row a, .nav-row button { border: 0; background: transparent; color: var(--lav-deep); font-size: 12px; font-weight: 600; text-decoration: none; }
.page-value { margin: 5px auto 0; max-width: 46ch; color: var(--ink-soft); font-size: 12px; }

/* Wall */
.wall-grid { max-width: 840px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 23px 16px; padding: 25px 16px 44px; }
.wish-env { position: relative; width: 148px; height: 104px; display: grid; place-items: end center; padding: 0 8px 12px; border: 0; border-radius: 10px; transform: rotate(var(--rot,0)); background: linear-gradient(160deg,var(--tint-a,#fbf4fa),var(--tint-b,#ece0f0)); box-shadow: 0 11px 22px rgba(120,90,140,.2); transition: transform .2s; }
.wish-env::before { content: ''; position: absolute; inset: 0; border-radius: inherit; clip-path: polygon(0 0,100% 0,50% 58%); background: linear-gradient(180deg,rgba(255,255,255,.58),rgba(157,140,201,.17)); }
.wish-env::after { content: '♥'; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); color: var(--wax); font-size: 15px; }
.wish-env:active { transform: rotate(var(--rot,0)) scale(.95); }
.wish-env .from { position: relative; z-index: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6f5f6d; font-family: var(--font-hand); font-size: 15px; }
.wish-env .photo-dot { position: absolute; z-index: 2; top: 6px; right: 7px; font-size: 11px; }
.wish-env .your-chip { position: absolute; z-index: 3; left: 7px; top: -8px; padding: 3px 7px; border-radius: 999px; background: var(--lav-deep); color: white; font-size: 8.5px; font-weight: 600; box-shadow: 0 3px 8px rgba(63,58,94,.22); }
.wall-empty { padding: 50px 20px; color: var(--ink-soft); text-align: center; }
.live-badge { position: fixed; z-index: 90; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(63,58,94,.9); color: white; font-size: 10px; }
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff929a; animation: live-pulse 1.5s infinite; }
@keyframes live-pulse { 50%{opacity:.25} }

/* Letter modal */
.letter-modal { position: fixed; inset: 0; z-index: 145; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; display: none; place-items: center; padding: 20px; border: 0; background: rgba(63,58,94,.48); backdrop-filter: blur(4px); }
.letter-modal::backdrop { background: transparent; }
.letter-modal.active { display: grid; animation: dialog-in .3s ease both; }
.letter-paper-view { position: relative; width: min(100%,410px); max-height: calc(100dvh - 50px); overflow-y: auto; display: grid; gap: 13px; padding: 28px 22px 22px; border-radius: 17px; background: var(--paper); box-shadow: 0 30px 65px rgba(35,25,50,.36); }
.letter-paper-view .wish-text { margin: 0; color: var(--ink-blue); font-family: var(--font-hand); font-size: 21px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.letter-paper-view .from-line { margin: 0; color: var(--ink); font-family: var(--font-hand); font-size: 19px; font-weight: 700; text-align: right; }
.letter-paper-view .date-line { margin: 0; color: var(--ink-soft); font-size: 10.5px; text-align: right; }
.letter-paper-view .polaroid { width: 150px; margin: 2px auto; }
.letter-paper-view .polaroid img { width: 138px; height: 138px; }
.modal-close { position: absolute; z-index: 4; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--lav-soft); color: var(--ink-blue); font-size: 17px; }
.privacy-chip { justify-self: start; padding: 4px 8px; border-radius: 999px; background: #f1ecf8; color: var(--lav-dark); font-size: 9px; font-weight: 600; }

/* Couple book — explicitly demo-only */
body.book-page { color: #f9efdf; background: radial-gradient(120% 90% at 50% 0%,rgba(255,235,200,.15),transparent 55%),linear-gradient(165deg,#795b42 0%,#5d412b 55%,#432d1d 100%); }
body.book-page .sky { display: none; }
.book-top { color: #f8eddf; }
.book-top .kicker { color: #edc87e; }
.book-top h1 { color: #fff7e9; }
.book-top .count { color: rgba(255,247,233,.78); }
.counter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: linear-gradient(140deg,var(--wax),var(--wax-dark)); color: white; font-size: 13px; font-weight: 600; box-shadow: 0 6px 15px rgba(0,0,0,.28); }
.print-btn { border: 1px solid rgba(255,247,233,.55); border-radius: 999px; padding: 8px 13px; background: rgba(0,0,0,.14); color: #fff7e9; font-size: 11.5px; font-weight: 600; }
.book-top .nav-row a, .book-top .nav-row button { color: #e8c675; }
.book-top .page-value { color: rgba(255,247,233,.72); }
.desk { position: relative; z-index: 1; min-height: calc(100dvh - 245px); margin: 12px 8px 0; }
.desk-env { position: absolute; width: 134px; height: 94px; display: grid; place-items: end center; padding: 0 8px 10px; border: 0; border-radius: 9px; transform: rotate(var(--rot,0)); background: linear-gradient(160deg,var(--tint-a,#fbf4fa),var(--tint-b,#e9dbf0)); box-shadow: 0 13px 23px rgba(20,10,5,.42); transition: transform .2s; }
.desk-env::before { content: ''; position: absolute; inset: 0; border-radius: inherit; clip-path: polygon(0 0,100% 0,50% 58%); background: linear-gradient(180deg,rgba(255,255,255,.55),rgba(157,140,201,.16)); }
.desk-env::after { content: '♥'; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); color: var(--wax); font-size: 14px; }
.desk-env .from { position: relative; z-index: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6f5f6d; font-family: var(--font-hand); font-size: 13.5px; }
.desk-env .ribbon-private { position: absolute; z-index: 3; top: -7px; left: -9px; padding: 3px 8px; border-radius: 4px; transform: rotate(-7deg); background: var(--lav-deep); color: white; font-size: 9px; font-weight: 700; }
.desk-env .gift-dot { position: absolute; z-index: 3; top: -8px; right: -7px; width: 27px; height: 27px; display: grid; place-items: center; border: 1.5px solid #e8c36c; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#d65866,#9d2538); font-size: 12px; box-shadow: 0 3px 7px rgba(20,10,5,.45); }
.desk-env .photo-dot { position: absolute; z-index: 2; top: 5px; right: 7px; font-size: 10px; }
.book-hint { position: relative; z-index: 1; margin: 0; padding: 4px 10px 30px; color: rgba(255,247,233,.7); text-align: center; font-size: 11.5px; }
#book-modal .modal-stage { width: 100%; display: grid; justify-items: center; gap: 14px; }
#book-modal .envelope { width: min(72vw,285px); }
#book-modal .letter-paper-view { display: none; color: var(--ink); }
#book-modal.reading .envelope { display: none; }
#book-modal.reading .letter-paper-view { display: grid; }
#book-modal.reading .modal-stage > .modal-close { display: none; }
.gift-reveal { display: grid; justify-items: center; gap: 3px; padding: 13px; border: 1px solid #ddbd70; border-radius: 13px; color: #fff1ba; text-align: center; background: linear-gradient(150deg,#c94f5e,#902638); box-shadow: 0 10px 23px rgba(83,24,32,.3); animation: gift-pop .5s cubic-bezier(.2,1.5,.35,1) both; }
@keyframes gift-pop { from{transform:scale(.58) rotate(-4deg);opacity:0} to{transform:none;opacity:1} }
.gift-reveal .gift-label { margin: 0; font-size: 11px; }
.gift-reveal .gift-amount { margin: 0; font-family: var(--font-hand); font-size: 23px; font-weight: 700; }
.gift-reveal .gift-truth { margin: 0; color: rgba(255,241,186,.75); font-size: 8.5px; }

/* Print keepsake */
#print-book { display: none; }
@media print {
  body.book-page { padding: 0; background: white; color: #222; }
  .demo-ribbon,.demo-dock,.book-top,.desk,.book-hint,.letter-modal,.music-toggle { display: none !important; }
  #print-book { display: block; }
  .print-cover { min-height: 90vh; display: grid; place-items: center; align-content: center; gap: 14px; page-break-after: always; text-align: center; }
  .print-cover img { width: 220px; border-radius: 50%; }
  .print-cover h1 { margin: 0; font-family: var(--font-hand); font-size: 32px; }
  .print-cover p { margin: 0; color: #666; }
  .print-card { max-width: 480px; margin: 0 auto; padding: 34px 28px; page-break-after: always; border: 1px solid #ddd; border-radius: 10px; }
  .print-card .wish-text { font-family: var(--font-hand); font-size: 19px; line-height: 1.7; white-space: pre-wrap; }
  .print-card .from-line { font-family: var(--font-hand); font-size: 17px; font-weight: 700; text-align: right; }
  .print-card .date-line,.print-card .print-gift { color: #777; font-size: 10px; text-align: right; }
  .print-card img { max-width: 220px; margin: 10px auto; }
}

.noscript { padding: 40px 20px; text-align: center; }

@media (min-width: 760px) {
  body { padding-top: 54px; }
  .demo-ribbon { min-height: 54px; padding-inline: 22px; }
  .scene { min-height: calc(100dvh - 54px); padding-top: 36px; }
  .welcome-wrap { grid-template-columns: minmax(0,1fr) minmax(320px,.9fr); gap: 12px 34px; align-items: center; text-align: left; }
  .welcome-copy { justify-items: start; }
  .welcome-copy h1 { max-width: 15ch; }
  .feature-peek { grid-column: 1/-1; justify-self: center; }
  .showcase-envelope { grid-column: 2; grid-row: 1; }
  .tap-hint { grid-column: 2; grid-row: 2; align-self: start; }
  .welcome-actions,.text-link,.safe-note { grid-column: 1/-1; justify-self: center; text-align: center; }
  .welcome-actions { width: 450px; }
  .page-top,.book-top { padding-top: 34px; }
  .wish-env { width: 166px; height: 114px; }
}

@media (max-width: 520px) {
  .demo-ribbon-copy > span:last-child { display: none; }
  .demo-text-btn { padding-inline: 8px; font-size: 10px; }
  .demo-lead-btn { padding-inline: 8px; font-size: 10px; }
  .scene { padding-inline: 13px; }
  .welcome-actions { grid-template-columns: 1fr; width: min(100%,360px); }
  .wish-card,.confirm-card { padding-inline: 17px; border-radius: 21px; }
  .lead-feature-list { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .demo-dock a b { font-size: 8.5px; }
  .wish-env { width: 132px; height: 94px; }
  .same-device-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mini-env,.burst-env { display: none; }
}