/* Thirdspace — the website.
 *
 * Dark on purpose, and committed: the app's own night palette (`Palette.cobalt`, dark side)
 * rather than its paper one. The screenshots are light-mode app shots, and a light page
 * showing light screenshots is a page where the product disappears into its own background.
 * On this ground every phone on the page lights up.
 *
 * Two rules carried over from the app's CLAUDE.md:
 *   · The one filled action is a 16px rounded rectangle, never a capsule. Small chips stay
 *     capsules; the big action does not.
 *   · Serif for what a section is about, sans for what it says. `ui-serif` is New York on
 *     Apple hardware and `-apple-system` is SF, so on an iPhone this page is set in the app's
 *     own two faces with nothing downloaded.
 */

:root {
  --canvas: #0B0F14;
  --surface: #18222F;
  --surface-lit: #1E2A3A;
  --block: #111A26;
  --primary: #98C1FF;
  --primary-fill: #2E6FD8;
  --on-primary: #FFFFFF;
  --ink: #E9EEF4;
  --ink-soft: #9DABBC;
  --ink-faint: #8493A5; /* 4.6:1 on the lightest surface it sits on; #6C7A8B was 3.7:1 on cards. */
  --rule: #253243;
  --rule-soft: #1B2532;
  --danger: #F2897C;

  --radius-card: 22px;
  --radius-action: 16px;
  --radius-capsule: 9999px;
  --glow: rgba(90, 150, 255, .22);

  /* The app's recognition colour for the walk (MeetUpView), and its rating star (Palette). */
  --teal: #1E8A7E;
  --star: #F8A87E;

  /* Motion. One curve for things arriving (a strong ease-out: fast start, long settle), one
     with a little overshoot for things that land, one in-out for things that travel. Built-in
     `ease` is too weak to read as intentional. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-land: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-travel: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-colorway="aubergine"] {
  --canvas: #100C12; --surface: #291F2D; --surface-lit: #332638; --block: #1A131E;
  --primary: #E2A6D6; --primary-fill: #8E3B78; --ink: #F1E8EF;
  --ink-soft: #AE9EAA; --ink-faint: #806F7C; --rule: #382B3C; --rule-soft: #241B28;
  --glow: rgba(200, 120, 185, .20);
}
[data-colorway="terracotta"] {
  --canvas: #120B06; --surface: #2C1E16; --block: #1C1209; --surface-lit: #372619;
  --primary: #F6B08A; --primary-fill: #B25A24; --ink: #F4E9E0;
  --ink-soft: #B4A295; --ink-faint: #87766B; --rule: #3C2C21; --rule-soft: #261A12;
  --glow: rgba(240, 150, 100, .20);
}
[data-colorway="graphite"] {
  --canvas: #0C0D0F; --surface: #21242A; --block: #14161A; --surface-lit: #292D34;
  --primary: #C3CAD3; --primary-fill: #56616F; --ink: #E9EBEE;
  --ink-soft: #9EA5AF; --ink-faint: #747B85; --rule: #2E323A; --rule-soft: #1A1D22;
  --glow: rgba(170, 182, 198, .16);
}
[data-colorway="slate"] {
  --canvas: #080E13; --surface: #19262F; --block: #0E181F; --surface-lit: #1F2F3A;
  --primary: #8FCCE8; --primary-fill: #1A7CA5; --ink: #E5EEF3;
  --ink-soft: #96A8B2; --ink-faint: #6D7F89; --rule: #24323B; --rule-soft: #16212A;
  --glow: rgba(110, 190, 230, .20);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* No overflow rule here: on body it would make body the scroll container and break the sticky story stage. The clip lives on html. */
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

h1, h2, h3 {
  font-family: ui-serif, "New York", Charter, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: var(--primary); }

/* ---- Header ---------------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 15, 20, .72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--rule-soft);
}

.header-content {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 64px;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink); text-decoration: none;
}

.brand-logo { width: 40px; height: 22px; }

.lang-selector {
  display: flex; gap: 2px; padding: 3px;
  background: var(--block);
  border: 1px solid var(--rule);
  border-radius: var(--radius-capsule);
}

.lang-btn {
  border: 0; background: transparent; color: var(--ink-faint);
  font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
  padding: 5px 13px; border-radius: var(--radius-capsule); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.lang-btn:hover { color: var(--ink); }
.lang-btn.active { background: var(--surface-lit); color: var(--ink); }


.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 80;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface-lit); color: var(--ink); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---- Hero: the pitch, and the map it is about --------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 56px;
  padding: 64px 28px 84px;
  /* The glow below is wider than a phone. Clipped here, because html's clip alone does not
     stop a mobile browser widening its layout viewport to fit it. */
  overflow-x: clip;
}

/* One light source behind the map rather than a gradient across the page: it gives the
   map somewhere to sit without turning the background into the subject. */
.hero::before {
  content: "";
  position: absolute;
  top: -10%; right: -6%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.05;
  margin-bottom: 22px;
}

