/* ============================================================
   Meed — glass over a honesty flower.

   One photograph runs behind every page: a lilac honesty flower
   (Lunaria annua, the "money plant") over soft green, CC BY 4.0,
   see data/photo.json. Bands are thin glass; every word sits on a
   surface of its own — card, sheet, chip — and never on the bare
   photograph, because every contrast failure this family of sites
   has ever shipped was a sentence standing on a picture.

   COLOUR IS NOT DEFINED HERE. css/tokens.css is generated by
   tools/palette.mjs, which solves each colour in OKLCh against the
   gamut at its own lightness and refuses to write the file unless
   every pair holds: each card against the photograph at its dark
   AND bright ends, composited in gamma space, and each ink against
   the thinnest glass it is ever set on.

   THE SURFACE DIVISION the palette proved, and tools/contrast.mjs
   re-checks on the built pages:
     --surface   (thin)  display type and graphic panels only
     --surface-2 (body)  every paragraph, label and number
     --surface-3 (dense) figures, tables, inputs
   ============================================================ */
@import url("tokens.css");

:root {
  --r: 26px;
  --r-sm: 18px;
  --r-xs: 12px;
  --maxw: 1200px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground-fill);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 520px) { .wrap { padding: 0 16px; } }
.mono, code { font-family: var(--mono); font-size: .88em; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--wash-2); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* ---------- the photograph ---------- */
.ground {
  position: fixed; inset: -40px; z-index: -3;
  /* The flowers sit a little right of centre and in the upper half. `cover` scales by the
     constrained axis, so on a wide window the vertical position is the lever: 38% keeps both
     blooms in frame behind the hero at every width this was measured at. */
  background: var(--ground-fill) url("../img/ground.jpg") 58% 38% / cover no-repeat;
}
@media (max-width: 760px) { .ground { background-image: url("../img/ground-1280.jpg"); background-position: 62% 30%; } }
.scrim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--pale-rgb), .06) 0%, rgba(var(--pale-rgb), .12) 60%, rgba(var(--pale-rgb), .18) 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--plum); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--plum-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--ink-rgb), .30); }
.btn-sand { background: var(--gold); color: var(--ink); }
.btn-sand:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--ink-rgb), .22); }
.btn-glass { background: rgba(var(--glass), .88); color: var(--ink); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-glass:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.btn-quiet { background: var(--wash); color: var(--ink); }
.btn-quiet:hover:not(:disabled) { background: var(--wash-2); }
.btn .arrow {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: 13px; line-height: 1; margin-right: -8px;
}
.btn-glass .arrow, .btn-quiet .arrow, .btn-sand .arrow { background: var(--wash); }

/* ---------- chips / eyebrows ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(var(--glass), .88); color: var(--ink-2);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.chip b { color: var(--ink); font-weight: 600; }
.chip svg { flex: none; color: var(--plum); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--up-rgb), .45); } 70% { box-shadow: 0 0 0 9px rgba(var(--up-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--up-rgb), 0); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold-ink); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 10px 0 14px;
  border-radius: 999px; background: rgba(var(--glass), .78);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 2px 12px rgba(var(--ink-rgb), .08);
  transition: background .25s, box-shadow .25s;
}
.nav.scrolled .nav-inner { background: rgba(var(--glass), .92); box-shadow: 0 10px 30px rgba(var(--ink-rgb), .14); }
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand [data-mark] { display: block; width: 30px; height: 30px; }
.brand [data-mark] svg { display: block; width: 100%; height: 100%; }
.brand-name { font-family: var(--serif); font-size: 31px; letter-spacing: -.01em; line-height: 1; margin-top: 1px; color: var(--ink); }
.nav-links { display: flex; gap: 2px; margin-left: 4px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--wash); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--wash); cursor: pointer; place-items: center; }
.nav-burger svg { display: block; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--wash); color: var(--ink-2); flex: none; transition: background .15s, color .15s, transform .15s; }
.icon-btn:hover { background: var(--wash-2); color: var(--ink); transform: translateY(-1px); }
.icon-btn svg { display: block; width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; flex: none; }
  .nav-inner { gap: 10px; padding-right: 8px; }
  .nav-right .hide-sm { display: none; }
  .nav-inner.open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 72px;
    padding: 12px; border-radius: 22px; background: rgba(var(--glass), .98); box-shadow: var(--shadow);
  }
  .nav-inner.open .nav-links a { padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 520px) {
  .nav .wrap { padding: 0 12px; }
  .nav-inner { height: 58px; padding-left: 12px; }
  .brand-name { font-size: 27px; }
  .nav-right .btn { padding: 9px 14px; font-size: 14px; }
  .nav-right .btn .arrow { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 26px 0 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 18px; align-items: start; }
.hero-card {
  position: relative; padding: 44px 46px 38px; border-radius: 40px;
  background: rgba(var(--glass), .56);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(var(--ink-rgb), .18);
  display: flex; flex-direction: column;
}
.wordmark {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(76px, 10vw, 136px);
  line-height: .86; letter-spacing: -.035em; margin: 22px 0 14px; color: var(--ink);
}
.wordmark [data-mark] { width: .66em; height: .66em; flex: none; filter: drop-shadow(0 8px 18px rgba(var(--ink-rgb), .25)); }
.wordmark [data-mark] svg { width: 100%; height: 100%; display: block; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -.012em; color: var(--ink);
}
.hero h1 em { font-style: italic; color: var(--plum); }
.hero .lede { max-width: 560px; margin-top: 14px; font-size: 17.5px; color: var(--ink-2); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 30px; }
.stat { padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); }
.stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.stat .v { font-family: var(--serif); font-size: 38px; line-height: 1.05; margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.skel { display: inline-block; min-width: 3.2em; height: .9em; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--ink-rgb), .08), rgba(var(--ink-rgb), .16), rgba(var(--ink-rgb), .08)); background-size: 200% 100%; animation: sk 1.3s infinite linear; vertical-align: -.05em; }
.skel.sq { width: 34px; min-width: 34px; height: 34px; border-radius: 11px; }
@keyframes sk { to { background-position: -200% 0; } }

/* the live payment beside the hero */
.live-card {
  padding: 26px 24px 22px; border-radius: 40px; display: flex; flex-direction: column; gap: 14px;
  background: rgba(var(--glass), .56);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(var(--ink-rgb), .18);
}
.live-top { display: flex; align-items: center; gap: 16px; }
.live-top .coin { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.live-top .coin [data-mark] { width: 60px; height: 60px; display: block; }
.live-top .coin svg { width: 100%; height: 100%; display: block; }
.live-top h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.live-top h3 b { font-weight: 400; color: var(--plum); }
.live-top .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); }
.live-top .sub b { color: var(--ink); }
.legs { list-style: none; display: grid; gap: 5px; }
.legs li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(var(--glass), .78); }
.legs .t { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.legs .n { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legs .r { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; line-height: 1.2; }
.legs .r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.live-err { color: var(--down); font-size: 14px; padding: 12px !important; display: block !important; }
.live-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.live-sum > div { padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.live-sum .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.live-sum b { display: block; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.live-sum small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.live-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.live-foot b { color: var(--ink); }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 34px 24px 26px; border-radius: 32px; }
  .live-card { border-radius: 32px; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:last-child { grid-column: span 2; }
  .wordmark { gap: 12px; }
  .live-top .coin { width: 60px; height: 60px; }
  .live-top .coin [data-mark] { width: 46px; height: 46px; }
  .live-top h3 { font-size: 32px; }
  .live-sum b { font-size: 26px; }
  .live-foot { flex-direction: column; align-items: stretch; }
}

/* ticker badges */
.tk {
  flex: none; width: 44px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: #fff; line-height: 1; background: var(--plum);
}

/* ---------- thin strip ---------- */
.strip { padding: 6px 0 20px; }
.strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.strip .chip { font-size: 13.5px; padding: 8px 15px; }

/* ---------- sections ---------- */
.section { padding: 68px 0; }
/* Thin glass bands, feathered at both ends so they read as light on the photograph. */
.band { background: linear-gradient(180deg, rgba(var(--glass), 0) 0, rgba(var(--glass), .08) 120px, rgba(var(--glass), .08) calc(100% - 120px), rgba(var(--glass), 0) 100%); }
.band-2 { background: linear-gradient(180deg, rgba(var(--glass), 0) 0, rgba(var(--glass), .16) 120px, rgba(var(--glass), .16) calc(100% - 120px), rgba(var(--glass), 0) 100%); }
.section-head {
  max-width: 800px; margin: 0 auto 34px; text-align: center;
  padding: 26px 34px 28px; border-radius: 34px; background: var(--surface-2);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.section-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1; letter-spacing: -.02em; margin-top: 12px;
}
.section-head h2 em { font-style: italic; color: var(--plum); }
.section-head p { margin-top: 12px; font-size: 17px; color: var(--ink-2); }

.card { background: var(--surface); border-radius: var(--r); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.card-pad { padding: 28px; background: var(--surface-2); }
.h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.p2 { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.p2 b { color: var(--ink); }

/* steps */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { padding: 28px; display: flex; flex-direction: column; background: var(--surface-2); }
.step-card .n { font-family: var(--serif); font-size: 60px; line-height: .9; color: var(--plum); }
.step-card h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.02; margin-top: 14px; letter-spacing: -.01em; }
.step-card p { margin-top: 10px; color: var(--ink-2); }
.step-card .what { margin-top: auto; padding-top: 18px; }
.step-card .what span { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--gold-ink); padding: 6px 12px; border-radius: 999px; background: rgba(var(--gold-rgb), .22); }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }

/* before / after */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs { padding: 30px; background: var(--surface-2); }
.vs h3 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.02; margin-top: 10px; }
.vs ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.vs li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 15px; }
.vs li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; }
.vs li::after { content: ""; position: absolute; left: 1px; top: calc(.15em + 1px); width: 18px; height: 18px; }
.vs.before li::before { background: rgba(var(--down-rgb), .12); }
.vs.before li::after { background: var(--down); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.vs.after li::before { background: rgba(var(--up-rgb), .13); }
.vs.after li::after { background: var(--up); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.vs .tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.vs.before .tag { background: rgba(var(--down-rgb), .1); color: var(--down); }
.vs.after .tag { background: rgba(var(--up-rgb), .12); color: var(--up); }
.vs.after { background: var(--surface-3); }
@media (max-width: 860px) { .versus { grid-template-columns: 1fr; } }
.honest { margin-top: 16px; padding: 22px 26px; display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: start; background: var(--surface-2); border-left: 4px solid var(--gold); }
.honest-k { font-family: var(--serif); font-size: 28px; line-height: 1.05; color: var(--gold-ink); }
.honest p { color: var(--ink-2); font-size: 15.5px; }
.honest b { color: var(--ink); }
@media (max-width: 700px) { .honest { grid-template-columns: 1fr; gap: 6px; } }

/* the stock table */
.table-card { padding: 22px; border-radius: var(--r); background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14.5px; min-width: 640px; }
.tbl th { text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; padding: 6px 12px; white-space: nowrap; }
.tbl td { padding: 10px 12px; background: rgba(var(--glass), .72); font-variant-numeric: tabular-nums; }
.tbl td:first-child { border-radius: 14px 0 0 14px; }
.tbl td:last-child { border-radius: 0 14px 14px 0; }
.tbl .r { text-align: right; }
.tbl .who { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.tbl .who b { font-weight: 700; }
.tbl .who span { font-size: 12.5px; color: var(--ink-2); }
.tbl .who .tk { color: #fff; font-size: 10.5px; }
.tbl .neg { color: var(--up); font-weight: 600; }
.tbl .nopool { color: var(--ink-2); }
/* A whole viewport of pale rows is the flattest thing this page can paint: twelve by default,
   and alternating tints so the block is never one uniform pane. */
#stock-table tbody tr:nth-child(n+13) { display: none; }
#stock-table.all tbody tr { display: table-row; }
#stock-table tbody tr:nth-child(even) td { background: rgba(var(--pale-rgb), .6); }
.tbl-more { display: flex; justify-content: center; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--wash); color: var(--plum); }
.pill.v4 { background: rgba(var(--gold-rgb), .26); color: var(--gold-ink); }

/* figures */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fig { padding: 24px; background: var(--surface-2); }
.fig .k { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.fig .v { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; margin: 8px 0 8px; color: var(--plum); }
.fig p { font-size: 14px; color: var(--ink-2); }
@media (max-width: 980px) { .figs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .figs { grid-template-columns: 1fr; } }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .split2 { grid-template-columns: 1fr; } }

/* request */
.request-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center; padding: 38px; border-radius: 36px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.request-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.8vw, 58px); line-height: 1; letter-spacing: -.02em; margin-top: 12px; }
.request-card h2 em { font-style: italic; color: var(--plum); }
.request-card p { margin-top: 12px; color: var(--ink-2); }
.req-demo { padding: 22px; border-radius: 26px; background: var(--surface-3); display: grid; gap: 8px; box-shadow: var(--shadow-sm); }
.req-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(var(--pale-rgb), .8); font-size: 14.5px; }
.req-line span { color: var(--ink-2); }
.req-link { padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--pale); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .request-card { grid-template-columns: 1fr; padding: 26px; } }

