/* GroupBasket: transit-map landing page.
   Every flatmate is a line. Their items ride into one order, and the bill
   rides back out. Tokens first; main.js reads the geometry ones (--lw, --g,
   --R, --L) so the drawn map and the CSS layout never disagree. */

:root {
  --paper: #F3F5F8;
  --paper-deep: #E8ECF3;
  --card: #FFFFFF;
  --ink: #15213B;
  --ink-2: #3A4661;
  --muted: #5D6880;
  --hair: #D5DBE6;
  --hair-2: #E5E9F0;

  --rohan: #F0A30A;
  --aditi: #D9266F;
  --nehul: #2456D8;
  --rohan-tint: #FDF1D6;
  --aditi-tint: #FBE3EC;
  --nehul-tint: #E1E8FB;
  --rohan-text: #8A5A00;

  --night: #0F1A33;
  --night-2: #1A2849;
  --on-night: #EAF0FA;
  --on-night-2: #A7B2CA;
  --nehul-glow: #6F94F6;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(16px, 3.4vw, 44px);
  --maxw: 1240px;
  --rail: 120px;
  --h1: clamp(54px, 10.4vw, 168px);
  --h2: clamp(46px, 6vw, 92px);

  /* map geometry (px, unitless so JS can read them) */
  --lw: 10;
  --g: 15;
  --R: 44;
  --L: 40;
  --pitch: 108px;
  --line-y: 46px;
  --dot: 30px;

  --out: cubic-bezier(.16, 1, .3, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
  --spring: linear(0, .24 7%, .6 15%, .92 23%, 1.07 30%, 1.1 36%, 1.06 44%, 1.01 54%, .99 64%, 1.004 80%, 1);
  --r-card: 22px;
  --shadow: 0 1px 0 rgb(21 33 59 / 4%), 0 3px 8px -3px rgb(21 33 59 / 8%), 0 36px 70px -42px rgb(21 33 59 / 42%);
  --shadow-sm: 0 12px 26px -18px rgb(21 33 59 / 45%);

  /* roles that flip between themes */
  --card-2: #F7F8FB;
  --solid: #15213B;
  --on-solid: #FFFFFF;
  --btn-bg: #15213B;
  --btn-fg: #FFFFFF;
  --btn-bar: linear-gradient(90deg, var(--rohan) 0 33.3%, var(--aditi) 33.3% 66.6%, var(--nehul-glow) 66.6%);
  --btn-shadow: 0 14px 30px -16px rgb(21 33 59 / 70%);
  --board: #15213B;
  --flap: #24324F;
  --train-bg: #15213B;
  --train-fg: #FFFFFF;
  --train-shadow: 0 10px 24px -8px rgb(21 33 59 / 55%);
  --on-rohan: #15213B;
  --on-aditi: #FFFFFF;
  --on-nehul: #FFFFFF;
  --hi-row: var(--paper);
  --trk-o: .17;

  color-scheme: light;
}

/* Night service. The same map after dark: deep navy ground, the three lines
   pushed brighter so they glow, buttons switch to marigold. */
:root[data-theme="dark"] {
  --paper: #0A1020;
  --paper-deep: #0F172B;
  --card: #121B31;
  --card-2: #0D1528;
  --ink: #ECF1FA;
  --ink-2: #B4BED3;
  --muted: #8892AB;
  --hair: #29354F;
  --hair-2: #1E2843;

  --rohan: #FFB224;
  --aditi: #FF4F98;
  --nehul: #5A8BFF;
  --rohan-tint: #3A2B0D;
  --aditi-tint: #3D1530;
  --nehul-tint: #172A5A;
  --rohan-text: #FFC657;
  --nehul-glow: #7FA6FF;

  --shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 2px 6px -2px rgb(0 0 0 / 50%), 0 36px 70px -36px rgb(0 0 0 / 80%);
  --shadow-sm: 0 14px 30px -16px rgb(0 0 0 / 75%);

  --solid: #ECF1FA;
  --on-solid: #0A1020;
  --btn-bg: var(--rohan);
  --btn-fg: #0A1020;
  --btn-bar: #0A1020;
  --btn-shadow: 0 14px 34px -14px rgb(255 178 36 / 55%);
  --board: #060B17;
  --flap: #172238;
  --train-bg: #F2F5FC;
  --train-fg: #0A1020;
  --train-shadow: 0 0 26px rgb(242 245 252 / 30%);
  --on-rohan: #0A1020;
  --on-aditi: #0A1020;
  --on-nehul: #0A1020;
  --hi-row: #1A2541;
  --trk-o: .26;

  color-scheme: dark;
}

@media (max-width: 959px) {
  :root { --rail: 52px; --lw: 8; --g: 12; --R: 34; --L: 26; }
}
@media (max-width: 620px) {
  :root { --h1: clamp(46px, 15.4vw, 96px); --lw: 7; --g: 11; --R: 30; --L: 22; --pitch: 80px; --line-y: 40px; --dot: 26px; }
}

/* ───────────────────────── Base ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 420;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

@media (max-width: 620px) { body { font-size: 16.5px; } }

img, svg { display: block; }
button { font: inherit; color: inherit; }
p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--nehul);
  outline-offset: 3px;
  border-radius: 8px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 99px;
  background: var(--solid); color: var(--on-solid); text-decoration: none; font-weight: 650;
  transition: top .2s var(--out);
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }

/* The rail layout: text | rail | card on desktop, rail | content below 960. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1.12fr);
  grid-template-areas: "text rail card";
}
.col-text { grid-area: text; }
.col-rail { grid-area: rail; position: relative; }
.col-card { grid-area: card; min-width: 0; }

@media (max-width: 959px) {
  .grid {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-areas: "rail text" "rail card";
  }
  .col-text, .col-card { padding-left: 14px; }
}

/* ───────────────────────── Map overlay ───────────────────────── */

.map {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map .trk { opacity: var(--trk-o); }
.map .glow { display: none; }
:root[data-theme="dark"] .map .glow { display: inline; }
:root[data-theme="dark"] .map .glow-a { opacity: .2; }
:root[data-theme="dark"] .map .glow-b { opacity: .07; }
.map .lit { transition: opacity .3s ease; }
.map .tick { transition: opacity .25s ease, transform .5s var(--spring); transform-box: fill-box; transform-origin: 50% 100%; }
.map .tick:not(.on) { opacity: 0; transform: scaleY(0); }
.map .xchg { fill: var(--card); stroke: var(--ink); transition: transform .5s var(--spring), opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.map .xchg:not(.on) { opacity: 0; transform: scale(0); }
.map .spark { fill: #fff; }

.map path.ln-rohan { stroke: var(--rohan); }
.map path.ln-aditi { stroke: var(--aditi); }
.map path.ln-nehul { stroke: var(--nehul); }
.map .tick.ln-rohan { fill: var(--rohan); }
.map .tick.ln-aditi { fill: var(--aditi); }
.map .tick.ln-nehul { fill: var(--nehul); }

main { position: relative; z-index: 1; }

/* the order, riding the bundle */
.train {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc((2 * var(--g) + var(--lw) + 28) * 1px);
  height: 36px;
  margin: -18px 0 0 calc((2 * var(--g) + var(--lw) + 28) * -.5px);
  border-radius: 99px;
  background: var(--train-bg);
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--paper), var(--train-shadow);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.train svg { width: 20px; height: 20px; fill: var(--train-fg); stroke: var(--train-fg); stroke-width: 0; }
.train svg .h { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.train.on { opacity: 1; transition: opacity .3s ease; }
.train.bump svg { animation: bump .45s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
@media (max-width: 620px) { .train { height: 30px; margin-top: -15px; } .train svg { width: 17px; height: 17px; } }

/* ───────────────────────── Header ───────────────────────── */

.top {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 16px; row-gap: 14px;
  padding-block: 22px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-size: clamp(15px, 4.1vw, 23px); font-weight: 800; font-stretch: 118%; letter-spacing: -.03em;
  line-height: 1;
}
.brand .mark { width: clamp(22px, 5.8vw, 30px); height: clamp(22px, 5.8vw, 30px); }
.brand .mark rect { fill: var(--card); stroke: var(--ink); }

.top-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; }
.top-nav .btn { white-space: nowrap; }
.top-link {
  font-size: 16px; font-weight: 600; text-decoration: none; color: var(--ink-2);
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--out), color .2s ease;
}
.top-link:hover { color: var(--ink); background-size: 100% 2px; }
@media (max-width: 520px) { .top-link { display: none; } .top-nav { gap: 10px; } }

/* theme toggle: a moon by day, a sun by night */
.theme-toggle {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s ease, background-color .3s ease, transform .4s var(--spring);
}
.theme-toggle:hover { border-color: var(--ink); transform: rotate(-14deg); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle svg { width: 22px; height: 22px; overflow: visible; }
.tt-body { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--spring); }
.tt-cut { transition: transform .55s var(--out); }
.tt-rays {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transform-origin: 12px 12px;
  opacity: 0; transform: rotate(-70deg) scale(.4);
  transition: transform .6s var(--out), opacity .3s ease;
}
:root[data-theme="dark"] .tt-body { transform: scale(.56); }
:root[data-theme="dark"] .tt-cut { transform: translate(12px, -12px); }
:root[data-theme="dark"] .tt-rays { opacity: 1; transform: none; transition-delay: .08s; }

/* the new theme spreads out from the toggle (main.js drives the clip) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* the old theme stays on top and main.js cuts a growing hole through it */
::view-transition-old(root) { z-index: 2; }
/* while the theme flips, colour transitions would start from the old palette
   and fade, so parts of the page lag behind the swap. Only the toggle's own
   sun/moon morph keeps its motion. */
.theme-swap *:not(.theme-toggle, .theme-toggle *),
.theme-swap *:not(.theme-toggle, .theme-toggle *)::before,
.theme-swap *:not(.theme-toggle, .theme-toggle *)::after { transition: none !important; }

/* ───────────────────────── Buttons ───────────────────────── */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 26px 18px;
  border-radius: 99px;
  font-size: 17px; font-weight: 650; font-stretch: 104%; letter-spacing: -.005em; line-height: 1;
  text-decoration: none;
  transition: transform .3s var(--out), box-shadow .3s var(--out);
}
.btn-sm { padding: 12px 18px 13px; font-size: 15px; }
.btn-ico { width: 19px; height: 19px; fill: currentColor; }

/* three line colours slide in under the label on hover: the brand bundle */
.btn::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 8px; height: 3px; z-index: -1;
  background: var(--btn-bar);
  border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--out);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-ink { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow); transition: transform .3s var(--out), box-shadow .3s var(--out), background-color .3s ease; }
.btn-ink:hover { box-shadow: var(--btn-shadow), 0 6px 14px -8px rgb(0 0 0 / 30%); }
.btn-sm::after { left: 16px; right: 16px; bottom: 6px; height: 2px; }

.btn-marigold { background: var(--rohan); color: var(--night); }
.btn-marigold::after { background: var(--night); }

.link {
  font-size: 17px; font-weight: 620; text-decoration: none; color: var(--ink);
  padding-bottom: 3px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 2px no-repeat;
  transition: background-size .35s var(--out);
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ───────────────────────── Hero ───────────────────────── */

.hero { position: relative; z-index: 1; padding-top: clamp(12px, 3.4vh, 44px); }

.shout {
  margin: 0;
  font-size: var(--h1);
  font-weight: 820;
  font-stretch: 125%;
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--ink);
}
.shout .ln { display: block; white-space: nowrap; }
.shout .br-m { display: none; }
.shout .ch { display: inline-block; }
@media (max-width: 620px) { .shout .br-m { display: inline; } }

.hero-grid {
  margin-top: clamp(28px, 5.5vh, 72px);
  grid-template-areas: "copy rail card";
  align-items: center;
}
.hero-copy { grid-area: copy; padding-right: clamp(0px, 2vw, 28px); }
.hero-map { grid-area: card; position: relative; padding: 18px 0 34px; }

@media (max-width: 959px) {
  .hero-grid { grid-template-areas: "copy copy" "rail card"; }
  .hero-copy { padding-right: 0; }
  .hero-map { margin-top: 44px; padding-left: 14px; }
}

.lede {
  max-width: 29em;
  margin-bottom: 30px;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.45;
  font-weight: 460;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.fine { margin-top: 22px; font-size: 15px; color: var(--muted); }

/* hero rows: one per flatmate, each a line arriving from their terminal */
.row { position: relative; height: var(--pitch); }
.stops { list-style: none; margin: 0; padding: 0; }
.stop {
  position: absolute; left: calc(var(--at) * 100%); top: calc(var(--line-y) - 35px);
  width: 0; height: 0;
}
.stop span {
  position: absolute; left: 0; top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14.5px; font-weight: 680; font-stretch: 90%; line-height: 1;
  transition: opacity .3s ease, transform .5s var(--spring), color .25s ease;
}
.js .stop:not(.on) span { opacity: 0; transform: translate(-50%, 6px); }

.term-dot {
  position: absolute; right: 0; top: calc(var(--line-y) - var(--dot) / 2);
  width: var(--dot); height: var(--dot);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--c); color: var(--on, #fff);
  font-size: 13px; font-weight: 820; font-stretch: 112%; line-height: 1;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--c);
  cursor: pointer;
  transition: transform .45s var(--spring), opacity .3s ease, box-shadow .3s ease;
}
.term-dot:hover { transform: scale(1.12); }
.js .hero .term-dot:not(.on) { opacity: 0; transform: scale(.2); }
.js .hero .term-dot:focus-visible { opacity: 1; transform: none; }

.bubble {
  position: absolute; right: -6px; top: calc(var(--line-y) + 24px);
  max-width: 260px;
  padding: 7px 13px 9px;
  border-radius: 15px 4px 15px 15px;
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-sm);
  font-size: 15px; line-height: 1.3;
  transform-origin: 90% 0;
  transition: opacity .3s ease, transform .55s var(--spring);
}
.bubble .who { display: block; font-size: 12.5px; font-weight: 760; color: var(--ct); }
.bubble .said { display: block; }
.js .hero .bubble:not(.on) { opacity: 0; transform: scale(.7) translateY(-6px); }

