/* ══════════════════════════════════════════════════════════════════════════
   Meji Connect — design system
   ──────────────────────────────────────────────────────────────────────────
   This is a money product. The Scout dashboard is a wallet, so balance figures
   are the loudest thing on the page and everything else stays quiet.

   Two type roles carry that idea: money, reference codes and account numbers
   are set in tabular monospace (a ledger's figures are monospaced); prose is
   set in a humanist sans.

   BRAND: every value below is lifted from the Meji Builds site's own design
   tokens (src/app/globals.css in meji-builds/meji-builds), so this platform
   and the studio site are the same brand rather than two that merely rhyme:
   gold-into-blue on deep navy, set in Geist.
   ══════════════════════════════════════════════════════════════════════════ */

/* Self-hosted so no CDN is involved and nothing can be blocked at the network
   layer. Variable weights, one file each. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Geist Mono has no glyph for ₦ (U+20A6) — every price rendered in the mono
   font (the .money class, the big offer price) showed a tofu box instead.
   A second face under the same family name, scoped to just that one code
   point, pulls the glyph from Geist (the sans face, which does have it)
   while every other mono character still comes from Geist Mono. */
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20A6;
}

:root {
  /* Ground: the studio's navy ramp. */
  --bg:          #060b18;   /* navy-950 */
  --surface:     #0a1224;   /* navy-900 */
  --surface-2:   #101b33;   /* navy-800 */
  --surface-3:   #182543;   /* navy-700 */
  --surface-4:   #22345c;   /* navy-600 */
  --line:        rgba(255, 255, 255, 0.09);
  --line-soft:   rgba(255, 255, 255, 0.05);

  --text:        #e8edf7;   /* ink */
  --text-2:      #bcc7dc;
  --muted:       #93a0b8;
  --faint:       #5b6a86;

  /* Brand gold. Also the primary action colour, because on this platform the
     commission IS the product. */
  --gold:        #e7b04b;
  --gold-hi:     #f6d488;
  --gold-deep:   #c8912f;
  --gold-soft:   rgba(231, 176, 75, 0.12);
  --gold-line:   rgba(231, 176, 75, 0.30);
  --on-gold:     #17120a;

  /* Brand blue. Doubles as the "waiting" state: pending, processing, on hold. */
  --blue:        #5b9dff;
  --blue-deep:   #1e4fd1;
  --blue-soft:   rgba(59, 130, 246, 0.14);

  /* Semantic states that the brand has no token for. Tuned against navy. */
  --jade:        #35c98d;   /* cleared, available, paid */
  --jade-soft:   rgba(53, 201, 141, 0.13);
  --coral:       #ff6b6b;   /* debt, failed, lost */
  --coral-soft:  rgba(255, 107, 107, 0.12);

  --glow-gold:   0 0 40px -8px rgba(231, 176, 75, 0.45);
  --glow-blue:   0 0 45px -8px rgba(59, 130, 246, 0.5);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
          Consolas, monospace;

  --rail: 232px;
  --tabbar: 64px;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient brand background, carried over from the studio site: two radial
   glows (gold top-left, blue top-right) over a faint grid that fades out at
   the edges. Fixed and behind everything, so it never affects layout. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(231, 176, 75, 0.10), transparent 60%),
    radial-gradient(55rem 40rem at 95% 8%, rgba(59, 130, 246, 0.12), transparent 60%),
    radial-gradient(50rem 40rem at 50% 110%, rgba(59, 130, 246, 0.07), transparent 60%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 85%);
}

