:root{
  /* Light first. Instagram opens white, and so does this. */
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f2f2f5; --line:#dbdbdb; --line-soft:#efefef;
  --fg:#111114; --fg-soft:#111114cc; --fg-dim:#737378; --fg-faint:#a8a8ad;
  --accent:#d6249f; --accent-fg:#ffffff;
  --link:#0095f6;
  --good:#22c55e; --warn:#f59e0b; --bad:#ed4956;

  /* The gradient, in one place. Every ring, badge and primary button is a
     slice of this so they cannot drift apart. */
  --grad:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%);
  --grad-soft:linear-gradient(45deg,#f9ce3418,#ee2a7b18,#6228d718);

  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:12px; --r-lg:18px;
  --topbar:60px;
  --shadow:0 1px 2px #1111140d, 0 8px 24px #1111140a;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#000000; --surface:#121212; --surface-2:#1c1c1e; --line:#262626; --line-soft:#1f1f1f;
  --fg:#f5f5f7; --fg-soft:#f5f5f7cc; --fg-dim:#a8a8ad; --fg-faint:#6e6e73;
  --accent:#ee2a7b; --accent-fg:#ffffff;
  --link:#4db5ff;
  --shadow:0 1px 2px #00000040, 0 8px 24px #00000030;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--fg); font-family:var(--font-ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit; color:inherit}
img{max-width:100%; display:block}
::selection{background:#ee2a7b; color:#fff}

.wrap{max-width:1000px; margin:0 auto; padding:0 20px}
/* Numbers get the monospace face even though prose does not: a column of
   balances that does not line up is a column nobody can compare. */
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.dim{color:var(--fg-dim)} .soft{color:var(--fg-soft)} .faint{color:var(--fg-faint)}
.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.link{color:var(--link)}
.break{word-break:break-all}
.micro{font-size:12px} .fine{font-size:13px}
.center{text-align:center}
.hide{display:none !important}
.spacer{flex:1}

/* Text painted with the gradient. Used once per page at most — it is a
   highlight, and a page where everything is highlighted has none. */
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}

/* -------------------------------------------------------------- top bar */
.topbar{position:sticky; top:0; z-index:40; height:var(--topbar); display:flex;
  align-items:center; background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-inner{display:flex; align-items:center; gap:22px; width:100%}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px;
  letter-spacing:-.02em}
/* The mark: a rounded square with a ring inside it, filled with the gradient.
   Our own shape, in their colours — not their glyph. */
.brand .mark{width:28px; height:28px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; flex:none}
.brand .mark::after{content:""; width:11px; height:11px; border-radius:50%;
  border:2px solid #fff}
.nav{display:flex; gap:20px; font-size:14px; color:var(--fg-dim)}
.nav a:hover{color:var(--fg)}
.nav a[aria-current=page]{color:var(--fg); font-weight:600}
.topbar-right{display:flex; align-items:center; gap:8px}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border:1px solid var(--line); background:var(--surface);
  color:var(--fg); border-radius:10px; cursor:pointer; font-size:14px; font-weight:600;
  transition:opacity .16s var(--ease), border-color .16s var(--ease)}
.btn:hover{border-color:var(--fg-faint); color:var(--fg)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line)}
.btn-primary{background:var(--grad); border:0; color:#fff}
.btn-primary:hover{opacity:.9; color:#fff}
/* The flat blue is Instagram's own action colour and reads as "the safe,
   ordinary action" next to the gradient's "the big one". */
.btn-blue{background:var(--link); border:0; color:#fff}
.btn-blue:hover{opacity:.9; color:#fff}
.btn-sm{padding:6px 12px; font-size:13px}
.btn-block{width:100%}

/* ----------------------------------------------------------------- hero */
.hero{padding:70px 0 48px; background:var(--surface); border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(32px,6vw,56px); line-height:1.05; letter-spacing:-.035em;
  margin:0 0 18px; font-weight:800; max-width:16ch}
.hero .lede{font-size:17px; color:var(--fg-soft); max-width:56ch; margin:0 0 28px; line-height:1.55}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Says what the thing is NOT, right under what it is. In the hero on purpose:
   a disclaimer nobody scrolls to is decoration. */
.plainly{margin-top:30px; padding:16px 18px; border-radius:var(--r-lg);
  background:var(--grad-soft); border:1px solid var(--line-soft);
  font-size:14px; color:var(--fg-soft); max-width:68ch; line-height:1.55}
.plainly b{color:var(--fg)}

/* ---------------------------------------------------------------- cards */
.section{padding:44px 0}
.section h2{font-size:24px; letter-spacing:-.025em; margin:0 0 5px; font-weight:800}
.section .sub{color:var(--fg-dim); font-size:14px; margin:0 0 22px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow)}
.stat .k{font-size:12px; color:var(--fg-dim); font-weight:600}
.stat .v{font-size:28px; margin-top:6px; font-weight:700; letter-spacing:-.03em;
  font-family:var(--font-num); font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- ledger */
.ledger{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow)}
.row{display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.row .who{display:flex; align-items:center; gap:12px; min-width:0}
/* The story ring: a gradient donut with the avatar sitting inside it. This is
   the single most recognisable shape in that world, and it is a shape, not a
   logo — which is exactly the line this design walks. */
.row .av{width:44px; height:44px; border-radius:50%; background:var(--grad);
  padding:2.5px; flex:none}
.row .av span{display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  background:var(--surface); color:var(--fg-dim); font-size:15px; font-weight:600}
.row .handle{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .sub2{font-size:12px; color:var(--fg-dim)}
.row .amt{font-family:var(--font-num); font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap; font-weight:600}
.ledger-head{display:grid; grid-template-columns:1fr auto auto; gap:16px; padding:11px 18px;
  font-size:12px; font-weight:600; color:var(--fg-dim); border-bottom:1px solid var(--line)}
.empty{padding:38px 18px; text-align:center; color:var(--fg-dim); font-size:14px}

/* The label that carries the whole honesty claim. A state, not a
   reassurance: amber means nobody has this money yet. */
.tag{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px;
  font-weight:600; border:1px solid currentColor}
.tag-unclaimed{color:var(--warn)}
.tag-claimed{color:var(--good)}
.tag-blocked{color:var(--fg-faint)}

/* ---------------------------------------------------------------- forms */
.field{display:block; width:100%; padding:12px 14px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; color:var(--fg);
  /* 16px or iOS Safari zooms the whole page when the field is tapped, and the
     layout stays shifted for the rest of the visit. */
  font-size:16px}
.field:focus{outline:none; border-color:var(--fg-faint); background:var(--surface)}
.field::placeholder{color:var(--fg-faint)}
.label{display:block; font-size:12px; font-weight:600; color:var(--fg-dim); margin:0 0 7px}
.hint{font-size:13px; color:var(--fg-dim); margin-top:8px}
.formrow{margin-bottom:16px}
.code{font-family:var(--font-num); background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:13px 15px; font-size:14px; word-break:break-all; font-weight:600}

/* ---------------------------------------------------------------- steps */
.steps{counter-reset:s; display:grid; gap:12px}
.step{counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:14px;
  align-items:start; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.step::before{content:counter(s); width:30px; height:30px; border-radius:50%;
  background:var(--grad); color:#fff; display:grid; place-items:center;
  font-size:13px; font-weight:700}
.step h3{margin:0 0 3px; font-size:15px; font-weight:700}
.step p{margin:0; font-size:14px; color:var(--fg-soft); line-height:1.5}

/* ---------------------------------------------------------------- notes */
.note{padding:13px 15px; border-radius:12px; font-size:14px; border:1px solid var(--line);
  line-height:1.5}
.note-warn{border-color:#f59e0b55; color:var(--warn); background:#f59e0b12}
.note-bad{border-color:#ed495655; color:var(--bad); background:#ed495612}
.note-good{border-color:#22c55e55; color:var(--good); background:#22c55e12}

footer{border-top:1px solid var(--line); margin-top:56px; padding:28px 0 44px;
  font-size:13px; color:var(--fg-dim); background:var(--surface)}
.foot{display:flex; gap:18px; flex-wrap:wrap; align-items:center}

/* --------------------------------------------------------------- mobile */
@media (max-width:820px){
  .grid2,.grid3{grid-template-columns:1fr}
  .hero{padding:44px 0 34px}
  .topbar{height:auto; padding:9px 0}
  .topbar-inner{display:grid; grid-template-areas:"brand right" "nav nav";
    grid-template-columns:1fr auto; gap:9px 10px}
  .brandwrap{grid-area:brand; min-width:0; overflow:hidden}
  .topbar-right{grid-area:right}
  /* A scrollable second row, never display:none — hiding nav on phones is how
     pages end up with sections nobody can reach. */
  .nav{grid-area:nav; width:100%; overflow-x:auto; gap:18px; padding-bottom:2px;
    -webkit-overflow-scrolling:touch}
  .nav a{padding:6px 0; white-space:nowrap}
  .row{grid-template-columns:1fr auto; gap:10px}
  .row .tagcell{grid-column:2; justify-self:end}
  .ledger-head{display:none}
}
/* Touch screens have no hover, and a button whose fill only appears on hover
   looks like an empty outline on a phone. */
@media (hover:none){
  .btn:hover{border-color:var(--line)}
  .btn-primary:hover,.btn-blue:hover{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}