@media (max-width: 620px) {
  .bubble {
    right: 0; top: calc(var(--line-y) + 19px);
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .bubble .said { display: none; }
  .stop span { font-size: 13px; }
}

.map-hint {
  position: absolute; right: 0; bottom: -18px;
  font-size: 14px; font-weight: 560; color: var(--muted);
  transition: opacity .5s ease .2s;
}
.js .hero-map:not(.ready) .map-hint { opacity: 0; }
@media (max-width: 620px) { .map-hint { position: static; margin-top: 18px; text-align: right; } }

[data-person="rohan"] { --c: var(--rohan); --ct: var(--rohan-text); --tint: var(--rohan-tint); --on: var(--on-rohan); }
[data-person="aditi"] { --c: var(--aditi); --ct: var(--aditi); --tint: var(--aditi-tint); --on: var(--on-aditi); }
[data-person="nehul"] { --c: var(--nehul); --ct: var(--nehul); --tint: var(--nehul-tint); --on: var(--on-nehul); }
:root[data-theme="dark"] .term-dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--c), 0 0 22px 2px color-mix(in srgb, var(--c) 45%, transparent); }

/* focus one flatmate: everyone else's lines and labels step back */
body[data-focus] .map .lit,
body[data-focus] .map .tick,
body[data-focus] .map .xchg,
body[data-focus] .row,
body[data-focus] .calc [data-person] { transition: opacity .25s ease; }
body[data-focus="rohan"] .map :is(.lit, .tick):not(.ln-rohan),
body[data-focus="aditi"] .map :is(.lit, .tick):not(.ln-aditi),
body[data-focus="nehul"] .map :is(.lit, .tick):not(.ln-nehul) { opacity: .12; }
body[data-focus="rohan"] .map .glow:not(.ln-rohan),
body[data-focus="aditi"] .map .glow:not(.ln-aditi),
body[data-focus="nehul"] .map .glow:not(.ln-nehul) { opacity: 0; }
body[data-focus="rohan"] .row:not([data-person="rohan"]),
body[data-focus="aditi"] .row:not([data-person="aditi"]),
body[data-focus="nehul"] .row:not([data-person="nehul"]) { opacity: .28; }
body[data-focus="rohan"] .calc [data-person]:not([data-person="rohan"]),
body[data-focus="aditi"] .calc [data-person]:not([data-person="aditi"]),
body[data-focus="nehul"] .calc [data-person]:not([data-person="nehul"]) { opacity: .3; }
body[data-focus="aditi"] .map .xchg, body[data-focus="rohan"] .map .xchg { opacity: 1; }

