:root{
  --cream:#F1EBE3; --rule:#DCD0C6; --lav:#F4ECE6; --lav-line:#C4A396;
  --uv:#9E625F; --lime:#EEFC4E; --lilac:#B4897A; --ink:#4A2424; --ink-mid:#8A6F66; --ink-soft:#8A8078;
  --head:'Unbounded', 'Arial Black', system-ui, sans-serif;
  --body:'Anonymous Pro', ui-monospace, 'Courier New', monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cream:#F1EBE3; --ink:#4A2424; } }
:root[data-theme="dark"]{ --cream:#F1EBE3; --ink:#4A2424; }
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:var(--cream); }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); overflow-x:hidden; }
img{ max-width:100%; display:block; }
.ruled{ background-color:var(--cream); background-image:repeating-linear-gradient(transparent,transparent 31px,var(--rule) 31px,var(--rule) 32px); }

/* nav */
header{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(241,235,227,.92); backdrop-filter:blur(8px); border-bottom:6px double #C4A396; }
.nav{ max-width:1200px; height:72px; margin:0 auto; padding:0 clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav img{ height:30px; width:auto; }
.btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 22px; text-indent:.12em; border:2px solid #B4897A; border-radius:999px; background:#BADAFF; color:#4A2424; font-family:var(--body); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.short{ display:none; }
.btn:focus-visible, input:focus-visible{ outline:3px solid var(--lilac); outline-offset:2px; }

/* ── HERO ── */
.hero{ position:relative; height:175vh; }
.hero-pin{ position:sticky; top:calc(72px + env(safe-area-inset-top,0px)); height:calc(100vh - 72px); overflow:hidden; display:flex; align-items:center; }
.hero-inner{ width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,48px); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,5vw,72px); align-items:center; }
/* The hero copy is centred inside a pinned viewport-tall box, so on a short
   laptop window anything taller than the window got sliced off under the header
   (Emerald, Oct 24: "all of this is cut off on desktop"). Every size here also
   answers to the window height, so the hero shrinks to fit instead of clipping.
   On a tall window the vh value loses the min() and nothing changes. */
.hero-copy{ display:flex; flex-direction:column; gap:min(22px, 2.1vh); transform:translateY(calc(var(--p,0) * -40px)); }
.hero h1{ margin:0; font-family:var(--head); font-weight:300; letter-spacing:-.02em; font-size:min(clamp(44px,6.4vw,88px), 8.4vh); line-height:1; }
.hero .lede{ margin:0; font-size:min(clamp(18px,1.7vw,22px), 3vh); line-height:1.55; max-width:520px; }
.hero .sub{ margin:0; font-size:min(17px, 2.3vh); line-height:1.6; color:var(--ink-mid); max-width:520px; }
.hero .signup{ gap:min(12px, 1.7vh); }
.hero .stamp-field{ padding:min(11px, 1.5vh); }
.hero .signup input{ height:min(50px, 6.8vh); }
.signup{ display:flex; flex-direction:column; gap:12px; max-width:420px; }
/* photorealistic die-cut stamp fields: real textured paper, punched
   perforations, and a shadow that follows every scallop */