img { max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
::selection { background: rgba(231, 176, 75, 0.3); color: var(--text); }

/* The studio's two gradients, applied the way the studio site applies them:
   gold-into-blue across a multi-word phrase, gold-only on a single word. Run
   gold-into-blue over one short word and it passes through grey mid-word and
   goes muddy, which is exactly why the site keeps them separate. */
.gradient-brand {
  background-image: linear-gradient(100deg, var(--gold-hi), var(--gold) 35%, var(--blue) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.gradient-gold {
  background-image: linear-gradient(100deg, var(--gold-hi), var(--gold-deep));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Inline icons carry no intrinsic size, so give every one a sane default.
   The rail and tab bar override this with their own, more specific rules. */
svg { width: 17px; height: 17px; flex: none; }
.btn.sm svg { width: 15px; height: 15px; }
.btn.lg svg { width: 19px; height: 19px; }
.notice .ico svg { width: 18px; height: 18px; }
.empty .ico svg { width: 20px; height: 20px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── typography ─────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.018em; }
h1 { font-size: 1.5rem;  font-weight: 700; }
h2 { font-size: 0.98rem; font-weight: 650; }
h3 { font-size: 0.92rem; font-weight: 650; }

.eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  font-weight: 600;
}
.lead { color: var(--text-2); margin: 6px 0 0; max-width: 62ch; }
.sub  { color: var(--muted); font-size: 0.82rem; }
.hint { color: var(--muted); font-size: 0.82rem; margin: 0; }

/* Money, reference codes, account numbers — the ledger voice. */
.mono, .money, .ref {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.money { font-weight: 600; }
.money.pos { color: var(--jade); }
.money.neg { color: var(--coral); }
.ref { font-size: 0.78rem; color: var(--muted); }

/* ══ APP SHELL ═══════════════════════════════════════════════════════════
   Desktop: fixed left rail. Mobile: bottom tab bar within the thumb arc.
   ═══════════════════════════════════════════════════════════════════════ */
.shell { min-height: 100vh; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}
.rail .brand { margin: 0 8px 22px; }

.rail a, .rail button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .14s, color .14s;
}
.rail a:hover, .rail button:hover { background: var(--surface-2); color: var(--text); }
.rail .is-on { background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.rail .spacer { flex: 1; }
.rail svg { width: 17px; height: 17px; flex: none; stroke-width: 1.9; }

.tabbar { display: none; }

.main { padding-left: var(--rail); }
.page { max-width: 1080px; margin: 0 auto; padding: 30px 28px 72px; }
.page.narrow { max-width: 560px; }
.page.mid    { max-width: 760px; }

/* Standalone pages (landing, invite, client portal) have no rail. */
.main.bare { padding-left: 0; }

/* ── legal pages (Terms, Privacy) ─────────────────────────────────────────
   Everything elsewhere is built for compact dashboard UI, so h1–h3 run small
   and tight. Long-form reading needs its own scale and breathing room. */
.legal h1 { font-size: 1.9rem; margin-bottom: 6px; }
.legal .updated { color: var(--muted); font-size: 0.84rem; margin: 0 0 8px; }
.legal .intro { color: var(--text-2); max-width: 62ch; margin: 0 0 32px; }
.legal h2 {
  font-size: 1.1rem; color: var(--text);
  margin: 0; padding: 32px 0 12px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 { font-size: 0.96rem; color: var(--text-2); margin: 18px 0 8px; }
.legal p { margin: 0 0 14px; color: var(--text-2); line-height: 1.7; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; color: var(--text-2); line-height: 1.7; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--muted); }
.legal strong { color: var(--text); font-weight: 620; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 0.88rem; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.legal th { color: var(--muted); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ── site footer ──────────────────────────────────────────────────────── */
.site-footer {
  max-width: 1080px; margin: 0 auto;
  padding: 26px 28px 44px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: 0.8rem;
}
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text-2); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* ── brand mark ─────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 11px; }
/* The real Meji Builds monogram, not a lookalike letterform. */
.brand .mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  flex: none;
  background: url("/favicon.svg") center / cover no-repeat;
  /* Hide the placeholder letter the markup carries for no-image fallback. */
  font-size: 0; color: transparent;
}
.brand .name { font-weight: 680; font-size: 0.95rem; letter-spacing: -0.015em; line-height: 1.25; }
.brand .name small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); letter-spacing: 0; }

/* Top bar, used only on pages without a rail. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 15px 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
}

/* ══ SURFACES ════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.card-head h2 { margin: 0; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1040px) { .grid-2.wide-first { grid-template-columns: 1.15fr 1fr; align-items: start; } }

/* ══ BALANCE HERO ════════════════════════════════════════════════════════
   The single loudest element in the product. A Scout opens this app to answer
   one question, so that answer gets the whole top of the screen.
   ═══════════════════════════════════════════════════════════════════════ */
.balance {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(240,180,41,.10), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.balance .eyebrow { margin-bottom: 10px; }
.balance .amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.3rem, 7vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text);
}
.balance .amount.neg { color: var(--coral); }
.balance-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.balance-actions .btn { flex: 1 1 auto; min-width: 140px; }

