/* Tietmo company site — visual language borrowed from the app itself:
   event-screen yellow, chat-screen cream, heavy rounded type, mono labels. */

:root {
  --yellow: #f2ef4b;
  --pink: #f7a8cd;
  --cream: #efebe2;
  --ink: #141310;
  --paper: #fffdf4;
  --card: #ffffff;
  --muted: #6f6a58;
  --line: rgba(20, 19, 16, 0.12);
  --grey: #efece2;
  --rainbow: linear-gradient(90deg, #3ba55c, #3e7bd6, #8a4fbe, #e04644, #f28b2e);

  /* The app's fonts (components/design/tokens.ts `fonts`): the phone's own
     system face — SF Pro on Apple, Roboto on Android — and Menlo for mono. */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: Menlo, Consolas, "Roboto Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181712;
    --ink: #f4f1e4;
    --card: #211f18;
    --muted: #a8a28c;
    --line: rgba(244, 241, 228, 0.14);
    --grey: #232118;
  }
}
:root[data-theme="light"] {
  --paper: #fffdf4;
  --ink: #141310;
  --card: #ffffff;
  --muted: #6f6a58;
  --line: rgba(20, 19, 16, 0.12);
  --grey: #efece2;
}
:root[data-theme="dark"] {
  --paper: #181712;
  --ink: #f4f1e4;
  --card: #211f18;
  --muted: #a8a28c;
  --line: rgba(244, 241, 228, 0.14);
  --grey: #232118;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* ::before/::after too — `*` alone skips them, and some moving parts live there. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

/* ---------- the homepage's sky ----------
   Jakob's sky from the app intro is the whole homepage's background: it holds
   still while the page scrolls over it, and a soft wash of the brand rainbow
   on the page (main) shifts its colour section by section — pure sky at the
   top, then pink, peach, warm yellow, green, blue and purple by the end. The
   homepage is light in both themes, like the app intro, so its colours are
   pinned here; the other pages keep their own. */
.home {
  --paper: #fffdf4;
  --ink: #141310;
  --card: #ffffff;
  --muted: #4d5462;
  --line: rgba(20, 19, 16, 0.12);
  --grey: rgba(255, 255, 255, 0.55);
  background: #dfe8f5;
  color-scheme: light;
}
.home::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: #dfe8f5 url("assets/sky.jpg") center / cover no-repeat;
}
.home main {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 9%,
    rgba(255, 77, 139, 0.13) 19%,
    rgba(255, 138, 61, 0.13) 33%,
    rgba(232, 164, 0, 0.12) 47%,
    rgba(47, 168, 79, 0.1) 61%,
    rgba(30, 155, 224, 0.08) 74%,
    rgba(126, 87, 194, 0.13) 88%,
    rgba(255, 77, 139, 0.1) 100%
  );
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The logo standing in for the word "Tietmo" inside a line of text (app.js
   setText), sized to the text around it. Its letters run to 2% above the
   picture's bottom edge, so that edge goes just under the line's baseline. */
.tm {
  display: inline-block;
  height: 0.86em;
  width: auto;
  vertical-align: -0.02em;
}
/* The app-name line of a notification: a small logo, as iOS shows the app's name. */
.scene-toast b .tm { width: auto; height: 0.78rem; border-radius: 0; vertical-align: 0; }
.footer p .tm { height: 1.05em; vertical-align: -0.03em; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.mono-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.section-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 5.5rem 1.5rem;
}

/* ---------- top bar ---------- */

/* A floating pill rather than a full-width strip: it hovers over the page, and
   the hero's colour runs up behind it (see .hero below). */
.topbar {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  width: calc(100% - 2rem);
  max-width: 75rem;
  margin: 0.75rem auto 0;
  padding: 0.55rem 0.7rem 0.55rem 1.3rem;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.2, 1);
}
/* The bar's look lives on a layer of its own, so it can shrink on its own:
   dressed like an event feature that's switched on in the app
   (EventEditFeaturesSection, tileIconRing) — a full rainbow ring, corner to
   corner, around a card face with the rainbow's faint 10% wash. */
.topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  border: 2px solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(to bottom right, #ff5a5f1a, #ff8a3d1a, #e8a4001a, #2fa84f1a, #1e9be01a, #7e57c21a, #ff4d8b1a) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(to bottom right, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b) border-box;
  box-shadow: 0 10px 30px rgba(20, 19, 16, 0.12);
  transition: inset 0.45s cubic-bezier(0.3, 0, 0.2, 1);
}
.topbar > :not(.store-pill--bar) { transition: opacity 0.25s ease; }
/* Scrolled down: the bar closes in on its "get the app" button — the ring
   itself shrinks from every side until it wraps the button, where the
   button has glided to (the bar's right end; app.js measures the
   spot), and the rest fades. It opens back out when you scroll up. Nothing
   else on the bar takes clicks meanwhile. */
.topbar--hidden { pointer-events: none; }
.topbar--hidden::before {
  inset: var(--shrink-t, 0) var(--shrink-r, 0) var(--shrink-b, 0) var(--shrink-l, 0);
}
.topbar--hidden > :not(.store-pill--bar) { opacity: 0; }
.topbar-brand img { height: 1.6rem; display: block; }
.topbar-nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.topbar-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Instagram link beside the language toggle: Meta's official glyph, plain, in
   the text color (black, or white in dark mode). Meta's brand rules allow only
   black or white for a link to an account — the colored app icon is reserved
   for "download the app", so no colors or circle here. */
.insta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--ink);
  flex-shrink: 0;
}
.insta-btn:hover { opacity: 0.7; }
.insta-btn:focus-visible { outline: 2px solid #3e7bd6; outline-offset: 2px; }

.lang-toggle {
  display: flex;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.lang-toggle button {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-toggle button:focus-visible,
a:focus-visible,
.contact-btn:focus-visible {
  outline: 2px solid #3e7bd6;
  outline-offset: 2px;
}


/* ---------- hero ---------- */

/* Jakob's sky from the app intro (assets/images/explore-sky.jpg), pinned
   light in both themes like the intro is. */
.hero {
  color: #141310;
  /* Clipped at the sides only (the fan's side cards on a phone), so the
     cards' shadows fall past the hero's bottom instead of stopping in a line. */
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}
/* Pulled up behind the floating top bar so the bar sits on the hero, not on a
   strip of page colour. The padding hands the same space back. */
.topbar + main > .hero:first-child {
  margin-top: -8rem;
  padding-top: 8rem;
}
.hero-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* "Welcome to the / SOCIAL / media": the word gets a line of its own and is
   by far the biggest thing on the page. */
.hero-title {
  position: relative;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 1.6rem;
}
.hero-title .rainbow-line { display: block; }
.hero-title .rainbow-word {
  display: block;
  font-size: clamp(3rem, 15vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0.04em 0 0.06em;
}
/* The intro's welcome halo (IntroWelcomeArt): a soft rainbow glow behind the
   word that breathes slowly. */
.hero-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 115%;
  height: 120%;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b, #ff5a5f);
  filter: blur(70px);
  opacity: 0.22;
  transform: translate(-50%, -50%);
  animation: halo-breathe 6.4s ease-in-out 0.6s infinite alternate;
}
@keyframes halo-breathe {
  to { opacity: 0.32; transform: translate(-50%, -50%) scale(1.07); }
}

.hero-sub {
  font-size: 1.15rem;
  max-width: 36rem;
  color: #3f4a5a;
}
/* The store links close the headline, as the page's one call to action. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2rem;
}
/* ---------- get the app ----------
   The store buttons wear the top bar's rainbow ring, slowly turning, round
   a white face with the faint rainbow wash — loud enough to find, in four
   places. app.js hides the other store's button on a phone. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.store-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  border: 2.5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(to bottom right, #ff5a5f1a, #ff8a3d1a, #e8a4001a, #2fa84f1a, #1e9be01a, #7e57c21a, #ff4d8b1a) padding-box,
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from var(--spin), #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b, #ff5a5f) border-box;
  box-shadow: 0 8px 24px rgba(126, 87, 194, 0.25);
  color: #141310;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* ---------- the hero's events ----------
   Three event pages fanned like a hand of cards, the middle one in front; each
   changes look on its own beat (app.js, "the event cards"). */
.hero-events {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2.75rem;
}
.hero-event { position: relative; flex: 0 0 auto; width: 15.5rem; animation: hero-card-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.hero-event:nth-child(1) { rotate: -6deg; translate: 0 2.4rem; animation-delay: 0.65s; }
.hero-event:nth-child(2) { z-index: 1; width: 18.5rem; margin: 0 -0.9rem; }
.hero-event:nth-child(3) { rotate: 6deg; translate: 0 2.4rem; animation-delay: 0.8s; }
@keyframes hero-card-in { from { opacity: 0; transform: translateY(2.5rem) scale(0.94); } }
.hero-event .event-mock { border-radius: 1.75rem; }
.hero-pick { margin-top: 4.5rem; }
.hero-pick-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-pick .theme-picker { margin-top: 1rem; }

.store-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(126, 87, 194, 0.3); animation: pill-spin 3s linear infinite; }
@keyframes pill-spin { to { --spin: 360deg; } }
/* In the bar the button has only a hairline of rainbow: once the bar closes
   in on it, the bar's own ring is its ring — one ring, never two. */
.store-pill--bar {
  /* How much bigger it gets once the bar has closed around it (app.js reads it). */
  --merged-scale: 1.15;
  position: relative;
  padding: 0.5rem 1.05rem;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.85rem;
  animation: none;
  transition: translate 0.45s cubic-bezier(0.3, 0, 0.2, 1), scale 0.45s cubic-bezier(0.3, 0, 0.2, 1);
}
.store-pill--bar:hover { transform: none; box-shadow: none; }
.store-pill--bar::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--spin), #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b, #ff5a5f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
/* When the bar closes in on it, the button glides to the bar's right end and
   its hairline gives way to the bar's ring arriving around it. */
.topbar--hidden .store-pill--bar {
  translate: var(--to-right, 0px) 0;
  scale: var(--merged-scale);
  pointer-events: auto;
}
.topbar--hidden .store-pill--bar::after { opacity: 0; }
/* Phones: the top bar has no room, so "get the app" floats at the bottom. */
.store-float {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: none;
  opacity: 0;
  translate: -50% 150%;
  transition: translate 0.3s ease, opacity 0.3s ease;
}
.store-float.is-shown { opacity: 1; translate: -50% 0; }

/* The "get the app" screen for computers: the code to scan on the left,
   real app screens fanned out on the sky on the right (hidden when narrow).
   Pinned light, like the hero. */
.qr-dialog {
  width: min(58rem, calc(100% - 2rem));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 2rem;
  background: transparent;
}
.qr-dialog::backdrop { background: rgba(20, 19, 16, 0.5); backdrop-filter: blur(6px); }
.qr-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  overflow: hidden;
  border: 2.5px solid transparent;
  border-radius: 2rem;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(to bottom right, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b) border-box;
  color: #141310;
}
.qr-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.75rem 2.25rem;
  text-align: center;
  background: linear-gradient(to bottom right, #ff5a5f12, #ff8a3d12, #e8a40012, #2fa84f12, #1e9be012, #7e57c212, #ff4d8b12);
}
.qr-logo { height: 2.2rem; width: auto; }
.qr-title { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.02em; }
.qr-body { max-width: 21rem; margin-top: 0.6rem; font-size: 1rem; color: #6f6a58; }
.qr-frame {
  width: 13rem;
  margin: 1.6rem auto 1.4rem;
  padding: 0.6rem;
  border: 2.5px solid transparent;
  border-radius: 1.4rem;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(to bottom right, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b) border-box;
}
.qr-code { display: block; width: 100%; height: auto; }
.qr-links { display: flex; justify-content: center; gap: 1.25rem; font-size: 0.9rem; }
.qr-links a { color: #141310; text-underline-offset: 3px; }
.qr-show {
  position: relative;
  min-height: 32rem;
  overflow: hidden;
  background: #dfe8f5 url("assets/sky.jpg") center 30% / cover no-repeat;
}
.qr-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11.5rem;
  filter: drop-shadow(0 22px 30px rgba(40, 70, 120, 0.28));
}
.qr-phone img { display: block; width: 100%; height: auto; clip-path: inset(2.7% 5.2% round 11% / 5.7%); }
.qr-phone--left { transform: translate(-112%, -44%) rotate(-9deg); }
.qr-phone--right { transform: translate(12%, -44%) rotate(9deg); }
.qr-phone--mid { z-index: 1; width: 13rem; transform: translate(-50%, -50%); }
.qr-close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(20, 19, 16, 0.15);
  color: #141310;
  cursor: pointer;
}
.qr-close svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 48rem) {
  .qr-inner { grid-template-columns: 1fr; }
  .qr-show { display: none; }
}
.qr-close:focus-visible { outline: 2px solid #3e7bd6; outline-offset: 2px; }

/* ---------- the rainbow word ----------
   Each letter is painted with its own slice of the wordmark's gradient
   (tokens.ts logoGradient), so the word reads as one rainbow while every
   letter moves on its own. The outer span jumps in once; the inner one hops
   in a slow wave that runs across the word every few seconds. */

.rainbow-word .rl { display: inline-block; }
.rainbow-word .rl > span {
  display: inline-block;
  /* Room above and below the caps: text outside the box is clipped away. */
  padding: 0.04em 0.01em;
  background: linear-gradient(90deg, #b02d76, #e12f5b, #fb6f38, #ffad36, #c6c849, #3eae57, #24a2a5, #287ad6, #8f4a99);
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Hidden only when app.js is there to bring them in. */
.js [data-i18n-rainbow]:not(.is-in) .rl { opacity: 0; }
.is-in .rl {
  animation: letter-in 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  animation-delay: calc(0.1s + var(--i) * 0.08s);
}
.is-in .rl > span {
  animation: letter-hop 7s ease-in-out infinite;
  animation-delay: calc(2.4s + var(--i) * 0.09s);
}
@keyframes letter-in {
  0% { opacity: 0; transform: translateY(0.5em) scale(0.6) rotate(-8deg); }
  55% { opacity: 1; transform: translateY(-0.14em) scale(1.06) rotate(3deg); }
  80% { transform: translateY(0.03em) scale(0.99) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes letter-hop {
  0%, 12%, 100% { transform: none; }
  5% { transform: translateY(-0.13em) rotate(-3deg); }
  9% { transform: translateY(0.015em); }
}

/* ---------- show: the group chat vs. a Tietmo event ---------- */

.show { text-align: center; }
.show h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  max-width: 22ch;
  margin: 0 auto 0.9rem;
}
.show .section-sub { margin: 0 auto; }
.vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3rem;
}
.vs-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.vs-logo { display: block; height: 1.15rem; width: auto; }
.vs-side figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.vs-badge {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--muted);
}

/* The chat: grey, crooked, a little tired. Pinned light in both themes. */
.vs-side--chat { transform: rotate(-3deg); }
.chat-mock {
  width: 17rem;
  padding: 1rem;
  border-radius: 1.6rem;
  background: #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  box-shadow: 0 10px 26px rgba(20, 19, 16, 0.08);
}
.chat-unread {
  align-self: center;
  margin-bottom: 0.3rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #d8d8d8;
  color: #6b6b6b;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-msg {
  max-width: 92%;
  padding: 0.55rem 0.85rem;
  border-radius: 1.1rem;
  border-bottom-left-radius: 0.3rem;
  background: #ffffff;
  color: #3a3a3a;
  font-size: 0.92rem;
  line-height: 1.3;
}
/* Four people, four bubbles: each sender gets their own muted colour. */
.chat-msg:nth-of-type(3) { background: #d6e6fb; color: #2c3e57; }
.chat-msg:nth-of-type(4) { background: #dcefd6; color: #2f4a2a; }
.chat-msg:nth-of-type(5) { background: #fbe6c9; color: #5a4220; }

/* The event: one of the app's themes drawn by effects.js (the disco ball, the
   park with its dog…), with the event's own page on top. Each theme sets the
   ink that reads on it and its page colour (effectThemes.ts `ink`, `page`),
   as typed properties so a theme change fades the text too. */
@property --em-ink { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --em-page { syntax: "<color>"; inherits: true; initial-value: #12062a; }

.event-mock[data-theme="disco"] { --em-ink: #ffffff; --em-page: #12062a; }
.event-mock[data-theme="park"] { --em-ink: #141310; --em-page: #cfe8c0; }
.event-mock[data-theme="goldenHour"] { --em-ink: #ffffff; --em-page: #f2645e; }
.event-mock[data-theme="aurora"] { --em-ink: #ffffff; --em-page: #04162b; }
.event-mock[data-theme="candy"] { --em-ink: #141310; --em-page: #eedcf5; }
.event-mock[data-theme="lagoon"] { --em-ink: #ffffff; --em-page: #0a4c80; }

/* Everything in the card is layered, so it has no width of its own to give:
   the figure sets it. */
.vs-side--tietmo { flex: none; width: min(18rem, 100%); }

/* Before the event: how an invite reaches you (InviteReveal.tsx). The push
   drops in on a lock screen and is tapped, the letter flies in and begs, the
   seal breaks, the flap opens, the card rises out and swallows the screen —
   and the event page comes up out of it. Sizes are in cqw of the card: the
   envelope is the app's 66 % of the screen. Reduce Motion: just the event. */
.stage.vs-stage { display: block; width: 100%; padding: 0; overflow: visible; container-type: normal; }
.lt-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  container-type: inline-size;
  visibility: hidden;
  pointer-events: none;
}
/* The phone's screen: not there while the push floats on its own — it
   comes up when the push is tapped. */
.lt-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2rem;
  background: #1b1030;
  opacity: 0;
}
.lt-screen::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: url(assets/album/selfie.jpg) center / cover;
  filter: blur(18px) brightness(0.55);
}
.js .lt-intro { visibility: visible; }
.js .vs-stage .event-mock { opacity: 0; }
.vs-stage .event-mock { box-shadow: none; }
.lt-push {
  position: absolute;
  top: calc(50% - 10cqw);
  left: 4cqw;
  right: 4cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3.4cqw;
  border-radius: 6cqw;
  background: rgba(245, 245, 245, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2.5cqw 8cqw rgba(20, 19, 16, 0.18);
  color: #111111;
  opacity: 0;
}
.lt-push img { width: 11cqw; height: 11cqw; flex-shrink: 0; border-radius: 2.6cqw; background: #ffffff; }
.lt-push-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 3.9cqw; line-height: 1.3; }
.lt-push-top { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; }
.lt-push-top b { font-weight: 700; }
.lt-push-top small { font-size: 3.5cqw; color: rgba(17, 17, 17, 0.5); }
.lt-tap { --d: 1.9s; inset: auto; left: calc(50% - 7cqw); top: calc(50% - 7cqw); width: 14cqw; height: 14cqw; }

.lt-env {
  position: absolute;
  left: 17cqw;
  top: calc(56% - 21.1cqw);
  width: 66cqw;
  height: 42.2cqw;
  opacity: 0;
}
.lt-pocket {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #dcd5c7;
  border-radius: 3.7cqw;
  background: #faf7f2;
  box-shadow: 0 3.2cqw 6.4cqw rgba(26, 24, 20, 0.3);
}
.lt-crease { position: absolute; }
.lt-crease--l { top: 0; bottom: 0; left: 0; width: 44%; background: #f7f3ec; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lt-crease--r { top: 0; bottom: 0; right: 0; width: 44%; background: #f7f3ec; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.lt-crease--b { left: 0; right: 0; bottom: 0; height: 46%; background: #f4efe7; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.lt-from {
  position: absolute;
  left: 5.3cqw;
  right: 5.3cqw;
  bottom: 4.3cqw;
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 5cqw;
  font-weight: 600;
  text-align: center;
  color: #1a1814;
}
.lt-stamp {
  position: absolute;
  top: 2.7cqw;
  right: 2.7cqw;
  width: 8.5cqw;
  height: 10.7cqw;
  padding: 0.8cqw;
  border: 1px dashed #b8b2a7;
  border-radius: 2px;
  background: #ffffff;
}
.lt-stamp img { width: 100%; height: 100%; object-fit: contain; }
.lt-flap,
.lt-flap-back { position: absolute; left: 0; width: 100%; height: 52%; background: #f4efe7; }
.lt-flap { top: 0; z-index: 5; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; }
.lt-flap-back { top: -52%; z-index: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: bottom; scale: 1 0; }
.lt-seal {
  position: absolute;
  z-index: 6;
  left: calc(50% - 6.1cqw);
  top: calc(52% - 6.1cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.2cqw;
  height: 12.2cqw;
  border: 3px solid rgba(26, 24, 20, 0.14);
  border-radius: 50%;
  background: #6a2bb0;
  box-shadow: 0 0.5cqw 1.1cqw rgba(26, 24, 20, 0.3);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 5.3cqw;
  font-weight: 800;
}
.lt-card {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 4%;
  width: 88%;
  height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3.7cqw;
  background: #6a2bb0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 4.3cqw;
}
.lt-card i { position: absolute; inset: 1.9cqw; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 2.4cqw; }

/* The beats, in seconds from when the section comes into view. */
.vs-stage.is-playing .lt-push {
  animation:
    lt-push-in 0.6s cubic-bezier(0.3, 1.3, 0.5, 1) 0.4s both,
    lt-out 0.3s ease 2.15s forwards;
}
.vs-stage.is-playing .lt-screen { animation: lt-screen 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) 2.1s both; }
.vs-stage.is-playing .lt-env {
  animation:
    lt-fly 0.7s cubic-bezier(0.3, 1.25, 0.5, 1) 2.2s both,
    lt-beg 0.7s ease-in-out 2.9s;
}
.vs-stage.is-playing .lt-seal {
  animation:
    lt-seal-break 0.3s ease-in 3.6s both,
    lt-seal-pulse 0.35s ease-in-out 2.9s 2;
}
.vs-stage.is-playing .lt-flap { animation: lt-flap 0.25s ease-in 3.8s forwards; }
.vs-stage.is-playing .lt-flap-back {
  animation:
    lt-flap-back 0.25s ease-out 4.05s forwards,
    lt-fall 0.5s ease-in 4.95s forwards;
}
.vs-stage.is-playing .lt-pocket { animation: lt-fall 0.5s ease-in 4.95s forwards; }
.vs-stage.is-playing .lt-card i { animation: lt-gone 0.3s ease 4.95s forwards; }
.vs-stage.is-playing .lt-card {
  animation:
    lt-rise 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) 4.3s both,
    lt-expand 0.55s ease-in 4.95s forwards;
}
.vs-stage.is-playing .lt-intro { animation: lt-gone 0.45s ease 5.4s forwards; }
.vs-stage.is-playing .event-mock { animation: lt-event 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) 5.3s both; }
@keyframes lt-push-in { from { opacity: 0; translate: 0 -12cqw; scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes lt-out { to { opacity: 0; scale: 0.92; } }
@keyframes lt-screen { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
@keyframes lt-fly {
  from { opacity: 0; translate: 0 -40cqw; scale: 0.3; rotate: -8deg; }
  to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}
@keyframes lt-beg { 25% { rotate: -3deg; } 50% { rotate: 3deg; } 75% { rotate: -2deg; } }
@keyframes lt-seal-pulse { 50% { scale: 1.1; } }
@keyframes lt-seal-break { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.5; } }
@keyframes lt-flap { to { transform: perspective(60cqw) rotateX(90deg); visibility: hidden; } }
@keyframes lt-flap-back { to { scale: 1 1; } }
@keyframes lt-rise { from { translate: 0 0; } to { translate: 0 -89%; } }
@keyframes lt-expand { from { z-index: 10; scale: 1; } to { z-index: 10; scale: 6.5; color: transparent; } }
@keyframes lt-fall { to { opacity: 0; translate: 0 30cqw; } }
@keyframes lt-gone { to { opacity: 0; visibility: hidden; } }
/* Hype: guests' messages popping over the event while people join. */
.hy-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hy-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 78%;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border-radius: 1.1rem;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(20, 19, 16, 0.25);
  color: #1a1814;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
}
.hy-bubble--l { left: 4%; border-bottom-left-radius: 0.3rem; }
.hy-bubble--r { right: 4%; border-bottom-right-radius: 0.3rem; }
.hy-bubble img { width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.hy-bubble b { display: block; font-size: 0.68rem; color: #8a857d; }
@media (prefers-reduced-motion: reduce) { .hy-layer { display: none; } }
@keyframes lt-event { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lt-intro { display: none; }
  .js .vs-stage .event-mock { opacity: 1; }
}
.event-mock {
  /* One app point on a 375-wide phone, so the page below can use the app's
     own numbers (styles/eventDetail.ts). Used by the children only. */
  --pt: calc(100cqw / 375);
  --em-ink-2: color-mix(in srgb, var(--em-ink) 78%, transparent);
  --em-ink-3: color-mix(in srgb, var(--em-ink) 58%, transparent);
  position: relative;
  width: 100%;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  border-radius: 2rem;
  background: var(--em-page);
  color: var(--em-ink);
  text-align: left;
  box-shadow: 0 30px 60px rgba(20, 19, 16, 0.28);
  transition: --em-ink 0.9s, --em-page 0.9s;
}
.em-scene { position: absolute; inset: 0; z-index: -1; }
/* Falling symbols over the theme, under the page: app.js moves them the way
   EventFallingBackground does. With Reduce Motion they rest, scattered. */
.em-fall { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.em-fall span { position: absolute; top: 0; line-height: 1; opacity: 0; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .em-fall span { opacity: 0.32; }
}
.fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: fx-in 0.9s ease backwards;
  transition: opacity 0.9s ease;
}
.fx-layer.is-leaving { opacity: 0; }
@keyframes fx-in { from { opacity: 0; } }
.fx-sprite {
  position: absolute;
  background-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: transform, opacity;
}

.em-title {
  /* The phone's header room above the title, without its buttons. */
  padding: calc(var(--pt) * 64) calc(var(--pt) * 20) calc(var(--pt) * 20);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 30);
  line-height: calc(var(--pt) * 34);
  letter-spacing: calc(var(--pt) * -0.8);
}

/* The square cover with the going badge bottom-right. */
.em-cover {
  position: relative;
  width: calc(var(--pt) * 300);
  margin: 0 auto calc(var(--pt) * 40);
}
.em-cover-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--pt) * 16);
}
/* RsvpBadge "going": the label inside a slowly spinning ring of greens. */
.em-badge {
  position: absolute;
  right: calc(var(--pt) * -20);
  bottom: calc(var(--pt) * -20);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 54);
  height: calc(var(--pt) * 54);
}
.em-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#1b5e20, #2e7d32, #43a047, #7cc47f, #43a047, #2e7d32, #1b5e20);
  box-shadow: 0 calc(var(--pt) * 3) calc(var(--pt) * 8) rgba(0, 0, 0, 0.3);
  animation: badge-spin 3.5s linear infinite;
}
@keyframes badge-spin { to { rotate: 360deg; } }
.em-badge span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 49);
  height: calc(var(--pt) * 49);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #04842c;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 10.8);
}

.em-info { padding: 0 calc(var(--pt) * 20) calc(var(--pt) * 22); }
.em-meta,
.em-place {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 12);
  font-weight: 600;
  letter-spacing: calc(var(--pt) * 0.2);
  color: var(--em-ink-2);
}
.em-meta { margin-bottom: calc(var(--pt) * 6); }
.em-place,
.em-vis { display: flex; align-items: center; gap: calc(var(--pt) * 5); }
.em-place { margin-bottom: calc(var(--pt) * 14); }
.em-place svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); flex-shrink: 0; }
/* The app's icons are Feather's: outlines, round ends. */
svg.feather,
.phone svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.em-place u { text-underline-offset: calc(var(--pt) * 3); }
.em-vis svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }
.em-vis,
.em-host-label {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 9);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1.2);
  color: var(--em-ink-3);
}
.em-host {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  margin-top: calc(var(--pt) * 14);
}
.em-host img {
  width: calc(var(--pt) * 32);
  height: calc(var(--pt) * 32);
  border-radius: 50%;
  object-fit: cover;
}
.em-host-label { display: block; }
/* Guest preview: the label, then everyone going as an overlapping stack. */
.em-going { margin-top: calc(var(--pt) * 16); }
.em-going-label { font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 700; letter-spacing: calc(var(--pt) * 1.2); color: var(--em-ink-3); }
.em-faces { display: flex; margin-top: calc(var(--pt) * 10); }
.em-faces img { width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); flex-shrink: 0; border: 2px solid var(--em-page); border-radius: 50%; object-fit: cover; }
.em-faces img + img { margin-left: calc(var(--pt) * -9); }
.em-host-name {
  display: block;
  margin-top: calc(var(--pt) * 1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 15);
}

