/* MyWing home v9 "Keepsakes": every section is a paper object (HTML, CSS and inline SVG only). Loaded after site.css. No inline styles (CSP). */
.hero--home .hero__in { gap: 36px; }
.hero--home .hero__copy { max-width: 720px; }
.hero__plain { margin-top: 14px; max-width: 28em; font-size: clamp(16.5px, 1.6vw, 18.5px); color: var(--muted); }
.hero__cta--c { justify-content: center; margin-top: 28px; }
@media (min-width: 860px) { .hero--home .hero__in { grid-template-columns: 1.1fr .9fr; } }

/* Coming-soon pill, hero line, closing band */
.pill { display: inline-block; margin-bottom: 14px; padding: 7px 16px; border-radius: var(--r-pill); background: var(--garnet); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero__soon { margin-top: 14px; font-weight: 600; color: var(--ink-2); }
.finale--home h2 { font-size: clamp(52px, 9vw, 104px); line-height: 1; }
.finale .finale__tag { font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); color: var(--paper); margin-top: 18px; max-width: 20em; }

/* Mission hero */
.hero--home h1 { font-size: clamp(44px, 12vw, 86px); line-height: .96; }
.hero--home .hero__sub { margin-top: 20px; text-wrap: balance; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.hero__brand { margin-top: 22px; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink-2); }
.hero__brand em { font-style: normal; color: var(--garnet); }

/* A store badge that has become a real link (see STORES in site.js) */
a.soon { text-decoration: none; transition: transform .2s var(--ease); }
a.soon:hover { transform: translateY(-2px); }
.moment { width: min(100%, 380px); text-align: left; padding: 20px 22px 22px; background: var(--card); border: 1px solid var(--garnet-line); border-radius: var(--r-lg); box-shadow: var(--shade-2); display: grid; gap: 12px; align-content: start; }
.moment p, .moment ul, .moment ol { margin: 0; }
.moment__when { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink); }
.moment__line { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 23px); line-height: 1.25; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.moment__by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.moment__by::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--garnet); }
.finale .finale__mission { margin-top: 44px; font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); color: var(--paper); }
.finale__mission em { font-style: normal; color: var(--gold-lift); }
/* ---------- Hero: the wing, always on ---------- */
.alwayson { width: min(100%, 340px); justify-self: center; }
.ao__stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1 / .7; --k: .64; --rx: 31cqw; }
.ao__ring { position: absolute; left: 50%; top: 50%; width: 24cqw; aspect-ratio: 1; margin: -12cqw 0 0 -12cqw; border-radius: 50%; border: 1.5px solid var(--garnet); opacity: .3; }
.ao__ring:nth-child(1) { transform: scale(1.5); } .ao__ring:nth-child(2) { transform: scale(2.1); opacity: .2; } .ao__ring:nth-child(3) { transform: scale(2.7); opacity: .12; }
.ao__core { position: absolute; left: 50%; top: 50%; width: 22cqw; aspect-ratio: 1; margin: -11cqw 0 0 -11cqw; display: grid; place-items: center; border-radius: 50%; background: var(--garnet-wash); border: 1px solid var(--garnet-line); box-shadow: var(--shade-3); }
.ao__core img { width: 66%; height: auto; }
.ao__orbit { position: absolute; left: 50%; top: 50%; width: calc(var(--rx) * 2); aspect-ratio: 1; margin: calc(var(--rx) * -1) 0 0 calc(var(--rx) * -1); transform: scaleY(var(--k)); }
.ao__orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--garnet-line); }
.ao__spin { position: absolute; inset: 0; }
.ao__it { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--rx)) rotate(calc(var(--a) * -1)); }
.ao__it--1 { --a: 0deg; } .ao__it--2 { --a: 180deg; } .ao__it--3 { --a: 120deg; } .ao__it--4 { --a: 60deg; } .ao__it--5 { --a: 300deg; } .ao__it--6 { --a: 240deg; }
.ao__chip { position: absolute; left: 0; top: 0; translate: -50% -50%; transform: scaleY(calc(1 / var(--k))); display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--garnet-line); box-shadow: var(--shade-2); font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--ink-2); }
.ao__chip svg { width: 13px; height: 13px; flex: none; color: var(--garnet); }
@media (max-width: 559px) {
  .ao__it:nth-child(n+5) { display: none; }
  .ao__it--1 { --a: 0deg; } .ao__it--2 { --a: 180deg; } .ao__it--3 { --a: 90deg; } .ao__it--4 { --a: 270deg; }
}
@media (min-width: 560px) { .ao__chip { font-size: 12.5px; gap: 6px; padding: 7px 12px; } .ao__chip svg { width: 14px; height: 14px; } }
@media (min-width: 860px) { .alwayson { width: min(100%, 430px); } .ao__stage { --rx: 32cqw; } }

.moment--hero { position: relative; z-index: 2; margin: -14px auto 0; width: 100%; padding: 18px 22px 18px; display: grid; gap: 0; }
.moment__item, .moment__think { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; }
.moment__item:not(.is-active) { opacity: 0; visibility: hidden; }
.moment__think { align-content: center; justify-items: start; gap: 10px; opacity: 0; visibility: hidden; font-size: 14px; color: var(--muted); }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--garnet); }
.js .moment__item { transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
.js .moment__item.is-active { transition-delay: 0s; }
.js .moment__item:not(.is-active) { transform: translateY(10px); }
.js .moment--hero.is-thinking .moment__think { opacity: 1; visibility: visible; }
.js .moment__think { transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.js .moment--hero.is-thinking .moment__think { transition-delay: 0s; }
.js .moment--hero.is-thinking .dots i { animation: bob 1s ease-in-out infinite; }
.js .moment--hero.is-thinking .dots i:nth-child(2) { animation-delay: .15s; } .js .moment--hero.is-thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

/* Orbit and pulse: only when JS says the hero is on screen */
.js .ao__ring { animation: breathe 4s ease-out infinite paused; }
.js .ao__ring:nth-child(2) { animation-delay: -1.33s; } .js .ao__ring:nth-child(3) { animation-delay: -2.66s; }
.js .ao__spin { animation: ao-spin 56s linear infinite paused; }
.js .ao__chip { animation: ao-un 56s linear infinite paused; }
.js .alwayson.is-live :is(.ao__ring, .ao__spin, .ao__chip) { animation-play-state: running; }
@keyframes breathe { 0% { transform: scale(1); opacity: .34; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes ao-spin { to { transform: rotate(360deg); } }
@keyframes ao-un { from { transform: rotate(0) scaleY(calc(1 / var(--k))); } to { transform: rotate(-360deg) scaleY(calc(1 / var(--k))); } }
/* ---------- Hero top row ---------- */
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.hero__top .pill { margin: 0; }

/* ==========================================================================
   KEEPSAKES (v9). Every section is a paper object, drawn with HTML, CSS and
   inline SVG only. The base rules below ARE the finished, static state: with no
   JS or with reduced motion nothing moves and nothing is hidden. Motion lives in
   one `prefers-reduced-motion: no-preference` block at the end, and only starts
   when site.js adds `.in` to an object.
   ========================================================================== */

body.home {
  --k-gold-wash: var(--gold-wash); --k-gold-line: var(--gold-line); --k-caution-wash: var(--caution-wash);
  --k-env: #f2e5d3; --k-env-2: #e4d1b9; --k-env-3: #ead9c3; --k-env-line: rgba(93, 60, 40, .16);
  --k-sheet: var(--paper);
  --k-tape: rgba(253, 250, 247, .62);
  --k-ribbon-garnet: #b12e52; --k-ribbon-gold: #d9b26b; --k-ribbon-night: #2b1421;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home {
    --k-gold-wash: #3a2c1a; --k-gold-line: #5a4526; --k-caution-wash: #3d2418;
    --k-env: #6a5360; --k-env-2: #55404c; --k-env-3: #5f4957; --k-env-line: rgba(253, 250, 247, .26); --k-hole: #120910; --k-hole-ring: rgba(253, 250, 247, .42);
    --k-sheet: #1d1118;
    --k-tape: rgba(253, 250, 247, .24);
  }
}

/* Small caps label used on every object */
.obj__when, .dk__when { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink); }
.obj p, .obj ul, .obj ol, .planner p, .planner ol { margin: 0; }
.obj__foot { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.help .obj p.obj__foot { color: var(--muted); }

/* A soft mat behind each object */
.obj { position: relative; width: min(100%, 390px); display: grid; gap: 14px; justify-items: center; text-align: left; isolation: isolate; }
.obj > * { max-width: 100%; }
.obj::before { content: ""; position: absolute; z-index: -1; inset: 4% -6%; border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; background: radial-gradient(closest-side, var(--garnet-wash), transparent); opacity: .7; }
.obj__when { justify-self: start; }

/* speech bubbles */
.bub { max-width: 92%; padding: 9px 14px 10px; font-size: 15px; line-height: 1.4; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 18px 18px 18px 5px; box-shadow: var(--shade-1); }
.help .bub { color: var(--ink); }
.bub--you { justify-self: end; background: var(--garnet-wash); border-color: var(--garnet-line); border-radius: 18px 18px 5px 18px; }
.bub--wing { justify-self: start; }
.bub span { font-weight: 700; color: var(--ink-2); }

/* ---------- Press and hover feedback (individual `scale` / `translate`, so they never fight a transform) ---------- */
.soon, .act, .quote, .moment__btn, .rib, .sn { -webkit-tap-highlight-color: transparent; }
.soon, .act, .moment__btn { transition: scale .35s var(--spring), translate .3s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s; }
a.soon { transition: transform .2s var(--ease), scale .35s var(--spring); }
:is(.soon, .act, .moment__btn):active { scale: .96; }
@media (hover: hover) { .act:hover { translate: 0 -2px; } .moment__btn:hover { scale: 1.08; } }
.act:focus-visible, .quote:focus-visible, .moment__btn:focus-visible, .rib:focus-visible { outline: 2px solid var(--garnet); outline-offset: 3px; }

/* ==========================================================================
   1. WHY: the planner page
   ========================================================================== */
.why { background: var(--linen); overflow-x: clip; }
.why__in { display: grid; gap: 30px; max-width: 1060px; }
.why__copy { text-align: left; }
.why h2 { margin-top: 14px; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; }
.why__lead { margin-top: 20px; max-width: 30em; font-size: clamp(17px, 1.7vw, 19.5px); color: var(--ink-2); }
.why__close { max-width: 26em; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; color: var(--ink); }
.why__close em { font-style: normal; color: var(--garnet-deep); }
@media (min-width: 860px) {
  .why__in { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); grid-template-rows: 1fr auto 1fr; column-gap: clamp(48px, 7vw, 100px); align-items: start; }
  .why__copy { grid-column: 1; grid-row: 2; }
  .why__obj { grid-column: 2; grid-row: 1 / 4; }
  .why__close { grid-column: 1; grid-row: 3; margin-top: 4px; }
}

.why__obj { position: relative; width: min(100%, 410px); margin-inline: auto; padding: 8px 30px 206px 0; }
.planner { position: relative; display: flex; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shade-3); rotate: -1.5deg; overflow: hidden; }
.planner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, .0) 60%, rgba(125, 80, 40, .05)); }
.pn__bind { flex: none; width: 30px; background:
  radial-gradient(circle at 50% 50%, var(--k-hole, var(--linen)) 4.6px, var(--k-hole-ring, rgba(27, 18, 22, .2)) 5.2px, transparent 6.4px) 0 14px / 100% 58px repeat-y,
  linear-gradient(90deg, var(--sunken), transparent); border-right: 1px solid var(--rule); }