/* ───────────────────────── Stations ───────────────────────── */

.stn { position: relative; padding-block: clamp(96px, 15vh, 176px) 0; }
.stn .grid { align-items: start; }
.stn .col-text { max-width: 540px; }

.st-name {
  margin: 0 0 22px;
  font-size: var(--h2);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .9;
  letter-spacing: -.04em;
}
.say {
  max-width: 17em;
  margin-bottom: 18px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.body { max-width: 30em; color: var(--ink-2); text-wrap: pretty; }

/* the station: an interchange capsule spanning all three lines */
.cap {
  position: relative; display: block;
  width: calc((2 * var(--g) + var(--lw) + 22) * 1px);
  height: 28px;
  margin: calc(var(--h2) * .45 - 14px) auto 0;
  border: 4px solid var(--ink);
  border-radius: 99px;
  background: var(--card);
}
.cap::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 3px solid var(--ink); opacity: 0;
}
.stn.reached .cap::after { animation: ring 1s var(--out); }
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9, 2.6); } }

.col-card { padding-top: 6px; }
@media (max-width: 959px) {
  .col-card { margin-top: 40px; padding-top: 0; }
  .cap { height: 24px; border-width: 3.5px; margin-top: calc(var(--h2) * .45 - 12px); }
}

/* ───────────────────────── Cards ───────────────────────── */

