:root {
  --ink: #fdf7f2;
  --muted: #c9bacd;
  --rose: #f19aaa;
  --rose-light: #ffd1d8;
  --rose-dark: #bd5f78;
  --plum: #241523;
  --night: #100b14;
  --card: rgba(255, 244, 246, 0.07);
  --line: rgba(255, 255, 255, 0.12);
  --serif: "Italiana", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(154, 65, 101, 0.15), transparent 27rem),
    radial-gradient(circle at 85% 75%, rgba(93, 52, 118, 0.14), transparent 30rem),
    var(--night);
  font-family: var(--sans);
  overflow-x: hidden;
}

button { font: inherit; }

button:focus-visible {
  outline: 2px solid var(--rose-light);
  outline-offset: 5px;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: rgba(238, 129, 157, 0.08);
  filter: blur(55px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 5rem 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(16, 11, 20, .25), rgba(16, 11, 20, .85)),
    radial-gradient(ellipse at 50% 42%, #34202e 0%, #180f1b 48%, #0e0a12 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: min(82vw, 58rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 199, 211, .1);
  border-radius: 50%;
  pointer-events: none;
  animation: slow-spin 24s linear infinite;
}

.hero::after {
  width: min(64vw, 44rem);
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 32s;
}

.hero__orb {
  position: absolute;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  filter: blur(25px);
  opacity: .25;
  animation: float 7s ease-in-out infinite;
}

.hero__orb--one { left: -7rem; top: 5%; background: #d67692; }
.hero__orb--two { right: -7rem; bottom: 4%; background: #714c91; animation-delay: -3s; }

.hero__content {
  width: min(100%, 60rem);
  text-align: center;
}

.eyebrow,
.section-kicker {
  margin: 0 0 1.25rem;
  color: var(--rose-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.eyebrow { display: inline-flex; align-items: center; gap: .75rem; }
.eyebrow span { width: 2.5rem; height: 1px; background: var(--rose); }

.hero__hello {
  margin: 0 0 .2rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

h1,
h2,
h3,
p { text-wrap: balance; }

h1 {
  margin: 0;
  font: 400 clamp(3.2rem, 8.5vw, 7.8rem)/.92 var(--serif);
  letter-spacing: -.045em;
}

h1 em,
h2 em {
  color: var(--rose-light);
  font-weight: 400;
}

.hero__lead {
  max-width: 34rem;
  margin: 1.7rem auto 2rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.primary-button,
.final-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  min-height: 3.65rem;
  padding: .9rem 1.15rem .9rem 1.7rem;
  color: #2a111a;
  background: linear-gradient(135deg, #ffd9df, #ee91a7);
  border: 0;
  border-radius: 99px;
  box-shadow: 0 14px 45px rgba(215, 91, 125, .22);
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.primary-button:hover,
.final-button:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 18px 60px rgba(215, 91, 125, .38);
}

.button-heart {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  color: white;
  background: rgba(50, 16, 28, .28);
  border-radius: 50%;
  font-size: 1.3rem;
}

.tiny-note { margin: .9rem 0 0; color: #86798c; font-size: .76rem; }

.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  animation: reveal-up .8s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero .reveal-up:nth-child(2) { animation-delay: .12s; }
.hero .reveal-up:nth-child(3) { animation-delay: .24s; }
.hero .reveal-up:nth-child(4) { animation-delay: .38s; }
.hero .reveal-up:nth-child(5) { animation-delay: .52s; }
.hero .reveal-up:nth-child(6) { animation-delay: .62s; }

.sound-toggle {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .8rem;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
}

.sound-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-bars i { display: block; width: 2px; height: 35%; background: var(--rose-light); border-radius: 2px; }
.sound-bars i:nth-child(2) { height: 100%; }
.sound-bars i:nth-child(3) { height: 65%; }
.sound-toggle[aria-pressed="true"] i { animation: sound-wave .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] i:nth-child(2) { animation-delay: -.25s; }
.sound-toggle[aria-pressed="true"] i:nth-child(3) { animation-delay: -.5s; }
.sound-label { font-size: .7rem; font-weight: 600; }

.scroll-hint {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #75697c;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-hint span { width: 2.8rem; height: 1px; background: #75697c; transform-origin: right; animation: line-pulse 2s ease infinite; }

main[aria-hidden="true"] { display: none; }
body:not(.started) footer { display: none; }

body.started .hero {
  min-height: 72svh;
  transition: min-height 1s cubic-bezier(.2,.8,.2,1);
}

.section {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: clamp(6rem, 10vw, 9rem) max(1.25rem, calc((100vw - 72rem) / 2));
}

.flower-section {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #100b14, #13131d 55%, #0e1118);
}

.flower-section::before {
  content: "";
  position: absolute;
  inset: 10% 15%;
  z-index: -1;
  background: radial-gradient(circle, rgba(240, 146, 166, .13), transparent 60%);
  filter: blur(20px);
}

.flower-copy { position: relative; z-index: 2; }
.flower-copy p { margin: 0 0 .6rem; color: var(--muted); }

.flower-copy h2,
.section-heading h2,
.letter-intro h2,
.finale h2 {
  margin: 0;
  font: 400 clamp(2.6rem, 6vw, 5.4rem)/1 var(--serif);
  letter-spacing: -.035em;
}

.container {
  width: min(76vw, 42rem);
  margin: -3rem auto -2rem;
}

.flower-wrap { position: relative; filter: drop-shadow(0 30px 45px rgba(0,0,0,.25)); }

svg#flower-frame {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.flower-wrap svg [id^="PinkFlowerGroup"],
.flower-wrap svg [id^="BaseGroup"],
.flower-wrap svg [id^="LeafGroup"] > path,
.flower-wrap svg [id^="BudGroup"] > g,
.flower-wrap svg #Bud8_1_,
.flower-wrap svg #Bud10_1_,
.flower-wrap svg #Bud23_1_,
.flower-wrap svg #Bud26_1_ {
  transform-box: fill-box;
  transform-origin: center;
}

.flower-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 26%;
  aspect-ratio: 1;
  color: #39202c;
  background: rgba(255, 247, 243, .92);
  border: 1px solid white;
  border-radius: 50%;
  box-shadow: 0 12px 35px rgba(20, 10, 18, .2);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,1.6,.35,1), opacity .5s ease;
}

.flower-center.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.flower-center span { font-size: clamp(.6rem, 1.2vw, .85rem); letter-spacing: .18em; text-transform: uppercase; }
.flower-center strong { font: 400 clamp(1.2rem, 3vw, 2.2rem)/1 var(--serif); }
.flower-center i { color: #d66f87; font-size: .8rem; }

.flower-after {
  max-width: 39rem;
  margin: 1rem auto 0;
  color: #eadde4;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
}

.reasons { background: #0e1118; }
.section-heading { max-width: 44rem; margin-bottom: 3.5rem; }
.section-heading > p:last-child,
.letter-intro > p:last-child { color: var(--muted); line-height: 1.7; }

.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.reason-card {
  position: relative;
  min-height: 17rem;
  padding: 2rem;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}

.reason-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, rgba(239, 143, 166, .24), transparent 70%);
  transition: transform .45s ease;
}

.reason-card:hover { transform: translateY(-6px); border-color: rgba(255, 205, 216, .35); }
.reason-card:hover::after { transform: scale(1.5); }
.reason-number { color: #716675; font-size: .7rem; letter-spacing: .14em; }
.reason-icon { position: absolute; top: 1.5rem; right: 1.7rem; color: var(--rose-light); font-size: 1.6rem; }
.reason-card strong { display: block; margin: 4.6rem 0 .8rem; font: 400 2rem/1 var(--serif); }
.reason-front,
.reason-secret { display: block; max-width: 23rem; color: var(--muted); line-height: 1.55; transition: transform .4s ease, opacity .3s ease; }
.reason-secret { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; color: var(--rose-light); transform: translateY(25px); opacity: 0; }
.reason-card.flipped { background: linear-gradient(145deg, rgba(196, 91, 122, .16), rgba(255,255,255,.035)); }
.reason-card.flipped .reason-front { transform: translateY(-20px); opacity: 0; }
.reason-card.flipped .reason-secret { transform: translateY(0); opacity: 1; }

.gifts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 60%, rgba(164, 74, 103, .15), transparent 35rem),
    #17101a;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
  padding: 2rem 1rem 1rem;
}

.gift-box {
  position: relative;
  min-height: 16rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  perspective: 700px;
}

.gift-body,
.gift-lid {
  position: absolute;
  left: 50%;
  display: block;
  width: 8rem;
  background: linear-gradient(135deg, #e8849e, #a94565);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 30px rgba(0,0,0,.24);
  transform: translateX(-50%);
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3);
}

.gift-body { bottom: 2.8rem; height: 6rem; border-radius: .35rem .35rem .8rem .8rem; }
.gift-lid { z-index: 2; bottom: 8.45rem; width: 9rem; height: 2rem; border-radius: .4rem; transform-origin: left bottom; }
.gift-body i,
.gift-lid i { position: absolute; left: 50%; display: block; width: 1.6rem; height: 100%; background: #f9cad4; transform: translateX(-50%); }
.gift-lid i::before,
.gift-lid i::after { content: ""; position: absolute; bottom: 1.5rem; width: 2.7rem; height: 2rem; border: .6rem solid #f9cad4; border-radius: 70% 50% 15% 50%; }
.gift-lid i::before { right: .35rem; transform: rotate(17deg); }
.gift-lid i::after { left: .35rem; transform: scaleX(-1) rotate(17deg); }
.gift-tag { position: absolute; top: 2.5rem; left: 50%; color: rgba(255,255,255,.4); font: 400 2.5rem var(--serif); transform: translateX(-50%); transition: color .3s ease; }
.gift-label { position: absolute; bottom: 0; left: 0; right: 0; color: var(--muted); font-size: .78rem; }
.gift-box:hover .gift-lid { transform: translateX(-50%) translateY(-12px) rotate(-4deg); }
.gift-box:hover .gift-body { transform: translateX(-50%) translateY(-4px); }
.gift-box:hover .gift-tag { color: var(--rose-light); }
.gift-box.opened .gift-lid { transform: translateX(-70%) translateY(-65px) rotate(-22deg); }
.gift-box.opened .gift-body { transform: translateX(-50%) scale(1.05); }

.gift-reveal {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 50;
  width: min(calc(100% - 2rem), 32rem);
  padding: 3.2rem 2.5rem 2.5rem;
  color: #321923;
  background: #fff6f3;
  border: 1px solid white;
  border-radius: 1.5rem;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -45%) scale(.9);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.2,.3,1);
}

.gift-reveal.show {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 0 0 100vmax rgba(9,6,11,.76), 0 40px 100px rgba(0,0,0,.55);
  transform: translate(-50%, -50%) scale(1);
}
.gift-close { position: absolute; top: .8rem; right: .9rem; width: 2rem; height: 2rem; color: #714554; background: transparent; border: 0; font-size: 1.5rem; cursor: pointer; }
.gift-reveal__icon { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1rem; place-items: center; color: white; background: var(--rose-dark); border-radius: 50%; font-size: 1.8rem; }
.gift-reveal .section-kicker { color: #a85970; }
.gift-reveal h3 { margin: .4rem 0 .8rem; font: 400 2.5rem/1 var(--serif); }
.gift-reveal p:last-child { color: #745b65; line-height: 1.65; }

.letter-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  background: #10151a;
}

.envelope {
  position: relative;
  width: min(100%, 30rem);
  aspect-ratio: 1.55;
  margin: 5rem auto 2rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 30px 35px rgba(0,0,0,.35));
  transition: transform .3s ease;
}

.envelope:hover { transform: translateY(-8px) rotate(-1deg); }
.envelope-back,
.envelope-front,
.envelope-flap { position: absolute; inset: 0; border-radius: .55rem; }
.envelope-back { background: #dca9a9; }
.envelope-front { z-index: 3; background: linear-gradient(145deg, transparent 50%, #e8bbb8 50%) 0 0/50% 100% no-repeat, linear-gradient(215deg, transparent 50%, #efc7c1 50%) 100% 0/50% 100% no-repeat; }
.envelope-flap { z-index: 4; background: #f2cdc6; clip-path: polygon(0 0, 100% 0, 50% 58%); transform-origin: top; transition: transform .7s cubic-bezier(.2,.8,.2,1), z-index .1s .3s; }
.letter-preview { position: absolute; z-index: 2; left: 8%; right: 8%; top: 9%; height: 85%; padding-top: 20%; color: #633a46; background: #fff9f3; border-radius: .3rem; transition: transform .7s .3s ease; }
.letter-preview i { display: block; font: 400 1rem var(--serif); }
.letter-preview strong { display: block; font: 400 clamp(1.4rem, 4vw, 2.4rem) var(--serif); }
.wax-seal { position: absolute; z-index: 5; top: 46%; left: 50%; display: grid; width: 3.4rem; height: 3.4rem; place-items: center; color: #ffdce2; background: #a83f5d; border: 4px double #cb758d; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity .3s ease, transform .3s ease; }
.envelope-hint { position: absolute; top: calc(100% + 1rem); left: 0; right: 0; color: var(--muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.envelope.open .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.envelope.open .letter-preview { transform: translateY(-45%); }
.envelope.open .wax-seal { opacity: 0; transform: translate(-50%, -50%) scale(.4); }

.love-letter {
  grid-column: 1 / -1;
  display: none;
  width: min(100%, 50rem);
  margin: 3rem auto 0;
  padding: clamp(2rem, 6vw, 5rem);
  color: #422933;
  background: #fff9f2;
  border-radius: .6rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: rotate(-.6deg);
}

.love-letter.show { display: block; animation: letter-in .8s cubic-bezier(.2,.8,.2,1) both; }
.letter-date { color: #a58189; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.love-letter h3 { margin: 2rem 0; font: 400 clamp(2rem, 5vw, 3.4rem) var(--serif); }
.love-letter > p:not(.letter-date, .letter-big, .signature) { color: #654d56; font-size: clamp(.95rem, 2vw, 1.08rem); line-height: 1.85; }
.letter-big { margin: 2.8rem 0; font: 400 clamp(1.5rem, 4vw, 2.4rem)/1.35 var(--serif); }
.letter-big strong { color: #b54868; font-weight: 400; }
.signature { margin: 0; font: 400 1.5rem var(--serif); text-align: right; }
.signature span { color: #c65070; }

.finale {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at center, #321a2b 0%, #160e1a 45%, #09070d 100%);
}

.finale::before {
  content: "♥";
  position: absolute;
  color: rgba(242, 153, 174, .035);
  font-size: min(80vw, 58rem);
  line-height: 1;
  pointer-events: none;
}

.finale-content { position: relative; z-index: 2; }
.finale h2 { max-width: 52rem; margin-bottom: 2.5rem; }
.final-button { color: #30121d; }

.final-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: max-height 1.2s ease, opacity .8s .2s ease, transform .8s .2s ease;
}

.final-answer.show { max-height: 30rem; opacity: 1; transform: translateY(0); }
.final-answer p { margin: 1rem 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.final-answer strong { display: block; color: var(--rose-light); font: 400 clamp(5rem, 18vw, 12rem)/.85 var(--serif); letter-spacing: -.04em; text-shadow: 0 0 55px rgba(239, 132, 160, .3); }
.forever { color: #8e7d91; font: italic 1rem var(--serif); }

.finale-stars span,
.floating-hearts span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.floating-hearts { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.floating-hearts span { bottom: -3rem; color: var(--rose-light); opacity: 0; animation: heart-float var(--duration, 5s) ease-in forwards; }
.finale-stars span { width: 4px; height: 4px; background: white; border-radius: 50%; box-shadow: 0 0 10px white; animation: star-pop 1.4s ease-out forwards; }

.scroll-reveal { opacity: 0; transform: translateY(35px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.scroll-reveal.in-view { opacity: 1; transform: translateY(0); }
.reason-card:nth-child(2), .gift-box:nth-child(2) { transition-delay: .1s; }
.reason-card:nth-child(3), .gift-box:nth-child(3) { transition-delay: .2s; }
.reason-card:nth-child(4) { transition-delay: .3s; }

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  padding: 2.2rem 1rem;
  color: #75677a;
  background: #09070d;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

footer i { color: var(--rose); font-style: normal; animation: heartbeat 1.4s ease infinite; }

@keyframes reveal-up { to { opacity: 1; transform: translateY(0); } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(25px) scale(1.08); } }
@keyframes line-pulse { 50% { transform: scaleX(.35); opacity: .35; } }
@keyframes sound-wave { to { height: 25%; } }
@keyframes letter-in { from { opacity: 0; transform: translateY(50px) rotate(-.6deg); } }
@keyframes heartbeat { 50% { transform: scale(1.35); } }
@keyframes heart-float {
  10% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--drift, 0), -110vh) rotate(var(--spin, 50deg)) scale(.3); }
}
@keyframes star-pop {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.3); }
}

@media (max-width: 760px) {
  .cursor-glow { display: none; }
  .sound-toggle {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    width: 2.8rem;
    min-height: 2.8rem;
    justify-content: center;
    padding: .65rem;
    backdrop-filter: blur(12px);
  }
  .sound-label { display: none; }
  .hero {
    min-height: 100svh;
    padding: max(5.5rem, calc(env(safe-area-inset-top) + 4.5rem)) 1.1rem max(3rem, env(safe-area-inset-bottom));
  }
  .hero::before { width: 145vw; }
  .hero::after { width: 112vw; }
  .hero__content { width: 100%; }
  h1 { font-size: clamp(3.15rem, 16.5vw, 5.4rem); line-height: .94; }
  .hero__lead { margin-block: 1.4rem 1.7rem; }
  .primary-button { width: min(100%, 17rem); min-height: 4rem; }
  .scroll-hint { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  body.started .hero { min-height: 78svh; }
  .section {
    min-height: auto;
    padding: 6.5rem 1.1rem;
  }
  .flower-section { min-height: 100svh; padding-inline: 0; }
  .container { width: min(108vw, 36rem); margin: -.5rem -4vw -1rem; }
  .flower-copy { padding: 0 .5rem; }
  .flower-copy h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .flower-center { width: 28%; }
  .flower-after { max-width: 31rem; margin: 1.5rem 1.25rem 0; }
  .section-heading,
  .letter-intro { margin-bottom: 2.5rem; }
  .section-heading h2,
  .letter-intro h2,
  .finale h2 { font-size: clamp(2.65rem, 12vw, 4.25rem); }
  .reason-grid { grid-template-columns: 1fr; }
  .reason-card { min-height: 14.5rem; padding: 1.6rem; }
  .reason-card strong { margin-top: 3.8rem; }
  .reason-secret { left: 1.6rem; right: 1.6rem; bottom: 1.6rem; }
  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem 0 0;
  }
  .gift-box { min-height: 14.5rem; }
  .gift-box:nth-child(3) { grid-column: 1 / -1; width: 50%; justify-self: center; }
  .gift-body { width: 7rem; height: 5.25rem; }
  .gift-lid { width: 7.8rem; bottom: 7.7rem; }
  .gift-tag { top: .4rem; }
  .gift-reveal { padding: 3rem 1.5rem 2rem; }
  .letter-section { grid-template-columns: 1fr; gap: .75rem; }
  .letter-intro { text-align: center; }
  .envelope { width: min(90vw, 28rem); margin-top: 4.5rem; }
  .love-letter {
    margin-top: 5rem;
    padding: 2.25rem 1.5rem;
    transform: none;
  }
  .love-letter.show { animation-name: letter-in-mobile; }
  .love-letter > p:not(.letter-date, .letter-big, .signature) { line-height: 1.75; }
  .letter-big { margin-block: 2.2rem; }
  .finale { min-height: 100svh; padding-block: 7rem; }
  .final-answer strong { font-size: clamp(3.9rem, 16vw, 6rem); }
  footer {
    flex-wrap: wrap;
    padding-bottom: max(2.2rem, env(safe-area-inset-bottom));
    text-align: center;
  }
}

@media (max-width: 420px) {
  .eyebrow, .section-kicker { letter-spacing: .16em; }
  h1 { font-size: clamp(3rem, 16vw, 4.15rem); }
  .hero__lead { font-size: .95rem; }
  .section { padding-inline: .9rem; }
  .flower-section { padding-inline: 0; }
  .reason-card { min-height: 14rem; }
  .gift-grid { grid-template-columns: 1fr; }
  .gift-box,
  .gift-box:nth-child(3) { grid-column: auto; width: 100%; min-height: 13.25rem; }
  .gift-body { width: 7.4rem; }
  .gift-lid { width: 8.2rem; }
  .gift-label { font-size: .72rem; }
  .letter-preview { padding-top: 17%; }
  .wax-seal { width: 3rem; height: 3rem; }
  .love-letter { padding-inline: 1.25rem; }
  .signature { text-align: left; }
  footer { flex-direction: column; gap: .4rem; }
}

@keyframes letter-in-mobile {
  from { opacity: 0; transform: translateY(35px); }
}

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