:root{
  --paper:#fffafc;
  --paper-2:#fff2f7;
  --pink-50:#fff5f9;
  --pink-100:#fde6ef;
  --pink-200:#f7c9db;
  --pink-300:#efabc6;
  --pink-400:#de86aa;
  --pink-500:#c9658d;
  --berry:#8f4f6c;
  --berry-dark:#563445;
  --ink:#3f2b35;
  --muted:#866c78;
  --cream:#fff8ee;
  --green:#e8f4e8;
  --shadow:0 20px 60px rgba(92,50,69,.12);
  --shadow-soft:0 12px 32px rgba(92,50,69,.09);
  --radius:28px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'Avenir Next', 'Segoe UI', sans-serif;
  --hand:'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(247,201,219,.55), transparent 24rem),
    radial-gradient(circle at 95% 35%, rgba(255,229,240,.8), transparent 28rem),
    var(--paper);
  font-family:var(--sans);
  line-height:1.55;
  overflow-x:hidden;
}
body.gift-open{overflow:auto}
button,a{font:inherit}
button{color:inherit}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--pink-200);color:var(--berry-dark)}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.22;mix-blend-mode:multiply;
  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='.045'/%3E%3C/svg%3E");
}

.section-shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
section{position:relative}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--berry)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink-400);margin-right:7px;vertical-align:1px}
em{font-family:var(--serif);font-weight:400;color:var(--berry)}

.topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  width:min(1220px,calc(100% - 24px));margin:12px auto 0;padding:11px 14px 11px 18px;
  border:1px solid rgba(143,79,108,.12);border-radius:999px;
  background:rgba(255,250,252,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 34px rgba(92,50,69,.08)
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:850;letter-spacing:-.02em}
.brand-paw{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--pink-100);color:var(--berry);font-family:var(--serif);font-size:1.2rem}
.topbar nav{display:flex;gap:6px}
.topbar nav a{text-decoration:none;color:var(--muted);font-size:.84rem;font-weight:700;padding:9px 12px;border-radius:999px;transition:.2s ease}
.topbar nav a:hover{background:var(--pink-100);color:var(--berry)}

.gift-gate{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;
  background:rgba(255,239,246,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:opacity .65s ease,visibility .65s ease;
}
.gift-gate.is-open{opacity:0;visibility:hidden;pointer-events:none}
.gift-card{
  position:relative;width:min(520px,100%);padding:54px 38px 34px;text-align:center;
  background:var(--paper);border:1px solid rgba(143,79,108,.15);border-radius:34px;box-shadow:var(--shadow);
  transform:rotate(-.6deg)
}
.gift-card::before,.gift-card::after{content:"";position:absolute;width:84px;height:28px;background:rgba(239,171,198,.38);top:-12px;transform:rotate(-6deg)}
.gift-card::before{left:38px}.gift-card::after{right:38px;transform:rotate(7deg)}
.gift-card h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,7vw,3.2rem);line-height:1.05;margin:14px 0 12px;color:var(--berry-dark)}
.gift-card p{color:var(--muted);margin:0 auto 24px;max-width:340px}
.gift-card small{display:block;margin-top:18px;color:#a58995;font-size:.75rem}
.tiny-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--pink-500)}
.gift-stamp{width:58px;height:58px;border:1px dashed var(--pink-400);border-radius:50%;display:grid;place-items:center;margin:0 auto;font-size:1.5rem;background:var(--pink-50)}

.primary-btn,.secondary-btn,.ghost-btn,.tiny-btn,.chat-random,.boop{
  border:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.primary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:var(--berry);color:white;border-radius:999px;padding:13px 19px;font-weight:800;box-shadow:0 10px 24px rgba(143,79,108,.23)
}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(143,79,108,.28)}
.secondary-btn{background:var(--paper);border:1px solid rgba(143,79,108,.17);border-radius:999px;padding:12px 17px;font-weight:800;color:var(--berry);box-shadow:var(--shadow-soft)}
.secondary-btn:hover{transform:translateY(-2px)}
.ghost-btn{background:transparent;border:1px solid rgba(143,79,108,.22);border-radius:999px;padding:12px 17px;font-weight:800;color:var(--berry)}
.ghost-btn:hover{background:var(--pink-50)}

.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center;min-height:calc(100vh - 72px);padding:92px 0 92px}
.hero-copy h1{font-size:clamp(3.4rem,6.7vw,6.35rem);line-height:.93;letter-spacing:-.065em;margin:16px 0 24px;max-width:780px;font-weight:800}
.hero-copy h1 span{display:inline-block;color:var(--berry)}
.hero-lead{font-size:1.08rem;color:var(--muted);max-width:630px;margin:0 0 28px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:34px;max-width:700px}
.mini-stats>div{padding:14px 15px;border-top:1px solid rgba(143,79,108,.16)}
.mini-stats strong{display:block;font-family:var(--serif);font-size:1.28rem;color:var(--berry-dark)}
.mini-stats span{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}