.card {
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow);
}
@media (max-width: 620px) { .card { padding: 18px; } }

.card-cap { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }

.av {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: var(--on);
  font-size: 12px; font-weight: 820; font-stretch: 112%; line-height: 1;
}

[data-step] { transition: opacity .35s ease, transform .55s var(--spring); }
.js [data-demo] [data-step]:not(.on),
.js .expense[data-step]:not(.on) { opacity: 0; transform: translateY(8px) scale(.96); }

/* Collect: two separate 1:1 chats, because that's how GroupBasket works */
.chats { display: grid; gap: 18px; }
.thread { width: min(100%, 470px); }
.thread {
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.thread-2 { justify-self: end; }
.thread { transition: opacity .45s ease, transform .7s var(--out); }
.js [data-demo="collect"] .thread:not(.on) { opacity: 0; transform: translateY(22px); }
.thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-2);
  font-size: 15px; font-weight: 700;
}
.thread-head small { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
.thread-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card-2); min-height: 0; }

.msg {
  max-width: 88%;
  padding: 9px 13px 10px;
  border-radius: 17px;
  font-size: 15.5px; line-height: 1.4;
}
.msg-me { align-self: flex-end; background: var(--tint); border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.msg-bot { align-self: flex-start; background: var(--card); border: 1px solid var(--hair-2); border-bottom-left-radius: 5px; transform-origin: 0 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 1px;
  padding: 3px 10px 4px 8px;
  border-radius: 99px;
  border: 1.5px solid var(--c);
  background: var(--card);
  font-size: 14px; font-weight: 680; line-height: 1.2;
  white-space: nowrap;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chip-shared { border-color: var(--ink); }
/* shared: the three flatmates' dots, stacked like avatars */
.chip-shared::before {
  width: 9px; height: 9px; margin-right: 12px;
  background: var(--rohan);
  box-shadow: 0 0 0 1.5px var(--card), 6px 0 0 0 var(--aditi), 6px 0 0 1.5px var(--card), 12px 0 0 0 var(--nehul);
}

.typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px;
  padding: 12px 14px;
  border-radius: 17px 17px 17px 5px;
  background: var(--card); border: 1px solid var(--hair-2);
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.js .typing.gone { display: none; }
.no-js .typing, .rm .typing { display: none; }

/* Last call */
.board {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 18px;
  border-radius: 15px;
  background: var(--board); color: #fff;
}
:root[data-theme="dark"] .board { box-shadow: inset 0 0 0 1px var(--hair); }
.board-label { font-size: 15px; font-weight: 600; color: #C3CCE0; transition: color .3s ease; }
.board.done .board-label { color: #fff; }
.flaps { display: flex; align-items: center; gap: 4px; }
.flap {
  position: relative;
  width: 30px; height: 42px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--flap);
  font-size: 25px; font-weight: 760; font-stretch: 100%; line-height: 1;
  font-variant-numeric: tabular-nums;
  perspective: 120px;
  overflow: hidden;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / 45%); }
.flap.flip { animation: flip .32s var(--inout); }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-88deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
.colon { font-size: 22px; font-weight: 760; color: #8E9AB7; padding-inline: 1px; }
.board.done .flap { background: #2C3B5C; color: var(--rohan); }

.broadcast {
  margin-top: 14px;
  border-radius: 17px 17px 17px 5px;
  border: 1px solid var(--hair-2);
  background: var(--card-2);
  overflow: hidden;
}
.bc-text { padding: 12px 15px; font-size: 15.5px; line-height: 1.45; }
.bc-buttons { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair-2); }
.bc-buttons span { padding: 10px; text-align: center; font-size: 15px; font-weight: 650; color: var(--nehul); }
.bc-buttons span + span { border-left: 1px solid var(--hair-2); }

.replies { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.replies li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px;
  padding: 7px 2px;
}
.replies li + li { border-top: 1px solid var(--hair-2); }
.nm { font-size: 15.5px; font-weight: 650; }
.st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: color .3s ease;
}
.st.done { color: var(--ink); }
.st.done::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  animation: pop .5s var(--spring);
}
[data-person="rohan"] .st.done::before { filter: brightness(.92); }
:root[data-theme="dark"] .st.done::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%230A1020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: none;
}
.st-buyer { color: var(--nehul); }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.reply-said {
  grid-column: 2 / -1;
  justify-self: start;
  margin-top: 6px;
  padding: 7px 12px 8px;
  border-radius: 15px 15px 15px 5px;
  background: var(--tint);
  font-size: 15px;
  transform-origin: 0 0;
}
.lc-note { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }

@media (max-width: 620px) {
  .board { padding: 10px 10px 10px 14px; }
  .board-label { font-size: 14px; white-space: nowrap; }
  .flaps { gap: 3px; }
  .flap { width: 25px; height: 36px; font-size: 21px; }
  .colon { font-size: 18px; }
}

/* Compare */
.routes {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 66px 66px;
  margin: 0 -4px 0 -6px;
}
.fork { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 132px; overflow: visible; }
.fk { fill: none; stroke-width: 6; stroke-linecap: round; stroke: var(--hair); transition: stroke .4s ease, stroke-width .4s var(--out); }
.fk-base { stroke: var(--ink); }
.fk-cap { fill: var(--card); stroke: var(--ink); stroke-width: 3.5; }
.js .compare:not(.play) .fk-a, .js .compare:not(.play) .fk-b { stroke-dasharray: 1; stroke-dashoffset: 1; }
.compare.play .fk-a, .compare.play .fk-b { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--inout), stroke .4s ease, stroke-width .4s var(--out); }
.compare.chosen .fk-b { stroke: var(--ink); stroke-width: 7; }
.compare.chosen .fk-a { stroke-dasharray: .03 .035; }

.route {
  grid-column: 2;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px;
  align-content: center;
  padding: 0 12px 0 10px;
  border-radius: 14px;
  transition: background .4s ease, opacity .4s ease;
}
.r-name { font-size: 18px; font-weight: 720; font-stretch: 108%; letter-spacing: -.01em; }
.r-total { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 34px; font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.r-meta { font-size: 14px; font-weight: 550; color: var(--muted); }
.r-total { transition: opacity .2s ease; }
.js .compare:not(.play) .r-total { opacity: 0; }
.compare.chosen .route[data-route="b"] { background: var(--hi-row); }
.compare.chosen .route[data-route="a"] { opacity: .55; }

@media (max-width: 620px) {
  .route { padding: 0 8px 0 8px; column-gap: 8px; }
  .r-name { font-size: 16.5px; }
  .r-total { font-size: 27px; }
  .r-meta { font-size: 13px; white-space: nowrap; }
}

.saves { margin: 16px 0 6px; font-size: 15.5px; font-weight: 600; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.save-pill {
  display: inline-flex; align-items: center; gap: 5px;
  margin-right: 6px;
  padding: 3px 11px 4px 8px;
  border-radius: 99px;
  background: var(--rohan-tint);
  color: var(--rohan-text);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  transition: transform .6s var(--spring) .12s;
}
.save-pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js .saves:not(.on) .save-pill { transform: scale(.6); }
@media (max-width: 620px) {
  .saves { font-size: 14.5px; }
  .save-pill { display: flex; width: fit-content; margin: 0 0 8px; transform-origin: 0 50%; }
}

.matches { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; }
.matches th, .matches td { padding: 9px 4px; text-align: left; border-top: 1px solid var(--hair-2); }
.matches thead th { border-top: 0; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.matches tbody th { font-weight: 650; }
.matches td { color: var(--ink-2); }
.matches td::before { content: "✓ "; color: var(--muted); }
.matches td.eq::before { content: "≈ "; }
.matches td.eq { color: var(--nehul); font-weight: 600; }

/* One order */
.bags { padding: 4px 0 18px; border-bottom: 1px solid var(--hair-2); margin-bottom: 18px; }
.bags svg { width: min(100%, 300px); height: auto; margin-inline: auto; overflow: visible; }
.bag { transform-box: fill-box; transform-origin: 50% 100%; stroke-width: 0; transition: transform .9s var(--inout), opacity .5s ease; }
.bag-r { fill: var(--rohan); stroke: var(--rohan); }
.bag-a { fill: var(--aditi); stroke: var(--aditi); }
.bag-n { fill: var(--nehul); stroke: var(--nehul); }
.bag-one { fill: var(--ink); stroke: var(--ink); opacity: 0; transform: scale(.6); transition: transform .6s var(--spring) .75s, opacity .3s ease .75s; }
.checkout.merged .bag-r { transform: translateX(26.4px) scale(.8); opacity: 0; }
.checkout.merged .bag-n { transform: translateX(-26.4px) scale(.8); opacity: 0; }
.checkout.merged .bag-a { transform: scale(.8); opacity: 0; }
.checkout.merged .bag-one { opacity: 1; transform: scale(1.12); }
.bags-cap { position: relative; height: 22px; margin-top: 8px; text-align: center; font-size: 15px; font-weight: 650; }
.bags-cap span { position: absolute; inset: 0; transition: opacity .4s ease, transform .5s var(--out); }
.bags-cap .bc-1 { opacity: 0; transform: translateY(6px); }
.checkout.merged .bc-3 { opacity: 0; transform: translateY(-6px); }
.checkout.merged .bc-1 { opacity: 1; transform: none; transition-delay: .8s; }

.sheet-title { font-size: 18px; font-weight: 750; font-stretch: 106%; margin-bottom: 10px; }
.sheet-rows { margin: 0; display: grid; }
.sheet-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 15.5px; }
.sheet-rows dt { color: var(--muted); }
.sheet-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sheet-rows .total { border-top: 1px solid var(--hair-2); margin-top: 4px; padding-top: 11px; }
.sheet-rows .total dt, .sheet-rows .total dd { color: var(--ink); font-weight: 780; font-size: 18px; }

.place {
  position: relative; overflow: hidden;
  height: 52px; margin-top: 14px;
  border-radius: 99px;
  background: var(--solid); color: var(--on-solid);
  font-size: 16.5px; font-weight: 680;
  transition: transform .2s var(--out);
}
.place.press { transform: scale(.97); }
.place-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--rohan) 0 33.3%, var(--aditi) 33.3% 66.6%, var(--nehul) 66.6%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--inout);
}
.place-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .3s ease, transform .4s var(--out); }
.place-b { opacity: 0; transform: translateY(10px); color: var(--on-solid); }
.place-b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--out) .2s; }
.place.filling .place-fill { transform: scaleX(1); }
.place.done .place-fill { transform: scaleX(1); opacity: 0; transition: opacity .4s ease; }
.place.done .place-a { opacity: 0; transform: translateY(-10px); }
.place.done .place-b { opacity: 1; transform: none; }
.place.done .place-b svg { stroke-dashoffset: 0; }

