/* ═══════════════════════════════════════════════════════════════════════════
   Two of Us — the marketing page.

   Tokens are the app's (app/Sources/Support/Theme.swift). No web font:
   ui-serif is New York on Apple devices, the app's own display face.

   Everything inside a phone is sized in container units (cqw) against a
   402pt-wide screen, so a drawn Lock Screen or game keeps its exact
   proportions at any phone size, and nothing inside can reflow the page.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0B080D;
  --bg-top: #171119;
  --text: #FBF6F7;
  --dim: #BCAFBA;
  --faint: #7A6E7C;
  --one: #FF7E95;
  --two: #7FA8FF;
  --surface: rgba(255,255,255,.055);
  --surface-up: rgba(255,255,255,.095);
  --hair: rgba(255,255,255,.105);
  --cta: linear-gradient(135deg, #FFC6A6, #FF8FA3);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --gut: clamp(16px, 4vw, 32px);
  --nav: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: hidden would break every sticky stage below. */
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--two); outline-offset: 3px; border-radius: 8px; }

.shell { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gut); }

.eyebrow { display: inline-block; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.h2 { font: 600 clamp(34px, 5vw, 56px)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.lede { color: var(--dim); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; text-wrap: pretty; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--one { background: var(--one); }
.dot--two { background: var(--two); }
.dot--both { background: linear-gradient(90deg, var(--one) 50%, var(--two) 50%); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--cta); color: #2A1219; text-decoration: none;
  font: 600 16px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 10px 30px -10px rgba(255,143,163,.55), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(255,143,163,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.btn:active { transform: scale(.97); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn__apple { width: 19px; height: 19px; margin-top: -3px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav);
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.is-stuck {
  background: rgba(11,8,13,.72);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 1px 0 var(--hair);
}
.nav__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { width: 30px; height: 28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.logo__word { font: 600 19px/1 var(--serif); letter-spacing: -.01em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { color: var(--dim); text-decoration: none; font-size: 15px; transition: color .2s; }
.nav__links a:hover, .nav__links a.is-here { color: var(--text); }
@media (max-width: 640px) { .nav__links { display: none; } .nav .btn { margin-left: auto; } }

/* ── The phone: a titanium band, a black bezel, a screen ─────────────── */
/* Outer proportions chosen so the screen inside is exactly 1320×2868. */
.phone {
  /* Sized by whatever holds it, through --phone-w. */
  --pw: var(--phone-w, 280px);
  position: relative; flex: none;
  width: var(--pw); aspect-ratio: 1 / 2.1118;
  border-radius: calc(var(--pw) * .152);
  background: #0a0a0c;
  box-shadow:
    0 0 0 calc(var(--pw) * .006) #3a3540,
    0 0 0 calc(var(--pw) * .009) #6d6672,
    0 0 0 calc(var(--pw) * .011) #2a262d,
    0 calc(var(--pw) * .16) calc(var(--pw) * .3) calc(var(--pw) * -.08) rgba(0,0,0,.85),
    0 calc(var(--pw) * .05) calc(var(--pw) * .1) calc(var(--pw) * -.04) rgba(0,0,0,.6);
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: calc(var(--pw) * .012);
  background: linear-gradient(90deg, #4d4752, #7c7480, #3a3540); border-radius: 3px;
}
.phone::before { left: calc(var(--pw) * -.019); top: 22%; height: 7%; }
.phone::after  { right: calc(var(--pw) * -.019); top: 26%; height: 10%; }
.phone__screen {
  position: absolute; inset: calc(var(--pw) * .026);
  border-radius: calc(var(--pw) * .128);
  clip-path: inset(0 round calc(var(--pw) * .128));
  background: #000; overflow: hidden;
  container-type: size;
}
.phone__screen > img { width: 100%; height: 100%; object-fit: cover; }

/* A drawn status bar, for the screens that aren't captures. */
.status {
  position: absolute; inset: 0 0 auto; height: 12cqw; z-index: 6; pointer-events: none;
  color: #fff; font: 600 4.2cqw/1 var(--sans); letter-spacing: -.01em;
}
.status b { position: absolute; left: 13.5cqw; top: 4.2cqw; font-weight: 600; }
.island { position: absolute; left: 35.9cqw; top: 2.7cqw; width: 28.2cqw; height: 7.8cqw; border-radius: 99px; background: #000; }
.status__r { position: absolute; right: 9cqw; top: 4.4cqw; display: flex; gap: 1.6cqw; align-items: center; }
.sig { width: 4.6cqw; height: 3cqw; background: linear-gradient(90deg, #fff 0 18%, transparent 18% 27%, #fff 27% 45%, transparent 45% 54%, #fff 54% 72%, transparent 72% 81%, #fff 81%); clip-path: polygon(0 75%, 18% 75%, 18% 55%, 27% 55%, 27% 55%, 45% 55%, 45% 30%, 54% 30%, 72% 30%, 72% 0, 81% 0, 100% 0, 100% 100%, 0 100%); }
.bat { width: 6.4cqw; height: 3cqw; border-radius: 1cqw; border: .3cqw solid rgba(255,255,255,.55); position: relative; }
.bat::after { content: ""; position: absolute; inset: .35cqw; right: 1.2cqw; border-radius: .5cqw; background: #fff; }

/* ═════════════════════════════ HERO ═════════════════════════════════ */
.hero { position: relative; padding: calc(var(--nav) + clamp(28px, 7vh, 72px)) 0 clamp(48px, 8vh, 96px); text-align: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 25% 30%, rgba(255,122,147,.18), transparent 70%),
    radial-gradient(55% 50% at 78% 55%, rgba(143,123,255,.16), transparent 70%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 85%);
}
.hero__h1 { font: 600 clamp(42px, 7.4vw, 86px)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.hero__h1 em, .h2 em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, #FFC6A6, #FF8FA3 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
.hero__lede { max-width: 34em; margin: 20px auto 0; color: var(--dim); font-size: clamp(16px, 1.8vw, 20px); text-wrap: balance; }
.hero__cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__fine { font-size: 14px; color: var(--faint); }

.trio {
  --base: clamp(118px, min(23vw, 31vh), 262px);
  --phone-w: var(--base);
  margin-top: clamp(36px, 6vh, 64px);
  display: flex; justify-content: center; align-items: flex-start;
}
.trio__item { display: flex; flex-direction: column; align-items: center; gap: 20px; text-decoration: none; position: relative; }
.trio__item .phone { transition: transform .5s var(--ease); }
.trio__item--l { z-index: 1; margin-right: calc(var(--base) * -.16); margin-top: calc(var(--base) * .16); }
.trio__item--r { z-index: 1; margin-left:  calc(var(--base) * -.16); margin-top: calc(var(--base) * .16); }
.trio__item--c { z-index: 2; }
.trio__item--c { --phone-w: calc(var(--base) * 1.08); }
.trio__item--l .phone { transform: rotate(-7deg); }
.trio__item--r .phone { transform: rotate(7deg); }
.trio__item:hover .phone { transform: translateY(-8px); }
.trio__item--l:hover .phone { transform: rotate(-7deg) translateY(-8px); }
.trio__item--r:hover .phone { transform: rotate(7deg) translateY(-8px); }
.trio__label {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 14px; font-weight: 500; color: var(--dim); transition: color .2s, background .2s;
}
.trio__item:hover .trio__label { color: var(--text); background: var(--surface-up); }
@media (max-width: 640px) {
  .trio { --base: min(33vw, 27vh); }
  .trio__item { gap: 14px; }
  .trio__label { height: 30px; padding: 0 11px; font-size: 13px; }
}

/* Load-in: CSS only, so there is nothing for script to flash. */
[data-rise] { animation: rise .9s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Reveal on scroll, only when script is there to undo it. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ═══════════════════ SCROLL STAGES (map, widgets) ═══════════════════ */
/* The section is tall; the stage inside pins for its whole length and the
   scroll position picks the chapter. Each chapter gets 80% of a screen. */
.scrolly { position: relative; height: calc(100vh + var(--steps) * 80vh); height: calc(100svh + var(--steps) * 80svh); }
.scrolly__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; padding-top: var(--nav);
  overflow-x: clip;
}
.scrolly__grid { display: grid; grid-template-columns: minmax(0, 460px) auto; justify-content: center; align-items: center; gap: clamp(40px, 8vw, 120px); }
.scrolly__copy { max-width: 440px; }
.scrolly__phone { --phone-w: min(calc((100svh - var(--nav) - 72px) / 2.1118), 340px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scrolly__foot { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 32em; }

.caps { position: relative; height: 15.5em; margin-top: 18px; }
.cap {
  position: absolute; inset: 0 0 auto;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .22s ease-in, transform .22s ease-in;
}
.cap.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .5s var(--ease) .16s, transform .5s var(--ease) .16s; }
.cap h2 { font: 600 clamp(32px, 4.4vw, 52px)/1.04 var(--serif); letter-spacing: -.02em; }
.cap p { margin-top: 18px; color: var(--dim); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.55; max-width: 26em; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.steps button {
  position: relative; height: 34px; padding: 0 14px; border-radius: 99px;
  font-size: 13.5px; font-weight: 500; color: var(--faint);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair);
  transition: color .25s, background .25s, box-shadow .25s;
}
.steps button:hover { color: var(--text); }
.steps button.is-on { color: #2A1219; background: var(--cta); box-shadow: none; }

@media (max-width: 900px) {
  /* Phone on top, words beneath — the way the app's own onboarding lays it out. */
  .scrolly__stage { align-items: flex-start; padding-top: calc(var(--nav) + 4px); }
  .scrolly__grid { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .scrolly__copy { order: 2; max-width: 30em; display: flex; flex-direction: column; align-items: center; }
  .scrolly__phone { order: 1; --phone-w: min(calc((100svh - var(--nav) - 262px) / 2.1118), 74vw); gap: 8px; }
  .scrolly__copy .eyebrow { display: none; }
  .caps { height: 150px; margin-top: 0; width: 100%; }
  .cap h2 { font-size: 25px; }
  .cap h2 br { display: none; }
  .cap p { margin: 8px auto 0; font-size: 14.5px; line-height: 1.45; max-width: 25em; }
  .steps button { height: 30px; padding: 0 11px; font-size: 12.5px; }
  .scrolly__foot { display: none; }
}
@media (max-width: 900px) and (max-height: 640px) {
  .cap p { display: none; }
  .caps { height: 52px; }
  .scrolly__phone { --phone-w: min(calc((100svh - var(--nav) - 150px) / 2.1118), 74vw); }
}

/* ═════════════════════════ THE MAP DEMO ═════════════════════════════ */
.mapdemo { background: linear-gradient(180deg, #1a1220, #120c15 60%, #0c080e); }
.mapdemo canvas, .mapdemo__pins { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 80%); mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 80%); }
.mapdemo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapdemo__shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(180deg, rgba(11,8,13,.75) 0, rgba(11,8,13,0) 26cqw);
}
.mapdemo__pins { position: absolute; inset: 0; z-index: 2; }

.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.pin i {
  position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c, var(--one));
  box-shadow: 0 0 0 .55cqw rgba(255,255,255,.92), 0 .8cqw 2cqw rgba(0,0,0,.45);
  transform: scale(0); opacity: 0;
  transition: transform .5s var(--spring), opacity .2s, background .4s;
}
.pin.is-in i { transform: scale(1); opacity: 1; transition-delay: var(--d, 0ms); }
.pin--theirs { --c: var(--two); }
.pin.is-both i { background: linear-gradient(90deg, var(--one) 50%, var(--two) 50%); }
.pin.is-both::after {
  content: ""; position: absolute; left: calc(var(--s) * -.5); top: calc(var(--s) * -.5);
  width: var(--s); height: var(--s); border-radius: 50%;
  box-shadow: 0 0 0 .5cqw rgba(255,255,255,.7);
  animation: ring 1.1s var(--ease) both; pointer-events: none;
}
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* The album fanning out of the pin. */
.album { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; will-change: transform; }
.print {
  position: absolute; left: -11.5cqw; bottom: 4cqw; width: 23cqw;
  padding: 1.5cqw 1.5cqw 0; background: #F4ECE1; border-radius: 1cqw;
  box-shadow: 0 3cqw 6cqw -1cqw rgba(0,0,0,.65), 0 .6cqw 1.4cqw rgba(0,0,0,.35);
  transform-origin: 50% 100%;
  transform: translate(0, 0) rotate(0) scale(.12); opacity: 0;
  transition: transform .45s var(--ease), opacity .25s;
}
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .3cqw; }
.print span { display: block; height: 8.6cqw; text-align: center; color: #2b1f27; font: 600 3.4cqw/1 var(--serif); padding-top: 1.8cqw; }
.print span small { display: block; margin-top: .9cqw; font: 400 2.2cqw/1 var(--sans); color: #8b7d84; }
.album.is-open .print {
  opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  transition: transform .8s var(--spring), opacity .3s; transition-delay: var(--d);
}

/* A label on a meeting place, as the app draws it. */
.tag {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; will-change: transform;
}
.tag > div {
  position: absolute; left: 0; bottom: 4.6cqw; translate: -50% 0;
  padding: 2.4cqw 3.6cqw; border-radius: 2cqw; background: #F7F1F4; color: #2b1f27;
  white-space: nowrap; text-align: center;
  box-shadow: 0 2.5cqw 5cqw -1cqw rgba(0,0,0,.6);
  transform: scale(.4); transform-origin: 50% 100%; opacity: 0;
  transition: transform .4s var(--ease), opacity .2s;
}
.tag.is-in > div { transform: none; opacity: 1; transition: transform .6s var(--spring), opacity .3s; transition-delay: var(--d, 0ms); }
.tag b { display: block; font: 600 italic 4.6cqw/1.1 var(--serif); }
.tag span { display: block; margin-top: .8cqw; font: 400 2.7cqw/1.2 var(--sans); color: #6f6169; }

.mapdemo__legend {
  position: absolute; left: 5cqw; top: 14cqw; z-index: 6; display: flex; gap: 2cqw;
}
.mapdemo__legend span, .example, .mapdemo__pill {
  display: inline-flex; align-items: center; gap: 1.5cqw;
  height: 6.6cqw; padding: 0 2.8cqw; border-radius: 99px;
  background: rgba(20,14,22,.62); -webkit-backdrop-filter: blur(3cqw); backdrop-filter: blur(3cqw);
  box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.1);
  font: 500 3cqw/1 var(--sans); color: #fff; white-space: nowrap;
}
.mapdemo__legend .dot, .mapdemo__pill .dot { width: 2.2cqw; height: 2.2cqw; }
.mapdemo__legend .is-theirs { opacity: 0; transform: translateX(-2cqw); transition: opacity .4s, transform .4s var(--ease); }
.mapdemo.has-theirs .mapdemo__legend .is-theirs { opacity: 1; transform: none; }
.example { position: absolute; right: 5cqw; top: 14cqw; z-index: 6; color: rgba(255,255,255,.7); }
.mapdemo__pill {
  position: absolute; left: 50%; bottom: 9cqw; z-index: 6; translate: -50% 0;
  height: 9cqw; padding: 0 4.4cqw; gap: 2cqw; font-size: 3.6cqw;
}
.mapdemo__pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mapdemo__pill b:empty { display: none; }
.mapdemo__pill span, .mapdemo__pill b { transition: opacity .2s; }
.mapdemo__pill.is-swapping span, .mapdemo__pill.is-swapping b { opacity: 0; }

/* ═════════════════════════════ WIDGETS ══════════════════════════════ */
/* Her Lock Screen in a phone, the four Home Screen faces floating around it.
   The stage is a container: the phone and the faces are placed in its own
   units, so the composition holds its shape at any width. */
.widgets { padding: clamp(80px, 12vh, 140px) 0; position: relative; }
.widgets::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 68% 50%, rgba(143,123,255,.13), transparent 70%);
}
.widgets__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 560px); justify-content: center; align-items: center; gap: clamp(40px, 7vw, 110px); }
.widgets__copy .h2 { margin-top: 14px; }
.widgets__copy .lede { margin-top: 18px; max-width: 26em; }

.leave { margin-top: 30px; max-width: 400px; }
.leave label { display: block; font-size: 14px; font-weight: 500; color: var(--dim); }
.leave__row { margin-top: 10px; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .25s; }
.leave__row:focus-within { box-shadow: inset 0 0 0 1px rgba(255,160,170,.6), 0 0 0 4px rgba(255,143,163,.12); }
.leave input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; outline: 0; background: none;
  color: var(--text); font: 500 16px/1 var(--sans);
}
.leave input::placeholder { color: var(--faint); }
.leave .btn { height: 44px; padding: 0 20px; }
.leave__fine { margin-top: 10px; font-size: 13px; color: var(--faint); min-height: 1.4em; }
.leave.is-shake .leave__row { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.wstage { position: relative; width: 100%; aspect-ratio: 100 / 116; container-type: inline-size; }
.wstage__phone { --phone-w: 54cqw; position: absolute; left: 23cqw; top: 0; }

.lock { background: var(--wall) center / cover #2a2030; color: #fff; }
.lock::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,14,.35), rgba(10,6,14,0) 45%, rgba(10,6,14,.25)); }
.lock__date { position: absolute; inset: 22cqw 0 auto; text-align: center; font: 600 5cqw/1 var(--sans); color: rgba(255,255,255,.92); }
.lock__time { position: absolute; inset: 28.5cqw 0 auto; text-align: center; font: 700 27cqw/1 var(--sans); letter-spacing: -.015em; color: rgba(255,255,255,.93); font-variant-numeric: tabular-nums; }
.lock__row { position: absolute; left: 11.8cqw; right: 11.8cqw; top: 62cqw; display: flex; gap: 3.6cqw; }
.lw {
  position: relative; flex: 1; height: 16.8cqw; border-radius: 4.6cqw; overflow: hidden;
  background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(2.4cqw) saturate(1.5); backdrop-filter: blur(2.4cqw) saturate(1.5);
  box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.22);
}
.lw__face { position: absolute; inset: 0; padding: 2.6cqw 3.2cqw; display: flex; flex-direction: column; justify-content: center; }
.lw__big { font: 650 4.1cqw/1.1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lw__k { font: 600 2.75cqw/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); white-space: nowrap; }
.lw__line { margin-top: .7cqw; font: 600 3.5cqw/1.15 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; }
/* A longer note takes two lines, and the age gives up its room. */
.lw.is-long .lw__line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 3.2cqw; overflow-wrap: anywhere; }
.lw.is-long .lw__sub { display: none; }
.lw__sub { margin-top: .5cqw; font: 500 2.75cqw/1.1 var(--sans); color: rgba(255,255,255,.7); white-space: nowrap; }
.lw.is-new { animation: arrive 1.2s var(--ease); }
@keyframes arrive {
  25% { box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.9), 0 0 6cqw 1cqw rgba(255,198,166,.6); transform: scale(1.06); }
}
.lw.is-swap .lw__line { opacity: 0; }

.track { display: flex; align-items: center; margin-top: 1.4cqw; height: 6cqw; }
.disc {
  flex: none; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%;
  font: 700 2.5cqw/1 var(--sans); font-style: normal; color: #fff;
  box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.75); background: rgba(255,255,255,.14);
}
.track__road { flex: 1; height: 0; border-top: .35cqw dashed rgba(255,255,255,.7); margin: 0 1cqw; }
.track__heart { flex: none; width: 3.6cqw; height: 3.6cqw; color: #fff; margin-top: -2.2cqw; }

/* The Home Screen faces. Each is its own container, so its type is sized
   against the widget exactly as the extension's is. */
.hw {
  --w: 30cqw;
  position: absolute; width: var(--w); aspect-ratio: 1; container-type: inline-size;
  border-radius: 22%; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 100%, var(--tint), transparent 70%), #17121b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 4cqw 10cqw -2cqw rgba(0,0,0,.7), 0 1cqw 3cqw rgba(0,0,0,.4);
  rotate: var(--r); animation: float 7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.8s);
}
@keyframes float { from { translate: 0 -1.2%; } to { translate: 0 2.2%; } }
.hw--note { --tint: rgba(232,85,111,.45); --k: #FF7E95; left: -3cqw; top: 11cqw; --r: -6deg; }
.hw--dist { --tint: rgba(90,129,232,.45); --k: #7FA8FF; right: -3cqw; top: 3cqw; --r: 5deg; }
.hw--days { --tint: rgba(232,85,111,.38); --k: #FF7E95; left: -1cqw; top: 62cqw; --r: 4deg; }
.hw--soon { --tint: rgba(62,190,130,.38); --k: #53D8A6; right: -2cqw; top: 72cqw; --r: -5deg; }
.hw__in { position: absolute; inset: 0; padding: 9cqw 9.5cqw; display: flex; flex-direction: column; }
.hw__k { display: flex; align-items: center; gap: 3cqw; font: 650 7cqw/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--k); white-space: nowrap; }
.hw__k svg { width: 8.5cqw; height: 8.5cqw; flex: none; }
.hw__note { margin: auto 0; font: 600 15cqw/1.08 var(--serif); color: #fff; transition: opacity .35s, transform .45s var(--ease); }
.hw__note.is-out { opacity: 0; transform: translateY(3cqw); }
.hw__big { margin-top: auto; font: 600 20cqw/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
.hw__huge { margin-top: auto; font: 600 27cqw/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hw__unit { font: 500 9cqw/1.2 var(--sans); color: rgba(255,255,255,.8); }
.hw__foot { margin-top: auto; font: 500 7.6cqw/1.1 var(--sans); color: rgba(255,255,255,.5); white-space: nowrap; }
.hw--days .hw__foot, .hw--soon .hw__foot { margin-top: 4cqw; }
.hw__track { display: flex; align-items: center; margin-top: 4cqw; }
.hw__track .disc { width: 16cqw; height: 16cqw; font-size: 6.4cqw; box-shadow: inset 0 0 0 .7cqw rgba(255,255,255,.35); }
.hw__track span { flex: 1; border-top: 1cqw dashed rgba(255,255,255,.45); margin: 0 1.5cqw; }
.hw__track svg { width: 8cqw; height: 8cqw; color: #fff; margin-top: -5cqw; }
.hw--dist .hw__foot { margin-top: 4cqw; }

@media (max-width: 900px) {
  .widgets__grid { grid-template-columns: minmax(0, 520px); }
  .widgets__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .widgets__copy .lede { margin-left: auto; margin-right: auto; }
  .leave { width: 100%; text-align: left; }
  .wstage { order: 2; }
}
@media (max-width: 600px) {
  /* The faces go under the phone, two by two, big enough to read. */
  .wstage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
  .wstage__phone { --phone-w: 70cqw; position: relative; left: auto; grid-column: 1 / -1; justify-self: center; margin-bottom: -26cqw; }
  .hw { position: relative; inset: auto; --w: 100%; width: 100%; }
  .hw--note, .hw--days { --r: -3deg; }
  .hw--dist, .hw--soon { --r: 3deg; }
}
@media (prefers-reduced-motion: reduce) { .hw { animation: none; } }

/* ═════════════════════════════ GAMES ════════════════════════════════ */
.games { padding: clamp(80px, 12vh, 140px) 0; position: relative; }
.games::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 70% 50%, rgba(255,122,147,.1), transparent 70%);
}
.games__grid { display: grid; grid-template-columns: minmax(0, 460px) auto; justify-content: center; gap: clamp(40px, 8vw, 120px); align-items: center; }
.games__copy .h2 { margin-top: 14px; }
.games__copy .lede { margin-top: 18px; max-width: 28em; }
.gamelist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 30em; }
.gamelist li {
  display: grid; gap: 3px; padding: 14px 18px 14px 20px; border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--g) 70%, transparent), color-mix(in srgb, var(--g) 25%, transparent));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.gamelist b { font: 600 19px/1.2 var(--serif); }
.gamelist span { font-size: 14.5px; color: rgba(251,246,247,.75); line-height: 1.45; }
.games__phone { --phone-w: min(330px, 78vw); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.games__hint { font-size: 13.5px; color: var(--faint); min-height: 1.5em; text-align: center; transition: opacity .3s; }
@media (max-width: 900px) {
  .games__grid { grid-template-columns: 1fr; justify-items: center; }
  .games__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .gamelist { text-align: left; }
}

/* This or That, drawn as the app draws it. */
.tot { background: linear-gradient(180deg, #24182a, #120c15 60%, #0c080e); color: var(--text); font-family: var(--sans); }
.tot__play, .tot__result { position: absolute; inset: 0; padding: 15cqw 4.5cqw 6cqw; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.tot__result { opacity: 0; transform: translateY(6cqw); pointer-events: none; }
.tot.is-done .tot__play { opacity: 0; transform: translateY(-4cqw); pointer-events: none; }
.tot.is-done .tot__result { opacity: 1; transform: none; pointer-events: auto; }

.tot__bar { display: flex; align-items: center; gap: 2.2cqw; height: 7cqw; }
.pair { display: flex; }
.pair .disc { width: 5.6cqw; height: 5.6cqw; font-size: 2.5cqw; box-shadow: 0 0 0 .5cqw #1d1422; }
.pair .disc + .disc { margin-left: -1.6cqw; }
.disc--one { background: var(--one); }
.disc--two { background: var(--two); }
.tot__turn { font-size: 3.5cqw; color: var(--dim); }
.tot__n { margin-left: auto; font-size: 3.3cqw; color: var(--faint); font-variant-numeric: tabular-nums; }
.tot__n b { font-weight: 500; color: var(--dim); }
.tot__progress { height: .9cqw; border-radius: 1cqw; background: rgba(255,255,255,.08); margin-top: 2cqw; overflow: hidden; }
.tot__progress i { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--cta); transition: width .6s var(--ease); }
.tot__topic { text-align: center; margin: 4cqw 0 3cqw; font-size: 3.6cqw; color: var(--faint); height: 4.4cqw; transition: opacity .25s; }

.tot__card {
  position: relative; display: block; width: 100%; height: 77cqw; border-radius: 6.5cqw; overflow: hidden;
  background: var(--tint, #333); isolation: isolate;
  box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08), 0 3cqw 6cqw -3cqw rgba(0,0,0,.6);
  transition: transform .35s var(--ease), filter .4s, opacity .4s;
}
.tot__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: opacity .3s; }
.tot__card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); z-index: -1; }
.tot__label { position: absolute; left: 4cqw; right: 4cqw; bottom: 5.5cqw; text-align: center; font: 600 6.2cqw/1.1 var(--serif); text-shadow: 0 .4cqw 2cqw rgba(0,0,0,.5); }
.tot__card:hover { transform: scale(1.012); }
.tot__card:active { transform: scale(.975); }
.tot.is-locked .tot__card { pointer-events: none; }
.tot__card.is-picked { box-shadow: inset 0 0 0 .7cqw rgba(255,255,255,.95), 0 3cqw 6cqw -3cqw rgba(0,0,0,.6); }
.tot__card.is-dropped { filter: grayscale(.85) brightness(.55); }
.tot__or { display: block; width: max-content; margin: 2cqw auto; padding: 1.4cqw 3.4cqw; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 3.2cqw; color: var(--dim); }
.tot__who { position: absolute; left: 3.6cqw; top: 3.6cqw; display: flex; }
.tot__who .disc { width: 7.4cqw; height: 7.4cqw; font-size: 3.2cqw; box-shadow: 0 0 0 .55cqw rgba(255,255,255,.95), 0 1cqw 2cqw rgba(0,0,0,.4); animation: drop .55s var(--spring) both; }
.tot__who .disc + .disc { margin-left: -2cqw; animation-delay: .35s; }
@keyframes drop { from { transform: translateY(-4cqw) scale(.4); opacity: 0; } }
.tot__verdict { text-align: center; margin-top: 3cqw; height: 6cqw; font: 600 4.4cqw/6cqw var(--serif); opacity: 0; transform: translateY(2cqw); transition: opacity .3s, transform .4s var(--ease); }
.tot__verdict.is-on { opacity: 1; transform: none; transition-delay: .45s; }
.tot__verdict.is-same { color: #FFC6A6; }
.tot__verdict.is-diff { color: var(--dim); }
.tot__deal .tot__card, .tot__deal .tot__topic { opacity: 0; transform: translateX(-6cqw); transition: none; }

.tot__k { font-size: 3.3cqw; color: var(--faint); }
.tot__score { margin-top: 2cqw; font: 500 5.4cqw/1 var(--serif); color: var(--dim); }
.tot__score b { font: 600 15cqw/1 var(--serif); color: var(--text); margin-right: 1.5cqw; vertical-align: -1.5cqw; }
.tot__sum { margin-top: 2.5cqw; font-size: 3.6cqw; color: var(--faint); }
.tot__rows { margin-top: 5cqw; display: grid; gap: 3.6cqw; }
.tot__row h4 { margin: 0 0 1.8cqw; font: 600 4.2cqw/1 var(--serif); }
.tot__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.tot__thumb { position: relative; }
.tot__thumb div { height: 17cqw; border-radius: 3cqw; overflow: hidden; background: #333; }
.tot__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tot__thumb.is-off div { filter: grayscale(.9) brightness(.5); }
.tot__thumb span { display: block; margin-top: 1.2cqw; font-size: 2.9cqw; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tot__thumb.is-off span { color: var(--faint); }
.tot__thumb .tot__who { left: 1.8cqw; top: auto; bottom: 7.4cqw; }
.tot__thumb .tot__who .disc { width: 5.4cqw; height: 5.4cqw; font-size: 2.4cqw; animation: none; box-shadow: 0 0 0 .4cqw rgba(255,255,255,.9); }
.tot__thumb .tot__who .disc + .disc { margin-left: -1.4cqw; }
.tot__again {
  position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 7cqw; height: 12cqw; border-radius: 99px;
  background: var(--cta); color: #2A1219; font: 600 4cqw/1 var(--sans);
}

/* ═════════════════════════════ TRUST ════════════════════════════════ */
.trust { padding: clamp(40px, 8vh, 96px) 0; }
.h2--mid { text-align: center; }
.trust__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tcard { padding: 24px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.tcard h3 { font: 600 20px/1.2 var(--serif); }
.tcard p { margin-top: 8px; font-size: 15px; color: var(--dim); line-height: 1.5; }
.tcard a { color: var(--text); text-underline-offset: 3px; }
@media (max-width: 800px) { .trust__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════ PRICE + ASK ═════════════════════════════ */
.get { padding: clamp(56px, 10vh, 120px) 0 clamp(72px, 12vh, 140px); position: relative; }
.get::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 50% 60%, rgba(255,122,147,.14), transparent 70%);
}
.get__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.get__mark { width: 76px; height: 72px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.h2--get { margin-top: 22px; }
.get .lede { margin-top: 14px; max-width: 26em; }
.plans { display: flex; gap: 12px; margin: 30px 0 26px; }
.plan {
  position: relative; width: 150px; padding: 22px 16px 18px; border-radius: 22px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.plan b { font: 600 30px/1 var(--serif); }
.plan span { font-size: 14px; color: var(--dim); }
.plan--best { background: rgba(255,143,163,.1); box-shadow: inset 0 0 0 1.5px rgba(255,160,170,.55); }
.plan__tag {
  position: absolute; top: -11px; left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 99px;
  background: var(--cta); color: #2A1219 !important; font: 600 12px/1.2 var(--sans) !important; white-space: nowrap;
}
.get__fine { margin-top: 14px; font-size: 13.5px; color: var(--faint); }

/* ═════════════════════════════ FOOTER ═══════════════════════════════ */
.foot { border-top: 1px solid var(--hair); padding: 28px 0 40px; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.foot__links { display: flex; gap: 22px; margin-left: auto; }
.foot__links a { color: var(--dim); text-decoration: none; font-size: 14.5px; }
.foot__links a:hover { color: var(--text); }
.foot__line { width: 100%; font-size: 13px; color: var(--faint); }

/* Less motion asked for: everything lands where it would end, at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  html { scroll-behavior: auto; }
}