/* Round previews like the app's theme picker — a still of the real thing —
   and the picked one wears the rainbow ring, run between rainbowCircleStart/
   End so a circle keeps its red and pink ends (tokens.ts). */
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.2rem;
  margin-top: 2.25rem;
}
.theme-picker button {
  --ring: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 600 0.78rem var(--font-body);
  color: var(--muted);
}
.theme-picker button[aria-pressed="true"] {
  --ring: linear-gradient(to bottom right, #ff5a5f 15%, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b 85%);
  color: var(--ink);
}
.theme-picker i {
  width: 3.4rem;
  height: 3.4rem;
  padding: 3px;
  border-radius: 50%;
  background: var(--ring);
}
.theme-picker i::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--fill);
}
.theme-picker [data-theme="disco"] { --fill: url("assets/effects/disco-ball-0.png") 75% 0% / 95% no-repeat, radial-gradient(circle at 25% 75%, #ff2e93, transparent 55%), linear-gradient(135deg, #07020f, #1a0830); }
.theme-picker [data-theme="park"] { --fill: url("assets/effects/park-photo.jpg") 30% 42% / 200% auto; }
.theme-picker [data-theme="goldenHour"] { --fill: radial-gradient(circle at 30% 30%, #ffd27a, transparent 55%), radial-gradient(circle at 75% 72%, #ff7eb3, transparent 55%), linear-gradient(135deg, #ff9966, #ff5e62); }
.theme-picker [data-theme="aurora"] { --fill: radial-gradient(circle at 30% 30%, #1fe0a6, transparent 55%), radial-gradient(circle at 75% 72%, #7c4dff, transparent 55%), linear-gradient(135deg, #020b1c, #06213a); }
.theme-picker [data-theme="candy"] { --fill: radial-gradient(circle at 30% 30%, #ff9fcb, transparent 55%), radial-gradient(circle at 75% 72%, #a3e4ff, transparent 55%), linear-gradient(135deg, #ffd6ec, #dce3ff); }
.theme-picker [data-theme="lagoon"] { --fill: radial-gradient(circle at 30% 30%, #2fe0cf, transparent 55%), radial-gradient(circle at 75% 72%, #4c9dff, transparent 55%), linear-gradient(135deg, #06305a, #0d6fad); }
.theme-picker button:focus-visible { outline: 2px solid #3e7bd6; outline-offset: 3px; border-radius: 0.5rem; }

/* ---------- why ---------- */

.why .section-inner { max-width: 68rem; text-align: center; }
.why h2,
.how h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  max-width: 22ch;
  margin: 0 auto 3rem;
}
/* Three columns, no boxes: the feed's version quiet, ours loud, a short
   stroke of rainbow on top of each. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.why-item::before {
  content: "";
  width: 2.75rem;
  height: 0.3rem;
  margin-bottom: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b);
}
.why-them { font-size: 1rem; color: var(--muted); }
.why-us {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- how: the stories ----------
   Text beside its scene, sides alternating, straight on the sky. */

.how, .about, .contact { scroll-margin-top: 3.5rem; }
.how .section-inner { max-width: 68rem; padding-top: 2rem; }
.contact .section-inner { padding-top: 3rem; }
/* A review, as its author posted it: one card, centred. */
.review .section-inner { display: flex; justify-content: center; padding-top: 3rem; }
.review-card { width: min(22rem, 100%); height: auto; border-radius: 1.5rem; box-shadow: 0 24px 48px rgba(20, 19, 16, 0.25); }
.how h2 { text-align: center; margin-bottom: 1rem; }
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.show + .story { margin-top: 4.5rem; }
.story:nth-of-type(even) .story-copy { order: 2; }
.story-copy h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin-bottom: 0.8rem;
}
.story-copy p {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 30rem;
}

/* The space a scene plays in, sized by its scene. Its width is what the scene's
   app points are measured from: --pt is one point of a 375-wide phone screen
   drawn at the screen's width (23rem, or the whole box on a phone). */
.stage {
  --pt: calc(min(23rem, 100cqw) / 375);
  position: relative;
  container-type: inline-size;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  overflow: hidden;
}


/* ---------- the chapters' layouts ----------
   Wider than the text sections, and each chapter laid out its own way so the
   page isn't one long column: events = pitch beside the invitation, then the
   night and the day after side by side; the turn = a glass panel; hangouts =
   text · phone · steps; groups = phone · text with the features. */

.wide { max-width: 76rem; }
.ch-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.ch-invite { margin-top: 7rem; }

/* The turn: online isn't social — a frosted panel across the page. */
.why .section-inner { max-width: 76rem; }
.why-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
  padding: 3.5rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 2.2rem;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(40, 70, 120, 0.12);
  text-align: left;
}
.why-panel h2 { max-width: 13ch; margin: 0; }
.why-panel .why-grid { grid-template-columns: 1fr; gap: 1.6rem; }
.why-panel .why-item { align-items: flex-start; }
.why-panel .why-item::before { margin-bottom: 0.3rem; }

.ch-hangout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26rem minmax(0, 1fr);
  grid-template-areas: "copy stage steps";
  gap: 2.5rem;
  align-items: center;
}
.ch-hangout > .story-copy { grid-area: copy; }
.ch-hangout .story-copy h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }
.ch-hangout .story-copy p + p { margin-top: 0.7rem; }
.ch-hangout > .stage { grid-area: stage; }
.ch-hangout > .steps { grid-area: steps; }
.steps { display: flex; flex-direction: column; gap: 0.9rem; list-style: none; }
.step {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.3rem;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.step-n {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid #2fa84f;
  border-radius: 50%;
  background: #ffffff;
  color: #2a8a44;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.step > span > b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.step > span > span { display: block; margin-top: 0.2rem; font-size: 0.92rem; color: var(--muted); }

.ch-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  font-size: 0.92rem;
}
.chip i { font-style: normal; }
.how--more .section-inner { padding-top: 1rem; }
.ch-hangout + .ch-groups { margin-top: 7rem; }

@media (max-width: 64rem) {
  .ch-hangout { grid-template-columns: minmax(0, 1fr) 26rem; grid-template-areas: "copy stage" "steps stage"; }
}
@media (max-width: 56rem) {
  .ch-invite,
  .ch-groups,
  .why-panel { grid-template-columns: 1fr; }
  .ch-hangout { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "steps"; }
  .why-panel { text-align: center; }
  .why-panel h2 { max-width: none; text-align: center; }
  .why-panel .why-item { align-items: center; }
  .ch-groups > .story-copy { order: -1; }
  .ch-invite { margin-top: 4.5rem; }
}
@media (max-width: 40rem) {
  .why-panel { padding: 2rem 1.25rem; border-radius: 1.6rem; }
}

/* ---------- scene kit ----------
   Each story's scene plays when it scrolls into view and again when you come
   back (app.js adds .is-playing). A part with data-anim waits hidden, then
   comes in at its --d delay: plain (rises in), "pop" (springs in), "fade",
   "drop" (a photo landing) or "flash" (pops in at --d, gone again at --d2).
   A two-step scene's first screen is "panel-out" (leaves at --d2) and its
   second "panel-in" (arrives at --d). They move the translate/scale/rotate
   properties, never transform, so a part keeps its own tilt. Reduce Motion
   shows the finished scene: the second screen, everything in place. */

.js .stage [data-anim] { opacity: 0; }
.stage.is-playing [data-anim] { animation: anim-rise 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) var(--d, 0s) both; }
.stage.is-playing [data-anim="pop"] { animation: anim-pop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 0s) both; }
.stage.is-playing [data-anim="fade"] { animation: anim-fade 0.6s ease var(--d, 0s) both; }
.stage.is-playing [data-anim="drop"] { animation: anim-drop 0.65s cubic-bezier(0.3, 1.3, 0.5, 1) var(--d, 0s) both; }
.stage.is-playing [data-anim="flash"] {
  animation:
    anim-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 0s) both,
    anim-out 0.35s ease var(--d2, 999s) forwards;
}
.stage.is-playing [data-anim="panel-out"] { animation: anim-leave 0.5s ease var(--d2, 999s) both; }
.stage.is-playing [data-anim="panel-in"] { animation: anim-enter 0.5s ease var(--d, 0s) both; }
@keyframes anim-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes anim-pop { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes anim-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-drop {
  from { opacity: 0; translate: 0 -18px; scale: 1.15; rotate: var(--r, 0deg); }
  to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}
@keyframes anim-out { to { opacity: 0; scale: 0.6; } }
@keyframes anim-leave { from { opacity: 1; } to { opacity: 0; translate: -6% 0; visibility: hidden; } }
@keyframes anim-enter { from { opacity: 0; translate: 6% 0; } to { opacity: 1; translate: 0 0; } }

/* A finger press: a soft dot that swells and fades where the scene "taps". */
.tap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(26, 24, 20, 0.2);
  opacity: 0;
  pointer-events: none;
}
.stage.is-playing .tap { animation: anim-tap 0.5s ease-out var(--d, 0s) both; }
@keyframes anim-tap {
  0% { opacity: 0; scale: 0.4; }
  30% { opacity: 1; }
  100% { opacity: 0; scale: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .js .stage [data-anim] { opacity: 1; }
  .js .stage [data-anim="flash"],
  .js .stage [data-anim="panel-out"] { opacity: 0; visibility: hidden; }
}

/* ---------- the app screens in the stories ----------
   Each scene is a stretch of a real app screen, drawn from the app's own
   styles in app points: --pt is one point of a 375-wide phone, so a number
   here is the number in the app's code (or measured off a screenshot). */

.screen {
  position: relative;
  width: min(23rem, 100%);
  text-align: left;
}
/* A two-step scene: both screens in the same spot, the second taking over. */
.screen--panels { display: grid; }
.screen--panels > .panel { grid-area: 1 / 1; min-width: 0; }
.panel {
  overflow: hidden;
  border-radius: calc(var(--pt) * 26);
  background: #faf7f2;
  color: #1a1814;
  padding: calc(var(--pt) * 20);
  box-shadow: 0 18px 40px rgba(20, 19, 16, 0.14);
}

/* ---------- 1. an event page, as a screen recording ----------
   Measured off HC's screenshots of a real event on the Disco look (a 390pt
   wide iPhone): the phone is 390pt inside a 7pt bezel, so --pt here is one of
   those points. Status bar and home indicator left out. */

.stage--phone { --pt: calc(min(23rem, 100cqw) / 404); }
.phone {
  --em-ink: #ffffff;
  --em-ink-2: rgba(255, 255, 255, 0.82);
  --em-ink-3: rgba(255, 255, 255, 0.55);
  position: relative;
  width: calc(var(--pt) * 404);
  height: calc(var(--pt) * 720);
  overflow: hidden;
  isolation: isolate;
  border: calc(var(--pt) * 7) solid #0e0d0c;
  border-radius: calc(var(--pt) * 52);
  transform: translateZ(0);
  background: #12062a;
  color: #ffffff;
  text-align: left;
  box-shadow: 0 24px 50px rgba(20, 19, 16, 0.3);
}
.ep-bg { position: absolute; inset: 0; z-index: -1; }

/* The page scrolls up until the tabs reach the header (app.js measures how far
   into --scroll), then stays; the tabs' content swaps under them. */
.ep-scroll { position: relative; }
.stage.is-playing .ep-scroll { animation: ep-scroll 1s cubic-bezier(0.45, 0, 0.2, 1) 1.8s both; }
@keyframes ep-scroll { from { translate: 0 0; } to { translate: 0 var(--scroll, 0px); } }

.ep-title {
  padding: calc(var(--pt) * 58) calc(var(--pt) * 20) calc(var(--pt) * 20);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 30);
  line-height: calc(var(--pt) * 34);
  letter-spacing: calc(var(--pt) * -0.8);
}
.ep-cover { position: relative; width: calc(var(--pt) * 300); margin: 0 auto calc(var(--pt) * 40); }
.ep-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--pt) * 16);
}
.ep-info { padding: 0 calc(var(--pt) * 20); }
.ep-desc {
  margin-top: calc(var(--pt) * 22);
  font-size: calc(var(--pt) * 16);
  line-height: calc(var(--pt) * 22);
  color: rgba(255, 255, 255, 0.92);
}
.ep-more {
  display: inline-block;
  margin-top: calc(var(--pt) * 4);
  font-size: calc(var(--pt) * 16);
  font-weight: 600;
  text-underline-offset: calc(var(--pt) * 3);
}

/* Tabs: four even columns, an icon over a mono label; the picked one white
   with a white bar under it, the rest at half. */
.ep-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: calc(var(--pt) * 26);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.ep-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 12) 0 calc(var(--pt) * 14);
  color: rgba(255, 255, 255, 0.5);
}
.ep-tab svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); stroke-width: 1.8; }
.ep-tab b {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11.5);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 2);
}
.ep-tab--general { color: #ffffff; }
.ep-tabline {
  position: absolute;
  bottom: -1px;
  left: calc(25% + var(--pt) * 15);
  width: calc(25% - var(--pt) * 30);
  height: calc(var(--pt) * 3);
  background: #ffffff;
}
.stage.is-playing .ep-tab--general { animation: ep-tab-off 0.25s ease 5s forwards; }
.stage.is-playing .ep-tab--feed { animation: ep-tab-on 0.25s ease 5s forwards, ep-tab-off 0.25s ease 10.4s forwards; }
.stage.is-playing .ep-tab--tasks { animation: ep-tab-on 0.25s ease 10.4s forwards; }
.stage.is-playing .ep-tabline { animation: ep-line-feed 0.35s ease 5s forwards, ep-line-tasks 0.35s ease 10.4s forwards; }
@keyframes ep-tab-on { from { color: rgba(255, 255, 255, 0.5); } to { color: #ffffff; } }
@keyframes ep-tab-off { from { color: #ffffff; } to { color: rgba(255, 255, 255, 0.5); } }
@keyframes ep-line-feed { from { left: calc(25% + var(--pt) * 15); } to { left: calc(var(--pt) * 15); } }
@keyframes ep-line-tasks { from { left: calc(var(--pt) * 15); } to { left: calc(50% + var(--pt) * 15); } }
.ep-tap { inset: auto; left: calc(50% - var(--pt) * 24); top: calc(50% - var(--pt) * 24); width: calc(var(--pt) * 48); height: calc(var(--pt) * 48); background: rgba(255, 255, 255, 0.35); }
.ep-tap--left { left: calc(var(--pt) * 40); }

.ep-panels { display: grid; }
.ep-panels > .ep-panel { grid-area: 1 / 1; min-width: 0; padding: 0 calc(var(--pt) * 20); }
.stage.is-playing [data-anim="tab-out"] { animation: anim-tab 0.25s ease var(--d2, 999s) reverse both; }
.stage.is-playing [data-anim="tab-in"] { animation: anim-tab 0.25s ease var(--d, 0s) both; }
.stage.is-playing [data-anim="tab-inout"] {
  animation:
    anim-tab 0.25s ease var(--d, 0s) both,
    anim-tab 0.25s ease var(--d2, 999s) reverse forwards;
}
@keyframes anim-tab { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* GENERAL */
.ep-label {
  margin-top: calc(var(--pt) * 16);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 2);
  color: rgba(255, 255, 255, 0.55);
}
.ep-label--strong { color: #ffffff; }
/* Dresscode (DresscodeModule): the label, then the text, under the faces. */
.ep-dress { margin-top: calc(var(--pt) * 4); font-size: calc(var(--pt) * 14); line-height: calc(var(--pt) * 20); color: #ffffff; }
.ep-faces { display: flex; margin-top: calc(var(--pt) * 12); }
.ep-faces > * {
  flex-shrink: 0;
  width: calc(var(--pt) * 50);
  height: calc(var(--pt) * 50);
  border: 2px solid #1b0f33;
  border-radius: 50%;
  object-fit: cover;
}
.ep-faces > * + * { margin-left: calc(var(--pt) * -14); }
.ep-label-row { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--pt) * 22); }
.ep-label-row .ep-label { margin-top: 0; }
.ep-edit { display: flex; align-items: center; gap: calc(var(--pt) * 6); color: rgba(255, 255, 255, 0.6); font-size: calc(var(--pt) * 15); }
.ep-edit svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }
.ep-program {
  margin-top: calc(var(--pt) * 12);
  padding: 0 calc(var(--pt) * 15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--pt) * 16);
  background: rgba(255, 255, 255, 0.07);
}
.ep-prog-row {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 22);
  padding: calc(var(--pt) * 14) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ep-prog-row:first-child { border-top: 0; }
.ep-prog-row > b {
  width: calc(var(--pt) * 42);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 13);
  font-weight: 700;
}
.ep-prog-row > b small { display: block; margin-top: calc(var(--pt) * 2); font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.ep-prog-row strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--pt) * 16); }
.ep-prog-row em { display: block; margin-top: calc(var(--pt) * 2); font-style: normal; font-size: calc(var(--pt) * 14.5); color: rgba(255, 255, 255, 0.68); }