.hero-visual{position:relative;min-height:650px;display:grid;place-items:center}
.photo-frame{position:relative;background:#fff;padding:14px 14px 48px;border-radius:9px;box-shadow:0 30px 70px rgba(76,48,61,.18);will-change:transform;transition:transform .18s ease}
.photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.hero-frame{width:min(470px,88%);height:600px;transform:rotate(3.8deg)}
.hero-frame img{object-position:center 38%}
.scribble{position:absolute;bottom:13px;left:24px;font-family:var(--hand);font-size:1.06rem;color:var(--berry);transform:rotate(-2deg)}
.tape{position:absolute;width:88px;height:27px;background:rgba(255,222,234,.78);top:-8px;left:50%;transform:translateX(-50%) rotate(-4deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.floating-note{position:absolute;background:#fff9d9;padding:11px 14px;box-shadow:var(--shadow-soft);font-family:var(--hand);font-size:.96rem;z-index:2}
.note-one{left:0;top:25%;transform:rotate(-7deg)}
.note-two{right:-6px;bottom:14%;transform:rotate(6deg)}
.paw-badge{position:absolute;right:4%;top:6%;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--pink-200);border:2px solid white;box-shadow:var(--shadow-soft);font-size:2rem;transform:rotate(9deg)}

.ticker{overflow:hidden;border-block:1px solid rgba(143,79,108,.12);background:rgba(247,201,219,.24)}
.ticker-track{display:flex;width:max-content;gap:32px;padding:11px 0;animation:ticker 32s linear infinite;color:var(--berry);font-family:var(--hand);font-size:1rem}
.ticker-track span{white-space:nowrap}
@keyframes ticker{to{transform:translateX(-50%)}}

.story{padding:118px 0 125px}
.section-heading{max-width:700px;margin-bottom:42px}
.section-heading h2{font-size:clamp(2.5rem,5vw,4.6rem);line-height:.98;letter-spacing:-.05em;margin:9px 0 16px}
.section-heading p{color:var(--muted);max-width:610px;margin:0}
.centered{text-align:center;margin-inline:auto}.centered p{margin-inline:auto}

.scrapbook-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
.scrap{margin:0;background:white;padding:10px 10px 38px;border-radius:7px;box-shadow:0 16px 40px rgba(76,48,61,.13);position:relative;transition:transform .2s ease;will-change:transform}
.scrap img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.scrap figcaption{position:absolute;left:15px;bottom:10px;font-family:var(--hand);color:var(--berry-dark);font-size:.92rem}
.photo-a{grid-column:1/5;height:460px;transform:rotate(-3deg);margin-top:20px}.photo-a img{object-position:center 30%}
.photo-b{grid-column:5/9;height:535px;transform:rotate(2deg)}
.photo-c{grid-column:9/13;height:420px;transform:rotate(-1.5deg);margin-top:48px}
.photo-d{grid-column:2/6;height:360px;transform:rotate(2.2deg);margin-top:18px}
.photo-e{grid-column:6/10;height:430px;transform:rotate(-2deg);margin-top:-5px}
.photo-f{grid-column:10/13;height:350px;transform:rotate(3deg);margin-top:28px}

.bonnie-oracle{margin-top:78px;padding:28px 30px;border:1px solid rgba(143,79,108,.14);border-radius:var(--radius);display:flex;gap:26px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fff,#fff2f7);box-shadow:var(--shadow-soft)}
.bonnie-oracle h3{font-size:1.8rem;margin:4px 0 4px}.bonnie-oracle p{margin:0;font-family:var(--serif);font-style:italic;color:var(--berry);font-size:1.05rem}

.chat-section{background:var(--berry-dark);color:#fff;padding:108px 0;overflow:hidden}
.chat-section::before{content:"♡";position:absolute;right:-70px;top:35px;font-family:var(--serif);font-size:26rem;line-height:1;color:rgba(255,255,255,.035);transform:rotate(15deg)}
.light .eyebrow{color:var(--pink-300)}.light h2 em{color:var(--pink-300)}.light p{color:#d8c9d0}
.chat-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center}
.phone{max-width:380px;margin-inline:auto;background:#f6eff2;color:var(--ink);padding:12px;border-radius:42px;border:7px solid #281d22;box-shadow:0 28px 80px rgba(0,0,0,.26);position:relative}
.phone-notch{width:105px;height:22px;border-radius:0 0 16px 16px;background:#281d22;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}
.phone-top{background:#fff8fb;padding:26px 14px 12px;border-radius:29px 29px 14px 14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid rgba(143,79,108,.08)}
.phone-top .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pink-100)}
.phone-top strong{display:block;font-size:.82rem}.phone-top small{display:block;font-size:.64rem;color:var(--muted)}
.messages{height:440px;overflow:auto;padding:18px 8px 8px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),radial-gradient(circle at 20% 10%,rgba(247,201,219,.5),transparent 15rem)}
.bubble{max-width:84%;padding:10px 11px 7px;border-radius:15px;box-shadow:0 4px 10px rgba(76,48,61,.05)}
.bubble span{display:block;font-size:.82rem;line-height:1.35}.bubble small{display:block;margin-top:5px;font-size:.57rem;opacity:.55;text-align:right}
.incoming{align-self:flex-start;background:white;border-bottom-left-radius:4px}.outgoing{align-self:flex-end;background:#f5cfdf;border-bottom-right-radius:4px}
.chat-random{width:calc(100% - 16px);margin:8px;border-radius:999px;padding:10px;background:var(--berry);color:#fff;font-weight:800;font-size:.8rem}
.lore-card{background:#fff;color:var(--ink);padding:18px 18px 26px;border-radius:32px;box-shadow:0 28px 70px rgba(0,0,0,.18);transform:rotate(.8deg)}
.lore-photo{height:390px;overflow:hidden;border-radius:22px;margin-bottom:22px}.lore-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.lore-card h3{font-family:var(--serif);font-size:2.6rem;font-weight:400;margin:6px 0 8px;color:var(--berry-dark)}
.lore-card>p{color:var(--muted);font-size:1.05rem}.text-btn{border:0;background:none;padding:0;cursor:pointer;color:var(--berry);font-weight:800}
.lore-story{margin-top:18px;padding-top:16px;border-top:1px dashed var(--pink-200);color:var(--muted);font-family:var(--serif)}

.timeline{padding:115px 0}
.timeline-track{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.timeline-track::before{content:"";position:absolute;top:62px;left:7%;right:7%;height:1px;background:var(--pink-200)}
.milestone{position:relative;padding:18px 16px 22px;background:rgba(255,255,255,.65);border:1px solid rgba(143,79,108,.09);border-radius:22px;min-height:250px}
.milestone .date{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted)}
.milestone i{position:relative;z-index:2;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;margin:17px 0 18px;background:var(--pink-200);border:4px solid var(--paper);font-family:var(--serif);font-style:normal;color:var(--berry-dark)}
.milestone h3{margin:0 0 8px;font-size:1.15rem}.milestone p{margin:0;color:var(--muted);font-size:.88rem}

.game-section{padding:110px 0 120px;background:linear-gradient(180deg,#fff3f8,#f9dce8)}
.game-wrap{width:min(760px,100%);margin:0 auto;background:rgba(255,255,255,.82);border:1px solid rgba(143,79,108,.1);border-radius:32px;padding:22px;box-shadow:var(--shadow)}
.game-status{display:flex;align-items:center;gap:18px;padding:3px 2px 18px;color:var(--muted);font-size:.84rem}.game-status strong{color:var(--berry)}.tiny-btn{margin-left:auto;border-radius:999px;padding:7px 11px;background:var(--pink-100);font-size:.74rem;font-weight:800;color:var(--berry)}
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;perspective:1000px}
.memory-card{aspect-ratio:1/1.12;position:relative;border:0;background:transparent;padding:0;cursor:pointer;perspective:900px;border-radius:18px}
.memory-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);border-radius:18px;box-shadow:0 10px 24px rgba(76,48,61,.1)}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;overflow:hidden}
.memory-back{display:grid;place-items:center;background:linear-gradient(135deg,var(--pink-200),var(--pink-100));border:1px solid rgba(143,79,108,.11);font-size:2.1rem;color:var(--berry)}
.memory-back::after{content:"♡";font-family:var(--serif)}
.memory-front{transform:rotateY(180deg);background:white;padding:5px}.memory-front img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.memory-card.matched .memory-front{outline:3px solid rgba(201,101,141,.35);outline-offset:-3px}
.game-win{text-align:center;padding:30px 16px 12px}.game-win h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;margin:8px 0}.game-win p{max-width:480px;margin:0 auto 18px;color:var(--muted)}.win-paw{font-size:3rem}

.little-moments{padding:112px 0}
.moment-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:280px;gap:16px}
.moment{margin:0;position:relative;overflow:hidden;border-radius:26px;background:var(--pink-100)}
.moment img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.moment:hover img{transform:scale(1.035)}
.moment figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,250,252,.86);backdrop-filter:blur(8px);padding:7px 10px;border-radius:999px;font-family:var(--hand);font-size:.84rem;color:var(--berry-dark)}
.moment.wide{grid-row:span 2}.moment.tall{grid-row:span 2}.moment.wide img{object-position:center}.moment.tall img{object-position:center 25%}

.love-note{padding:40px 0 125px}
.note-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;background:var(--cream);border:1px solid rgba(143,79,108,.09);border-radius:38px;padding:38px;box-shadow:var(--shadow)}
.note-card::before{content:"";position:absolute;inset:12px;border:1px dashed rgba(143,79,108,.13);border-radius:30px;pointer-events:none}
.note-sticker{position:absolute;right:28px;top:-22px;background:var(--pink-200);padding:10px 16px;border-radius:999px;font-family:var(--hand);transform:rotate(4deg);box-shadow:var(--shadow-soft)}
.note-photo{position:relative;z-index:1;transform:rotate(-2deg);background:white;padding:11px 11px 40px;border-radius:8px;box-shadow:var(--shadow-soft)}
.note-photo img{width:100%;height:460px;object-fit:cover;border-radius:3px;object-position:center 38%}
.note-copy{position:relative;z-index:1}.note-copy h2{font-size:clamp(2.6rem,5vw,4.4rem);line-height:.96;letter-spacing:-.05em;margin:8px 0 20px}.note-copy p{color:var(--muted);font-size:1rem}.signature{font-family:var(--hand);font-size:1.4rem;color:var(--berry);margin:22px 0 20px;transform:rotate(-1deg);transform-origin:left}.strike{text-decoration:line-through;text-decoration-color:var(--pink-500);text-decoration-thickness:2px}.secret-line{margin-top:16px;background:#fff;border-radius:16px;padding:13px 15px;color:var(--berry);font-family:var(--serif);font-style:italic}

footer{width:min(1180px,calc(100% - 36px));margin:0 auto 28px;padding-top:20px;border-top:1px solid rgba(143,79,108,.13);display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted);font-size:.78rem}
.boop{background:var(--pink-100);color:var(--berry);border-radius:999px;padding:8px 12px;font-size:.73rem;font-weight:800}

.heart-layer{position:fixed;inset:0;pointer-events:none;z-index:450;overflow:hidden}
.float-heart{position:absolute;bottom:-30px;font-family:var(--serif);color:var(--pink-500);animation:heartFly 1.9s cubic-bezier(.2,.7,.2,1) forwards;filter:drop-shadow(0 4px 4px rgba(143,79,108,.1))}
@keyframes heartFly{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate3d(var(--drift),-105vh,0) rotate(var(--spin));opacity:0}}
.toast{position:fixed;left:50%;bottom:24px;z-index:460;transform:translate(-50%,20px);opacity:0;background:var(--berry-dark);color:white;padding:10px 15px;border-radius:999px;font-size:.8rem;box-shadow:var(--shadow);transition:.25s ease;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:30px;padding-top:70px}.hero-visual{min-height:580px}.hero-frame{height:540px;width:min(430px,88%)}
  .scrapbook-grid{grid-template-columns:repeat(2,1fr)}
  .photo-a,.photo-b,.photo-c,.photo-d,.photo-e,.photo-f{grid-column:auto;height:430px;margin-top:0}.photo-b,.photo-e{height:500px}
  .chat-layout{grid-template-columns:1fr;gap:45px}.lore-card{max-width:650px;margin:auto}.phone{order:2}.lore-card{order:1}
  .timeline-track{grid-template-columns:repeat(2,1fr)}.timeline-track::before{display:none}
  .note-card{grid-template-columns:1fr}.note-photo{max-width:520px;margin:auto}.note-photo img{height:auto;max-height:600px}
}

