/* ============================================================
   Skein — wool-cream glass over a heap of dyed wool.

   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; }
.hero-stats > div { display: flex; flex-direction: column; gap: 3px; }
.hero-stats > div > b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -.01em; }
.hero-stats > div > span { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.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; }
  /* On a phone the hero sits over a different part of the photograph — a
     1280-wide crop positioned at 62% 30%, which is the bright blue wall — and
     the lede measured 4.23:1 there on 56% glass while passing on the desktop
     crop. The pane is denser at this width. The CSS was right at one size and
     wrong at the other, which is exactly what measuring only one viewport
     misses. */
  .hero-card { background: var(--surface-2); }
  .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; }
/* Each fact gets its OWN pane. Set straight on the photograph these read at
   1.55:1 against the bright wall behind them, and the contrast sweep said so —
   small type on the thinnest glass needs the darkest ink, and a pane. */
.strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.strip-inner > span {
  background: var(--surface-2); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; color: var(--ink-2);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.strip-inner > span b { color: var(--ink); font-weight: 700; }
.strip .chip { font-size: 13.5px; padding: 8px 15px; }

/* A note that sits directly on the ground rather than inside a card gets its
   own pane too, for the same reason. */
.note-pane {
  background: var(--surface-2); border-radius: var(--r-sm); padding: 14px 18px; margin-top: 16px;
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  color: var(--ink-2); font-size: 14px; line-height: 1.55;
}
.note-pane b { color: var(--ink); }
.note-pane code { color: var(--ink); background: var(--wash); padding: 1px 5px; border-radius: 5px; }

/* ---------- 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; }
/* A table row is a DENSE slab and it is nearly opaque, unlike every other pane
   on this page. At 72% white the photograph still showed through, and over its
   dark end the green negatives measured 4.32:1 against a row that was supposed
   to be light — the CSS read correct and the composite did not. The texture of
   the page comes from the ground around the table, not from inside it. */
.tbl td { padding: 10px 12px; background: rgba(var(--glass), .94); 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. */
/* A whole viewport of pale rows is the flattest thing this page can paint.
   Both long tables show twelve rows until asked, and alternate their tint so
   the block is never one uniform pane. Measured: unrestricted, the stock table
   alone took one frame to 44% flat, against a reference that never passes 16. */
/* EIGHT rows, not twelve. Twelve nearly-opaque rows fill a 713 px viewport
   almost exactly, and that frame measured 22.8% flat against a reference whose
   worst frame is 15.5%. The rows have to stay opaque for the ink to hold, so
   the slab is made shorter instead of thinner. */
.tbl.short tbody tr:nth-child(n+9) { display: none; }
.tbl.short.all tbody tr { display: table-row; }
.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--pale) 48%, rgb(var(--glass))); }
.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; }
/* The stock table used to tint its rows with a translucent wash left over from
   a sibling. Two rules for the same thing is how a fix stops arriving: the
   general row rule above was made nearly opaque and these overrode it, so three
   contrast failures did not move across two stylesheet edits and looked exactly
   like a cached measurement. There is one row tint now, and it is up there. */
#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); }


/* ---------------------------------------------------------------- skein
   Layout the landing page adds on top of the shared card system. Nothing
   here invents a colour: every value is a token solved by tools/palette.mjs. */

.hero-side { display: flex; flex-direction: column; gap: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head .eyebrow { margin: 0; }

/* three numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.08; margin: 14px 0 8px; }
.steps p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.steps p + p { margin-top: 10px; }
.step-n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--mono); font-size: 16px; font-weight: 500;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* the two-sided argument: where it does not pay, and where it does */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-k { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.vs-v { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1; margin: 6px 0 12px; letter-spacing: -.02em; }
.vs.before .vs-v { color: var(--ink-2); }
.vs.after .vs-v { color: var(--plum); }
.vs p { color: var(--ink-2); font-size: 15.5px; line-height: 1.58; }
@media (max-width: 860px) { .vs-grid { grid-template-columns: 1fr; } .vs-v { font-size: 46px; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.06; margin-bottom: 10px; }
.two-col p { color: var(--ink-2); font-size: 15.5px; line-height: 1.58; }
.two-col p + p { margin-top: 12px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* tables wide enough to need a scroller on a phone */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-head { padding: 22px 24px 4px; }
.table-head h4 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.table-head p { margin-top: 6px; }

.cta-card {
  background: var(--surface-2); border-radius: var(--r); padding: 54px 40px; text-align: center;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow);
}
.cta-card h2 { font-family: var(--serif); font-weight: 400; font-size: 54px; line-height: 1.02; letter-spacing: -.02em; }
.cta-card h2 em { font-style: italic; color: var(--plum); }
.cta-card .lede { margin: 12px auto 22px; max-width: 46ch; }
.cta-card .hero-cta { justify-content: center; }
@media (max-width: 700px) { .cta-card { padding: 38px 22px; } .cta-card h2 { font-size: 38px; } }

/* the live coil card on the hero */
.coil-rows { display: grid; gap: 1px; background: var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.coil-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--surface-3); padding: 9px 12px; }
.coil-row .tk { flex: none; }
.coil-row b { font-size: 14.5px; }
.coil-row .qty { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.coil-row .amt { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); text-align: right; }
.coil-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.coil-total .k { font-size: 13px; color: var(--ink-3); }
.coil-total .v { font-family: var(--serif); font-size: 34px; line-height: 1; }
.coil-note { margin-top: 10px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* the board and the winder, on /app */
.lot { background: var(--surface-2); border-radius: var(--r); padding: 22px; }
.lot + .lot { margin-top: 14px; }
.lot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lot-side { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lot-side.sell { background: rgba(var(--plum-rgb), .14); color: var(--plum); }
.lot-side.buy { background: rgba(var(--up-rgb), .16); color: var(--up); }
.lot-price { font-family: var(--serif); font-size: 32px; line-height: 1; }
.lot-strands { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.lot-strand { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-3); border-radius: 999px; padding: 4px 11px 4px 4px; font-size: 13px; }
.lot-strand .qty { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.lot-why { font-size: 13.5px; color: var(--ink-2); }
.lot-why b { color: var(--plum); }
.prem { font-family: var(--mono); font-size: 13px; }
.prem.over { color: var(--down); }
.prem.under { color: var(--up); }

.winder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; align-items: start; }
@media (max-width: 960px) { .winder-grid { grid-template-columns: 1fr; } }
.pickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.picker { display: flex; align-items: center; gap: 8px; background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.picker:hover { border-color: var(--line); }
.picker[aria-pressed="true"] { border-color: var(--plum); background: var(--wash-2); }
.picker .t { font-weight: 600; font-size: 14px; }
.picker .p { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-3); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--plum); outline-offset: 1px; }
.steps-log { margin-top: 14px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.steps-log .done { color: var(--up); }
.steps-log .fail { color: var(--down); }