/* FEED */
.ep-composer {
  margin-top: calc(var(--pt) * 22);
  padding: calc(var(--pt) * 16) 0 calc(var(--pt) * 14);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.ep-compose-text {
  position: relative;
  display: grid;
  min-height: calc(var(--pt) * 44);
  font-size: calc(var(--pt) * 16);
  line-height: calc(var(--pt) * 22);
}
.ep-compose-text > * { grid-area: 1 / 1; }
.ep-placeholder { color: rgba(255, 255, 255, 0.55); }
.ep-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: #ffffff;
  animation: ep-caret 1s steps(1) infinite;
}
@keyframes ep-caret { 50% { opacity: 0; } }
.ep-compose-row { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--pt) * 12); }
.ep-media { display: flex; align-items: center; gap: calc(var(--pt) * 8); font-family: var(--font-mono); font-size: calc(var(--pt) * 13); font-weight: 600; }
.ep-media svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
/* "Post": a soft see-through pill, livelier once there's something to post. */
.ep-post-btn {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--pt) * 33);
  padding: 0 calc(var(--pt) * 18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: rgba(40, 24, 66, 0.75);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--pt) * 15);
}
.stage.is-playing .ep-post-btn { animation: ep-post-live 0.3s ease 5.7s forwards, ep-post-live 0.3s ease 8.65s reverse forwards; }
@keyframes ep-post-live { from { background: rgba(255, 255, 255, 0.25); color: rgba(40, 24, 66, 0.75); } to { background: rgba(255, 255, 255, 0.9); color: #281842; } }
/* The new post opens room for itself above the older one. */
.ep-new { display: grid; grid-template-rows: 0fr; }
.ep-new > div { overflow: hidden; }
.stage.is-playing .ep-new { animation: ep-grow 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) 8.65s forwards; }
@keyframes ep-grow { to { grid-template-rows: 1fr; } }
.ep-post { padding: calc(var(--pt) * 16) 0 calc(var(--pt) * 4); }
.ep-post-head { display: flex; align-items: center; gap: calc(var(--pt) * 10); }
.ep-post-head img { width: calc(var(--pt) * 36); height: calc(var(--pt) * 36); border-radius: 50%; object-fit: cover; }
.ep-post-head > span:nth-child(2) { flex: 1; }
.ep-post-head b { display: block; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--pt) * 16); }
.ep-post-head small { display: block; font-family: var(--font-mono); font-size: calc(var(--pt) * 12); color: rgba(255, 255, 255, 0.55); }
.ep-post-icons { display: flex; gap: calc(var(--pt) * 14); color: rgba(255, 255, 255, 0.6); }
.ep-post-icons svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.ep-post-text { margin-top: calc(var(--pt) * 10); font-size: calc(var(--pt) * 16); line-height: calc(var(--pt) * 22); }

/* TASKS: the shift card runs almost edge to edge on the page. */
.ep-panel:last-child { padding: 0 calc(var(--pt) * 1); }
.ep-card {
  margin-top: calc(var(--pt) * 14);
  padding: calc(var(--pt) * 20) calc(var(--pt) * 19);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--pt) * 20);
  background: rgba(255, 255, 255, 0.07);
}
.ep-card + .ep-card { margin-top: calc(var(--pt) * 10); }
.ep-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ep-card-title { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 22); letter-spacing: calc(var(--pt) * -0.5); line-height: 1.15; }
.ep-card-meta { margin-top: calc(var(--pt) * 3); font-family: var(--font-mono); font-size: calc(var(--pt) * 11); letter-spacing: calc(var(--pt) * 0.8); color: rgba(255, 255, 255, 0.6); }
.ep-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--pt) * 6); color: rgba(255, 255, 255, 0.6); }
.ep-card-right svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }
.ep-count { display: grid; justify-items: end; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 18); color: #ffffff; white-space: nowrap; }
.ep-count > * { grid-area: 1 / 1; }
.ep-bar-track { height: calc(var(--pt) * 6); margin-top: calc(var(--pt) * 14); overflow: hidden; border-radius: calc(var(--pt) * 3); background: rgba(255, 255, 255, 0.22); }
.ep-bar-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b);
}
.stage.is-playing .ep-bar-track i { animation: ep-bar 3.36s steps(8, jump-start) 11s both; }
@keyframes ep-bar { from { width: 11.1%; } to { width: 100%; } }
.ep-row { display: flex; margin-top: calc(var(--pt) * 14); }
.ep-time { width: calc(var(--pt) * 58); padding-top: calc(var(--pt) * 6); }
.ep-time b,
.ep-time span { display: block; font-family: var(--font-mono); }
.ep-time b { font-size: calc(var(--pt) * 13); font-weight: 700; }
.ep-time span { margin-top: calc(var(--pt) * 2); font-size: calc(var(--pt) * 11); letter-spacing: calc(var(--pt) * 0.8); color: rgba(255, 255, 255, 0.6); }
.ep-spots { flex: 1; display: flex; justify-content: center; gap: calc(var(--pt) * 8); }
.ep-spot { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--pt) * 52); }
.ep-spot > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 46);
  height: calc(var(--pt) * 46);
  border: 1.5px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  font-style: normal;
}
.ep-spot > i::before { content: "+"; font-size: calc(var(--pt) * 20); font-weight: 300; line-height: 1; color: rgba(255, 255, 255, 0.85); }
.ep-spot > img {
  position: absolute;
  top: 0;
  width: calc(var(--pt) * 46);
  height: calc(var(--pt) * 46);
  border-radius: 50%;
  object-fit: cover;
}
.ep-spot--mine > img {
  position: static;
  padding: calc(var(--pt) * 3);
  background: linear-gradient(to bottom right, #ff5a5f 15%, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b 85%);
}
.ep-spot > em {
  min-height: calc(var(--pt) * 14);
  margin-top: calc(var(--pt) * 4);
  font-style: normal;
  font-size: calc(var(--pt) * 11);
  color: rgba(255, 255, 255, 0.75);
}
.ep-spot--mine > em { font-weight: 800; color: #ffffff; }
.ep-task { display: flex; align-items: center; gap: calc(var(--pt) * 10); min-height: calc(var(--pt) * 44); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.ep-card-head + .ep-task { margin-top: calc(var(--pt) * 8); border-top: 0; }
.ep-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 18);
  height: calc(var(--pt) * 18);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}
.ep-tick i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 18);
  height: calc(var(--pt) * 18);
  border-radius: 50%;
  background: #609d69;
  font-style: normal;
  font-size: calc(var(--pt) * 11);
  font-weight: 700;
}
.ep-task-name { flex: 1; font-size: calc(var(--pt) * 15); font-weight: 600; }
.ep-task img { width: calc(var(--pt) * 28); height: calc(var(--pt) * 28); border-radius: 50%; object-fit: cover; }