@media(max-width:720px){
  .topbar{top:7px;width:calc(100% - 14px);padding:8px 9px 8px 12px}.brand span:last-child{display:none}.topbar nav{gap:1px}.topbar nav a{font-size:.72rem;padding:8px 8px}
  .section-shell{width:min(100% - 24px,1180px)}
  .hero{padding:58px 0 72px;min-height:auto}.hero-copy h1{font-size:clamp(3rem,16vw,4.6rem)}.hero-lead{font-size:.98rem}
  .mini-stats{grid-template-columns:1fr 1fr}
  .hero-visual{min-height:510px}.hero-frame{height:450px}.floating-note{font-size:.8rem}.note-one{left:2%;top:22%}.note-two{right:0}.paw-badge{width:61px;height:61px;font-size:1.5rem}
  .story,.timeline,.little-moments{padding:82px 0}.section-heading{margin-bottom:30px}.section-heading h2{font-size:clamp(2.45rem,12vw,3.4rem)}
  .scrapbook-grid{gap:12px}.photo-a,.photo-b,.photo-c,.photo-d,.photo-e,.photo-f{height:320px;padding:7px 7px 34px}.photo-b,.photo-e{height:380px}.scrap figcaption{font-size:.75rem;left:11px}
  .bonnie-oracle{flex-direction:column;align-items:flex-start;margin-top:48px;padding:22px}.bonnie-oracle h3{font-size:1.45rem}
  .chat-section{padding:82px 0}.lore-photo{height:300px}.lore-card h3{font-size:2.1rem}
  .timeline-track{grid-template-columns:1fr}.milestone{min-height:auto;display:grid;grid-template-columns:auto 1fr;column-gap:12px}.milestone .date{grid-column:1/-1}.milestone i{grid-column:1;grid-row:2/4;margin:13px 0}.milestone h3{grid-column:2;margin-top:13px}.milestone p{grid-column:2}
  .game-section{padding:82px 0}.game-wrap{padding:13px;border-radius:24px}.memory-grid{gap:7px}.memory-card{border-radius:14px}.memory-face,.memory-card-inner{border-radius:14px}.memory-back{font-size:1.6rem}.game-status{gap:9px;font-size:.74rem}
  .moment-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.moment.wide,.moment.tall{grid-row:span 2}.moment.wide{grid-column:1/-1;grid-row:span 1}.moment.tall{grid-row:span 2}
  .love-note{padding:20px 0 90px}.note-card{padding:25px 18px 24px;border-radius:28px;gap:28px}.note-card::before{inset:8px}.note-photo{padding:8px 8px 32px}.note-copy h2{font-size:clamp(2.5rem,13vw,3.5rem)}
  footer{width:calc(100% - 24px);flex-direction:column;align-items:flex-start}
}