.pn__sheet { flex: 1; min-width: 0; padding: 14px 14px 12px 6px; }
.pn__day { padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.pn__grid { display: grid; grid-template-columns: 44px minmax(0, 1fr); background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule-soft) 27px 28px); }
.pn__times { display: grid; grid-auto-rows: 28px; list-style: none; padding: 0; }
.pn__times li { padding-right: 8px; font-size: 11px; line-height: 28px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.pn__blocks { display: grid; grid-template-rows: repeat(14, 28px); list-style: none; padding: 0; }
.pb { display: flex; align-items: center; gap: 6px; margin: 1px 0; padding: 0 10px; border-radius: 7px; border: 1px solid var(--rule); font-size: 13px; font-weight: 650; color: var(--ink-2); background: var(--sunken); }
.pb svg { width: 14px; height: 14px; flex: none; }
.pb--commute, .pb--phone { background: var(--linen); }
.pb--errand { background: var(--k-gold-wash); border-color: var(--k-gold-line); }
.pb1 { grid-row: 1; } .pb2 { grid-row: 2 / span 3; } .pb3 { grid-row: 5; } .pb4 { grid-row: 6 / span 3; }
.pb5 { grid-row: 9 / span 2; } .pb6 { grid-row: 11 / span 3; } .pb7 { grid-row: 14; }
.pn__people { height: 16px; margin: 6px 0 0 44px; padding: 0 8px; overflow: hidden; border-radius: 5px; background: var(--garnet-wash); border: 1px solid var(--garnet-line); font-size: 10.5px; font-weight: 700; line-height: 14px; letter-spacing: .02em; color: var(--garnet); white-space: nowrap; }

/* sticky notes: they rest where they fell (below and beside the page) */
.slips { list-style: none; padding: 0; margin: 0; }
.sn { position: absolute; z-index: 2; width: 142px; min-height: 66px; padding: 15px 11px 11px; font-family: var(--serif); font-variation-settings: "SOFT" 60, "WONK" 0; font-size: 16.5px; font-weight: 500; line-height: 1.2; color: var(--ink); cursor: pointer; filter: drop-shadow(0 6px 5px rgba(27, 18, 22, .16)); border-radius: 3px 3px 6px 3px; left: var(--fl); top: var(--ft); rotate: var(--fr); }
.sn::before { content: ""; position: absolute; left: 50%; top: -8px; width: 46px; height: 16px; margin-left: -23px; rotate: -4deg; background: var(--k-tape); border: 1px solid rgba(27, 18, 22, .07); box-shadow: 0 1px 2px rgba(27, 18, 22, .08); }
.sn--gold { background: var(--k-gold-wash); --fl: 0px; --ft: 518px; --fr: -6deg; --sl: calc(100% - 122px); --st: 74px; --sr: 3deg; }
.sn--garnet { background: var(--garnet-wash); --fl: calc(100% - 156px); --ft: 530px; --fr: 4deg; --sl: calc(100% - 122px); --st: 214px; --sr: -2deg; }
.sn--linen { background: var(--linen); border: 1px solid var(--rule); --fl: 34px; --ft: 612px; --fr: -3deg; --sl: calc(100% - 122px); --st: 350px; --sr: 2deg; }
.sn--linen::before { rotate: 3deg; }
.sn:hover { translate: 0 -2px; }

/* ==========================================================================
   2. DAY: postcards
   ========================================================================== */
.tear { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 22px; pointer-events: none; }
.tear path { fill: currentColor; }
.tear .tear__under { opacity: .3; }
.tear--day { color: var(--linen); }
.tear--fin { color: var(--k-sheet); }
.day { padding-top: clamp(78px, 9vw, 130px); }
.day .head { margin-bottom: clamp(32px, 4vw, 56px); }
.day .head h2 em { color: var(--gold-lift); }
.day .head p { color: rgba(253, 250, 247, .78); margin-inline: auto; }

.pc-track { margin-inline: calc(-1 * var(--gut, 22px)); padding: 26px var(--gut, 22px) 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut, 22px); scrollbar-width: none; overscroll-behavior-x: contain; }
.pc-track::-webkit-scrollbar { display: none; }
.pc-track:focus-visible { outline-offset: -3px; }
.pcs { list-style: none; padding: 0; margin: 0 auto; display: flex; width: max-content; gap: 14px; }
.pc { position: relative; flex: none; width: min(78vw, 270px); display: flex; flex-direction: column; background: var(--card); border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 22px 40px -18px rgba(0, 0, 0, .6); scroll-snap-align: center; rotate: calc(var(--r, 0deg) * .5); transition: rotate .45s var(--spring), translate .45s var(--spring), box-shadow .3s; }
.pc:nth-child(1) { --r: -3deg; } .pc:nth-child(2) { --r: 2deg; } .pc:nth-child(3) { --r: -1.5deg; } .pc:nth-child(4) { --r: 2.5deg; } .pc:nth-child(5) { --r: -2deg; }
.pc__sky { position: relative; height: 158px; border-radius: 10px 10px 0 0; overflow: hidden; }
.pc__sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc__sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; background: radial-gradient(circle at 6px 50%, var(--card) 3.2px, transparent 3.8px) 0 0 / 12px 100% repeat-x; }
.pc--dawn .pc__sky { background: linear-gradient(180deg, #f6b7a6 0%, #f8d2b0 58%, #fbe7c0 100%); }
.pc--noon .pc__sky { background: linear-gradient(180deg, #a9cdea 0%, #d4e6ef 55%, #fbf0d2 100%); }
.pc--sunset .pc__sky { background: linear-gradient(180deg, #7a2d5c 0%, #c4466a 42%, #f09a6e 100%); }
.pc--dusk .pc__sky { background: linear-gradient(180deg, #1e1030 0%, #4a2a5c 55%, #8a4a6e 100%); }
.pc--night .pc__sky { background: linear-gradient(180deg, #0c0612 0%, #1a0e24 60%, #2a1630 100%); }
.pc__mark { position: absolute; z-index: 2; right: 22px; top: 10px; width: 58px; height: 58px; display: grid; place-items: center; margin: 0; rotate: 9deg; border-radius: 50%; border: 1.6px dashed #6a2142; background: rgba(253, 250, 247, .86); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5c1a34; box-shadow: 0 0 0 3px rgba(253, 250, 247, .28); }
.pc__mark::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(106, 33, 66, .35); }
.pc__now { display: none; position: absolute; z-index: 2; left: 10px; top: 14px; padding: 4px 10px 3px; rotate: -8deg; border: 2.2px solid #a02649; border-radius: 6px; background: rgba(253, 250, 247, .9); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a02649; }
.pc.is-now .pc__now { display: block; }
.pc.is-now { box-shadow: 0 0 0 2px rgba(224, 88, 124, .55), 0 0 36px 4px rgba(224, 88, 124, .38), 0 22px 40px -18px rgba(0, 0, 0, .6); }
.pc__paper { flex: 1; padding: 20px 18px 20px; }
.pc__paper h3 { font-size: 21px; line-height: 1.12; }
.pc__paper p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pc .st { opacity: .9; }
@media (min-width: 1080px) {
  .pc-track { margin-inline: 0; padding: 30px 0 20px; overflow: visible; }
  .pcs { width: auto; justify-content: center; gap: 0; }
  .pc { width: 214px; scroll-snap-align: none; rotate: var(--r); margin-left: -8px; }
  .pc:first-child { margin-left: 0; }
  .pc:hover, .pc:focus-within { rotate: 0deg; translate: 0 -12px; z-index: 3; box-shadow: 0 4px 8px rgba(0, 0, 0, .3), 0 34px 54px -20px rgba(0, 0, 0, .7); }
  .pc.is-now:hover { box-shadow: 0 0 0 2px rgba(224, 88, 124, .6), 0 0 44px 6px rgba(224, 88, 124, .45), 0 34px 54px -20px rgba(0, 0, 0, .7); }
  .pc-nav { display: none !important; }
}
@media (min-width: 560px) and (max-width: 1079px) { .pc { width: 250px; } .pcs { margin-inline: 0; } }

/* ==========================================================================
   3. HOW: the keepsake box
   ========================================================================== */
.how, .day { --gut: 22px; }
@media (min-width: 700px) { .how, .day { --gut: 32px; } }
.helps__head { text-align: center; margin-bottom: clamp(30px, 4vw, 52px); }
.helps__head h2 { margin-top: 12px; font-size: clamp(30px, 4.4vw, 52px); text-wrap: balance; }
.helps__head h2 em, .help h4 em, .pgroup h3 em, .why h2 em, .privacy h2 em, .finale--home h2 em { font-style: normal; color: var(--garnet); }

/* ribbons: bookmarks hanging from the lid */
.ribbons { position: relative; display: flex; justify-content: center; gap: clamp(8px, 2vw, 22px); max-width: 640px; margin: 0 auto clamp(30px, 5vw, 64px); padding-top: 12px; }
.ribbons::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(180deg, var(--k-gold-line), var(--k-gold-wash)); border: 1px solid var(--k-gold-line); box-shadow: var(--shade-1); }
.rib { position: relative; flex: 1 1 0; max-width: 190px; min-height: 98px; display: grid; place-items: start center; padding: 18px 8px 26px; text-align: center; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 17px), 0 100%); font-family: var(--serif); font-weight: 600; font-size: clamp(14px, 3.6vw, 18px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; transition: translate .35s var(--spring), filter .25s; }
.rib span { max-width: 7.5em; }
.rib--garnet { background: linear-gradient(180deg, #c23a60, var(--k-ribbon-garnet)); color: #fff; }
.rib--gold { background: linear-gradient(180deg, #e3c07d, var(--k-ribbon-gold)); color: #2a1d08; }
.rib--night { background: linear-gradient(180deg, #3a1d2e, var(--k-ribbon-night)); color: var(--champagne); }
.rib::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: rgba(255, 255, 255, .16); }
@media (hover: hover) { .rib:hover { translate: 0 8px; filter: brightness(1.06); } }
.rib:active { translate: 0 8px; }

/* pillar headings: a big gold numeral with a hand-drawn underline */
.pgroup { max-width: 900px; margin: clamp(48px, 7vw, 92px) auto 0; padding-top: clamp(26px, 4vw, 40px); border-top: 1px solid var(--rule); text-align: center; scroll-margin-top: 80px; }
.pgroup__n { position: relative; display: inline-block; font-family: var(--serif); font-size: clamp(60px, 8vw, 96px); font-weight: 400; line-height: 1; color: var(--gold); padding-bottom: 12px; font-variation-settings: "SOFT" 60, "WONK" 0; }
.pgroup__ul { position: absolute; left: -15%; bottom: 0; width: 130%; height: 11px; overflow: visible; }
.pgroup__ul path { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; }
.pgroup h3 { margin-top: 6px; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.pgroup p { margin: 14px auto 0; max-width: 30em; font-size: clamp(17px, 1.7vw, 19px); color: var(--ink-2); }

/* features */
.help { display: grid; gap: 26px; justify-items: center; text-align: center; padding-block: clamp(30px, 4vw, 56px); }
.help__copy { max-width: 28em; }
.help h4 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.help h4 + p { margin-top: 14px; }
.help p { color: var(--ink-2); }
.help__note { margin-top: 12px; font-size: 14.5px; color: var(--muted) !important; }
.helps__nav { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 28px; margin-top: 2px; }
.helps__nav.is-off { display: none; }
.helps__dots { display: inline-flex; gap: 7px; }
.helps__dots i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--garnet-line); transition: width .35s var(--spring), background-color .25s; }
.helps__dots i.is-on { width: 22px; background: var(--garnet); }
.helps__swipe { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--muted); transition: opacity .4s, visibility .4s; }
.helps__swipe svg { width: 16px; height: 16px; }
.helps__nav.is-used .helps__swipe { opacity: 0; visibility: hidden; }
.pc-nav .helps__dots i { background: rgba(253, 250, 247, .26); }
.pc-nav .helps__dots i.is-on { background: var(--gold-lift); }
.pc-nav .helps__swipe { color: rgba(253, 250, 247, .7); }
@media (min-width: 860px) {
  .help { grid-template-columns: minmax(0, 1fr) minmax(0, 410px); gap: clamp(40px, 8vw, 110px); text-align: left; justify-items: stretch; align-items: center; max-width: 980px; margin-inline: auto; }
  .help__copy { justify-self: end; }
  .help .obj { justify-self: start; width: 100%; }
  .help--flip { grid-template-columns: minmax(0, 410px) minmax(0, 1fr); }
  .help--flip .help__copy { order: 2; justify-self: start; }
  .help--flip .obj { order: 1; justify-self: end; }
}

/* --- a) Remember: the index card --- */
.o-card { gap: 12px; padding-top: 6px; }
.o-card .bub--you { max-width: 96%; }
.idx { position: relative; width: 100%; padding: 16px 18px 52px 20px; background: var(--card); border: 1px solid var(--rule); border-top: 5px solid var(--garnet); border-radius: 5px 5px 12px 12px; box-shadow: var(--shade-2); rotate: -1.2deg; margin-top: 8px; }
.idx__clip { position: absolute; left: 16px; top: -22px; width: 22px; height: 54px; color: #8e8389; filter: drop-shadow(0 2px 1px rgba(27, 18, 22, .2)); }
.idx__head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 2px 0 9px 36px; border-bottom: 1.5px solid var(--garnet-line); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.idx__init { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--garnet-wash); border: 1px solid var(--garnet-line); font-family: var(--serif); font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--garnet-deep); }
.idx__lines { list-style: none; padding: 0; background: repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px); }
.idx__lines li { display: flex; align-items: center; gap: 9px; height: 36px; padding-top: 4px; font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 20px; font-weight: 450; letter-spacing: -.005em; color: var(--ink); }
.idx__dot { flex: none; width: 9px; height: 9px; margin-top: 2px; border-radius: 50%; background: var(--caution); box-shadow: 0 0 0 3px var(--k-caution-wash); }
.idx__stamp { position: absolute; right: 14px; bottom: 13px; rotate: -6deg; padding: 5px 11px 4px; border: 2px solid var(--garnet); border-radius: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--garnet); background: color-mix(in srgb, var(--card) 70%, transparent); }

/* --- b) Share: the envelope --- */
.o-env { gap: 10px; }
.env { position: relative; width: min(100%, 280px); aspect-ratio: 280 / 180; margin: 78px auto 86px; filter: drop-shadow(0 10px 10px rgba(27, 18, 22, .2)); }
.env svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.env__bk { fill: var(--k-env-2); }
.env__fl, .env__fr { fill: var(--k-env); stroke: var(--k-env-line); stroke-width: 1; }
.env__fr { fill: var(--k-env-3); }
.env__fb { fill: var(--k-env); stroke: var(--k-env-line); stroke-width: 1; }
.env__flap { z-index: 0; filter: drop-shadow(0 3px 3px rgba(60, 30, 20, .22)); }
.env__flap path { fill: var(--k-env-3); stroke: var(--k-env-line); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 0; scale: 1 -.62; }
.env__front { z-index: 2; }
.env__reel { position: absolute; z-index: 1; left: 50%; top: 4%; width: 56%; height: 54%; margin-left: -28%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 9px; gap: 2px; border-radius: 10px; background: linear-gradient(140deg, #4a2038, #8e2a4c); color: #fff; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.env__reel svg { position: static; width: 24px; height: 24px; }
.env__reel span { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.env__tag { position: absolute; z-index: 4; right: 9%; top: calc(100% - 4px); width: 92px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; rotate: 5deg; color: var(--muted); }
.env__tag svg { position: static; width: 4px; height: 20px; }
.env__tag p { position: relative; margin: -2px 0 0; padding: 14px 9px 7px; width: 100%; text-align: center; font-family: var(--serif); font-variation-settings: "SOFT" 60, "WONK" 0; font-size: 15px; font-weight: 600; line-height: 1.1; color: var(--ink); background: var(--card); border: 1px solid var(--rule); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); filter: none; box-shadow: none; }
.env__tag p::before { content: ""; position: absolute; left: 50%; top: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--k-env-2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
.talk { width: 100%; display: grid; gap: 7px; }
.talk .bub { font-size: 14.5px; padding: 7px 13px 8px; }

/* --- c) Ideas: the fanned deck --- */
.o-deck { gap: 18px; }
.deck { list-style: none; padding: 0; position: relative; display: grid; width: min(100%, 250px); margin: 56px auto 0; }
.dk { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 16px 16px 18px; background: var(--card); border: 1px solid var(--garnet-line); border-radius: 18px; box-shadow: var(--shade-2); transform-origin: 50% 100%; transition: translate .55s var(--spring), rotate .55s var(--spring), opacity .3s; }
.dk[data-pos="0"] { z-index: 3; translate: 0 0; rotate: 0deg; }
.dk[data-pos="1"] { z-index: 2; translate: 24px -34px; rotate: 8deg; background: var(--garnet-wash); }
.dk[data-pos="2"] { z-index: 1; translate: -24px -34px; rotate: -8deg; background: var(--k-gold-wash); border-color: var(--k-gold-line); }
.dk.is-out { z-index: 4; translate: 118% 6px !important; rotate: 4deg !important; opacity: 0; transition: translate .38s var(--ease), rotate .38s var(--ease), opacity .38s; }
.dk.no-t { transition: none !important; }
.dk__t { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.16; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.help .dk__t { color: var(--ink); }
.dk[data-pos="0"] .dk__t { margin-top: 6px; font-size: 28px; }
.dk__why { margin: 0; font-size: 16px; color: var(--muted); }
.help .dk__why { color: var(--muted); }
.dk:not([data-pos="0"]) { padding-top: 9px; }
.dk:not([data-pos="0"]) .dk__t { font-size: 17px; }
.deck__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.act { font-family: inherit; padding: 8px 18px; min-height: 44px; border-radius: var(--r-pill); background: var(--garnet-wash); border: 1px solid var(--garnet-line); color: var(--garnet-deep); font-size: 15px; font-weight: 650; cursor: pointer; }
.act--skip { background: transparent; border-color: var(--rule); color: var(--muted); }
.act--save[aria-pressed="true"] { background: #b12e52; border-color: #b12e52; color: #fff; }

/* --- d) Words: note slips --- */
.o-slips { gap: 12px; }
.o-slips__h { margin: 0; justify-self: start; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 23px); line-height: 1.25; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.help .o-slips p.o-slips__h { color: var(--ink); }
.nslips { list-style: none; padding: 0; width: 100%; display: grid; gap: 10px; }
.nslips li { filter: drop-shadow(0 3px 3px rgba(27, 18, 22, .13)); transition: translate .35s var(--spring), rotate .35s var(--spring), filter .3s; }
.nslips li:nth-child(1) { rotate: -1.4deg; margin-right: 4%; } .nslips li:nth-child(2) { rotate: 1.2deg; margin-left: 3%; } .nslips li:nth-child(3) { rotate: -.8deg; margin-right: 2%; }
.quote { --edge: polygon(0 4px, 3% 1px, 6% 5px, 9% 1px, 13% 4px, 17% 0, 21% 4px, 26% 1px, 31% 5px, 36% 1px, 41% 4px, 46% 0, 51% 4px, 56% 1px, 61% 5px, 66% 1px, 71% 4px, 76% 0, 81% 4px, 86% 1px, 91% 5px, 95% 1px, 100% 4px, 100% calc(100% - 4px), 96% calc(100% - 1px), 92% calc(100% - 5px), 87% 100%, 82% calc(100% - 4px), 77% calc(100% - 1px), 72% calc(100% - 5px), 67% 100%, 62% calc(100% - 4px), 57% calc(100% - 1px), 52% calc(100% - 5px), 47% 100%, 42% calc(100% - 4px), 37% calc(100% - 1px), 32% calc(100% - 5px), 27% 100%, 22% calc(100% - 4px), 17% calc(100% - 1px), 12% calc(100% - 5px), 7% 100%, 3% calc(100% - 3px), 0 calc(100% - 5px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-radius: 0; clip-path: var(--edge); background: var(--card); font-family: var(--serif); font-variation-settings: "SOFT" 80, "WONK" 0; font-size: 17px; font-weight: 500; line-height: 1.3; text-align: left; color: var(--ink); cursor: pointer; transition: background-color .25s; }
.nslips li:nth-child(2) .quote { background: var(--k-gold-wash); } .nslips li:nth-child(3) .quote { background: var(--garnet-wash); }
.quote::after { content: "\2713  Picked"; display: none; flex: none; padding: 4px 10px 3px; border-radius: var(--r-pill); background: #b12e52; color: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.quote[aria-pressed="true"]::after { display: inline-block; }
.nslips li:has(.quote[aria-pressed="true"]) { translate: 0 -4px; rotate: 0deg; filter: drop-shadow(0 9px 8px rgba(27, 18, 22, .2)); }
.quote.is-pop::after { animation: hp-pop-sm .5s var(--spring); }

/* --- e) Plan: the ticket --- */
.o-ticket { gap: 12px; }
.tkt { --stub: 66px; position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); filter: drop-shadow(0 8px 10px rgba(27, 18, 22, .14)); }
.tkt::before { content: ""; position: absolute; inset: 0; background: var(--card); border-radius: 14px; -webkit-mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 97%, #000) , radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 97%, #000), radial-gradient(circle 8px at 0 50%, #0000 97%, #000), radial-gradient(circle 8px at 100% 50%, #0000 97%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 97%, #000), radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 97%, #000), radial-gradient(circle 8px at 0 50%, #0000 97%, #000), radial-gradient(circle 8px at 100% 50%, #0000 97%, #000); mask-composite: intersect; }
.tkt__body { position: relative; padding: 18px 14px 18px 20px; }
.tkt__t { margin: 6px 0 12px !important; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.help .tkt__t { color: var(--ink); }
.route { position: relative; padding-left: 34px; }
.route ol { list-style: none; padding: 0; display: grid; gap: 22px; }
.route li { position: relative; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.help .route li { color: var(--ink); }
.route b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--gold-ink); }
.pin { position: absolute; left: -34px; top: 1px; width: 20px; height: 26px; color: var(--garnet); }
.pin__hole { fill: var(--card); }
.route__path { position: absolute; left: -2px; top: 30px; bottom: 40px; width: 24px; height: auto; color: var(--garnet); }
.tkt__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 10px 0; margin: 0; border-left: 2px dashed var(--rule); color: var(--gold-ink); font-weight: 800; letter-spacing: .18em; font-size: 13px; }
.tkt__stub span { writing-mode: vertical-rl; rotate: 180deg; }
.tkt__stub span + span { color: var(--garnet); font-family: var(--serif); font-size: 18px; letter-spacing: .06em; }

/* --- f) Song: the record sleeve --- */
.o-sleeve { gap: 14px; }
.sleeve { position: relative; width: min(100%, 270px); height: 200px; margin-left: 0; justify-self: start; }
.sleeve__cover { position: relative; z-index: 2; width: 196px; height: 196px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border-radius: 6px 10px 10px 6px; background: radial-gradient(120% 90% at 20% 10%, #d14a70 0%, #b12e52 42%, #7d1f3c 100%); box-shadow: 4px 8px 16px -6px rgba(60, 10, 30, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; }
.sleeve__cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent); }
.sleeve__heart { width: 22px; height: 22px; color: #fff; opacity: .92; }
.sleeve__t { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; color: #fff; }
.help .sleeve__t { color: #fff; }
.rec { position: absolute; z-index: 1; top: 8px; left: 70px; width: 180px; height: 180px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #1b1218 0 1.4px, #2a2027 1.4px 2.8px); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); translate: 22px 0; transition: translate .8s var(--spring); }
.rec::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 10%, rgba(255, 255, 255, .13) 14%, transparent 20% 60%, rgba(255, 255, 255, .1) 66%, transparent 72%); }
.rec__label { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #1b1218 0 4px, transparent 4.6px), radial-gradient(circle at 35% 30%, #f0d7a2, #d9b26b 60%, #b8893f); }
.o-sleeve.is-playing .rec { translate: 34px 0; }
.moment__play { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-pill); background: var(--garnet-wash); border: 1px solid var(--garnet-line); }
.moment__btn { flex: none; width: 36px; height: 36px; padding: 0; border: 0; display: grid; place-items: center; border-radius: 50%; background: #b12e52; color: #fff; cursor: pointer; position: relative; }
.moment__btn::before { content: ""; position: absolute; inset: -5px; }
.moment__btn svg { width: 16px; height: 16px; margin-left: 2px; grid-area: 1 / 1; }
.moment__btn .i-pause { display: none; margin-left: 0; }
.o-sleeve.is-playing .moment__btn .i-play { display: none; }
.o-sleeve.is-playing .moment__btn .i-pause { display: block; }
.moment__time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.eq { flex: 1; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.eq i { flex: 1; max-width: 6px; height: 100%; border-radius: 3px; background: var(--garnet); transform-origin: 50% 50%; }
.eq i:nth-child(1) { transform: scaleY(.4); } .eq i:nth-child(2) { transform: scaleY(.75); } .eq i:nth-child(3) { transform: scaleY(1); }
.eq i:nth-child(4) { transform: scaleY(.6); } .eq i:nth-child(5) { transform: scaleY(.9); } .eq i:nth-child(6) { transform: scaleY(.5); } .eq i:nth-child(7) { transform: scaleY(.3); }

/* --- Pillar 3: the handoff note --- */
.handoff { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.25fr); max-width: 940px; margin: clamp(28px, 4vw, 48px) auto 0; border-radius: 22px; border: 1px solid var(--rule); box-shadow: var(--shade-3); overflow: hidden; background: var(--card); }
.ho__half { padding: 28px 26px 30px; }
.ho__half h4 { margin: 0 0 14px; font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.ho__half--wing { background: var(--card); }
.ho__half--you { background: var(--garnet-wash); }
.ho__list { list-style: none; padding: 0; margin: 0; background: repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule) 39px 40px); }
.ho__list li { height: 40px; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-variation-settings: "SOFT" 80, "WONK" 0; font-size: 20px; font-weight: 500; color: var(--ink); }
.ho__list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.ho__fold { position: relative; display: grid; place-items: center; background: linear-gradient(90deg, rgba(27, 18, 22, 0) 0, rgba(27, 18, 22, .07) 46%, rgba(255, 255, 255, .25) 50%, rgba(27, 18, 22, .05) 54%, rgba(27, 18, 22, 0) 100%); color: var(--garnet); }
.ho__line { position: absolute; left: 10px; right: 10px; top: 50%; height: 0; border-top: 2.5px dotted currentColor; opacity: .75; }
.ho__line::after { content: ""; position: absolute; right: -2px; top: -7px; width: 10px; height: 10px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; rotate: 45deg; }
.ho__plane { position: absolute; z-index: 1; left: 12px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; --fx: 38px; --fy: 0px; translate: calc(var(--fx) * .5) calc(var(--fy) * .5); }
.ho__half--you .stay { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; background: none; border-radius: 0; overflow: visible; }
.ho__half--you .stay li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 0; background: none; border: 0; border-radius: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ho__half--you .stay b { display: block; margin-bottom: 3px; font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.stay__ic { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; padding: 9px; border-radius: 50%; background: var(--card); border: 1px solid var(--garnet-line); color: var(--garnet-deep); }
@media (max-width: 859px) {
  .handoff { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 56px auto; }
  .ho__half { padding: 22px 20px 24px; }
  .ho__fold { background: linear-gradient(180deg, rgba(27, 18, 22, 0) 0, rgba(27, 18, 22, .07) 46%, rgba(255, 255, 255, .25) 50%, rgba(27, 18, 22, .05) 54%, rgba(27, 18, 22, 0) 100%); }
  .ho__line { left: 50%; right: auto; top: 6px; bottom: 6px; width: 0; height: auto; border-top: 0; border-left: 2.5px dotted currentColor; }
  .ho__line::after { right: auto; left: -7.5px; top: auto; bottom: -2px; rotate: 135deg; }
  .ho__plane { left: 50%; top: 6px; margin: 0 0 0 -11px; --fx: 0px; --fy: 24px; rotate: 90deg; }
}

/* --- One wing, wherever you are: luggage tags on a string --- */
.forall { margin-top: clamp(34px, 5vw, 56px); text-align: center; }
.forall__k { font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.forall__rig { position: relative; max-width: 560px; margin: 8px auto 0; color: var(--muted); }
.forall__string { width: 100%; height: 24px; }
.forall ul { list-style: none; padding: 0; margin: -16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 28px); padding-inline: 4%; }
.forall li { position: relative; display: flex; justify-content: center; transform-origin: 50% 0; }
.forall li:nth-child(1) { translate: 0 2px; rotate: -2deg; } .forall li:nth-child(2) { translate: 0 8px; rotate: 1.5deg; } .forall li:nth-child(3) { translate: 0 2px; rotate: -1deg; }
.forall li::before { content: ""; position: absolute; left: 50%; top: -3px; width: 1.6px; height: 20px; margin-left: -.8px; background: var(--muted); }
.forall li span { position: relative; margin-top: 16px; width: 100%; max-width: 142px; min-height: 76px; padding: 26px 8px 10px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shade-2); clip-path: none; border-radius: 4px 4px 12px 12px; font-family: var(--serif); font-variation-settings: "SOFT" 60, "WONK" 0; font-size: clamp(15px, 4vw, 18px); font-weight: 600; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.forall li span::before { content: ""; position: absolute; left: 50%; top: 8px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--linen); box-shadow: inset 0 1px 2px rgba(27, 18, 22, .35); }
.forall li:nth-child(1) span { background: var(--garnet-wash); border-color: var(--garnet-line); } .forall li:nth-child(2) span { background: var(--k-gold-wash); border-color: var(--k-gold-line); }

/* ==========================================================================
   4. PLANS: admission tickets
   ========================================================================== */
.plans { background: var(--sunken); }
.plan-row { list-style: none; padding: 0; display: grid; gap: 22px; max-width: 960px; margin: 14px auto 0; }
@media (min-width: 760px) { .plan-row { grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; } }
.tk { position: relative; filter: drop-shadow(0 6px 8px rgba(27, 18, 22, .12)); transition: translate .35s var(--spring), rotate .35s var(--spring), filter .3s; }
.tk--free { rotate: -1.5deg; } .tk--pro { rotate: 1.5deg; }
.tk--plus { translate: 0 -10px; filter: drop-shadow(0 14px 16px rgba(93, 24, 48, .25)); }
.tk__in { --stubh: 54px; position: relative; overflow: hidden; background: var(--card); border-radius: 14px; border: 1px solid var(--rule); -webkit-mask: radial-gradient(circle 11px at 0 var(--stubh), #0000 97%, #000), radial-gradient(circle 11px at 100% var(--stubh), #0000 97%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 11px at 0 var(--stubh), #0000 97%, #000), radial-gradient(circle 11px at 100% var(--stubh), #0000 97%, #000); mask-composite: intersect; }
.tk__stub { height: var(--stubh); margin: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 2px dashed var(--rule); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.tk__stub span + span { font-variant-numeric: tabular-nums; color: var(--muted); }
.tk--plus .tk__in::before { content: ""; display: block; height: 9px; background: linear-gradient(105deg, #b12e52, #d9b26b 30%, #f0d7a2 45%, #c53a60 62%, #d9b26b 80%, #b12e52) 0 0 / 220% 100%; }
.tk--plus .tk__stub { height: calc(var(--stubh) - 9px); }
.tk__body { padding: 20px 22px 24px; }
.tk h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.pl__price { margin-top: 6px !important; font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--garnet-deep); line-height: 1.1; }
.pl__price small { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); }
.tk__body p:last-child { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.tk__body p { margin: 0; }
.plans__note { margin-top: 28px; text-align: center; font-size: 14.5px; color: var(--muted); }
@media (hover: hover) { .tk:hover { rotate: 0deg; translate: 0 -8px; } .tk--plus:hover { translate: 0 -16px; } }

/* ==========================================================================
   5. PRIVACY: sealed
   ========================================================================== */
.privacy { background: var(--k-sheet); }
.privacy__in { display: grid; gap: 34px; align-items: center; max-width: 1000px; }
.privacy__box { text-align: left; }
.privacy h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.025em; }
.privacy p { margin-top: 14px; color: var(--ink-2); }
.privacy a { color: var(--garnet-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 860px) { .privacy__in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(48px, 8vw, 110px); } }
.sealed { width: min(100%, 380px); margin-inline: auto; padding: 18px 10px; }
.se { position: relative; width: 100%; aspect-ratio: 300 / 200; filter: drop-shadow(0 18px 18px rgba(60, 20, 30, .22)); }
.se__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.se__body { fill: var(--k-env-2); }
.se__side { fill: var(--k-env); stroke: var(--k-env-line); } .se__side--r { fill: var(--k-env-3); }
.se__bot { fill: var(--k-env); stroke: var(--k-env-line); }
.se__flapg { filter: drop-shadow(0 4px 4px rgba(60, 30, 20, .28)); }
.se__flap { fill: var(--k-env-3); stroke: var(--k-env-line); transform-box: fill-box; transform-origin: 50% 0; }
.seal { position: absolute; left: 50%; top: 66%; width: 31%; margin: -15.5% 0 0 -15.5%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(60, 10, 25, .45)); }
.stamps { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pst { --pc: var(--k-gold-wash); width: 100px; padding: 15px 11px 12px; display: grid; justify-items: center; gap: 7px; text-align: center; background: var(--pc); box-shadow: inset 0 0 0 7px var(--pc), inset 0 0 0 8px var(--garnet-line); -webkit-mask: radial-gradient(circle at 6px 6px, #0000 3.4px, #000 3.8px) -6px -6px / 12px 12px round, linear-gradient(#000 0 0) 50% 50% / calc(100% - 12px) calc(100% - 12px) no-repeat; mask: radial-gradient(circle at 6px 6px, #0000 3.4px, #000 3.8px) -6px -6px / 12px 12px round, linear-gradient(#000 0 0) 50% 50% / calc(100% - 12px) calc(100% - 12px) no-repeat; font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.pst svg { width: 28px; height: 28px; color: var(--garnet); }
.pst--b { --pc: var(--garnet-wash); } .pst--c { --pc: var(--linen); }
.pst { rotate: -2deg; } .pst--b { rotate: 1.5deg; } .pst--c { rotate: -1deg; }

/* ==========================================================================
   6. CLOSER: two lights that find each other
   ========================================================================== */
.finale--home { padding-top: clamp(96px, 10vw, 140px); }
.closer { position: relative; width: 100%; height: 140px; margin-bottom: 20px; overflow: visible; container-type: inline-size; }
.cl__dust { position: absolute; inset: 0; opacity: .75; }
.cl__dust--a { background:
  radial-gradient(1.2px 1.2px at 8% 24%, rgba(253, 250, 247, .8), transparent), radial-gradient(1px 1px at 17% 70%, rgba(253, 250, 247, .6), transparent),
  radial-gradient(1.4px 1.4px at 29% 38%, rgba(240, 215, 162, .8), transparent), radial-gradient(1px 1px at 38% 82%, rgba(253, 250, 247, .55), transparent),
  radial-gradient(1.2px 1.2px at 61% 22%, rgba(253, 250, 247, .7), transparent), radial-gradient(1px 1px at 72% 66%, rgba(240, 215, 162, .7), transparent),
  radial-gradient(1.4px 1.4px at 86% 34%, rgba(253, 250, 247, .75), transparent), radial-gradient(1px 1px at 94% 78%, rgba(253, 250, 247, .55), transparent); }
.cl__dust--b { background:
  radial-gradient(1px 1px at 12% 52%, rgba(253, 250, 247, .7), transparent), radial-gradient(1.3px 1.3px at 23% 14%, rgba(240, 215, 162, .75), transparent),
  radial-gradient(1px 1px at 44% 28%, rgba(253, 250, 247, .6), transparent), radial-gradient(1.2px 1.2px at 56% 76%, rgba(253, 250, 247, .7), transparent),
  radial-gradient(1px 1px at 68% 44%, rgba(253, 250, 247, .55), transparent), radial-gradient(1.3px 1.3px at 79% 84%, rgba(240, 215, 162, .7), transparent),
  radial-gradient(1px 1px at 91% 16%, rgba(253, 250, 247, .65), transparent); }
.cl__bloom { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 232, 196, .55), rgba(224, 88, 124, .2) 40%, rgba(224, 88, 124, .06) 68%, transparent 100%); opacity: .5; }
.cl__x { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.cl__x--a { translate: -8px 0; } .cl__x--b { translate: 8px 0; }
.cl__y { position: absolute; left: 0; top: 0; }
.cl__orb { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd0dc, var(--garnet-night) 60%); box-shadow: 0 0 12px 4px rgba(224, 88, 124, .7), 0 0 44px 14px rgba(224, 88, 124, .3); }
.cl__x--b .cl__orb { background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold-lift) 62%); box-shadow: 0 0 12px 4px rgba(217, 178, 107, .7), 0 0 44px 14px rgba(217, 178, 107, .3); }

/* ==========================================================================
   Phone and small tablet
   ========================================================================== */
@media (max-width: 859px) {
  .band { padding-block: 56px; }
  .finale { padding-block: 64px 72px; }
  .finale--home { padding-top: 92px; }
  .day { padding-top: 84px; }
  :is(h2, h3, h4) { text-wrap: balance; }

  /* A. Hero: one column, ordered for the first screen */
  .hero--home { padding-block: 12px 48px; }
  .hero--home .hero__in { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
  .hero--home .hero__copy { display: contents; }
  .hero__top { order: 1; margin-bottom: 10px; }
  .hero__top { gap: 6px 10px; }
  .hero__top .pill { padding: 6px 13px; font-size: 12px; letter-spacing: .1em; }
  .hero__top .tag { font-size: 11.5px; letter-spacing: .14em; gap: 8px; }
  .hero__top .tag::before { width: 16px; }
  .hero--home h1 { order: 2; margin-top: 0; font-size: clamp(42px, 11.6vw, 70px); }
  .hero--home .hero__sub { order: 3; margin-top: 10px; font-size: 22px; }
  .alwayson { order: 4; width: 100%; max-width: 440px; margin-top: 0; }
  .hero__copy > .hero__cta { order: 5; margin-top: 20px; }
  .hero__soon { order: 6; margin-top: 12px; }
  .hero__plain { order: 7; margin-top: 18px; max-width: none; }
  .hero__brand { order: 8; margin-top: 14px; }
  .hero__fine { order: 9; margin-top: 14px; }
  .ao__stage { aspect-ratio: 1 / .72; --k: .74; }
  .moment--hero { margin-top: -16px; padding: 15px 18px 16px; border-radius: 24px; }
  .moment--hero .moment__line { font-size: 18px; }
  .moment--hero .moment__item { gap: 6px; }

  /* B. Why */
  .why h2 { font-size: 32px; }
  .why__in { gap: 26px; }
  .why__obj { width: min(100%, 372px); }

  /* C. Day: postcards, one carousel */
  .pcs { width: max-content; }

  /* D. How it helps */
  .helps__head { margin-bottom: 26px; }
  .pgroup { margin: 40px 0 0; padding-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: center; text-align: left; }
  .pgroup__n { font-size: 58px; }
  .pgroup h3 { margin: 0; font-size: 27px; }
  .pgroup p { grid-column: 1 / -1; max-width: none; margin: 12px 0 0; font-size: 16px; }

  .helps__track { display: flex; align-items: flex-start; gap: 12px; margin: 6px calc(-1 * var(--gut)) 0; padding: 8px var(--gut) 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
  .helps__track::-webkit-scrollbar { display: none; }
  .helps__track:focus-visible { outline-offset: -3px; }
  .helps__track .help { flex: 0 0 90%; min-width: 0; max-width: none; margin: 0; padding: 20px 16px 18px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; text-align: left; scroll-snap-align: center; background: var(--linen); border: 1px solid var(--rule); border-radius: 26px; box-shadow: var(--shade-1); }
  .helps__track .help__copy { display: contents; }
  .helps__track .obj { order: 0; width: 100%; max-width: 330px; margin: 0 auto 18px; }
  .helps__track .help h4 { order: 1; margin: 0 0 10px; font-size: 23px; }
  .helps__track .help__copy > p { order: 2; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
  .helps__track .help__copy > .help__note { order: 3; margin-top: 8px; font-size: 15px; }
  .js .helps__track .help.rise { opacity: 1; transform: none; }
  .hj .helps__track .help { transition: opacity .6s var(--ease), transform .8s var(--spring); }
  .hj .helps__track:not(.is-seen) .help { opacity: 0; transform: translateX(36px) scale(.95); }
  .hj .helps__track.is-seen .help:nth-child(2) { transition-delay: .12s; } .hj .helps__track.is-seen .help:nth-child(3) { transition-delay: .24s; } .hj .helps__track.is-seen .help:nth-child(4) { transition-delay: .36s; }
  .js .helps__nav.is-nudge .helps__swipe svg { animation: hp-nudge .9s ease-in-out 2; }
  @keyframes hp-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(7px); } }

  .forall { margin-top: 36px; }

  /* Plans: stacked tickets */
  .plan-row { gap: 24px; max-width: 420px; }
  .tk--free { rotate: -1.4deg; } .tk--plus { rotate: 1deg; translate: 0 0; } .tk--pro { rotate: -1deg; }

  /* Privacy */
  .privacy__in { gap: 26px; }
  .sealed { width: min(100%, 330px); }
  .pst { width: 98px; }

  /* Hit areas */
  .act, .quote { min-height: 44px; }
}

@media (max-width: 389px) {
  .hero__cta .soon { gap: 8px; padding: 9px 12px 9px 10px; }
  .hero__cta .soon b { font-size: 15.5px; }
}
@media (max-width: 380px) {
  .rib { font-size: 14px; padding-inline: 5px; }
  .sn { width: 134px; font-size: 16px; }
  .tkt { --stub: 58px; }
  .pst { width: 92px; }
}
@media (pointer: coarse) { .act, .quote { min-height: 44px; } }

/* ==========================================================================
   Motion. Only here, only when motion is welcome, and only after site.js is up
   (`.js-ready`), so the markup is the finished state until a reveal fires.
   Every loop pauses while its object is off screen (home.js sets `.hl` on <html>
   and `.is-live` on each [data-live] that is visible).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hl [data-live]:not(.is-live), .hl [data-live]:not(.is-live) *, .hl [data-live]:not(.is-live) *::before, .hl [data-live]:not(.is-live) *::after { animation-play-state: paused !important; }

  /* 1. planner */
  .js-ready .why__obj:not(.in) .pb { opacity: 0; }
  .js-ready .why__obj:not(.in) .pn__people { height: 42px; }
  .js-ready .why__obj:not(.in) .sn { opacity: 0; }
  .why__obj.in .pb { animation: pb-stamp .5s var(--spring) calc(var(--i) * 70ms + 150ms) backwards; }
  .pb1 { --i: 0; } .pb2 { --i: 1; } .pb3 { --i: 2; } .pb4 { --i: 3; } .pb5 { --i: 4; } .pb6 { --i: 5; } .pb7 { --i: 6; }
  .why__obj.in .pn__people { animation: people-squeeze .9s var(--ease) 1.15s backwards; }
  .why__obj.in .sn { animation: sn-peel 2.4s linear calc(2.1s + var(--k) * .42s) backwards; }
  .sn--gold { --k: 0; } .sn--garnet { --k: 1; } .sn--linen { --k: 2; }
  @keyframes pb-stamp { 0% { opacity: 0; scale: 1.06; } 55% { opacity: 1; scale: .985; } 100% { opacity: 1; scale: 1; } }
  @keyframes people-squeeze { from { height: 42px; } 60% { height: 13px; } to { height: 16px; } }
  @keyframes sn-peel {
    0% { left: var(--sl); top: var(--st); rotate: var(--sr); opacity: 0; scale: .75; animation-timing-function: var(--spring); }
    8% { opacity: 1; scale: 1; }
    32% { left: var(--sl); top: var(--st); rotate: var(--sr); animation-timing-function: ease-in-out; }
    44% { left: var(--sl); top: var(--st); rotate: calc(var(--sr) + 11deg); animation-timing-function: cubic-bezier(.5, .05, .8, .55); }
    84% { left: calc(var(--fl) + 4px); top: calc(var(--ft) + 8px); rotate: calc(var(--fr) - 4deg); animation-timing-function: ease-out; }
    100% { left: var(--fl); top: var(--ft); rotate: var(--fr); }
  }

  /* 2. postcards */
  .js-ready .pcs:not(.in) .pc { opacity: 0; }
  .pcs.in .pc { animation: pc-deal .95s var(--ease) calc(var(--n) * 130ms + 120ms) backwards; }
  .pc:nth-child(1) { --n: 0; --dx: 56px; } .pc:nth-child(2) { --n: 1; --dx: 56px; } .pc:nth-child(3) { --n: 2; --dx: 56px; } .pc:nth-child(4) { --n: 3; --dx: 56px; } .pc:nth-child(5) { --n: 4; --dx: 56px; }
  @media (min-width: 1080px) {
    .pc:nth-child(1) { --dx: 404px; } .pc:nth-child(2) { --dx: 202px; } .pc:nth-child(3) { --dx: 0px; } .pc:nth-child(4) { --dx: -202px; } .pc:nth-child(5) { --dx: -404px; }
  }
  @keyframes pc-deal { from { opacity: 0; translate: var(--dx) 26px; rotate: calc(var(--r) * -2 + 10deg); scale: .9; } }
  .pcs.in .pc.is-now .pc__now { animation: now-thump .6s var(--spring) 1.3s backwards; }
  @keyframes now-thump { from { opacity: 0; scale: 1.7; rotate: 6deg; } 50% { opacity: 1; } }
  .pc.is-now::before { content: ""; position: absolute; inset: -4px; border-radius: 14px; pointer-events: none; box-shadow: 0 0 34px 6px rgba(224, 88, 124, .45); animation: pc-glow 3.6s ease-in-out infinite; }
  @keyframes pc-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .pcs .st { animation: tw 3.4s ease-in-out infinite; }
  .pcs .st:nth-child(2n) { animation-duration: 4.2s; animation-delay: -1.2s; } .pcs .st:nth-child(3n) { animation-duration: 2.8s; animation-delay: -2s; } .pcs .st:nth-child(5n) { animation-delay: -.6s; }
  @keyframes tw { 0%, 100% { opacity: .95; } 50% { opacity: .2; } }

  /* 3. how */
  .rib { transition: translate .35s var(--spring), filter .25s; }
  .ribbons.in .rib { animation: rib-drop .9s var(--spring) calc(var(--n) * 120ms + 100ms) backwards; }
  .rib--garnet { --n: 0; } .rib--gold { --n: 1; } .rib--night { --n: 2; }
  @keyframes rib-drop { from { opacity: 0; translate: 0 -40px; } 50% { opacity: 1; } }
  .js-ready .pgroup__ul path { stroke-dasharray: 1; transition: stroke-dashoffset 1.1s var(--ease) .45s; }
  .js-ready .pgroup:not(.in) .pgroup__ul path { stroke-dashoffset: 1; }

  /* a) index card */
  .js-ready .o-card:not(.in) .bub, .js-ready .o-card:not(.in) .idx__stamp { opacity: 0; }
  .js-ready .o-card:not(.in) .idx__lines li { clip-path: inset(0 100% 0 0); }
  .o-card.in .bub { animation: bub-pop .6s var(--spring) .1s backwards; transform-origin: 100% 100%; }
  .o-card.in .idx__lines li { animation: write .8s var(--ease) calc(.9s + var(--w) * .5s) backwards; }
  .idx__lines li:nth-child(1) { --w: 0; } .idx__lines li:nth-child(2) { --w: 1; } .idx__lines li:nth-child(3) { --w: 2; }
  .o-card.in .idx__stamp { animation: stamp-in .55s var(--spring) 2.6s backwards; }
  @keyframes bub-pop { from { opacity: 0; scale: .6; } 60% { opacity: 1; } }
  @keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes stamp-in { from { opacity: 0; scale: 1.8; rotate: -16deg; } 55% { opacity: 1; } }

  /* b) envelope: the reel slides in, the flap closes, the tag swings */
  .js-ready .o-env:not(.in) .env__reel { translate: 0 -112%; }
  .o-env.in .env__reel { animation: reel-in 1.1s var(--ease) .45s backwards; }
  .o-env.in .env__tag { animation: tag-drop 1.4s var(--spring) 1.6s backwards, tag-swing 5s ease-in-out 3s infinite; }
  @keyframes reel-in { from { translate: 0 -112%; } }
  @keyframes tag-drop { from { opacity: 0; rotate: -34deg; } 25% { opacity: 1; } }
  @keyframes tag-swing { 0%, 100% { rotate: 6deg; } 50% { rotate: -5deg; } }
  .o-env.in .talk .bub { animation: bub-pop .5s var(--spring) backwards; }
  .o-env.in .talk .bub:nth-child(1) { animation-delay: .2s; } .o-env.in .talk .bub:nth-child(2) { animation-delay: 1s; } .o-env.in .talk .bub:nth-child(3) { animation-delay: 1.3s; } .o-env.in .talk .bub:nth-child(4) { animation-delay: 2s; }
  .js-ready .o-env:not(.in) .talk .bub { opacity: 0; }

  /* c) deck fans out; the pop and the skip */
  .js-ready .o-deck:not(.in) .dk[data-pos="1"], .js-ready .o-deck:not(.in) .dk[data-pos="2"] { translate: 0 0; rotate: 0deg; }
  .act.is-pop { animation: hp-pop-sm .5s var(--spring); }
  @keyframes hp-pop-sm { 0% { transform: scale(.88); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }

  /* d) note slips */
  .js-ready .o-slips:not(.in) .nslips li { opacity: 0; }
  .o-slips.in .nslips li { animation: slip-in .75s var(--spring) calc(var(--n) * 150ms + 150ms) backwards; }
  .nslips li:nth-child(1) { --n: 0; } .nslips li:nth-child(2) { --n: 1; } .nslips li:nth-child(3) { --n: 2; }
  @keyframes slip-in { from { opacity: 0; translate: 0 24px; rotate: 4deg; } 40% { opacity: 1; } }

  /* e) ticket: pins drop, the dotted route draws */
  .js-ready .o-ticket:not(.in) .pin, .js-ready .o-ticket:not(.in) .route__path { opacity: 0; }
  .o-ticket.in .pin { animation: pin-drop .7s var(--spring) .45s backwards; }
  .o-ticket.in li + li .pin { animation-delay: 1.5s; }
  .o-ticket.in .route__path { animation: route-draw .8s ease-in-out .85s backwards; }
  @keyframes pin-drop { from { opacity: 0; translate: 0 -26px; scale: .7; } 40% { opacity: 1; } }
  @keyframes route-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

  /* f) the record */
  .js-ready .o-sleeve:not(.in) .rec { translate: -30px 0; }
  .o-sleeve.is-playing .rec { animation: rec-spin 2.4s linear infinite; }
  .o-sleeve.is-playing .eq i { animation: eq 1.3s ease-in-out infinite; }
  .o-sleeve.is-playing .eq i:nth-child(2n) { animation-duration: 1.6s; animation-delay: -.4s; }
  .o-sleeve.is-playing .eq i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -.8s; }
  @keyframes rec-spin { to { rotate: 360deg; } }
  @keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

  /* handoff: a paper plane carries it across the fold */
  .handoff.in .ho__plane { animation: ho-fly 3.2s ease-in-out infinite; }
  @keyframes ho-fly { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 78% { opacity: 1; } 100% { translate: var(--fx) var(--fy); opacity: 0; } }
  .js-ready .handoff:not(.in) .ho__half { opacity: 0; translate: 0 16px; }
  .handoff.in .ho__half { animation: slip-in .8s var(--ease) backwards; }
  .handoff.in .ho__half--you { animation-delay: .3s; }

  /* luggage tags sway on their string */
  .forall li { --b: 0deg; }
  .forall li:nth-child(1) { --b: -2deg; } .forall li:nth-child(2) { --b: 1.5deg; } .forall li:nth-child(3) { --b: -1deg; }
  .forall.in li { animation: sway 4.6s ease-in-out infinite; }
  .forall.in li:nth-child(2) { animation-delay: -1.5s; } .forall.in li:nth-child(3) { animation-delay: -3s; }
  @keyframes sway { 0%, 100% { rotate: calc(var(--b) - 2.6deg); } 50% { rotate: calc(var(--b) + 2.6deg); } }

  /* 4. tickets */
  .js .tk.rise { transform: translateY(54px); }
  .js .tk.rise.in { transform: none; }
  .tk--plus .tk__in::before { background-repeat: repeat-x; animation: foil 7s linear infinite; }
  @keyframes foil { to { background-position: -220% 0; } }

  /* 5. sealed */
  .js-ready .sealed:not(.in) .se__flap { scale: 1 -.75; }
  .js-ready .sealed:not(.in) .seal { opacity: 0; }
  .sealed.in .se__flap { animation: flap-shut 1s var(--ease) .35s backwards; }
  .sealed.in .seal { animation: seal-stamp .8s cubic-bezier(.3, 1.4, .5, 1) 1.45s backwards; transform-origin: 50% 50%; }
  @keyframes flap-shut { from { scale: 1 -.75; } }
  @keyframes seal-stamp { from { opacity: 0; scale: 1.5; } 45% { opacity: 1; scale: .9 1.07; } 70% { scale: 1.06 .95; } }
  .privacy__box.in .pst { animation: hp-pop .7s var(--spring) backwards; }
  .privacy__box.in .pst--a { animation-delay: .5s; } .privacy__box.in .pst--b { animation-delay: .65s; } .privacy__box.in .pst--c { animation-delay: .8s; }
  @keyframes hp-pop { 0% { opacity: 0; translate: 0 20px; scale: .82; } 60% { opacity: 1; translate: 0 -4px; scale: 1.03; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

  /* 6. closer: two lights find each other */
  .closer.in .cl__x { opacity: 0; animation: cl-x 11s ease-in-out infinite; }
  .closer.in .cl__x--b { animation-name: cl-xb; }
  .closer.in .cl__x--a .cl__y { animation: cl-ya 11s ease-in-out infinite; }
  .closer.in .cl__x--b .cl__y { animation: cl-yb 11s ease-in-out infinite; }
  .closer.in .cl__bloom { animation: cl-bloom 11s ease-in-out infinite; }
  .closer.in .cl__dust--a { animation: tw-d 5s ease-in-out infinite; } .closer.in .cl__dust--b { animation: tw-d 6.5s ease-in-out -2.5s infinite; }
  @keyframes cl-x { 0% { translate: -43cqw 0; opacity: 0; } 8% { opacity: 1; } 68% { translate: -8px 0; opacity: 1; } 84% { translate: -8px 0; opacity: 1; } 94% { translate: -8px 0; opacity: 0; } 100% { translate: -43cqw 0; opacity: 0; } }
  @keyframes cl-xb { 0% { translate: 43cqw 0; opacity: 0; } 8% { opacity: 1; } 68% { translate: 8px 0; opacity: 1; } 84% { translate: 8px 0; opacity: 1; } 94% { translate: 8px 0; opacity: 0; } 100% { translate: 43cqw 0; opacity: 0; } }
  @keyframes cl-ya { 0% { translate: 0 38px; } 34% { translate: 0 -22px; } 68%, 100% { translate: 0 0; } }
  @keyframes cl-yb { 0% { translate: 0 -38px; } 34% { translate: 0 22px; } 68%, 100% { translate: 0 0; } }
  @keyframes cl-bloom { 0%, 60% { opacity: 0; scale: .3; } 70% { opacity: .95; scale: .9; } 84% { opacity: .7; scale: 1.1; } 95%, 100% { opacity: 0; scale: 1.3; } }
  @keyframes tw-d { 0%, 100% { opacity: .85; } 50% { opacity: .35; } }
}

/* Failsafe: if site.js never finishes, nothing gated may stay hidden */
.js:not(.js-ready) .pcs .pc, .js:not(.js-ready) .handoff .ho__half { opacity: 1; }
.hj .helps__track:not(.is-seen) .help { animation: failsafe .01s 4s both; }

/* Reduced motion keeps the hero's finished state */
@media (prefers-reduced-motion: reduce) {
  .js :is(.ao__ring, .ao__spin, .ao__chip, .dots i, .eq i) { animation: none !important; }
  .js .moment__item.is-active { opacity: 1 !important; transform: none !important; }
  .moment__think { display: none; }
  .helps__swipe { display: none; }
  :is(.soon, .act, .moment__btn):active { scale: none; }
  .moment__btn:hover { scale: none; }
  .rec, .dk, .tk, .pc, .rib, .nslips li { transition: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home .nslips li:nth-child(1) .quote { background: #3c2a36; }
}