/* The header floating over the page: a round back button, a see-through pill
   with share and more; the title joins once the page has scrolled. */
.ep-topbar {
  position: absolute;
  top: calc(var(--pt) * 10);
  left: calc(var(--pt) * 20);
  right: calc(var(--pt) * 20);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
}
.ep-round,
.ep-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--pt) * 36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ep-round { width: calc(var(--pt) * 36); }
.ep-round svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
.ep-pill { gap: calc(var(--pt) * 14); padding: 0 calc(var(--pt) * 16); }
.ep-pill svg { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); }
.ep-pill i { width: 1px; height: calc(var(--pt) * 18); background: rgba(255, 255, 255, 0.35); }
.ep-mini-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 17);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
}
.stage.is-playing .ep-mini-title { animation: anim-fade 0.3s ease 2.6s both; }
/* From the scroll on, the header is frosted: what passes under it blurs and
   dims, and both fade out towards the tabs, so there is no edge. */
[data-scene="party"] .phone::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--pt) * 56);
  background: linear-gradient(rgba(18, 6, 42, 0.6), rgba(18, 6, 42, 0));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
  opacity: 0;
}
.ep-topbar { z-index: 2; }
.stage.is-playing[data-scene="party"] .phone::before { animation: anim-fade 0.5s ease 1.8s both; }

.ep-nav {
  position: absolute;
  z-index: 2;
  left: calc(var(--pt) * 22);
  right: calc(var(--pt) * 22);
  bottom: calc(var(--pt) * 14);
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: calc(var(--pt) * 54);
  border-radius: 999px;
  background: rgba(40, 26, 56, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.9);
}
.ep-nav > svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); stroke-width: 1.8; }
.ep-nav-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 42);
  height: calc(var(--pt) * 42);
  border-radius: calc(var(--pt) * 12);
  background: #141310;
}
.ep-nav-plus svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }

@media (prefers-reduced-motion: reduce) {
  .ep-scroll { translate: 0 var(--scroll, 0px); }
  .ep-mini-title,
  [data-scene="party"] .phone::before { opacity: 1; }
  .ep-tab--general { color: rgba(255, 255, 255, 0.5); }
  .ep-tab--tasks { color: #ffffff; }
  .ep-tabline { left: calc(50% + var(--pt) * 15); }
  .js .stage [data-anim="tab-out"],
  .js .stage [data-anim="tab-inout"] { opacity: 0; visibility: hidden; }
  .ep-new { grid-template-rows: 1fr; }
}

/* ---------- 3. a hangout, as a screen recording ----------
   Measured off HC's screenshots (2026-10-28): the dark create screen, the
   home row, the hangout sheet, the hangout chat. Same phone as scene 1. */

/* The pill above the phone that says what just happened. */
.stage--count { flex-direction: column; align-items: center; gap: 1rem; }
.hg-count {
  display: grid;
  justify-items: center;
  min-height: 2.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  text-align: center;
}
.hg-count > * {
  grid-area: 1 / 1;
  align-self: center;
  padding: 0.55rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(to bottom right, #ff5a5f1a, #ff8a3d1a, #e8a4001a, #2fa84f1a, #1e9be01a, #7e57c21a, #ff4d8b1a) padding-box,
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(to bottom right, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b) border-box;
  box-shadow: 0 8px 22px rgba(126, 87, 194, 0.2);
  white-space: nowrap;
}
.hg-count b { font-weight: 900; }

.phone--light { background: #faf7f2; color: #1a1814; }
/* The four screens stacked in the phone; each takes over from the last. */
.hp { position: absolute; inset: 0; overflow: hidden; }
.stage.is-playing [data-anim="hp-out"] { animation: hp-away 0.45s cubic-bezier(0.5, 0, 0.75, 0) var(--d2, 999s) both; }
.stage.is-playing [data-anim="hp-inout"] {
  animation:
    anim-tab 0.35s ease var(--d, 0s) both,
    anim-tab 0.3s ease var(--d2, 999s) reverse forwards;
}
.stage.is-playing [data-anim="hp-zoom"] { animation: hp-zoom 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) var(--d, 0s) both; }
@keyframes hp-away { from { opacity: 1; } to { opacity: 0; scale: 0.9; visibility: hidden; } }
@keyframes hp-zoom { from { opacity: 0; scale: 0.6; visibility: hidden; } to { opacity: 1; scale: 1; visibility: visible; } }

/* 1 · create: a starry night, white type, rainbow progress. */
.hp--create {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1px 1px at 12% 20%, #fff8, transparent),
    radial-gradient(1px 1px at 70% 12%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 40% 44%, #fff5, transparent),
    radial-gradient(1px 1px at 88% 60%, #fff6, transparent),
    radial-gradient(1px 1px at 22% 78%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 60% 90%, #fff4, transparent),
    linear-gradient(#0d1424, #131b2e);
  color: #ffffff;
}
.hc-top { display: flex; align-items: center; gap: calc(var(--pt) * 12); padding: calc(var(--pt) * 14) calc(var(--pt) * 18) 0; }
.hc-top b { display: block; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 22); letter-spacing: calc(var(--pt) * -0.5); line-height: 1.1; }
.hc-top small { display: block; font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 600; letter-spacing: calc(var(--pt) * 1.5); color: rgba(255, 255, 255, 0.6); }
.hp--create .ep-round { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.hc-progress {
  display: block;
  height: calc(var(--pt) * 3);
  margin: calc(var(--pt) * 14) calc(var(--pt) * 18) 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b);
}
.hc-view { flex: 1; overflow: hidden; }
.hc-scroll { padding: 0 calc(var(--pt) * 18) calc(var(--pt) * 20); }
.stage.is-playing .hc-scroll { animation: ep-scroll 0.9s cubic-bezier(0.45, 0, 0.2, 1) 2.35s both; }
.hc-label {
  margin-top: calc(var(--pt) * 22);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 600;
  letter-spacing: calc(var(--pt) * 1.5);
  color: rgba(255, 255, 255, 0.6);
}
.hc-name {
  display: grid;
  margin-top: calc(var(--pt) * 10);
  padding-bottom: calc(var(--pt) * 12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 27);
  letter-spacing: calc(var(--pt) * -0.6);
  line-height: 1.15;
}
.hc-name > *,
.hc-input > * { grid-area: 1 / 1; }
.hc-ph { color: rgba(255, 255, 255, 0.35); }
.hc-cover-wrap { position: relative; display: grid; width: calc(var(--pt) * 158); margin: calc(var(--pt) * 14) auto 0; }
.hc-cover-wrap > .hc-cover { grid-area: 1 / 1; margin: 0; }
.hc-cover.hc-cover--photo { justify-content: flex-end; padding-bottom: calc(var(--pt) * 14); background: url("assets/hangouts/harbour.jpg") center / cover; }
.hc-change {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 4) calc(var(--pt) * 10);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-weight: 700;
}
.hc-change svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.hc-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 8);
  width: calc(var(--pt) * 158);
  height: calc(var(--pt) * 158);
  margin: calc(var(--pt) * 14) auto 0;
  padding: calc(var(--pt) * 24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11);
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.hc-cover svg { width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); color: rgba(255, 255, 255, 0.75); }
.hc-input {
  display: grid;
  align-items: center;
  height: calc(var(--pt) * 54);
  margin-top: calc(var(--pt) * 10);
  padding: 0 calc(var(--pt) * 16);
  border-radius: calc(var(--pt) * 12);
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(var(--pt) * 16);
}
.hc-days { display: flex; gap: calc(var(--pt) * 8); margin-top: calc(var(--pt) * 10); overflow: hidden; }
.hc-days > span {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--pt) * 74);
  height: calc(var(--pt) * 50);
  padding: 0 calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 12);
  background: rgba(255, 255, 255, 0.1);
}
.hc-days > .is-on { background: #ffffff; color: #1a1814; }
.hc-days b { font-size: calc(var(--pt) * 14); }
.hc-days small { font-family: var(--font-mono); font-size: calc(var(--pt) * 10); opacity: 0.7; }
.hc-time {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 12);
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: calc(var(--pt) * 16);
}
.hc-time svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }
.hc-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 3);
  border-radius: calc(var(--pt) * 12);
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(var(--pt) * 14);
  font-weight: 700;
  text-align: center;
}
.hc-seg > span:not(.tap) { position: relative; z-index: 1; padding: calc(var(--pt) * 10) 0; color: rgba(255, 255, 255, 0.55); }
.hc-seg > span:first-child { color: #ffffff; }
.hc-seg > i {
  position: absolute;
  top: calc(var(--pt) * 3);
  bottom: calc(var(--pt) * 3);
  left: calc(var(--pt) * 3);
  width: calc(50% - var(--pt) * 3);
  border-radius: calc(var(--pt) * 10);
  background: #1b2133;
}
.hc-tap-seg { left: calc(75% - var(--pt) * 24); }
.stage.is-playing .hc-seg > i { animation: hc-seg 0.3s ease 3.4s forwards; }
.stage.is-playing .hc-seg > span:first-child { animation: ep-tab-off 0.3s ease 3.4s forwards; }
.stage.is-playing .hc-seg > span:nth-child(2) { animation: ep-tab-on 0.3s ease 3.4s forwards; }
@keyframes hc-seg { to { left: 50%; } }
.hc-list { display: grid; margin-top: calc(var(--pt) * 6); }
.hc-list > * { grid-area: 1 / 1; }
.hc-row {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 14);
  min-height: calc(var(--pt) * 62);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hc-row img,
.hc-star { width: calc(var(--pt) * 42); height: calc(var(--pt) * 42); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hc-star { display: flex; align-items: center; justify-content: center; background: #f06a5a; font-size: calc(var(--pt) * 18); }
.hc-row > span:not(.hc-star) { flex: 1; }
.hc-row b { display: block; font-size: calc(var(--pt) * 16); }
.hc-row small { display: block; font-family: var(--font-mono); font-size: calc(var(--pt) * 11); color: rgba(255, 255, 255, 0.55); }
.hc-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 22);
  height: calc(var(--pt) * 22);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: calc(var(--pt) * 5);
  font-style: normal;
}
.hc-check b {
  position: absolute;
  inset: -1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--pt) * 5);
  background: #ffffff;
  color: #131b2e;
  font-size: calc(var(--pt) * 13) !important;
}
.hc-welcomed { margin-top: calc(var(--pt) * 12); font-family: var(--font-mono); font-size: calc(var(--pt) * 11.5); color: rgba(255, 255, 255, 0.75); }
.hc-buttons { display: flex; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 10) calc(var(--pt) * 18) calc(var(--pt) * 18); }
.hc-back,
.hc-start {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--pt) * 50);
  border-radius: calc(var(--pt) * 16);
  font-weight: 800;
  font-size: calc(var(--pt) * 16);
}
.hc-back { width: calc(var(--pt) * 116); background: rgba(255, 255, 255, 0.1); }
.hc-start { flex: 1; background: #ececec; color: #1a1814; }
.hc-start .ep-tap { background: rgba(26, 24, 20, 0.2); }

/* 2 · home: logo bar, the hangout row, today's card. */
.hp--home { background: #faf7f2; }
.hh-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--pt) * 14) calc(var(--pt) * 22) 0; color: #1a1814; }
.hh-top svg { width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); stroke-width: 1.7; }
.hh-top img { height: calc(var(--pt) * 32); width: auto; }
.hh-label { margin-top: calc(var(--pt) * 16); padding: 0 calc(var(--pt) * 16); font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 600; letter-spacing: calc(var(--pt) * 0.3); color: #8a857d; }
.hh-rail { display: flex; margin-top: calc(var(--pt) * 6); }
/* ITEM_W = a quarter of the screen; the circle is 20pt smaller (HangoutStories.tsx). */
.hh-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: calc(var(--pt) * 97.5); }
.hh-item small { margin-top: calc(var(--pt) * 4); font-family: var(--font-mono); font-size: calc(var(--pt) * 9.5); color: #8a857d; white-space: nowrap; }
.hh-item small.hh-live { color: #3c9a4e; font-weight: 700; }
.hh-add,
.hh-circle { width: calc(var(--pt) * 77.5); height: calc(var(--pt) * 77.5); margin: calc(var(--pt) * 10) 0; border-radius: 50%; }
.hh-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed #b8b2a7; color: #4a4641; font-size: calc(var(--pt) * 24); font-weight: 300; }
.hh-circle { position: relative; background: var(--img) center / cover; }
.hh-ring { position: absolute; inset: calc(var(--pt) * -5); border-radius: 50%; border: calc(var(--pt) * 2.5) solid #dcd5c7; }
.hh-ring--live { border-color: #43c55e; }
.stage.is-playing .hh-ring--live { animation: hh-live 1.6s ease-in-out infinite alternate; }
@keyframes hh-live { from { opacity: 0.45; } }
.hh-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--pt) * 6);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 10);
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}
.hh-arc { position: absolute; top: calc(var(--pt) * -11); left: 0; right: 0; display: flex; justify-content: center; }
.hh-arc > * {
  width: calc(var(--pt) * 20);
  height: calc(var(--pt) * 20);
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  object-fit: cover;
}
/* Stacked like the app's rim: each overlaps the last by a fifth. */
.hh-arc > * + * { margin-left: calc(var(--pt) * -4); }
.hh-arc b { display: flex; align-items: center; justify-content: center; background: #ffffff; font-family: var(--font-mono); font-size: calc(var(--pt) * 8); font-weight: 800; }
/* The new hangout whooshes onto the row. */
.js .stage .hh-item--new { opacity: 0; }
.stage.is-playing .hh-item--new { animation: hh-whoosh 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.05) 6.45s both; }
@keyframes hh-whoosh {
  0% { opacity: 0; translate: calc(var(--pt) * 90) calc(var(--pt) * 260); scale: 2.4; filter: blur(4px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.hh-greet { margin-top: calc(var(--pt) * 20); font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 20); letter-spacing: calc(var(--pt) * -0.5); text-align: center; }
.hh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 250);
  height: calc(var(--pt) * 250);
  margin: calc(var(--pt) * 16) auto 0;
  overflow: hidden;
  border-radius: calc(var(--pt) * 22);
  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35)), var(--img) center / cover;
  color: #ffffff;
}
.hh-card b { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 24); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.hh-card small { margin-top: calc(var(--pt) * 6); font-family: var(--font-mono); font-size: calc(var(--pt) * 12); font-weight: 600; letter-spacing: calc(var(--pt) * 1.4); }
.hh-card-top { position: absolute; top: calc(var(--pt) * 12); left: calc(var(--pt) * 12); display: flex; align-items: center; gap: calc(var(--pt) * 8); font-family: var(--font-mono); font-size: calc(var(--pt) * 12); font-weight: 600; }
.hh-card-top img { width: calc(var(--pt) * 28); height: calc(var(--pt) * 28); border: 2px solid #ffffff; border-radius: 50%; object-fit: cover; }
/* The push: an iOS banner dropping in from the top. */
.hh-push {
  position: absolute;
  z-index: 3;
  top: calc(var(--pt) * 8);
  left: calc(var(--pt) * 10);
  right: calc(var(--pt) * 10);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 14) calc(var(--pt) * 11) calc(var(--pt) * 11);
  border-radius: calc(var(--pt) * 22);
  background: rgba(246, 245, 243, 0.94);
  box-shadow: 0 calc(var(--pt) * 10) calc(var(--pt) * 30) rgba(0, 0, 0, 0.18);
  font-size: calc(var(--pt) * 14);
  line-height: 1.3;
}
.hh-push img { width: calc(var(--pt) * 38); height: calc(var(--pt) * 38); border-radius: calc(var(--pt) * 9); }
.hh-push > span { flex: 1; }
.hh-push b { display: block; font-weight: 700; }
.hh-push small { align-self: flex-start; font-size: calc(var(--pt) * 12); color: #8a857d; }
.stage.is-playing [data-anim="push"] {
  animation:
    toast-move 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) var(--d) both,
    toast-move 0.4s ease-in var(--d2, 999s) reverse forwards;
}