.restored {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.restored svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--nehul); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.restored.on svg { animation: undo .8s var(--out); }
@keyframes undo { from { transform: rotate(160deg); } to { transform: rotate(0); } }

/* Settle: the bundle fans back out, one terminal per flatmate */
.stn-settle .col-card { padding-top: 0; }
.fan { margin-top: 64px; }
.row.end { --line-y: 74px; height: 108px; }
.owe {
  position: absolute; right: 0; bottom: calc(108px - var(--line-y) + 22px);
  display: grid; justify-items: end;
  text-align: right;
}
.owe-who { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.owe-amt {
  font-size: 34px; font-weight: 820; font-stretch: 114%; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.js .fan .row:not(.on) .owe { opacity: 0; transform: translateY(6px); }
.owe { transition: opacity .4s ease, transform .6s var(--spring); }
.js .fan .term-dot:not(.on) { opacity: 0; transform: scale(.3); }
.js .fan .term-dot:focus-visible { opacity: 1; transform: none; }
@media (max-width: 620px) {
  .fan { margin-top: 40px; }
  .row.end { --line-y: 64px; height: 86px; }
  .owe { bottom: calc(86px - var(--line-y) + 20px); }
  .owe-amt { font-size: 28px; }
}

.expense {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px;
  padding: 15px 18px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow);
}
.expense .tick { flex: none; width: 34px; height: 34px; }
.expense .tick circle { fill: var(--solid); }
.expense .tick path { fill: none; stroke: var(--on-solid); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .5s var(--out) .3s; }
.expense.on .tick path, .no-js .expense .tick path, .rm .expense .tick path { stroke-dashoffset: 0; }
.expense p { display: grid; font-size: 15px; line-height: 1.35; }
.expense b { font-size: 16.5px; font-weight: 750; }
.expense span { color: var(--muted); font-weight: 520; }

.calc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 16px; font-weight: 680; color: var(--ink);
}
.calc-toggle::after {
  content: ""; width: 9px; height: 9px;
  border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .35s var(--out);
}
.calc-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.calc-toggle:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