.balance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.balance-split > div { background: var(--surface); padding: 13px 15px; }
.balance-split .k { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.balance-split .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.02rem; margin-top: 3px; }
.balance-split .v.hold { color: var(--blue); }
.balance-split .v.life { color: var(--text-2); }

/* ══ METRIC TILES ════════════════════════════════════════════════════════ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 17px;
}
.tile .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; }
.tile .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em;
  margin-top: 7px; line-height: 1.1;
}
.tile .n { font-size: 0.76rem; color: var(--muted); margin-top: 5px; }
.tile .v.jade { color: var(--jade); }
.tile .v.blue { color: var(--blue); }
.tile .v.gold { color: var(--gold); }
.tile .v.coral { color: var(--coral); }

/* ══ STATUS ══════════════════════════════════════════════════════════════
   A dot and a label, set directly against the page — no filled badge shape.
   State is still encoded in colour AND the dot, so it survives greyscale and
   colour-blindness rather than relying on hue alone.
   ═══════════════════════════════════════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.76rem; font-weight: 620; letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text-2);
}
.pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}

.pill.new           { color: var(--text-2); }
.pill.in_discussion { color: var(--blue); }
.pill.quoted        { color: var(--gold); }
.pill.won,
.pill.paid, .pill.success, .pill.active, .pill.cleared { color: var(--jade); }
.pill.lost, .pill.cancelled, .pill.rejected,
.pill.failed, .pill.refunded, .pill.suspended, .pill.contested { color: var(--coral); }
.pill.pending, .pill.requested, .pill.processing, .pill.held, .pill.approved { color: var(--blue); }

/* A tag is NOT a pill. Pills carry state, which is why they get a semantic
   colour and a status dot. A tag is a static fact about a record (a commission
   rate, a plan name) and must stay neutral, or every screen ends up speckled
   with green that means nothing. */
.tag {
  display: inline-flex; align-items: center;
  font-size: 0.74rem; font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ══ BUTTONS ═════════════════════════════════════════════════════════════ */
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 0.88rem; font-weight: 620;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--gold);
  color: var(--on-gold);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, opacity .14s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--gold-hi); color: var(--on-gold); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.ghost { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn.quiet:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { background: transparent; color: var(--coral); border-color: color-mix(in srgb, var(--coral) 42%, transparent); }
.btn.danger:hover { background: var(--coral-soft); color: var(--coral); }
.btn.sm { padding: 7px 13px; font-size: 0.79rem; }
.btn.full { width: 100%; }
.btn.icon { padding: 12px; }   /* icon-only, e.g. the send button */
.btn.lg { padding: 14px 24px; font-size: 0.95rem; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }

/* ══ FORMS ═══════════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 0.79rem; font-weight: 560; color: var(--text-2); }
.field .help { font-size: 0.76rem; color: var(--muted); }

input, select, textarea {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E939C' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
input.mono { font-family: var(--mono); }

/* Money inputs get a permanent ₦ so the unit is never in doubt. */
.naira { position: relative; }
.naira input { padding-left: 30px; font-family: var(--mono); }
.naira::before {
  content: "₦";
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-family: var(--mono); font-size: 0.92rem;
  pointer-events: none; z-index: 1;
}

.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }

/* ══ RESPONSIVE DATA LIST ════════════════════════════════════════════════
   One markup structure, two layouts. On desktop each row is a grid matching
   the header; below 860px the header disappears and each row becomes a card
   with its own inline labels. Nothing ever scrolls sideways.
   ═══════════════════════════════════════════════════════════════════════ */
.dl { display: flex; flex-direction: column; }

.dl-head {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 14px;
  padding: 0 14px 9px;
  border-bottom: 1px solid var(--line);
}
.dl-head span {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 600;
}

.dl-row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background .14s;
}
.dl-row:last-child { border-bottom: none; }
.dl-row.tap { cursor: pointer; }
.dl-row.tap:hover { background: var(--surface-2); }

