@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap');
/* Site theme: warm cream editorial look (script serif headlines, flower photo mood, paper cards).
   Loads after styles.css on the homepage and every generated landing page. */
:root { --st-wine: #7a1f3d; --st-ink: #2e1520; --st-soft: #5b4048; --st-cream: #faf3e8; --st-paper: #fffaf1; --st-line: rgba(122,31,61,.14); }

/* ---------- Homepage ---------- */
body:has(.home-hero) { background: linear-gradient(180deg, #faf3e8 0%, #f1e6d6 100%) !important; color: var(--st-ink); }
html:has(.home-hero) { background: #f4eadb !important; }
body:has(.home-hero) .giftcraft-dynamic-bg { display: none !important; }
.home-hero { position: relative; }
.home-hero::before { content: ''; position: absolute; z-index: -1; top: -120px; bottom: -40px; left: 50%; width: 100vw; margin-left: -50vw;
  background: linear-gradient(180deg, rgba(250,243,232,.9), rgba(250,243,232,.8) 70%, #faf3e8), url(/img/scene/peonies.webp?v=2) center / cover no-repeat; filter: saturate(1.05); }
.home-eyebrow { color: #8a3a50 !important; letter-spacing: .26em; font-weight: 700; }
.home-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; color: var(--st-ink) !important; letter-spacing: -.01em; line-height: 1 !important; font-size: clamp(46px, 8vw, 88px) !important; }
.home-title em { color: var(--st-wine) !important; font-style: italic; font-weight: 500; }
.home-lede, .home-note, .home-seal-hint { color: var(--st-soft) !important; }
.home-tagline { color: var(--st-ink) !important; font-family: 'Cormorant Garamond', serif; }
.home-tagline em { color: var(--st-wine) !important; }
.home-seal-stage { position: relative; }
.home-seal-stage::before, .home-seal-stage::after { content: ''; position: absolute; z-index: 6; pointer-events: none; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(8px 12px 10px rgba(60,20,30,.35)); }
.home-seal-stage::before { width: 150px; height: 225px; left: 4%; bottom: 40px; background-image: url(/img/scene/sprig-rose.svg); transform: rotate(-62deg); }
.home-seal-stage::after { width: 120px; height: 180px; right: 4%; top: 6px; background-image: url(/img/scene/sprig-peony.svg); transform: rotate(120deg); }
.home-env-back { box-shadow: 0 40px 50px -24px rgba(60,20,30,.5), 0 10px 16px -6px rgba(60,20,30,.25); }

/* ---------- Cards and sections (homepage) ---------- */
.hp-path, .hmw-grid a { background: var(--st-paper) !important; border: 1px solid var(--st-line) !important; color: var(--st-ink) !important; box-shadow: 0 24px 40px -28px rgba(90,40,50,.45); }
.hp-path b, .hmw-grid a b { color: var(--st-ink) !important; font-family: 'Cormorant Garamond', serif; font-size: 1.35em; font-weight: 700; }
.hp-path span, .hmw-grid a span { color: var(--st-soft) !important; }
.hp-path em, .hmw-grid a em { color: var(--st-wine) !important; }
.home-h2, .home-how h2, .home-faq h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; color: var(--st-ink) !important; font-weight: 600; }
.home-link, .hmw-sub { color: var(--st-wine) !important; }
.home-how, .home-faq, .home-how *, .home-faq * { color: var(--st-ink); }
.home-how p, .home-faq p, .home-faq summary + * { color: var(--st-soft); }
.home-how, .home-faq, .home-more-ways, .home-paths { background: transparent !important; }

/* ---------- Generated landing pages ---------- */
body.pg { background: #faf3e8; }
body.pg h1, body.pg h2, body.pg h3, body.pg .serif { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; letter-spacing: -.005em; color: var(--st-ink); }
body.pg h1 { font-size: clamp(44px, 7vw, 76px) !important; line-height: 1.02 !important; font-weight: 500 !important; }
body.pg main > section:first-of-type { position: relative; background: linear-gradient(180deg, rgba(250,243,232,.9), rgba(250,243,232,.78) 75%, #faf3e8), url(/img/scene/peonies.webp?v=2) center / cover no-repeat; }
body.pg a.btn, body.pg .btn, body.pg a[class*="btn"] { border-radius: 999px; }
body.pg section[style*="--paper"], body.pg section[style*="var(--paper)"] { background: var(--st-paper) !important; }
body:has(.home-hero) h1, body:has(.home-hero) h2, body:has(.home-hero) h3, body:has(.home-hero) .home-title, body:has(.home-hero) .home-title em, body:has(.home-hero) .home-h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; }
body:has(.home-hero) h1.home-title { font-weight: 500 !important; font-size: clamp(50px, 8.5vw, 96px) !important; }
body:has(.home-hero) .hp-path b, body:has(.home-hero) .hmw-grid a b { font-family: 'Cormorant Garamond', serif !important; }
body:has(.home-hero) .home-cta-primary { background: var(--st-wine) !important; color: #fff !important; border: 0 !important; border-radius: 999px; box-shadow: 0 14px 28px -12px rgba(122,31,61,.6); }
body:has(.home-hero) .home-cta-ghost { background: rgba(255,250,241,.7) !important; color: var(--st-wine) !important; border: 1px solid rgba(122,31,61,.35) !important; border-radius: 999px; }
body:has(.home-hero) footer { background: #2e1520 !important; }
body:has(.home-hero) .hm-rev b, body:has(.home-hero) .home-more button, body:has(.home-hero) .home-more button * { color: var(--st-ink) !important; }
body:has(.home-hero) .hm-rev span, body:has(.home-hero) .hm-rev figcaption, body:has(.home-hero) p.home-more { color: var(--st-soft) !important; }
body:has(.home-hero) .sh-link { color: var(--st-wine) !important; }
body:has(.home-hero) .home-more button { font-family: 'Cormorant Garamond', serif !important; font-size: 1.25em; border-color: var(--st-line) !important; }

/* ---------- Homepage extras (home-extras.js) ---------- */
.hx-props { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hx-vinyl { position: absolute; width: 58%; aspect-ratio: 1; left: -22%; top: -6%; border-radius: 50%; background-size: 230%; background-position: 14% 38%; box-shadow: 0 24px 40px -14px rgba(40,15,20,.6), inset 0 0 0 10px rgba(20,10,12,.9); animation: hx-spin 18s linear infinite; }
@keyframes hx-spin { to { transform: rotate(360deg); } }
.hx-pol { position: absolute; width: 30%; background: #fff; padding: 6px 6px 22px; box-shadow: 0 16px 26px -10px rgba(40,15,20,.55); }
.hx-pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.hx-pol1 { right: -6%; top: -22%; transform: rotate(9deg); } .hx-pol2 { right: 14%; top: -34%; transform: rotate(-7deg); }
.home-seal-stage > :not(.hx-props) { position: relative; z-index: 2; }
.hx { max-width: 1100px; margin: 0 auto; padding: 72px 20px 24px; position: relative; z-index: 20; color: var(--st-ink); }
.hx-eye { font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #8a3a50; margin: 0 0 14px; }
.hx h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500; font-size: clamp(38px, 6vw, 64px); line-height: 1.02; margin: 0 0 16px; color: var(--st-ink) !important; }
.hx h2 em { color: var(--st-wine); font-style: italic; }
.hx-sub { max-width: 640px; color: var(--st-soft); font-size: 17px; line-height: 1.6; margin: 0 0 30px; }
.hx-scenes { display: grid; gap: 18px; }
@media (min-width: 760px) { .hx-scenes { grid-template-columns: 1fr 1fr; } }
.hx-scenes figure { margin: 0; position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(60,20,30,.6); }
.hx-scenes img { display: block; width: 100%; height: 340px; object-fit: cover; }
.hx-scenes figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; color: #fff; font: 600 20px 'Cormorant Garamond', serif; background: linear-gradient(transparent, rgba(30,10,16,.75)); }
.hx-rail { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 22px; scroll-snap-type: x mandatory; }
.hx-card { flex: 0 0 min(260px, 72vw); scroll-snap-align: start; background: var(--st-paper); border: 1px solid var(--st-line); border-radius: 20px; padding: 10px 10px 20px; box-shadow: 0 24px 40px -28px rgba(90,40,50,.5); }
.hx-card-img { height: 170px; border-radius: 14px; background-size: cover; background-position: center; }
.hx-n { display: block; margin: 14px 8px 4px; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; color: #9a7a3f; }
.hx-card h3 { margin: 0 8px 6px; font-family: 'Cormorant Garamond', serif !important; font-size: 26px; color: var(--st-ink); }
.hx-card p { margin: 0 8px; font-size: 14px; line-height: 1.5; color: var(--st-soft); }
.hx-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .hx-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .hx-grid { grid-template-columns: repeat(3, 1fr); } }
.hx-gift { display: block; background: var(--st-paper); border: 1px solid var(--st-line); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 26px 44px -30px rgba(90,40,50,.55); transition: transform .25s; }
.hx-gift:hover { transform: translateY(-4px); }
.hx-gift-img { height: 190px; background-size: cover; background-position: center; }
.hx-gift-body { padding: 18px 20px 22px; }
.hx-gift h3 { margin: 0 0 6px; font-family: 'Cormorant Garamond', serif !important; font-size: 28px; color: var(--st-ink); }
.hx-gift p { margin: 0 0 12px; color: var(--st-soft); font-size: 14.5px; line-height: 1.5; }
.hx-gift span { color: var(--st-wine); font-weight: 700; font-size: 14px; }
.hx-dates-row { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .hx-dates-row { grid-template-columns: repeat(4, 1fr); } }
.hx-date { background: var(--st-paper); border: 1px solid var(--st-line); border-radius: 20px; padding: 22px 18px; text-align: center; }
.hx-date b { display: block; font: 600 54px/1 'Cormorant Garamond', serif; color: var(--st-wine); }
.hx-date span { font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8a6a72; }
.hx-date h3 { margin: 6px 0 0; font-family: 'Cormorant Garamond', serif !important; font-size: 24px; color: var(--st-ink); }
body:has(.home-hero) .hx h2, body:has(.home-hero) .hx h2 em, body:has(.home-hero) .hx h3 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; }
body:has(.home-hero) .hx h2 em { font-style: italic; }
@media (max-width: 899px) { .home-seal-stage { padding-top: 90px; overflow: hidden; border-radius: 24px; } .hx-pol1 { right: -2%; top: -4%; } .hx-pol2 { right: 22%; top: -12%; } .hx-vinyl { left: -18%; top: 6%; } }
html body:has(.home-hero) .hx h2, html body:has(.home-hero) .hx h2 em { font-family: 'Cormorant Garamond', Georgia, serif !important; }
body:not([data-view="recipient"]) main .hx h2, body:not([data-view="recipient"]) main .hx h2 em, body:not([data-view="recipient"]) main .hx h3, body:not([data-view="recipient"]) main .home-hero h1.home-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; }
/* Hero props v2: photo prints instead of a cropped record */
.hx-vinyl { width: 34%; aspect-ratio: 4/5; border-radius: 4px; left: -12%; top: -10%; background-size: cover; background-position: 40% 40%; border: 6px solid #fff; border-bottom-width: 22px; box-shadow: 0 16px 26px -10px rgba(40,15,20,.55); transform: rotate(-9deg); animation: none; }
@media (max-width: 899px) {
  .home-seal-stage { padding-top: 24px; overflow: visible; border-radius: 0; }
  .hx-props { display: none; }
  .home-seal-stage::before { width: 90px; height: 135px; left: 2%; bottom: 30px; }
  .home-seal-stage::after { width: 80px; height: 120px; right: 2%; top: 10px; }
}
body:not([data-view="recipient"]) #app-root .hx h2, body:not([data-view="recipient"]) #app-root .hx h3, body:not([data-view="recipient"]) #app-root .home-h2, body:not([data-view="recipient"]) #app-root .home-how h2, body:not([data-view="recipient"]) #app-root .home-faq h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; }
body:not([data-view="recipient"]) #app-root .hx h2 { font-size: clamp(40px, 6vw, 66px) !important; line-height: 1.02 !important; }
body:not([data-view="recipient"]) #app-root .hx h2 em { font-weight: 500 !important; }
/* Full-width hero backdrop: lives on the body so no parent can clip it */
.home-hero::before { display: none !important; }
body:has(.home-hero) { background: linear-gradient(180deg, rgba(250,243,232,.86) 0, rgba(250,243,232,.78) 520px, #faf3e8 900px), url(/img/scene/peonies.webp?v=2) top center / 100% 900px no-repeat, #faf3e8 !important; }

/* ---------- Real photography (hero-table.jpg, prop-rose.png) ---------- */
body:has(.home-hero) { background: #faf3e8 !important; position: relative; }
body:has(.home-hero)::before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: min(960px, 100vw * .72 + 120px); background: url(/img/scene/lavender-land.webp?v=2) center top / cover no-repeat; transform: scaleX(-1); -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); pointer-events: none; }
body:has(.home-hero)::after { content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: min(960px, 100vw * .72 + 120px); background: linear-gradient(90deg, rgba(250,243,232,.78), rgba(250,243,232,.35) 52%, rgba(250,243,232,0) 75%); pointer-events: none; }
body:has(.home-hero) #app-root { position: relative; z-index: 10; }
.home-seal-stage::before { background-image: url(/img/scene/prop-rose.webp?v=2) !important; mix-blend-mode: multiply; filter: none !important; width: 210px !important; height: 210px !important; left: -2% !important; bottom: 10px !important; transform: rotate(-18deg) !important; }
.home-seal-stage::after { display: none !important; }
.hx-vinyl { display: none !important; }
@media (max-width: 899px) { .home-seal-stage::before { width: 130px !important; height: 130px !important; left: -4% !important; } body:has(.home-hero)::after { background: linear-gradient(180deg, rgba(250,243,232,.35), rgba(250,243,232,.78) 55%); } }

/* Landing pages: same photo behind the hero */
body.pg main > section:first-of-type { position: relative; isolation: isolate; background: #faf3e8 !important; overflow: hidden; }
body.pg main > section:first-of-type::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(/img/scene/hero-table.webp?v=2) center / cover no-repeat; transform: scaleX(-1); }
body.pg main > section:first-of-type::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(250,243,232,.9), rgba(250,243,232,.45) 55%, rgba(250,243,232,.1)); }
@media (max-width: 760px) { body.pg main > section:first-of-type::after { background: rgba(250,243,232,.82); } }
.home-seal-stage::before { left: -12% !important; bottom: 40px !important; width: 190px !important; height: 190px !important; }
.home-seal-stage::before { background-image: url(/img/scene/prop-rose-cut.webp?v=2) !important; mix-blend-mode: normal !important; filter: drop-shadow(6px 10px 8px rgba(60,25,30,.4)) !important; }

/* ---------- Builder polish ---------- */
.chap-steps { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; }
.chap-steps button { text-align: left; min-width: 0; }
.chap .grid.grid-cols-2 { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; }
.chap .grid.grid-cols-2 button .truncate, .chap .grid.grid-cols-2 button span { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; }
.chap .grid.grid-cols-2 button { min-height: 52px; line-height: 1.2; }
.studio-phone .mg-prop-b { right: 3% !important; top: -26% !important; width: 24% !important; }
.studio-phone .mg-prop-a { left: -4% !important; width: 32% !important; }

/* ---------- Light photo scenes: dark ink on the cream wreath ---------- */
.mg-ink-dark .recipient-envelope-stage h2::before { color: #7a4a5a !important; }
.mg-ink-dark .recipient-envelope-stage h2, .mg-ink-dark .recipient-envelope-stage h2 span { text-shadow: none !important; -webkit-text-fill-color: #5a1a30 !important; color: #5a1a30 !important; }
.mg-ink-dark .recipient-envelope-stage p, .mg-ink-dark .recipient-envelope-stage p span { color: #6b2a3f !important; text-shadow: none !important; }
.mg-ink-dark .recipient-envelope-stage > div:last-child button { background: #7a1f3d; }
.mg-ink-dark .home-env-hint, .mg-ink-dark .recipient-container .story-now-playing { color: #6b2a3f !important; }
.mg-ink-dark .recipient-container > div:first-child ~ .flex.items-center.justify-between, .mg-ink-dark .recipient-container > .flex.items-center.justify-between * { color: #5a1a30 !important; }
.mg-ink-dark .recipient-container .story-music-toggle-btn, .mg-ink-dark .recipient-container .story-play-pause-btn { background: rgba(255,250,242,.75) !important; border-color: rgba(122,31,61,.25) !important; }
.mg-ink-dark .story-progress-segment { background: rgba(122,31,61,.2) !important; } .mg-ink-dark .story-progress-fill { background: #7a1f3d !important; }
.mg-ink-dark .story-bottom-nav * { color: #5a1a30; }
.mg-ink-dark .recipient-envelope-stage button:not(#wax-seal-btn) { background: #7a1f3d !important; color: #fff !important; border: 0 !important; box-shadow: 0 12px 26px -10px rgba(122,31,61,.6) !important; }
.mg-ink-dark .recipient-envelope-stage button:not(#wax-seal-btn) * { color: #fff !important; }
html body.mg-ink-dark #recipient-dynamic-content .recipient-envelope-stage button:not(#wax-seal-btn), html body.mg-ink-dark main .recipient-envelope-stage button:not(#wax-seal-btn), html body.mg-ink-dark #app-root .recipient-envelope-stage button.rounded-full { background: #7a1f3d !important; background-color: #7a1f3d !important; color: #fff !important; border: 0 !important; }
html body.mg-ink-dark #app-root .recipient-envelope-stage button.rounded-full span { color: #fff !important; }
/* Sharp light photos: cream halo keeps the script readable over flowers */
html body.mg-ink-dark .recipient-envelope-stage h2, html body.mg-ink-dark .recipient-envelope-stage h2 span { text-shadow: 0 0 22px rgba(255,250,240,.98), 0 0 10px rgba(255,250,240,.95), 0 0 3px rgba(255,250,240,.9) !important; }
html body.mg-ink-dark .recipient-envelope-stage p, html body.mg-ink-dark .recipient-envelope-stage p span { text-shadow: 0 0 14px rgba(255,250,240,1), 0 0 6px rgba(255,250,240,.95), 0 0 2px rgba(255,250,240,.9) !important; font-weight: 600; }
html body.mg-ink-dark .recipient-envelope-stage h2::before { text-shadow: 0 0 10px rgba(255,250,240,1), 0 0 4px rgba(255,250,240,.9) !important; }
/* Table scene: start the cover in the calm middle of the photo, clear of the props at the top */
.studio-phone .recipient-envelope-stage { padding-top: 34%; }
@media (orientation: portrait) { body.mg-photo-on .recipient-envelope-stage { padding-top: 34vw; } }
/* Envelope sits smaller on the table, like a real one (about 80% of the screen width) */
.mg-photo-on .gatefold-envelope-scene { width: 82%; margin-left: auto; margin-right: auto; }
/* The scrim handles legibility now: soften the earlier glow */
html body.mg-ink-dark .recipient-envelope-stage h2, html body.mg-ink-dark .recipient-envelope-stage h2 span { text-shadow: 0 0 10px rgba(246,238,226,.6) !important; }
html body.mg-ink-dark .recipient-envelope-stage p, html body.mg-ink-dark .recipient-envelope-stage p span { text-shadow: none !important; }

/* Photographic wax seals (Gemini) replace the CSS seal on scenes */
body[data-seal] #wax-seal-btn { background-color: transparent !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; text-shadow: none !important; box-shadow: none !important; filter: drop-shadow(0 10px 12px rgba(40,15,20,.45)); }
body[data-seal] #wax-seal-btn * { opacity: 0; }
body[data-seal="burgundy"] #wax-seal-btn { background-image: url(/img/scene/seal-burgundy.webp?v=2) !important; }
body[data-seal="gold"] #wax-seal-btn { background-image: url(/img/scene/seal-gold.webp?v=2) !important; }
body[data-seal="blue"] #wax-seal-btn { background-image: url(/img/scene/seal-blue.webp?v=2) !important; }
body[data-seal] #wax-seal-btn { width: 104px !important; height: 104px !important; }
html body[data-seal] #app-root .recipient-envelope-stage #wax-seal-btn, html body[data-seal] #recipient-dynamic-content .recipient-envelope-stage #wax-seal-btn { background-color: transparent !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; border: 0 !important; color: transparent !important; box-shadow: none !important; }
html body[data-seal="burgundy"] #app-root .recipient-envelope-stage #wax-seal-btn { background-image: url(/img/scene/seal-burgundy.webp?v=2) !important; }
html body[data-seal="gold"] #app-root .recipient-envelope-stage #wax-seal-btn { background-image: url(/img/scene/seal-gold.webp?v=2) !important; }
html body[data-seal="blue"] #app-root .recipient-envelope-stage #wax-seal-btn { background-image: url(/img/scene/seal-blue.webp?v=2) !important; }
/* Seal colour picker recolours the photographed seal */
body[data-seal-tone="red"] #wax-seal-btn { filter: saturate(1.6) brightness(1.3) hue-rotate(-12deg) drop-shadow(0 10px 12px rgba(40,15,20,.45)); }
body[data-seal-tone="violet"] #wax-seal-btn { filter: hue-rotate(-70deg) saturate(1.3) drop-shadow(0 10px 12px rgba(40,15,20,.45)); }
body[data-seal-tone="green"] #wax-seal-btn { filter: hue-rotate(150deg) saturate(1.1) brightness(.95) drop-shadow(0 10px 12px rgba(40,15,20,.45)); }
body[data-seal-tone="black"] #wax-seal-btn { filter: saturate(0) brightness(.38) contrast(1.2) drop-shadow(0 10px 12px rgba(40,15,20,.45)); }
.mg-seal-note { margin: 6px 0 0; font-size: 13px; color: #6b4a55; }

/* ================= Moments (moments.js) ================= */
.mg-moment { text-align: center; padding: 22px 18px 20px !important; }
.mg-k { font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #8a3a50; margin: 0 0 6px; }
.mg-h { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.1 !important; margin: 0 0 10px; color: #3a1624; }
.mg-hint { font-size: 12px; color: #8a6a72; margin: 8px 0 0; }
/* What I love: bouquet */
.mg-bouquet { position: relative; height: 300px; margin: 4px auto 6px; max-width: 330px; }
.mg-fl { position: absolute; left: 50%; bottom: 0; width: 118px; transform-origin: 50% 96%; background: none; border: 0; padding: 0; cursor: pointer; transition: filter .25s, translate .25s; }
.mg-fl img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px rgba(60,25,30,.3)); }
.mg-fl:hover img, .mg-fl.on img { filter: drop-shadow(0 6px 5px rgba(60,25,30,.3)) brightness(1.08) saturate(1.15); }
.mg-fl.on { translate: 0 -10px; }
.mg-ribbon { position: absolute; left: 50%; bottom: 36px; width: 70px; height: 22px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(#a8325a, #7a1f3d); z-index: 40; box-shadow: 0 4px 8px rgba(60,20,30,.35); }
.mg-tag { position: relative; margin: 6px auto 0; max-width: 300px; background: #fffaf1; border: 1px solid rgba(122,31,61,.18); border-radius: 6px 6px 6px 18px; padding: 12px 16px 14px; box-shadow: 0 10px 18px -12px rgba(60,20,30,.5); }
.mg-tag-n { font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; color: #9a7a3f; text-transform: uppercase; }
.mg-tag p { margin: 4px 0 0; font: 500 19px/1.35 'Cormorant Garamond', Georgia, serif; color: #3a1624; }
/* Our story: herbarium page */
.mg-page { position: relative; background: #f6efe0; border-radius: 4px; padding: 16px 18px 18px 30px; box-shadow: inset 0 0 0 1px rgba(150,120,70,.2), 0 14px 22px -14px rgba(60,40,20,.55); min-height: 300px; }
.mg-holes { position: absolute; left: 9px; top: 18px; bottom: 18px; width: 7px; background: radial-gradient(circle, #cdbf9f 3px, transparent 3.5px) 0 0 / 7px 38px repeat-y; opacity: .9; }
.mg-pressed { display: block; width: 92px; margin: 0 auto 4px; filter: sepia(.35) saturate(.75) brightness(1.02); opacity: .92; transform: rotate(-4deg); }
.mg-label { display: inline-block; font: italic 12px 'Cormorant Garamond', serif; color: #6b4a55; background: #fffdf7; padding: 3px 9px; border-radius: 2px; box-shadow: 0 2px 4px rgba(60,40,20,.25); margin-bottom: 12px; }
.mg-story-t { font: 500 20px/1.45 'Cormorant Garamond', Georgia, serif; color: #3a2a24; margin: 4px 0 0; }
.mg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; font-size: 12px; color: #6b4a55; }
.mg-pager button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(122,31,61,.25); background: #fffaf1; color: #7a1f3d; font-size: 18px; cursor: pointer; }
.mg-pager button:disabled { opacity: .35; cursor: default; }
/* Our date: calendar page with a wreath */
.mg-cal { background: #f6efe0; border-radius: 4px; padding: 18px 12px 20px; box-shadow: inset 0 0 0 1px rgba(150,120,70,.2), 0 14px 22px -14px rgba(60,40,20,.55); }
.mg-cal-m { font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .3em; color: #8a3a50; margin: 0 0 6px; }
.mg-wreath { position: relative; width: 250px; height: 250px; margin: 6px auto 4px; }
.mg-ring-f { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; object-fit: cover; object-position: 50% 8%; margin: -29px 0 0 -29px; filter: drop-shadow(0 3px 3px rgba(60,25,30,.3)); }
.mg-day { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mg-day b { font: 500 84px/1 'Cormorant Garamond', serif; color: #7a1f3d; }
.mg-day span { font: italic 15px 'Cormorant Garamond', serif; color: #6b4a55; }
.mg-cal-t { font: italic 600 20px 'Cormorant Garamond', serif; color: #3a1624; margin: 6px 0 2px; }
.mg-cal-n { font: 700 12px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; color: #8a3a50; margin: 0; }
.mg-cal-p { margin: 8px 0 0; font-size: 13px; color: #6b4a55; }
/* Our dreams: torn strips + dandelion */
.mg-strips { display: grid; gap: 10px; margin: 10px 0 12px; }
.mg-strip { background: #fbf6ea; padding: 12px 16px; font: italic 500 19px/1.3 'Cormorant Garamond', serif; color: #3a2a24; box-shadow: 0 6px 10px -6px rgba(60,40,20,.5); clip-path: polygon(0 6%, 4% 0, 9% 5%, 15% 0, 22% 6%, 30% 1%, 38% 5%, 46% 0, 55% 5%, 63% 1%, 72% 6%, 80% 0, 88% 5%, 95% 1%, 100% 5%, 100% 94%, 96% 100%, 90% 95%, 82% 100%, 74% 94%, 66% 99%, 58% 95%, 48% 100%, 40% 94%, 30% 100%, 22% 95%, 14% 100%, 7% 95%, 0 100%); }
.mg-dandelion { position: relative; height: 190px; margin: 4px auto 6px; width: 200px; }
.mg-dstem { position: absolute; left: 50%; bottom: 0; width: 3px; height: 92px; margin-left: -1.5px; background: linear-gradient(#7aa070, #4f7a4a); border-radius: 2px; }
.mg-dhead { position: absolute; left: 50%; top: 6px; width: 120px; height: 120px; margin-left: -60px; }
.mg-seed { position: absolute; width: 2px; height: 46px; margin: -23px 0 0 -1px; background: linear-gradient(#fff, rgba(255,255,255,.2)); border-radius: 1px; transform-origin: 50% 100%; transform: translate(0,0) rotate(var(--a)) translateY(-26px); box-shadow: 0 -4px 0 1px rgba(255,255,255,.9); filter: drop-shadow(0 1px 1px rgba(60,40,20,.35)); }
.mg-dcore { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #a99a78; }
.mg-dandelion.blown .mg-seed { animation: mg-blow 5.5s ease-out forwards; }
@keyframes mg-blow { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--d) * 1.5), calc(var(--d) * -.7)) rotate(calc(var(--a) + 160deg)) translateY(-26px); } }
.mg-blow { margin-top: 8px; border: 0; border-radius: 999px; padding: 12px 24px; font: 700 14px 'Plus Jakarta Sans', sans-serif; background: #7a1f3d; color: #fff; cursor: pointer; box-shadow: 0 12px 22px -12px rgba(122,31,61,.7); }
/* Our song: record deck */
.mg-deck { position: relative; width: 250px; height: 250px; margin: 6px auto 4px; }
.mg-record { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #111 0 22%, transparent 22.5%), repeating-radial-gradient(circle, #1a1a1c 0 2px, #0b0b0c 2px 4px); box-shadow: 0 18px 28px -10px rgba(0,0,0,.6), inset 0 0 0 5px #222; display: flex; align-items: center; justify-content: center; }
.mg-record::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, rgba(255,255,255,.14), transparent 18%, transparent 50%, rgba(255,255,255,.1) 60%, transparent 75%); }
.mg-record.spin { animation: hx-spin 3.2s linear infinite; }
.mg-rlabel { position: relative; z-index: 2; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f6efe0 0 12%, #c0264a 13%); display: flex; align-items: center; justify-content: center; text-align: center; font: 700 8px/1.2 'Plus Jakarta Sans', sans-serif; color: #fff; padding: 6px; }
.mg-arm { position: absolute; right: -10px; top: -4px; width: 8px; height: 140px; background: linear-gradient(90deg, #b9b3a7, #efeadf, #b9b3a7); border-radius: 4px; transform-origin: 50% 8px; transform: rotate(-24deg); transition: transform .8s; box-shadow: 4px 6px 8px rgba(0,0,0,.3); }
.mg-arm.on { transform: rotate(8deg); }
/* Bottom bar: Back / grid / Next: name (on photo scenes) */
.mg-photo-on .story-bottom-nav { position: sticky; bottom: 12px; z-index: 50; background: rgba(255,250,242,.9); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 6px !important; box-shadow: 0 18px 34px -14px rgba(60,20,30,.55); grid-template-columns: auto 1fr auto !important; }
.mg-photo-on .story-bottom-nav > button { background: transparent !important; border: 0 !important; color: #5a1a30 !important; }
.mg-photo-on .story-bottom-nav > button:last-child { background: #7a1f3d !important; color: #fff !important; border-radius: 999px !important; display: flex; align-items: center; gap: 8px; padding: 8px 16px !important; text-align: left; }
.mg-next-k { font: 700 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.mg-next-n { font: 600 14px 'Cormorant Garamond', Georgia, serif; }
.mg-photo-on .story-bottom-nav > button:last-child { flex-wrap: wrap; row-gap: 0; }
.mg-grid-btn { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 22px; height: 22px; background: none; border: 0; padding: 2px; cursor: pointer; vertical-align: middle; margin-right: 6px; }
.mg-grid-btn i { background: #7a1f3d; border-radius: 2px; display: block; }
.mg-photo-on .story-bottom-nav span.text-white\/60 { color: #8a6a72 !important; }
.mg-sheet { position: fixed; inset: 0; z-index: 10001; background: rgba(30,12,18,.55); display: flex; align-items: flex-end; justify-content: center; }
.mg-sheet-in { width: min(480px, 100%); background: #fffaf1; border-radius: 22px 22px 0 0; padding: 18px 16px 22px; display: grid; gap: 8px; max-height: 80vh; overflow: auto; }
.mg-sheet-in button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(122,31,61,.14); background: #fff; font: 600 16px 'Cormorant Garamond', serif; color: #3a1624; cursor: pointer; }
.mg-sheet-in button b { width: 26px; height: 26px; border-radius: 50%; background: #f3e4e0; color: #7a1f3d; display: grid; place-items: center; font: 700 12px 'Plus Jakarta Sans', sans-serif; }
.mg-sheet-in button.on { border-color: #7a1f3d; background: #fdf1f0; }
.mg-sheet-in .mg-sheet-x { justify-content: center; background: #7a1f3d; color: #fff; border: 0; margin-top: 4px; }
/* Builder fields */
.mg-fields { background: linear-gradient(160deg, #fff8ef, #fdeee6); border: 1px solid rgba(122,31,61,.14); border-radius: 22px; padding: 18px; margin-bottom: 18px; }
.mg-fields h3 { margin: 0 0 4px; font: 500 24px 'Cormorant Garamond', serif; color: #4a1226; }
.mg-fp { margin: 0 0 12px; font-size: 13px; color: #6b4a55; }
.mg-f { display: block; margin-bottom: 12px; } .mg-f span { display: block; font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8a5a6a; margin-bottom: 5px; }
.mg-f textarea, .mg-f input { width: 100%; box-sizing: border-box; border: 1px solid rgba(122,31,61,.22); border-radius: 12px; padding: 10px 12px; font: 500 14px 'Plus Jakarta Sans', sans-serif; background: #fff; color: #3a1624; }
.mg-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

html body.mg-photo-on .story-bottom-nav { position: sticky; bottom: 12px; background: rgba(255,250,242,.94) !important; border: 1px solid rgba(255,255,255,.8) !important; border-radius: 999px !important; padding: 6px !important; backdrop-filter: blur(14px); }
html body.mg-photo-on .story-bottom-nav > button { background: transparent !important; border: 0 !important; color: #5a1a30 !important; box-shadow: none !important; }
html body.mg-photo-on .story-bottom-nav > button:last-child { background: #7a1f3d !important; color: #fff !important; }
html body.mg-photo-on .story-bottom-nav span { color: inherit; }
html body.mg-photo-on .story-bottom-nav > div span { color: #8a6a72 !important; }
html body.mg-ink-dark .recipient-container .text-white, html body.mg-ink-dark .recipient-container [class*="text-sky-200"], html body.mg-ink-dark .recipient-container [class*="text-slate-300"], html body.mg-ink-dark .recipient-container .story-now-playing { color: #5a1a30 !important; }
html body.mg-ink-dark .recipient-container .story-music-toggle-btn, html body.mg-ink-dark .recipient-container .story-play-pause-btn, html body.mg-ink-dark .recipient-container button[onclick*="closeRecipientEnvelope"] { background: rgba(255,250,242,.8) !important; color: #5a1a30 !important; border-color: rgba(122,31,61,.25) !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:not(:last-child), html body.mg-photo-on #app-root .story-bottom-nav > button:not(:last-child) span { color: #5a1a30 !important; }
html body.mg-photo-on #app-root .story-bottom-nav > div span { color: #8a6a72 !important; background: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:last-child, html body.mg-photo-on #app-root .story-bottom-nav > button:last-child span { color: #fff !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:last-child { background: #7a1f3d !important; }
html body.mg-ink-dark #app-root .recipient-container > div:nth-child(2), html body.mg-ink-dark #app-root .recipient-container > div:nth-child(2) * { color: #5a1a30 !important; }
html body.mg-ink-dark #app-root .recipient-container .story-progress-segment { background: rgba(122,31,61,.22) !important; }
.mg-strip { background: #f0e4cc !important; }
html body #app-root .mg-blow, html body #app-root .mg-blow * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.mg-seed { height: 58px !important; margin-top: -29px !important; width: 1.5px !important; background: linear-gradient(rgba(120,105,80,.15), #8a7c5e) !important; box-shadow: none !important; filter: none !important; overflow: visible; }
.mg-seed::before { content: ''; position: absolute; left: 50%; top: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, rgba(255,255,255,.85) 23% 40%, transparent 68%), repeating-conic-gradient(rgba(120,105,80,.6) 0 2deg, transparent 2deg 30deg); box-shadow: 0 0 6px rgba(255,255,255,.9); -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%); mask: radial-gradient(circle, #000 55%, transparent 72%); }
.mg-dcore { width: 18px !important; height: 18px !important; margin: -9px 0 0 -9px !important; background: radial-gradient(circle at 35% 35%, #c9b98f, #7d6c48) !important; }
.mg-dstem { height: 124px !important; background: linear-gradient(#6f9a64, #3f6a3b) !important; width: 4px !important; margin-left: -2px !important; }
.mg-dhead { filter: drop-shadow(0 1px 2px rgba(60,40,20,.25)); }
html body.mg-photo-on .story-bottom-nav > button:last-child { white-space: nowrap !important; flex-wrap: nowrap !important; max-width: 62%; overflow: hidden; }
.mg-next-n { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

/* Smoothness: skip rendering off-screen sections until needed, and keep image decode off the main thread */
.hx { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.hx img, .home-seal-stage img { decoding: async; }

/* ===== Motion: the table stays, the objects swap (paper rises, pieces arrive one by one) ===== */
.mg-photo-on .story-card-enter-next, .mg-photo-on .story-card-enter-prev { animation: none !important; }
.mg-photo-on .story-surprise-card { animation: mg-rise .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mg-rise { from { opacity: 0; transform: translateY(40px) scale(.94) rotate(-.8deg); } to { opacity: 1; transform: none; } }
@keyframes mg-fade { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes mg-popin { from { opacity: 0; scale: .2; translate: 0 44px; } 60% { opacity: 1; scale: 1.08; } to { opacity: 1; scale: 1; translate: 0 0; } }
.mg-fl { animation: mg-popin .7s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i, 0) * 110ms + 300ms); }
.mg-ribbon { animation: mg-fade .6s .2s both; } .mg-tag { animation: mg-fade .6s .9s both; }
.mg-pressed { animation: mg-popin .9s .35s cubic-bezier(.2,1,.3,1) both; } .mg-label { animation: mg-fade .6s .8s both; } .mg-story-t { animation: mg-fade .9s 1s both; }
.mg-ring-f { animation: mg-popin .6s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
.mg-day b { animation: mg-fade .9s 1.1s both; } .mg-cal-t, .mg-cal-n, .mg-cal-p { animation: mg-fade .8s 1.4s both; }
.mg-strip { animation: mg-fade .7s both; } .mg-strip:nth-child(1) { animation-delay: .35s; } .mg-strip:nth-child(2) { animation-delay: .65s; } .mg-strip:nth-child(3) { animation-delay: .95s; } .mg-strip:nth-child(n+4) { animation-delay: 1.2s; }
.mg-dandelion { animation: mg-fade 1s 1.3s both; } .mg-blow { animation: mg-fade .6s 1.6s both; }
.mg-record { animation: mg-fade .8s .3s both; } .mg-deck { animation: mg-popin .9s .25s both; }
.mg-opening { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 10002; padding: 8px 16px; border-radius: 999px; font: italic 600 15px 'Cormorant Garamond', Georgia, serif; color: #5a1a30; background: rgba(255,250,242,.94); box-shadow: 0 10px 22px -10px rgba(60,20,30,.5); animation: mg-chip 1.5s ease both; pointer-events: none; }
@keyframes mg-chip { 0% { opacity: 0; translate: 0 8px; } 20%, 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mg-photo-on .story-surprise-card, .mg-fl, .mg-ring-f, .mg-pressed, .mg-strip, .mg-deck, .mg-opening, .mg-ribbon, .mg-tag, .mg-label, .mg-story-t, .mg-day b, .mg-cal-t, .mg-cal-n, .mg-cal-p, .mg-dandelion, .mg-blow, .mg-record { animation: none !important; } }

/* ===== Homepage rhythm: day and night bands, demo, audience, reasons, price, open, closing ===== */
.hx-band { position: relative; z-index: 20; width: 100vw; margin-left: calc(50% - 50vw); }
.hx-band .hx { padding-top: 84px; padding-bottom: 84px; }
.hx-alt { background: rgba(239,228,212,.75); }
.hx-night { background: linear-gradient(rgba(24,14,9,.9), rgba(24,14,9,.94)), url(/img/scene/starry.webp?v=2) center / cover; color: #f6eadb; }
.hx-night .hx { color: #f6eadb; }
.hx-night .hx-eye { color: #d9b47c; }
body:not([data-view="recipient"]) #app-root .hx-night h2, body:not([data-view="recipient"]) #app-root .hx-night h2 em { color: #f6eadb !important; }
body:not([data-view="recipient"]) #app-root .hx-night h2 em { color: #f2d7a8 !important; }
.hx-night .hx-sub { color: #d3c1ad; }
.hx-night .hx-scenes figure { box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); }
.hx-cta { display: inline-block; margin: 0 0 26px; padding: 14px 28px; border-radius: 999px; background: #8e2433; color: #fff !important; font: 700 15px 'Plus Jakarta Sans', sans-serif; text-decoration: none; box-shadow: 0 16px 30px -14px rgba(142,36,51,.8); transition: transform .25s cubic-bezier(.22,.68,.31,1); }
.hx-cta:hover { transform: translateY(-2px); }
.hx-cta-2 { background: transparent; color: #8e2433 !important; border: 1px solid rgba(142,36,51,.5); box-shadow: none; }
.hx-night .hx-cta { background: #d9b47c; color: #2b1d16 !important; }
/* Arrival demo */
.hx-demo { display: grid; justify-items: center; gap: 14px; margin-top: 18px; }
.hx-env { position: relative; width: min(330px, 84vw); aspect-ratio: 3 / 2; margin-top: 90px; }
.hx-env-back, .hx-env-front { position: absolute; inset: 0; border-radius: 8px; }
.hx-env-back { background: linear-gradient(135deg, #e9dcc3, #d8c8a8); box-shadow: 0 40px 50px -24px rgba(0,0,0,.8); }
.hx-env-front { z-index: 4; background: linear-gradient(160deg, #f6eddc, #e6d8bd); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); border-radius: 8px; }
.hx-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 6; background: linear-gradient(#f1e5cc, #e3d3b3); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .8s cubic-bezier(.22,.68,.31,1), z-index 0s .35s; }
.hx-paper { position: absolute; left: 7%; right: 7%; top: 6%; height: 88%; z-index: 2; background: #fbf6ec; border-radius: 3px; padding: 14px 16px; color: #33231c; text-align: left; box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); transition: transform 1s .35s cubic-bezier(.22,.68,.31,1); overflow: hidden; }
.hx-paper .hx-from { font: 700 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #8e2433; margin: 0 0 4px; }
.hx-paper h3 { font: 400 30px/1 'Great Vibes', cursive !important; color: #8e2433; margin: 0 0 6px; }
.hx-paper p { font: 500 15px/1.4 'Cormorant Garamond', serif; margin: 0 0 6px; color: #33231c; }
.hx-paper .hx-sign { font: 400 22px 'Great Vibes', cursive; color: #8e2433; }
.hx-seal { position: absolute; z-index: 8; left: 50%; top: 52%; width: 82px; height: 82px; margin: -41px 0 0 -41px; border: 0; padding: 0; background: url(/img/scene/seal-burgundy.webp?v=2) center / contain no-repeat; cursor: pointer; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); transition: transform .3s, opacity .4s .1s; animation: hx-beat 2.2s ease-in-out infinite; }
@keyframes hx-beat { 50% { transform: scale(1.07); } }
.hx-demo.is-open .hx-seal { opacity: 0; pointer-events: none; animation: none; }
.hx-demo.is-open .hx-flap { transform: rotateX(180deg); z-index: 1; }
.hx-demo.is-open .hx-paper { transform: translateY(-62%) scale(1.14); z-index: 5; }
.hx-demo.is-open .hx-env-front { z-index: 4; }
.hx-demo.is-open .hx-env { margin-bottom: 70px; }
.hx-tap { color: #d9b47c; letter-spacing: .2em; text-transform: uppercase; font: 700 11px 'Plus Jakarta Sans', sans-serif; margin: 6px 0 0; }
.hx-demo.is-open .hx-tap { display: none; }
.hx-again { display: none; background: none; border: 1px solid rgba(242,215,168,.4); color: #f2d7a8; border-radius: 999px; padding: 9px 20px; font: 600 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.hx-demo.is-open .hx-again { display: inline-block; }
.hx-note { font-size: 12px; color: #a99683; margin: 0; }
/* Audience, reasons, pricing, open, closing */
.hx-who { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hx-wcard { background: var(--st-paper); border: 1px solid var(--st-line); border-radius: 20px; padding: 22px 22px 24px; box-shadow: 0 24px 40px -30px rgba(90,40,50,.5); }
.hx-wcard h3, .hx-why h3 { font-family: 'Cormorant Garamond', serif !important; font-size: 26px; font-weight: 600; margin: 0 0 6px; color: var(--st-ink); }
.hx-wcard p, .hx-why p { margin: 0; color: var(--st-soft); font-size: 15px; line-height: 1.55; }
.hx-why { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hx-why b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #8e2433; color: #fff; font: 700 14px 'Plus Jakarta Sans', sans-serif; margin-bottom: 12px; }
.hx-price { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hx-price > div { background: var(--st-paper); border: 1px solid var(--st-line); border-radius: 24px; padding: 28px; box-shadow: 0 30px 50px -34px rgba(90,40,50,.55); }
.hx-pk { font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #8a3a50; margin: 0 0 8px; }
.hx-pv { font: 500 54px/1 'Cormorant Garamond', serif; color: var(--st-ink); margin: 0 0 14px; }
.hx-pv small { font: 500 14px 'Plus Jakarta Sans', sans-serif; color: var(--st-soft); }
.hx-price ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.hx-price li { color: var(--st-soft); font-size: 15px; padding-left: 22px; position: relative; } .hx-price li::before { content: '\2713'; position: absolute; left: 0; color: #8e2433; font-weight: 700; }
.hx-openform { display: flex; gap: 10px; max-width: 520px; margin-top: 8px; }
.hx-openform input { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(242,215,168,.3); background: rgba(255,255,255,.07); color: #f6eadb; font: 500 15px 'Plus Jakarta Sans', sans-serif; }
.hx-openform input::placeholder { color: #a99683; }
.hx-openform button { padding: 14px 26px; border: 0; border-radius: 999px; background: #d9b47c; color: #2b1d16; font: 700 15px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.hx-err { color: #f0a0a0; font-size: 14px; margin: 12px 0 0; }
.hx-closing { text-align: center; } .hx-closing .hx-sub { margin-left: auto; margin-right: auto; } .hx-fine { font-size: 13px; color: var(--st-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) { .hx-seal { animation: none; } .hx-flap, .hx-paper { transition: none; } }

/* Example page: editorial demo bar instead of the navy panel */
#recipient-demo-bar-container > div { background: rgba(255,250,242,.92) !important; border: 1px solid rgba(122,31,61,.16) !important; color: #3a1624 !important; box-shadow: 0 20px 40px -26px rgba(60,20,30,.55) !important; border-radius: 22px !important; }
#recipient-demo-bar-container > div * { color: inherit; }
#recipient-demo-bar-container p, #recipient-demo-bar-container .text-slate-300 { color: #6b4a55 !important; }
#recipient-demo-bar-container > div > div:first-child > span:first-child { background: #7a1f3d !important; color: #fff !important; }
#recipient-demo-bar-container [class*="bg-white/10"] { background: rgba(122,31,61,.08) !important; border-color: rgba(122,31,61,.14) !important; }
#recipient-demo-bar-container button { color: #7a4a5a !important; background: transparent !important; box-shadow: none !important; }
#recipient-demo-bar-container button[class*="bg-white"], #recipient-demo-bar-container button[class*="from-amber"] { background: #7a1f3d !important; color: #fff !important; }
#recipient-demo-bar-container button[onclick*="studio"] { background: #7a1f3d !important; color: #fff !important; border-radius: 999px !important; }
#recipient-demo-bar-container [class*="emerald"], #recipient-demo-bar-container [class*="amber-500/25"] { background: rgba(142,36,51,.1) !important; color: #8e2433 !important; border-color: rgba(142,36,51,.25) !important; }
#recipient-demo-bar-container button[class*="text-white/"]:not([class*="from-amber"]):not([onclick*="studio"]) { background: transparent !important; color: #7a4a5a !important; }

/* ================= Builder: sleek, one calm column (like a stationery page, not a form) ================= */
.chap-bar { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 4px !important; margin-bottom: 8px; }
.chap-bar-row { display: none !important; }
body.mg-light .chap-bar .mg-progress { display: none; }
.chap-steps { gap: 10px !important; }
.chap-steps button { padding-top: 12px !important; font: 600 11px 'Plus Jakarta Sans', sans-serif !important; letter-spacing: .14em; text-transform: uppercase; }
.chap-steps button span { font-size: 11px !important; }
.chap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 4px 0 !important; }
body.mg-light .chap { box-shadow: none; border: 0; }
.chap-head { border: 0 !important; padding-bottom: 6px !important; }
.chap-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; font-size: clamp(44px, 4.6vw, 64px) !important; line-height: 1 !important; letter-spacing: -.01em; color: #2e1520 !important; }
.chap-intro { font-size: 16px !important; color: #6b4a55 !important; max-width: 520px; }
.chap input[type="text"], .chap input[type="date"], .chap textarea, .chap select { background: #f9f3e8 !important; border: 1px solid rgba(51,35,28,.2) !important; border-radius: 14px !important; padding: 14px 16px !important; font-size: 16px !important; color: #2e1520 !important; box-shadow: none !important; }
.chap input:focus, .chap textarea:focus { outline: none; border-color: #8e2433 !important; box-shadow: 0 0 0 3px rgba(142,36,51,.12) !important; }
.chap-fold { border-top: 1px solid rgba(51,35,28,.12); } .chap-fold-head { font-family: 'Cormorant Garamond', serif !important; font-size: 24px !important; }
/* Sticky bottom pill */
.chap-foot { position: sticky; bottom: 14px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 26px; padding: 8px !important; background: rgba(255,250,242,.92); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; box-shadow: 0 20px 40px -18px rgba(60,20,30,.5); }
.chap-back { background: transparent !important; border: 0 !important; color: #5a1a30 !important; padding: 12px 20px !important; font-weight: 600; }
.chap-next { background: #7a1f3d !important; color: #fff !important; border-radius: 999px !important; padding: 13px 24px !important; font-size: 14px !important; margin-left: auto; box-shadow: 0 10px 20px -10px rgba(122,31,61,.7); }
/* Round photo swatches for the looks */
.mg-picker { background: transparent !important; border: 0 !important; padding: 0 !important; }
.mg-looks { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important; gap: 14px 10px !important; }
.mg-look { background: none !important; border: 0 !important; box-shadow: none !important; color: #3a1624 !important; padding: 0 !important; gap: 8px !important; }
.mg-look-c { width: 68px; height: 68px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid #fffaf1; box-shadow: 0 0 0 1px rgba(122,31,61,.2), 0 10px 18px -8px rgba(60,20,30,.5); transition: transform .25s, box-shadow .25s; }
.mg-look.on .mg-look-c { box-shadow: 0 0 0 2px #7a1f3d, 0 12px 20px -8px rgba(122,31,61,.55); transform: scale(1.06); }
.mg-look-n { font: 600 12px 'Plus Jakarta Sans', sans-serif; text-align: center; }
.mg-look:hover .mg-look-c { transform: scale(1.06); }
.studio-preview { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body:not([data-view="recipient"]) #app-root .chap-title, body:not([data-view="recipient"]) #app-root .chap h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; }
.chap-fold-body, .chap-sec, .chap-fold-body > *, .chap-hint { background: transparent !important; box-shadow: none !important; }
.chap-hint { color: #6b4a55 !important; font-size: 14px !important; padding: 0 !important; }

/* ===== Opened gift: every moment on the same paper, no leftover dark/neon pieces ===== */
.mg-photo-on .story-surprise-card h3, .mg-photo-on .story-surprise-card h2 { text-transform: none !important; letter-spacing: 0 !important; font-size: clamp(30px, 8.4vw, 42px) !important; line-height: 1.08 !important; word-break: normal; overflow-wrap: break-word; }
.mg-photo-on .story-surprise-card [class*="uppercase"][class*="tracking"] { letter-spacing: .22em; }
.mg-photo-on .story-surprise-card [class*="bg-slate-900"], .mg-photo-on .story-surprise-card [class*="bg-slate-950"], .mg-photo-on .story-surprise-card [class*="bg-gray-900"] { background: #f3e9d8 !important; border: 1px solid rgba(122,31,61,.14) !important; box-shadow: none !important; color: #3a1624 !important; }
.mg-photo-on .story-surprise-card [class*="bg-slate-900"] *, .mg-photo-on .story-surprise-card [class*="bg-slate-950"] * { color: inherit; }
.mg-photo-on .story-surprise-card [class*="text-pink-"], .mg-photo-on .story-surprise-card [class*="text-cyan-"], .mg-photo-on .story-surprise-card [class*="text-amber-"], .mg-photo-on .story-surprise-card [class*="text-yellow-"], .mg-photo-on .story-surprise-card [class*="text-purple-"], .mg-photo-on .story-surprise-card [class*="text-sky-"], .mg-photo-on .story-surprise-card [class*="text-emerald-"] { color: #8e2433 !important; }
.mg-photo-on .story-surprise-card [class*="text-slate-300"], .mg-photo-on .story-surprise-card [class*="text-slate-400"], .mg-photo-on .story-surprise-card [class*="text-white/"] { color: #7a5a64 !important; }
.mg-photo-on .story-surprise-card button[class*="from-"], .mg-photo-on .story-surprise-card a[class*="from-"] { background: #7a1f3d !important; color: #fff !important; border: 0 !important; box-shadow: 0 12px 22px -12px rgba(122,31,61,.7) !important; }
.mg-photo-on .story-surprise-card [class*="from-amber"][class*="bg-gradient"], .mg-photo-on .story-surprise-card [class*="bg-amber-"], .mg-photo-on .story-surprise-card [class*="bg-yellow-"] { background-color: #f6edd9 !important; border-color: rgba(154,122,63,.35) !important; }
.mg-photo-on .story-surprise-card [class*="border-amber"], .mg-photo-on .story-surprise-card [class*="border-yellow"] { border-color: rgba(154,122,63,.35) !important; }
/* Demo bar: one slim row on phones */
@media (max-width: 640px) { #recipient-demo-bar-container > div { padding: 10px 12px !important; margin-bottom: 8px !important; } #recipient-demo-bar-container p { display: none; } #recipient-demo-bar-container > div > div:last-child { flex-wrap: nowrap; } }
html body #recipient-demo-bar-container button[class*="text-slate-300"] { background: transparent !important; color: #7a4a5a !important; }
html body #recipient-demo-bar-container button[class~="bg-white"], html body #recipient-demo-bar-container button[class*="from-amber"] { background: #7a1f3d !important; color: #fff !important; }
@media (max-width: 640px) { #recipient-demo-bar-container > div { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; } #recipient-demo-bar-container > div > div:first-child { width: auto !important; flex: 1; } #recipient-demo-bar-container > div > div:first-child span:last-child { display: none; } }

/* ===== Desktop table: open book, prints on the table, richer control pill ===== */
.mg-book { display: grid; grid-template-columns: 1fr; }
.mg-pg { position: relative; background: #f6efe0; padding: 18px 20px 20px 30px; box-shadow: inset 0 0 0 1px rgba(150,120,70,.2); }
.mg-pg-l { border-radius: 4px 4px 0 0; } .mg-pg-r { border-radius: 0 0 4px 4px; margin-top: -1px; box-shadow: inset 0 0 0 1px rgba(150,120,70,.2), 0 14px 22px -14px rgba(60,40,20,.55); }
.mg-page { display: none; }
@media (min-width: 900px) {
  .mg-photo-on .story-card-inner-holder { max-width: 980px; margin: 0 auto; }
  .mg-story.story-surprise-card { max-width: 920px; margin: 0 auto; padding: 18px !important; background: #7a1f3d !important; border-radius: 10px !important; box-shadow: 0 40px 70px -30px rgba(40,10,20,.7), 0 0 0 1px rgba(255,255,255,.12) inset !important; }
  .mg-book { grid-template-columns: 1fr 1fr; min-height: 380px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.2); background: #f6efe0; position: relative; }
  .mg-book::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; margin-left: -17px; background: linear-gradient(90deg, rgba(60,40,20,0), rgba(60,40,20,.18) 50%, rgba(60,40,20,0)); pointer-events: none; }
  .mg-pg { padding: 34px 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
  .mg-pg-l .mg-pressed { width: 150px; } .mg-pg-l { padding-left: 38px; } .mg-holes { display: none; }
  .mg-story-t { font-size: 23px; }
  .mg-story .mg-pager { color: #f6e9e4; margin-top: 12px; } .mg-story .mg-pager button { background: rgba(255,250,242,.14); color: #fff; border-color: rgba(255,255,255,.3); }
  .mg-table-photos.story-surprise-card { background: transparent !important; box-shadow: none !important; border: 0 !important; max-width: 1100px; margin: 0 auto; }
  .mg-table-photos .mg-k { color: #6b2a3f; text-shadow: 0 0 10px rgba(246,238,226,.9); margin-bottom: 18px; }
  .mg-prints { display: flex; justify-content: center; align-items: flex-start; gap: 18px; padding: 10px 0 30px; }
  .mg-print { margin: 0; flex: 1 1 0; max-width: 240px; background: #fffdf8; padding: 12px 12px 16px; box-shadow: 0 24px 34px -16px rgba(40,20,20,.6), 0 2px 4px rgba(0,0,0,.2); transform: rotate(var(--r)) translateY(var(--y)); animation: mg-popin .8s cubic-bezier(.2,1.1,.3,1) both; animation-delay: calc(var(--i) * 160ms + 250ms); transition: transform .3s; }
  .mg-print:hover { transform: rotate(0) translateY(-8px) scale(1.04); z-index: 5; }
  .mg-print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .mg-print figcaption { margin-top: 10px; font: italic 500 17px/1.25 'Cormorant Garamond', serif; color: #3a2a24; text-align: center; min-height: 42px; }
  .studio-phone .mg-prints { flex-wrap: wrap; gap: 10px; }
  .studio-phone .mg-print { max-width: 118px; padding: 7px 7px 9px; }
  .studio-phone .mg-print figcaption { font-size: 12px; min-height: 28px; margin-top: 6px; }
}
.mg-nav-name, .mg-dots, .mg-nav-n { display: none; }
.mg-photo-on .story-bottom-nav > div > span.text-\[10px\] { display: none; }
.mg-photo-on .mg-nav-name { display: block; font: 600 15px 'Cormorant Garamond', serif; color: #3a1624; }
.mg-photo-on .mg-dots { display: flex; justify-content: center; gap: 4px; margin-top: 3px; }
.mg-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(122,31,61,.2); } .mg-dots i.on { width: 16px; border-radius: 3px; background: #7a1f3d; } .mg-dots i.done { background: rgba(122,31,61,.55); }
.mg-photo-on .mg-nav-n { display: block; font: 600 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; color: #8a6a72; margin-top: 2px; }
@media (min-width: 900px) { html body.mg-photo-on #app-root .story-bottom-nav { max-width: 640px; margin: 14px auto 0; } }
html body.mg-photo-on #app-root .story-bottom-nav > div > span:not([class^="mg-"]) { display: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav > div { display: flex; flex-direction: column; align-items: center; }
.mg-photo-on .mg-grid-btn { display: none; }
@media (min-width: 900px) { html body.mg-photo-on #app-root .story-bottom-nav { max-width: 780px !important; } html body.mg-photo-on #app-root .story-bottom-nav > button:last-child { max-width: none; } }
@media (min-width: 900px) {
  html body.mg-photo-on .mg-story.story-surprise-card { background: #7a1f3d !important; background-image: none !important; }
  html body.mg-photo-on .mg-table-photos.story-surprise-card { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
}

/* ===== Desktop: objects sit straight on the table (no card), like a real tabletop ===== */
@media (min-width: 900px) {
  html body.mg-photo-on .mg-date.story-surprise-card, html body.mg-photo-on .mg-dreams.story-surprise-card, html body.mg-photo-on .mg-song.story-surprise-card, html body.mg-photo-on .mg-love.story-surprise-card { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; }
  .mg-moment .mg-k { color: #7a2438; text-shadow: 0 0 12px rgba(246,238,226,.95); }
  .mg-moment .mg-h { text-shadow: 0 0 16px rgba(246,238,226,.95); font-size: 44px !important; }
  /* Calendar sheet with a deckled top edge and a tight wreath */
  .mg-date { filter: drop-shadow(0 30px 30px rgba(40,20,20,.35)); }
  .mg-cal { width: 360px; margin: 0 auto; padding: 34px 20px 28px; clip-path: polygon(0 3%, 3% 0, 7% 2.2%, 12% 0, 18% 2.6%, 25% .4%, 32% 2.4%, 40% 0, 48% 2.4%, 56% .6%, 64% 2.6%, 72% 0, 80% 2.4%, 88% .5%, 94% 2.4%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(#f8f2e4, #f1e8d4); box-shadow: none; }
  .mg-wreath { width: 270px; height: 270px; }
  .mg-ring-f { width: 74px; height: 74px; margin: -37px 0 0 -37px; filter: drop-shadow(0 3px 4px rgba(60,25,30,.35)); }
  .mg-ring-f:nth-child(odd) { z-index: 2; }
  .mg-day b { font-size: 104px; }
  .mg-cal-t { font-size: 24px; } .mg-cal-n { font-size: 15px; letter-spacing: .1em; } .mg-cal-n::before { content: ''; }
  /* Dreams: dandelion large on the left, wishes on torn strips on the right */
  .mg-dreams .mg-strips, .mg-dreams .mg-dandelion { }
  .mg-dreams.story-surprise-card { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-areas: 'k k' 'h h' 'd s' 'b s'; column-gap: 40px; max-width: 920px; margin: 0 auto; align-items: center; }
  .mg-dreams .mg-k { grid-area: k; } .mg-dreams .mg-h { grid-area: h; }
  .mg-dreams .mg-dandelion { grid-area: d; transform: scale(1.6); transform-origin: 50% 40%; margin: 40px auto 60px; }
  .mg-dreams .mg-strips { grid-area: s; margin: 0; }
  .mg-dreams .mg-blow { grid-area: b; justify-self: center; }
  .mg-strip { font-size: 22px; }
  /* Song: bigger record, centred on the table */
  .mg-deck { width: 340px; height: 340px; } .mg-arm { height: 190px; right: -20px; }
  /* Letter: landscape paper with gold corners */
  .mg-photo-on .story-card-inner-holder .story-surprise-card.dusty-blue-parchment, .mg-photo-on .story-card-inner-holder .story-surprise-card.luxury-stationery-card { max-width: 780px; margin: 0 auto; padding: 38px 56px !important; }
  html body.mg-photo-on .story-card-inner-holder .story-surprise-card::before { content: ''; position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-top: 2px solid #c9a45a; border-left: 2px solid #c9a45a; border-radius: 10px 0 0 0; opacity: .75; pointer-events: none; }
  html body.mg-photo-on .story-card-inner-holder .story-surprise-card::after { content: ''; position: absolute; bottom: 14px; right: 14px; width: 44px; height: 44px; border-bottom: 2px solid #c9a45a; border-right: 2px solid #c9a45a; border-radius: 0 0 10px 0; opacity: .75; pointer-events: none; }
}
@media (min-width: 900px) {
  html body.mg-photo-on #app-root .mg-date.story-surprise-card, html body.mg-photo-on #app-root .mg-dreams.story-surprise-card, html body.mg-photo-on #app-root .mg-song.story-surprise-card, html body.mg-photo-on #app-root .mg-love.story-surprise-card { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
  html body.mg-photo-on #app-root .mg-date.story-surprise-card::before, html body.mg-photo-on #app-root .mg-date.story-surprise-card::after, html body.mg-photo-on #app-root .mg-dreams.story-surprise-card::before, html body.mg-photo-on #app-root .mg-dreams.story-surprise-card::after, html body.mg-photo-on #app-root .mg-song.story-surprise-card::before, html body.mg-photo-on #app-root .mg-song.story-surprise-card::after, html body.mg-photo-on #app-root .mg-love.story-surprise-card::before, html body.mg-photo-on #app-root .mg-love.story-surprise-card::after { display: none !important; }
}

/* ===== Control dock: a gift tag between two round buttons (our own shape) ===== */
html body.mg-photo-on #app-root .story-bottom-nav { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 54px minmax(0, 1fr) 54px !important; align-items: center; gap: 12px; max-width: 560px !important; margin: 16px auto 0 !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button { width: 54px; height: 54px; min-width: 0; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center; justify-self: center; box-shadow: 0 12px 22px -10px rgba(60,20,30,.55) !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:first-child { background: #fffaf1 !important; color: #5a1a30 !important; border: 1px solid rgba(122,31,61,.2) !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:last-child { background: #7a1f3d !important; color: #fff !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:first-child span:last-child, html body.mg-photo-on #app-root .story-bottom-nav > button:last-child .mg-next-k, html body.mg-photo-on #app-root .story-bottom-nav > button:last-child .mg-next-n { display: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button span { font-size: 26px !important; line-height: 1; }
html body.mg-photo-on #app-root .story-bottom-nav > div { position: relative; background: #fffaf1; padding: 10px 22px 10px 34px; filter: drop-shadow(0 12px 14px rgba(60,20,30,.35)); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 66px; justify-content: center; }
html body.mg-photo-on #app-root .story-bottom-nav > div::before { content: ''; position: absolute; left: 15px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #d8c8a8; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
html body.mg-photo-on .mg-nav-name { font: 400 26px/1 'Great Vibes', cursive; color: #7a1f3d; }
html body.mg-photo-on .mg-nav-n { display: none; }
html body.mg-photo-on .mg-dots { margin: 6px 0 4px; gap: 5px; }
html body.mg-photo-on .mg-dots i { width: 6px; height: 6px; background: rgba(154,122,63,.35); }
html body.mg-photo-on .mg-dots i.done { background: #b99650; } html body.mg-photo-on .mg-dots i.on { width: 9px; height: 9px; background: radial-gradient(circle at 35% 30%, #c0264a, #7a1f3d); box-shadow: 0 0 0 2px rgba(122,31,61,.2); border-radius: 50%; }
.mg-nav-next { display: none; }
html body.mg-photo-on .mg-nav-next { display: block; font: 700 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8a6a72; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-name { font: 400 28px/1.05 'Great Vibes', cursive !important; color: #7a1f3d !important; letter-spacing: 0 !important; text-transform: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-dots { display: flex !important; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-dots i { display: block !important; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-next { font: 700 9px 'Plus Jakarta Sans', sans-serif !important; color: #8a6a72 !important; }
.hx-pol1 img { object-position: 50% 8%; }
.hx-pol2 img { object-position: 50% 40%; }

/* ================= Fix pass: calmer homepage, readable type, no cut edges, one theme system ================= */
/* Night bands: deep wine, not brown; less empty space */
.hx-night { background: linear-gradient(160deg, #2a1020 0%, #3b1630 55%, #1f0c19 100%) !important; }
.hx-band .hx { padding-top: 56px; padding-bottom: 56px; }
.hx-real .hx, .hx-arrival .hx { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 48px; align-items: center; }
.hx-real .hx > .hx-eye, .hx-real .hx > h2, .hx-real .hx > .hx-sub, .hx-real .hx > .hx-cta { grid-column: 1; }
.hx-real .hx > .hx-scenes { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
.hx-real .hx-scenes { gap: 14px; } .hx-real .hx-scenes img { height: 300px; }
.hx-arrival .hx > .hx-eye, .hx-arrival .hx > h2 { grid-column: 1; align-self: end; }
.hx-arrival .hx > .hx-demo { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.hx-arrival .hx-env { margin-top: 80px; }
@media (max-width: 899px) { .hx-real .hx, .hx-arrival .hx { display: block; } .hx-real .hx > .hx-scenes { margin-top: 20px; } }
/* How it works (ours) replaces the old block */
.home-how { display: none !important; }
.hx-steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hx-step { position: relative; }
.hx-step-img { height: 190px; border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 24px 40px -26px rgba(60,20,30,.6); }
.hx-step-n { position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 50%; background: #fffaf1; color: #7a1f3d; font: 700 14px 'Plus Jakarta Sans', sans-serif; display: grid; place-items: center; box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.hx-step h3 { font: 600 28px 'Cormorant Garamond', serif !important; margin: 16px 0 6px; color: var(--st-ink); }
.hx-step p { margin: 0; color: var(--st-soft); font-size: 15px; line-height: 1.55; }
/* Hero polaroids sit fully inside the picture, never cut off */
.home-seal-stage, .home-hero-grid, .home-hero { overflow: visible; }
.hx-pol1 { right: auto !important; left: 4% !important; top: -36% !important; width: 27% !important; transform: rotate(-7deg); }
.hx-pol2 { right: auto !important; left: 34% !important; top: -42% !important; width: 27% !important; transform: rotate(6deg); }
/* Builder: no stray white boxes behind fields */
.chap-fold-body div:not([class*="rounded-"]), .chap-fold-body .space-y-4, .chap-fold-body [class*="bg-white"]:not(button):not(input):not(textarea), .chap-fold-body [class*="bg-gray-50"], .chap-fold-body [class*="bg-slate-50"], .chap-fold-body [class*="bg-gradient"]:not(button), .chap-sec div:not([class*="rounded-"]) { background: transparent !important; background-image: none !important; box-shadow: none !important; }
.chap-fold-body > div > div[class*="rounded-"]:not(button) { box-shadow: none !important; }
.mg-ex { margin-left: 6px; border: 0; background: none; color: #7a1f3d; font: 700 13px 'Plus Jakarta Sans', sans-serif; text-decoration: underline; cursor: pointer; padding: 0; }
/* Readable type: script only for the name, serif italic for everything else */
.mg-photo-on .recipient-envelope-stage p, .mg-photo-on .recipient-envelope-stage p span { font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic !important; font-weight: 600 !important; font-size: 21px !important; letter-spacing: 0 !important; }
html body.mg-photo-on #app-root .story-surprise-card h2, html body.mg-photo-on #app-root .story-surprise-card h3, html body.mg-photo-on #app-root .mg-h { font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic !important; font-weight: 600 !important; font-size: clamp(28px, 7vw, 38px) !important; }
html body.mg-photo-on .mg-nav-name { font: italic 600 22px/1.1 'Cormorant Garamond', serif !important; }
/* Cards: soft frosted paper so the flowers behind show through, and nothing touches the phone edge */
html body.mg-photo-on #app-root .story-surprise-card:not(.mg-date):not(.mg-dreams):not(.mg-song):not(.mg-love):not(.mg-story):not(.mg-table-photos) { background: rgba(251,247,240,.5) !important; backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }
.studio-phone .recipient-container, .studio-phone #recipient-dynamic-content { padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box; }
.studio-phone .story-surprise-card { max-width: 100% !important; box-sizing: border-box; margin-left: auto; margin-right: auto; }
/* Dock: clean tag, status chip floats at the top instead of over the tag */
.mg-opening { bottom: auto !important; top: 78px; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-n { display: none !important; }
.chap .framer-card, .chap .framer-card-inner, .chap-fold-body .framer-card { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.chap-fold-body .framer-card > .space-y-6 > * + * { margin-top: 18px; }
/* Phone preview: header controls readable on light photo scenes */
html body.mg-ink-dark .studio-phone .story-progress-bar ~ div, html body.mg-ink-dark .studio-phone .story-progress-bar ~ div * { color: #5a1a30 !important; }
html body.mg-ink-dark .studio-phone .story-progress-segment { background: rgba(122,31,61,.22) !important; } html body.mg-ink-dark .studio-phone .story-progress-fill { background: #7a1f3d !important; }
html body.mg-ink-dark .studio-phone .story-music-toggle-btn, html body.mg-ink-dark .studio-phone .story-play-pause-btn, html body.mg-ink-dark .studio-phone button[onclick*="closeRecipientEnvelope"] { background: rgba(255,250,242,.8) !important; border-color: rgba(122,31,61,.25) !important; }
html body.mg-ink-dark .studio-phone .story-now-playing { color: #6b2a3f !important; }
/* Seasonal promo: slim strip on phones so it never covers the page */
@media (max-width: 640px) {
  aside.hwp { left: 10px !important; right: 10px !important; bottom: 10px !important; width: auto !important; max-width: none !important; padding: 10px 12px !important; border-radius: 16px !important; display: flex !important; align-items: center; gap: 10px; }
  aside.hwp p, aside.hwp .hwp-meta, aside.hwp .hwp-moon { display: none !important; }
  aside.hwp h3 { font-size: 14px !important; margin: 0 !important; flex: 1; line-height: 1.2; }
  aside.hwp .hwp-k { display: none !important; }
  aside.hwp .hwp-row { margin: 0 !important; }
  aside.hwp .hwp-go { padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; }
  aside.hwp .hwp-x { position: static !important; flex: none; }
}
html body.mg-photo-on #app-root .story-surprise-card button[class*="gradient"], html body.mg-photo-on #app-root .story-surprise-card button[class*="from-"], html body.mg-photo-on #app-root .story-surprise-card button[style*="gradient"] { background: #7a1f3d !important; background-image: none !important; color: #fff !important; box-shadow: 0 12px 22px -12px rgba(122,31,61,.7) !important; }

/* Phones: one paper dock instead of two navs; slim progress without an empty card */
@media (max-width: 1023px) {
  .chap-foot { display: none !important; }
  div.lg\:hidden.fixed.bottom-0 { background: rgba(255,250,242,.94) !important; border-top: 1px solid rgba(122,31,61,.14) !important; box-shadow: 0 -14px 30px -18px rgba(60,20,30,.45) !important; backdrop-filter: blur(14px); }
  div.lg\:hidden.fixed.bottom-0 button { box-shadow: none !important; }
  div.lg\:hidden.fixed.bottom-0 #mobile-dock-prev-btn { background: #fffaf1 !important; color: #5a1a30 !important; border: 1px solid rgba(122,31,61,.2) !important; }
  div.lg\:hidden.fixed.bottom-0 #mobile-dock-preview-btn { background: transparent !important; color: #7a1f3d !important; border: 1px solid rgba(122,31,61,.3) !important; }
  div.lg\:hidden.fixed.bottom-0 #mobile-dock-next-btn { background: #7a1f3d !important; color: #fff !important; }
  div.lg\:hidden.fixed.bottom-0 #mobile-dock-step-badge { background: rgba(122,31,61,.08) !important; color: #5a1a30 !important; border-color: rgba(122,31,61,.14) !important; }
  #studio-wizard-header-container, #studio-wizard-header-container > *, .chap-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; backdrop-filter: none !important; }
  .chap-steps button { padding-top: 10px !important; min-height: 0 !important; height: auto !important; }
}
@media (max-width: 1023px) {
  html body #app-root div.lg\:hidden.fixed.bottom-0, html body #app-root div[class*="fixed"][class*="bottom-0"][class*="inset-x-0"] { background: rgba(255,250,242,.96) !important; background-image: none !important; border-top: 1px solid rgba(122,31,61,.14) !important; }
  html body #app-root #mobile-dock-preview-btn { background: transparent !important; color: #7a1f3d !important; border: 1px solid rgba(122,31,61,.35) !important; }
  html body #app-root #mobile-dock-prev-btn { background: #fffaf1 !important; color: #5a1a30 !important; border: 1px solid rgba(122,31,61,.25) !important; }
  html body #app-root #mobile-dock-step-badge { background: rgba(122,31,61,.08) !important; color: #5a1a30 !important; }
}
/* The studio rule that painted every card ivory wins by specificity; beat it inside the builder column */
body[data-view="studio"] #app-root .chap :is(.framer-card, .bg-white\/95, .bg-white\/90, .bg-white):not(button):not(input):not(textarea):not(select) { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
body[data-view="studio"] #app-root .chap .chap-fold-body > .framer-card, body[data-view="studio"] #app-root .chap .framer-card { padding: 0 !important; }

/* Top bar stays readable over bright scene photos */
.story-top-bar { background: rgba(38,14,24,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 8px 6px 14px !important; }
.story-top-bar .text-sky-200 { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* The top bar is always a dark pill: keep its text light even when the scene uses dark ink */
html body.mg-ink-dark .story-top-bar,
html body.mg-ink-dark .story-top-bar :is(.text-white,[class*="text-sky-200"],[class*="text-slate-300"],button,span,div) { color: #fff !important; text-shadow: none !important; }
html body.mg-ink-dark .studio-phone .story-progress-bar ~ div.story-top-bar,
html body.mg-ink-dark .studio-phone .story-progress-bar ~ div.story-top-bar * { color: #fff !important; }

/* "Our story": reasons, how we began, our day and wishes as one frosted page */
.mg-onepage { max-height: max(380px, calc(100vh - 400px)); overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px !important; background: rgba(255,250,242,.72) !important; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); scrollbar-width: thin; }
.mg-onepage .mg-part { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 6px 0 !important; max-width: none !important; animation: none !important; text-align: center; }
.mg-onepage .mg-sep { border: 0; height: 1px; margin: 18px auto; width: 70%; background: linear-gradient(90deg, transparent, rgba(122,31,61,.28), transparent); }
.mg-onepage .mg-h { font-size: clamp(26px, 7vw, 34px) !important; }

/* Photos step: small thumbnails + an add tile instead of one huge card per photo */
.ph-count { margin: 0 0 12px; font-size: 14px; color: #7a6b72; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ph-tile { display: grid; gap: 6px; align-content: start; }
.ph-thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #efe4d4; box-shadow: 0 6px 14px -8px rgba(60,25,30,.4); }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(36,26,32,.7); color: #fff; font-size: 12px; cursor: pointer; }
.ph-rep { position: absolute; left: 6px; bottom: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(36,26,32,.7); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.ph-cap { width: 100%; height: 34px; padding: 0 10px; font: inherit; font-size: 13px; color: #241a20; background: #fff; border: 1px solid #e6d6c2; border-radius: 10px; }
.ph-back { color: #6b4a55; font-style: italic; }
.ph-add { aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 2px; border: 1.5px dashed #d8c3a5; border-radius: 14px; color: #7a1f3d; cursor: pointer; background: transparent; }
.ph-add:hover { background: #fbf3ea; border-color: #b98a5e; }
.ph-add span { font-size: 30px; line-height: 1; }
.ph-add small { font-size: 13px; font-weight: 700; }
html body.mg-photo-on #app-root .mg-onepage { max-height: max(440px, calc(100vh - 330px)); padding: 18px 16px 34px !important; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
html body.mg-photo-on #app-root .mg-onepage .mg-h { font-size: 26px !important; margin: 2px 0 !important; }
.mg-onepage .mg-bouquet { height: 230px; margin-top: 0; }
.mg-onepage .mg-fl { width: 92px; }
.mg-onepage .mg-hint { margin-top: 2px; }

/* Our story: one section at a time */
html body.mg-photo-on #app-root .mg-onepage { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 18px 16px 14px !important; }
.mg-onepage .mg-pane { display: none; }
.mg-onepage .mg-pane.on { display: block; animation: mg-fade .35s both; }
.mg-onepage .mg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(122,31,61,.18); }
.mg-onepage .mg-tabs button { font: 600 12px 'Plus Jakarta Sans', sans-serif; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(122,31,61,.25); background: rgba(255,255,255,.6); color: #5a1a30; cursor: pointer; }
.mg-onepage .mg-tabs button.on { background: #7a1f3d; border-color: #7a1f3d; color: #fff; }
html body #app-root .mg-onepage .mg-tabs button.on, html body #app-root .mg-onepage .mg-tabs button.on * { color: #fff !important; background-color: #7a1f3d; text-shadow: none !important; }
html body #app-root .mg-onepage .mg-tabs button:not(.on) { color: #5a1a30 !important; }

/* Photo prints turn over on tap to show the note on the back */
.mg-prints .mg-print { max-width: 230px !important; flex: 0 1 230px !important; cursor: pointer; perspective: 900px; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.mg-prints .mg-pf { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.8,.3,1); }
.mg-prints .mg-print.flipped .mg-pf { transform: rotateY(180deg); }
.mg-prints .mg-pf-f, .mg-prints .mg-pf-b { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fffdf8; padding: 12px 12px 16px; box-shadow: 0 24px 34px -16px rgba(40,20,20,.6), 0 2px 4px rgba(0,0,0,.2); }
.mg-prints .mg-pf-b { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-items: center; text-align: center; background: #f6efe0; }
.mg-prints .mg-pf-b p { margin: 0; font: italic 500 17px/1.35 'Cormorant Garamond', serif; color: #3a2a24; }
.studio-phone .mg-prints .mg-print { max-width: 150px !important; flex-basis: 150px !important; }
.studio-phone .mg-prints .mg-pf-f, .studio-phone .mg-prints .mg-pf-b { padding: 7px 7px 9px; }
.studio-phone .mg-prints .mg-pf-b p { font-size: 13px; }

/* Photo captions: never clipped */
.ph-cap { height: auto !important; min-height: 36px; padding: 8px 10px !important; line-height: 1.3; resize: none; overflow: hidden; }

/* Our story: no inner cream book, the text sits straight on the frosted page */
html body #app-root .mg-onepage .mg-book { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0 !important; grid-template-columns: 1fr !important; }
html body #app-root .mg-onepage .mg-book::after, .mg-onepage .mg-holes { display: none !important; }
html body #app-root .mg-onepage .mg-pg { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 6px 4px !important; display: grid; justify-items: center; }
html body #app-root .mg-onepage .mg-pg-l { padding-bottom: 0 !important; }
html body #app-root .mg-onepage .mg-pressed { width: 90px; }
html body #app-root .mg-onepage .mg-story-t { font-size: 21px !important; text-align: center; }

/* Our day: no cream sheet, the calendar wreath sits straight on the frosted page */
html body #app-root .mg-onepage .mg-cal { background: transparent !important; box-shadow: none !important; clip-path: none !important; border-radius: 0 !important; width: auto !important; padding: 4px 0 !important; }
html body #app-root .mg-onepage .mg-cal::before, html body #app-root .mg-onepage .mg-cal::after { display: none !important; }

/* Editor: no hard white boxes anywhere. Boxes and fields are soft translucent cream so the page colour shows through. */
html body[data-view] #app-root .chap-body :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select),
html body[data-view] #app-root .chap-body .framer-input { background-color: rgba(255,249,240,.55) !important; border-color: rgba(154,122,63,.28) !important; box-shadow: none !important; }
html body[data-view] #app-root .chap-body :is(textarea, input, select):focus { background-color: rgba(255,251,246,.8) !important; border-color: #9a7a3f !important; outline: none; }
html body[data-view] #app-root .chap-body :is(div, label, section, article, li, details)[class*="bg-white"], 
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-gray-"], 
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-slate-50"],
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-rose-50"],
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-amber-50"],
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-teal-50"],
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-purple-50"],
html body[data-view] #app-root .chap-body :is(div, label, section, article, li)[class*="bg-sky-50"],
html body[data-view] #app-root .chap-body .framer-card { background: rgba(255,249,240,.38) !important; border-color: rgba(154,122,63,.22) !important; box-shadow: none !important; }
html body[data-view] #app-root .chap-body .chap-fold, html body[data-view] #app-root .chap-body .chap-fold-body { background: transparent !important; }
html body[data-view] #app-root .chap-body :is(div, label, section, article, li):not(button):not(input):not(textarea):not(#_a):not(#_b):not(#_c)[class*="bg-"]:not([class*="bg-gradient"]):not([class*="bg-rose-5"]):not([class*="bg-rose-6"]):not([class*="bg-amber-5"]):not([class*="bg-amber-6"]),
html body[data-view] #app-root .chap-body .gf-toggle-row:not(#_a):not(#_b):not(#_c) { background: rgba(255,249,240,.38) !important; border-color: rgba(154,122,63,.22) !important; }
.mg-voice .mg-mic { font-size: 64px; line-height: 1; margin: 18px 0 14px; filter: drop-shadow(0 6px 8px rgba(60,25,30,.3)); }

/* Choice tiles (div role=button) keep a clear border and fill so they read as things to tap */
html body[data-view] #app-root .chap-body div[role="button"]:not(#_a):not(#_b):not(#_c) { background: rgba(255,250,244,.85) !important; border: 1.5px solid #dcc9ad !important; border-radius: 14px !important; color: #3a1624 !important; box-shadow: none !important; }
html body[data-view] #app-root .chap-body div[role="button"]:not(#_a):not(#_b):not(#_c):hover { border-color: #b98a5e !important; background: #fff !important; }
html body[data-view] #app-root .chap-body div[role="button"][class*="border-rose-5"]:not(#_a):not(#_b):not(#_c) { border-color: #7a1f3d !important; background: #f8e8eb !important; box-shadow: 0 0 0 3px rgba(122,31,61,.14) !important; }
html body[data-view] #app-root .chap-body div[role="button"] :is(span, p) { color: inherit !important; }
.mg-voice .mg-mic { filter: drop-shadow(0 8px 10px rgba(122,31,61,.35)); margin: 16px 0 12px; }
/* Phone bottom bar: the Next button wraps and shrinks instead of running off the screen */
.studio-phone .story-bottom-nav button.whitespace-nowrap, .studio-phone button.whitespace-nowrap.justify-self-end { white-space: normal !important; max-width: 42%; text-align: left; line-height: 1.2; padding: 8px 12px !important; font-size: 10px !important; justify-self: end; }
.studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] > * { min-width: 0; }
/* In the small phone the name of the next page is already shown under the dots, so the button only says Next */
.studio-phone .mg-next-n { display: none !important; }
.studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] button.justify-self-end { max-width: none; white-space: nowrap !important; }

/* Switches: a white knob that slides, plus an On / Off word so the state is obvious */
html body[data-view] #app-root .chap-body .studio-toggle-thumb:not(#_a):not(#_b) { background-color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }
html body[data-view] #app-root .chap-body .studio-toggle-track:not(#_a):not(#_b) { width: 46px; background-color: #d8c9b6 !important; }
.studio-toggle-switch { gap: 8px; }
.studio-toggle-switch::before { content: 'Off'; order: -1; font: 700 12px 'Plus Jakarta Sans', sans-serif; letter-spacing: .04em; color: #8a7a70; min-width: 22px; text-align: right; }
.studio-toggle-switch:has(.studio-toggle-input:checked)::before { content: 'On'; color: #7a1f3d; }
html body[data-view] #app-root .chap-body .studio-toggle-input:checked + .studio-toggle-track:not(#_a):not(#_b) { background-color: #7a1f3d !important; }

/* Spin the wheel: plain compact list, five shown, the rest on request */
.game-fold[data-game="spinner"] .gf-box .grid > div:nth-child(n+6) { display: none !important; }
.game-fold[data-game="spinner"] .gf-box .grid.all > div:nth-child(n+6) { display: flex !important; }
.game-fold[data-game="spinner"] .gf-box .grid > div > span { display: none !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div { border-bottom: 0 !important; padding: 4px 0 !important; gap: 8px !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid :is(input,textarea) { min-height: 42px !important; }
.gf-more { display: block; margin: 8px 0 0; padding: 4px 2px; border: 0; background: none; font: 700 14px 'Plus Jakarta Sans', sans-serif; color: #7a1f3d; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* The spin button in the preview always reads white on wine */
html body #app-root #spinner-btn, html body #app-root #spinner-btn * { color: #fff !important; text-shadow: none !important; opacity: 1 !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid:not(.all) > div:nth-child(n+6) { display: none !important; }

/* Send step: calm and quiet. A summary list instead of tiles, flat boxes, one clear button. */
html body[data-view] #app-root .chap-body .mg-watch { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 1.5px solid #7a1f3d !important; color: #7a1f3d !important; padding: 13px 18px !important; font-size: 17px !important; border-radius: 14px !important; margin-bottom: 14px !important; animation: none !important; }
html body[data-view] #app-root .chap-body .mg-watch:hover { background: #7a1f3d !important; color: #fff !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) > .framer-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 0; animation: none !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) > .framer-card > .border-b { display: none !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) > .framer-card > * + * { margin-top: 16px !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) > .framer-card > [class*="bg-gradient"] { background: transparent !important; background-image: none !important; border: 0 !important; border-top: 1px solid #e3d6c4 !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 0 !important; }
/* What's inside: label on the left, value on the right */
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 { display: block !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div { display: flex !important; align-items: baseline; justify-content: space-between; gap: 16px; background: transparent !important; border: 0 !important; border-bottom: 1px solid #efe4d4 !important; border-radius: 0 !important; padding: 9px 0 !important; box-shadow: none !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > * { font-size: 14px !important; margin: 0 !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > :first-child { color: #8a7a70 !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > :last-child { color: #241a20 !important; font-weight: 700 !important; text-align: right; }

/* Photos step: one row per photo (small picture, caption and back note beside it) and a slim add bar */
.ph-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.ph-tile { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; padding: 10px; border: 1px solid rgba(154,122,63,.22); border-radius: 16px; background: rgba(255,249,240,.38); }
.ph-tile .ph-thumb { grid-row: 1 / span 2; width: 96px; height: 96px; aspect-ratio: auto; border-radius: 12px; }
.ph-tile .ph-cap { grid-column: 2; }
.ph-tile .ph-x { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 10px; }
.ph-tile .ph-rep { left: 4px; bottom: 4px; padding: 2px 7px; font-size: 10px; }
.ph-add { aspect-ratio: auto !important; display: flex !important; flex-direction: row; justify-content: center; align-items: center; gap: 10px; height: 56px; }
.ph-add span { font-size: 24px !important; }

/* In the phone, the photo page sits on frosted glass like the other pages */
.studio-phone .mg-table-photos.story-surprise-card, html body.mg-photo-on #app-root .studio-phone .mg-table-photos.story-surprise-card { background: rgba(255,250,242,.55) !important; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(255,255,255,.55) !important; box-shadow: 0 18px 40px -22px rgba(60,25,30,.5) !important; }

/* Send: a keepsake page. One frosted sheet, serif type, a dotted "menu" of what's inside, a quiet price line. */
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) { background: rgba(255,250,242,.62); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(255,255,255,.6); border-radius: 26px; padding: 26px 28px 28px; box-shadow: 0 24px 50px -30px rgba(60,25,30,.45); }
html body[data-view] #app-root .chap-body .mg-watch { font: italic 600 22px 'Cormorant Garamond', Georgia, serif !important; border-width: 1px !important; border-color: rgba(122,31,61,.55) !important; border-radius: 999px !important; padding: 12px 22px !important; background: rgba(255,255,255,.35) !important; }
html body[data-view] #app-root .chap-body .send-name-nudge { background: transparent !important; border: 0 !important; padding: 0 !important; justify-content: center; text-align: center; gap: 12px; flex-wrap: wrap; }
html body[data-view] #app-root .chap-body .send-name-nudge span { font: italic 500 19px 'Cormorant Garamond', Georgia, serif !important; color: #5a3a46 !important; }
html body[data-view] #app-root .chap-body .send-name-nudge button { background: none !important; border: 0 !important; box-shadow: none !important; color: #7a1f3d !important; font: 700 14px 'Plus Jakarta Sans', sans-serif !important; text-decoration: underline; text-underline-offset: 3px; padding: 0 !important; }
/* what's inside as a menu with dotted leaders */
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) > .framer-card > [class*="bg-gradient"] { border-top: 0 !important; padding: 8px 0 0 !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) h4, html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) [class*="uppercase"][class*="tracking"] { font: 700 11px 'Plus Jakarta Sans', sans-serif !important; letter-spacing: .28em !important; color: #9a7a3f !important; text-align: center; display: block; margin-bottom: 4px; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div { border-bottom: 1px dotted rgba(122,31,61,.35) !important; padding: 10px 2px !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > * { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 19px !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > :first-child { font-style: italic; color: #7a5a66 !important; font-weight: 500 !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > :last-child { font-weight: 700 !important; color: #3a1624 !important; }
/* price + pay */
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: #5a3a46 !important; text-align: center; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) button[class*="from-amber"], html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) button[class*="bg-gradient"] { background: #7a1f3d !important; background-image: none !important; border-radius: 999px !important; font: 600 16px 'Plus Jakarta Sans', sans-serif !important; padding: 16px 24px !important; box-shadow: 0 14px 28px -14px rgba(122,31,61,.7) !important; }
/* Send menu: lining numerals (the old-style "1" looked like a letter) and room on both sides so nothing touches the edge */
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div { padding: 10px 14px !important; background: transparent !important; }
html body[data-view] #app-root .chap-body .chap-sec:has(.send-name-nudge) .grid.grid-cols-2 > div > :last-child { max-width: 70%; overflow-wrap: anywhere; }

/* Story dock, calmer: two round buttons and one frosted pill (no tag shape, no punched hole) */
html body.mg-photo-on #app-root .story-bottom-nav { display: flex !important; align-items: center; justify-content: center; gap: 14px; max-width: 560px !important; margin: 16px auto 0 !important; }
html body.mg-photo-on #app-root .story-bottom-nav > div { clip-path: none !important; filter: none !important; border-radius: 999px !important; background: rgba(255,250,242,.7) !important; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(255,255,255,.7) !important; box-shadow: 0 14px 30px -18px rgba(60,25,30,.5) !important; padding: 9px 30px !important; min-height: 0 !important; flex: 1; min-width: 0; }
html body.mg-photo-on #app-root .story-bottom-nav > div::before, html body.mg-photo-on #app-root .story-bottom-nav > div::after { display: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button { flex: none; width: 48px !important; height: 48px !important; border-radius: 50% !important; display: grid !important; place-items: center; padding: 0 !important; box-shadow: 0 10px 22px -12px rgba(60,25,30,.55) !important; clip-path: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:first-child { background: rgba(255,250,242,.85) !important; border: 1px solid rgba(255,255,255,.8) !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:first-child span:first-child, html body.mg-photo-on #app-root .story-bottom-nav > button:last-child > span[aria-hidden] { display: block !important; font-size: 28px !important; line-height: 1; color: inherit !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button:first-child span:last-child { display: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-name { font-size: 26px !important; }
/* Top bar: always a dark pill, so its words stay light */
html body.mg-photo-on #app-root .story-top-bar, html body.mg-photo-on #app-root .story-top-bar * { color: #fff !important; text-shadow: none !important; }
html body.mg-ink-dark #app-root .recipient-container > div.story-top-bar:nth-child(2), html body.mg-ink-dark #app-root .recipient-container > div.story-top-bar:nth-child(2) * { color: #fff !important; }

/* Start from an occasion: photo cards instead of a bare text list */
html body .home-occasions { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; border: 0 !important; background: none !important; }
@media (min-width: 900px) { html body .home-occasions { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; } }
html body .home-occasions button { position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 3px !important; aspect-ratio: 4 / 5; padding: 18px 16px !important; border: 0 !important; border-radius: 20px !important; background: #3a2a2e center / cover no-repeat !important; box-shadow: 0 22px 36px -24px rgba(60,25,30,.6); text-align: left; transition: transform .35s ease, box-shadow .35s ease; }
html body .home-occasions button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,12,18,0) 35%, rgba(30,12,18,.78) 100%); z-index: 0; transition: opacity .3s ease; }
html body .home-occasions button:hover { transform: translateY(-6px); box-shadow: 0 30px 44px -22px rgba(60,25,30,.7); }
html body .home-occasions button::after { content: '\2192'; position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,250,242,.85); color: #7a1f3d; opacity: 0; transform: translateX(-6px); transition: all .3s ease; transform-origin: center; top: 14px; margin: 0; }
html body .home-occasions button:hover::after { opacity: 1; transform: none; }
html body .home-occasions button > * { position: relative; z-index: 1; }
html body .home-occasions b { font: 600 22px 'Playfair Display', Georgia, serif !important; color: #fff !important; }
html body .home-occasions span { font-size: 13.5px !important; color: rgba(255,250,242,.86) !important; line-height: 1.35; }
html body .home-occasions button:nth-child(1) { background-image: url(/img/scene/peonies.webp) !important; }
html body .home-occasions button:nth-child(2) { background-image: url(/img/scene/birthday.webp) !important; }
html body .home-occasions button:nth-child(3) { background-image: url(/img/scene/polaroid.webp) !important; }
html body .home-occasions button:nth-child(4) { background-image: url(/img/scene/roses.webp) !important; }
html body .home-occasions button:nth-child(5) { background-image: url(/img/scene/pen.webp) !important; }
html body .home-occasions button:nth-child(6) { background-image: url(/img/scene/cherry.webp) !important; }
html body .home-occasions button:nth-child(7) { background-image: url(/img/scene/dinner.webp) !important; }
html body .home-occasions button:nth-child(8) { background-image: url(/img/scene/christmas.webp) !important; }
/* Also popular: soft pills */
html body .home-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 14px !important; color: #7a6b72 !important; margin-top: 10px !important; }
html body .home-more button { padding: 8px 16px !important; border: 1px solid rgba(154,122,63,.35) !important; border-radius: 999px !important; background: rgba(255,250,242,.6) !important; color: #5a1a30 !important; font-size: 13.5px !important; text-decoration: none !important; }
html body .home-more button:hover { background: #7a1f3d !important; color: #fff !important; border-color: #7a1f3d !important; }
html body #app-root .home-occasions button::before { background: linear-gradient(180deg, rgba(30,12,18,0) 25%, rgba(30,12,18,.55) 60%, rgba(30,12,18,.88) 100%) !important; }
html body #app-root .home-occasions button b, html body #app-root .home-occasions button:hover b { color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
html body #app-root .home-occasions button span { color: rgba(255,250,242,.92) !important; text-shadow: 0 1px 8px rgba(0,0,0,.45); }

/* Step bar: no grey/white box behind it, just the progress lines and labels on the page colour */
html body.mg-light .chap-bar, html body.mg-light #studio-wizard-header-container, html body.mg-light #studio-wizard-header-container > * { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; }
html body.mg-light .chap-bar { padding: 4px 4px 0 !important; margin-bottom: 18px !important; }
html body.mg-light .chap-steps { padding-top: 6px; }
/* Make room so the big heading below is never clipped */
html body[data-view] #app-root .chap-head { padding-top: 6px; overflow: visible; }
html body[data-view] #app-root .chap-title { line-height: 1.15 !important; padding-top: 4px; overflow: visible; }

/* Top menu: no grey capsule behind the links, just the links on the cream bar */
html body .framer-nav nav[class*="bg-slate"] { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html body .framer-nav nav[class*="bg-slate"] > button:not([class*="from-"]):not([class*="bg-rose"]):hover { background: rgba(122,31,61,.08) !important; }

/* Top bar: warm browns, golds and cream only. No cool greys. */
html body .framer-nav nav > button:not([class*="from-"]):not([class*="bg-rose"]) { color: #5a1a30 !important; }
html body .framer-nav > div > button:not([class*="from-"]), html body .framer-nav > div > div > button:not([class*="from-"]) { background: rgba(255,250,242,.8) !important; border: 1px solid rgba(154,122,63,.35) !important; color: #5a1a30 !important; }
html body .framer-nav button[class*="bg-white"], html body .framer-nav button[class*="border-slate"], html body .framer-nav button[class*="border-gray"] { background: rgba(255,250,242,.8) !important; border-color: rgba(154,122,63,.35) !important; color: #5a1a30 !important; }
html body .framer-nav [class*="text-slate"], html body .framer-nav [class*="text-gray"] { color: #6b4a55 !important; }
html body .framer-nav .framer-nav-sub, html body .framer-nav [class*="text-[9px]"], html body .framer-nav [class*="text-[10px]"] { color: #8a6a72 !important; }
html body .framer-nav button.btn-framer-primary { background: #7a1f3d !important; border: 0 !important; color: #fff !important; }
html body .framer-nav button.btn-framer-primary:not(#_a):not(#_b):not(#_c) { background: #7a1f3d !important; color: #fff !important; border: 0 !important; }

/* Night scenes: the page name, dots and "Next:" line go light so they can be read on the dark photo */
html body.mg-photo-on:not(.mg-ink-dark) #app-root .mg-nav-name, html body.mg-photo-on:not(.mg-ink-dark) .mg-nav-name { color: #fff3e0 !important; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .mg-nav-next, html body.mg-photo-on:not(.mg-ink-dark) #app-root .mg-nav-n, html body.mg-photo-on:not(.mg-ink-dark) .mg-nav-next { color: rgba(255,243,224,.82) !important; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .mg-dots { color: rgba(255,243,224,.9) !important; }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .story-bottom-nav > div { background: rgba(24,10,16,.55) !important; border-color: rgba(255,255,255,.18) !important; }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .story-bottom-nav > button:first-child { background: rgba(24,10,16,.55) !important; color: #fff3e0 !important; border-color: rgba(255,255,255,.2) !important; }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .story-bottom-nav > button:first-child span { color: #fff3e0 !important; }
/* The night tint is a touch lighter so the photo is not swallowed */

/* Night, phone dock: a real dark-glass pill so every word is readable, and a light Next button */
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] { background: rgba(20,8,14,.62) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 8px 10px !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] button:first-child { background: rgba(255,250,242,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.3) !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] button:last-child { background: #fff3e0 !important; color: #7a1f3d !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] button:last-child * { color: #7a1f3d !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] button:first-child * { color: #fff !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .grid[class*="grid-cols-[1fr_auto_1fr]"] span.font-bold { color: rgba(255,243,224,.85) !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .mg-dots i { background: rgba(255,243,224,.45) !important; }
html body.mg-photo-on:not(.mg-ink-dark) .studio-phone .mg-dots i.on { background: #fff3e0 !important; }

/* Night: pages become milky glass (light enough for their dark text), so nothing is lost on the dark photo */
html body.mg-photo-on:not(.mg-ink-dark) #app-root .story-surprise-card:not(.mg-table-photos) { background: rgba(255,248,238,.86) !important; backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05); }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .mg-onepage { background: rgba(255,248,238,.88) !important; }
html body.mg-photo-on:not(.mg-ink-dark) #app-root .story-surprise-card:not(.mg-table-photos):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) { background: rgba(255,248,238,.88) !important; }

/* Spin the wheel ideas: a cloud of small editable pills instead of a column of long rows */
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div, html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid:not(.all) > div:nth-child(n+6) { display: inline-flex !important; align-items: center; gap: 2px !important; padding: 2px 6px 2px 14px !important; margin: 0 !important; max-width: 100%; border: 1px solid rgba(154,122,63,.4) !important; border-radius: 999px !important; background: rgba(255,250,242,.7) !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div :is(textarea, input) { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 8ch; max-width: 100%; min-height: 0 !important; height: auto; padding: 8px 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; font-size: 14.5px !important; line-height: 1.3; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div > button { flex: none; width: 24px !important; height: 24px !important; font-size: 11px; color: #9a7a3f !important; }
.game-fold[data-game="spinner"] .gf-more { display: none !important; }
/* the add button becomes a pill too */
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-add { display: inline-flex !important; width: auto !important; margin-top: 12px; padding: 8px 18px !important; border-radius: 999px !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid { flex-direction: row !important; align-items: flex-start; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div { flex: 0 1 auto !important; width: auto !important; }

/* Spin the wheel ideas, final: quiet two-column list of plain lines. One line each, no pills, no white panel. */
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box, html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box > div { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid { display: grid !important; grid-template-columns: 1fr !important; column-gap: 36px !important; row-gap: 0 !important; }
@media (min-width: 900px) { html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid { grid-template-columns: 1fr 1fr !important; } }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div, html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid:not(.all) > div:nth-child(n+6) { display: flex !important; align-items: center; width: auto !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(154,122,63,.28) !important; border-radius: 0 !important; background: transparent !important; gap: 6px !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div :is(textarea, input) { field-sizing: fixed !important; flex: 1 1 auto; width: 100% !important; min-width: 0; height: 40px !important; min-height: 40px !important; padding: 9px 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis; resize: none; font-size: 15px !important; color: #241a20 !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div :is(textarea, input):focus { white-space: normal !important; overflow: visible !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div > button { opacity: .45; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid > div:hover > button { opacity: 1; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-add { margin-top: 16px; }

/* Treats & surprises: three small steps */
.treat-steps { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.treat-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid rgba(154,122,63,.35); border-radius: 999px; background: rgba(255,250,242,.6); color: #7a6b72; font: 600 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.treat-steps button i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(154,122,63,.18); color: #7a1f3d; font-style: normal; font-size: 12px; font-weight: 700; }
.treat-steps button.on { background: #7a1f3d; border-color: #7a1f3d; color: #fff; }
.treat-steps button.on i { background: rgba(255,255,255,.22); color: #fff; }
.treat-steps button.done i { background: #7a1f3d; color: #fff; }

/* Spin the wheel, designed: a short summary first, the full list only when you choose to edit */
.spin-sum { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(154,122,63,.3); border-radius: 18px; background: rgba(255,250,242,.55); }
.spin-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.spin-chips span { max-width: 100%; padding: 6px 12px; border-radius: 999px; background: rgba(122,31,61,.07); color: #3a1624; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spin-chips em { align-self: center; font-style: normal; font-weight: 700; font-size: 13px; color: #9a7a3f; }
.spin-edit { flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: #7a1f3d; color: #fff; font: 700 13.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.spin-sum.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.spin-sum.is-open .spin-chips { visibility: hidden; height: 0; }
.spin-sum.is-open { justify-content: flex-end; padding: 10px 14px; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid { display: none !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid.spin-open { display: block !important; border: 1px solid rgba(154,122,63,.3); border-top: 0; border-radius: 0 0 18px 18px; padding: 4px 16px 8px; background: rgba(255,250,242,.55) !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid.spin-open > div, html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid.spin-open:not(.all) > div:nth-child(n+6) { display: flex !important; width: 100% !important; align-items: flex-start; padding: 6px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(154,122,63,.2) !important; border-radius: 0 !important; background: none !important; background-image: none !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid.spin-open > div:last-child { border-bottom: 0 !important; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid.spin-open > div :is(textarea, input) { field-sizing: content !important; height: auto !important; min-height: 38px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; background: none !important; background-image: none !important; padding: 8px 0 !important; line-height: 1.35; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .gf-box .grid.spin-open > div > button { margin-top: 6px; opacity: .55; }
html body[data-view] #app-root .game-fold[data-game="spinner"] .spin-sum:not(.is-open) ~ .gf-add { display: none !important; }

/* Re-renders inside the same step are silent: nothing fades or floats in again, so a click never makes the screen flicker */
/* (The old blanket 'quiet' rule is gone: it restarted the drifting petals on every click so they all lined up. Redraws are smooth now through smooth.js.) */


/* ONE editor standard = the "Say what you really feel" look: no panel, plain labels above soft rounded fields. Every step uses it. */
html body[data-view] #app-root .chap-body :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):not(.ph-cap) { border: 1px solid rgba(154,122,63,.28) !important; border-radius: 16px !important; background: rgba(255,249,240,.6) !important; color: #241a20 !important; }
html body[data-view] #app-root .chap-body :is(textarea, input, select):focus { border-color: #7a1f3d !important; background: rgba(255,251,246,.9) !important; }
html body[data-view] #app-root .chap-body :is(label.block):not(.studio-toggle-switch):not(.ph-add):not(.ph-rep) { font: 600 14px 'Plus Jakarta Sans', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #5a3a46 !important; margin-bottom: 6px; }
html body[data-view] #app-root .chap-body > .chap-sec:not(:has(.send-name-nudge)) .framer-card, html body[data-view] #app-root .chap-body .chap-fold-body > div[class*="rounded-2xl"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* "Tell your story" uses the same look as "Say what you really feel": no panel, plain labels, soft rounded fields */
html body[data-view] #app-root .mg-fields { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 8px; }
html body[data-view] #app-root .mg-fields .mg-fp { margin: 0 0 18px; font-size: 15px; color: #7a6b72; }
html body[data-view] #app-root .mg-f { margin-bottom: 18px; }
html body[data-view] #app-root .mg-f span { font: 600 14px 'Plus Jakarta Sans', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #5a3a46 !important; margin-bottom: 6px; }
html body[data-view] #app-root .mg-f :is(textarea, input) { border: 1px solid rgba(154,122,63,.28) !important; border-radius: 16px !important; background: rgba(255,249,240,.6) !important; padding: 14px 16px !important; font: 500 16px 'Plus Jakarta Sans', sans-serif !important; color: #241a20 !important; }
html body[data-view] #app-root .mg-f :is(textarea, input):focus { border-color: #7a1f3d !important; background: rgba(255,251,246,.9) !important; outline: none; }
html body[data-view] #app-root .mg-f2 { gap: 14px; }

/* Calm preview: inside the builder's phone nothing re-plays its entrance when it is refreshed (typing, switching a section, toggling). Looping motion like petals is left alone. */
html body .studio-phone .story-surprise-card, html body .studio-phone .mg-fl, html body .studio-phone .mg-ring-f, html body .studio-phone .mg-pressed, html body .studio-phone .mg-strip, html body .studio-phone .mg-deck, html body .studio-phone .mg-ribbon, html body .studio-phone .mg-tag, html body .studio-phone .mg-label, html body .studio-phone .mg-story-t, html body .studio-phone .mg-day b, html body .studio-phone .mg-cal-t, html body .studio-phone .mg-cal-n, html body .studio-phone .mg-cal-p, html body .studio-phone .mg-print, html body .studio-phone .mg-opening { animation: none !important; opacity: 1 !important; translate: none !important; }
html body .studio-phone .mg-pane.on { animation: none !important; }

/* The builder re-draws parts of the page on each click; stop the browser from "helpfully" shifting the scroll position because of it */
html, body, .lovetale-wizard-container, .studio-live-preview-container { overflow-anchor: none; }

/* Page change in the preview: a quick soft fade, the phone itself stays put */
@keyframes mg-swapin { from { opacity: .0; } to { opacity: 1; } }
#simulator-viewport.mg-swap { animation: mg-swapin .22s ease both; }

/* Wordle: laptops type on the real keyboard, so the on-screen one only shows on touch screens */
.wordle-kb-hint { display: none; margin: 10px 0 0; text-align: center; font-size: 12.5px; color: #7a6b72; }
@media (hover: hover) and (pointer: fine) { .wordle-screen-kb { display: none !important; } .wordle-kb-hint { display: block; } }

/* Tighter steps: less empty space between heading, sections and fields */
html body[data-view] #app-root .chap-title { font-size: clamp(30px, 3.6vw, 42px) !important; line-height: 1.1 !important; }
html body[data-view] #app-root .chap-head { margin-bottom: 10px !important; }
html body[data-view] #app-root .chap-intro { margin-top: 6px !important; font-size: 15px !important; line-height: 1.45 !important; }
html body[data-view] #app-root .chap-fold-head { padding-top: 12px !important; padding-bottom: 12px !important; }
html body[data-view] #app-root .chap-fold-body { padding-bottom: 8px !important; }
html body[data-view] #app-root .chap-hint { margin: 0 0 10px !important; }
html body[data-view] #app-root .chap-body [class*="space-y-6"] > * + * { margin-top: 14px !important; }
html body[data-view] #app-root .chap-body [class*="space-y-5"] > * + *, html body[data-view] #app-root .chap-body [class*="space-y-4"] > * + * { margin-top: 12px !important; }
html body[data-view] #app-root .chap-body [class*="space-y-3"] > * + * { margin-top: 10px !important; }
html body[data-view] #app-root .chap-body :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):not(.ph-cap) { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px !important; }
.game-fold summary { padding-top: 12px !important; padding-bottom: 12px !important; }
html body[data-view] #app-root .game-fold .gf-box { padding-bottom: 8px !important; }
html body[data-view] #app-root .game-fold[data-game="quiz"] .gf-box [class*="rounded-xl"], html body[data-view] #app-root .game-fold[data-game="quiz"] .gf-box [class*="rounded-2xl"] { padding: 10px 12px !important; }
html body[data-view] #app-root .game-fold[data-game="quiz"] .gf-box .grid { gap: 8px !important; }

/* From the screen recording: option tiles (envelope colours, cover titles, presets) shrank to 95% while pressed and
   animated every border/colour change, so the text ghosted and the tile wobbled. They now change instantly and stay put. */
html body[data-view] #app-root .chap-body [class*="transition-all"], html body[data-view] #app-root .chap-body [class*="transition-colors"], html body[data-view] #app-root .chap-body [class*="transition-transform"] { transition: none !important; }
html body[data-view] #app-root .chap-body [class*="active:scale"]:active, html body[data-view] #app-root .chap-body [class*="hover:scale"]:hover { transform: none !important; scale: none !important; }
/* the "Active"/"Selected" badges must not change the tile's height */
html body[data-view] #app-root .chap-body [class*="active:scale"] > .flex:first-child { min-height: 24px; align-items: center; }

/* First page has no Back button: keep an empty slot the size of the round buttons so the tag stays centred and full width */
html body.mg-photo-on #app-root .story-bottom-nav > div.mg-nav-spacer { flex: none !important; width: 48px; height: 48px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-name { overflow-wrap: anywhere; text-align: center; }

/* Studio preview: same gift-tag dock as the real gift, but inside the phone, not pinned to the screen */
html body #app-root .studio-phone .story-bottom-nav.mg-embed-dock { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 5; margin: 10px auto 4px !important; padding: 0 !important; width: 100%; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Phones: the opened letter rises ~150px above the envelope, so leave room under "Watch it open." */
@media (max-width: 899px) { .hx-arrival .hx-env { transition: margin-top .5s ease, margin-bottom .5s ease; } .hx-arrival .hx-demo.is-open .hx-env { margin-top: 140px; margin-bottom: 8px; } .hx-arrival .hx-demo { gap: 10px; } }

/* Choose-the-gift cards: the table photos have their flowers along the edges, so show the top of the photo, not the empty middle */
.hx-gift-img { background-position: center top !important; }
@media (max-width: 899px) { .hx-gift-img { height: 210px; } }
/* Scene picker: show the whole table photo (flowers sit at its edges) instead of a round crop of the empty middle */
.mg-look-c { width: 64px; height: 92px; border-radius: 14px; background-position: center; }
.mg-looks { gap: 14px 10px !important; }

/* ============ Phone performance ============
   Live blur (backdrop-filter) over layers that move (falling petals, sticky bars) forces a repaint every frame on
   mid-range phones, and that was most of the stutter. On phones the panels get a slightly more solid fill instead,
   and the decorative particles are cut roughly in half. Desktop is unchanged. */
@media (max-width: 760px), (pointer: coarse) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html body.mg-photo-on #app-root .story-bottom-nav > div { background: rgba(255,250,242,.94) !important; }
  html body.mg-photo-on:not(.mg-ink-dark) #app-root .story-bottom-nav > div { background: rgba(38,16,26,.9) !important; }
  html body .framer-nav > div { background: rgba(255,250,242,.95) !important; }
  footer[class*="backdrop-blur"] { background: rgba(2,6,23,.96) !important; }
  .story-top-bar { background: rgba(38,14,24,.88); }
  body[data-view="recipient"] a[href="https://www.digitalgiftcraft.com"][rel~="noopener"] { background: rgba(38,16,26,.82) !important; }
  .mg-petal:nth-child(n+9), .mg-glow:nth-child(n+7), .particle-petal:nth-child(n+7), .hm-sparkles i:nth-child(n+7) { display: none !important; }
}

/* Phone dock: a slim, solid tag. The chapter name stays on one line (ellipsis if long) and the "Next:" line is dropped so the bar stops covering the page. */
@media (max-width: 760px) {
  html body.mg-photo-on #app-root .story-bottom-nav { gap: 10px; margin-top: 10px !important; }
  html body.mg-photo-on #app-root .story-bottom-nav > div:not(.mg-nav-spacer) { padding: 8px 18px 9px !important; min-width: 0; box-shadow: 0 10px 24px -14px rgba(60,25,30,.55) !important; }
  html body.mg-photo-on #app-root .story-bottom-nav > button, html body.mg-photo-on #app-root .story-bottom-nav > div.mg-nav-spacer { width: 44px !important; height: 44px !important; }
  html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-next { display: none !important; }
  html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-name { display: block; max-width: 100%; font-size: 24px !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.mg-photo-on #app-root .story-bottom-nav .mg-dots { margin-top: 2px; }
}

/* Styled confirm box (replaces the browser's confirm()) */
.dgc-confirm { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 20px; background: rgba(40,14,24,.5); }
.dgc-confirm-card { width: min(340px, 100%); background: #fffaf1; border-radius: 22px; padding: 24px 22px 20px; text-align: center; box-shadow: 0 30px 60px -20px rgba(40,10,20,.6); }
.dgc-confirm-card p { margin: 0 0 18px; font: 600 22px/1.25 'Cormorant Garamond', serif; color: #3a1624; }
.dgc-confirm-card div { display: flex; gap: 10px; }
.dgc-confirm-card button { flex: 1; border-radius: 999px; padding: 12px 14px; font: 700 14px 'Plus Jakarta Sans', sans-serif; cursor: pointer; border: 1px solid rgba(122,31,61,.3); background: transparent; color: #5a1a30; }
.dgc-confirm-card .dgc-confirm-yes { background: #7a1f3d; border-color: #7a1f3d; color: #fff; }

/* The question at the end of the gift: the one box that must not be missed */
.dgc-final-q { position: relative; margin-top: 8px; padding: 22px 18px 18px; border-radius: 22px; background: linear-gradient(155deg, #7a1f3d, #4a1128); color: #fff; box-shadow: 0 22px 36px -22px rgba(74,17,40,.8); }
.dgc-final-badge { position: absolute; top: -11px; left: 18px; padding: 4px 12px; border-radius: 999px; background: #e9c98a; color: #4a1128; font: 800 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.dgc-final-q h4 { margin: 0 0 4px; font: 600 26px/1.15 'Cormorant Garamond', serif; color: #fff; }
.dgc-final-q p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.82); }
.dgc-final-q input { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 0; background: #fffaf1; color: #3a1624; font: 600 16px 'Plus Jakarta Sans', sans-serif; }

/* "Also popular" links: a quiet label, then tidy small chips (no stray dots) */
html body .home-more .home-more-l { flex-basis: 100%; text-align: center; font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #8a6a72; }
@media (max-width: 760px) {
  html body .home-more { gap: 8px; margin-top: 18px; }
  html body .home-more button { padding: 7px 13px !important; font-size: 15px !important; line-height: 1.2; }
}

/* ============ Phone: a shorter homepage ============
   The page was about 16,000px (20 screens). Long stacks of cards become swipeable rows, and the gaps between sections shrink. */
@media (max-width: 760px) {
  .hx-band .hx { padding-top: 34px !important; padding-bottom: 34px !important; }
  .home-more-ways { padding-top: 24px !important; }
  /* Cards stay stacked (no sideways swiping), just shorter */
  .hx-gift-img { height: 150px !important; }
  .hx-gift-body { padding: 14px 18px 18px !important; }
  .hx-gift h3 { font-size: 26px !important; }
  .hx-step-img { height: 150px !important; }
  .hx-grid, .hx-who, .hx-why, .hx-steps, .hmw-grid { gap: 14px !important; }
}
@media (max-width: 760px) {
  .hx-date h3 { line-height: 1.1 !important; margin: 4px 0 0 !important; font-size: 24px !important; }
  .hx-date { padding-top: 14px !important; padding-bottom: 16px !important; }
  .hx-dates-row { gap: 10px !important; }
}
@media (max-width: 760px) { .home-occasions > button b { font-size: 21px !important; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; } }
html body #app-root .dgc-final-q { background: linear-gradient(155deg, #7a1f3d, #4a1128) !important; border: 0 !important; }
html body #app-root .dgc-final-q h4, html body #app-root .dgc-final-q p { color: #fff !important; }
html body #app-root .dgc-final-q p { color: rgba(255,255,255,.84) !important; }
html body #app-root .dgc-final-q input { background: #fffaf1 !important; color: #3a1624 !important; }

/* ============ Phone: smooth scrolling, no colour flashes, smaller dock, shorter footer ============ */
@media (max-width: 760px) {
  /* The photo backdrop is a fixed layer. Sizing it to the "large" viewport means it no longer resizes (and repaints the whole photo) every time the browser bar slides away, which was the stutter and the purple strip. */
  .giftcraft-dynamic-bg, .mg-scene.mg-full { bottom: auto !important; height: 120vh; height: 100lvh; transform: translateZ(0); }
  .giftcraft-dynamic-bg { contain: strict; }
  html:has(body.mg-photo-on.mg-ink-dark), body.mg-photo-on.mg-ink-dark { background-color: #efe3dc !important; }
  /* Per-petal drop shadows are filters on moving layers: costly, barely visible */
  .mg-petal, .mg-fly { filter: none !important; }

  /* Dock: one slim line */
  html body.mg-photo-on #app-root .story-bottom-nav { gap: 8px; margin-top: 6px !important; }
  html body.mg-photo-on #app-root .story-bottom-nav > div:not(.mg-nav-spacer) { padding: 6px 16px 7px !important; }
  html body.mg-photo-on #app-root .story-bottom-nav > button, html body.mg-photo-on #app-root .story-bottom-nav > div.mg-nav-spacer { width: 40px !important; height: 40px !important; }
  html body.mg-photo-on #app-root .story-bottom-nav > button span { font-size: 22px !important; }
  html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-name { font-size: 21px !important; line-height: 1.15 !important; }
  html body.mg-photo-on #app-root .story-bottom-nav .mg-dots { margin-top: 0; transform: scale(.85); }
  html body.mg-photo-on #app-root .story-bottom-nav .mg-nav-next { display: none !important; }

  /* Footer: two columns, one swipeable row for the extra links */
  footer.relative.z-30 { padding-top: 28px !important; padding-bottom: 18px !important; }
  footer.relative.z-30 > div.grid { grid-template-columns: 1fr 1fr !important; gap: 20px 14px !important; }
  footer.relative.z-30 > div.grid > div:first-child, footer.relative.z-30 > div.grid > div:last-child { grid-column: 1 / -1; }
  footer .ft-list li { margin: 0 0 6px !important; font-size: 13.5px; line-height: 1.3; }
  footer .ft-more { margin-top: 20px !important; gap: 6px !important; }
  footer .ft-more > a { padding: 5px 10px !important; font-size: 12px !important; }
}

@media (max-width: 760px) {
  /* "Twelve moments": a two-column grid instead of a sideways rail */
  .hx-rail { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; overflow: visible !important; padding: 4px 0 8px !important; scroll-snap-type: none; }
  .hx-card { flex: none !important; padding: 8px 8px 12px !important; border-radius: 16px !important; }
  .hx-card-img { height: 96px !important; border-radius: 11px !important; }
  .hx-card h3 { font-size: 20px !important; margin: 8px 4px 3px !important; }
  .hx-card p { font-size: 12.5px !important; line-height: 1.4 !important; margin: 0 4px !important; }
}
@media (max-width: 760px) {
  .hx-card-img { display: none !important; }
  .hx-card { padding: 12px 12px 14px !important; }
  .hx-gift-img { height: 120px !important; }
}

/* Last page: "Your turn" card readable on the photo; Replay is just the round ↺ button like the Next arrow */
html body.mg-photo-on #app-root .make-back { background: rgba(255,250,242,.95) !important; border: 1px solid rgba(154,122,63,.35) !important; box-shadow: 0 16px 30px -20px rgba(60,25,30,.55); }
html body.mg-photo-on #app-root .make-back-k { color: #9a7a3f !important; }
html body.mg-photo-on #app-root .make-back-t { color: #3a1624 !important; }
html body.mg-photo-on #app-root .make-back-s { color: #6b4a55 !important; }
html body.mg-photo-on #app-root .make-back-btn { background: #7a1f3d !important; color: #fff !important; }
html body.mg-photo-on #app-root .story-bottom-nav > button .mg-replay-t { display: none !important; }

/* ============ Phone: leave out sections that repeat or only decorate ============
   "Every way to say I love you" repeats the occasion picker, "A gift for every date" is a countdown with no action,
   "For the people who deserve more" and "Words that stay" repeat the pitch. The second row of tools under party games is cut too. */
@media (max-width: 760px) {
  .hx-band:has(> .hx > .hx-grid), .hx-band:has(> .hx > .hx-dates-row), .hx-band:has(> .hx > .hx-who), .hx-band:has(> .hx > .hx-why) { display: none !important; }
  .home-more-ways .hmw-grid ~ .hmw-sub, .home-more-ways .hmw-grid ~ .hmw-grid { display: none !important; }
  .home-more-ways .hmw-grid > a:nth-child(n+3) { display: none !important; }
}

/* The scene already draws its own petals and sparkles; the older emoji petal layer on top doubled the work and the clutter */
html body.mg-photo-on #occasion-atmosphere-overlay { display: none !important; }
/* The question card is dark wine, so its words must be light */
html body #app-root .proposal-ask-box :is(h1, h2, h3, h4, p, span, div):not(button):not(button *) { color: #fff !important; text-shadow: 0 1px 8px rgba(40,10,25,.35); }
html body #app-root .proposal-ask-box button, html body #app-root .proposal-ask-box button * { text-shadow: none; }
/* The cover title the sender picked ("Random Appreciation") sits under the names on the cover */
html body.mg-photo-on #app-root .env-cover-title { color: #7a1f3d !important; font-size: 21px; max-width: 320px; margin: 8px auto 0; }

/* Hero rose: the small cut-out had a white halo and looked pasted on. Use the full photograph and turn its white
   background transparent with a colour filter (the photo's own soft shadow stays, as a gentle semi-transparent shadow). */
.home-seal-stage::before { background-image: url(/img/scene/prop-rose-720.jpg?v=1) !important; background-size: contain !important; background-repeat: no-repeat !important; mix-blend-mode: normal !important; filter: url(#dgc-white-key) !important; }

/* Hero polaroids: they were placed as a percentage of the stage height, so on tall layouts they floated far above the envelope. Pin them just over its top edge. */
@media (min-width: 900px) {
  .hx-pol1 { top: -50px !important; left: 3% !important; width: 118px !important; }
  .hx-pol2 { top: -72px !important; left: 34% !important; width: 118px !important; }
}

/* "Our day" page: a postage-stamp date and a years / months / days counter (replaces the ring of flowers) */
.mg-cal-m { letter-spacing: .24em; text-transform: uppercase; }
.mg-stamp { position: relative; width: 190px; margin: 14px auto 18px; padding: 16px 12px 14px; text-align: center; background: #fffaf0; color: #7a1f3d; outline: 2px dashed rgba(122,31,61,.45); outline-offset: -9px; box-shadow: 0 10px 18px -12px rgba(60,25,30,.6); transform: rotate(-2deg); }
.mg-stamp i { display: block; font: italic 15px 'Cormorant Garamond', serif; color: #6b4a55; }
.mg-stamp b { display: block; font: 500 86px/1 'Cormorant Garamond', serif; margin: 2px 0; }
.mg-stamp span { display: block; font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #8a3a50; }
.mg-tiles { display: flex; justify-content: center; gap: 10px; margin: 4px 0 12px; }
.mg-tiles div { min-width: 70px; padding: 9px 8px 8px; border-radius: 12px; background: rgba(122,31,61,.07); border: 1px solid rgba(122,31,61,.16); text-align: center; }
.mg-tiles b { display: block; font: 500 34px/1 'Cormorant Garamond', serif; color: #3a1624; }
.mg-tiles span { display: block; margin-top: 3px; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a3a50; }
.mg-stamp, .mg-tiles { animation: mg-fade .8s .5s both; }
@media (min-width: 900px) { .mg-stamp { width: 230px; padding: 20px 14px 18px; } .mg-stamp b { font-size: 110px; } .mg-tiles div { min-width: 86px; } .mg-tiles b { font-size: 42px; } }

/* Landing pages: the hero photo runs edge to edge; the text keeps its normal width */
body.pg main > section:first-of-type.wrap { max-width: none; width: 100%; padding-left: max(20px, calc((100% - 1080px) / 2 + 20px)); padding-right: max(20px, calc((100% - 1080px) / 2 + 20px)); }

/* ======================================================================
   Homepage, new look: a midnight-garden hero (plum, gold, blossoms) over an ivory garden page.
   Centered layout, stationery-style cards, gold dividers. Landing pages keep their own look.
   ====================================================================== */
body:has(.home-hero) { background: #fbf5ea url(/img/bg/ivory-garden.svg?v=1) center top / 100% auto repeat-y !important; }
body:has(.home-hero)::before { height: 1120px !important; background: url(/img/bg/hero-night.svg?v=1) center / cover no-repeat !important; transform: none !important; -webkit-mask: linear-gradient(#000 80%, transparent 100%) !important; mask: linear-gradient(#000 80%, transparent 100%) !important; }
body:has(.home-hero)::after { display: none !important; }
.hx-props, html body .home-seal-stage::before { display: none !important; }
.home-hero-grid { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 30px !important; }
.home-hero-grid > div:first-child { max-width: 780px; margin: 0 auto; text-align: center !important; }
.home-hero-grid > div:first-child * { text-align: center; }
.home-hero-grid > div:first-child .flex { justify-content: center; }
html body:has(.home-hero) .home-hero .home-eyebrow { color: #e9c98a !important; letter-spacing: .34em; }
html body:has(.home-hero) .home-hero .home-title { color: #fff6e8 !important; font-size: clamp(44px, 6.4vw, 88px) !important; line-height: 1.02; text-shadow: 0 4px 36px rgba(0,0,0,.4); }
html body:has(.home-hero) .home-hero .home-title * { color: #f2cf8e !important; -webkit-text-fill-color: #f2cf8e !important; background: none !important; }
html body:has(.home-hero) .home-hero p, html body:has(.home-hero) .home-hero .home-note, html body:has(.home-hero) .home-hero .home-seal-hint { color: rgba(255,240,224,.86) !important; }
html body:has(.home-hero) .home-hero .home-tagline { color: #fff6e8 !important; }
html body:has(.home-hero) .home-hero .home-tagline * { color: #f2cf8e !important; }
html body:has(.home-hero) .home-hero .home-cta-primary { background: linear-gradient(135deg, #f2d596, #c9a45a) !important; color: #3a1230 !important; border: 0 !important; box-shadow: 0 14px 34px -12px rgba(0,0,0,.6); }
html body:has(.home-hero) .home-hero .home-cta-ghost { background: rgba(255,246,232,.06) !important; color: #fbe7c5 !important; border: 1px solid rgba(242,213,150,.7) !important; }
html body:has(.home-hero) .home-hero span { color: rgba(255,240,224,.7) !important; }
.home-seal-stage { margin: 0 auto; width: min(560px, 100%); }
.home-seal-stage .home-env { filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }

/* Sections: centered headings with a gold hairline, stationery cards */
.hx { text-align: center; }
.hx > h2, .hx .hx-eye, .hx .hx-sub { text-align: center; margin-left: auto; margin-right: auto; }
.hx > h2::after { content: ''; display: block; width: 72px; height: 2px; margin: 20px auto 8px; background: linear-gradient(90deg, transparent, #c9a45a, transparent); }
.hx-night > .hx > h2::after { background: linear-gradient(90deg, transparent, #f2d596, transparent); }
.hx-card, .hx-wcard, .hx-gift, .hx-step, .hx-price > div, .hx-why > div { position: relative; background: #fffdf8 !important; border: 1px solid #dcc79f !important; border-radius: 6px !important; outline: 1px solid rgba(201,164,90,.35); outline-offset: -8px; box-shadow: 0 18px 36px -24px rgba(90,40,50,.45) !important; text-align: center; }
.hx-card .hx-n, .hx-card h3, .hx-card p { text-align: center; }
@media (min-width: 900px) { .hx-rail { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 18px !important; overflow: visible !important; padding: 8px 0 !important; } .hx-card { flex: none !important; } }
.hx-card-img { display: none !important; }
@media (max-width: 760px) { body:has(.home-hero)::before { height: 1000px !important; } }

/* Cards with photos: no inner gold frame (it cut through the picture and the text); text gets real padding */
.hx-step, .hx-gift { outline: none !important; padding: 12px 12px 18px; }
.hx-step-img { border-radius: 3px !important; }
.hx-step h3, .hx-step p { padding: 0 10px; }
.hx-gift-img { border-radius: 3px; }
.hx-gift-body { padding: 16px 14px 8px !important; }
.hx-card, .hx-wcard, .hx-price > div, .hx-why > div { padding: 26px 24px !important; }

/* No frames on the cards: soft shadow only */
.hx-card, .hx-wcard, .hx-gift, .hx-step, .hx-price > div, .hx-why > div { border: 0 !important; outline: none !important; }

/* Less empty space: no extra padding above the envelope, tighter hero gaps and section spacing */
html body .home-seal-stage { padding-top: 0 !important; }
.home-hero-grid { gap: 22px !important; }
.hx-band .hx { padding-top: 46px !important; padding-bottom: 46px !important; }
.home-more-ways, .home-paths { margin-top: 0; }

/* Every card in a grid is the same size */
@media (min-width: 900px) {
  .hx-rail, .hx-who, .hx-why, .hx-grid, .hx-steps { grid-auto-rows: 1fr; align-items: stretch; }
  .hx-card, .hx-wcard, .hx-why > div { display: flex; flex-direction: column; justify-content: center; min-height: 190px; }
}

/* Hero: a real photograph (dried roses, candles, a wax-seal stamp on a walnut table) instead of the drawn blossoms */
body:has(.home-hero)::before {
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(26,6,22,.72), rgba(26,6,22,0) 78%),
    linear-gradient(rgba(46,12,34,.46), rgba(46,12,34,.30) 50%, rgba(46,12,34,.55)),
    url(/img/scene/starry.webp?v=2) center 6% / cover no-repeat !important;
}
@media (max-width: 760px) { body:has(.home-hero)::before { background-position: center top !important; } }

/* The letter rises above the envelope when it opens: make room so it never covers the buttons */
html body .home-seal-stage { transition: padding-top .6s ease; }
html body .home-seal-stage.is-cracking, html body .home-seal-stage.is-open { padding-top: 110px !important; }

/* ===== Hero, lighter and natural: a bright photographed table of roses and jasmine; no drawn flowers anywhere ===== */
body:has(.home-hero) { background: radial-gradient(60% 40% at 15% 30%, rgba(246,214,220,.35), transparent 70%), radial-gradient(60% 40% at 90% 65%, rgba(225,233,215,.45), transparent 70%), #fbf5ea !important; }
body:has(.home-hero)::before {
  height: 1120px !important;
  background:
    radial-gradient(52% 44% at 50% 45%, rgba(251,245,234,.88), rgba(251,245,234,0) 78%),
    linear-gradient(rgba(251,245,234,0) 70%, #fbf5ea 100%),
    url(/img/scene/tulips-land.webp?v=2) center top / cover no-repeat !important;
  -webkit-mask: none !important; mask: none !important;
}
html body:has(.home-hero) .home-hero .home-eyebrow { color: #8a3a50 !important; }
html body:has(.home-hero) .home-hero .home-title { color: #2e1520 !important; text-shadow: none !important; }
html body:has(.home-hero) .home-hero .home-title * { color: #7a1f3d !important; -webkit-text-fill-color: #7a1f3d !important; }
html body:has(.home-hero) .home-hero p, html body:has(.home-hero) .home-hero .home-note, html body:has(.home-hero) .home-hero .home-seal-hint { color: #4a3039 !important; }
html body:has(.home-hero) .home-hero span { color: #6b4a55 !important; }
html body:has(.home-hero) .home-hero .home-tagline { color: #2e1520 !important; }
html body:has(.home-hero) .home-hero .home-tagline * { color: #7a1f3d !important; }
html body:has(.home-hero) .home-hero .home-cta-primary { background: #7a1f3d !important; color: #fff !important; box-shadow: 0 14px 30px -14px rgba(122,31,61,.7); }
html body:has(.home-hero) .home-hero .home-cta-ghost { background: rgba(255,250,242,.85) !important; color: #7a1f3d !important; border: 1px solid rgba(122,31,61,.35) !important; }
.home-seal-stage .home-env { filter: drop-shadow(0 22px 30px rgba(70,30,35,.35)); }
@media (max-width: 760px) { body:has(.home-hero)::before { height: 1000px !important; background-position: 30% top !important; } }

/* ===== Hero, clean and airy: soft colour washes and thin gold rings around the envelope (no photo, no flowers) ===== */
body:has(.home-hero)::before {
  height: 1120px !important;
  background:
    radial-gradient(circle at 50% 84%, transparent 0 330px, rgba(201,164,90,.38) 331px 332px, transparent 333px 450px, rgba(201,164,90,.26) 451px 452px, transparent 453px 580px, rgba(201,164,90,.16) 581px 582px, transparent 583px),
    radial-gradient(38% 46% at 10% 18%, rgba(255,190,212,.85), rgba(255,190,212,0) 72%),
    radial-gradient(36% 44% at 90% 12%, rgba(255,222,184,.9), rgba(255,222,184,0) 72%),
    radial-gradient(42% 48% at 84% 76%, rgba(214,198,255,.6), rgba(214,198,255,0) 72%),
    radial-gradient(38% 40% at 14% 80%, rgba(196,228,212,.65), rgba(196,228,212,0) 72%),
    linear-gradient(#fff7ef, #fcf1ea 62%, #fbf5ea) !important;
  -webkit-mask: linear-gradient(#000 82%, transparent 100%) !important; mask: linear-gradient(#000 82%, transparent 100%) !important;
}
@media (max-width: 760px) { body:has(.home-hero)::before { height: 1000px !important; background-position: center !important; } }
.home-seal-stage .home-env { filter: drop-shadow(0 26px 34px rgba(122,31,61,.28)); }

/* ===== Hero, bold and playful: a slowly moving raspberry-to-rose gradient, drifting hearts and envelopes, a spinning badge ===== */
@keyframes hxShift { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } }
@keyframes hxRise { 0% { transform: translateY(0) rotate(-3deg); opacity: 0; } 10% { opacity: .85; } 50% { transform: translateY(-500px) rotate(3deg); } 90% { opacity: .75; } 100% { transform: translateY(-1000px) rotate(-3deg); opacity: 0; } }
@keyframes hxSpin { to { transform: rotate(360deg); } }
@keyframes hxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
body:has(.home-hero)::before {
  height: 1120px !important;
  background:
    radial-gradient(46% 52% at 50% 70%, rgba(255,214,150,.55), rgba(255,214,150,0) 70%),
    radial-gradient(30% 38% at 8% 12%, rgba(255,160,190,.5), rgba(255,160,190,0) 70%),
    linear-gradient(125deg, #4f1030, #8d1f4d 28%, #d4467a 55%, #f07a8e 78%, #8d1f4d) !important;
  background-size: 100% 100%, 100% 100%, 260% 260% !important;
  animation: hxShift 22s ease-in-out infinite;
  -webkit-mask: linear-gradient(#000 86%, transparent 100%) !important; mask: linear-gradient(#000 86%, transparent 100%) !important;
}
@media (max-width: 760px) { body:has(.home-hero)::before { height: 1000px !important; } }
.hx-float { display: none; position: absolute; left: 0; right: 0; top: 0; height: 1120px; overflow: hidden; pointer-events: none; z-index: 1; }
body:has(.home-hero) .hx-float { display: block; }
.hx-float i { position: absolute; bottom: -60px; background-size: contain; background-repeat: no-repeat; animation: hxRise linear infinite; filter: drop-shadow(0 6px 10px rgba(60,10,35,.35)); }
html body:has(.home-hero) .home-hero .home-eyebrow { color: #ffe3a6 !important; }
html body:has(.home-hero) .home-hero .home-title { color: #fff8ee !important; text-shadow: 0 4px 30px rgba(60,5,30,.45) !important; }
html body:has(.home-hero) .home-hero .home-title * { color: #ffd98e !important; -webkit-text-fill-color: #ffd98e !important; }
html body:has(.home-hero) .home-hero p, html body:has(.home-hero) .home-hero .home-note, html body:has(.home-hero) .home-hero .home-seal-hint { color: rgba(255,246,236,.92) !important; }
html body:has(.home-hero) .home-hero span { color: rgba(255,240,226,.8) !important; }
html body:has(.home-hero) .home-hero .home-tagline { color: #fff8ee !important; }
html body:has(.home-hero) .home-hero .home-tagline * { color: #ffd98e !important; }
html body:has(.home-hero) .home-hero .home-cta-primary { background: linear-gradient(135deg, #ffe2a0, #f0b95a) !important; color: #4a1030 !important; box-shadow: 0 16px 34px -12px rgba(60,5,30,.6); }
html body:has(.home-hero) .home-hero .home-cta-ghost { background: rgba(255,248,238,.14) !important; color: #fff6e8 !important; border: 1px solid rgba(255,230,180,.75) !important; }
.home-seal-stage .home-env { filter: drop-shadow(0 28px 36px rgba(50,5,30,.5)); animation: hxPulse 4.5s ease-in-out infinite; }
.home-seal-stage.is-open .home-env, .home-seal-stage.is-cracking .home-env { animation: none; }
.home-seal-stage { position: relative; }
.hx-badge { position: absolute; right: -6%; top: 4%; width: 104px; height: 104px; z-index: 5; pointer-events: none; }
.hx-badge svg { width: 100%; height: 100%; animation: hxSpin 16s linear infinite; }
.hx-badge text { font: 700 11.500px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; fill: #fff3dd; }
.hx-badge b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: #ffd98e; animation: hxPulse 2.2s ease-in-out infinite; }
.hx-badge::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(140,20,70,.85), rgba(140,20,70,.35)); z-index: -1; }
@media (max-width: 760px) { .hx-badge { right: -2%; top: -14px; width: 84px; height: 84px; } .hx-badge text { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { body:has(.home-hero)::before, .hx-float i, .hx-badge svg, .hx-badge b, .home-seal-stage .home-env { animation: none !important; } }

/* Occasion tiles: zoom in on the flowers and props instead of the empty crinkled cloth; clean wine fade for the label */
html body .home-occasions button::before { background: linear-gradient(180deg, rgba(60,14,40,0) 50%, rgba(74,16,48,.88) 100%) !important; }
html body .home-occasions button:nth-child(1) { background-size: 190% auto !important; background-position: 6% 0% !important; }
html body .home-occasions button:nth-child(4) { background-size: 190% auto !important; background-position: 94% 0% !important; }
html body .home-occasions button:nth-child(5) { background-size: 165% auto !important; background-position: 50% 58% !important; }
html body .home-occasions button:nth-child(6) { background-size: 195% auto !important; background-position: 8% 0% !important; }
html body .home-seal-stage > .hx-badge { position: absolute; }

/* ===================================================================
   Homepage below the hero: bold bands, curved edges, flip cards, no tick marks
   =================================================================== */
.hx-badge { display: none !important; }
/* Hero bottom: a clean curved edge instead of a muddy fade */
body:has(.home-hero)::before { -webkit-mask: none !important; mask: none !important; clip-path: ellipse(78% 97% at 50% 0%); }

/* Tick marks out: plain centred lines with a soft divider */
.hx-price li { padding-left: 0 !important; text-align: center; }
.hx-price li::before { content: none !important; display: none !important; }
.hx-price li + li { border-top: 1px dashed rgba(122,31,61,.2); padding-top: 9px; }

/* Bands */
html body .hx-band { border-radius: 0 0 56px 56px / 0 0 34px 34px; margin-bottom: -2px; position: relative; }
html body .hx-band .hx { color: #2e1520; }
html body .hx-band h2 { font-size: clamp(36px, 5vw, 60px) !important; line-height: 1.05; }
html body .hx-band .hx-eye { letter-spacing: .3em; }

/* Moments: deep plum with a hot-pink glow */
html body .hx-band:has(.hx-rail) { background: radial-gradient(60% 50% at 85% 10%, rgba(255,92,150,.35), transparent 70%), radial-gradient(50% 50% at 8% 90%, rgba(255,184,102,.22), transparent 70%), linear-gradient(165deg, #2a0d24, #4a1140 55%, #6b1a4e) !important; }
html body .hx-band:has(.hx-rail) :is(h2, .hx-sub) { color: #fff6ea !important; }
html body .hx-band:has(.hx-rail) h2 em { color: #ffcf7e !important; }
html body .hx-band:has(.hx-rail) .hx-eye { color: #ffb4c9 !important; }
/* Flip cards */
.hx-flip { position: relative; perspective: 1000px; background: none !important; box-shadow: none !important; padding: 0 !important; min-height: 250px; cursor: pointer; outline-offset: 4px; }
.hx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .75s cubic-bezier(.3,1.2,.4,1); border-radius: 18px; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 22px 40px -22px rgba(0,0,0,.65); }
.hx-front { background: #fffaf3; }
.hx-back { background: linear-gradient(155deg, #ff6f9a, #c2336e 60%, #8d1f4d); transform: rotateY(180deg); color: #fff; gap: 6px; }
.hx-flip.is-flipped .hx-front { transform: rotateY(-180deg); }
.hx-flip.is-flipped .hx-back { transform: rotateY(0); }
.hx-flip:hover .hx-front { transform: rotateY(-8deg); }
.hx-flip.is-flipped:hover .hx-front { transform: rotateY(-180deg); }
.hx-hint { display: inline-block; margin-top: 10px; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #c2336e; font-style: normal; }
.hx-back h4 { margin: 0; font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffe0a8; }
.hx-back > p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.92); }
.hx-back .mp { color: #3a1624; text-align: center; }
.mp-letter { background: #fffaf1; padding: 10px 12px; border-radius: 6px; width: 92%; box-shadow: 0 8px 14px rgba(60,10,35,.35); }
.mp-letter small { display: block; font: 700 8px 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; color: #9a2a4b; }
.mp-letter b { display: block; font: 500 20px 'Cormorant Garamond', serif; color: #8e2433; }
.mp-letter p { margin: 2px 0; font: 500 12px/1.3 'Cormorant Garamond', serif; }
.mp-letter i { font: 400 18px 'Great Vibes', cursive; color: #8e2433; }
.mp-polas { position: relative; width: 120px; height: 82px; }
.mp-polas u { position: absolute; width: 56px; height: 66px; background: linear-gradient(#fff 0 78%, #fff 78%); border-radius: 3px; box-shadow: 0 6px 10px rgba(60,10,35,.4); top: 6px; }
.mp-polas u::after { content: ''; position: absolute; inset: 5px 5px 17px; background: linear-gradient(135deg, #f7b6c8, #ffd9b8); }
.mp-polas u:nth-child(1) { left: 0; transform: rotate(-9deg); } .mp-polas u:nth-child(2) { left: 32px; transform: rotate(4deg); z-index: 1; } .mp-polas u:nth-child(3) { left: 62px; transform: rotate(11deg); }
.mp-polas u:nth-child(2)::after { background: linear-gradient(135deg, #c9dfc2, #f4e7b8); } .mp-polas u:nth-child(3)::after { background: linear-gradient(135deg, #ffcfa8, #f19ab0); }
.mp-bloom { display: flex; gap: 4px; justify-content: center; }
.mp-bloom i { width: 22px; height: 22px; border-radius: 50% 50% 50% 8%; background: radial-gradient(circle at 50% 50%, #ffe08a 0 22%, #ffd0de 24%); transform: rotate(var(--r, 0deg)); box-shadow: 0 4px 6px rgba(60,10,35,.35); }
.mp-bloom i:nth-child(2n) { --r: 40deg; background: radial-gradient(circle at 50% 50%, #ffe08a 0 22%, #fff 24%); } .mp-bloom i:nth-child(3n) { --r: -30deg; background: radial-gradient(circle at 50% 50%, #ffe08a 0 22%, #ff9ab9 24%); }
.mp-book { background: #fffaf1; border-left: 6px solid #8e2433; border-radius: 4px 8px 8px 4px; padding: 10px 12px; width: 92%; box-shadow: 0 8px 14px rgba(60,10,35,.35); }
.mp-book small { font: 700 8px 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; color: #9a2a4b; } .mp-book p { margin: 3px 0 0; font: italic 500 13px/1.3 'Cormorant Garamond', serif; }
.mp-stamp { background: #fffaf0; padding: 8px 14px 6px; outline: 2px dashed rgba(122,31,61,.45); outline-offset: -6px; transform: rotate(-3deg); box-shadow: 0 8px 14px rgba(60,10,35,.35); }
.mp-stamp i { display: block; font: italic 12px 'Cormorant Garamond', serif; } .mp-stamp b { display: block; font: 500 44px/1 'Cormorant Garamond', serif; color: #7a1f3d; } .mp-stamp span { font: 700 8px 'Plus Jakarta Sans', sans-serif; letter-spacing: .18em; color: #8a3a50; }
.mp-rec { width: 78px; height: 78px; border-radius: 50%; background: repeating-radial-gradient(circle, #1b1b1d 0 2px, #0c0c0d 2px 4px); box-shadow: 0 8px 14px rgba(0,0,0,.5); display: grid; place-items: center; animation: hxSpin 4s linear infinite; }
.mp-rec i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #1b1b1d 0 3px, #ffe08a 4px); }
.mp-wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.mp-wave i { width: 5px; border-radius: 3px; background: #ffe0a8; height: 14px; animation: hxBar 1.1s ease-in-out infinite; }
.mp-wave i:nth-child(3n) { animation-delay: .15s; height: 32px; } .mp-wave i:nth-child(3n+1) { animation-delay: .3s; height: 44px; } .mp-wave i:nth-child(4n) { animation-delay: .45s; height: 22px; }
@keyframes hxBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }
.mp-scratch { position: relative; width: 130px; height: 62px; border-radius: 8px; background: #fffaf1; display: grid; place-items: center; overflow: hidden; box-shadow: 0 8px 14px rgba(60,10,35,.35); }
.mp-scratch span { font: 600 17px 'Cormorant Garamond', serif; color: #8e2433; }
.mp-scratch b { position: absolute; inset: 0 40% 0 0; display: grid; place-items: center; background: linear-gradient(120deg, #e8c66e, #fff0b8 40%, #d9a93f); font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; color: #6b4a10; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.mp-wheel { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(#ffe08a 0 60deg, #fff 60deg 120deg, #ffb3c8 120deg 180deg, #ffe08a 180deg 240deg, #fff 240deg 300deg, #ffb3c8 300deg 360deg); box-shadow: 0 8px 14px rgba(60,10,35,.45); animation: hxSpin 6s linear infinite; position: relative; }
.mp-wheel::after { content: ''; position: absolute; left: 50%; top: -6px; margin-left: -6px; border: 6px solid transparent; border-top: 12px solid #fff; }
.mp-wheel i { position: absolute; inset: 28px; border-radius: 50%; background: #8d1f4d; }
.mp-cap { background: rgba(0,0,0,.22); padding: 10px 16px; border-radius: 12px; color: #fff !important; } .mp-cap small { display: block; font: 700 8px 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; color: #ffe0a8; } .mp-cap strong { font: 500 26px 'Cormorant Garamond', serif; letter-spacing: .06em; }
.mp-env { position: relative; width: 94px; height: 64px; background: #fff3dd; border-radius: 5px; box-shadow: 0 8px 14px rgba(60,10,35,.4); } .mp-env::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#f1e0c0, #f1e0c0); clip-path: polygon(0 0, 50% 58%, 100% 0); border-radius: 5px; }
.mp-env i { position: absolute; left: 50%; top: 52%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d94577, #7a1236); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.mp-qr { width: 70px; height: 70px; background: #fff; padding: 6px; border-radius: 6px; background-image: linear-gradient(90deg, #2a0d24 25%, transparent 25% 50%, #2a0d24 50% 75%, transparent 75%), linear-gradient(#2a0d24 25%, transparent 25% 50%, #2a0d24 50% 75%, transparent 75%); background-size: 14px 14px; background-clip: content-box; box-shadow: 0 8px 14px rgba(60,10,35,.4); }
@media (max-width: 760px) { .hx-flip { min-height: 232px; } .hx-face { padding: 14px 10px; } .hx-back > p { font-size: 11.5px; } }

/* Gift types: warm blush with tilted cards */
html body .hx-band:has(.hx-grid) { background: radial-gradient(40% 40% at 90% 15%, rgba(255,205,170,.55), transparent 70%), linear-gradient(180deg, #fff1f4, #ffe3d8) !important; }
html body .hx-gift { border-radius: 22px !important; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
html body .hx-gift:nth-child(odd):hover { transform: rotate(-1.6deg) translateY(-8px); } html body .hx-gift:nth-child(even):hover { transform: rotate(1.6deg) translateY(-8px); }
html body .hx-gift-img { border-radius: 16px !important; }

/* How it works: raspberry band, big gold numbers */
html body .hx-band.hx-how { background: radial-gradient(50% 60% at 12% 20%, rgba(255,160,190,.4), transparent 70%), linear-gradient(160deg, #7a1440, #b32a62 55%, #e05581) !important; }
html body .hx-band.hx-how :is(h2, .hx-sub) { color: #fff7ec !important; } html body .hx-band.hx-how h2 em { color: #ffe0a0 !important; } html body .hx-band.hx-how .hx-eye { color: #ffd6e2 !important; }
html body .hx-step { border-radius: 22px !important; transition: transform .35s cubic-bezier(.3,1.4,.5,1); } html body .hx-step:hover { transform: translateY(-8px) rotate(-1deg); }
html body .hx-step-n { width: 44px !important; height: 44px !important; background: linear-gradient(135deg, #ffe39a, #f0b45a) !important; color: #4a1030 !important; font-size: 18px !important; }

/* Who it's for: lilac wash, coloured card tops */
html body .hx-band:has(.hx-who) { background: radial-gradient(45% 45% at 10% 80%, rgba(206,190,255,.5), transparent 70%), linear-gradient(180deg, #fdf0f8, #f1e5ff) !important; }
html body .hx-wcard { border-radius: 18px !important; border-top: 5px solid #e0527f !important; } html body .hx-wcard:nth-child(3n+2) { border-top-color: #f0b45a !important; } html body .hx-wcard:nth-child(3n) { border-top-color: #8d5cd0 !important; }
html body .hx-wcard { transition: transform .3s cubic-bezier(.3,1.4,.5,1); } html body .hx-wcard:hover { transform: translateY(-6px) rotate(-1deg); }

/* Why: dark plum again, glass cards */
html body .hx-band.hx-alt { background: radial-gradient(50% 60% at 90% 20%, rgba(255,92,150,.3), transparent 70%), linear-gradient(165deg, #2a0d24, #4a1140) !important; }
html body .hx-band.hx-alt :is(h2, .hx-sub) { color: #fff6ea !important; } html body .hx-band.hx-alt h2 em { color: #ffcf7e !important; } html body .hx-band.hx-alt .hx-eye { color: #ffb4c9 !important; }
html body .hx-why > div { background: rgba(255,255,255,.08) !important; border-radius: 18px !important; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255,214,150,.25) !important; }
html body .hx-why h3 { color: #fff3dd !important; } html body .hx-why p { color: rgba(255,240,226,.82) !important; } html body .hx-why b { background: linear-gradient(135deg, #ffe39a, #f0b45a) !important; color: #4a1030 !important; }

/* Price: sunny gradient, the Gift card is the bold one */
html body .hx-band:has(.hx-price) { background: radial-gradient(50% 50% at 50% 0%, rgba(255,230,160,.8), transparent 70%), linear-gradient(180deg, #fff4dc, #ffdce4) !important; }
html body .hx-price > div { border-radius: 24px !important; }
html body .hx-price > div:first-child { background: linear-gradient(155deg, #8d1f4d, #c2336e) !important; color: #fff !important; transform: scale(1.03); }
html body .hx-price > div:first-child :is(.hx-pk, .hx-pv, li, small) { color: #fff7ec !important; } html body .hx-price > div:first-child li + li { border-top-color: rgba(255,255,255,.28); }

/* Closing: full raspberry, big type */
html body .hx-band.hx-closing { background: radial-gradient(50% 60% at 50% 120%, rgba(255,214,150,.5), transparent 70%), linear-gradient(135deg, #5a1334, #a3254f 50%, #e0527a) !important; }
html body .hx-band.hx-closing :is(h2, .hx-sub, .hx-fine) { color: #fff7ec !important; } html body .hx-band.hx-closing h2 em { color: #ffe0a0 !important; }
html body .hx-price > div:first-child .hx-cta, html body .hx-price > div:first-child a { background: linear-gradient(135deg, #ffe7a8, #f0b45a) !important; color: #4a1030 !important; box-shadow: 0 12px 24px -10px rgba(0,0,0,.5); }

/* ===== Softer palette and no curves: sections melt into each other with gradients ===== */
body:has(.home-hero)::before { clip-path: none !important; height: 1180px !important;
  background:
    radial-gradient(46% 52% at 50% 62%, rgba(255,214,160,.38), rgba(255,214,160,0) 70%),
    radial-gradient(32% 40% at 8% 12%, rgba(214,120,150,.35), rgba(214,120,150,0) 70%),
    linear-gradient(125deg, #3a0d2a, #651a43 32%, #8a2750 62%, #6e1b45 100%) !important;
  background-size: 100% 100%, 100% 100%, 240% 240% !important;
  -webkit-mask: linear-gradient(#000 76%, transparent 100%) !important; mask: linear-gradient(#000 76%, transparent 100%) !important; }
@media (max-width: 760px) { body:has(.home-hero)::before { height: 1060px !important; } }
html body .hx-band { border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html body .hx-band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px; pointer-events: none; z-index: 0; }
html body .hx-band > .hx { position: relative; z-index: 1; }
html body .hx-band:has(.hx-rail)::before { background: linear-gradient(#fbf5ea, rgba(251,245,234,0)); }
html body .hx-band:has(.hx-grid)::before { background: linear-gradient(#1f0b1b, rgba(31,11,27,0)); }
html body .hx-band.hx-how::before { background: linear-gradient(#fbf5ea, rgba(251,245,234,0)); }
html body .hx-band:has(.hx-who)::before { background: linear-gradient(#9a3a5a, rgba(154,58,90,0)); }
html body .hx-band.hx-alt::before { background: linear-gradient(#f1e5ff, rgba(241,229,255,0)); }
html body .hx-band:has(.hx-price)::before { background: linear-gradient(#4a1140, rgba(74,17,64,0)); }
html body .hx-band.hx-closing::before { background: linear-gradient(#ffdce4, rgba(255,220,228,0)); }
/* Calmer colours: rosewood and wine instead of hot pink */
html body .hx-band:has(.hx-rail) { background: radial-gradient(60% 50% at 85% 10%, rgba(184,50,90,.28), transparent 70%), radial-gradient(50% 50% at 8% 90%, rgba(255,184,102,.16), transparent 70%), linear-gradient(165deg, #2a0d24, #44103c 55%, #5a1538) !important; }
.hx-back { background: linear-gradient(155deg, #9a3a5a, #5a1334) !important; }
.hx-hint { color: #9a3a5a !important; }
html body .hx-band.hx-how { background: radial-gradient(50% 60% at 12% 20%, rgba(214,120,150,.28), transparent 70%), linear-gradient(160deg, #5a1334, #7a1f3d 60%, #9a3a5a) !important; }
html body .hx-band.hx-closing { background: radial-gradient(50% 60% at 50% 120%, rgba(255,214,150,.4), transparent 70%), linear-gradient(135deg, #3d0e2b, #6e1b45 55%, #9c2e58) !important; }
html body .hx-price > div:first-child { background: linear-gradient(155deg, #6e1b45, #9a3a5a) !important; }
html body .hx-band.hx-alt { background: radial-gradient(50% 60% at 90% 20%, rgba(184,50,90,.25), transparent 70%), linear-gradient(165deg, #2a0d24, #4a1140) !important; }
body:has(.home-hero)::before { height: 1320px !important; -webkit-mask: linear-gradient(#000 82%, transparent 100%) !important; mask: linear-gradient(#000 82%, transparent 100%) !important; }
@media (max-width: 760px) { body:has(.home-hero)::before { height: 1180px !important; } }
/* The dark hero runs straight into the dark "moments" band: same colour at the seam, so no edge at all */
body:has(.home-hero)::before { height: var(--hero-h, 1290px) !important; -webkit-mask: none !important; mask: none !important;
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(255,214,160,.34), rgba(255,214,160,0) 70%),
    radial-gradient(32% 30% at 8% 10%, rgba(214,120,150,.33), rgba(214,120,150,0) 70%),
    linear-gradient(180deg, #4a1233 0%, #6b1b45 45%, #3d0f30 82%, #2a0d24 100%) !important; background-size: 100% 100% !important; animation: none !important; }
html body .hx-band:has(.hx-rail)::before { display: none; }
@media (max-width: 760px) { body:has(.home-hero)::before { height: var(--hero-h, 1500px) !important; } }
/* Headings sit below the colour blend at the top of each band */
html body .hx-band:has(.hx-grid) > .hx, html body .hx-band.hx-how > .hx, html body .hx-band:has(.hx-who) > .hx, html body .hx-band.hx-alt > .hx, html body .hx-band:has(.hx-price) > .hx, html body .hx-band.hx-closing > .hx { padding-top: 120px !important; }
html body .hx-band::before { height: 140px !important; }

/* ===== One continuous page background: measured gradient (set by script), transparent sections, no seams ===== */
body:has(.home-hero) {
  background:
    radial-gradient(ellipse 560px 430px at 50% calc(var(--hero-h, 1250px) * .6), rgba(255,214,160,.28), rgba(255,214,160,0)),
    radial-gradient(ellipse 520px 400px at 8% 150px, rgba(214,120,150,.30), rgba(214,120,150,0)),
    var(--page-grad, linear-gradient(180deg, #4a1233 0, #33102f 1250px, #fbf5ea 2600px)) !important;
  background-repeat: no-repeat !important;
}
body:has(.home-hero)::before { background: none !important; }
html body .hx-band, html body .hx-band.hx-night, html body .hx-band.hx-day { background: none !important; }
html body .hx-band::before { display: none !important; }
html body .hx-band:has(.hx-grid) > .hx, html body .hx-band.hx-how > .hx, html body .hx-band:has(.hx-who) > .hx, html body .hx-band.hx-alt > .hx, html body .hx-band:has(.hx-price) > .hx, html body .hx-band.hx-closing > .hx { padding-top: 180px !important; }
/* Always render every section: the background gradient is measured from real section positions, so heights must be exact from the start */
.hx { content-visibility: visible !important; contain-intrinsic-size: none !important; }
html body .home-more-ways, html body .home-faq, html body .home-paths, html body .home-hero { border: 0 !important; box-shadow: none; }

body:has(.home-hero) footer, html body:has(.home-hero) footer[class*="backdrop-blur"] { background: transparent !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }

/* Mobile menu drawer: solid cream panel, readable text, no floating hearts through it */
html body #mobile-nav-drawer { background: #fffaf3 !important; border: 1px solid #ecd9cc !important; box-shadow: 0 18px 40px rgba(40,10,30,.45) !important; position: relative; z-index: 60; }
html body #mobile-nav-drawer button:not([class*="from-rose"]), html body #mobile-nav-drawer a { color: #3b1a2c !important; opacity: 1 !important; }
html body #mobile-nav-drawer button[class*="from-rose"] { color: #fff !important; }
html body #mobile-nav-drawer .border-t { border-color: #ecd9cc !important; }
html body .framer-nav > div { background: transparent !important; }

/* Phone: paint the page gradient on a full-height layer inside the page, not on the canvas (Chrome Android tiled/pinned the canvas background to the viewport) */
html body:has(.home-hero) { background: #2a0d24 !important; }
html body:has(.home-hero)::before {
  content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important;
  z-index: 0 !important; pointer-events: none !important; transform: none !important; clip-path: none !important; animation: none !important;
  background:
    radial-gradient(ellipse 560px 430px at 50% calc(var(--hero-h, 1250px) * .6), rgba(255,214,160,.28), rgba(255,214,160,0)),
    radial-gradient(ellipse 520px 400px at 8% 150px, rgba(214,120,150,.30), rgba(214,120,150,0)),
    var(--page-grad, linear-gradient(180deg, #4a1233 0, #33102f 1250px, #fbf5ea 2600px)) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: 0 0 !important;
}

/* Phone: the Halloween promo bar stuck to the bottom of the screen and followed every scroll; the same offer already sits in the top banner */
@media (max-width: 760px) { html body aside.hwp { display: none !important; } }

/* Opened letter: dark readable text on the paper, less empty space above it */
html body:has(.home-hero) .home-hero .home-letter span, html body:has(.home-hero) .home-hero .home-letter > span { color: #4a3039 !important; }
html body:has(.home-hero) .home-hero .home-letter em { color: #7a1f3d !important; }
html body:has(.home-hero) .home-hero .home-letter b { color: #7a1f3d !important; }
@media (max-width: 760px) { html body .home-seal-stage.is-cracking, html body .home-seal-stage.is-open { padding-top: 36px !important; } }