@media(max-width:430px){
  .topbar nav a:nth-child(2){display:none}
  .hero-frame{height:420px}.hero-visual{min-height:470px}
  .scrapbook-grid{grid-template-columns:1fr}.photo-a,.photo-b,.photo-c,.photo-d,.photo-e,.photo-f{height:420px;transform:rotate(0)}
  .photo-b,.photo-e{height:500px}
  .phone{max-width:100%;border-width:6px;border-radius:35px}.messages{height:390px}
  .memory-grid{grid-template-columns:repeat(4,1fr)}
  .moment-grid{grid-template-columns:1fr;grid-auto-rows:300px}.moment.wide,.moment.tall{grid-column:auto;grid-row:auto}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.ticker-track{animation:none}.reveal{opacity:1;transform:none;transition:none}.photo-frame,.scrap{transition:none}.float-heart{animation-duration:.01ms}.memory-card-inner{transition:none}
}

/* 21st birthday letter */
.birthday-section{padding:28px 0 105px}
.birthday-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#fff8fb 0%,#fff0f6 58%,#fde3ee 100%);
  border:1px solid rgba(143,79,108,.12);border-radius:40px;padding:46px;
  box-shadow:var(--shadow)
}
.birthday-card::before{
  content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-120px;top:-140px;
  background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.7)
}
.birthday-confetti{position:absolute;right:34px;top:24px;font-family:var(--hand);letter-spacing:.45em;color:var(--pink-400);transform:rotate(5deg)}
.birthday-head{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;max-width:930px}
.birthday-number{
  width:126px;height:126px;border-radius:34px;display:grid;place-items:center;
  background:var(--berry);color:white;font-family:var(--serif);font-size:4.9rem;line-height:1;
  box-shadow:0 18px 34px rgba(143,79,108,.2);transform:rotate(-4deg)
}
.birthday-head h2{font-size:clamp(2.7rem,5vw,4.9rem);line-height:.95;letter-spacing:-.055em;margin:7px 0 13px}
.birthday-head p{margin:0;color:var(--muted);max-width:690px}
.birthday-envelope{position:relative;z-index:1;margin-top:36px;background:rgba(255,255,255,.72);border:1px solid rgba(143,79,108,.11);border-radius:28px;box-shadow:var(--shadow-soft);overflow:hidden}
.birthday-open{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;text-align:left;border:0;background:transparent;padding:20px 22px;cursor:pointer;color:var(--ink)}
.birthday-open:hover{background:rgba(255,255,255,.5)}
.birthday-open strong{display:block;font-size:1rem;color:var(--berry-dark)}
.birthday-open small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.envelope-icon{width:48px;height:48px;border-radius:15px;background:var(--pink-100);display:grid;place-items:center;font-size:1.45rem}
.birthday-arrow{font-family:var(--serif);font-size:1.4rem;color:var(--berry);transition:transform .25s ease}
.birthday-open[aria-expanded="true"] .birthday-arrow{transform:rotate(180deg)}
.birthday-letter{border-top:1px dashed rgba(143,79,108,.18);padding:26px 28px 30px;background:rgba(255,253,249,.78);font-family:var(--serif);font-size:1.04rem;line-height:1.8;color:#59404c}
.birthday-letter p{margin:0 0 18px;max-width:900px}
.birthday-letter p:last-of-type{margin-bottom:24px}
.birthday-signature{font-family:var(--hand);font-size:1.35rem;color:var(--berry);transform:rotate(-1deg);transform-origin:left}
.birthday-signature span{font-size:.88rem;color:var(--muted)}
.birthday-wishbox{position:relative;z-index:1;margin-top:28px;padding:24px;border:1px dashed rgba(143,79,108,.18);border-radius:25px;text-align:center;background:rgba(255,255,255,.38)}
.birthday-candles{display:flex;justify-content:center;align-items:flex-end;gap:7px;flex-wrap:wrap;max-width:620px;margin:0 auto 22px;min-height:55px}
.birthday-candle{position:relative;width:10px;height:31px;border-radius:5px 5px 3px 3px;background:linear-gradient(90deg,var(--pink-300),#fff 48%,var(--pink-200));box-shadow:inset 0 0 0 1px rgba(143,79,108,.07);transition:opacity .45s ease,transform .45s ease}
.birthday-candle::before{content:"";position:absolute;left:50%;top:-15px;width:9px;height:14px;transform:translateX(-50%);border-radius:55% 55% 55% 55%;background:#ffcc76;box-shadow:0 0 12px rgba(255,181,77,.65);transform-origin:center bottom;animation:candleFlicker .9s ease-in-out infinite alternate}
.birthday-candle:nth-child(3n)::before{animation-delay:.2s}.birthday-candle:nth-child(4n)::before{animation-delay:.35s}
.birthday-candles.blown .birthday-candle::before{opacity:0;transform:translateX(-50%) scale(.2)}
.birthday-candles.blown .birthday-candle{opacity:.72;transform:translateY(3px)}
.birthday-wish{margin:17px 0 0;font-family:var(--serif);font-style:italic;color:var(--berry);font-size:1.04rem}
@keyframes candleFlicker{from{transform:translateX(-50%) rotate(-3deg) scale(.92)}to{transform:translateX(-50%) rotate(4deg) scale(1.08)}}

@media(max-width:720px){
  .birthday-section{padding:10px 0 82px}.birthday-card{padding:28px 18px;border-radius:30px}.birthday-confetti{display:none}
  .birthday-head{grid-template-columns:1fr;gap:18px}.birthday-number{width:92px;height:92px;border-radius:26px;font-size:3.55rem}
  .birthday-head h2{font-size:clamp(2.7rem,13vw,3.7rem)}.birthday-envelope{margin-top:27px;border-radius:22px}
  .birthday-open{padding:16px 15px;gap:11px}.envelope-icon{width:42px;height:42px;border-radius:13px}
  .birthday-letter{padding:22px 18px 24px;font-size:.98rem;line-height:1.72}.birthday-signature span{display:block;margin-top:3px}
  .birthday-wishbox{padding:20px 12px}.birthday-candles{gap:6px}.birthday-candle{width:9px;height:27px}
}

/* ============================================================
   v2 — snimkice, arcade (4 igrice), lightbox, nove fotkice
   ============================================================ */

/* --- nove fotke u scrapbooku --- */
.photo-g{grid-column:1/5;height:475px;transform:rotate(-2deg);margin-top:14px}
.photo-h{grid-column:5/9;height:405px;transform:rotate(2.6deg);margin-top:38px}
.photo-i{grid-column:9/13;height:505px;transform:rotate(-2.8deg);margin-top:-4px}

/* --- klikni za veliko --- */
.scrap,.moment{cursor:zoom-in}

/* --- snimkice --- */
.reel-section{padding:112px 0 120px;background:linear-gradient(180deg,#fff 0%,#fff2f8 45%,#fff 100%);overflow:hidden}
.reel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;max-width:880px;margin-inline:auto}
.reel{position:relative;margin:0;background:#fff;padding:12px 12px 44px;border-radius:10px;box-shadow:0 26px 62px rgba(76,48,61,.17);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.reel:nth-child(odd){transform:rotate(-1.7deg)}
.reel:nth-child(even){transform:rotate(1.5deg)}
.reel:hover{transform:rotate(0) translateY(-4px)}
.reel-stage{position:relative;border-radius:4px;overflow:hidden;background:#f0dfe8;aspect-ratio:9/16}
.reel-stage video{width:100%;height:100%;object-fit:cover;display:block}
.reel-play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,rgba(86,52,69,.05),rgba(86,52,69,.4));transition:opacity .35s ease}
.reel-play i{font-style:normal;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(255,250,252,.94);color:var(--berry);font-size:1.35rem;padding-left:5px;box-shadow:0 14px 32px rgba(76,48,61,.28);transition:transform .25s ease}
.reel-play:hover i{transform:scale(1.08)}
.reel-play b{position:absolute;left:0;right:0;bottom:16px;color:#fff;font-family:var(--hand);font-weight:400;font-size:.95rem;text-shadow:0 2px 10px rgba(76,48,61,.55)}
.reel.is-playing .reel-play{opacity:0;pointer-events:none}
.reel figcaption{position:absolute;left:17px;bottom:11px;font-family:var(--hand);color:var(--berry-dark);font-size:.95rem}
.reel .tape{top:-10px}
.reel-hint{text-align:center;margin:34px auto 0;color:var(--muted);font-family:var(--hand);font-size:1.02rem}

/* --- arcade --- */
.arcade-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 26px}
.arcade-tab{border:1px solid rgba(143,79,108,.16);background:rgba(255,255,255,.7);color:var(--muted);border-radius:999px;padding:11px 17px;font-weight:800;font-size:.85rem;cursor:pointer;transition:.22s ease}
.arcade-tab:hover{background:#fff;color:var(--berry);transform:translateY(-1px)}
.arcade-tab[aria-selected="true"]{background:var(--berry);border-color:var(--berry);color:#fff;box-shadow:0 10px 24px rgba(143,79,108,.24)}
.arcade-panel[hidden]{display:none}
.game-intro{color:var(--muted);font-size:.88rem;margin:0 0 16px;text-align:center}

/* --- nahrani Bonnija --- */
.feed-stage{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(180deg,#fff8fb,#fde9f1);border:1px solid rgba(143,79,108,.1)}
#feedCanvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:default}
.feed-stage.playing #feedCanvas{touch-action:none;cursor:none}
.feed-hud{display:flex;align-items:center;gap:16px;padding:3px 2px 15px;color:var(--muted);font-size:.84rem;flex-wrap:wrap}
.feed-hud strong{color:var(--berry)}
.feed-lives{letter-spacing:2px;color:var(--pink-500)}
.feed-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:22px;background:rgba(255,246,250,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.feed-overlay[hidden]{display:none}
.feed-overlay h4{font-family:var(--serif);font-weight:400;font-size:2rem;margin:6px 0 8px;color:var(--berry-dark)}
.feed-overlay p{margin:0 auto 16px;max-width:400px;color:var(--muted);font-size:.9rem}
.feed-legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;font-size:.82rem;color:var(--muted)}
.feed-legend span{background:rgba(255,255,255,.75);border:1px solid rgba(143,79,108,.12);border-radius:999px;padding:6px 11px}

/* --- kviz --- */
.quiz{max-width:620px;margin-inline:auto}
.quiz-progress{display:flex;gap:6px;justify-content:center;margin-bottom:20px}
.quiz-dot{width:9px;height:9px;border-radius:50%;background:var(--pink-200);transition:.25s ease}
.quiz-dot.done{background:var(--pink-500)}
.quiz-dot.now{background:var(--berry);transform:scale(1.35)}
.quiz-q{font-family:var(--serif);font-size:1.5rem;line-height:1.25;color:var(--berry-dark);margin:0 0 18px;text-align:center}
.quiz-options{display:grid;gap:9px}
.quiz-opt{text-align:left;border:1px solid rgba(143,79,108,.15);background:#fff;border-radius:17px;padding:14px 16px;font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer;transition:.2s ease}
.quiz-opt:hover:not(:disabled){transform:translateX(3px);border-color:var(--pink-400);background:var(--pink-50)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.correct{background:#e9f6ec;border-color:#94ccA3;color:#2f6b40}
.quiz-opt.wrong{background:#fdecef;border-color:var(--pink-400);color:var(--pink-500)}
.quiz-feedback{margin:16px 0 0;min-height:26px;text-align:center;font-family:var(--serif);font-style:italic;color:var(--berry)}
.quiz-next{display:block;margin:16px auto 0}
.quiz-result{text-align:center;padding:12px 0}
.quiz-score{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--berry-dark)}
.quiz-score span{font-size:1.4rem;color:var(--muted)}
.quiz-result h4{font-size:1.6rem;margin:14px 0 8px}
.quiz-result p{color:var(--muted);max-width:420px;margin:0 auto 20px}

/* --- slagalica --- */
.puzzle{max-width:430px;margin-inline:auto}
.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;aspect-ratio:1/1;background:var(--pink-100);padding:6px;border-radius:22px}
.puzzle-tile{border:0;padding:0;border-radius:13px;background-size:300% 300%;background-color:var(--pink-100);cursor:pointer;position:relative;transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 4px 12px rgba(76,48,61,.09)}
.puzzle-tile:hover{transform:scale(1.03)}
.puzzle-tile.empty{background-image:none!important;background-color:rgba(247,201,219,.35);box-shadow:none;cursor:default}
.puzzle-tile.empty:hover{transform:none}
.puzzle.solved .puzzle-tile{box-shadow:0 4px 14px rgba(201,101,141,.28)}
.puzzle.solved .puzzle-tile.empty{background-image:var(--puzzle-img)!important;background-color:transparent;background-size:300% 300%}
.puzzle-peek{position:relative;margin-top:14px;border-radius:18px;overflow:hidden;max-height:0;transition:max-height .4s ease}
.puzzle-peek.open{max-height:340px}
.puzzle-peek img{width:100%;height:300px;object-fit:cover}

/* --- lightbox --- */
.lightbox{position:fixed;inset:0;z-index:470;display:grid;place-items:center;padding:26px;background:rgba(86,52,69,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.lightbox.open{opacity:1;visibility:visible}
.lightbox figure{margin:0;background:#fff;padding:12px 12px 44px;border-radius:10px;box-shadow:0 40px 90px rgba(0,0,0,.4);transform:scale(.94);transition:transform .35s cubic-bezier(.2,.7,.2,1);max-width:min(760px,100%)}
.lightbox.open figure{transform:scale(1)}
.lightbox img{max-height:min(74vh,760px);width:auto;max-width:100%;border-radius:3px;margin-inline:auto}
.lightbox figcaption{position:absolute;left:26px;bottom:14px;font-family:var(--hand);color:var(--berry-dark)}
.lightbox-close{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,250,252,.92);color:var(--berry);font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow-soft)}
.lightbox-close:hover{transform:scale(1.06)}

@media(max-width:980px){
  .photo-g,.photo-h,.photo-i{grid-column:auto;height:430px;margin-top:0}
  .reel-grid{gap:26px}
}
@media(max-width:720px){
  .reel-section{padding:80px 0}
  .reel-grid{grid-template-columns:1fr;gap:30px;max-width:340px}
  .reel{padding:9px 9px 38px}
  .photo-g,.photo-h,.photo-i{height:320px;padding:7px 7px 34px}
  .arcade-tab{padding:10px 13px;font-size:.78rem}
  .quiz-q{font-size:1.24rem}
  .quiz-opt{padding:12px 13px;font-size:.87rem}
  .feed-hud{gap:11px;font-size:.76rem}
  .feed-stage{aspect-ratio:3/4;border-radius:20px}
  .feed-overlay h4{font-size:1.5rem}
  .feed-legend{gap:7px;font-size:.75rem;margin-bottom:14px}
  .lightbox{padding:14px}
  .lightbox figure{padding:8px 8px 34px}
  .lightbox figcaption{left:16px;bottom:10px;font-size:.85rem}
}
@media(max-width:430px){
  .photo-g,.photo-h,.photo-i{height:420px;transform:rotate(0)}
}
@media(prefers-reduced-motion:reduce){
  .reel,.puzzle-tile,.lightbox figure{transition:none}
}

/* ============================================================
   v3 — živi brojač, iskaznica, razlozi, ambijent i animacijice
   ============================================================ */

/* --- traka napretka --- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;background:transparent}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink-300),var(--berry));border-radius:0 3px 3px 0;transition:width .1s linear}
.scroll-progress span::after{content:"🐾";position:absolute;top:-6px;right:-9px;font-size:.72rem;filter:saturate(.8)}
.scroll-progress span{position:relative}

/* --- latice u pozadini --- */
.petals{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.petal{position:absolute;top:-40px;font-family:var(--serif);color:var(--pink-300);opacity:0;animation:petalFall linear infinite;will-change:transform}
@keyframes petalFall{
  0%{transform:translate3d(0,-40px,0) rotate(0);opacity:0}
  8%{opacity:.5}
  92%{opacity:.4}
  100%{transform:translate3d(var(--sway),105vh,0) rotate(var(--tumble));opacity:0}
}

/* --- trag srca za mišem --- */
.trail-heart{position:fixed;z-index:440;pointer-events:none;font-family:var(--serif);color:var(--pink-400);animation:trailFade .9s ease-out forwards;will-change:transform,opacity}
@keyframes trailFade{0%{transform:translate(-50%,-50%) scale(.7);opacity:.85}100%{transform:translate(-50%,-140%) scale(1.15);opacity:0}}

/* --- disanje logotipa i sjaj na "Puki" --- */
.brand-paw{animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.hero-copy h1 em{background:linear-gradient(100deg,var(--berry) 20%,var(--pink-400) 42%,var(--berry) 64%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6.5s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:180% 0}50%{background-position:-40% 0}}

/* --- živi brojač --- */
.together{margin-top:64px;position:relative;overflow:hidden;padding:38px 34px 32px;border-radius:var(--radius);border:1px solid rgba(143,79,108,.13);background:linear-gradient(140deg,#fff 0%,#fff4f9 60%,#fde7f0 100%);box-shadow:var(--shadow-soft);text-align:center}
.together::before{content:"♡";position:absolute;left:-40px;bottom:-90px;font-family:var(--serif);font-size:15rem;line-height:1;color:rgba(239,171,198,.16)}
.together h3{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,2.9rem);margin:8px 0 26px;color:var(--berry-dark)}
.together-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:620px;margin:0 auto}
.together-grid>div{background:rgba(255,255,255,.72);border:1px solid rgba(143,79,108,.1);border-radius:20px;padding:16px 8px 13px}
.together-grid strong{display:block;font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);line-height:1;color:var(--berry);font-variant-numeric:tabular-nums}
.together-grid span{display:block;margin-top:6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--muted)}
.together-grid>div:last-child strong{transition:transform .18s ease}
.together-grid>div:last-child.tick strong{transform:scale(1.12)}
.together-note{position:relative;margin:24px auto 0;max-width:520px;font-family:var(--hand);font-size:1.12rem;color:var(--berry)}

/* --- Bonnijeva iskaznica --- */
.id-card{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;padding:26px;border-radius:var(--radius);border:1px solid rgba(143,79,108,.14);background:var(--cream);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.id-card::before{content:"";position:absolute;inset:9px;border:1px dashed rgba(143,79,108,.16);border-radius:22px;pointer-events:none}
.id-photo{position:relative;width:168px;height:200px;border-radius:16px;overflow:hidden;background:var(--pink-100);box-shadow:0 12px 26px rgba(76,48,61,.14);transform:rotate(-1.6deg)}
.id-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.id-body{position:relative}
.id-body h3{font-family:var(--serif);font-weight:400;font-size:2.3rem;margin:4px 0 14px;color:var(--berry-dark)}
.id-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px;margin:0}
.id-rows>div{display:grid;grid-template-columns:112px 1fr;gap:8px;align-items:baseline;padding-bottom:7px;border-bottom:1px dashed rgba(143,79,108,.16)}
.id-rows dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:var(--muted)}
.id-rows dd{margin:0;font-size:.9rem;font-weight:700;color:var(--berry-dark)}
.id-meters{display:grid;gap:9px;margin-top:18px;max-width:430px}
.id-meter{display:grid;grid-template-columns:130px 1fr auto;gap:11px;align-items:center;font-size:.78rem;color:var(--muted);font-weight:700}
.id-bar{height:8px;border-radius:99px;background:rgba(247,201,219,.5);overflow:hidden}
.id-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--pink-300),var(--berry));transition:width 1.15s cubic-bezier(.2,.7,.2,1)}
.in-view .id-bar i{width:var(--fill)}
.id-stamp{position:absolute;right:6px;top:-2px;font-family:var(--hand);color:var(--pink-500);border:2px solid var(--pink-300);border-radius:12px;padding:5px 12px;transform:rotate(-9deg);font-size:.9rem;opacity:.85}

/* --- razlozi --- */
.reasons-section{padding:104px 0 24px}
.reasons-card{position:relative;overflow:hidden;text-align:center;max-width:760px;margin-inline:auto;padding:44px 34px 38px;border-radius:38px;border:1px solid rgba(143,79,108,.12);background:linear-gradient(160deg,#fff 0%,#fff5fa 55%,#fce4ee 100%);box-shadow:var(--shadow)}
.reasons-card::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:-110px;top:-120px;background:rgba(255,255,255,.5)}
.reason-jar{position:relative;font-size:2.6rem;line-height:1;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.reasons-card.shaking .reason-jar{animation:jarShake .55s ease}
@keyframes jarShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-11deg)}45%{transform:rotate(9deg)}70%{transform:rotate(-5deg)}}
.reason-text{position:relative;font-family:var(--serif);font-size:clamp(1.25rem,2.7vw,1.75rem);line-height:1.45;color:var(--berry-dark);margin:20px auto 22px;max-width:560px;min-height:5rem;display:flex;align-items:center;justify-content:center}
.reason-text.swap{animation:reasonIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes reasonIn{0%{opacity:0;transform:translateY(12px) scale(.98)}100%{opacity:1;transform:none}}
.reason-meta{position:relative;margin-top:16px;font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--muted)}
.reason-meta strong{color:var(--berry)}

@media(max-width:980px){
  .id-card{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}
  .id-photo{width:190px;height:210px;transform:none}
  .id-rows{grid-template-columns:1fr;text-align:left}
  .id-meters{margin-inline:auto;width:100%}
  .id-stamp{position:static;display:inline-block;margin-top:14px;transform:rotate(-3deg)}
}
@media(max-width:720px){
  .together{margin-top:44px;padding:26px 16px 24px;border-radius:26px}
  .together-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .together h3{margin-bottom:20px}
  .together-note{font-size:1rem;margin-top:20px}
  .id-card{margin-top:26px;padding:20px 15px;border-radius:26px}
  .id-rows>div{grid-template-columns:100px 1fr}
  .id-meter{grid-template-columns:110px 1fr auto;font-size:.72rem}
  .reasons-section{padding:76px 0 10px}
  .reasons-card{padding:32px 18px 28px;border-radius:28px}
  .reason-text{min-height:6.5rem}
  .petal{display:none}
}
@media(prefers-reduced-motion:reduce){
  .brand-paw,.hero-copy h1 em{animation:none}
  .hero-copy h1 em{-webkit-text-fill-color:var(--berry);color:var(--berry)}
  .petals,.trail-heart{display:none}
  .id-bar i{transition:none}
  .reason-text.swap,.reasons-card.shaking .reason-jar{animation:none}
  .scroll-progress span{transition:none}
}