.dl-k { display: none; }               /* row labels: mobile only */
.dl-cell { min-width: 0; }
.dl-cell .t { font-weight: 600; overflow-wrap: anywhere; }
.dl-cell .s { font-size: 0.79rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.dl-cell.right { text-align: right; }
.dl-cell.actions { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 859px) {
  .dl { gap: 11px; }
  .dl-head { display: none; }
  .dl-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 15px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  /* The first cell is the row's identity — it stays a full-width heading. */
  .dl-cell.primary { padding-bottom: 11px; margin-bottom: 3px; border-bottom: 1px solid var(--line); }
  .dl-cell:not(.primary) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 6px 0;
  }
  .dl-cell.right { text-align: right; }
  .dl-cell.actions { justify-content: stretch; padding-top: 12px; }
  .dl-cell.actions .btn { flex: 1; }
  .dl-k {
    display: block;
    font-size: 0.76rem; color: var(--muted); font-weight: 500;
    flex: none;
  }
}

/* ══ KEY / VALUE DETAIL ══════════════════════════════════════════════════ */
.kv { display: flex; flex-direction: column; }
.kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv > div:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: 0.84rem; flex: none; }
.kv .v { text-align: right; overflow-wrap: anywhere; }
.kv .v.strong { font-weight: 620; }

/* ══ INVITE LINK ═════════════════════════════════════════════════════════ */
.invite {
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(240,180,41,.09), transparent 55%),
    var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.invite-code {
  font-family: var(--mono);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gold);
  display: block;
  margin: 4px 0 16px;
  overflow-wrap: anywhere;
}
.copyrow { display: flex; gap: 9px; flex-wrap: wrap; }
.copyrow input { flex: 1 1 220px; font-family: var(--mono); font-size: 0.8rem; }

/* ══ CHAT ════════════════════════════════════════════════════════════════ */
.thread {
  display: flex; flex-direction: column; gap: 13px;
  max-height: 480px; overflow-y: auto;
  padding: 4px 2px 6px;
  overscroll-behavior: contain;
}
.msg { max-width: 76%; }
.msg .who { font-size: 0.71rem; color: var(--muted); margin: 0 0 4px 3px; }
.msg .bubble {
  padding: 11px 14px;
  border-radius: 15px 15px 15px 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.mine { align-self: flex-end; }
.msg.mine .who { text-align: right; margin: 0 3px 4px 0; }
.msg.mine .bubble {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
  border-radius: 15px 15px 5px 15px;
}
.msg.system { align-self: center; max-width: 94%; }
.msg.system .bubble {
  background: transparent; border: 1px dashed var(--line);
  color: var(--muted); font-size: 0.8rem; text-align: center; border-radius: 100px;
  padding: 8px 16px;
}

/* Pinned to the bottom of the viewport rather than just the bottom of the
   card. Without this, a phone swipe that starts over .thread scrolls the
   message list (which stops dead at its own max-height, by design — see
   overscroll-behavior above) and never reaches the composer sitting in
   ordinary flow below it, so the input becomes unreachable mid-conversation.
   Sticky keeps it in view the whole time the card is on screen, the way any
   chat app's input bar behaves. */
.composer {
  display: flex; gap: 10px; align-items: flex-end;
  position: sticky; bottom: 14px; z-index: 5;
  margin: 15px -1px -1px; padding: 10px 1px 1px;
  background: var(--surface);
}
.composer textarea { min-height: 46px; max-height: 150px; }
.composer .btn { flex: none; }

@media (max-width: 900px) {
  /* Clear the fixed mobile tab bar, or the composer sticks half-hidden behind it. */
  .composer { bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); }
}

/* ══ OFFER CARD (the quote a client receives) ════════════════════════════ */
.offer {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(240,180,41,.13), transparent 60%),
    var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.offer .price {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 6.5vw, 2.6rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; margin: 8px 0 4px;
}
.offer .terms { color: var(--text-2); font-size: 0.87rem; margin: 14px 0 20px; }