/* 3 · the hangout sheet. */
.hs-dim { position: absolute; z-index: 3; inset: 0; background: rgba(26, 24, 20, 0.45); }
.hs-sheet {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--pt) * 10) calc(var(--pt) * 22) calc(var(--pt) * 28);
  border-radius: calc(var(--pt) * 28) calc(var(--pt) * 28) 0 0;
  background: #f6f2ec;
}
.stage.is-playing [data-anim="sheet"] {
  animation:
    hs-up 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) var(--d) both,
    hs-grow 0.45s cubic-bezier(0.5, 0, 0.75, 0) var(--d2, 999s) forwards;
}
@keyframes hs-up { from { opacity: 1; translate: 0 100%; visibility: hidden; } to { opacity: 1; translate: 0 0; visibility: visible; } }
@keyframes hs-grow { from { opacity: 1; } to { opacity: 0; scale: 1.25; visibility: hidden; } }
.hs-grab { width: calc(var(--pt) * 36); height: calc(var(--pt) * 5); border-radius: 3px; background: #d8d2c6; }
.hs-chat {
  position: absolute;
  top: calc(var(--pt) * 16);
  right: calc(var(--pt) * 16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 40);
  height: calc(var(--pt) * 40);
  border: 1px solid #dcd5c7;
  border-radius: 50%;
  background: #ffffff;
}
.hs-chat svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
.hs-circle {
  width: calc(var(--pt) * 152);
  height: calc(var(--pt) * 152);
  margin-top: calc(var(--pt) * 26);
  border-radius: 50%;
  background: url("assets/hangouts/harbour.jpg") center / cover;
  box-shadow: 0 0 0 calc(var(--pt) * 6) #f6f2ec, 0 0 0 calc(var(--pt) * 8) #e4ddd0;
}
.hs-title { margin-top: calc(var(--pt) * 20); font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 23); letter-spacing: calc(var(--pt) * -0.5); }
.hs-when,
.hs-going { font-family: var(--font-mono); font-size: calc(var(--pt) * 11.5); letter-spacing: calc(var(--pt) * 1.4); color: #8a857d; }
.hs-when { margin-top: calc(var(--pt) * 4); }
.hs-going { margin-top: calc(var(--pt) * 20); }
.hs-faces { display: flex; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 10); }
.hs-faces > span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pt) * 6); }
.hs-faces img { width: calc(var(--pt) * 46); height: calc(var(--pt) * 46); border-radius: 50%; object-fit: cover; }
.hs-faces em { font-style: normal; font-size: calc(var(--pt) * 11); color: #8a857d; }
.hs-btn {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  height: calc(var(--pt) * 54);
  margin-top: calc(var(--pt) * 22);
  border: 2px solid #4f9e55;
  border-radius: calc(var(--pt) * 16);
  background: #e5f2e6;
  color: #2f7d39;
  font-weight: 800;
  font-size: calc(var(--pt) * 18);
}
.hs-btn > span:not(.tap) { grid-area: 1 / 1; }
.hs-btn .ep-tap { background: rgba(47, 125, 57, 0.25); }

/* 4 · the hangout chat, on its cover blurred. */
.hp--chat { display: flex; flex-direction: column; }
.ht-bg { position: absolute; z-index: -1; inset: -20px; background: linear-gradient(rgba(250, 247, 242, 0.5), rgba(250, 247, 242, 0.5)), url("assets/hangouts/harbour.jpg") center / cover; filter: blur(16px); }
.ht-head { display: flex; align-items: flex-start; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 14) calc(var(--pt) * 16) 0; }
.hp--chat .ep-round { background: rgba(255, 255, 255, 0.45); color: #1a1814; }
.ht-head-text { flex: 1; min-width: 0; }
.ht-head-text b { display: block; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 18); white-space: nowrap; text-overflow: ellipsis; }
.ht-head-text small,
.ht-head-text u { display: block; font-size: calc(var(--pt) * 13); color: #4a4641; }
.ht-head-text u { text-underline-offset: 2px; }
.ht-in {
  flex-shrink: 0;
  margin-top: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 7) calc(var(--pt) * 12);
  border: 2px solid #4f9e55;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: #2f7d39;
  font-weight: 800;
  font-size: calc(var(--pt) * 13);
  white-space: nowrap;
}
.ht-people { display: flex; align-items: flex-start; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 14); padding: 0 calc(var(--pt) * 14); }
/* More people than fit: the row runs on under the + (it scrolls in the app). */
.ht-people-row { flex: 1; min-width: 0; display: flex; gap: calc(var(--pt) * 10); overflow: hidden; }
.ht-slot { overflow: hidden; }
.js .stage .ht-slot { width: 0; margin-left: calc(var(--pt) * -10); opacity: 0; }
.stage.is-playing .ht-slot { animation: ht-slot 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) var(--d) forwards; }
@keyframes ht-slot { to { width: calc(var(--pt) * 52); margin-left: 0; opacity: 1; } }
.ht-people-row > span,
.ht-people > .ht-add { flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--pt) * 4); width: calc(var(--pt) * 52); }
.ht-people img { width: calc(var(--pt) * 48); height: calc(var(--pt) * 48); border-radius: 50%; object-fit: cover; }
.ht-people em { font-style: normal; font-size: calc(var(--pt) * 11.5); color: #4a4641; }
.ht-crown { position: absolute; top: 0; right: calc(var(--pt) * 2); width: calc(var(--pt) * 9); height: calc(var(--pt) * 9); border-radius: 50%; background: #f5c000; box-shadow: 0 0 0 1.5px #ffffff; }
.ht-people .ht-add {
  flex-shrink: 0;
  margin-left: auto;
  width: calc(var(--pt) * 44);
  height: calc(var(--pt) * 44);
  justify-content: center;
  border: calc(var(--pt) * 2.5) solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(to bottom right, #ff5a5f 15%, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b 85%) border-box;
  font-size: calc(var(--pt) * 22);
  line-height: 1;
}
/* Messages arrive at the bottom and push the older ones up. Everything below
   is components/chat/ChatView.tsx in app points: list padding 12, 4 between
   messages and 8 more where the speaker changes; the name (mono 10) over the
   first of a run, the 28pt avatar beside the last; bubbles 14/19 text, 78%
   wide at most. */
.ht-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; padding: 0 calc(var(--pt) * 12) calc(var(--pt) * 4); }
.ht-msg { display: grid; grid-template-rows: 0fr; opacity: 0; }
.ht-msg > div { overflow: hidden; padding-top: calc(var(--pt) * 4); }
.ht-msg--gap > div { padding-top: calc(var(--pt) * 12); }
.stage.is-playing .ht-msg { animation: ht-in 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) var(--d) forwards; }
@keyframes ht-in { to { grid-template-rows: 1fr; opacity: 1; } }
.ht-time { padding: calc(var(--pt) * 5) 0; font-family: var(--font-display); font-size: calc(var(--pt) * 11); line-height: calc(var(--pt) * 14); font-weight: 600; color: #8a857d; text-align: center; }
.ht-from { margin: 0 0 calc(var(--pt) * 3) calc(var(--pt) * 40); font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 700; letter-spacing: calc(var(--pt) * 0.3); color: #8a857d; }
.ht-row { display: flex; align-items: flex-end; margin: calc(var(--pt) * 1) 0; }
.ht-row--me { justify-content: flex-end; }
.ht-avatar { flex-shrink: 0; width: calc(var(--pt) * 28); height: calc(var(--pt) * 28); margin-right: calc(var(--pt) * 8); }
.ht-row .ht-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ht-wrap { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.ht-wrap--me { align-items: flex-end; }
/* Someone else's text on a wallpaper: Apple-style glass, see-through white
   brighter at the top (GLASS_SHEEN), the corner by the avatar tucked in. */
.ht-bubble,
.ht-mine > span {
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 14);
  line-height: calc(var(--pt) * 19);
  color: #1a1814;
}
.ht-bubble {
  padding: calc(var(--pt) * 8) calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 18) calc(var(--pt) * 18) calc(var(--pt) * 18) calc(var(--pt) * 6);
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
}
/* Your own text: a one-point rainbow frame (the brand rainbow at 60%) round a
   white face with the faint wash of a turned-on feature. */
.ht-mine {
  padding: calc(var(--pt) * 1);
  border-radius: calc(var(--pt) * 18) calc(var(--pt) * 18) calc(var(--pt) * 6) calc(var(--pt) * 18);
  background: linear-gradient(to bottom right, #ff5a5f99, #ff8a3d99, #e8a40099, #2fa84f99, #1e9be099, #7e57c299, #ff4d8b99);
}
.ht-mine > span {
  display: block;
  padding: calc(var(--pt) * 7) calc(var(--pt) * 11);
  border-radius: calc(var(--pt) * 17) calc(var(--pt) * 17) calc(var(--pt) * 5) calc(var(--pt) * 17);
  background:
    linear-gradient(to bottom right, #ff5a5f1a, #ff8a3d1a, #e8a4001a, #2fa84f1a, #1e9be01a, #7e57c21a, #ff4d8b1a),
    #ffffff;
}
/* A dropped pin: the map card (210 × 130, radius 16), from HC's screenshot. */
.ht-map { display: block; width: calc(var(--pt) * 210); height: calc(var(--pt) * 130); overflow: hidden; border-radius: calc(var(--pt) * 16); }
.ht-row .ht-map img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* A reaction under the message (likeBadge). */
.ht-like {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 2);
  margin: calc(var(--pt) * 3) 0 0 calc(var(--pt) * 4);
  padding: calc(var(--pt) * 2) calc(var(--pt) * 6);
  border: 1px solid #ede8de;
  border-radius: 999px;
  background: #ffffff;
}
.ht-like i { font-style: normal; font-size: calc(var(--pt) * 10); }
.ht-like b { font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 700; color: #4a4641; }
.ht-compose { flex-shrink: 0; display: flex; align-items: center; gap: calc(var(--pt) * 8); padding: calc(var(--pt) * 12) calc(var(--pt) * 14) calc(var(--pt) * 18); }
.ht-input { flex: 1; min-width: 0; padding: calc(var(--pt) * 10) calc(var(--pt) * 14); overflow: hidden; border-radius: 999px; background: #ffffff; color: #8a857d; font-size: calc(var(--pt) * 14); white-space: nowrap; text-overflow: ellipsis; }
.ht-round,
.ht-send { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(var(--pt) * 40); height: calc(var(--pt) * 40); border-radius: 50%; background: #ffffff; }
.ht-round svg,
.ht-send svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
.ht-send { background: rgba(26, 24, 20, 0.25); color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .js .stage [data-anim="hp-out"],
  .js .stage [data-anim="hp-inout"],
  .js .stage [data-anim="sheet"],
  .js .stage [data-anim="push"] { opacity: 0; visibility: hidden; }
  .js .stage .hh-item--new { opacity: 1; }
  .js .stage .ht-slot { width: calc(var(--pt) * 52); margin-left: 0; opacity: 1; }
  .ht-msg { grid-template-rows: 1fr; opacity: 1; }
  .hc-scroll { translate: 0 var(--scroll, 0px); }
}

/* ---------- 4. a group, as a screen recording ----------
   Measured off HC's group screenshots (2026-10-28): the group's HOME, its
   Expenses, Add expense. Same phone as scenes 1 and 3. */

.gp-scroll { position: relative; }
.stage.is-playing .gp-scroll { animation: gp-scroll 2.6s cubic-bezier(0.45, 0, 0.2, 1) 1.8s both; }
@keyframes gp-scroll {
  0% { translate: 0 0; }
  32%, 68% { translate: 0 var(--scroll, 0px); }
  100% { translate: 0 0; }
}
.gp-cover {
  position: relative;
  height: calc(var(--pt) * 360);
  padding: 0 calc(var(--pt) * 20) calc(var(--pt) * 48);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55)), url("assets/album/gruppe.jpg") center / cover;
  color: #ffffff;
}
.gp-name { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 34); letter-spacing: calc(var(--pt) * -0.8); }
.gp-members { display: flex; margin-top: calc(var(--pt) * 6); }
.gp-members > * { width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; object-fit: cover; }
.gp-members > * + * { margin-left: calc(var(--pt) * -9); }
.gp-members b { display: flex; align-items: center; justify-content: center; background: #ffffff; color: #1a1814; font-size: calc(var(--pt) * 11); }
.gp-count { margin-top: calc(var(--pt) * 6); font-weight: 700; font-size: calc(var(--pt) * 16); }
/* The group's sticky note, as on its cover. */
.gp-note {
  position: absolute;
  right: calc(var(--pt) * 16);
  bottom: calc(var(--pt) * 40);
  display: flex;
  flex-direction: column;
  width: calc(var(--pt) * 84);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 8) calc(var(--pt) * 10);
  background: #ffd84d;
  color: #1a1814;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  line-height: 1.35;
  rotate: -5deg;
  box-shadow: 0 calc(var(--pt) * 4) calc(var(--pt) * 10) rgba(0, 0, 0, 0.25);
}
.gp-note b { font-size: calc(var(--pt) * 9); letter-spacing: calc(var(--pt) * 1); }
.gp-sheet { position: relative; margin-top: calc(var(--pt) * -28); padding: calc(var(--pt) * 18) calc(var(--pt) * 18) calc(var(--pt) * 40); border-radius: calc(var(--pt) * 28) calc(var(--pt) * 28) 0 0; background: #faf7f2; }
.gp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: calc(var(--pt) * 12);
  border-bottom: 1px solid #ede8de;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1.4);
  color: #b8b2a7;
  text-align: center;
}
.gp-tabs span:first-child { position: relative; color: #1a1814; }
.gp-tabs span:first-child::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: calc(var(--pt) * -13); height: calc(var(--pt) * 3); background: #1a1814; }
.gp-tiles { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(var(--pt) * 16); }
.gp-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--pt) * 4); padding: calc(var(--pt) * 4) 0; }
.gp-tile small { font-weight: 800; font-size: calc(var(--pt) * 12); color: #04842c; }
.gp-tile i { font-style: normal; font-size: calc(var(--pt) * 34); line-height: 1; }
.gp-tile svg { width: calc(var(--pt) * 34); height: calc(var(--pt) * 34); stroke-width: 1.8; }
.gp-tile b { margin-top: calc(var(--pt) * 6); font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 700; letter-spacing: calc(var(--pt) * 1.5); color: #4a4641; }
.gp-tile .ep-tap { background: rgba(26, 24, 20, 0.15); }
.gp-about-head { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--pt) * 18); }
.gp-about-head b,
.gp-next-head b { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 18); }
.gp-about-head svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); color: #8a857d; }
.gp-about { margin-top: calc(var(--pt) * 8); font-size: calc(var(--pt) * 15); line-height: 1.45; color: #4a4641; }
.gp-card { margin-top: calc(var(--pt) * 16); padding: calc(var(--pt) * 16); border: 1px solid #ede8de; border-radius: calc(var(--pt) * 18); background: #ffffff; }
.gp-card-head { display: flex; align-items: center; gap: calc(var(--pt) * 8); }
.gp-card-head b { flex: 1; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 17); }
.gp-mini { display: flex; align-items: center; gap: calc(var(--pt) * 4); padding: calc(var(--pt) * 5) calc(var(--pt) * 10); border: 1px solid #dcd5c7; border-radius: 999px; font-size: calc(var(--pt) * 12); font-weight: 600; }
.gp-mini svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.gp-card p { margin-top: calc(var(--pt) * 10); font-size: calc(var(--pt) * 14); color: #8a857d; }
.gp-next-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(var(--pt) * 22); }
.gp-next-head small { font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 700; letter-spacing: calc(var(--pt) * 1.2); color: #4a4641; }
.gp-next {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(var(--pt) * 150);
  margin-top: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 14);
  overflow: hidden;
  border-radius: calc(var(--pt) * 16);
  background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5)), var(--img) center 60% / cover;
  color: #ffffff;
}
.gp-next b { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 19); }
.gp-next small { font-family: var(--font-mono); font-size: calc(var(--pt) * 11); font-weight: 600; letter-spacing: calc(var(--pt) * 1.4); }
.gp-heroes-title { margin-top: calc(var(--pt) * 20); font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 18); text-align: center; }
.gp-heroes { display: flex; justify-content: center; gap: calc(var(--pt) * 30); margin-top: calc(var(--pt) * 10); }
.gp-heroes span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pt) * 6); }
.gp-heroes img { width: calc(var(--pt) * 58); height: calc(var(--pt) * 58); border-radius: 50%; object-fit: cover; }
.gp-heroes b { font-size: calc(var(--pt) * 13); }
.gp-bar { position: absolute; top: calc(var(--pt) * 12); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); display: flex; justify-content: space-between; color: #ffffff; }
.gp-bar .ep-round,
.gp-bar .ep-pill { background: rgba(60, 56, 50, 0.35); }
.gp-album-title { margin-top: calc(var(--pt) * 20); font-family: var(--font-mono); font-size: calc(var(--pt) * 11); font-weight: 700; letter-spacing: calc(var(--pt) * 1.5); color: #8a857d; text-align: center; }
.gp-album { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pt) * 2); width: calc(var(--pt) * 290); margin: calc(var(--pt) * 8) auto 0; overflow: hidden; border-radius: calc(var(--pt) * 16); }
.gp-album img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }

/* Expenses (app/group/[id]/expenses): who owes you and how much, centred,
   two buttons, the expenses, the balances. */