/* guarantees + proof */
.guarantee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.g-list { display: grid; gap: 10px; }
.g { padding: 20px 22px; border-radius: var(--r-sm); background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.g h4 { font-size: 16.5px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.g h4 .ico { width: 28px; height: 28px; border-radius: 9px; background: var(--plum); display: grid; place-items: center; flex: none; }
.g p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.g a { text-decoration: underline; text-underline-offset: 2px; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.proof-card { padding: 20px; border-radius: var(--r-sm); background: var(--surface-3); }
.proof-card .k { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.proof-card .v { font-family: var(--serif); font-size: 46px; line-height: 1; margin: 6px 0; color: var(--plum); font-variant-numeric: tabular-nums; }
.proof-card p { font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 980px) { .guarantee { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: var(--r-sm); background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-2); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 22px; color: var(--ink-2); }
.faq .a p + p { margin-top: 10px; }
.faq .a a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CTA slab + footer ---------- */
.slab {
  border-radius: 36px; padding: 60px 40px; text-align: center; color: #fff;
  background: rgba(var(--ink-rgb), .86); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.slab h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; }
.slab h2 em { color: var(--lilac); }
.slab p { color: var(--pale); max-width: 560px; margin: 14px auto 0; font-size: 17px; }
.slab .hero-cta { justify-content: center; margin-top: 26px; }

.footer { padding: 30px 0 40px; }
.foot-card { padding: 34px 34px 26px; border-radius: 30px; background: rgba(var(--glass), .78); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.foot-grid h5 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.foot-grid a:not(.brand) { display: block; color: var(--ink-2); padding: 3px 0; font-size: 14.5px; }
.foot-grid a:not(.brand):hover { color: var(--ink); }
.foot-grid .blurb { color: var(--ink-2); font-size: 14.5px; margin-top: 12px; max-width: 330px; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.foot-base a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- reveal ---------- */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none; } .live-dot { animation: none; } html { scroll-behavior: auto; } }

/* ============================================================
   App: pay, request, receipt
   ============================================================ */
.app-main { padding: 6px 0 60px; }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pay-grid { grid-template-columns: 1fr; } }
.box { padding: 26px; border-radius: 30px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); min-width: 0; }
.box + .box { margin-top: 16px; }
.box h2 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.box h2 em { font-style: italic; color: var(--plum); }
.box .sub { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sticky { position: sticky; top: 96px; }
@media (max-width: 1000px) { .sticky { position: static; } }

.lab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); margin: 22px 0 8px; }
.hint { font-size: 13px; color: var(--ink-2); text-transform: none; letter-spacing: 0; font-weight: 500; }
.hint.bad { color: var(--down); }
.hint.good { color: var(--up); }

/* payee lines */
.lines { display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) 150px 38px; gap: 8px; align-items: center; }
.field { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.field:focus-within { border-color: rgba(var(--plum-rgb), .5); box-shadow: 0 0 0 4px var(--wash); }
.field input, .field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); }
.field input.addr { font-family: var(--mono); font-size: 13.5px; }
.field input.amt { text-align: right; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.field .pre { color: var(--ink-2); font-weight: 700; }
.field.bad { border-color: rgba(var(--down-rgb), .6); }
.field.area { height: auto; padding: 12px 14px; }
.field textarea { resize: vertical; min-height: 44px; }
.rm { border: 0; background: var(--wash); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: var(--ink-2); font-size: 18px; }
.rm:hover { background: var(--wash-2); color: var(--ink); }
.lines-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.total-row { display: flex; align-items: baseline; gap: 10px; }
.total-row span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.total-row b { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .line { grid-template-columns: minmax(0, 1fr) 38px; } .line .field.amtf { grid-column: 1; } .line .rm { grid-row: 1 / span 2; grid-column: 2; } }
.request-banner { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(var(--gold-rgb), .24); color: var(--ink); font-size: 14.5px; }
.request-banner.bad { background: rgba(var(--down-rgb), .12); color: var(--down); }
.request-banner q { font-family: var(--serif); font-size: 20px; quotes: "“" "”"; }

/* holdings */
.hold { list-style: none; display: grid; gap: 6px; }
.hold li { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 12px; border-radius: 16px; background: var(--surface-3); cursor: pointer; }
.hold li.on { box-shadow: inset 0 0 0 2px var(--plum); }
.hold li.cash .tk { background: var(--gold); color: var(--ink); }
.hold input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--plum); cursor: pointer; }
.hold .t { font-weight: 700; font-size: 14.5px; }
.hold .n { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hold .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px; }
.hold .val small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.hold .custom { width: 110px; height: 40px; }
.hold .custom input { font-size: 15px; }
.empty { padding: 22px; border-radius: 16px; background: var(--surface-3); color: var(--ink-2); font-size: 14.5px; text-align: center; }
.empty a { text-decoration: underline; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-3); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--plum); color: #fff; }
.opts { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.opts label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; padding: 6px 10px; border-radius: 12px; background: var(--surface-3); }
.opts input[type=checkbox] { accent-color: var(--plum); width: 16px; height: 16px; }
.opts select { font: inherit; border: 0; background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; }