/* ══ NOTICES ═════════════════════════════════════════════════════════════ */
.notice {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 0.86rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.notice .ico { flex: none; margin-top: 1px; }
.notice.good { background: var(--jade-soft);  border-color: color-mix(in srgb, var(--jade) 30%, transparent);  color: #9CEFCB; }
.notice.warn { background: var(--gold-soft);  border-color: var(--gold-line);                                  color: #F7D68C; }
.notice.bad  { background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 30%, transparent); color: #FFB3AB; }
.notice.info { background: var(--blue-soft);  border-color: color-mix(in srgb, var(--blue) 30%, transparent);  color: #B7CBFF; }

/* ══ SEGMENTED FILTER ════════════════════════════════════════════════════ */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  border: none; background: none;
  font: inherit; font-size: 0.8rem; font-weight: 560;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.seg button:hover { color: var(--text); }
.seg button.is-on { background: var(--gold); color: var(--on-gold); font-weight: 640; }

/* ══ MODAL / BOTTOM SHEET ════════════════════════════════════════════════ */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4, 8, 10, .74);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.scrim.is-on { display: flex; }
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  width: 100%; max-width: 440px;
  max-height: 88vh; overflow-y: auto;
  animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sheet h3 { font-size: 1.12rem; margin-bottom: 5px; }
.sheet > .sub { margin-bottom: 18px; display: block; }
.sheet-body { display: flex; flex-direction: column; gap: 14px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 20px; }
.sheet-actions .btn { flex: 1; }

/* On phones a dialog slides up from the bottom edge, where the thumb is. */
@media (max-width: 640px) {
  .scrim { align-items: flex-end; padding: 0; }
  .sheet {
    max-width: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    max-height: 92vh;
    animation: slideup .22s ease-out;
  }
  @keyframes slideup { from { transform: translateY(100%); } }
  .sheet-actions { flex-direction: column-reverse; }
}

/* ══ TOAST ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; z-index: 95;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 0.86rem; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: min(90vw, 440px);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { border-color: color-mix(in srgb, var(--coral) 46%, transparent); }
@media (max-width: 900px) { .toast { bottom: calc(var(--tabbar) + 18px + env(safe-area-inset-bottom)); } }

/* ══ EMPTY & LOADING ═════════════════════════════════════════════════════ */
.empty { text-align: center; padding: 40px 22px; }
.empty .ico {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border-radius: 12px; background: var(--surface-2);
  display: grid; place-items: center; color: var(--muted);
}
.empty h3 { margin-bottom: 5px; }
.empty p { color: var(--muted); font-size: 0.86rem; margin: 0 auto; max-width: 38ch; }

.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: 7px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-row { height: 58px; margin-bottom: 10px; border-radius: var(--r); }

/* ══ LANDING ═════════════════════════════════════════════════════════════ */
.hero { padding: 60px 0 40px; }
.hero h1 {
  font-size: clamp(2.05rem, 6.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.hero .lead { font-size: 1.05rem; margin-top: 16px; }
.hero .gold { color: var(--gold); }

/* The four steps are a genuine sequence, so they're numbered. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.step .n {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.08em;
  display: block; margin-bottom: 9px;
}
.step h3 { margin-bottom: 5px; }
.step p { color: var(--muted); font-size: 0.84rem; margin: 0; }

.split { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1.05fr .95fr; gap: 44px; } }

/* ══ TABS (inline, non-rail) ═════════════════════════════════════════════ */
.linktabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.linktabs button {
  background: none; border: none; font: inherit; font-size: 0.88rem; font-weight: 560;
  color: var(--muted); padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.linktabs button:hover { color: var(--text); }
.linktabs button.is-on { color: var(--gold); border-bottom-color: var(--gold); font-weight: 640; }

/* ══ MOBILE ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rail { display: none; }
  .main { padding-left: 0; }
  .page { padding: 20px 16px calc(var(--tabbar) + 34px + env(safe-area-inset-bottom)); }
  .topbar { padding: 13px 16px; }

  .mobilebar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 30;
  }

  .tabbar {
    display: flex;
    position: fixed; inset: auto 0 0 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar button {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none;
    font: inherit; font-size: 0.66rem; font-weight: 560;
    color: var(--muted);
    padding: 9px 4px 8px;
    cursor: pointer;
    min-height: var(--tabbar);
    justify-content: center;
  }
  .tabbar button svg { width: 20px; height: 20px; stroke-width: 1.9; }
  .tabbar button.is-on { color: var(--gold); }

  .balance { padding: 22px 18px; border-radius: var(--r); }
  .card { padding: 17px 15px; }
  .page-head { margin-bottom: 18px; }
  .hero { padding: 34px 0 26px; }
  .msg { max-width: 88%; }
  .tiles { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 901px) { .mobilebar { display: none; } }

/* Utilities — kept few and specific, so they don't fight component rules. */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hidden { display: none !important; }
.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;
}