.hp--paper { padding: 0 calc(var(--pt) * 16); background: #faf7f2; color: #1a1814; }
.ex-top { display: flex; align-items: center; gap: calc(var(--pt) * 12); padding-top: calc(var(--pt) * 14); }
.ex-top b { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 25); letter-spacing: calc(var(--pt) * -0.6); }
.ep-round--paper { background: #efeae2; color: #1a1814; }
.ex-head { margin-top: calc(var(--pt) * 26); text-align: center; }
.ex-kicker { font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 800; letter-spacing: calc(var(--pt) * 1.2); text-transform: uppercase; color: #04842c; }
.ex-amount { margin-top: calc(var(--pt) * 6); font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 48); letter-spacing: calc(var(--pt) * -1.5); line-height: 1.05; color: #04842c; }
.ex-people { margin-top: calc(var(--pt) * 4); font-size: calc(var(--pt) * 13); color: #8a857d; }
.ex-buttons { display: flex; justify-content: center; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 16); }
.ex-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 4);
  height: calc(var(--pt) * 40);
  padding: 0 calc(var(--pt) * 18);
  border: 1px solid #dcd5c7;
  border-radius: 999px;
  background: #ffffff;
  font-size: calc(var(--pt) * 14);
  font-weight: 700;
  white-space: nowrap;
}
.ex-btn--dark { border-color: #1a1814; background: #1a1814; color: #ffffff; }
.ex-in { margin-top: calc(var(--pt) * 12); font-family: var(--font-mono); font-size: calc(var(--pt) * 10.5); color: #8a857d; }
.ex-section { margin: calc(var(--pt) * 20) 0 calc(var(--pt) * 4); font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 16); letter-spacing: calc(var(--pt) * -0.4); }
.ex-row { display: flex; align-items: center; gap: calc(var(--pt) * 12); padding: calc(var(--pt) * 12) 0; border-bottom: 1px solid #ede8de; }
.ex-row:not(:has(+ .ex-row)) { border-bottom: 0; }
.ex-row img { width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: 50%; object-fit: cover; }
.ex-row-text { flex: 1; min-width: 0; }
.ex-row-text b { display: block; font-size: calc(var(--pt) * 14); font-weight: 700; letter-spacing: calc(var(--pt) * -0.2); }
.ex-row-text span { display: block; overflow: hidden; font-size: calc(var(--pt) * 12); color: #8a857d; white-space: nowrap; text-overflow: ellipsis; }
.ex-minus,
.ex-zero { font-size: calc(var(--pt) * 14); font-weight: 800; white-space: nowrap; }
.ex-minus { color: #da2b26; }
.ex-zero { color: #8a857d; }
.ex-plus { font-size: calc(var(--pt) * 14); font-weight: 800; white-space: nowrap; color: #04842c; }
/* Faces with no photo: their initial on green. A box: its icon on a tile. */
.ex-initial,
.ex-box { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); font-style: normal; }
.ex-initial { border-radius: 50%; background: #3d8b3d; color: #ffffff; font-weight: 700; font-size: calc(var(--pt) * 13); }
.ex-box { border: 1px solid #dcd5c7; border-radius: calc(var(--pt) * 9); background: #f4efe7; }
.ex-box svg { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); fill: none; stroke: #4a463f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-all { display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 4); padding: calc(var(--pt) * 14) 0 calc(var(--pt) * 4); font-size: calc(var(--pt) * 14); font-weight: 700; color: #8a857d; }
.ex-all .ex-chev { margin-left: 0; }
/* The receipt rows end in a chevron: they open the expense. */
.ex-chev { flex: none; width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); margin-left: calc(var(--pt) * -6); fill: none; stroke: #8a857d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Add expense: a sheet over Expenses that scrolls down to who pays what. */
.ax-sheet {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--pt) * 56);
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--pt) * 28) calc(var(--pt) * 28) 0 0;
  background: #faf7f2;
}
.ax-head { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--pt) * 18) calc(var(--pt) * 18) calc(var(--pt) * 14); border-bottom: 1px solid #ede8de; }
.ax-head b { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--pt) * 21); }
.ax-x { display: flex; align-items: center; justify-content: center; width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border: 1px solid #dcd5c7; border-radius: 50%; font-size: calc(var(--pt) * 13); }
.ax-scroll { padding: 0 calc(var(--pt) * 18); }
.ax-sheet { overflow: hidden; }
.stage.is-playing .ax-scroll { animation: ep-scroll 0.9s cubic-bezier(0.45, 0, 0.2, 1) 10.45s both; }
.ax-label { margin-top: calc(var(--pt) * 16); font-family: var(--font-mono); font-size: calc(var(--pt) * 10); font-weight: 700; letter-spacing: calc(var(--pt) * 1.5); color: #8a857d; }
.ax-input {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  height: calc(var(--pt) * 46);
  margin-top: calc(var(--pt) * 6);
  padding: 0 calc(var(--pt) * 14);
  border: 1px solid #ede8de;
  border-radius: calc(var(--pt) * 12);
  background: #ffffff;
  font-size: calc(var(--pt) * 16);
}
.ax-val { flex: 1; display: grid; }
.ax-val > * { grid-area: 1 / 1; }
.ax-input small { font-family: var(--font-mono); font-size: calc(var(--pt) * 12); color: #8a857d; }
.hp--paper .hc-ph { color: #b8b2a7; }
.ax-payer img { width: calc(var(--pt) * 28); height: calc(var(--pt) * 28); border-radius: 50%; object-fit: cover; }
.ax-payer b { flex: 1; }
.ax-payer span { color: #8a857d; font-size: calc(var(--pt) * 20); }
.ax-seg { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--pt) * 6); padding: calc(var(--pt) * 3); border-radius: calc(var(--pt) * 12); background: #ede8de; font-size: calc(var(--pt) * 14); text-align: center; }
.ax-seg--2 { grid-template-columns: 1fr 1fr; }
.ax-seg span { padding: calc(var(--pt) * 9) 0; color: #8a857d; }
.ax-seg .is-on { border-radius: calc(var(--pt) * 10); background: #ffffff; color: #1a1814; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.ax-events { display: flex; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 6); overflow: hidden; }
.ax-event { position: relative; flex-shrink: 0; display: flex; flex-direction: column; width: calc(var(--pt) * 180); padding: calc(var(--pt) * 10) calc(var(--pt) * 12); border: 1px solid #ede8de; border-radius: calc(var(--pt) * 12); background: #ffffff; }
.ax-event b { overflow: hidden; font-size: calc(var(--pt) * 14); white-space: nowrap; text-overflow: ellipsis; }
.ax-event small { font-family: var(--font-mono); font-size: calc(var(--pt) * 11); color: #8a857d; }
.ax-event:first-child { border: 2px solid #1a1814; }
.js .stage .ax-event:first-child { border: 1px solid #ede8de; }
.stage.is-playing .ax-event:first-child { animation: ax-pick 0.2s ease 10.25s forwards; }
@keyframes ax-pick { to { border: 2px solid #1a1814; } }
.ax-event .ep-tap { background: rgba(26, 24, 20, 0.15); }
.ax-hint { margin-top: calc(var(--pt) * 6); font-family: var(--font-mono); font-size: calc(var(--pt) * 10.5); color: #8a857d; }
.ax-person { display: flex; align-items: center; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 9) 0; }
.ax-person img { width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: 50%; object-fit: cover; }
.ax-person b { flex: 1; font-size: calc(var(--pt) * 15); }
.ax-person--off b { color: #8a857d; font-weight: 500; }
.ax-share { min-width: calc(var(--pt) * 66); font-size: calc(var(--pt) * 13); color: #4a4641; text-align: right; }
.ax-step { display: flex; align-items: center; justify-content: center; width: calc(var(--pt) * 28); height: calc(var(--pt) * 28); border-radius: 50%; background: #efeae2; font-size: calc(var(--pt) * 16); }
.ax-n { width: calc(var(--pt) * 16); font-weight: 700; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .gp-scroll { translate: 0 0; }
  .ax-scroll { translate: 0 var(--scroll, 0px); }
  .js .stage .ax-event:first-child { border: 2px solid #1a1814; }
}

/* "See everything groups can do" under the groups story. */
.see-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
  padding: 0.7rem 1.2rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(to bottom right, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b) border-box;
  color: #141310;
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.see-more:hover { transform: translateX(3px); }

/* ---------- a group's DINNER and CLEAN tabs (the groups page) ---------- */

.stage[data-scene="groups"] .screen {
  overflow: hidden;
  border-radius: calc(var(--pt) * 26);
  background: #faf7f2;
  box-shadow: 0 18px 40px rgba(20, 19, 16, 0.14);
}
.stage[data-scene="groups"] .panel { border-radius: 0; box-shadow: none; padding-top: calc(var(--pt) * 6); }
/* Mono caps tabs, the picked one black with a black bar under it. */
.gr-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 calc(var(--pt) * 20);
  padding: calc(var(--pt) * 22) 0 calc(var(--pt) * 12);
  border-bottom: 1px solid #ede8de;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1.4);
  color: #b8b2a7;
  text-align: center;
}
.gr-tabs span:nth-child(3) { color: #1a1814; }
.gr-underline {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 25%;
  height: calc(var(--pt) * 3);
  background: #1a1814;
}
.stage.is-playing .gr-tabs span:nth-child(3) { animation: tab-off 0.3s ease 4.6s forwards; }
.stage.is-playing .gr-tabs span:nth-child(4) { animation: tab-on 0.3s ease 4.6s forwards; }
.stage.is-playing .gr-underline { animation: tab-slide 0.45s cubic-bezier(0.4, 0, 0.2, 1) 4.6s forwards; }
@keyframes tab-off { to { color: #b8b2a7; } }
@keyframes tab-on { to { color: #1a1814; } }
@keyframes tab-slide { to { left: 75%; } }
@media (prefers-reduced-motion: reduce) {
  .gr-tabs span:nth-child(3) { color: #b8b2a7; }
  .gr-tabs span:nth-child(4) { color: #1a1814; }
  .gr-underline { left: 75%; }
}
.gr-title {
  margin-top: calc(var(--pt) * 16);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--pt) * 22);
  letter-spacing: calc(var(--pt) * -0.5);
}
.gr-desc { margin-top: calc(var(--pt) * 4); font-size: calc(var(--pt) * 14.5); line-height: 1.35; color: #8a857d; }
.gr-desc + .gr-row { margin-top: calc(var(--pt) * 10); }
.gr-row {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 12);
  padding: calc(var(--pt) * 12) 0;
  border-bottom: 1px solid #ede8de;
}
.gr-row img { width: calc(var(--pt) * 40); height: calc(var(--pt) * 40); border-radius: 50%; object-fit: cover; }
.gr-date { width: calc(var(--pt) * 78); flex-shrink: 0; }
.gr-date small,
.gr-date b { display: block; }
.gr-date small {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11);
  font-weight: 600;
  letter-spacing: calc(var(--pt) * 1);
  color: #8a857d;
}
.gr-date b { font-size: calc(var(--pt) * 15); font-weight: 700; }
.gr-name { flex: 1; font-size: calc(var(--pt) * 16); font-weight: 700; }
.gr-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 32);
  height: calc(var(--pt) * 32);
  border-radius: 50%;
  background: #f4efe7;
  color: #8a857d;
  font-size: calc(var(--pt) * 15);
}
/* This week's team: a pale green box, its date in green mono. */
.gr-row--now {
  margin: 0 calc(var(--pt) * -10);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 10);
  border: 0;
  border-radius: calc(var(--pt) * 14);
  background: #e9ece4;
}
.gr-date .gr-week { color: #5a8a5c; }
.gr-pair { flex: 1; display: flex; flex-direction: column; gap: calc(var(--pt) * 8); }
.gr-pair > span { display: flex; align-items: center; gap: calc(var(--pt) * 10); }
.gr-swaps { display: flex; flex-direction: column; gap: calc(var(--pt) * 16); }
/* The cook's push, sliding down over the screen like a phone's banner. */
.scene-toast {
  position: absolute;
  top: calc(var(--pt) * 10);
  left: calc(var(--pt) * 10);
  right: calc(var(--pt) * 10);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 14) calc(var(--pt) * 10) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 18);
  background: rgba(255, 253, 244, 0.97);
  box-shadow: 0 14px 30px rgba(20, 19, 16, 0.2);
  font-size: calc(var(--pt) * 13.5);
  line-height: 1.3;
}
.stage.is-playing [data-anim="toast"] {
  animation:
    toast-move 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) var(--d) both,
    toast-move 0.4s ease-in var(--d2, 999s) reverse forwards;
}
@keyframes toast-move { from { opacity: 0; translate: 0 calc(var(--pt) * -40); } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .stage [data-anim="toast"] { opacity: 0; }
}
.scene-toast > img { width: calc(var(--pt) * 36); height: calc(var(--pt) * 36); border-radius: calc(var(--pt) * 9); }
.scene-toast b { display: block; margin-bottom: calc(var(--pt) * 2); }
.stage[data-scene="groups"] .scene-toast { z-index: 2; }


/* ---------- the groups page ---------- */

.hero--sub .hero-inner { padding-bottom: 3.5rem; }
.features .section-inner { max-width: 68rem; text-align: center; }
.features h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: 2.5rem; }
/* The app's own feature tiles: name and the line the app uses for it. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; text-align: center; }
/* Apple's Liquid Glass: mostly clear, the sky behind blurred and brightened,
   lit along its rim (::before) — brightest at the top-left, a second glint
   bottom-right — with a soft glow inside and a shadow under it. */
.feature {
  position: relative;
  padding: 1.5rem 1.3rem 1.35rem;
  border-radius: 1.8rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0.3));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 0 24px rgba(255, 255, 255, 0.35),
    0 10px 30px rgba(40, 70, 120, 0.12);
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0.1) 65%, rgba(255, 255, 255, 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.feature-icon { display: block; font-size: 2rem; line-height: 1; }
.feature h3 { margin-top: 0.7rem; font-size: 1.15rem; }
.feature p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--muted); }


/* The stories, each with a few of the things it can do under it. */
.gp-we {
  max-width: 34rem;
  margin: 6rem auto;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.how--groups .story + .story { margin-top: 6rem; }
.story-points { display: grid; gap: 0.55rem; max-width: 30rem; margin-top: 1.1rem; list-style: none; }
.story-points li { position: relative; padding-left: 1.4rem; }
.story-points li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--rainbow);
}

/* A group's Expenses screen (styles/groupExpenses.ts): what you owe, big and
   red, then everyone's balance. */
[data-scene="expenses"] .ex-screen { padding: calc(var(--pt) * 14) calc(var(--pt) * 20) calc(var(--pt) * 8); }
[data-scene="expenses"] .ex-head,
[data-scene="fridge"] .ex-head {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 12);
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 20);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * -0.5);
}
[data-scene="expenses"] .ex-back,
[data-scene="fridge"] .ex-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 32);
  height: calc(var(--pt) * 32);
  border-radius: 50%;
  background: rgba(26, 24, 20, 0.06);
}
[data-scene="expenses"] .ex-back svg,
[data-scene="fridge"] .ex-back svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); }
[data-scene="expenses"] .ex-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--pt) * 22) 0 calc(var(--pt) * 22);
  text-align: center;
}
[data-scene="expenses"] .ex-kicker {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * 1.2);
  text-transform: uppercase;
  color: #da2b26;
}
[data-scene="expenses"] .ex-amount {
  margin-top: calc(var(--pt) * 6);
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 48);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: calc(var(--pt) * -1.5);
  color: #da2b26;
}
[data-scene="expenses"] .ex-sub { margin-top: calc(var(--pt) * 4); font-size: calc(var(--pt) * 13); color: #8a857d; }
[data-scene="expenses"] .ex-actions { display: flex; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 16); }
[data-scene="expenses"] .ex-ghost,
[data-scene="expenses"] .ex-primary {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 18);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 14);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * -0.2);
}
[data-scene="expenses"] .ex-ghost { border: 1px solid #dcd5c7; background: #ffffff; }
[data-scene="expenses"] .ex-primary { background: #1a1814; color: #ffffff; }
[data-scene="expenses"] .ex-primary svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
[data-scene="expenses"] .ex-section {
  margin: calc(var(--pt) * 4) 0 calc(var(--pt) * 4);
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 16);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * -0.4);
}
[data-scene="expenses"] .ex-row {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 12);
  padding: calc(var(--pt) * 12) 0;
  border-bottom: 1px solid #ede8de;
}
[data-scene="expenses"] .ex-row:last-child { border-bottom: 0; }
[data-scene="expenses"] .ex-row img { width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: 50%; object-fit: cover; }
[data-scene="expenses"] .ex-row span { flex: 1; min-width: 0; }
[data-scene="expenses"] .ex-row span b,
[data-scene="expenses"] .ex-row span small { display: block; }
[data-scene="expenses"] .ex-row span b,
[data-scene="expenses"] .ex-row > b { font-size: calc(var(--pt) * 14); letter-spacing: calc(var(--pt) * -0.2); }
[data-scene="expenses"] .ex-row span b { font-weight: 700; }
[data-scene="expenses"] .ex-row > b { font-weight: 800; }
[data-scene="expenses"] .ex-row small { margin-top: calc(var(--pt) * 1); font-size: calc(var(--pt) * 12); color: #8a857d; }
[data-scene="expenses"] .ex-plus { color: #04842c; }
[data-scene="expenses"] .ex-minus { color: #da2b26; }
[data-scene="expenses"] .ex-zero { color: #8a857d; }

/* The beerfridge (styles/groupBeerfridge.ts): drinks on a shelf, drawn as
   GroupBeerfridgeVessel draws them, tapped into a basket and swiped to buy. */
.bf-screen { padding: calc(var(--pt) * 14) calc(var(--pt) * 16) 0; }
.bf-tabs {
  display: flex;
  margin: calc(var(--pt) * 6) 0 calc(var(--pt) * 14);
  border-bottom: 1px solid #ede8de;
}
.bf-tabs span {
  position: relative;
  flex: 1;
  padding: calc(var(--pt) * 12) calc(var(--pt) * 4);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1.2);
  text-align: center;
  text-transform: uppercase;
  color: #b8b2a7;
}
.bf-tabs span:first-child { color: #1a1814; }
.bf-tabs span:first-child::after {
  content: "";
  position: absolute;
  left: calc(var(--pt) * 16);
  right: calc(var(--pt) * 16);
  bottom: -1px;
  height: calc(var(--pt) * 2);
  background: #1a1814;
}
.bf-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pt) * 10); }
.bf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 18) calc(var(--pt) * 10) calc(var(--pt) * 14);
  border: calc(var(--pt) * 1.5) solid #ede8de;
  border-radius: calc(var(--pt) * 20);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(26, 24, 20, 0.06);
}
.stage.is-playing .bf-tile--pick { animation: bf-tile-on 0.2s ease var(--on) forwards; }
@keyframes bf-tile-on { to { border-color: #1a1814; background: #f7f3ec; } }
.bf-tile b { font-size: calc(var(--pt) * 14); font-weight: 700; letter-spacing: calc(var(--pt) * -0.2); }
.bf-tile small {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 11);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 0.4);
  color: #8a857d;
}
.bf-count {
  position: absolute;
  top: calc(var(--pt) * 8);
  right: calc(var(--pt) * 8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--pt) * 26);
  height: calc(var(--pt) * 26);
  padding: 0 calc(var(--pt) * 6);
  border-radius: calc(var(--pt) * 13);
  background: #1a1814;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 12);
  font-weight: 800;
}
.bf-tap {
  inset: auto;
  left: calc(50% - var(--pt) * 24);
  top: calc(var(--pt) * 22);
  width: calc(var(--pt) * 48);
  height: calc(var(--pt) * 48);
}
/* The three drinks, all one colour so the parts make one silhouette, with
   translucent white rims: a can, a bottle, a tall slim can. */