.stamp-field{ position:relative; display:block; padding:11px;
  background:url('../assets/paper_texture.png'), linear-gradient(145deg, #F6EFE0 0%, #EFE5D0 55%, #E9DCC4 100%);
  -webkit-mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 13px) calc(100% - 13px) no-repeat, radial-gradient(circle at 50% 50%, #0000 4.4px, #000 4.8px) -7px -7px/14px 14px round;
  mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 13px) calc(100% - 13px) no-repeat, radial-gradient(circle at 50% 50%, #0000 4.4px, #000 4.8px) -7px -7px/14px 14px round;
  -webkit-mask-composite:source-over; mask-composite:add;
}
.stamp-wrap{ display:block; filter:drop-shadow(0 0 1.5px rgba(74,36,36,.5)) drop-shadow(0 0 4px rgba(74,36,36,.28)) drop-shadow(0 0 10px rgba(74,36,36,.14)); }
.signup input{ display:block; width:100%; box-sizing:border-box; height:50px; padding:0 14px; border:1px solid rgba(74,36,36,.28); border-radius:1px;
  background:linear-gradient(180deg, #ECF0F4 0%, #E5EAF0 100%); box-shadow:inset 0 1px 3px rgba(74,36,36,.18), inset 0 -1px 0 rgba(255,255,255,.6);
  font-family:var(--body); font-size:16px; color:var(--ink); }
.signup input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.signup .btn{ align-self:flex-start; }
.signup .btn{ height:56px; }
.fine{ font-size:14px; color:var(--ink-mid); }

.stack{ position:relative; width:100%; max-width:520px; aspect-ratio:1/.92; margin:0 auto; }
.card{ position:absolute; border-radius:6px; will-change:transform; }
.card.back{ left:14%; top:18%; width:66%; aspect-ratio:3/2; background:radial-gradient(circle at 50% 38%, #F1EBE3 0%, #D5ADA3 100%); box-shadow:0 18px 40px rgba(158,98,95,.25); display:grid; place-items:center;
  transform:translate(calc(var(--p,0) * 34%), calc(var(--p,0) * -16%)) rotate(calc(7deg + var(--p,0) * 11deg)); }
.card.back img{ width:34%; transform:rotate(-10deg); }
.card.front{ left:6%; top:30%; width:74%; aspect-ratio:3/2; padding:6% 7%; background-color:var(--lav); background-image:repeating-linear-gradient(transparent,transparent 27px,var(--lav-line) 27px,var(--lav-line) 28px);
  box-shadow:0 20px 44px rgba(74,36,36,.16); display:flex; gap:6%;
  transform:translate(calc(var(--p,0) * -6%), calc(var(--p,0) * 6%)) rotate(calc(-5deg + var(--p,0) * -4deg)); }
.front .msg{ flex:1; display:flex; flex-direction:column; gap:6px; font-style:italic; font-size:clamp(14px,1.5vw,19px); line-height:28px; }
.front .msg span:last-child{ color:var(--uv); font-size:15px; }
.front .divider{ width:1px; background:var(--lav-line); }
.front .addr{ flex:.9; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.stamp{ width:58px; height:70px; padding:0; border:none; border-radius:0; box-sizing:border-box;
  background:
    linear-gradient(#BADAFF,#BADAFF) 50% 50%/calc(100% - 13px) calc(100% - 13px) no-repeat,
    linear-gradient(rgba(74,36,36,.3),rgba(74,36,36,.3)) 50% 50%/calc(100% - 11px) calc(100% - 11px) no-repeat,
    url('../assets/paper_texture.png'),
    linear-gradient(145deg, #F6EFE0 0%, #EFE5D0 55%, #E9DCC4 100%);
  -webkit-mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 7px) calc(100% - 7px) no-repeat, radial-gradient(circle at 50% 50%, #0000 2.2px, #000 2.45px) -3.5px -3.5px/7px 7px round;
  mask:linear-gradient(#000 0 0) 50% 50%/calc(100% - 7px) calc(100% - 7px) no-repeat, radial-gradient(circle at 50% 50%, #0000 2.2px, #000 2.45px) -3.5px -3.5px/7px 7px round;
  -webkit-mask-composite:source-over; mask-composite:add;
  filter:drop-shadow(0 0 1.2px rgba(74,36,36,.5)) drop-shadow(0 0 3px rgba(74,36,36,.28)) drop-shadow(0 0 8px rgba(74,36,36,.14)); }
.stamp i{ display:grid; place-items:center; width:100%; height:100%; background:none; border:none; box-sizing:border-box; font-style:normal; } .stamp i img{ width:46%; height:auto; }
.addr b{ margin-top:auto; font-size:13px; }
.addr small{ font-size:11px; color:var(--ink-soft); }
/* writing and address sit exactly on the card's ruled lines */
.card.front{ --L:28px; background-image:repeating-linear-gradient(transparent 0, transparent calc(var(--L) - 1px), var(--lav-line) calc(var(--L) - 1px), var(--lav-line) var(--L)); background-origin:content-box; }
.front .msg{ gap:0; line-height:var(--L); }
.front .msg span{ display:block; }
.front .msg{ font-size:clamp(13px,1.25vw,16px); }
.front .addr{ flex:1; align-items:flex-start; gap:0; line-height:var(--L); font-size:11px; }
.front .stamp{ align-self:flex-end; height:calc(var(--L) * 2 - 8px); width:auto; aspect-ratio:58/70; margin:4px 0; }
.front .from{ display:flex; flex-direction:column; white-space:nowrap; }
.front .from em{ font-style:normal; font-weight:700; font-size:.85em; letter-spacing:.14em; color:var(--uv); }
.floaty{ position:absolute; will-change:transform; }
.floaty img{ width:100%; }
.f-cake{ left:0; top:2%; width:21%; transform:translateY(calc(var(--p,0) * -150px)) rotate(calc(-10deg + var(--p,0) * -14deg)); }
.f-pop{ right:2%; top:0; width:20%; transform:translate(calc(var(--p,0) * 40px), calc(var(--p,0) * -230px)) rotate(calc(8deg + var(--p,0) * 22deg)); }
.f-cam{ right:0; bottom:6%; width:22%; transform:translateY(calc(var(--p,0) * -90px)) rotate(calc(-6deg + var(--p,0) * 8deg)); }
.f-heart{ left:6%; bottom:0; width:20%; transform:translate(calc(var(--p,0) * -30px), calc(var(--p,0) * -300px)) rotate(calc(6deg + var(--p,0) * -18deg)); }
.pill{ position:absolute; right:16%; top:22%; padding:6px 12px; border-radius:14px; background:var(--lime); font-weight:700; font-size:12px; letter-spacing:.12em; box-shadow:0 4px 10px rgba(74,36,36,.12);
  transform:rotate(6deg) scale(0); transition:transform .45s cubic-bezier(.34,1.8,.5,1); }
.pill.on{ transform:rotate(6deg) scale(1); }
.scroll-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-size:13px; color:var(--ink-soft); opacity:calc(1 - var(--p,0) * 5); }

/* load-in, one orchestrated moment */
@keyframes deal{ from{ opacity:0; translate:0 60px; rotate:-8deg; } to{ opacity:1; translate:0 0; rotate:0deg; } }
@keyframes rise{ from{ opacity:0; translate:0 18px; } to{ opacity:1; translate:0 0; } }
.card.back{ animation:deal .8s .15s cubic-bezier(.2,.8,.2,1) both; }
.card.front{ animation:deal .8s .3s cubic-bezier(.2,.8,.2,1) both; }
.floaty{ animation:rise .6s cubic-bezier(.2,.8,.2,1) both; }
.f-cake{ animation-delay:.55s } .f-pop{ animation-delay:.65s } .f-cam{ animation-delay:.75s } .f-heart{ animation-delay:.85s }

/* ── HOW IT WORKS ── */
.how{ position:relative; height:520vh; background:var(--lav); }
.how-pin{ position:sticky; top:calc(72px + env(safe-area-inset-top,0px)); height:calc(100vh - 72px); overflow:hidden; display:flex; align-items:center; }
.how-inner{ width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,48px); display:grid; grid-template-columns:1fr auto; gap:clamp(32px,6vw,96px); align-items:center; }
.how-head h2{ margin:0 0 12px; font-family:var(--head); font-weight:300; letter-spacing:-.02em; font-size:clamp(28px,3.6vw,46px); line-height:1.08; max-width:560px; }
.how-head p{ margin:0; font-size:clamp(16px,1.4vw,18px); line-height:1.6; color:var(--ink-mid); max-width:520px; }
.steps{ list-style:none; margin:36px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.steps li{ display:grid; grid-template-columns:44px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--lav-line); opacity:.38; transition:opacity .35s; }
.steps li.on{ opacity:1; }
.steps .n{ font-family:var(--head); font-weight:300; font-size:15px; color:var(--uv); padding-top:3px; }
.steps h3{ margin:0; font-family:var(--head); font-weight:300; font-size:clamp(18px,1.8vw,22px); }
.steps p{ margin:0; max-height:0; overflow:hidden; font-size:16px; line-height:1.55; color:var(--ink-mid); transition:max-height .45s ease, margin .45s ease; }
.steps li.on p{ max-height:90px; margin-top:6px; }
.steps li:not(.on) .bar{ display:none; }
.bar{ height:3px; background:transparent; border-radius:2px; margin-top:8px; overflow:hidden; }
.bar i{ display:block; height:100%; width:calc(var(--sp,0) * 100%); background:var(--rule); }

.phone{ position:relative; width:300px; height:620px; border-radius:46px; background:var(--ink); padding:12px; box-shadow:0 30px 70px rgba(74,36,36,.28); flex-shrink:0;
  transform:rotate(calc(-3deg + var(--hp,0) * 6deg)); }
.screen{ position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; }
.notch{ position:absolute; top:10px; left:50%; translate:-50% 0; width:96px; height:26px; border-radius:14px; background:var(--ink); z-index:5; }
.scr{ position:absolute; inset:0; padding:54px 18px 18px; opacity:0; transform:translateY(24px); transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.scr.on{ opacity:1; transform:none; }
.scr h4{ margin:0 0 14px; font-family:var(--head); font-weight:300; font-size:20px; }
/* 1: QTs */
.qt{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--lav-line); }
.av{ width:42px; height:auto; flex-shrink:0; }
.qt b{ display:block; font-size:15px; } .qt small{ font-size:12px; color:var(--ink-soft); }
.qt .tag{ margin-left:auto; padding:4px 8px; border-radius:10px; background:var(--lime); font-size:11px; font-weight:700; letter-spacing:.08em; white-space:nowrap; }
.qt{ opacity:0; transform:translateX(30px); transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.qt.in{ opacity:1; transform:none; }
.addq{ position:absolute; left:18px; right:18px; bottom:28px; height:46px; border-radius:23px; background:#BADAFF; border:2px solid #B4897A; box-sizing:border-box; display:grid; place-items:center; color:#4A2424; font-weight:700; font-size:14px; letter-spacing:.12em; text-indent:.12em; }
/* 2: nudge */
.feed-ghost{ position:absolute; left:12px; right:12px; height:80px; border-radius:18px; background:#FBF8F3; border:1px solid var(--lav-line); opacity:.55; box-sizing:border-box; }
.feed-ghost:nth-of-type(1){ top:96px; } .feed-ghost:nth-of-type(2){ top:192px; } .feed-ghost:nth-of-type(3){ top:288px; } .feed-ghost:nth-of-type(4){ top:384px; }
.notif{ position:absolute; left:12px; right:12px; top:96px; height:80px; box-sizing:border-box; padding:14px; border-radius:18px; background:#FBF8F3; box-shadow:0 12px 30px rgba(74,36,36,.18); display:flex; gap:12px; align-items:center; overflow:hidden;
  transform:translateY(calc(-260px + var(--np,0) * 260px)) rotate(calc((1 - var(--np,0)) * -4deg)); }
.notif{ z-index:2; }
.notif.n2{ z-index:1; top:192px; opacity:calc(var(--nq,0) * 3); transform:translateY(calc(-96px + var(--nq,0) * 96px)); }
.notif img{ width:52px; flex-shrink:0; }
.notif div{ line-height:1.25; }
.notif b{ display:block; font-size:14px; line-height:1.25; margin-bottom:7px; } .notif span{ display:block; font-size:13px; color:var(--ink-mid); line-height:1.3; }
.notif-cta{ position:absolute; left:18px; right:18px; bottom:28px; opacity:var(--np,0); }
/* 3: write */
.pc-back{ border-radius:8px; padding:10px 16px 0; height:252px; overflow:hidden; background-color:#fff; background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 28px, #D5ADA3 28px, #D5ADA3 30px); background-position:0 11px; border:1px solid var(--lav-line); font-style:italic; font-size:16px; line-height:30px; }
.caret{ display:inline-block; width:2px; height:18px; background:var(--uv); vertical-align:-3px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.chip{ margin-top:14px; display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:16px; background:var(--lav); font-size:12px; color:var(--uv); font-weight:700; }
.scr .btn{ width:100%; margin-top:16px; height:46px; }
/* 4: mail */
.mail{ position:relative; height:400px; text-align:center; }
/* The flying postcard is gone (Emerald, Oct 24): her mailbox animation already
   posts its own letter, so a second card was one card too many. */

.mbox{ position:absolute; left:50%; top:150px; width:190px; margin-left:-95px; z-index:2; }
.mail .done{ position:absolute; left:0; right:0; top:340px; }
.thunk{ position:absolute; top:70px; right:28px; width:70px; padding:6px; border:2.5px dashed var(--uv); border-radius:6px; background:var(--lav);
  transform:scale(2.4) rotate(-20deg); opacity:0; transition:transform .35s cubic-bezier(.5,1.6,.5,1), opacity .2s; }
.thunk.on{ transform:scale(1) rotate(8deg); opacity:1; }
.thunk span{ display:block; background:var(--uv); color:#fff; font-weight:700; font-size:11px; letter-spacing:.12em; text-indent:.12em; padding:10px 0; border-radius:2px; text-align:center; }
.done{ opacity:0; transform:translateY(10px); transition:all .4s; }
.done.on{ opacity:1; transform:none; }
.done b{ display:block; font-family:var(--head); font-weight:300; font-size:18px; margin-bottom:4px; }
.done span{ font-size:13px; color:var(--ink-mid); }

.end{ padding:clamp(72px,10vw,128px) clamp(20px,4vw,48px); text-align:center; }
.end h2{ margin:0 auto 14px; font-family:var(--head); font-weight:300; font-size:clamp(28px,3.6vw,46px); max-width:720px; line-height:1.1; }
.end p{ margin:0 auto 26px; color:var(--ink-mid); font-size:17px; max-width:520px; line-height:1.6; }


.hero h1 .l{ display:block; }
.hero h1 .l1{ position:relative; display:inline-block; }
/* The postmark sits beside "Send" and must never cover the lines under it
   (Emerald, Oct 24). It is 2.7em wide and half as tall, so top is set to land
   its bottom edge just above line two. No fly-in: the stamp is static and the
   only motion is her wax press pressing itself in the middle. */
.postmark{ position:absolute; left:calc(100% + .28em); top:-.42em; width:2.7em; height:auto; pointer-events:none; overflow:visible; }

.thanks{ margin:0; max-width:520px; padding:16px 18px; border-radius:12px; background:var(--lav); border:1.5px solid var(--uv); font-size:16px; line-height:1.5; color:#4A2424; animation:rise .4s ease both; }
.thanks b{ color:#4A2424; }
.cta-card .thanks{ margin:0 auto; text-align:left; }
.cta-bff{ display:block; width:192px; margin:0 auto 14px; }
/* notebook section headers: blank band, double rule, ruled paper below */
.sec{ background:var(--cream); --dbl:#C4A396; --rl:var(--rule); }
.sec.lav, .how{ --dbl:#D5ADA3; --rl:rgba(158,98,95,.10); }
.sec.lav{ background:var(--lav); }
.sec-head{ border-bottom:6px double var(--dbl); }
.sec-head .in{ max-width:1200px; margin:0 auto; padding:clamp(36px,4.5vw,60px) clamp(20px,4vw,48px); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.sec-head .h2{ margin-top:10px; }
.sec-sub{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-mid); max-width:400px; }
.sec-body{ background-image:repeating-linear-gradient(transparent,transparent 31px,var(--rl) 31px,var(--rl) 32px); }
.sec-body > .wrap{ padding-top:clamp(40px,5vw,64px); }
.sec .faq-think{ margin:0; width:150px; flex-shrink:0; }
.sec .why-hands{ margin:0; width:clamp(200px,24vw,330px); flex-shrink:0; }
.sec-body .faq-wrap{ display:block; max-width:860px; }
.artists .sec-body{ padding-top:24px; }

.nav-cta{ opacity:0; transform:translateY(-8px) scale(.85); pointer-events:none; transition:opacity .25s ease, transform .35s cubic-bezier(.3,1.5,.5,1); }
.nav-cta.show{ opacity:1; transform:none; pointer-events:auto; }
.feat img.feat-stamp{ width:62px; margin:0 7px; transform:rotate(-5deg); filter:drop-shadow(0 4px 8px rgba(74,36,36,.15)); }
.cta-card .signup{ justify-content:center; }
.how-intro{ margin:0 0 32px; font-size:clamp(16px,1.4vw,18px); line-height:1.65; color:var(--ink-mid); max-width:520px; }
@media (min-width: 861px){ #how .sec-head .sec-sub{ display:none; } }
.logo img{ height:30px; width:auto; }
.links{ display:flex; gap:28px; margin-left:auto; margin-right:8px; }
.links a{ color:var(--ink); text-decoration:none; font-size:15px; }
.links a:hover{ color:var(--uv); }
.ph{ position:relative; display:inline-block; width:34px; height:20px; flex-shrink:0; margin-left:10px; }
.ph img{ position:absolute; top:0; left:0; width:26px; height:20px; object-fit:contain; }
.ph img+img{ left:9px; width:20px; height:20px; filter:drop-shadow(0 1px 1px rgba(74,36,36,.6)); }

.wrap{ max-width:1200px; margin:0 auto; padding:clamp(80px,10vw,136px) clamp(20px,4vw,48px); }
.kicker{ font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--uv); }
.h2{ margin:12px 0 0; font-family:var(--head); font-weight:300; letter-spacing:-.02em; font-size:clamp(30px,4.2vw,52px); line-height:1.08; max-width:760px; }

/* scroll-linked "dropped on the table" */
[data-drop]{ --e:1; opacity:calc(.15 + var(--e) * .85);
  transform:translateY(calc((1 - var(--e)) * 90px)) rotate(calc((1 - var(--e)) * var(--tilt, 6deg))); will-change:transform; }

/* why */
.why-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.feat{ display:flex; gap:20px; align-items:flex-start; padding:30px 28px; border-radius:20px; background:#FBF8F3; border:1px solid var(--lav-line); box-shadow:0 10px 30px rgba(74,36,36,.06); }
.feat img{ width:76px; flex-shrink:0; }
.feat h3{ margin:4px 0 8px; font-family:var(--head); font-weight:300; font-size:21px; line-height:1.2; }
.feat p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-mid); }

/* artists rack */
.artists{ background:var(--lav); overflow:hidden; }
.artists .wrap{ padding-bottom:clamp(40px,5vw,64px); }
.artists-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; }
.artists-head p{ margin:0; font-size:16px; color:var(--ink-mid); max-width:380px; line-height:1.6; }
.rack{ display:flex; gap:28px; padding:20px 0 clamp(80px,9vw,120px); width:max-content; will-change:transform;
  transform:translateX(calc(8vw - var(--rp,0) * (var(--rackw, 1400px) - 84vw))); }
.pc{ width:280px; flex-shrink:0; margin:0; transform:rotate(var(--r,0deg)); }
.pc .face{ aspect-ratio:3/2; border-radius:6px; display:grid; place-items:center; box-shadow:0 14px 34px rgba(74,36,36,.14); }
.pc .face img{ width:44%; }
.pc figcaption{ margin-top:14px; font-size:14px; }
.pc figcaption b{ display:block; font-family:var(--head); font-weight:300; font-size:16px; margin-bottom:2px; }
.pc figcaption span{ color:var(--ink-mid); }
.pc.upload .face{ background:transparent; border:2px dashed var(--uv); box-shadow:none; flex-direction:column; gap:8px; color:var(--uv); font-weight:700; letter-spacing:.1em; font-size:13px; }
.pc.upload .face img{ width:30%; }

/* pricing */
.price-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:900px; }
.plan{ position:relative; display:flex; flex-direction:column; gap:14px; padding:34px 30px; border-radius:22px; background:#FBF8F3; border:1px solid var(--lav-line); }
.plan.pro{ background:var(--lav); border:2px solid var(--uv); }
.plan .tag{ position:absolute; top:-14px; right:24px; padding:6px 12px; border-radius:14px; background:var(--lime); font-weight:700; font-size:12px; letter-spacing:.1em; transform:rotate(4deg); }
.plan .top{ display:flex; align-items:center; gap:12px; }
.plan .top img{ width:52px; }
.plan h3{ margin:0; font-family:var(--head); font-weight:300; font-size:20px; }
.amount{ font-family:var(--head); font-weight:300; font-size:clamp(44px,5vw,60px); line-height:1; letter-spacing:-.02em; }
.amount small{ font-family:var(--body); font-size:15px; letter-spacing:0; color:var(--ink-mid); margin-left:6px; }
.plan ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:16px; line-height:1.5; }
.plan li{ display:flex; gap:10px; } .plan li::before{ content:'♥'; color:var(--uv); }
.plan .btn{ margin-top:auto; width:100%; }
.btn.ghost{ background:transparent; color:var(--uv); border:1.5px solid var(--uv); }
.price-note{ margin-top:22px; font-size:15px; color:var(--ink-mid); }

/* bleachers band */
.band{ position:relative; background:var(--uv); color:#fff; overflow:hidden; text-align:center; }
.band .wrap{ padding:clamp(100px,13vw,170px) clamp(20px,4vw,48px); }
.band h2{ margin:0 auto; font-family:var(--head); font-weight:300; letter-spacing:-.02em; font-size:clamp(36px,6vw,80px); line-height:1.02; max-width:900px; }
.fill-sub{ margin:26px auto 0; font-family:var(--head); font-weight:300; font-size:clamp(20px,2.6vw,32px); line-height:1.25; max-width:760px; color:#fff; }
#fill span{ color:rgba(255,255,255,.34); transition:color .25s; }
#fill span.lit{ color:var(--lime); }
.band p.small{ margin:22px auto 0; max-width:520px; font-size:17px; line-height:1.6; color:#F4ECE6; }
.band .bf{ position:absolute; width:clamp(80px,11vw,150px); will-change:transform; }
.bf.mega{ right:13%; top:50%; width:clamp(90px,13vw,170px); transform:translateY(calc(-50% + var(--bp,0) * -60px)) scaleX(-1) rotate(calc(-6deg + var(--bp,0) * 12deg)); }

/* faq */
.faq-wrap{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(32px,6vw,96px); align-items:start; }
.mbr{ display:none; }
.stack-head{ display:none; }
.faq-think{ width:190px; margin-top:36px; transform:rotate(calc(-8deg + var(--e,1) * 4deg)); }
details{ border-bottom:1px solid var(--lav-line); }
details:first-of-type{ border-top:1px solid var(--lav-line); }
summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:18px; padding:22px 0; font-family:var(--head); font-size:clamp(16px,1.6vw,19px); line-height:1.35; }
summary::-webkit-details-marker{ display:none; }
summary:focus-visible{ outline:3px solid var(--lilac); outline-offset:4px; border-radius:4px; }
/* Thumbs instead of a plus: every question starts thumbs-down and flips to
   thumbs-up when you open it (Emerald, Oct 24). */
summary .pm{ flex-shrink:0; width:28px; height:28px; display:grid; place-items:center; font-size:19px; line-height:1; background:none; border-radius:0; transition:transform .25s ease; }
summary .pm::before{ content:'\1F44E'; }
details[open] summary .pm::before{ content:'\1F44D'; }
details[open] summary .pm{ transform:scale(1.12); }
details p{ margin:0 0 22px; font-size:16px; line-height:1.65; color:var(--ink-mid); max-width:620px; }
details[open] p{ animation:rise .35s ease both; }

/* final cta */
.cta{ background:var(--lav); }
.cta .wrap{ display:grid; place-items:center; }
.cta-card{ position:relative; width:100%; max-width:720px; padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px); border-radius:10px; text-align:center;
  background-color:var(--cream); background-image:repeating-linear-gradient(transparent,transparent 31px,var(--rule) 31px,var(--rule) 32px);
  box-shadow:0 30px 70px rgba(74,36,36,.18); transform:rotate(calc(-3deg + var(--e,1) * 2deg)); }
.cta-card .env{ width:96px; margin:0 auto 14px; }
.cta-card h2{ margin:0; font-family:var(--head); font-weight:300; font-size:clamp(28px,4vw,46px); letter-spacing:-.02em; line-height:1.08; }
.cta-card > p{ margin:12px 0 28px; font-size:18px; color:var(--ink-mid); }
.cta-card .signup{ margin:0 auto; }
.cta-card .fine{ display:block; margin-top:14px; }
.send-stamp{ position:absolute; top:22px; right:22px; width:84px; padding:5px; border:none; border-radius:0; background:radial-gradient(circle at 5px 5px, rgba(0,0,0,0) 3.3px, #9E625F 3.8px) -5px -5px / 10px 10px round; filter:drop-shadow(0 6px 10px rgba(158,98,95,.3)); z-index:3;
  transform:translate(170px,-190px) scale(2.2) rotate(-32deg); opacity:0; transition:transform .6s cubic-bezier(.3,1.35,.5,1), opacity .2s; }
.send-stamp.on{ transform:none; transform:rotate(5deg); opacity:1; }
.send-stamp > span{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 0; background:#BADAFF; border:4px solid #F4ECE6; box-sizing:border-box; color:#4A2424; border-radius:1px; font-weight:700; font-size:13px; letter-spacing:.16em; }
.send-stamp .ph{ margin:0; background:none; border:none; padding:0; }

footer{ background:var(--ink); color:#C4A396; }
footer .in{ max-width:1200px; margin:0 auto; padding:36px clamp(20px,4vw,48px); display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; font-size:14px; }
footer nav{ display:flex; gap:24px; } footer a{ color:#C4A396; text-decoration:none; } footer a:hover{ color:#fff; }
footer .fl{ height:30px; width:auto; display:block; }

@media (max-width: 860px){
  .links{ display:none; }
  .nav-cta{ padding:0 14px; letter-spacing:.08em; font-size:13px; }
  .hero-copy{ position:relative; z-index:3; transform:none; }
  .hero{ height:auto !important; }
  .hero-pin{ position:relative; top:0; height:auto; overflow:visible; display:block; padding:0; }
  .hero-inner{ display:block; }
  .hero-copy{ min-height:calc(100svh - 72px); justify-content:flex-end; padding:48px 0 clamp(36px, 7svh, 64px); gap:20px; }
  .hero-copy .signup{ gap:16px; }
  .hero h1{ font-size:12.4vw; line-height:1.04; }
  .postmark{ width:3.1em; top:-.58em; }
  .hero .lede{ font-size:17px; line-height:32px; color:var(--ink-mid); }
  .stack-box{ display:flex; flex-direction:column; justify-content:center; align-items:stretch; padding:0 0 32px; margin-top:0; }
  .stack-head{ display:block; margin:0 0 4px; font-family:var(--head); font-weight:300; letter-spacing:-.02em; font-size:clamp(24px,7vw,32px); line-height:1.15; }
  .stack-head span{ display:block; color:var(--uv); }
  .stack{ width:100% !important; max-width:480px !important; height:124cqw; aspect-ratio:auto !important; margin:0 auto; container-type:inline-size; }
  .card.back, .card.front{ left:6%; width:88%; top:50%; margin-top:-29cqw; transform-origin:50% 100%; }
  .card.back{ transform:translateX(calc(var(--p,0) * 3%)) rotate(calc(2deg + var(--p,0) * 9deg)); }
  .card.front{ transform:translateX(calc(var(--p,0) * -2%)) rotate(calc(-1deg + var(--p,0) * -7deg)); }
  .f-cake{ left:1%; top:calc(50% - 52cqw); width:23%; }
  .f-pop{ right:5%; top:calc(50% - 45cqw); width:22%; z-index:2; }
  .f-cam{ right:0; top:calc(50% + 20cqw); width:25%; }
  .f-heart{ left:1% !important; top:calc(50% + 24cqw) !important; bottom:auto !important; width:22.5% !important; }
  .pill{ display:none; }
  .card.front{ --L:6.9cqw; padding:6cqw 6cqw; gap:3.5cqw; background-image:repeating-linear-gradient(transparent 0, transparent calc(var(--L) - 1px), var(--lav-line) calc(var(--L) - 1px), var(--lav-line) var(--L)) !important; background-origin:content-box; }
  .front .msg{ font-size:4cqw !important; line-height:var(--L) !important; gap:0 !important; }
  .front .msg span:last-child{ font-size:3.9cqw !important; }
  .front .stamp{ height:calc(var(--L) * 2 - 2cqw) !important; width:auto !important; aspect-ratio:58/70; padding:.8cqw !important; margin:1cqw 0 !important; } .stamp i{ font-size:4.4cqw !important; }
  .front .addr{ font-size:3cqw !important; }
  .scroll-hint{ display:none; }
  .how-pin{ align-items:flex-start; padding-top:16px; }
  .phone{ transform-origin:top center; transform:scale(var(--pz,1)) rotate(calc(-3deg + var(--hp,0) * 6deg)); margin-bottom:calc((var(--pz,1) - 1) * 470px); }
  .f-cake{ transform:translate(calc(var(--p,0) * -14px), calc(var(--p,0) * -26px)) rotate(calc(-10deg + var(--p,0) * -16deg)); }
  .f-pop{ transform:translate(calc(var(--p,0) * 10px), calc(var(--p,0) * -14px)) rotate(calc(8deg + var(--p,0) * 16deg)); }
  .f-cam{ transform:translate(calc(var(--p,0) * 12px), calc(var(--p,0) * 22px)) rotate(calc(-6deg + var(--p,0) * 12deg)); }
  .f-heart{ transform:translate(calc(var(--p,0) * -12px), calc(var(--p,0) * 26px)) rotate(calc(6deg + var(--p,0) * -16deg)); }
  .why-grid, .price-grid, .faq-wrap{ grid-template-columns:1fr; }
  .feat{ padding:24px 20px; } .feat img{ width:56px; } .feat img.feat-stamp{ width:46px; margin:0 5px; }
  .pc{ width:220px; }
  .mbr{ display:inline; }
  .sec-head .in{ padding:30px 20px; }
  .sec .faq-think{ width:104px; } .sec .why-hands{ width:340px; max-width:86%; margin:10px auto 0; align-self:center; }
  .bf.mega{ top:7%; right:18%; width:124px; transform:scaleX(-1) rotate(-5deg); }
  #artists .sec-head .in, #how .sec-head .in, #why .sec-head .in{ flex-direction:column; align-items:flex-start; gap:12px; }
  .send-stamp{ width:62px; top:14px; right:14px; padding:5px; } .send-stamp span{ padding:8px 0; font-size:10px; }
  /* The SEND stamp waits off to the right (translate 170px, scale 2.2) before it
     drops in. On a phone that parked position stuck out past the screen, so the
     whole page got ~589px wide and Safari shrank everything to fit (Emerald's
     "website is messed up", Oct 24). Clip the section so the flight can't widen
     the page (hidden, not clip, so older Safari gets the fix too). */
  .cta{ overflow-x: hidden; }
  .band .bf{ width:64px; } .bf.b{ display:none; } .bf.c{ width:52px; }

  .hero{ height:150vh; }
  .long{ display:none; } .short{ display:inline; }
  .card.front{ padding:5% 6%; background-image:repeating-linear-gradient(transparent,transparent 21px,var(--lav-line) 21px,var(--lav-line) 22px); }
  .front .msg{ font-size:12.5px; line-height:22px; gap:2px; }
  .front .msg span:last-child{ font-size:12px; }
  .stamp{ width:40px; height:48px; padding:3px; } .stamp i{ font-size:15px; }
  .addr b{ font-size:10px; } .addr small{ display:none; }
  .hero-inner{ grid-template-columns:1fr; gap:8px; }
  .hero-copy{ gap:14px; }
  .hero .sub, .fine{ display:none; }
  .stack{ max-width:340px; }
  .how-inner{ grid-template-columns:1fr; gap:14px; justify-items:center; }
  .how-head{ order:2; width:100%; }
  .how-head h2, .how-head > p{ display:none; }
  .steps{ margin:0; }
  .steps li{ display:none; border:0; padding:0; }
  .steps li.on{ display:grid; }
  .phone{ width:230px; height:470px; border-radius:38px; padding:9px; }
  .screen{ border-radius:30px; }
  .scr{ padding:46px 12px 12px; zoom:.8; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .hero, .how{ height:auto; }
  [data-drop]{ opacity:1; transform:none; } .rack{ transform:none; flex-wrap:wrap; width:auto; } #fill span{ color:var(--lime); } .send-stamp{ opacity:1; transform:rotate(9deg); }
  .hero-pin, .how-pin{ position:relative; top:0; height:auto; padding:56px 0; }
  .pill{ transform:rotate(6deg); }
}

/* ── Living emojis (the "easy way", Oct 23): layered CSS motion on the hero
   floaties. The scroll parallax lives on the .floaty parent, so the loops
   animate the img and pseudo-elements only. Off under reduced motion. ── */
@media (prefers-reduced-motion: no-preference){
  @keyframes qn-toot{ 0%,100%{ transform:rotate(0) scale(1) } 12%{ transform:rotate(-2.5deg) scale(1.015) } 24%{ transform:rotate(2deg) scale(1.035) } 36%{ transform:rotate(-1deg) scale(1.01) } 48%{ transform:rotate(0) scale(1) } }

  @keyframes qn-beat{ 0%,100%{ transform:scale(1) } 12%{ transform:scale(1.045) } 20%{ transform:scale(1.01) } 28%{ transform:scale(1.035) } 40%{ transform:scale(1) } }
  @keyframes qn-twinkle{ 0%,100%{ opacity:0; transform:scale(.6) } 50%{ opacity:1; transform:scale(1.25) } }

  /* cake: candle flames flicker */
  .f-cake::before,.f-cake::after{ content:''; position:absolute; width:16%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(255,240,170,.9) 0%, rgba(255,200,90,.45) 40%, transparent 70%);
    opacity:0; pointer-events:none; }
  .f-cake::before{ left:28%; top:4%; animation:qn-flicker 1.7s ease-in-out infinite; }
  .f-cake::after{ left:52%; top:1%; animation:qn-flicker 1.3s ease-in-out .5s infinite; }
  @keyframes qn-flicker{ 0%,100%{ opacity:.25; transform:scale(.85) } 30%{ opacity:.8; transform:scale(1.1) } 60%{ opacity:.45; transform:scale(.95) } 80%{ opacity:.9; transform:scale(1.2) } }

  @keyframes qn-snap{ 0%,68%,100%{ transform:scale(1) } 72%{ transform:scale(1.05) } 78%{ transform:scale(.99) } 84%{ transform:scale(1) } }
    @keyframes qn-flash{ 0%,68%,96%,100%{ opacity:0; transform:scale(.4) } 72%{ opacity:1; transform:scale(1.3) } 82%{ opacity:.25; transform:scale(1.6) } }
}


/* Twinkling candles on her birthday cake (her twinkling-cake package, Oct 24;
   Emerald: put the twinkle everywhere). Flames sit on the candles by percentage
   and size off the cake's width, so one set of rules covers the 52px notification
   cake and the big floating one. */
.qn-cake{ position:relative; display:block; }
.qn-cake img{ width:100%; height:auto; display:block; }
.floaty .qn-cake{ width:100%; }
.notif .qn-cake{ width:52px; flex-shrink:0; }
.feat .qn-cake{ width:76px; flex-shrink:0; }
@keyframes qnFlicker{0%{transform:translate(-50%,-62%) scale(1,1) skewX(0deg);opacity:.85}18%{transform:translate(-50%,-64%) scale(.9,1.12) skewX(-5deg);opacity:1}37%{transform:translate(-50%,-61%) scale(1.06,.93) skewX(4deg);opacity:.78}55%{transform:translate(-50%,-63%) scale(.95,1.08) skewX(-2deg);opacity:.95}76%{transform:translate(-50%,-62%) scale(1.03,.96) skewX(3deg);opacity:.82}100%{transform:translate(-50%,-62%) scale(1,1) skewX(0deg);opacity:.85}}
@keyframes qnGlow{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.15)}}
.qn-flame{ position:absolute; width:10.9%; aspect-ratio:12/19; border-radius:50% 50% 50% 50%/62% 62% 38% 38%; background:radial-gradient(ellipse at 50% 72%,rgba(255,255,236,.95) 0%,rgba(255,228,150,.85) 32%,rgba(255,176,90,.45) 64%,rgba(255,160,70,0) 100%); mix-blend-mode:screen; transform-origin:50% 92%; animation:qnFlicker .9s ease-in-out infinite; pointer-events:none; }
.qn-glow{ position:absolute; width:30.9%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,214,130,.6) 0%,rgba(255,206,120,0) 70%); animation:qnGlow 1.7s ease-in-out infinite; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .qn-flame,.qn-glow{ animation:none } }