/*
  Fairly — the site.

  The palette and the type are lifted from the app itself rather than invented
  a second time: the same near-black ground, the same deep-navy aurora, the
  same warm sand accent, the same three faces. Somebody who installs after
  reading this should not feel handed to a different product.
*/

:root {
  --ground: #030303;
  --aurora: #123458;          /* the app's own accent fill */
  --ink: #e6e2dc;
  --ink-2: rgba(230, 226, 220, 0.72);
  --ink-3: rgba(230, 226, 220, 0.5);
  --sand: #d4c9be;            /* accent: what you are owed */
  --rose: #e8657f;            /* what you owe */
  --gold: #c9a227;            /* Pro, and only Pro */
  --surface: rgba(255, 255, 255, 0.055);
  --edge: rgba(255, 255, 255, 0.11);
  --edge-lit: rgba(255, 255, 255, 0.26);

  --measure: 66ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.65 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The canvas is fixed behind everything and never scrolls with the content. */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  transition: opacity 0.4s ease;
}

/*
  A wash over the canvas so text never has to compete with a moving arc for
  contrast. Heavier at the bottom, where the prose is.
*/
/*
  The scene belongs to the hero. Everywhere else it is a distraction behind
  text, so it fades back to a suggestion and the veil goes flat.
*/
body:not([data-route='/']) #scene { opacity: 0.16; }
body:not([data-route='/']) .veil {
  background: linear-gradient(to bottom, rgba(3, 3, 3, 0.72), rgba(3, 3, 3, 0.94));
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 0.4s ease;
  background:
    /* A pool of shade behind the headline only, so the type stays crisp
       without blacking out the scene it is standing in front of. */
    radial-gradient(72% 60% at 18% 36%, rgba(3, 3, 3, 0.9) 0%, rgba(3, 3, 3, 0.55) 60%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 52%, rgba(3, 3, 3, 0.86) 88%, var(--ground) 100%);
}

header, main, footer { position: relative; z-index: 2; }

/* ── bar ──────────────────────────────────────────────────────────────── */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--pad);
  flex-wrap: wrap;
}