.bf-drink {
  --s: calc(var(--pt) * 54);
  --rim: rgba(255, 255, 255, 0.42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(var(--s) * 0.62);
  height: var(--s);
}
.bf-drink > i {
  --inset: calc(var(--s) * 0.15);
  position: relative;
  width: calc(var(--s) * 0.46);
  height: calc(var(--s) * 0.82);
  border-radius: calc(var(--s) * 0.12);
  background:
    linear-gradient(var(--rim), var(--rim)) no-repeat 50% var(--inset) / calc(100% - var(--s) * 0.08) 1.5px,
    linear-gradient(var(--rim), var(--rim)) no-repeat 50% calc(100% - var(--inset)) / calc(100% - var(--s) * 0.08) 1.5px,
    var(--c);
}
.bf-drink--slim > i {
  --inset: calc(var(--s) * 0.11);
  width: calc(var(--s) * 0.32);
  height: calc(var(--s) * 0.94);
  border-radius: calc(var(--s) * 0.09);
}
.bf-drink--bottle > i {
  height: calc(var(--s) * 0.62);
  border-radius: calc(var(--s) * 0.21) calc(var(--s) * 0.21) calc(var(--s) * 0.1) calc(var(--s) * 0.1);
  background:
    linear-gradient(var(--rim), var(--rim)) no-repeat 50% calc(var(--s) * 0.28) / calc(100% - var(--s) * 0.12) 1.5px,
    var(--c);
}
.bf-drink--bottle > i::before,
.bf-drink--bottle > i::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  background: var(--c);
}
.bf-drink--bottle > i::before { bottom: calc(100% - 1px); width: calc(var(--s) * 0.17); height: calc(var(--s) * 0.22); }
.bf-drink--bottle > i::after {
  bottom: calc(100% + var(--s) * 0.22 - 2px);
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) * 0.08);
  border-radius: calc(var(--s) * 0.03);
}
.bf-footer {
  margin: calc(var(--pt) * 14) calc(var(--pt) * -16) 0;
  padding: calc(var(--pt) * 12) calc(var(--pt) * 16) calc(var(--pt) * 16);
  border-top: 1px solid #ede8de;
}
.bf-basket {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--pt) * 12);
  margin-bottom: calc(var(--pt) * 10);
}
.bf-basket > span { display: flex; flex-direction: column; gap: calc(var(--pt) * 2); }
.bf-basket small { font-size: calc(var(--pt) * 13); line-height: calc(var(--pt) * 18); color: #4a4641; }
.bf-basket em {
  padding-top: calc(var(--pt) * 4);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-style: normal;
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1);
  text-transform: uppercase;
  color: #8a857d;
}
.bf-basket > b {
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 26);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * -0.8);
}
/* SwipeToConfirm: an ink track, a white knob; the green follows the knob. */
.bf-swipe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--pt) * 62);
  overflow: hidden;
  border-radius: 999px;
  background: #1a1814;
}
.bf-swipe > span {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 12);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1);
  text-transform: uppercase;
  color: #ffffff;
}
.bf-swipe-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pt) * 58);
  border-radius: 999px;
  background: #04842c;
  opacity: 0;
}
.bf-knob {
  position: absolute;
  top: calc(var(--pt) * 4);
  left: calc(var(--pt) * 4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 54);
  height: calc(var(--pt) * 54);
  border-radius: 50%;
  background: #ffffff;
  color: #1a1814;
}
.bf-knob svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.stage.is-playing .bf-knob { animation: bf-knob 0.9s cubic-bezier(0.5, 0, 0.3, 1) 2.9s forwards; }
.stage.is-playing .bf-swipe-fill { animation: bf-fill 0.9s cubic-bezier(0.5, 0, 0.3, 1) 2.9s forwards; }
.stage.is-playing .bf-swipe > span { animation: anim-fade 0.4s ease 2.9s reverse forwards; }
@keyframes bf-knob { to { left: calc(100% - var(--pt) * 58); } }
@keyframes bf-fill { from { opacity: 1; } to { opacity: 1; width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .bf-tile--pick { border-color: #1a1814; background: #f7f3ec; }
}

/* The two groups' headings: centred, like the hero, with room around them. */
.gp-chapter { max-width: 40rem; margin: 7rem auto 4rem; text-align: center; }
.gp-chapter--first { margin-top: 1rem; }
.gp-chapter h2 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
.gp-chapter .section-sub { margin: 0.8rem auto 0; }
/* The end of each group: start one, or send the page on. */
.gp-start { margin: 4.5rem auto 0; text-align: center; }
.gp-start-for { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.gp-start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.1rem; }
/* The pill is a flex box, so the space before the logo needs a gap. */
.gp-start .store-pill { gap: 0.28em; }
.gp-share {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid #dcd5c7;
  border-radius: 999px;
  background: #ffffff;
  color: #141310;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.gp-share svg { width: 1.05rem; height: 1.05rem; }
.gp-start + .gp-we { margin-top: 5rem; }

/* Two-step scenes whose steps aren't .panel: both steps in the same spot. */
.gx-panels > *,
.pl-screen > *,
.rl-sheet .screen--panels > * { grid-area: 1 / 1; min-width: 0; }

/* ---------- a group's own page, drawn small (styles/groupDetail.ts) ----------
   The cover photo with the name and members, the paper sheet over it with
   the mono tabs. Shared by the dorm and the kitchen. */
.gx-screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pt) * 26);
  background: #faf7f2;
  color: #1a1814;
  box-shadow: 0 18px 40px rgba(20, 19, 16, 0.14);
}
.gx-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: calc(var(--pt) * 220);
  padding: 0 calc(var(--pt) * 20) calc(var(--pt) * 44);
  background: #1a1814 var(--img) center / cover;
  color: #ffffff;
}
.gx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(26, 24, 20, 0.42) 30%, rgba(0, 0, 0, 0.62));
}
.gx-title {
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 30);
  font-weight: 800;
  line-height: calc(var(--pt) * 34);
  letter-spacing: calc(var(--pt) * -0.9);
}
.gx-sub { margin-top: calc(var(--pt) * 4); font-size: calc(var(--pt) * 14); color: rgba(255, 255, 255, 0.78); }
.gx-members { display: flex; align-items: center; margin-top: calc(var(--pt) * 10); }
.gx-members img,
.gx-members i {
  width: calc(var(--pt) * 28);
  height: calc(var(--pt) * 28);
  margin-right: calc(var(--pt) * -7);
  border: calc(var(--pt) * 1.5) solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  object-fit: cover;
}
.gx-members i {
  width: auto;
  min-width: calc(var(--pt) * 28);
  padding: 0 calc(var(--pt) * 5);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1814;
  font-size: calc(var(--pt) * 10);
  font-style: normal;
  font-weight: 800;
}
.gx-count { margin-top: calc(var(--pt) * 6); font-size: calc(var(--pt) * 14); font-weight: 700; }
.gx-sheet {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--pt) * -28);
  padding: calc(var(--pt) * 6) calc(var(--pt) * 16) calc(var(--pt) * 16);
  border-radius: calc(var(--pt) * 24) calc(var(--pt) * 24) 0 0;
  background: #faf7f2;
}
.gx-tabs {
  position: relative;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin-bottom: calc(var(--pt) * 14);
  border-bottom: 1px solid #ede8de;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1.2);
  text-align: center;
  color: #b8b2a7;
}
.gx-tabs > span:not(.tap) { padding: calc(var(--pt) * 12) calc(var(--pt) * 2); white-space: nowrap; }
.gx-tabs > span:first-child { color: #1a1814; }
.gx-underline {
  position: absolute;
  bottom: -1px;
  left: calc(var(--pt) * 12);
  width: var(--tab-w);
  height: calc(var(--pt) * 2);
  background: #1a1814;
}
.gx-tabs--dorm { --tab-w: calc(33.333% - var(--pt) * 24); }
.gx-tabs--kitchen { --tab-w: calc(25% - var(--pt) * 24); }
.stage.is-playing .gx-tabs--dorm > span:first-child { animation: tab-off 0.3s ease 2.45s forwards; }
.stage.is-playing .gx-tabs--dorm > span:nth-child(3) { animation: tab-on 0.3s ease 2.45s forwards; }
.stage.is-playing .gx-tabs--dorm .gx-underline { animation: gx-tab-slide 0.45s cubic-bezier(0.4, 0, 0.2, 1) 2.45s forwards; }
@keyframes gx-tab-slide { to { left: calc(66.667% + var(--pt) * 12); } }
@media (prefers-reduced-motion: reduce) {
  .gx-tabs--dorm > span:first-child { color: #b8b2a7; }
  .gx-tabs--dorm > span:nth-child(3) { color: #1a1814; }
  .gx-tabs--dorm .gx-underline { left: calc(66.667% + var(--pt) * 12); }
}
.gx-tab-tap {
  inset: auto;
  right: calc(16.6% - var(--pt) * 22);
  top: calc(var(--pt) * -4);
  width: calc(var(--pt) * 44);
  height: calc(var(--pt) * 44);
}
.gx-panels { height: calc(var(--pt) * 330); overflow: hidden; }

/* HOME: the highlighted events, two to a row. */
.gx-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--pt) * 4) 0 calc(var(--pt) * 12);
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 17);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * -0.4);
}
.gx-h svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); color: #8a857d; }
.gx-events { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pt) * 10); }
.gx-event {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1.08;
  padding: calc(var(--pt) * 10);
  overflow: hidden;
  border: calc(var(--pt) * 2) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(var(--pt) * 16);
  background: #1a1814 var(--img) center / cover;
  box-shadow: 0 2px 8px rgba(26, 24, 20, 0.12);
  color: #ffffff;
}
.gx-event::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 35%, transparent 50%, rgba(0, 0, 0, 0.6));
}
.gx-event b { font-family: var(--font-display); font-size: calc(var(--pt) * 15); font-weight: 800; line-height: 1.1; }
.gx-event small,
.gx-going > span {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 9);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 0.6);
  text-transform: uppercase;
}
.gx-event small { margin-top: calc(var(--pt) * 4); opacity: 0.92; }
.gx-going {
  position: absolute;
  top: calc(var(--pt) * 8);
  left: calc(var(--pt) * 8);
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
}
.gx-going img {
  width: calc(var(--pt) * 20);
  height: calc(var(--pt) * 20);
  border: calc(var(--pt) * 1.5) solid #ffffff;
  border-radius: 50%;
  object-fit: cover;
}
.gx-check {
  position: absolute;
  top: calc(var(--pt) * 8);
  right: calc(var(--pt) * 8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 22);
  height: calc(var(--pt) * 22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #04842c;
}
.gx-check svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); stroke-width: 3; }
.gx-dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pt) * 6);
  margin-top: calc(var(--pt) * 12);
  padding: calc(var(--pt) * 12);
  border: calc(var(--pt) * 1.5) dashed #dcd5c7;
  border-radius: calc(var(--pt) * 14);
  font-size: calc(var(--pt) * 13);
  font-weight: 600;
  color: #8a857d;
}
.gx-dashed svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }

/* COMMUNITIES: the heading, the search, then each category of GroupCards.
   The list scrolls from the teams down to the kitchens. */
.stage.is-playing .gx-scroll { animation: gx-scroll 1.1s cubic-bezier(0.45, 0, 0.2, 1) 4.8s both; }
@keyframes gx-scroll { from { translate: 0 0; } to { translate: 0 calc(var(--pt) * -443); } }
.gx-comm-head { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--pt) * 2) 0 calc(var(--pt) * 12); }
.gx-comm-head b { font-family: var(--font-display); font-size: calc(var(--pt) * 20); font-weight: 800; letter-spacing: calc(var(--pt) * -0.5); }
.gx-promote {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 7) calc(var(--pt) * 12);
  border-radius: 999px;
  background: #1a1814;
  color: #ffffff;
  font-size: calc(var(--pt) * 13);
  font-weight: 700;
}
.gx-promote svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.gx-search {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  height: calc(var(--pt) * 40);
  padding: 0 calc(var(--pt) * 12);
  border: 1px solid #ede8de;
  border-radius: calc(var(--pt) * 14);
  background: #ffffff;
  font-size: calc(var(--pt) * 14);
  color: #b8b2a7;
}
.gx-search svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); color: #8a857d; }
.gx-cat {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  margin: calc(var(--pt) * 14) 0 calc(var(--pt) * 10);
  font-size: calc(var(--pt) * 15);
  font-weight: 700;
}
.gx-cat svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }
.gx-cat small { margin-left: auto; font-size: calc(var(--pt) * 12); font-weight: 400; color: #8a857d; }
.gx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: calc(var(--pt) * 95);
  margin-bottom: calc(var(--pt) * 10);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 12);
  overflow: hidden;
  border: 1px solid #ede8de;
  border-radius: calc(var(--pt) * 18);
  background: #1a1814 var(--img) center / cover;
  box-shadow: 0 2px 8px rgba(26, 24, 20, 0.08);
}
/* Each name gets its own scrim that hugs it and fades out to the right. */
.gx-card b {
  max-width: 100%;
  margin-bottom: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 2) calc(var(--pt) * 22) calc(var(--pt) * 2) 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 70%, transparent);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: calc(var(--pt) * 26);
  font-weight: 800;
  line-height: calc(var(--pt) * 28);
  letter-spacing: calc(var(--pt) * -0.6);
}