/* the plan */
.plan-empty { margin-top: 16px; padding: 22px; border-radius: 18px; background: var(--surface-3); color: var(--ink-2); font-size: 14.5px; }
.plan-sales { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.plan-sales li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--surface-3); }
.plan-sales .t { font-weight: 700; }
.plan-sales .n { font-size: 12.5px; color: var(--ink-2); }
.plan-sales .r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-sales .r small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.plan-sales li.cash .tk { background: var(--gold); color: var(--ink); }
.plan-rows { display: grid; gap: 6px; margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface-3); }
.q-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.q-row b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.q-row.big { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); }
.q-row.big b { font-family: var(--serif); font-weight: 400; font-size: 30px; }
.asks { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.asks li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--surface-3); font-size: 14px; color: var(--ink-2); }
.asks li .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--wash-2); color: var(--ink); flex: none; }
.asks li.on { color: var(--ink); box-shadow: inset 0 0 0 2px var(--plum); }
.asks li.on .dot { background: var(--plum); color: #fff; }
.asks li.done .dot { background: var(--up); color: #fff; }
.asks li.done { color: var(--ink); }
.go { width: 100%; margin-top: 16px; }
.warn { margin-top: 12px; padding: 13px 16px; border-radius: 14px; background: rgba(var(--down-rgb), .1); color: var(--down); font-size: 14.5px; }
.okbox { margin-top: 14px; padding: 18px; border-radius: 18px; background: rgba(var(--up-rgb), .12); color: var(--ink); }
.okbox h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--up); }
.okbox p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.okbox a { text-decoration: underline; }
.fine { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.fine a { text-decoration: underline; }
.acct-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--wash); font-size: 14px; color: var(--ink-2); }
.acct-chip b { color: var(--ink); font-family: var(--mono); font-size: 13px; }
.mini { border: 0; background: rgba(var(--glass), .9); color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.mini:hover { background: #fff; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: rot .8s linear infinite; flex: none; }
.btn-glass .spin, .btn-quiet .spin { border-color: rgba(var(--ink-rgb), .2); border-top-color: var(--ink); }
@keyframes rot { to { transform: rotate(360deg); } }

/* link output */
.linkbox { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--ink); }
.linkbox code { flex: 1; min-width: 0; color: var(--pale); overflow-wrap: anywhere; font-size: 12.5px; }

/* receipt */
.receipt { max-width: 820px; margin: 0 auto; }
.rc-head { display: flex; gap: 16px; align-items: center; }
.rc-head .coin { width: 64px; height: 64px; flex: none; }
.rc-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.rc-state.ok { background: rgba(var(--up-rgb), .14); color: var(--up); }
.rc-state.bad { background: rgba(var(--down-rgb), .12); color: var(--down); }
.rc-list { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.rc-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-3); font-size: 14.5px; }
.rc-list li .mono { overflow-wrap: anywhere; }
.rc-list li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-3); }
.kv dt { color: var(--ink-2); }
.kv dd { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.kv dd a { text-decoration: underline; text-underline-offset: 2px; }

/* toasts */
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 120; max-width: min(440px, calc(100vw - 36px)); padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: 14px; animation: tin .25s ease; }
.toast.err { background: var(--down); }
.toast.ok { background: var(--up); }
.toast a { text-decoration: underline; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* wallet chooser */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(var(--ink-rgb), .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-card { width: 100%; max-width: 420px; border-radius: 26px; background: rgba(var(--glass), 1); box-shadow: var(--shadow-lg); padding: 22px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal-head h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; }
.x { border: 0; background: var(--wash); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; flex: none; }
.wallet-btn { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: var(--wash); padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left; font-weight: 600; margin-top: 6px; }
.wallet-btn:hover { background: var(--wash-2); }
.wallet-btn img { width: 28px; height: 28px; border-radius: 8px; }

/* ---------- prose pages (docs, credits) ---------- */
.sheet { padding: 44px 48px; border-radius: 32px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
@media (max-width: 700px) { .sheet { padding: 28px 20px; } }
.prose { max-width: 800px; }
.prose h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 7vw, 76px); line-height: .98; letter-spacing: -.02em; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.05; margin-top: 44px; }
.prose h3 { font-size: 18px; margin-top: 24px; }
.prose p, .prose li { color: var(--ink-2); font-size: 16.5px; }
.prose p { margin-top: 12px; }
.prose ul, .prose ol { margin: 12px 0 0 22px; display: grid; gap: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose b, .prose strong { color: var(--ink); }
.prose pre { margin-top: 12px; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: var(--pale); overflow-x: auto; font-size: 13px; line-height: 1.6; }
.prose pre code { font-size: inherit; }
.prose .tbl { margin-top: 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.toc a { text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--wash); color: var(--ink); }
.toc a:hover { background: var(--wash-2); }

/* name over detail, in every list row */
.hold .t, .hold .n, .plan-sales .t, .plan-sales .n, .legs .t, .legs .n { display: block; }
.plan-sales .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* eight stocks is taller than a laptop screen; the sticky panel keeps its button in view */
.sticky .plan-sales { max-height: 330px; overflow-y: auto; padding-right: 2px; }

/* phones: the hero chip flows as one line of text, and prose tables scroll inside themselves */
.hero-card .chip { display: inline-block; line-height: 1.5; }
.hero-card .chip .live-dot { display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; }
.prose .tbl { min-width: 0; display: block; overflow-x: auto; }
[data-mark] { display: inline-block; }
.coin[data-mark] { width: 64px; height: 64px; }

/* The stock table measured 20.2% flat and 0.039 chroma — one big pane of pale rows, the flattest
   thing on the page. The card behind it is gone: rows float on the band with the photograph showing
   between them, like POSY's tiles, and the header labels carry their own glass. */
#stocks .table-card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
#stock-table { border-spacing: 0 12px; }
#stock-table td { padding-top: 7px; padding-bottom: 7px; }
#stock-table td { background: linear-gradient(rgba(var(--lilac-rgb), .26), rgba(var(--lilac-rgb), .26)), rgba(var(--pale-rgb), .84); }
#stock-table tbody tr:nth-child(even) td { background: linear-gradient(rgba(var(--lilac-rgb), .12), rgba(var(--lilac-rgb), .12)), rgba(var(--glass), .8); }
#stock-table th { background: rgba(var(--glass), .82); }
#stock-table th:first-child { border-radius: 12px 0 0 12px; }
#stock-table th:last-child { border-radius: 0 12px 12px 0; }
/* Narrower, so the photograph frames the rows instead of the rows filling the frame (18% flat at full width). */
#stocks .table-card { max-width: 900px; margin: 0 auto; }
/* The request section measured 0.039 chroma live (floor 0.045): a near-white demo panel on a
   cream card. The panel takes the petal tint the stock rows use. */
.request-card { background: linear-gradient(rgba(var(--lilac-rgb), .16), rgba(var(--lilac-rgb), .16)), var(--surface-2); }
.req-demo { background: linear-gradient(rgba(var(--lilac-rgb), .3), rgba(var(--lilac-rgb), .3)), var(--surface-3); }
.req-line { background: rgba(var(--pale-rgb), .72); }
/* The proof grid is six dense panes; live it measured 0.039 chroma, and tinting them opaque made it
   25% flat. They are body glass instead (the surface the palette proved for their inks), with blur,
   so the photograph shows through — the family's rule: bands thin, type on surfaces. */
.proof-card { background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }