:root{
  --paper:#FFF9F6; --petal:#F6D9DF; --garnet:#A82B4E; --claret:#34101F;
  --ink:#2A1F24; --dusk:#80696F; --ink-soft:#4D3E44; --on-dark:#EAD7DC;
  --serif:"Newsreader","New York",Georgia,serif;
  --sans:-apple-system,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --dock-h:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;container-type:inline-size}
a{color:var(--garnet)}
a:hover{color:var(--claret)}
button{font:inherit}
h1,h2,p,ol{margin:0}
.wordmark{font-family:var(--serif);font-weight:500;color:var(--garnet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wordmark{display:flex;align-items:center;gap:.4em}
.wordmark>span{overflow:hidden;text-overflow:ellipsis}
.mark{flex:none;height:1.3em;width:1.02em;fill:currentColor} /* 62:79, the mark's own proportions */

/* ---------- stage ---------- */
.stage{display:flex;justify-content:center;align-items:center;max-width:1240px;margin:0 auto}
.side{display:none}

/* ---------- story ---------- */
.story{position:relative;width:100%;height:min(calc(100svh - var(--dock-h)),820px);min-height:520px;overflow:hidden;background:var(--claret);user-select:none;-webkit-user-select:none;flex:none;container-type:inline-size}
.frames,.frame{position:absolute;inset:0}
.frame{opacity:0;transition:opacity .7s ease;pointer-events:none}
.frame.is-active{opacity:1}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 6.5s linear}
.frame.is-active img{transform:scale(1.07)}
.scrim-top{position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(to bottom,rgba(26,6,14,.62),rgba(26,6,14,0))}
.scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:68%;background:linear-gradient(to top,rgba(26,6,14,.9) 0%,rgba(26,6,14,.72) 38%,rgba(26,6,14,0) 100%)}
.frame-in{position:absolute;inset:0;padding:74px 22px 30px;display:flex;flex-direction:column;justify-content:space-between}
.frame-top{display:flex;flex-direction:column;gap:10px}
.date{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff}
.frame-head{font-family:var(--serif);font-weight:500;font-size:clamp(30px,8.6cqi,38px);line-height:1.08;letter-spacing:-.01em;color:#fff;max-width:13em;text-wrap:balance}
.frame-bottom{display:flex;flex-direction:column;gap:12px}
.frame-bottom.has-heart{padding-right:74px}
.tag{align-self:flex-start;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--claret);background:var(--petal);padding:4px 9px;border-radius:99px}
.note{font-family:var(--serif);font-size:clamp(22px,6.4cqi,27px);line-height:1.3;color:#fff;text-wrap:pretty}
.sign{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--petal)}
.sign i{display:block;width:24px;height:1px;background:var(--petal)}
.explain{margin-top:4px;font-size:14px;line-height:1.45;color:var(--on-dark);max-width:32ch}

.heart{position:absolute;right:22px;bottom:30px;z-index:4;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--garnet);box-shadow:0 10px 28px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .25s,opacity .4s;opacity:0;pointer-events:none}
.heart svg{fill:#fff}
.story[data-slot="4"] .heart{opacity:1;pointer-events:auto}
.heart[aria-pressed="true"]{background:var(--petal)}
.heart[aria-pressed="true"] svg{fill:var(--garnet)}
.heart.pop{transform:scale(1.18)}

.endcard{position:absolute;inset:0;z-index:5;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .6s ease;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:84px 26px 30px}
.story[data-slot="5"] .endcard{opacity:1;pointer-events:auto}
.endcard h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,9.6cqi,42px);line-height:1.05;letter-spacing:-.015em;color:var(--garnet);text-wrap:balance}
.end-note{font-size:14px;color:var(--dusk)}

.steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:14px;align-items:baseline;font-size:16px;line-height:1.4}
.steps li>span:first-child{font-family:var(--serif);font-size:20px;color:var(--garnet);width:12px;flex:none}

.badge{align-self:flex-start;display:block;line-height:0}
.badge img{display:block;height:48px;width:auto}

.tap{position:absolute;inset:0;z-index:3;cursor:pointer}
.story[data-slot="5"] .tap{pointer-events:none}

.bars{position:absolute;left:12px;right:12px;top:10px;z-index:6;display:flex;gap:4px}
.bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.bars b{display:block;height:100%;width:0;background:#fff}
.story[data-slot="5"] .bars i{background:rgba(168,43,78,.18)}
.story[data-slot="5"] .bars b{background:var(--garnet)}

.chrome{position:absolute;left:22px;right:16px;top:26px;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.chrome .wordmark{font-size:15px;gap:.3em;color:#fff;transition:color .6s} /* 15px, not 16, so the name fits beside the mark on a 375px phone */
.chrome .mark{height:1.2em;width:.94em}
.story[data-slot="5"] .chrome .wordmark{color:var(--garnet)}

.mkt{display:flex;gap:2px;border-radius:99px;padding:2px;flex:none;pointer-events:auto}
.mkt button{border:0;border-radius:99px;padding:5px 10px;font-size:10.5px;font-weight:600;letter-spacing:.08em;cursor:pointer;background:transparent;min-height:28px}
.mkt-dark{background:rgba(26,6,14,.28)}
.mkt-dark button{color:#fff}
.mkt-dark button[aria-pressed="true"]{background:#fff;color:var(--claret)}
.story[data-slot="5"] .mkt-dark{background:rgba(168,43,78,.1)}
.story[data-slot="5"] .mkt-dark button{color:var(--garnet)}
.story[data-slot="5"] .mkt-dark button[aria-pressed="true"]{background:var(--garnet);color:#fff}
.mkt-light{border:1px solid var(--petal);align-self:flex-start}
.mkt-light button{color:var(--dusk);padding:5px 12px;font-size:11px}
.mkt-light button[aria-pressed="true"]{background:var(--garnet);color:#fff}

/* ---------- dock (phone) ---------- */
.dock{position:sticky;bottom:0;z-index:10;background:rgba(255,249,246,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--petal);padding:10px 16px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.dock-btn{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:99px;background:var(--garnet);color:#fff;font-size:16px;font-weight:600;text-decoration:none}
.dock-btn:hover{color:#fff;background:#8f2242}
.dock-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--dusk)}
.dock-row a{color:var(--dusk);white-space:nowrap}

/* ---------- below ---------- */
.below{max-width:760px;margin:0 auto;padding:56px 22px 24px;display:flex;flex-direction:column;gap:56px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--garnet)}
.received{display:flex;flex-direction:column;gap:14px}
.received h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,7cqi,36px);line-height:1.1;text-wrap:balance}
.received .steps li>span:first-child{font-size:19px}
.muted{font-size:14px;color:var(--dusk)}
.faq{display:flex;flex-direction:column}
.faq .eyebrow{margin-bottom:10px}
.faq details{border-top:1px solid var(--petal)}
.faq details:last-of-type{border-bottom:1px solid var(--petal)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;min-height:44px;font-family:var(--serif);font-size:21px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--sans);font-size:22px;line-height:1;color:var(--garnet);width:20px;text-align:center}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;font-size:16px;color:var(--ink-soft);max-width:60ch;text-wrap:pretty}

.footer{max-width:760px;margin:0 auto;padding:24px 22px 32px;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:13px;color:var(--dusk)}
.footer .wordmark{font-size:16px}
.footer nav{display:flex;flex-wrap:wrap;gap:18px}
.footer a{color:var(--dusk)}

/* ---------- landscape phones ---------- */
@media (orientation:landscape) and (max-height:560px){
  .story{min-height:0;height:calc(100svh - 20px);width:calc((100svh - 20px) * 9 / 16);max-width:100%;margin:10px auto;border-radius:20px}
  .dock{display:none}
}

/* ---------- desktop ---------- */
@media (min-width:1100px){
  :root{--dock-h:0px}
  .stage{gap:56px;padding:48px 32px}
  .side{display:flex;flex-direction:column}
  .side-left{flex:1;max-width:380px;gap:20px}
  .side-left .wordmark{font-size:19px}
  .headline{font-family:var(--serif);font-weight:500;font-size:52px;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
  .sub{font-size:17px;color:var(--ink-soft);text-wrap:pretty}
  .side-right{flex:1;max-width:300px;gap:18px;font-size:14px}
  .qr-card{background:#fff;border:1px solid var(--petal);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;color:var(--ink-soft)}
  .qr-card img{display:block;width:128px;height:128px}
  .pill{color:var(--claret);background:var(--petal);border-radius:14px;padding:12px 14px}
  .story{width:400px;height:800px;min-height:0;border-radius:28px;box-shadow:0 30px 80px rgba(52,16,31,.25)}
  .chrome .mkt{display:none}
  .dock{display:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .frame img,.frame.is-active img{transform:none;transition:none}
  .frame,.endcard{transition:none}
}