/* The kitchen: its sticky notes on the photo, the feature tiles under the tabs. */
.gx-hero--kitchen { height: calc(var(--pt) * 250); }
.gx-hero--dorm { background-position: center 85%; }
.gx-sticky {
  position: absolute;
  right: calc(var(--pt) * 16);
  bottom: calc(var(--pt) * 20);
  width: calc(var(--pt) * 72);
  height: calc(var(--pt) * 72);
  color: #3a2e10;
}
.gx-sticky > i,
.gx-sticky-top {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--pt) * 3);
  box-shadow: 0 calc(var(--pt) * 3) calc(var(--pt) * 6) rgba(0, 0, 0, 0.35);
}
.gx-sticky-back { background: #ffb1b1; rotate: 11deg; }
.gx-sticky-back--green { background: #b7e4c7; rotate: 16deg; }
.gx-sticky-top {
  display: flex;
  flex-direction: column;
  padding: calc(var(--pt) * 7);
  background: #ffe066;
  rotate: 5deg;
  font-size: calc(var(--pt) * 9);
  font-weight: 600;
  line-height: calc(var(--pt) * 11);
}
.gx-sticky-top small {
  margin-bottom: calc(var(--pt) * 2);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 8);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * 0.6);
  text-transform: uppercase;
  color: #5c4a1b;
}
.gx-sticky-tap { inset: auto; left: calc(50% - var(--pt) * 24); top: calc(50% - var(--pt) * 24); width: calc(var(--pt) * 48); height: calc(var(--pt) * 48); background: rgba(255, 255, 255, 0.45); }
.gx-tiles { display: flex; gap: calc(var(--pt) * 10); padding-bottom: calc(var(--pt) * 120); }
.gx-tile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--pt) * 5); }
.gx-tile small {
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 9);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 0.8);
  text-transform: uppercase;
  color: #8a857d;
}
.gx-tile .gx-plus { margin-bottom: calc(var(--pt) * -2); font-size: calc(var(--pt) * 11); font-weight: 800; letter-spacing: calc(var(--pt) * 0.3); color: #04842c; }
.gx-emoji { font-size: calc(var(--pt) * 46); font-style: normal; line-height: calc(var(--pt) * 54); }
.gx-icon { display: flex; align-items: center; height: calc(var(--pt) * 54); }
.gx-icon svg { width: calc(var(--pt) * 36); height: calc(var(--pt) * 36); stroke-width: 1.8; }

/* The shopping list popup (GroupShoppingNoteModal): yellow paper over a
   dimmed page, tabs for each note along its top. */
.nt-backdrop { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.4); }
.nt-card {
  position: absolute;
  z-index: 3;
  top: calc(var(--pt) * 60);
  left: calc(var(--pt) * 16);
  right: calc(var(--pt) * 16);
  padding: calc(var(--pt) * 16) calc(var(--pt) * 18) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 6);
  background: #ffe066;
  box-shadow: 0 calc(var(--pt) * 12) calc(var(--pt) * 18) rgba(0, 0, 0, 0.4);
  color: #3a2e10;
}
.nt-tabs { display: flex; align-items: center; gap: calc(var(--pt) * 6); margin-bottom: calc(var(--pt) * 12); }
.nt-tab {
  padding: calc(var(--pt) * 6) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 10) calc(var(--pt) * 10) calc(var(--pt) * 4) calc(var(--pt) * 4);
  background: #ffe066;
  font-size: calc(var(--pt) * 12);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.55;
}
.nt-tab--on { font-weight: 800; opacity: 1; box-shadow: 0 calc(var(--pt) * 2) calc(var(--pt) * 3) rgba(0, 0, 0, 0.18); }
.nt-tab--pink { background: #ffb1b1; }
.nt-tab--green { background: #b7e4c7; }
.nt-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--pt) * 30);
  height: calc(var(--pt) * 30);
  margin-left: auto;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
}
.nt-add svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pt) * 8); margin-bottom: calc(var(--pt) * 10); }
.nt-head b { font-family: var(--font-display); font-size: calc(var(--pt) * 18); font-weight: 800; letter-spacing: calc(var(--pt) * -0.3); }
.nt-toggle { display: flex; gap: calc(var(--pt) * 4); padding: calc(var(--pt) * 3); border-radius: calc(var(--pt) * 14); background: rgba(0, 0, 0, 0.07); }
.nt-toggle > span {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 5) calc(var(--pt) * 9);
  border-radius: calc(var(--pt) * 11);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * 0.4);
  text-transform: uppercase;
  color: #5c4a1b;
}
.nt-toggle svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.nt-toggle .nt-toggle-on { background: #3a2e10; color: #ffffff; }
.nt-row { display: flex; align-items: center; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 4) 0; font-size: calc(var(--pt) * 16); line-height: calc(var(--pt) * 22); color: #1f1808; }
.nt-row span { flex: 1; min-height: calc(var(--pt) * 22); }
.nt-row > svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); color: #5c4a1b; opacity: 0.7; }
.nt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--pt) * 22);
  height: calc(var(--pt) * 22);
  border: calc(var(--pt) * 2) solid #5c4a1b;
  border-radius: calc(var(--pt) * 6);
  color: transparent;
}
.nt-box svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); stroke-width: 3; }
.stage.is-playing .nt-row--done .nt-box { animation: nt-tick 0.2s ease var(--on) forwards; }
.stage.is-playing .nt-row--done span { animation: nt-struck 0.2s ease var(--on) forwards; }
@keyframes nt-tick { to { border-color: #3a2e10; background: #3a2e10; color: #ffffff; } }
@keyframes nt-struck { to { color: #6b5524; text-decoration: line-through; } }
@media (prefers-reduced-motion: reduce) {
  .nt-row--done .nt-box { border-color: #3a2e10; background: #3a2e10; color: #ffffff; }
  .nt-row--done span { color: #6b5524; text-decoration: line-through; }
}
.nt-foot { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 10); }
.nt-clear {
  padding: calc(var(--pt) * 6) calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 14);
  background: rgba(0, 0, 0, 0.07);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 800;
  letter-spacing: calc(var(--pt) * 0.4);
  text-transform: uppercase;
  color: #5c4a1b;
}
.nt-done {
  padding: calc(var(--pt) * 9) calc(var(--pt) * 18);
  border-radius: calc(var(--pt) * 10);
  background: #3a2e10;
  color: #ffe066;
  font-size: calc(var(--pt) * 13);
  font-weight: 700;
}

/* The members sheet: a grid of faces, then only the ones with a role. */
.rl-sheet {
  overflow: hidden;
  padding-top: calc(var(--pt) * 16);
  border-radius: calc(var(--pt) * 24);
  background: #faf7f2;
  color: #1a1814;
  box-shadow: 0 18px 40px rgba(20, 19, 16, 0.14);
}
.rl-head {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 10);
  padding: 0 calc(var(--pt) * 16) calc(var(--pt) * 10);
  border-bottom: 1px solid #ede8de;
}
.rl-head > b { flex: 1; font-family: var(--font-display); font-size: calc(var(--pt) * 18); font-weight: 800; letter-spacing: calc(var(--pt) * -0.4); }
.rl-toggle { position: relative; display: grid; justify-items: end; }
.rl-toggle > span:not(.tap) {
  grid-area: 1 / 1;
  padding: calc(var(--pt) * 6) calc(var(--pt) * 11);
  border-radius: 999px;
  font-size: calc(var(--pt) * 12);
  font-weight: 700;
  white-space: nowrap;
}
.rl-view { border: 1px solid #ede8de; background: #ffffff; }
.rl-all { background: #1a1814; color: #ffffff; }
.rl-tap { inset: auto; right: calc(var(--pt) * 10); top: calc(var(--pt) * -8); width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); }
.rl-invite { font-size: calc(var(--pt) * 13); font-weight: 700; color: #b8b2a7; }
.rl-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 32);
  height: calc(var(--pt) * 32);
  border: 1px solid #ede8de;
  border-radius: 50%;
  background: #ffffff;
}
.rl-close svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }
.rl-search { margin: calc(var(--pt) * 8) calc(var(--pt) * 16) calc(var(--pt) * 6); }
.rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--pt) * 14); padding: calc(var(--pt) * 10) calc(var(--pt) * 8) calc(var(--pt) * 20); }
.rl-member { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.rl-face { position: relative; margin-bottom: calc(var(--pt) * 8); }
.rl-face img { display: block; width: calc(var(--pt) * 72); height: calc(var(--pt) * 72); border-radius: 50%; object-fit: cover; }
.rl-face i {
  position: absolute;
  top: calc(var(--pt) * -4);
  right: calc(var(--pt) * -10);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pt) * 22);
  height: calc(var(--pt) * 22);
  border: 1px solid #ede8de;
  border-radius: 50%;
  background: #faf7f2;
  font-size: calc(var(--pt) * 10);
  font-style: normal;
  font-weight: 800;
  letter-spacing: calc(var(--pt) * -0.5);
}
.rl-member b,
.rl-member small { font-family: var(--font-mono); font-weight: 700; }
.rl-member b { font-size: calc(var(--pt) * 11); }
.rl-member small { margin-top: calc(var(--pt) * 2); font-size: calc(var(--pt) * 10); color: #8352a6; }

/* A group poll: made on the sky sheet, then in the home page's poll box. */
/* translateZ: the rounded corners must also clip the moving steps inside. */
.pl-screen,
.gx-screen,
.rl-sheet { transform: translateZ(0); }
.pl-screen > * { border-radius: inherit; }
.pl-screen {
  overflow: hidden;
  border-radius: calc(var(--pt) * 26);
  box-shadow: 0 18px 40px rgba(20, 19, 16, 0.14);
  color: #1a1814;
}
.pl-new { padding: calc(var(--pt) * 20); background: #dfe8f5 url("assets/sky.jpg") center / cover; }
.pl-new-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--pt) * 14); }
.pl-new-head b { font-family: var(--font-display); font-size: calc(var(--pt) * 22); font-weight: 800; letter-spacing: calc(var(--pt) * -0.5); }
.pl-new-head svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.pl-kicker {
  display: block;
  margin: calc(var(--pt) * 14) 0 calc(var(--pt) * 8);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1.2);
  text-transform: uppercase;
  color: #4a4641;
}
.pl-input {
  min-height: calc(var(--pt) * 44);
  margin-bottom: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 14);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: calc(var(--pt) * 12);
  background: #ffffff;
  font-size: calc(var(--pt) * 15);
}
.pl-input--opt { display: flex; align-items: center; justify-content: space-between; margin-right: calc(var(--pt) * 28); position: relative; }
.pl-input--opt svg { position: absolute; right: calc(var(--pt) * -24); width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); color: #8a857d; }
.pl-actions { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--pt) * 4); }
.pl-add,
.pl-dates { display: flex; align-items: center; gap: calc(var(--pt) * 6); font-size: calc(var(--pt) * 14); font-weight: 700; }
.pl-add svg,
.pl-dates svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }
.pl-dates {
  position: relative;
  padding: calc(var(--pt) * 8) calc(var(--pt) * 12);
  border: 1px solid #ede8de;
  border-radius: 999px;
  background: #ffffff;
}
.pl-create {
  position: relative;
  margin-top: calc(var(--pt) * 22);
  padding: calc(var(--pt) * 13);
  border: calc(var(--pt) * 1.5) solid #04842c;
  border-radius: calc(var(--pt) * 14);
  background: #e6f2e8;
  color: #04842c;
  font-size: calc(var(--pt) * 15);
  font-weight: 800;
  text-align: center;
}
.pl-create-tap { inset: auto; left: calc(50% - var(--pt) * 24); top: calc(50% - var(--pt) * 24); width: calc(var(--pt) * 48); height: calc(var(--pt) * 48); }
/* The home page's poll box: a white card, its answers on cloudy strips. */
.pl-home { padding: calc(var(--pt) * 6) calc(var(--pt) * 16) calc(var(--pt) * 16); background: #faf7f2; }
.gx-tiles--tight { padding-bottom: calc(var(--pt) * 14); }
.pl-box {
  padding: calc(var(--pt) * 14);
  border: 1px solid #ede8de;
  border-radius: calc(var(--pt) * 18);
  background: #ffffff;
}
.pl-q { font-size: calc(var(--pt) * 16); font-weight: 700; line-height: calc(var(--pt) * 22); }
.pl-meta {
  margin: calc(var(--pt) * 6) 0 calc(var(--pt) * 12);
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 0.4);
  text-transform: uppercase;
  color: #8a857d;
}
.pl-opt {
  position: relative;
  margin-bottom: calc(var(--pt) * 8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: calc(var(--pt) * 10);
  background: #faf7f2 url("assets/poll-option-sky.jpg") center / cover;
}
.pl-opt p {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 10) calc(var(--pt) * 12);
  font-size: calc(var(--pt) * 14);
  font-weight: 600;
}
.pl-opt p span { flex: 1; }
.pl-opt p b { font-family: var(--font-mono); font-size: calc(var(--pt) * 12); font-weight: 700; color: #4a4641; }
.pl-check { display: flex; color: #04842c; }
.pl-check svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); stroke-width: 3; }
.pl-voters { display: flex; gap: calc(var(--pt) * 4); padding: 0 calc(var(--pt) * 8) calc(var(--pt) * 10) calc(var(--pt) * 12); margin-top: calc(var(--pt) * -2); }
.pl-voters img { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); border-radius: 50%; object-fit: cover; }
/* Your pick wears the rainbow edge. */
.pl-opt--mine::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: calc(var(--pt) * 2);
  border-radius: inherit;
  background: linear-gradient(to bottom right, #ff5a5f, #ff8a3d, #e8a400, #2fa84f, #1e9be0, #7e57c2, #ff4d8b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
}
.stage.is-playing .pl-opt--mine::after { animation: anim-fade 0.3s ease var(--on) forwards; }
@media (prefers-reduced-motion: reduce) {
  .pl-opt--mine::after { opacity: 1; }
}
.pl-foot { margin-top: calc(var(--pt) * 12); font-family: var(--font-mono); font-size: calc(var(--pt) * 11); font-weight: 700; color: #8a857d; }

/* The dinner rota's row for today: green, with a TODAY pill. */
.gr-row--today {
  margin: 0 calc(var(--pt) * -10);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 10);
  border: 0;
  border-radius: calc(var(--pt) * 14);
  background: #e3efe0;
}
.gr-row--today .gr-date small:first-child,
.gr-row--today .gr-date b { color: #04842c; }
.gr-today {
  padding: calc(var(--pt) * 3) calc(var(--pt) * 8);
  border: calc(var(--pt) * 1.5) solid #04842c;
  border-radius: 999px;
  color: #04842c;
  font-family: var(--font-mono);
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  letter-spacing: calc(var(--pt) * 1);
  text-transform: uppercase;
}
.gr-swap svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }

/* The way out: hand the job over (the footer's button sits right under it). */
.handover .section-inner { padding-top: 2rem; padding-bottom: 4rem; text-align: center; }
.handover h2 { font-size: clamp(2rem, 5vw, 3rem); }
.handover .section-sub { margin: 0.8rem auto 0; }
.handover-note { margin-top: 1.4rem; font-weight: 700; }

@media (max-width: 40rem) {
  .how--groups .story + .story { margin-top: 3.5rem; }
  .gp-we { margin: 3.5rem auto; font-size: 1.12rem; }
}

/* ---------- about ---------- */

.about h2, .contact h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0.9rem 0 1rem;
}
.about .kicker, .contact .kicker {
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-sub {
  max-width: 36rem;
  font-size: 1.08rem;
  color: var(--muted);
}

/* Three cards side by side: the two of us, and how the thing is built. They
   collapse to one column on a phone. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.team-card {
  background: var(--grey);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1.2rem;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* The text-only card has no portrait to fill the top, so its content sits in
   the middle of the height the two portrait cards set. */
.team-card--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-card h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.team-study { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.7rem; }
.team-security { font-size: 0.92rem; color: var(--muted); }
.team-card .mono-line { color: var(--muted); margin-top: auto; padding-top: 0.7rem; }

/* The team band between the download band and contact: centred, the two of
   us side by side. Its top matches contact's, so the two share one gap rather
   than two stacked section paddings. */
.team-band .section-inner { max-width: 40rem; text-align: center; padding-top: 3rem; padding-bottom: 0; }
.team-band h2 { margin-bottom: 0; }
.team-band .team-grid { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }
.team-band .team-card { padding: 1rem; }

/* Security card alone at the bottom of the page. */
.security .section-inner { padding-top: 0; padding-bottom: 3rem; }
.security .team-card { max-width: 40rem; margin: 0 auto; }


/* Square slot for a portrait. Drop an <img class="team-photo"> in its place
   and it inherits the size and the rounding. */
.team-photo {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.9rem;
  margin-bottom: 1.1rem;
  display: block;
  /* Square slot, landscape photos: crop to the middle and sit high, where a
     face usually is. */
  object-position: 50% 32%;
}

.preview-note {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #6f6a58;
}


/* ---------- contact ---------- */

.contact .section-inner { text-align: center; }
.contact .section-sub { margin: 0 auto; }
/* Instagram on top, email under it, both as wide as the wider one. */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: max-content;
  max-width: 100%;
  margin: 2rem auto 0;
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  position: relative;
}
.contact-btn:hover { background: var(--pink); color: #141310; border-color: #141310; }
/* Meta's plain glyph in the text colour, same rule as the header link. */
.contact-btn svg { width: 0.9em; height: 0.9em; flex-shrink: 0; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0.6rem 0 0.8rem;
}
.footer-mark { height: 1.4rem; }
.footer p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.footer p a {
  color: inherit;
  text-underline-offset: 3px;
}


/* ---------- small screens ---------- */

@media (max-width: 56rem) {
  .why-grid { gap: 1.5rem; }
  .story { gap: 2rem; }
}

@media (max-width: 40rem) {
  .store-pill--bar { display: none; }
  /* The side cards peek in from the edges behind the middle one. */
  .hero-events { margin-top: 2.5rem; }
  .hero-event { width: 10.5rem; }
  .hero-event:nth-child(2) { width: 13.5rem; margin: 0 -3.25rem; }
  .hero-event:nth-child(1),
  .hero-event:nth-child(3) { translate: 0 1.6rem; }
  /* No button to close in on: the bar slides up out of view instead. */
  .topbar--hidden { transform: translateY(calc(-100% - 1rem)); }
  .topbar--hidden::before { inset: -2px; }
  .topbar--hidden > :not(.store-pill--bar) { opacity: 1; }
  .store-float { display: inline-flex; }
  .topbar { gap: 0.8rem; }
  /* Four links don't fit beside the logo: logo + language on row one, links on row two. */
  .topbar { row-gap: 0.6rem; border-radius: 1.4rem; padding: 0.7rem 1rem; }
  .topbar-nav { gap: 0.8rem; order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .insta-btn { margin-left: auto; }
  .topbar-nav a { font-size: 0.82rem; }
  .section-inner { padding-top: 4rem; padding-bottom: 4rem; }
  .hero-inner { padding-top: 3rem; }
  .hero-sub { font-size: 1.05rem; }
  .why-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .why h2, .how h2 { margin-bottom: 2.25rem; }
  /* One column, words first, every time. */
  .vs { flex-direction: column; gap: 1.5rem; margin-top: 2.25rem; }
  .vs-side--chat { transform: rotate(-2deg); }
  .story { grid-template-columns: 1fr; gap: 1.5rem; }
  .story:nth-of-type(even) .story-copy { order: 0; }
  .story + .story { margin-top: 3.5rem; }
  .stage { padding: 1.5rem 0.75rem; }
}