.wordmark {
  font: 800 1.45rem/1 Nunito, system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark.small { font-size: 1.15rem; margin: 0; }

.bar nav { display: flex; gap: clamp(0.85rem, 3vw, 1.75rem); }
.bar nav a, footer nav a {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.bar nav a:hover, footer nav a:hover { color: var(--ink); border-bottom-color: var(--sand); }

a:focus-visible, .button:focus-visible, .wordmark:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── routing ──────────────────────────────────────────────────────────── */
.route { display: none; }
.route.is-active { display: block; animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  padding: clamp(3.5rem, 13vh, 8rem) var(--pad) clamp(2.5rem, 7vh, 5rem);
  max-width: 62rem;
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 1.1rem;
  font: 500 0.78rem/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
}

h1 {
  margin: 0 0 1.4rem;
  font: 700 clamp(2.6rem, 8.5vw, 5.4rem)/0.98 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  /* The one place the two balance colours appear together: owed and owing. */
  background: linear-gradient(100deg, var(--sand) 10%, var(--rose) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 0 0 2.2rem;
  max-width: 44ch;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.4rem; }

.button {
  display: inline-block;
  padding: 0.82rem 1.5rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s, background 0.18s;
}
.button:hover { transform: translateY(-2px); border-color: var(--edge-lit); }
.button.primary {
  background: linear-gradient(120deg, var(--aurora), #0b2440);
  border-color: rgba(212, 201, 190, 0.45);
}

.fineprint { color: var(--ink-3); font-size: 0.86rem; margin: 0; }

/* ── the three-up strip ───────────────────────────────────────────────── */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--edge);
  border-block: 1px solid var(--edge);
  margin-block: clamp(2rem, 6vh, 4rem);
}
.strip > * {
  background: var(--ground);
  padding: 1.6rem var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.strip strong {
  font: 700 1.05rem/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.strip span { color: var(--ink-3); font-size: 0.92rem; }

/* ── bands ────────────────────────────────────────────────────────────── */
.band {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 8vh, 5rem) var(--pad);
}
.band h2 {
  margin: 0 0 2rem;
  font: 700 clamp(1.7rem, 4.2vw, 2.6rem)/1.1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.band.accent h2 { color: var(--sand); }
.wide { max-width: var(--measure); color: var(--ink-2); margin: 0 0 1.1rem; }
.wide em { color: var(--ink); font-style: italic; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem;
}
.grid article {
  padding: 1.5rem;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  transition: border-color 0.2s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.grid article:hover { border-color: var(--edge-lit); transform: translateY(-3px); }
.grid h3 {
  margin: 0 0 0.55rem;
  font: 700 1.08rem/1.25 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.grid p { margin: 0; color: var(--ink-3); font-size: 0.94rem; line-height: 1.6; }

/* ── prose pages ──────────────────────────────────────────────────────── */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.5rem, 9vh, 5rem) var(--pad) 4rem;
}
.prose h1 {
  font-size: clamp(2rem, 5.5vw, 3rem);
  margin-bottom: 0.4rem;
}
.prose h2 {
  margin: 2.6rem 0 0.75rem;
  font: 700 1.3rem/1.25 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.015em;
}
.prose h3 {
  margin: 1.8rem 0 0.4rem;
  font: 500 1.05rem/1.3 'Space Grotesk', system-ui, sans-serif;
  color: var(--sand);
}
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: 0.45rem; }
.prose a { color: var(--sand); text-underline-offset: 3px; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}
.updated { color: var(--ink-3); font-size: 0.86rem; margin-top: 0; }

.callout {
  border-left: 2px solid var(--sand);
  background: var(--surface);
  padding: 1.1rem 1.3rem;
  border-radius: 0 14px 14px 0;
  margin: 1.5rem 0 2rem;
}

/* ── footer ───────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--edge);
  padding: 2.5rem var(--pad) 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
footer .fineprint { max-width: 40ch; }

/* Wide tables and code never push the page sideways. */
.prose pre, .prose table { overflow-x: auto; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   Colour, and text that arrives
   ═══════════════════════════════════════════════════════════════════════════

   The first version was two colours on black, which read as restraint from a
   distance and as monochrome up close. The app itself is not monochrome — it
   has a lavender, a navy, a gold and a rose, each meaning something — so the
   site borrows the same four and rotates them across the cards.

   `--hue` is set per element by a data attribute and then used for the rule,
   the glow and the heading, so one attribute colours a whole card and nothing
   has to be styled twice.
*/

:root {
  --lavender: #c9beff;
  --hue: var(--sand);
}

[data-hue='sand']     { --hue: var(--sand); }
[data-hue='lavender'] { --hue: var(--lavender); }
[data-hue='gold']     { --hue: var(--gold); }
[data-hue='rose']     { --hue: var(--rose); }

/* ── the hero, arriving line by line ──────────────────────────────────────
   Staggered by `--i` rather than by a nth-child chain, so the order lives in
   the markup next to the thing being ordered. It runs once, on load, and the
   page is composed and readable the moment it finishes — nothing here waits
   on a scroll observer that might never fire. */
.reveal {
  animation: arrive 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

h1 .line { display: block; }

/* The gradient in the headline drifts, slowly. A static gradient reads as a
   graphic; a moving one reads as light. */
h1 em {
  background: linear-gradient(100deg, var(--sand) 0%, var(--lavender) 45%, var(--rose) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: drift 14s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  h1 em { animation: none; }
}

/* ── colour on the cards ──────────────────────────────────────────────────
   A hairline of the card's hue along the top edge, and a wash of it behind.
   Both are the same variable, so a card changes colour by changing one
   attribute in the HTML. */
.grid article, .pledge {
  position: relative;
  overflow: hidden;
}
.grid article::before, .pledge::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: 0.55;
}
.grid article::after, .pledge::after {
  content: '';
  position: absolute;
  inset: -40% 40% 60% -20%;
  background: radial-gradient(closest-side, var(--hue), transparent);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.grid article:hover::after, .pledge:hover::after { opacity: 0.14; }
.grid article:hover { border-color: color-mix(in oklab, var(--hue) 45%, transparent); }
.grid h3, .pledge h3 { color: var(--hue); }

.strip > * { border-top: 2px solid transparent; }
.strip > *[data-hue] { border-top-color: color-mix(in oklab, var(--hue) 55%, transparent); }
.strip strong { color: var(--hue); }

/* ── the two commitments ──────────────────────────────────────────────────── */
.pledges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.1rem;
}
.pledge {
  padding: 1.75rem;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--surface);
}
.pledge h3 {
  margin: 0 0 0.6rem;
  font: 700 1.2rem/1.25 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.015em;
}
.pledge p { margin: 0; color: var(--ink-2); font-size: 0.96rem; }

/* ── the showcase ─────────────────────────────────────────────────────────── */
.showcase {
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 22rem);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; }
  .phone { margin-inline: auto; }
}
.showcase h2 { margin-bottom: 1.2rem; }

.ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.7rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
  font-size: 0.96rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 0 0 4px rgba(212, 201, 190, 0.12);
}

/*
  A phone, drawn rather than photographed: a real device frame would date the
  page the moment the hardware changes, and a PNG of a bezel is weight for
  nothing. The screen inside it is drawn the same way, from the app's own
  tokens - see .screen below.
*/
.phone {
  position: relative;
  width: 100%;
  max-width: 21rem;
  aspect-ratio: 375 / 812;
  border-radius: 2.4rem;
  padding: 0.55rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}
.phone::after {
  /* The glow the device sits in, tinted with the app's own navy. */
  content: '';
  position: absolute;
  inset: 12% -18% -12% -18%;
  background: radial-gradient(closest-side, var(--aurora), transparent);
  opacity: 0.5;
  z-index: -1;
  filter: blur(30px);
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--ground);
}
/*
  ── the home screen, drawn ──────────────────────────────────────────────────

  Not a screenshot. Every value below is the app's own: the near-black ground
  and 7%-white surfaces from theme/palettes.ts, the 4pt spacing and 16/20px
  radii from theme/tokens.ts, Space Grotesk on the money and Inter on the
  labels exactly as the app sets them, and the eight avatar colours in their
  real order. The figures are what the store actually computes from the sample
  trip, so nothing here is a number somebody made up to look good.

  Scoped hard under .phone-screen and given its own type sizes, because the
  app's scale is in px against a 375pt screen and the frame here is narrower
  than that. `container` units keep it proportional at any frame width.
*/
.screen {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #030303;
  color: #e6e2dc;
  font-family: 'Inter', system-ui, sans-serif;
  /* One knob: every size below is a multiple of this. */
  --u: 3.6cqw;
  overflow: hidden;
}

.screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 1.5) calc(var(--u) * 0.6);
}
.screen-mark {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: calc(var(--u) * 2.1);
  letter-spacing: -0.02em;
}
.screen-toggle {
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.screen-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.5) 0;
}

/* The one number the screen is about (tone: positive → the navy panel). */
.screen-hero {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.35);
  padding: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(140deg, #123458, #0b2440);
  box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 2.6) -0.6rem rgba(0, 0, 0, 0.75);
}
.screen-hero-label {
  font-weight: 500;
  font-size: calc(var(--u) * 1.05);
  letter-spacing: 0.09em;
  color: rgba(241, 239, 236, 0.84);
}
.screen-hero-amount {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: calc(var(--u) * 3.9);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #f1efec;
}
.screen-hero-meta {
  font-weight: 600;
  font-size: calc(var(--u) * 1.2);
  color: rgba(241, 239, 236, 0.84);
}

.screen-overline {
  margin: calc(var(--u) * 0.5) 0 0 calc(var(--u) * 0.4);
  font-weight: 600;
  font-size: calc(var(--u) * 0.98);
  letter-spacing: 0.1em;
  color: rgba(230, 226, 220, 0.52);
}

/* A group: colour spine, name and position. */
.screen-row {
  display: flex;
  align-items: stretch;
  border-radius: calc(var(--u) * 1.3);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.screen-spine { width: calc(var(--u) * 0.42); flex: none; }
.screen-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.24);
  padding: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.2) calc(var(--u) * 1.3);
}
.screen-row-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 1.5);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-row-sub {
  font-weight: 500;
  font-size: calc(var(--u) * 0.95);
  color: rgba(230, 226, 220, 0.52);
  white-space: nowrap;
}
.screen-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.5);
}
.screen-row-amount {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: calc(var(--u) * 1.5);
  letter-spacing: -0.01em;
  /* `positive` — the group owes you. */
  color: #d4c9be;
}

/* Overlapping avatars, each ringed in the ground so the stack reads as depth. */
.screen-stack { display: flex; }
.screen-stack i {
  width: calc(var(--u) * 1.75);
  height: calc(var(--u) * 1.75);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 600;
  font-size: calc(var(--u) * 0.85);
  color: #16161a;
  box-shadow: 0 0 0 calc(var(--u) * 0.2) #0a0a0a;
}
.screen-stack i + i { margin-left: calc(var(--u) * -0.5); }

.screen-foot {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 0.4) 0;
  font-weight: 500;
  font-size: calc(var(--u) * 1.02);
  color: rgba(230, 226, 220, 0.52);
}

/* The bar, with the active glyph lifted into its navy bubble. */
.screen-nav {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4) calc(var(--u) * 2.2);
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.screen-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  color: rgba(230, 226, 220, 0.52);
}
.screen-tab svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.screen-tab b {
  font-weight: 600;
  font-size: calc(var(--u) * 0.85);
  letter-spacing: 0.01em;
}
.screen-tab.is-on { color: #e6e2dc; }
.screen-bubble {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.9);
  height: calc(var(--u) * 2.9);
  margin-top: calc(var(--u) * -0.65);
  border-radius: 50%;
  background: linear-gradient(150deg, #123458, #0b2440);
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.1) rgba(18, 52, 88, 0.85);
}
.screen-bubble svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.screen-fab {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  margin: calc(var(--u) * -1.3) calc(var(--u) * 0.6) 0;
  border-radius: 50%;
  background: linear-gradient(150deg, #f1efec, #d4c9be);
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(212, 201, 190, 0.3);
}
.screen-fab svg { width: calc(var(--u) * 1.75); height: calc(var(--u) * 1.75); }