.hero-sub {
  font-size: clamp(16.5px, 1.5vw, 19px);
  color: var(--ink-soft);
  max-width: 50ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* How to get it, said plainly under the buttons rather than promised by them. */
.hero-status {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 22px; max-width: 46ch;
  font-size: 14px; line-height: 1.5; color: var(--ink-faint);
}

.status-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Hero entrance: the headline settles first, everything under it follows on one curve. */
.motion .hero-copy > * { opacity: 0; transform: translateY(16px); animation: hero-in .9s var(--ease-out) forwards; }
.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
.motion .hero-copy > :nth-child(3) { animation-delay: .16s; }
.motion .hero-copy > :nth-child(4) { animation-delay: .24s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* ---- The live map ------------------------------------------------------------------- */

.live-map-wrap { margin: 0; width: 100%; max-width: 460px; justify-self: end; }

.live-map {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: #0E1620;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 90px -24px var(--glow);
}

.motion .live-map { opacity: 0; transform: scale(.97); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out); }
.motion .live-map.is-on { opacity: 1; transform: none; }

.map-ground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-base { fill: #0E1620; }
.g-blocks rect { fill: #121C29; }
.g-park { fill: #13261F; }
.g-river { fill: #0C1F36; }
.g-streets path { fill: none; stroke: #1B2838; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.g-avenue { fill: none; stroke: #243449; stroke-width: 13; stroke-linecap: round; }
.g-label { fill: #3E4F64; font: 600 8.5px/1 -apple-system, system-ui, sans-serif; letter-spacing: 1.6px; }
.g-radar circle { fill: none; stroke: color-mix(in srgb, var(--primary) 16%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
.g-link { stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 3 4; stroke-linecap: round; opacity: 0; transition: opacity .5s var(--ease-out); }
.g-link.is-on { opacity: .9; }

/* The streets draw themselves in, avenue first. A one-off, so stroke-dashoffset is fine here. */
.motion .g-streets path, .motion .g-avenue { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); }
.motion .is-on .g-streets path, .motion .is-on .g-avenue { stroke-dashoffset: 0; }
.motion .is-on .g-streets path:nth-child(2) { transition-delay: .08s; }
.motion .is-on .g-streets path:nth-child(3) { transition-delay: .16s; }
.motion .is-on .g-streets path:nth-child(4) { transition-delay: .12s; }
.motion .is-on .g-streets path:nth-child(5) { transition-delay: .2s; }
.motion .is-on .g-streets path:nth-child(6) { transition-delay: .28s; }
.motion .g-label, .motion .g-radar { opacity: 0; transition: opacity 1s var(--ease-out) .7s; }
.motion .is-on .g-label, .motion .is-on .g-radar { opacity: 1; }

/* The sweep from LookingView, centred on you. It turns while the search is running. */
.map-sweep {
  position: absolute; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 26%, transparent), transparent 16%, transparent);
  -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0 30%, transparent 62%);
  transform: translate(-50%, -50%) rotate(40deg);
  opacity: .8;
  pointer-events: none;
}
.motion .map-sweep { opacity: 0; transition: opacity 1.2s var(--ease-out) .9s; }
.motion .is-on .map-sweep { opacity: .85; animation: sweep 7s linear infinite; }
.motion .is-paused .map-sweep, .motion .is-paused .you-ring { animation-play-state: paused; }
@keyframes sweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.map-layer { position: absolute; inset: 0; }

/* You: a ringed locator, deliberately not a bigger version of the dots around you. */
.you { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.motion .you { transition: transform 1.6s var(--ease-out); }
.motion .map-sweep { transition: opacity 1.2s var(--ease-out) .9s, left 1.6s var(--ease-out), top 1.6s var(--ease-out); }
.motion .g-radar { transition: opacity 1s var(--ease-out) .7s, transform 1.6s var(--ease-out); }
.you-dot, .you-ring { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; }
.you-dot { background: #3D8BFF; box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0, 0, 0, .5); }
.you-ring { background: color-mix(in srgb, #3D8BFF 55%, transparent); opacity: 0; }
.motion .you-dot { transform: scale(0); transition: transform .7s var(--ease-land) .35s; }
.motion .is-on .you-dot { transform: scale(1); }
.motion .is-on .you-ring { animation: ring 3.2s var(--ease-out) 1s infinite; }
.motion .is-on .you-ring + .you-ring { animation-delay: 2.6s; }
@keyframes ring {
  from { opacity: .55; transform: scale(1); }
  to   { opacity: 0; transform: scale(5.5); }
}

.spot { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.spot::before { content: ""; position: absolute; left: -24px; top: -24px; width: 48px; height: 58px; }
.spot-pin { transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.spot:hover .spot-pin { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.spot:active .spot-pin { transform: scale(.92); }
.spot:focus-visible { outline: none; }
.spot:focus-visible .spot-pin { box-shadow: 0 0 0 3px var(--primary); }
.spot-pin {
  position: absolute; left: -17px; top: -17px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(30, 42, 58, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.spot-pin svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.spot-count {
  position: absolute; right: -8px; top: -7px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--primary); color: #0B1422;
  font: 700 11px/1 -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #0E1620;
  transition: transform .4s var(--ease-land), opacity .3s var(--ease-out);
}
.spot.is-empty .spot-count { transform: scale(0); opacity: 0; }
.spot-label {
  position: absolute; top: 22px; left: 0; transform: translateX(-50%);
  white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-soft); text-shadow: 0 1px 6px #0E1620, 0 0 2px #0E1620;
}
/* Pins drop in one after another, landing with a little give. */
.motion .spot-pin { opacity: 0; transform: translateY(-22px) scale(.7); transition: transform .7s var(--ease-land), opacity .4s var(--ease-out); transition-delay: var(--d, 0s); }
.motion .spot-label { opacity: 0; transition: opacity .6s var(--ease-out); transition-delay: calc(var(--d, 0s) + .25s); }
.motion .is-on .spot-pin { opacity: 1; transform: none; }
.motion .is-on .spot-label { opacity: 1; }

.person {
  position: absolute; left: -4.5px; top: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px #0E1620;
  will-change: transform;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), opacity .6s var(--ease-out);
}
.person { padding: 0; border: 0; cursor: pointer; }
.person::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.person:hover { background: #fff; }
.person.is-match { background: #fff; box-shadow: 0 0 0 2px #0E1620, 0 0 0 7px color-mix(in srgb, var(--primary) 35%, transparent); }
.motion .person.is-arriving { opacity: 0; }

/* The two controls at the top of the search screen: one glass shape, the left one red-rimmed. */
.map-bar { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 8px; }
.glass-pill {
  font-family: inherit; cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
  padding: 7px 13px; border-radius: var(--radius-capsule);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap;
  background: rgba(24, 34, 47, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.glass-pill:hover { background: rgba(40, 54, 72, .7); }
.glass-pill:active { transform: scale(.96); }
.glass-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pill-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.motion .map-bar { opacity: 0; transform: translateY(-8px); transition: opacity .7s var(--ease-out) 1.1s, transform .8s var(--ease-out) 1.1s; }
.motion .is-on .map-bar { opacity: 1; transform: none; }

.map-pill, .map-sheet {
  position: absolute; left: 14px; right: 14px;
  background: rgba(22, 32, 45, .72);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7);
}

.map-pill {
  bottom: 14px; padding: 12px 18px; border-radius: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.map-pill-place { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.map-pill-place strong { font-size: 16px; }
.map-pill-place span, .map-pill-count span { font-size: 12px; color: var(--ink-soft); }
.map-pill-count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.map-pill-count strong {
  font-family: ui-serif, "New York", Charter, Georgia, serif;
  font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-block;
}
.motion .map-pill { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out) .9s, transform .9s var(--ease-out) .9s; }
.motion .is-on .map-pill { opacity: 1; transform: none; }
.map-pill { transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.map-pill.is-hidden { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none; }

/* The sheet: the bottom of the app's screen — a match, the walk, the conversation, the rating.
   Rises over the pill; the tall ones replace it, as the app's own sheets do. */
.map-sheet {
  bottom: 98px; padding: 12px 14px; border-radius: 20px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .4s var(--ease-out), transform .55s var(--ease-out), bottom .45s var(--ease-out);
}
.map-sheet.is-shown { opacity: 1; transform: none; }
.map-sheet.is-tall { bottom: 14px; padding: 16px; gap: 12px; }
.sheet-row { display: flex; gap: 12px; align-items: center; }
.sheet-head { display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; color: var(--ink-soft); }
.sheet-head strong { font-size: 16px; color: var(--ink); }
.sheet-head em { font-style: normal; font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.sheet-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
/* Secondary actions are glass with ink labels; the one filled action is a 12px rounded
   rectangle in primary-fill — the page's big CTA shape, scaled to a card. */
.sheet-btn {
  font: 600 13px/1.2 inherit; font-family: inherit; color: var(--ink); cursor: pointer;
  padding: 9px 14px; border-radius: var(--radius-capsule);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .18s var(--ease-out), background-color .25s var(--ease-out);
}
.sheet-btn:hover { background: rgba(255, 255, 255, .12); }
.sheet-btn:active { transform: scale(.96); }
.sheet-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sheet-btn.is-primary { background: var(--primary-fill); border-color: rgba(255, 255, 255, .22); color: #fff; border-radius: 12px; box-shadow: 0 6px 18px -6px rgba(46, 111, 216, .7); }
.sheet-btn.is-primary:hover { background: #3A7BE4; }
.sheet-btn.is-picked { background: color-mix(in srgb, var(--primary) 26%, transparent); border-color: var(--primary); }
.sheet-lead { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.sheet-lead.is-centered { text-align: center; padding: 4px 0; color: var(--ink); }
.sheet-starter { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-family: ui-serif, "New York", Charter, Georgia, serif; font-size: 15px; line-height: 1.4; color: var(--ink); }
.sheet-clock { margin-right: auto; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sheet-q { margin-right: auto; font-size: 12.5px; color: var(--ink-soft); }
.sheet-dots { margin-left: auto; display: flex; gap: 4px; }
.sheet-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .3; }
.motion .sheet-dots i { animation: dots 1.1s var(--ease-out) infinite; }
.motion .sheet-dots i:nth-child(2) { animation-delay: .15s; }
.motion .sheet-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 40% { opacity: 1; transform: translateY(-3px); } }

/* The walk: a distance that closes, and the colour you both hold up (MeetUpView). */
.mw { display: flex; gap: 12px; align-items: stretch; }
.mw-dial { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.mw-dial b { font-family: ui-serif, "New York", Charter, Georgia, serif; font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.mw-dial small { font-size: 13px; color: var(--ink-soft); }
.mw-colour { width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 700; }
.mw-colour svg { width: 26px; height: 26px; fill: #fff; }
.mw-hint { margin: 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.mw-hint.is-close { color: var(--primary); font-weight: 600; }

/* Stars: the app's rating colour. */
.stars { display: flex; justify-content: center; gap: 6px; }
.star { padding: 4px; border: 0; background: none; cursor: pointer; transition: transform .2s var(--ease-land); }
.star svg { width: 30px; height: 30px; fill: none; stroke: var(--star); stroke-width: 1.6; stroke-linejoin: round; }
.star.is-on svg { fill: var(--star); }
.star:hover { transform: scale(1.12); }
.star:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

/* Stopped, and focused: the map steps back. */
.live-map .person, .live-map .spot { transition: opacity .5s var(--ease-out); }
.is-stopped .person, .is-stopped .spot { opacity: .35; }
.motion .is-on.is-stopped .map-sweep { opacity: 0; transition: opacity .35s var(--ease-out); animation-play-state: paused; }
.is-stopped .you-ring { animation-play-state: paused; }
.is-focused .person:not(.is-match), .is-focused .spot { opacity: .25; pointer-events: none; }

/* "Pocket it": the screen goes dark; then the buzz. */
.map-pocket {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center; cursor: pointer;
  background: rgba(5, 8, 12, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.map-pocket.is-shown { opacity: 1; }
.pocket-text { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.pocket-text strong { font-family: ui-serif, "New York", Charter, Georgia, serif; font-size: 22px; font-weight: 600; color: var(--ink); }
.pocket-buzz {
  position: absolute; left: 14px; right: 14px; top: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 14px; border-radius: 18px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: rgba(40, 52, 68, .92); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(-120%); pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .6s var(--ease-land);
}
.pocket-buzz b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.is-buzzing .pocket-buzz { opacity: 1; transform: none; pointer-events: auto; }
.motion .is-buzzing .pocket-buzz { animation: buzz .5s var(--ease-out) .6s 2; }
@keyframes buzz { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

.match-avatar.is-spot { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.match-avatar.is-spot svg { stroke: var(--ink); }
.match-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-fill); }
.match-avatar svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.match-text { display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; color: var(--ink-soft); min-width: 0; }
.match-text strong { font-size: 15px; color: var(--ink); }
.match-text em { font-style: normal; font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.match-close { color: var(--primary); }

.map-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); text-align: right; }

/* ---- The phone --------------------------------------------------------------------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(160deg, #38465a 0%, #1a2331 48%, #0f151e 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .06) inset,
    0 40px 90px -20px rgba(0, 0, 0, .8),
    0 0 70px -10px var(--glow);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  background: var(--surface);
}

/* ---- Sections ---------------------------------------------------------------------- */

.section { padding: 76px 28px; }

.section-head { max-width: 62ch; margin-bottom: 40px; }

.section-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; margin-bottom: 14px; }

.section-sub { font-size: 17px; color: var(--ink-soft); }

.rule { height: 1px; background: var(--rule-soft); border: 0; margin: 0 28px; }

/* Default reveal: title first, the line under it a beat later. Used for headings only;
   everything else on the page has its own motion. */
.motion [data-reveal=""] > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.motion [data-reveal=""] > :nth-child(2) { transition-delay: .09s; }
.motion [data-reveal=""].is-in > * { opacity: 1; transform: none; }

/* ---- Buttons ----------------------------------------------------------------------- */

.action {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--radius-action);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--primary-fill) 70%, transparent),
              0 1px 0 rgba(255, 255, 255, .22) inset,
              0 0 0 1px rgba(255, 255, 255, .08) inset;
  transition: transform .2s var(--ease-out), filter .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

/* A band of light crosses the button on hover: the glass the app puts over the same colour,
   moved rather than drawn. */
.action::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .8s var(--ease-out);
}

@media (hover: hover) {
  .action:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .action:hover::after { transform: translateX(110%); }
}
.action:active { transform: scale(.97); transition-duration: .08s; }
.action:disabled { opacity: .55; cursor: default; transform: none; filter: none; }

.action-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-action);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}

@media (hover: hover) { .action-quiet:hover { background: var(--surface-lit); border-color: var(--primary); } }
.action-quiet:active { transform: scale(.97); transition-duration: .08s; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ---- Cards ------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.place-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px;
}

/* ---- The story: one round of the app ----------------------------------------------- */

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 80px;
}

.stage-inner { position: sticky; top: 92px; padding-left: 30px; }

.stage-phone { width: min(300px, calc((100vh - 160px) * .459)); margin: 0 auto; transition: transform .9s var(--ease-out); }
/* Step five is "put it away": the phone leans out of the way. */
.stage-phone.is-pocketed { transform: translateY(14px) rotate(-3deg); }

.stage-screens { position: relative; aspect-ratio: 470 / 1024; border-radius: 34px; overflow: hidden; background: var(--surface); }
.stage-screen { position: absolute; inset: 0; opacity: 0; transform: translateY(5%) scale(.98); transition: opacity .45s var(--ease-out), transform .7s var(--ease-out); }
.stage-screen.is-current { opacity: 1; transform: none; }
.stage-screen.is-past { transform: translateY(-3%) scale(.98); }
.stage-screen img { border-radius: 0; height: 100%; object-fit: cover; }

.stage-rail { position: absolute; left: 0; top: 12%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.stage-rail-fill { display: block; height: 100%; background: var(--primary); transform-origin: top; transform: scaleY(0); }

.stage-count { margin-top: 18px; text-align: center; font-size: 13px; letter-spacing: .12em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.stage-count span { color: var(--ink); }

.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step { min-height: 76vh; display: flex; align-items: center; }
.story-step:first-child { min-height: 60vh; }
.step-phone { display: none; }

.step-copy { max-width: 46ch; transition: opacity .5s var(--ease-out); }
.motion .story-step:not(.is-active) .step-copy { opacity: .32; }
.step-num { display: block; margin-bottom: 10px; font: 600 15px/1 ui-serif, "New York", Charter, Georgia, serif; letter-spacing: .08em; color: var(--primary); }
.step-copy h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; margin-bottom: 12px; }
.step-copy > p { color: var(--ink-soft); font-size: 17px; }

.readout { margin-top: 26px; }

/* 1 · Intent: the selection lands on the chat, the puck slides to thirty minutes. */
.r-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.r-choice {
  padding: 8px 14px; border-radius: var(--radius-capsule);
  border: 1px solid var(--rule); background: var(--block);
  font-size: 14px; color: var(--ink-soft);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.r-choice.is-on { background: var(--primary-fill); border-color: transparent; color: #fff; }
.r-segment {
  position: relative; margin-top: 12px;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: var(--radius-capsule);
  background: var(--block); border: 1px solid var(--rule);
}
.r-seg { position: relative; z-index: 1; padding: 6px 16px; text-align: center; font-size: 13.5px; color: var(--ink-faint); white-space: nowrap; transition: color .3s var(--ease-out); }
.r-seg.is-on { color: var(--ink); }
.r-puck {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  border-radius: var(--radius-capsule); background: var(--surface-lit);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transform: translateX(calc(var(--i, 1) * 100%));
  transition: transform .6s var(--ease-out);
}

/* 2 · Reasons: said one at a time, the way the card lists them. */
.r-reasons { list-style: none; padding: 0; }
.r-reasons li { display: flex; gap: 11px; align-items: center; font-size: 15.5px; }
.r-reasons li + li { margin-top: 10px; }
.r-reasons svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.motion .r-reasons li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.motion .is-active .r-reasons li { opacity: 1; transform: none; }
.motion .is-active .r-reasons li:nth-child(2) { transition-delay: .14s; }
.motion .is-active .r-reasons li:nth-child(3) { transition-delay: .28s; }

/* 3 · The handshake: your yes is already there; theirs arrives, and only then do they meet. */
.r-handshake {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; row-gap: 14px;
  max-width: 340px;
}
.hs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.hs-disc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.hs-disc svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-you .hs-disc { background: var(--primary-fill); }
.hs-them .hs-disc {
  border: 2px dashed color-mix(in srgb, var(--primary) 60%, transparent);
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), transform .5s var(--ease-land);
}
.hs-them svg { opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease-out), transform .5s var(--ease-land); }
.hs-path { display: flex; justify-content: center; gap: 9px; }
.hs-path i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .35; transition: opacity .4s var(--ease-out); }
.motion .is-active .hs-path i { animation: hop 1.2s var(--ease-travel) infinite; }
.motion .is-active .hs-path i:nth-child(2) { animation-delay: .15s; }
.motion .is-active .hs-path i:nth-child(3) { animation-delay: .3s; }
.motion .is-active .hs-them .hs-disc { animation: turn 9s linear infinite; }
@keyframes hop { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes turn { to { transform: rotate(360deg); } }
.hs-both { grid-column: 1 / -1; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--primary); }
.r-handshake.is-both .hs-them .hs-disc { animation: none; background: var(--primary-fill); border-color: transparent; transform: scale(1.04); }
.r-handshake.is-both .hs-them svg { opacity: 1; transform: none; }
.r-handshake.is-both .hs-path i { animation: none; opacity: 1; }
.motion .hs-both { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.motion .r-handshake.is-both .hs-both { opacity: 1; transform: none; }

/* 4 · The walk: the distance follows your scroll down, and the swatch warms as it closes. */
.r-walk { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.walk-dial { position: relative; width: 108px; height: 108px; border-radius: 50%; border: 1.5px solid var(--rule); display: grid; place-items: center; }
.walk-arm { position: absolute; inset: 0; transform: rotate(var(--deg, -18deg)); }
.walk-needle { position: absolute; left: 50%; top: -13px; width: 22px; height: 22px; margin-left: -11px; fill: var(--primary); }
.walk-num { font: 600 30px/1 ui-serif, "New York", Charter, Georgia, serif; font-variant-numeric: tabular-nums; }
.walk-num small { font-size: 15px; color: var(--ink-soft); }
.walk-swatch {
  position: relative; width: 108px; height: 108px; border-radius: 16px;
  /* The purple the app hands out on the walk screenshot beside it. */
  background: #C431D9; display: grid; place-items: center;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, #C431D9 80%, transparent);
  transform: scale(calc(.92 + var(--near, 0) * .08));
}
.walk-swatch svg { width: 38px; height: 38px; fill: #fff; }
.walk-swatch span { position: absolute; left: 11px; bottom: 8px; font-size: 12px; font-weight: 600; color: #fff; }
.walk-status { width: 100%; font-size: 14.5px; color: var(--ink-soft); transition: color .3s var(--ease-out); }
.walk-status.is-near { color: var(--primary); font-weight: 600; }

/* 5 · The starter. The clock under it is the conversation already running. */
.starter-card {
  max-width: 380px; padding: 18px 20px; border-radius: 16px;
  background: #13213A; border: 1px solid var(--rule);
  font: 500 18px/1.42 ui-serif, "New York", Charter, Georgia, serif; color: var(--ink);
}
.motion .starter-card { transform: translateY(8px) rotate(-1deg); opacity: .4; transition: transform .7s var(--ease-out), opacity .5s var(--ease-out); }
.motion .is-active .starter-card { transform: none; opacity: 1; }
.starter-timer { margin-top: 12px; font-size: 14px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.starter-timer span:first-child { color: var(--ink); }
/* The readout shows what the app shows: a time bar with the minutes left.
 * The running clock was never in the app — ConnectedView draws this bar. */
.starter-bar { margin-top: 12px; }
.starter-have { font-size: 12px; color: var(--ink-faint); }
.starter-track { margin-top: 6px; height: 6px; background: var(--block); border-radius: 6px; overflow: hidden; }
.starter-fill { display: block; height: 100%; width: 100%; background: var(--primary); border-radius: 6px; transform-origin: left; }
.motion .starter-fill { animation: bar-draw 1.4s var(--ease-out) both; }
@keyframes bar-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.starter-left { margin-top: 6px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 6 · Rating: the stars fill left to right, in the app's own star colour. */
.stars { display: flex; gap: 8px; }
.stars i {
  width: 30px; height: 30px; background: var(--rule);
  clip-path: polygon(50% 3%, 62% 36%, 97% 37%, 69% 58%, 79% 93%, 50% 72%, 21% 93%, 31% 58%, 3% 37%, 38% 36%);
}
.is-active .stars i, html:not(.motion) .stars i { background: var(--star); }
.motion .is-active .stars i { animation: star-pop .5s var(--ease-land) backwards; transition: background-color .2s var(--ease-out); }
.motion .is-active .stars i:nth-child(1) { animation-delay: .05s; transition-delay: .05s; }
.motion .is-active .stars i:nth-child(2) { animation-delay: .15s; transition-delay: .15s; }
.motion .is-active .stars i:nth-child(3) { animation-delay: .25s; transition-delay: .25s; }
.motion .is-active .stars i:nth-child(4) { animation-delay: .35s; transition-delay: .35s; }
.motion .is-active .stars i:nth-child(5) { animation-delay: .45s; transition-delay: .45s; }
@keyframes star-pop { from { transform: scale(.4); } }
.rating-q { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }
.rating-yes { display: inline-block; margin-left: 8px; padding: 3px 12px; border-radius: var(--radius-capsule); background: var(--surface-lit); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; }

/* ---- Campus: an argument in three steps -------------------------------------------- */

.campus-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.campus-list li { position: relative; padding-top: 26px; }
.campus-list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left; }
.campus-list li::after { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 3px; border-radius: 2px; background: var(--primary); transform-origin: left; }
.campus-num { display: block; margin-bottom: 8px; font: 600 40px/1 ui-serif, "New York", Charter, Georgia, serif; color: color-mix(in srgb, var(--primary) 55%, var(--ink-faint)); }
.campus-list h3 { font-size: 21px; margin-bottom: 9px; }
.campus-list p { color: var(--ink-soft); font-size: 15.5px; }

.motion [data-reveal="line"]::before, .motion [data-reveal="line"]::after { transform: scaleX(0); transition: transform 1s var(--ease-out); }
.motion [data-reveal="line"] > * { opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--ease-out) .25s, transform .8s var(--ease-out) .25s; }
.motion [data-reveal="line"].is-in::before, .motion [data-reveal="line"].is-in::after { transform: none; }
.motion [data-reveal="line"].is-in > * { opacity: 1; transform: none; }
.motion .campus-list li:nth-child(2), .motion .campus-list li:nth-child(2)::before, .motion .campus-list li:nth-child(2)::after, .motion .campus-list li:nth-child(2) > * { transition-delay: .14s; }
.motion .campus-list li:nth-child(3), .motion .campus-list li:nth-child(3)::before, .motion .campus-list li:nth-child(3)::after, .motion .campus-list li:nth-child(3) > * { transition-delay: .28s; }

/* ---- The third place, as a route ---------------------------------------------------- */

.route { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.route::before {
  content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rule), var(--rule) 55%, var(--primary));
  transform-origin: left;
}
.route-stop { position: relative; }
.route-dot { position: relative; display: block; width: 16px; height: 16px; margin-bottom: 20px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--ink-faint); }
.is-third .route-dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent); }
.is-third .route-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; }
.route-stop h3 { font-size: 22px; margin-bottom: 8px; }
.route-stop p { color: var(--ink-soft); font-size: 15.5px; max-width: 30ch; }
.is-third .place-tag { color: var(--primary); }

.motion [data-reveal="route"]::before { transform: scaleX(0); transition: transform 1.5s var(--ease-travel); }
.motion [data-reveal="route"].is-in::before { transform: none; }
.motion [data-reveal="route"] .route-dot { transform: scale(0); transition: transform .6s var(--ease-land); }
.motion [data-reveal="route"] .route-stop > :not(.route-dot) { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.motion [data-reveal="route"].is-in .route-dot, .motion [data-reveal="route"].is-in .route-stop > * { transform: none; opacity: 1; }
.motion [data-reveal="route"] .route-stop:nth-child(2) > * { transition-delay: .55s; }
.motion [data-reveal="route"] .route-stop:nth-child(3) > * { transition-delay: 1.15s; }
.motion [data-reveal="route"].is-in .is-third .route-dot::after { animation: arrive 1.6s var(--ease-out) 1.5s 2; }
@keyframes arrive { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }

/* ---- Clubs ---------------------------------------------------------------------------- */

.clubs { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 72px; align-items: center; }
.clubs-copy { overflow-x: clip; }
.club-rows { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.club-rows li { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--rule); }
.club-date { flex: none; width: 54px; height: 54px; border-radius: 12px; background: var(--block); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.club-date b { font-size: 11px; letter-spacing: .08em; color: var(--primary); }
.club-date span { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.club-name { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.club-name strong { font-size: 16px; }
.club-name span { font-size: 13px; color: var(--ink-faint); }
.motion [data-reveal="rows"] li { opacity: 0; transform: translateX(28px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.motion [data-reveal="rows"].is-in li { opacity: 1; transform: none; }
.motion [data-reveal="rows"] li:nth-child(2) { transition-delay: .11s; }
.motion [data-reveal="rows"] li:nth-child(3) { transition-delay: .22s; }
.clubs-phone { max-width: 280px; will-change: transform; }

/* The waitlist card rises as one object: it is a form, not a sequence. */
.motion [data-reveal="card"] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.motion [data-reveal="card"].is-in { opacity: 1; transform: none; }

/* ---- Waitlist ---------------------------------------------------------------------- */

.waitlist-card { max-width: 660px; padding: 38px 34px; }
.waitlist-card .section-title { font-size: 30px; }
.waitlist-card .section-sub { margin-bottom: 28px; font-size: 16px; }
.waitlist-card .form-group, .waitlist-card .waitlist-submit { max-width: 470px; }

.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-group label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }

.form-input, .form-textarea {
  width: 100%; padding: 14px 16px;
  border-radius: 14px;
  background: var(--block);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: inherit; font-size: 16px; outline: none;
  transition: border-color .15s ease, background .15s ease;
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-faint); }
.form-input:focus, .form-textarea:focus { border-color: var(--primary); background: var(--surface-lit); }
.form-textarea { min-height: 120px; resize: vertical; }

/* The dropdown list is drawn by the OS, so its colours are pinned rather than inherited —
   otherwise it is white text on a white list. */
select.form-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239DABBC' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 42px; cursor: pointer;
}

select.form-input option { background: #18222F; color: #E9EEF4; }

.waitlist-submit { width: 100%; margin-top: 4px; }

.form-status {
  margin-top: 14px; padding: 12px 15px;
  border-radius: 12px;
  background: var(--block); border: 1px solid var(--rule);
  color: var(--ink); font-size: 15px;
}

.waitlist-privacy { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); }

.waitlist-meter {
  margin-bottom: 28px; padding: 18px;
  border-radius: 16px; background: var(--block); border: 1px solid var(--rule);
  max-width: 470px;
}

.waitlist-meter-note { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-faint); }
.waitlist-bars { display: flex; flex-direction: column; gap: 13px; }

.waitlist-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}

.waitlist-bar-city { font-size: 15px; font-weight: 600; }
.waitlist-bar-count { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.waitlist-bar-track { height: 6px; border-radius: var(--radius-capsule); background: var(--rule); overflow: hidden; }
.waitlist-bar-fill { height: 100%; border-radius: var(--radius-capsule); background: var(--primary); transition: width .4s ease; }

.waitlist-bar-plain {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 11px; border-top: 1px solid var(--rule);
}

/* ---- Footer ------------------------------------------------------------------------ */

footer { border-top: 1px solid var(--rule-soft); padding: 34px 28px 52px; color: var(--ink-faint); font-size: 14px; }
.footer-content { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ---- Modals ------------------------------------------------------------------------ */

.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4, 7, 11, .7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.modal-overlay.active { display: flex; }
.motion .modal-overlay.active { animation: overlay-in .3s var(--ease-out); }
.motion .modal-overlay.active .modal-card { animation: card-in .45s var(--ease-out); }
@keyframes overlay-in { from { opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.modal-card {
  position: relative; width: 100%; max-width: 660px; max-height: 84vh; overflow-y: auto;
  padding: 36px 34px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.modal-card h2 { font-size: 28px; margin-bottom: 10px; }
.modal-card h4 { font-size: 16.5px; font-weight: 600; margin: 0 0 6px; font-family: inherit; color: var(--ink); }
.modal-card p { color: var(--ink-soft); font-size: 15.5px; }
.legal-body { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; }

.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px;
  border: 1px solid var(--rule); border-radius: var(--radius-capsule);
  background: var(--block); color: var(--ink-soft);
  font-size: 17px; line-height: 1; cursor: pointer;
}

.modal-close:hover { background: var(--surface-lit); color: var(--ink); }


.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.contact-mail { font-size: 14.5px; }

/* ---- Small screens ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 44px 28px 64px; }
  .hero::before { right: -40%; top: 30%; }
  .live-map-wrap { justify-self: center; max-width: 440px; }

  /* No sticky phone on a phone: each step brings its own screen, sliding in from the side
     it sits on, and the text never dims. */
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-stage { display: none; }
  .story-step, .story-step:first-child { min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; padding: 30px 0; }
  .story-step + .story-step { border-top: 1px solid var(--rule-soft); }
  .step-phone { display: block; max-width: 150px; margin: 0; padding: 6px; border-radius: 28px; }
  .step-phone img { border-radius: 22px; }
  .motion .story-step:not(.is-active) .step-copy { opacity: 1; }
  .motion .step-phone { opacity: 0; transform: translateX(-22px) rotate(-2deg); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  .motion .story-step.is-seen .step-phone { opacity: 1; transform: none; }

  .campus-list { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .clubs { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .clubs-phone { max-width: 250px; }
}

@media (max-width: 720px) {
  /* The route turns vertical: the line runs down the left edge instead of across. */
  .route { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-left: 36px; }
  .route::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--rule), var(--rule) 55%, var(--primary)); transform-origin: top; }
  .motion [data-reveal="route"]::before { transform: scaleY(0); }
  .route-dot { position: absolute; left: -36px; top: 4px; margin: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .section { padding: 52px 20px; }
  .container { padding: 0 20px; }
  .hero { padding: 36px 20px 56px; }
  .rule { margin: 0 20px; }
  .waitlist-card { padding: 28px 22px; }
  .action, .action-quiet { width: 100%; }
  .hero-actions { flex-direction: column; }
  .story-step, .story-step:first-child { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .step-phone { max-width: 210px; padding: 7px; border-radius: 32px; }
  .step-phone img { border-radius: 26px; }
  .story-step:nth-child(even) .step-phone { margin-left: auto; }
  .motion .story-step:nth-child(even) .step-phone { transform: translateX(22px) rotate(2deg); }
  .motion .story-step.is-seen .step-phone { transform: none; }
  .map-bar .glass-pill { font-size: 11.5px; padding: 6px 11px; }
  /* The overlays keep their type size while the map shrinks, so they are trimmed to leave
     the places above them visible. */
  .map-pill { left: 10px; right: 10px; bottom: 10px; padding: 9px 14px; border-radius: 18px; }
  .map-pill-count strong { font-size: 26px; }
  .map-sheet { left: 10px; right: 10px; bottom: 76px; padding: 10px 12px; border-radius: 16px; }
  .map-sheet.is-tall { bottom: 10px; padding: 12px; gap: 10px; }
  .mw-dial b { font-size: 32px; }
  .sheet-btn { padding: 8px 12px; font-size: 12.5px; }
  .star svg { width: 26px; height: 26px; }
  .match-avatar { width: 32px; height: 32px; }
  .match-text { font-size: 11.5px; }
  .match-text strong { font-size: 14px; }
  .walk-dial, .walk-swatch { width: 96px; height: 96px; }
  .header-content { gap: 10px; }
  .brand { letter-spacing: .1em; }
}

.map-sheet[hidden], .map-pocket[hidden] { display: none; }


/* ---- The list and the map, as they were on 4 October ---------------------------------
 *
 * Both sections are carried over from the earlier site with their own look: one ink, one
 * grotesque, square controls, and the map of Hungary with a ring per city. The tokens are
 * that site's dark ones, set on the two sections only, so the rest of the page is untouched.
 */

.was {
  --ink: #EAEAE6;
  --mid: #8A8A82;
  --rule: #33332F;
  --raise: #1D1D1B;
  --paper: #141413;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --page: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --big: clamp(1.95rem, 4.3vw, 3.5rem);
  --mid-size: clamp(1.1rem, 1.5vw, 1.3rem);
  --small: 15px;
  --tiny: 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--small);
  line-height: 1.55;
}
.was h2 { margin: 0; font-family: var(--sans); font-weight: 500; letter-spacing: -.028em; color: var(--ink); }
.was p, .was ol { margin: 0; padding: 0; }
.was .sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.was input, .was select, .was button { font: inherit; color: inherit; }
.was .map-note { text-align: left; }

.was.list {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(50px, 8vw, 90px) var(--gutter) clamp(90px, 13vw, 150px);
}
.was.list h2 { font-size: var(--big); }
.was .lead { margin-top: 18px; color: var(--mid); max-width: 42ch; font-size: var(--mid-size); }

.was #signup { margin-top: clamp(30px, 4vw, 44px); }

/* Capped, because an address field stretched across a 1200px page stops reading as a
   field and starts reading as a rule with a cursor in it. */
.was .fields { display: flex; flex-wrap: wrap; gap: 10px; max-width: 680px; }

.was #email, .was #city {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px 15px;
  font-size: 16px;                 /* 16px or iOS zooms the page on focus */
  min-width: 0;
}
.was #email { flex: 1 1 17rem; }
.was #email::placeholder { color: var(--mid); }
.was #city { flex: 0 1 11rem; }
.was #email:focus, .was #city:focus { outline: none; border-color: var(--ink); }

/* The one filled control on the site, and it is ink rather than a brand colour, because
   there is no brand colour. Square-ish, never a capsule. */
.was #go {
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .18s ease, transform .12s ease;
}
.was #go:hover { opacity: .86; }
.was #go:active { transform: translateY(1px); }
.was #go:disabled { opacity: .5; cursor: default; }

.was .note { margin-top: 12px; font-size: var(--tiny); color: var(--mid); max-width: 48ch; }
.was .status { margin-top: 12px; font-size: var(--small); }
.was .status[data-tone="bad"] { text-decoration: underline; text-underline-offset: 3px; }


.was.map {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(70px, 10vw, 130px) var(--gutter) clamp(90px, 12vw, 140px);
  border-top: 1px solid var(--rule);
}
.was.map h2 { font-size: var(--big); line-height: 1.06; letter-spacing: -.028em; max-width: 18ch; }

/* The map takes the whole measure and the four places line up under it. Side by side it
   rendered at six hundred pixels, which left the gauges too small to read. */
.was .map-split { margin-top: clamp(30px, 4vw, 48px); }

/* Capped: at the full twelve hundred the map alone was taller than a screen. */
.was .map-art { max-width: 880px; }   /* left, so the country lines up with the heading */
.was .map-svg { width: 100%; height: auto; overflow: visible; }
.was .map-land {
  fill: color-mix(in srgb, var(--ink) 6%, transparent);
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.was .map-water { fill: color-mix(in srgb, var(--ink) 16%, transparent); }

/* The Danube, the Tisza and the Dráva, clipped to what runs inside the country. Drawn over
   the land and under the gauges, and kept lighter than the border so they read as the thing
   inside the shape rather than as a second outline. */
.was .map-river {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 26%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A gauge per place: a track, an arc for how far it has got towards sixty, and the figure
   inside it. The shape is the app's own — it is what the walk screen puts the distance in. */
.was .map-track-ring { fill: var(--paper); stroke: var(--rule); stroke-width: 2.5; }
.was .map-arc {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1);
}
.was .map-n {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 600;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.was .map-city {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  fill: var(--ink);
}

/* The whole group lifts a little as the section arrives, one after the other. */
.was .map-place { opacity: 0; transform: translateY(10px); transform-box: fill-box;
             transform-origin: center;
             transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.was.map.in .map-place { opacity: 1; transform: none; }
.was.map.in .map-place:nth-child(2) { transition-delay: .09s; }
.was.map.in .map-place:nth-child(3) { transition-delay: .18s; }
.was.map.in .map-place:nth-child(4) { transition-delay: .27s; }

/* The same four, as a list, for anyone who cannot read a map of Hungary from a dot. */
.was .map-list {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 40px);
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
  padding-top: clamp(18px, 2.4vw, 26px);
}
.was .map-list li { list-style: none; }
@media (max-width: 680px) { .was .map-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.was .map-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
}
.was .map-row-city { font-weight: 600; }
.was .map-row-n { color: var(--mid); font-variant-numeric: tabular-nums; }
.was .map-track {
  margin-top: 7px;
  height: 3px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.was .map-fill {
  height: 100%;
  width: 0;
  background: var(--ink);
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
}
/* The city somebody has just signed up from, so the page shows the press landing. */
.was .map-row.just .map-row-n { color: var(--ink); font-weight: 600; }

.was .map-note { margin-top: clamp(26px, 3.4vw, 36px); font-size: var(--tiny); color: var(--mid); }

@media (prefers-reduced-motion: reduce) {
  .was .map-place { opacity: 1; transform: none; transition: none; }
  .was .map-arc, .was .map-fill { transition: none; }
}

/* Two to a row on a phone leaves "Balatonboglár 2 / 60" wider than its column; let it wrap. */
.was .map-row-head { flex-wrap: wrap; column-gap: 10px; row-gap: 0; }