.calc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--out); }
.calc.open { grid-template-rows: 1fr; }
.calc-in { overflow: hidden; }
.calc table { width: 100%; margin: 6px 0 4px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.calc th, .calc td { padding: 9px 6px; text-align: right; border-top: 1px solid var(--hair); }
.calc th:first-child { text-align: left; }
.calc thead th { border-top: 0; font-size: 13.5px; font-weight: 700; }
.calc thead th[data-person]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.calc tbody th { font-weight: 600; color: var(--ink-2); }
.calc tfoot th, .calc tfoot td { font-weight: 800; border-top: 2px solid var(--ink); }
@media (max-width: 620px) { .calc th, .calc td { padding: 9px 3px; font-size: 14px; } }

/* ───────────────────────── Night: start ───────────────────────── */

.night {
  position: relative;
  margin-top: clamp(110px, 16vh, 180px);
  padding: clamp(88px, 12vh, 140px) 0 0;
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
}
.night::before {
  /* the city at night: a faint wash from the three line colours */
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 90%;
  background:
    radial-gradient(40% 55% at 20% 100%, rgb(240 163 10 / 16%), transparent 70%),
    radial-gradient(38% 50% at 55% 100%, rgb(217 38 111 / 16%), transparent 70%),
    radial-gradient(40% 55% at 88% 100%, rgb(111 148 246 / 18%), transparent 70%);
  pointer-events: none;
}
:root[data-theme="dark"] .night {
  /* after dark the page is already night, so the last stop is the dawn */
  background: linear-gradient(180deg, var(--paper) 0%, #0D132B 42%, #1C1638 78%, #2A1838 100%);
}
:root[data-theme="dark"] .night::before {
  inset: auto -10% -8% -10%; height: 85%;
  background:
    radial-gradient(46% 62% at 14% 100%, rgb(255 178 36 / 40%), transparent 72%),
    radial-gradient(42% 56% at 50% 100%, rgb(255 79 152 / 30%), transparent 72%),
    radial-gradient(46% 62% at 88% 100%, rgb(90 139 255 / 32%), transparent 72%);
}
:root[data-theme="dark"] .steps .steps-end::before { box-shadow: 0 0 0 5px var(--night), 0 0 0 8px var(--rohan), 0 0 34px 6px rgb(255 178 36 / 45%); }
.night .wrap { position: relative; }
.night-h {
  margin: 0;
  font-size: clamp(48px, 8.4vw, 132px);
  font-weight: 820; font-stretch: 125%;
  line-height: .9; letter-spacing: -.045em;
  color: #fff;
}
.night-say { max-width: 26em; margin-top: 26px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--on-night-2); }

.steps {
  --bw: 15px;
  position: relative;
  list-style: none;
  margin: clamp(56px, 8vh, 88px) 0 clamp(48px, 7vh, 72px);
  padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
}
.steps::before {
  content: ""; position: absolute; left: 0; right: calc(25% - 30px); top: 14px; height: var(--bw);
  background: linear-gradient(to bottom,
    var(--rohan) 0 3px, transparent 3px 6px,
    var(--aditi) 6px 9px, transparent 9px 12px,
    var(--nehul-glow) 12px 15px);
  border-radius: 3px;
  transform-origin: left;
  transition: transform 1.4s var(--inout);
}
.js .steps:not(.on)::before { transform: scaleX(0); }
.steps li { position: relative; padding-top: 58px; display: grid; gap: 4px; }
.steps li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 22px; height: 31px;
  border-radius: 99px;
  background: var(--night);
  border: 3.5px solid var(--on-night);
  transition: transform .5s var(--spring), opacity .3s ease;
}
.steps b { font-size: 18px; font-weight: 720; color: #fff; }
.steps span { font-size: 15px; color: var(--on-night-2); }
.steps .steps-end::before {
  left: -4px; top: 2px; width: 39px; height: 39px; border-radius: 50%;
  background: var(--rohan); border: 0;
  box-shadow: 0 0 0 5px var(--night), 0 0 0 8px var(--rohan);
}
.steps .steps-end::after {
  content: ""; position: absolute; left: -4px; top: 2px; width: 39px; height: 39px; border-radius: 50%;
  border: 3px solid var(--rohan); opacity: 0;
}
.steps.on .steps-end::after { animation: beacon 2.4s var(--out) 1.4s infinite; }
@keyframes beacon { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
.js .steps:not(.on) li::before { transform: scale(0); opacity: 0; }
.js .steps:not(.on) li > * { opacity: 0; }
.steps li > * { transition: opacity .5s ease; }
.steps li:nth-child(1)::before, .steps li:nth-child(1) > * { transition-delay: .25s; }
.steps li:nth-child(2)::before, .steps li:nth-child(2) > * { transition-delay: .6s; }
.steps li:nth-child(3)::before, .steps li:nth-child(3) > * { transition-delay: .95s; }
.steps li:nth-child(4)::before, .steps li:nth-child(4) > * { transition-delay: 1.3s; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; row-gap: 30px; padding-left: 4px; }
  .steps::before {
    left: 8px; right: auto; top: 10px; bottom: 30px; width: var(--bw); height: auto;
    background: linear-gradient(to right,
      var(--rohan) 0 3px, transparent 3px 6px,
      var(--aditi) 6px 9px, transparent 9px 12px,
      var(--nehul-glow) 12px 15px);
    transform-origin: top;
  }
  .js .steps:not(.on)::before { transform: scaleY(0); }
  .steps li { padding: 0 0 0 52px; min-height: 40px; }
  .steps li::before { left: 0; top: 4px; width: 31px; height: 22px; }
  .steps .steps-end::before, .steps .steps-end::after { left: -0.5px; top: 0; width: 32px; height: 32px; }
}

.btn-marigold { box-shadow: 0 16px 36px -18px rgb(240 163 10 / 70%); }
.night :focus-visible { outline-color: var(--rohan); }

.foot {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  margin-top: clamp(96px, 14vh, 150px);
  padding-block: 28px 34px;
  border-top: 1px solid rgb(234 240 250 / 14%);
  font-size: 14.5px; color: var(--on-night-2);
}
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; color: #fff; }
.foot-brand .mark { width: 26px; height: 26px; }

/* ───────────────────────── Intro gate & motion preferences ───────────────────────── */

.js.pre .hero .shout,
.js.pre .hero-copy,
.js.pre .hero-map,
.js.pre .top { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}