:root {
  --paper: #E5DDCF;
  --paper-2: #E5DDCF;
  --ink: #1D1B18;
  --ink-soft: #6B645A;
  --ink-dim: rgba(29, 27, 24, .22);
  --tray: #FBFAF7;
  --story: #F6D8D6;
  --tomato: #E2492F;
  --accent: #E0479A;  /* the logo's pink T */
  --vh: 100vh;
  --bw: 320px;
  --shadow: 8px 12px 28px rgba(60, 40, 20, .16);
  --f-head: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-type: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: light;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- type ---------- */
.h {
  font-family: var(--f-head);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.025em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: clamp(32px, 9.2vw, 104px); white-space: nowrap; }
h2.h { font-size: clamp(30px, 8vw, 68px); }
.js .h1 .w { color: var(--ink-dim); }
.js .h1 .w.on { color: var(--ink); }
.h1 .w { display: inline-block; transition: color .18s ease-out, transform .18s ease-out; }
.js .h1 .w:not(.on) { transform: translateY(4px); }

.sub, .sub p:not(.fine) { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.4; }
.sub, .sub p { text-wrap: balance; }
.fine { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; }

/* ---------- pill CTA ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none;
  font: 500 16px/1 var(--f-body); letter-spacing: .005em;
  touch-action: manipulation;
  transition: background-color .15s;
}
.pill:hover { background: #000; }
.pill:active { transform: scale(.97); }

/* ---------- brand: app icon + name ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 800 17px/1 var(--f-head); font-variation-settings: "opsz" 32; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; border-radius: 22%; box-shadow: 0 1px 2px rgba(60, 40, 20, .16), 0 3px 8px rgba(60, 40, 20, .1); }
.brand-hero.pre { animation: brandin .5s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes brandin { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Box Stage ---------- */
.stage-track { position: relative; height: calc(var(--vh) * 6 + max(var(--vh), 100vh)); }
.stage {
  position: sticky; top: 0;
  height: max(var(--vh), 100vh);
  overflow: clip;
  display: grid;
  grid-template-rows: calc(var(--vh) * .22) calc(var(--vh) * .54) calc(var(--vh) * .24) 1fr;
  grid-template-columns: 100%;
  background: var(--paper) url(assets/img/bg_paper.webp) center / cover no-repeat;
}
.band { position: relative; z-index: 3; padding: 0 16px; }
.band-top {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: 14px;
}
.band-top .brand { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; }
.heads { display: grid; }
.heads > .h { grid-area: 1 / 1; align-self: end; will-change: opacity, transform; }
.js .stage .heads > .h:not([data-rest="0"]) { opacity: 0; }
.band-bottom { padding-top: 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.subs { display: grid; justify-items: center; text-align: center; }
.subs > .sub { grid-area: 1 / 1; align-self: start; max-width: 30ch; }
.js .stage .subs > .sub:not([data-rest="0"]) { opacity: 0; }
.hero-sub p:first-child { margin-bottom: 16px; }
.stage .band-top { text-align: center; align-items: center; }
.stage .band-top .heads { justify-items: center; }

.slot { position: relative; display: grid; place-items: center; z-index: 2; }
.rig { position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-origin: 50% calc(50% + var(--pdy, 0px)); }
.rig > .clipper { z-index: 1; }

/* the phone (nodes 4–5): a code-built Today Box screen around the box */
.pframe {
  position: absolute; left: 50%; top: 50%; width: var(--pw, 260px); height: var(--ph, 560px);
  transform: translate(-50%, -50%) translateY(var(--pdy, 0px));
  border-radius: calc(var(--pw, 260px) * .15); padding: var(--pin, 7px); background: #1D1B18;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; z-index: 0;
  container-type: inline-size;
}
.p-screen { position: relative; height: 100%; border-radius: calc(var(--pw, 260px) * .125); background: #F7F4EE; overflow: hidden; }
.p-head {
  position: absolute; left: 0; right: 0; top: 0; height: var(--phh, 120px);
  display: flex; align-items: flex-end; padding: 0 7% 5.5%;
  font: 700 6.6cqw/1 var(--f-body); letter-spacing: -.01em; color: var(--ink);
}
.p-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--phb, 140px);
  display: flex; align-items: flex-start; gap: 3.5%; padding: 6% 7% 0;
}
.p-bar i { width: 11cqw; height: 11cqw; border-radius: 50%; background: #EAE4DA; flex: none; }
.p-bar b { margin-left: auto; height: 11cqw; padding: 0 6.5cqw; border-radius: 999px; background: var(--ink); color: #fff; font: 600 4.6cqw/11cqw var(--f-body); }
.mark { position: absolute; top: 36%; width: 9%; height: 16%; border: 0 solid var(--ink-soft); opacity: 0; }
.mark::after { content: ""; position: absolute; top: 18%; bottom: 18%; width: 70%; border: 0 solid var(--ink-soft); border-radius: inherit; }
.ml { right: calc(100% + 3%); border-left-width: 3px; border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.ml::after { right: calc(100% + 30%); border-left-width: 3px; }
.mr { left: calc(100% + 3%); border-right-width: 3px; border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
.mr::after { left: calc(100% + 30%); border-right-width: 3px; }
.stage .box:not(.built) { background: url(assets/img/ct_whitebox.webp) center / cover; border-radius: 14px; box-shadow: var(--shadow); }
.clipper { position: relative; width: var(--bw); aspect-ratio: 3 / 4; border-radius: 14px; }
.clipper.clip { overflow: hidden; }
.box {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  container-type: inline-size;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.box.can-shake { cursor: pointer; }
.shake { position: absolute; inset: 0; transform-origin: 50% 60%; }
.layer { position: absolute; inset: 0; transform-origin: 50% 50%; }
.layer.ct-layer { z-index: 1; }
.layer.it-layer { z-index: 2; }
.layer.deco-layer { z-index: 3; }
.box .layer, .box .bx { pointer-events: none; }
.box { -webkit-touch-callout: none; }
.bx { position: absolute; inset: 0; display: none; }
.bx.on { display: block; }

.ct {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 1px rgba(60, 40, 20, .08), var(--shadow);
  background: #ddd5c8;
}
.ct img, .ct video { width: 100%; height: 100%; object-fit: cover; }
.ct.white { background: #EDE8DF; }
.magic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.magic.on { opacity: 1; }
.mote { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.mote img { width: 100%; height: auto; }
.sweep-wrap { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; pointer-events: none; z-index: 2; }
.sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%); opacity: 0;
}

.it { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; pointer-events: none; }
.it > img { width: 100%; height: auto; }
.it.live video { position: absolute; object-fit: cover; background: #cfc6b8; }
.it.live > img.frame { position: relative; z-index: 1; }
.it.rounded { padding: 3.2%; background: var(--tray); border-radius: 6px; box-shadow: 0 1px 1px rgba(60,40,20,.1), 4px 7px 16px rgba(60,40,20,.18); }
.it.rounded video { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 3px; display: block; }
.it.label .txt, .it.note .txt {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--f-type); color: #2a2622; white-space: nowrap;
}
.it.label .txt { top: 50%; transform: translateY(-52%); font-size: 4.3cqw; letter-spacing: .02em; }
.it.note .txt { top: 39%; left: 12%; right: 10%; text-align: left; font-size: 3.7cqw; white-space: normal; line-height: 1.35; min-height: 2.8em; }
.it.note .txt::after { content: ""; display: inline-block; width: .5ch; height: 1.05em; vertical-align: -0.18em; background: #2a2622; opacity: 0; margin-left: 1px; }
.it.note.typing .txt::after { opacity: .75; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.it.cassette .hub { position: absolute; transform-origin: 50% 50%; }
.it.cassette.playing .hub { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
.it.cassette .count {
  position: absolute; left: 17%; top: 22.5%; font-family: var(--f-type); font-size: 3.1cqw; color: #3a332c; letter-spacing: .04em;
}
.sq {
  position: absolute; left: 0; top: 0; aspect-ratio: 1;
  border: 3px solid #fff; border-radius: 5px; background: #ddd center / cover no-repeat;
  box-shadow: 2px 4px 10px rgba(60,40,20,.22);
  pointer-events: none;
}
.sq::after {
  content: ""; position: absolute; right: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%231D1B18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transform: scale(var(--chk, 1));
}

/* where you are in the story: one dot per node, plus a chevron that nudges when idle */
.stage.can-tap { cursor: pointer; }
.pager {
  position: absolute; right: 9px; top: calc(var(--vh) * .49); transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.pager i { display: block; width: 5px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .2; }
.pager i.pulse { animation: dotpulse 1.1s ease-out; }
@keyframes dotpulse { 0% { box-shadow: 0 0 0 0 rgba(29, 27, 24, .35); } 100% { box-shadow: 0 0 0 9px rgba(29, 27, 24, 0); } }
.pager b { display: block; width: 8px; height: 8px; margin-top: 5px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); opacity: 0; transform: rotate(45deg); }
.pager.hint b { animation: chev 1.4s ease-in-out; }
@keyframes chev { 0%, 100% { opacity: 0; transform: translateY(-3px) rotate(45deg); } 45% { opacity: .55; transform: translateY(4px) rotate(45deg); } }

/* replay: appears in the Story card's bottom margin once the intro has played */
.replay {
  position: absolute; left: 50%; top: calc(50% + var(--bw) * 4 / 3 * .44); z-index: 3;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .8); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(60, 40, 20, .14); cursor: pointer; touch-action: manipulation;
  opacity: 0; pointer-events: none; transform: scale(.8) rotate(-40deg);
  transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1);
}
.replay.on { opacity: 1; pointer-events: auto; transform: none; }
.replay.on:active { transform: scale(.92); }
.replay svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* Story card */
.story {
  position: absolute; left: 50%; top: 50%;
  height: calc(var(--bw) * 4 / 3 * 1.04); aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%) scale(.94);
  border-radius: 18px; background: var(--story);
  box-shadow: var(--shadow);
  opacity: 0; z-index: 0;
}
.story-bars { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 4px; }
.story-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.55); overflow: hidden; position: relative; }
.story-bars b { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.story.posted .story-bars b { transform: scaleX(1); transition: transform 5s linear; }
.story-av {
  position: absolute; left: 10px; top: 22px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff url(assets/img/sq_latte.webp) center / cover; border: 2px solid #fff;
}

/* ---------- top bar (desktop) + floating pill (mobile) ---------- */
.topbar { display: none; }
.pill-float {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20;
  height: 46px; padding: 0 24px;
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform .32s cubic-bezier(.2, .9, .3, 1), opacity .2s;
  box-shadow: 0 6px 18px rgba(29, 27, 24, .18);
}
.pill-float.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Friends ---------- */
.friends {
  position: relative; height: max(var(--vh), 100vh); overflow: clip;
  display: grid; grid-template-rows: calc(var(--vh) * .20) calc(var(--vh) * .62) calc(var(--vh) * .18) 1fr; grid-template-columns: 100%;
  background: var(--paper-2) url(assets/img/bg_paper.webp) center / cover no-repeat;
}
.friends .band-top { text-align: center; align-items: center; }
.friends .heads { justify-items: center; }
.fslot { position: relative; z-index: 2; display: grid; place-items: center; }
.fbox-wrap { position: relative; width: var(--fbw, 250px); }
.fbox { cursor: pointer; }
.av {
  position: absolute; z-index: 6; width: 54px; height: 54px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #d8cfc2 center / cover no-repeat;
  border: 3px solid #fff; box-shadow: 2px 5px 14px rgba(60, 40, 20, .24);
}
.av1 { left: -5%; top: 15%; background-image: url(assets/img/av_maya.webp); }
.av2 { left: 105%; top: 47%; background-image: url(assets/img/av_jay.webp); }
.av3 { left: -3%; top: 82%; background-image: url(assets/img/av_lu.webp); }

/* ---------- CTA ---------- */
.cta {
  position: relative; background: var(--paper-2) url(assets/img/bg_paper.webp) center / cover no-repeat;
  min-height: var(--vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 72px 16px 48px;
  overflow-x: clip;
}
.cta .h { margin-bottom: 100px; }
.tray-wrap { position: relative; width: min(76vw, calc(var(--vh) * .5 * .75)); margin-bottom: 36px; }
.tray { cursor: pointer; }
.logo-drop {
  position: absolute; left: 50%; top: 0; width: 52%; z-index: 4; pointer-events: none;
  transform: translate(-50%, -58%) rotate(-4deg);
}
.logo-drop img { width: 100%; height: auto; opacity: 0; transform-origin: 50% 100%; }
.logo-drop.on img { animation: logodrop .75s cubic-bezier(.3, 1.2, .45, 1) both; }
@keyframes logodrop {
  0% { opacity: 0; transform: translateY(-70%) rotate(8deg); }
  45% { opacity: 1; transform: translateY(4%) rotate(-1deg) scale(1.04, .93); }
  70% { transform: translateY(-3%) scale(.98, 1.03); }
  100% { opacity: 1; transform: none; }
}

.foot {
  background: var(--paper-2); color: var(--ink-soft); text-align: center;
  font-size: 13px; padding: 0 16px calc(28px + env(safe-area-inset-bottom));
  display: flow-root;
}
.foot p { margin: 4px 0; }
.foot-links a { margin-left: .6em; text-decoration: none; }
.foot-links a::before { content: "· "; }
.foot-links a:hover { color: var(--ink); }

/* ---------- email sign-up ---------- */
.join {
  display: flex; align-items: center; gap: 6px; width: min(100%, 380px);
  padding: 5px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 1px rgba(60, 40, 20, .06), 0 6px 18px rgba(60, 40, 20, .1);
}
.join input[type=email] {
  flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 16px; border: 0; outline: 0; background: transparent;
  font: 400 16px/1 var(--f-body); color: var(--ink);
}
.join input[type=email]::placeholder { color: #a39b90; }
.join:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 6px 18px rgba(60, 40, 20, .1); }
.join .pill { height: 44px; padding: 0 20px; flex: none; }
.join.sending .pill { opacity: .55; pointer-events: none; }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-msg { min-height: 1.3em; margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.join-msg.err { color: var(--tomato); }
.join.done { display: none; }
.join-done { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 17px/1.3 var(--f-body); color: var(--ink); }
.join-done::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cta .join { margin: 0 auto; }

.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(29, 27, 24, .34); opacity: 0; transition: opacity .2s; }
.sheet-card {
  position: absolute; left: 50%; top: max(9vh, calc(env(safe-area-inset-top) + 16px));
  width: min(calc(100vw - 24px), 420px); padding: 26px 18px 18px;
  background: var(--tray); border-radius: 22px; box-shadow: 0 18px 48px rgba(29, 27, 24, .22);
  text-align: center; opacity: 0; transform: translate(-50%, -10px) scale(.98);
  transition: opacity .2s, transform .22s cubic-bezier(.2, .9, .3, 1);
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-card { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sheet-icon { display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 22%; box-shadow: 0 2px 4px rgba(60, 40, 20, .14), 0 8px 18px rgba(60, 40, 20, .12); }
h2.h.sheet-title { font-size: 32px; margin: 0 0 8px; }
.sheet-sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 16px; }
.sheet .join { width: 100%; box-shadow: inset 0 0 0 1px #E6E0D6; }
.sheet .join:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.sheet-fine { margin: 10px 0 0; font-size: 12.5px; color: #9b9388; }
.sheet-x {
  position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.sheet-x::before, .sheet-x::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; border-radius: 1px; background: var(--ink-soft); transform: rotate(45deg); }
.sheet-x::after { transform: rotate(-45deg); }
.pill.joined { background: var(--tray); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- small phones ---------- */
@media (max-height: 700px) {
  .stage { grid-template-rows: calc(var(--vh) * .21) calc(var(--vh) * .55) calc(var(--vh) * .24) 1fr; }
  .pill { height: 46px; }
  .sub, .sub p:not(.fine) { font-size: 15px; }
  .hero-sub p:first-child { margin-bottom: 10px; }
  .fine { margin-top: 6px; font-size: 13px; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; left: 0; right: 0; top: 0; z-index: 20; height: 64px; padding: 0 max(32px, calc((100vw - 1180px) / 2));
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .25s, transform .25s;
  }
  .topbar.on { opacity: 1; transform: none; pointer-events: auto; }
  .brand-bar img { width: 28px; height: 28px; }
  .pill-bar { height: 40px; padding: 0 20px; font-size: 15px; }
  .pill-float { display: none; }

  .stage {
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    column-gap: 0;
    padding: 0 max(32px, calc((100vw - 1180px) / 2));
  }
  .stage .band-top { grid-row: 2; grid-column: 1; text-align: left; align-items: flex-start; padding: 0 0 22px; }
  .stage .band-top .heads { justify-items: start; }
  .stage .band-top { position: static; }
  .stage .band-top .brand { position: absolute; top: 18px; left: max(32px, calc((100vw - 1180px) / 2)); transition: opacity .25s; }
  .past-hero .stage .band-top .brand { opacity: 0; }
  .stage .band-bottom { grid-row: 3; grid-column: 1; padding: 0; }
  .stage .subs { justify-items: start; text-align: left; }
  .stage .slot { grid-row: 1 / -1; grid-column: 2; justify-self: start; width: calc(var(--bw) + 96px); }
  .pager { right: max(24px, calc((100vw - 1180px) / 2 - 28px)); top: 50%; gap: 8px; }
  .h1 { font-size: clamp(64px, 7.4vw, 104px); white-space: normal; }
  .h1 .w { display: block; }
  h2.h { font-size: clamp(44px, 4.6vw, 68px); }
  .sub, .sub p:not(.fine) { font-size: 19px; }
  .subs > .sub { max-width: 26ch; }

  .friends { grid-template-rows: calc(var(--vh) * .22) calc(var(--vh) * .64) calc(var(--vh) * .14) 1fr; }
  .av { width: 68px; height: 68px; }

  .cta .h { font-size: clamp(48px, 5vw, 72px); margin-bottom: 118px; }
  .tray-wrap { width: calc(var(--vh) * .5 * .75); }
}

/* ---------- landscape phones ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .h1 { font-size: calc(var(--vh) * .095); }
  h2.h { font-size: calc(var(--vh) * .085); }
  .hero-sub p:first-child, .hero-sub .fine { display: none; }
  .pill { height: 40px; }
  .pill-float { left: auto; right: 16px; bottom: auto; top: calc(12px + env(safe-area-inset-top)); transform: translateY(-160%); }
  .pill-float.on { transform: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .h1 .w, .pill-float, .topbar, .sheet-card, .sheet-backdrop { transition: none !important; }
  .logo-drop.on img, .brand-hero.pre { animation: none !important; opacity: 1; }
  .it.cassette.playing .hub, .it.note.typing .txt::after { animation: none !important; }
}

.signup-notice { max-width: 440px; margin: 10px auto 0; font: 12px/1.45 var(--f-body); color: var(--ink-soft); }
.join button:disabled { cursor: wait; }