/* ============================================================
   Paddock — cream glass over a shut green door.

   One photograph runs behind every page: teal shutters held shut
   by an iron bolt and a padlock, rosemary in flower in front
   (Jernej Furman, CC BY 2.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. A hand-edited :root here is
   how a palette drifts from the thing that proved it.
   ============================================================ */
@import url("tokens.css");

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

  --serif: "Fraunces", "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; }
.mono, code { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-3); }
.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(--leaf); outline-offset: 2px; }

/* ---------- the photograph ---------- */
.ground {
  position: fixed; inset: -40px; z-index: -3;
  /* 50% across, 58% down: the three horses and the fence behind them stay in
     frame at every viewport this is measured at, and the hero card lands on the
     pasture rather than on the sun. A `cover` background scales by the
     constrained axis, so on a wide window the vertical position is the only
     lever there is, and on a tall one the horizontal. */
  background: var(--ground-fill) url("../img/ground.jpg") 50% 58% / cover no-repeat;
}
@media (max-width: 760px) { .ground { background-image: url("../img/ground-1280.jpg"); } }
.scrim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(var(--bright-rgb), .14), transparent 70%),
    linear-gradient(180deg, rgba(var(--bright-rgb), .04) 0%, rgba(var(--bright-rgb), .10) 60%, rgba(var(--bright-rgb), .16) 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(--leaf); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--leaf-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--ink-rgb), .30); }
.btn-sand { background: var(--gold); color: var(--gold-ink); }
.btn-sand:hover:not(:disabled) { background: var(--gold); transform: translateY(-1px); }
.btn-glass { background: rgba(255, 255, 255, .84); 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 { 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(255, 255, 255, .84); 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; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 var(--wash-2); 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);
  /* --ink-2, not --leaf: a section head sits on the BAND, which is the photograph
     with a thin wash over it, and --leaf measured 4.44:1 against the 4.5 it needs
     at this size. The gold dash before it is what carries the colour. */
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }

/* ---------- 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), .76);
  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), .9); 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: 27px; 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; }
.net-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 7px 12px; border-radius: 999px; background: var(--wash); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--wash-2); color: var(--ink); 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; }
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; flex: none; }
  .nav-inner { gap: 10px; padding-right: 8px; }
  .nav-right .hide-sm { display: none; }
  .nav.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), .97); box-shadow: var(--shadow);
  }
  .nav.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: 24px; }
  .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.08fr) minmax(0, .92fr); gap: 18px; align-items: stretch; }
/* the hero grid tops-align, so the live panel does not stretch */
.hero-grid { align-items: start; }
.hero-card {
  position: relative; padding: 46px 46px 38px; border-radius: 40px;
  /* .44: at .56 over the even teal of the shutters this pane measured 18.6% flat
     against the reference's worst 15%, whatever the ground did (tools/ground.mjs). */
  background: rgba(var(--glass), .44);
  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: 16px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 9vw, 118px);
  line-height: .9; letter-spacing: -.035em; margin: 22px 0 12px; color: var(--ink);
}
.wordmark [data-mark] { width: .74em; height: .74em; flex: none; }
.wordmark [data-mark] svg { width: 100%; height: 100%; display: block; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.3vw, 40px); line-height: 1.08; letter-spacing: -.012em; color: var(--leaf);
}
/* --leaf, not --leaf-2: over the sunlit planks the lighter teal measured 2.66:1 at 40px. */
.hero h1 em { font-style: italic; color: var(--leaf); }
.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-3); }
.stat .v { font-family: var(--serif); font-size: 30px; line-height: 1.1; margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* --ink-2, not --ink-3: at 12.5px this is body text by the WCAG threshold, and
   over the bright end of the photograph --ink-3 measured 4.11:1 against 4.5. */
.stat .s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.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; }
@keyframes sk { to { background-position: -200% 0; } }

/* the live basket beside the hero */
.posy-card {
  padding: 26px 26px 22px; border-radius: 40px; display: flex; flex-direction: column; gap: 16px;
  align-self: start;                       /* the panel is as tall as its contents, not as tall as the hero */
  background: rgba(var(--glass), .56);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(var(--ink-rgb), .18);
}
.posy-top { display: flex; align-items: center; gap: 16px; }
.posy-top .donut { width: 108px; height: 108px; flex: none; }
.posy-top h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.posy-top .sub { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.posy-top .seg { margin-top: 10px; }
.legs { list-style: none; display: grid; gap: 4px; }
.legs li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px 7px 8px; border-radius: 14px; background: rgba(255, 255, 255, .62); }
.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: 14px; font-weight: 600; line-height: 1.2; }
.legs .r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.posy-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--wash); font-size: 13.5px; color: var(--ink-2); }
.posy-foot b { color: var(--ink); }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 34px 24px 26px; border-radius: 32px; }
  .posy-card { border-radius: 32px; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:last-child { grid-column: span 2; }
  .posy-top .donut { width: 84px; height: 84px; }
  .posy-top h3 { font-size: 28px; }
  .wordmark { gap: 12px; }
}

/* ticker badges */
.tk {
  flex: none; width: 34px; 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;
}
.tk.lg { width: 40px; height: 40px; border-radius: 13px; font-size: 11.5px; }

/* ---------- 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(255, 255, 255, 0) 0, rgba(255, 255, 255, .07) 120px, rgba(255, 255, 255, .07) calc(100% - 120px), rgba(255, 255, 255, 0) 100%); }
.band-2 { background: linear-gradient(180deg, rgba(var(--glass), 0) 0, rgba(var(--glass), .15) 120px, rgba(var(--glass), .15) calc(100% - 120px), rgba(var(--glass), 0) 100%); }
.section-head {
  max-width: 780px; margin: 0 auto 34px; text-align: center;
  padding: 26px 34px 28px; border-radius: 34px; background: var(--head);
}
.section-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02; letter-spacing: -.02em; margin-top: 12px;
}
/* --leaf, not --leaf-2: a section head sits on the band, and the lighter green measured
   2.95:1 against the 3:1 large type needs over the brightest tulips. */
.section-head h2 em { font-style: italic; color: var(--leaf); }
.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-2 { background: var(--surface-2); }
.card-pad { padding: 28px; }

/* steps */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Step cards carry paragraphs, so they are BODY cards (the surface division at the top of the
   palette): on the thin pane the numbers in --leaf-2 measured 2.71:1 and the chips 3.80:1. */
.step-card { padding: 28px; display: flex; flex-direction: column; background: var(--surface-2); }
.step-card .n { font-family: var(--serif); font-size: 54px; line-height: .9; color: var(--leaf); }
.step-card h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; 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: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink); padding: 6px 12px; border-radius: 999px; background: var(--surface-3); }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }

/* baskets */
.baskets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.basket { padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s, box-shadow .2s; }
.basket:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.basket-top { display: flex; gap: 14px; align-items: center; }
.basket-top .donut { width: 72px; height: 72px; flex: none; }
.basket h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -.01em; }
.basket .blurb { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.tickers { display: flex; flex-wrap: wrap; gap: 6px; }
.tickers span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 9px 4px 5px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.tickers span i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.tickers span em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.basket-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.basket-foot .fig { font-size: 13px; color: var(--ink-3); }
.basket-foot .fig b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1050px) { .baskets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .baskets { grid-template-columns: 1fr; } }

/* before / after */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs { padding: 30px; }
.vs h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; margin-top: 10px; }
.vs ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.vs li { display: flex; gap: 12px; color: var(--ink-2); font-size: 15px; }
.vs li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; }
.vs.before li::before { background: rgba(var(--down-rgb), .12); }
.vs.before li::after { content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; 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 { content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; 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(--ink-rgb), .07); color: var(--down); }
.vs.after .tag { background: rgba(var(--up-rgb), .12); color: var(--up); }
.vs.after { background: var(--surface-2); }
@media (max-width: 860px) { .versus { grid-template-columns: 1fr; } }

/* prices — a grid of tiles with gaps; the tool bar is its own glass surface */
.market-card { padding: 0; }
.mkt-more { display: flex; justify-content: center; padding: 14px 0 0; }
.mkt-tools { display: flex; gap: 10px; align-items: center; padding: 10px; flex-wrap: wrap; margin-bottom: 12px; border-radius: 28px; background: rgba(var(--glass), .56); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.mkt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(var(--glass), .64); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); transition: background .15s, transform .15s; min-width: 0; }
a.tile:hover { background: rgba(var(--glass), .84); transform: translateY(-1px); }
.tile-top { display: flex; align-items: center; gap: 10px; }
.tile .who { flex: 1; min-width: 0; }
.tile .t { font-weight: 700; font-size: 15px; line-height: 1.2; }
.tile .n { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .px { font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.tile-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-row .bar { margin-left: 0; }
@media (max-width: 1080px) { .mkt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mkt-grid { grid-template-columns: minmax(0, 1fr); } }
.search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--surface-3); border-radius: 999px; padding: 0 16px; height: 44px; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; width: 100%; color: var(--ink); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--wash); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.mkt-meta { font-size: 13px; color: var(--ink-3); padding: 0 6px; }
.tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14.5px; min-width: 720px; }
.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(255, 255, 255, .60); font-variant-numeric: tabular-nums; }
.tbl th { background: transparent; }
.tbl td:first-child { border-radius: 14px 0 0 14px; }
.tbl td:last-child { border-radius: 0 14px 14px 0; }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td { background: rgba(255, 255, 255, .88); }
.tbl .who { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.tbl .who .t { font-weight: 600; }
.tbl .who .n { font-size: 12.5px; color: var(--ink-3); }
.tbl .r { text-align: right; }
.venue { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.venue.v3 { background: rgba(var(--ink-rgb), .09); color: var(--leaf); }
.venue.v4 { background: rgba(var(--gold-rgb), .2); color: var(--gold-ink); }
.bar { display: inline-block; width: 60px; height: 6px; border-radius: 6px; background: var(--wash-2); overflow: hidden; vertical-align: middle; margin-left: 8px; }
.bar i { display: block; height: 100%; background: var(--sprout); border-radius: 6px; }

/* guarantees */
.guarantee { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.g-list { display: grid; gap: 10px; }
.g { padding: 20px 22px; border-radius: var(--r-sm); background: var(--surface); 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(--leaf); display: grid; place-items: center; flex: none; }
.g p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.proof { padding: 30px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); }
.proof .score { font-family: var(--serif); font-size: 76px; line-height: .9; letter-spacing: -.03em; }
.proof .score small { font-size: 30px; color: var(--ink-3); }
.proof .fine { font-size: 13.5px; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.kv dd a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.checks { list-style: none; display: grid; gap: 6px; max-height: 280px; overflow: auto; padding-right: 6px; font-size: 13.5px; }
.checks li { display: flex; gap: 8px; color: var(--ink-2); }
.checks li b { color: var(--up); flex: none; }
@media (max-width: 980px) { .guarantee { 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); 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-3); 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; }

/* ---------- CTA slab + footer ---------- */
.slab {
  border-radius: 36px; padding: 56px 40px; text-align: center; color: #fff;
  background: rgba(var(--ink-rgb), .84); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.slab h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; letter-spacing: -.02em; }
.slab h2 em { color: var(--bright); }
.slab p { color: rgba(255, 255, 255, .8); max-width: 560px; margin: 14px auto 0; font-size: 17px; }
.slab .hero-cta { justify-content: center; margin-top: 26px; }
.slab .btn-glass { background: rgba(255, 255, 255, .94); }

.footer { padding: 30px 0 40px; }
.foot-card { padding: 34px 34px 26px; border-radius: 30px; background: rgba(var(--glass), .70); 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-3); margin-bottom: 10px; }
.foot-grid a { display: block; color: var(--ink-2); padding: 3px 0; font-size: 14.5px; }
.foot-grid a: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-3); }
.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
   ============================================================ */
.app-main { padding: 6px 0 60px; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); width: max-content; max-width: 100%; overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.tabs button.on { background: var(--leaf); color: #fff; }
.tabs .badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(var(--gold-rgb), .24); color: var(--gold-ink); }
.tabs button.on .badge { background: rgba(255, 255, 255, .2); color: #fff; }
.acct-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 14px; color: var(--ink-2); }
.acct-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }

.work { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
@media (max-width: 1060px) { .work { grid-template-columns: 1fr; } }
.box { padding: 24px; border-radius: var(--r); background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); min-width: 0; }
.box h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; }
.box .sub { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.box + .box { margin-top: 16px; }
.stack { display: grid; gap: 14px; margin-top: 18px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bal { font-size: 13px; color: var(--ink-3); }
.bal button, .mini { border: 0; background: var(--wash); color: var(--ink); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; margin-left: 6px; }
.bal button:hover, .mini:hover { background: var(--wash-2); }

/* basket picker */
.picker { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 16px -2px 0; scrollbar-width: thin; }
.picker button { flex: none; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, .66); padding: 7px 14px 7px 7px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.picker button .donut { width: 28px; height: 28px; }
.picker button.on { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }

/* the composition editor */
.comp { list-style: none; display: grid; gap: 6px; margin-top: 14px; }
.comp li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 88px 30px; gap: 10px; align-items: center; padding: 8px 8px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, .64); }
.comp .t { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.comp .n { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp input[type=range] { width: 100%; accent-color: var(--leaf-2); }
.comp .w { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line-2); }
.comp .w input { width: 100%; border: 0; outline: 0; font: inherit; font-size: 14.5px; font-weight: 600; text-align: right; background: transparent; font-variant-numeric: tabular-nums; min-width: 0; }
.comp .w span { font-size: 13px; color: var(--ink-3); }
.comp .rm { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--ink-3); font-size: 17px; }
.comp .rm:hover { background: var(--wash); color: var(--ink); }
.comp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sum-ok { font-size: 13.5px; font-weight: 600; color: var(--up); }
.sum-bad { font-size: 13.5px; font-weight: 600; color: var(--down); }
@media (max-width: 600px) {
  .comp li { grid-template-columns: 34px minmax(0, 1fr) 80px 30px; }
  .comp input[type=range] { display: none; }
}

/* order card */
.field { display: grid; gap: 6px; }
.field label, .lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.input {
  display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border-radius: 16px;
  background: var(--surface-3); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
.input:focus-within { border-color: rgba(var(--leaf-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--leaf-rgb), .1); }
.input input, .input select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 22px; font-weight: 600; width: 100%; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; }
.input select { font-size: 15px; cursor: pointer; }
.input .unit { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.quote { border-radius: 16px; background: rgba(255, 255, 255, .6); padding: 14px 16px; display: grid; gap: 8px; font-size: 14px; }
.quote .row-between span:first-child { color: var(--ink-3); }
.quote .row-between span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.qlegs { list-style: none; display: grid; gap: 4px; }
.qlegs li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.qlegs .tk { width: 28px; height: 28px; border-radius: 9px; font-size: 9px; }
.qlegs .mid { min-width: 0; }
.qlegs .mid b { font-weight: 600; }
.qlegs .mid small { display: block; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlegs .out { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.qlegs .out small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.qlegs li.bad .out { color: var(--down); }
.warn { padding: 12px 14px; border-radius: 14px; background: var(--surface-3); border-left: 4px solid var(--down); color: var(--ink); font-size: 14px; }
/* A PANE, not a tint. `background: var(--wash)` is 8.5% of the sea over
   whatever is behind it, which over a photograph is a photograph — and every
   contrast failure this family of sites has shipped was a sentence standing on
   one. A note is glass like everything else. */
.note { padding: 13px 16px; border-radius: 14px; background: var(--surface-2); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); color: var(--ink-2); font-size: 14px; }
.box .note, .stack .note { background: var(--wash); backdrop-filter: none; -webkit-backdrop-filter: none; }
.note a, .warn a, .box a.link, .a a, .prose a, .fine a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.fine { font-size: 12.5px; color: var(--ink-3); }

.steps-mini { display: flex; gap: 6px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.steps-mini span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-weight: 600; }
.steps-mini span.on { background: var(--leaf); color: #fff; }
.steps-mini span.done { background: rgba(var(--up-rgb), .14); color: var(--up); }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.metric { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .64); min-width: 0; }
.metric .k { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.metric .v { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr 1fr; } }

/* holdings */
.hold { list-style: none; display: grid; gap: 4px; margin-top: 14px; }
.hold li { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .6); }
.hold li.nochk { grid-template-columns: 34px minmax(0, 1fr) auto; }
.hold input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--leaf-2); }
.hold .t { font-weight: 600; font-size: 14.5px; }
.hold .n { font-size: 12.5px; color: var(--ink-3); }
.hold .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; }
.hold .amt { font-size: 12.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.total { font-family: var(--serif); font-size: 50px; line-height: 1; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.empty { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .55); color: var(--ink-2); font-size: 14px; text-align: center; }

.pick { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 10px; border-radius: 16px; background: var(--surface-3); border: 1px solid var(--line-2); cursor: pointer; width: 100%; text-align: left; }
.pick .t { font-weight: 600; }
.pick .n { font-size: 12.5px; color: var(--ink-3); }
.pick .chev { margin-left: auto; color: var(--ink-3); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(var(--ink-rgb), .44); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-card { width: 100%; max-width: 460px; max-height: min(660px, 90vh); display: flex; flex-direction: column; border-radius: 26px; background: rgba(var(--glass), 1); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 12px; gap: 12px; }
.modal-head h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.modal .search { margin: 0 16px 8px; flex: none; min-width: 0; background: #fff; border: 1px solid var(--line-2); }
.x { border: 0; background: var(--wash); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; flex: none; }
.modal-body { padding: 0 14px 16px; overflow: auto; }
.list-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 10px; border-radius: 14px; cursor: pointer; text-align: left; }
.list-item:hover { background: var(--wash); }
.list-item:disabled { opacity: .5; cursor: default; }
.list-item img { width: 36px; height: 36px; border-radius: 10px; }
.list-item .t { font-weight: 600; }
.list-item .n { font-size: 12.5px; color: var(--ink-3); }
.list-item .r { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.toast { padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: 14px; display: flex; gap: 12px; align-items: flex-start; animation: tin .25s ease; }
.toast.err, .toast.bad { background: var(--down); }
.toast.ok { background: var(--up); }
.toast a { text-decoration: underline; }
.toast .x2 { margin-left: auto; border: 0; background: transparent; color: #fff; opacity: .75; cursor: pointer; font-size: 16px; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }
.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-quiet .spin, .btn-glass .spin { border-color: rgba(var(--ink-rgb), .2); border-top-color: var(--ink); }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- prose pages (docs) ---------- */
/* --surface-2: the docs are prose, and prose belongs on the body card (tools/palette.mjs). */
.sheet { padding: 44px 48px; border-radius: 32px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.prose { max-width: 780px; }
.prose h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 68px); line-height: 1; letter-spacing: -.02em; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin-top: 40px; }
.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; }
/* --wash is 8.5% of the sea over whatever is behind it, and inside a .sheet
   that is glass over a photograph — so an inline <code> inherited the picture's
   variance and `js/assets.js` measured 4.36:1 at 390 px. An opaque chip, and
   the ink one step darker on it. */
.prose code { background: rgba(var(--ink-rgb), .08); color: var(--ink); padding: 1px 6px; border-radius: 6px; }
.prose pre { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: var(--bright); overflow: auto; font-size: 13px; line-height: 1.6; }
/* `color: inherit` matters: the .prose code rule above sets a dark ink for an
   inline chip on glass, and inside a <pre> whose ground is --ink that is dark
   on dark — it measured 1.00:1. */
.prose pre code { background: none; padding: 0; color: inherit; }
.prose .lede { font-size: 19px; color: var(--ink-2); margin-top: 14px; }
/* One card per section, with the photograph between them: as a single sheet the docs
   measured 21-25% flat where the reference's worst frame is 16%. */
.doc-stack { display: grid; gap: 14px; min-width: 0; }
.doc-stack .sheet { padding: 30px 40px 34px; }
.doc-stack .sheet > h2:first-child { margin-top: 0; }
.doc-stack .sheet:nth-child(even) { background: var(--surface-3); }
.addr-table tr:nth-child(odd) td { background: rgba(var(--glass), .45); }
.docs-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
/* The thin surface, with --ink links (5.36:1 at the photograph's dark end): a contents card the
   same tint as the sheets beside it made the whole frame one median, and flatter. */
.toc { position: sticky; top: 96px; padding: 18px; border-radius: 22px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); display: grid; gap: 2px; }
.toc a { font-size: 14px; color: var(--ink); padding: 6px 10px; border-radius: 10px; }
.toc a:hover { background: var(--wash); color: var(--ink); }
.addr-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.addr-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.addr-table td:first-child { color: var(--ink-2); white-space: nowrap; }
.addr-table td:last-child { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .docs-grid { grid-template-columns: 1fr; } .toc { position: static; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .sheet { padding: 28px 20px; border-radius: 24px; } }

/* ============================================================
   Paddock additions: the board, the proof grid, the wide card.
   Everything below sits on a SURFACE. Nothing here puts a
   sentence on the bare photograph, which is what every contrast
   failure in this family of sites has turned out to be.
   ============================================================ */
.card.wide { padding: 28px; }
.card.wide h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.card.wide p { color: var(--ink-2); font-size: 15.5px; }
.card.wide em { font-style: italic; color: var(--leaf); }

/* --surface-2, not --surface. The board is forty rows of small tabular numbers,
   and at the thinner alpha their ground moved with the photograph underneath:
   a green "-0.13%" over the darkest water measured 4.34:1 at 390 px where the
   same cell over the brightest measured 6.8:1. A data surface has to be the
   same surface everywhere it is read. */
.table-wrap { overflow-x: auto; border-radius: var(--r); background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.board { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.board th, .board td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-2); }
.board thead th { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; background: rgba(var(--glass), .35); }
.board tbody tr:last-child td { border-bottom: 0; }
/* Zebra rows. Readability first — a forty-row board of numbers needs them —
   but they also stop the table being one uniform pane: the flattest frame on
   this page was the cost table at 27.5% against the reference's worst of 16%,
   and a single 1150x500 block of 70%-white glass IS a fill however it was
   built. */
.board tbody tr:nth-child(odd) { background: rgba(var(--glass), .30); }
.board tbody tr:nth-child(even) { background: rgba(var(--ink-rgb), .035); }
.board .r, .board th.r { text-align: right; font-variant-numeric: tabular-nums; }
.board .sym { font-weight: 700; color: var(--ink); }
.board .co { color: var(--ink-2); font-size: 12.5px; }
.board .warn { color: var(--down); font-weight: 600; }
.board .fine { color: var(--up); font-weight: 600; }

.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.proof-card { padding: 22px; border-radius: var(--r-sm); background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.proof-card .n { font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--leaf); }
.proof-card h4 { font-size: 15px; margin: 8px 0 4px; }
.proof-card p { font-size: 13.5px; color: var(--ink-2); }
.proof-card code { display: block; margin-top: 10px; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.note { margin-top: 18px; }
.section .note { max-width: 860px; }
.legs .pip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--leaf); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.legs .warn, .posy-foot .warn { color: var(--down); }
.posy-foot .fine { color: var(--ink-2); }
#bc-ring { flex: none; }
.big { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 46px); line-height: 1.02; letter-spacing: -.02em; margin-top: 6px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--ink-2); }
.kv b { font-variant-numeric: tabular-nums; }
.hold-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 16px; background: var(--surface-2); }
.hold-row .t { font-weight: 600; }
.hold-row .n { font-size: 12.5px; color: var(--ink-3); }
.hold-row .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hold-row .r small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-3); }
.hold-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--leaf); }
.verdict { padding: 14px 16px; border-radius: 16px; font-size: 14.5px; }
.verdict.clear { background: rgba(var(--up-rgb), .13); color: var(--up); }
.verdict.costly { background: rgba(var(--gold-rgb), .22); color: var(--gold-ink); }
.verdict.blocked { background: rgba(var(--down-rgb), .12); color: var(--down); }
.verdict b { font-weight: 700; }
.steps { list-style: none; display: grid; gap: 3px; font-family: var(--mono); font-size: 12.5px; }
.steps li { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.steps li.inside { margin-left: 22px; background: var(--wash); }
.steps li b { color: var(--ink); font-family: var(--sans); font-weight: 600; }
input[type=range] { width: 100%; accent-color: var(--leaf); margin-top: 8px; }

/* ============================================================
   PADDOCK — the parts this site has that its siblings do not:
   the live card, the giving form, the links, and the page a
   recipient lands on.

   THE SURFACE DIVISION, which tools/palette.mjs 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
   Nothing is set on the bare photograph.
   ============================================================ */

/* ---------- the live card on the landing page ---------- */
.live-card {
  align-self: start; padding: 24px; border-radius: 34px;
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 30px 80px rgba(var(--ink-rgb), .18);
}
.live-head h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.live-head .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.live-card .legs { margin-top: 16px; }
.live-card .legs li { grid-template-columns: 52px minmax(0, 1fr) auto; background: rgba(var(--glass), .72); }
.legs .l-name { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legs .l-n { text-align: right; font-variant-numeric: tabular-nums; }
.legs .l-n b { font-weight: 700; font-size: 14.5px; }
.legs .l-n i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.legs .pip { width: auto; min-width: 46px; padding: 0 8px; height: 30px; font-size: 11.5px; }
.live-foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.live-err { color: var(--down); font-size: 14px; padding: 10px; }

/* ---------- figure cards ---------- */
.fig-card { padding: 26px; }
/* --ink-2: at 390px these cards land over the brightest part of the photograph,
   where --ink-3 measured 4.30:1 against the 4.5 a 12px label needs. */
.fig-card .k { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.fig-card .v { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 52px); line-height: 1; letter-spacing: -.02em; margin: 6px 0 10px; }
.fig-card p { font-size: 14.5px; color: var(--ink-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 .card { padding: 26px; }
.grid-2 h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.1; }
.grid-2 p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.grid-2 a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.note-card { padding: 26px; margin-top: 16px; background: var(--surface-2); }
.note-card h3 { font-size: 17px; }
.note-card p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.table-card { padding: 26px; margin-top: 16px; background: var(--surface-2); }
.table-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.table-scroll { overflow-x: auto; margin-top: 14px; }
.small { font-size: 13.5px; }
.centre { text-align: center; }
.cta-card { margin-top: 28px; padding: 46px 30px; border-radius: 34px; text-align: center; background: var(--surface-3); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.cta-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.05; }
.cta-card p { color: var(--ink-2); margin: 8px 0 20px; }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--ink-rgb), .22); }

/* ---------- FAQ (details/summary, no .a wrapper) ---------- */
.faq details p { padding: 0 24px 22px; color: var(--ink-2); }

/* ============================================================
   PADDOCK — the scanner.
   THE SURFACE DIVISION, which tools/palette.mjs 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
   Nothing is set on the bare photograph.
   ============================================================ */
.lab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); margin: 0 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); }
.input { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); }
.input:focus-within { border-color: var(--leaf); box-shadow: 0 0 0 4px var(--wash); }
.input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink); }
.full { width: 100%; justify-content: center; }

.scan-card { padding: 30px 32px; border-radius: 34px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 30px 80px rgba(var(--ink-rgb), .16); }
.scan-card h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 54px); line-height: 1.02; letter-spacing: -.02em; }
.scan-card h1 em { font-style: italic; color: var(--leaf); }
/* Once there are results the scan card shrinks to its address field: a full card above the
   results was the flattest pane on the page (21% of the first frame). */
.scan-card.compact { padding: 16px 20px; }
.scan-card.compact .eyebrow, .scan-card.compact h1, .scan-card.compact .lede, .scan-card.compact .lab { display: none; }
.scan-card .lede { color: var(--ink); margin: 10px 0 20px; max-width: 640px; }
.scan-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--ink); }
.scan-row button.linkish { border: 0; background: none; color: var(--leaf); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; }
.progress { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--surface-3); display: grid; gap: 10px; font-size: 14.5px; }
.progress .track { height: 8px; border-radius: 8px; background: var(--wash-2); overflow: hidden; }
.progress .track i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--leaf), var(--leaf-2)); transition: width .3s ease; }
.progress .row { display: flex; align-items: center; gap: 10px; }
.progress .spin { border-color: var(--wash-2); border-top-color: var(--leaf); }

.summary { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.summary .metric { background: var(--surface-3); padding: 16px 18px; border-radius: 20px; color: var(--ink); }
.summary .metric .k { color: var(--ink); }
.summary .metric .v { font-size: 34px; }
.summary .metric .s { font-size: 12.5px; color: var(--ink); margin-top: 2px; }
.summary .metric.lead { background: var(--ink); }
.summary .metric.lead .k { color: var(--bright); }
.summary .metric.lead .v { color: #fff; font-size: 44px; }
.summary .metric.lead .s { color: var(--bright); }
@media (max-width: 860px) { .summary { grid-template-columns: 1fr 1fr; } .summary .metric.lead { grid-column: span 2; } }

.appr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; padding: 12px 14px 12px 20px; border-radius: 22px; background: var(--surface-2); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.appr-head h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
/* A list of approvals is a stack of panes, and a stack of identical full-width panes measured
   30-32% flat (the reference's worst frame is 16%). Two columns where there is room, so the
   photograph shows between them, and alternating thin and dense tints. Everything in a row is
   set in --ink, which tools/palette.mjs proves at 4.5:1 on the thin pane. */
.appr { list-style: none; display: grid; gap: 8px; }
@media (min-width: 1100px) { #list.appr { grid-template-columns: 1fr 1fr; } #list.appr li { grid-template-columns: 24px 40px minmax(0, 1fr) 132px; } #list.appr .amt { grid-column: 3; grid-row: 2; } #list.appr .risk { grid-column: 4; grid-row: 1 / span 2; } }
.appr li { display: grid; grid-template-columns: 26px 44px minmax(0, 1.3fr) minmax(0, 1fr) 128px; gap: 4px 12px; align-items: center; padding: 12px 16px 12px 14px; border-radius: 20px; background: var(--surface); color: var(--ink); }
.appr li:nth-child(4n+2), .appr li:nth-child(4n+3) { background: var(--surface-3); }
.appr li.shut { opacity: .78; }
.appr input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--leaf); cursor: pointer; }
.appr .tok { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--leaf); letter-spacing: .01em; }
.appr .tok.k-permit2 { background: var(--ink); }
.appr .tok.k-forAll { background: var(--flame); }
.appr .tok.k-morpho { background: var(--ink-2); }
.appr .main { min-width: 0; }
.appr .main b { font-size: 15.5px; }
.appr .main .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 13px; color: var(--ink); }
.appr .main .who a { font-family: var(--mono); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.appr .amt { font-size: 13.5px; color: var(--ink); min-width: 0; }
.appr .amt b { display: block; color: var(--ink); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.appr .risk { text-align: right; }
.appr .risk b { display: block; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.appr .risk small { font-size: 12px; color: var(--ink); }
@media (max-width: 760px) {
  .appr li { grid-template-columns: 24px 40px minmax(0, 1fr); }
  .appr .amt { grid-column: 3; }
  .appr .risk { grid-column: 3; text-align: left; }
  .appr .tok { width: 40px; height: 40px; }
}
.cls { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/* The TEXT is always the darkest ink and the colour lives in the tint: 11.5px type in --up or
   --down on its own tint measured 4.31-4.38:1 over the photograph (tools/contrast.mjs). */
.cls { color: var(--ink); }
.cls.wallet { background: rgba(var(--down-rgb), .20); }
.cls.unverified { background: rgba(var(--gold-rgb), .45); }
.cls.verified { background: rgba(var(--ink-rgb), .09); }
.cls.known { background: rgba(var(--up-rgb), .16); }
.cls.unl { background: rgba(var(--flame-rgb), .20); }
.cls.done { background: rgba(var(--up-rgb), .22); }

.actbar { position: sticky; bottom: 14px; z-index: 30; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 14px 14px 22px; border-radius: 26px; background: rgba(var(--glass), .94); box-shadow: 0 18px 50px rgba(var(--ink-rgb), .26); }
.actbar .what b { font-size: 16px; }
.actbar .what span { display: block; font-size: 13px; color: var(--ink-2); }
.actbar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.closed-list { margin-top: 10px; }
.closed-list summary { cursor: pointer; padding: 12px 18px; border-radius: 18px; background: var(--surface-2); font-weight: 600; font-size: 14.5px; list-style: none; }
.closed-list summary::-webkit-details-marker { display: none; }
.closed-list .appr { margin-top: 8px; }
.closed-list .appr li { grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr); }
.done-card { margin-top: 16px; padding: 22px 24px; border-radius: 24px; background: rgba(var(--up-rgb), .16); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.done-card { background: var(--surface-3); border-left: 5px solid var(--up); }
.done-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.done-card p { color: var(--ink-2); margin-top: 6px; font-size: 14.5px; }
.done-card a { text-decoration: underline; text-underline-offset: 2px; }

/* The intro under the scan box alternates its surfaces; three identical panes in a row are one median. */
#intro .card:nth-child(2) { background: var(--surface-3); }

/* the landing page's census card */
.who-list { list-style: none; display: grid; gap: 5px; margin-top: 14px; }
.who-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface-3); }
.who-list li:nth-child(even) { background: var(--surface-2); }
.who-list .nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-list .nm small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-2); }
.who-list .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px; }
.who-list .r small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-2); }

/* ---------- the footer used on every Paddock page ---------- */
.foot { padding: 26px 0 44px; }
/* The thin pane, with --ink type (proved at 4.5:1 for small type by tools/palette.mjs). */
.foot-inner { display: grid; gap: 12px; padding: 24px 28px; border-radius: 28px; max-width: 860px; margin: 0 auto; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.foot-brand span[data-mark] svg { display: block; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14.5px; }
.foot-links a { color: var(--ink); }
.foot-links a:hover { color: var(--ink); }
.foot-fine { font-size: 12.5px; color: var(--ink); }
.doc { padding-top: 8px; }

/* Every stray line gets a surface of its own. */
.chip.soft { background: var(--surface-2); color: var(--ink-2); font-weight: 500; font-size: 13.5px; line-height: 1.5; text-align: left; max-width: 720px; padding: 12px 18px; border-radius: 18px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
#spender-table tbody tr:nth-child(n+11) { display: none; }
#spender-table.all tbody tr { display: table-row; }
.tbl-more { display: flex; justify-content: center; margin-top: 12px; }

/* ---- the listed-stocks table -------------------------------------------------
   Twenty-six rows of numbers on one pane is a white slab: the frame measured 23.5%
   flat with chroma 0.027, against a photograph that carries 0.078. A window with a
   scrollbar keeps the whole list and lets the pasture back in around it. The header
   sticks so the columns stay named while it scrolls. */
.table-card { background: var(--surface); }
.table-card .table-scroll { max-height: 430px; overflow: auto; overscroll-behavior: contain; }
.table-card .tbl { border-spacing: 0 5px; }
.table-card .tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(var(--glass), .92); backdrop-filter: var(--blur-lite);
  box-shadow: 0 1px 0 var(--line-2);
}
.table-card .tbl td { background: rgba(255, 255, 255, .52); }
.table-card .tbl tbody tr:nth-child(2n) td { background: rgba(var(--glass), .70); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-more { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* The hero's three figures: the labels are sentences, not chips — small caps at 11px
   wrapped onto three lines and read as a column of stubs. */
.hero-stats .k { text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.35; }
.hero-stats .v { font-size: 30px; }

/* ---- what the contrast sweep found ------------------------------------------
   Measured on the built pages over the photograph, not in a swatch:
   - `.fine` at 12.5px in --ink-3 read 3.30–4.01:1 on the thin pane. The palette
     only ever proved --ink-3 at 3:1 (large graphic type); small prose gets
     --ink-2, which is proved at 4.5:1 over both ends of the picture.
   - `.net-pill` sat on `--wash` — an 8%-green tint that is transparent over a
     photograph — and measured 1.10:1. It gets a real surface.
   - `code` inside the docs' body text is small type too. */
.fine { color: var(--ink-2); }
.doc code, .prose code, .tbl code { color: var(--ink); background: rgba(var(--ink-rgb), .075); }
/* …and the diagram in a <pre class="slab"> is code on the DARK slab, where the ink that
   works on cream is invisible (1.47:1). It takes the band's own type colour. */
.slab, .doc pre.slab { background: var(--ink); color: var(--bright); }
.slab code, .doc pre.slab code { color: var(--bright); background: none; }
.net-pill {
  color: var(--ink); background: var(--surface-2); backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* `.slab` centres its text (it is used for the dark call-out band). A diagram drawn in
   spaces has to be left-aligned or it is not a diagram. */
pre.slab { text-align: left; padding: 22px 24px; overflow-x: auto; font-size: 13px; line-height: 1.5; border-radius: var(--r); }
pre.slab code { display: block; white-space: pre; }

/* ---- the app's own furniture -------------------------------------------------
   Written for this site rather than inherited: an account card, the two-way
   switch on the trade form, and the quote rows. */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface-2); backdrop-filter: var(--blur-lite); box-shadow: inset 0 0 0 1px var(--line-2); }
.tab { border: 0; cursor: pointer; font: 600 14px/1 var(--sans); color: var(--ink-2); background: transparent; padding: 10px 16px; border-radius: 999px; }
.tab[aria-selected="true"] { background: var(--leaf); color: #fff; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }

.acct { margin-top: 16px; }
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.acct-head h2 { font-size: 22px; margin: 0; }
.acct .total { text-align: right; }
.acct .total span { display: block; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.acct .total b { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--ink); }
.acct-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.acct-kv > div { background: var(--surface-3); border-radius: var(--r-sm); padding: 10px 12px; }
.acct-kv span { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.acct-kv b { font-weight: 600; font-size: 15px; color: var(--ink); }
.acct-kv small { font-weight: 400; color: var(--ink-2); }
.hold { display: grid; gap: 4px; margin: 12px 0; }
.hold-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.hold-row .tk { font-weight: 700; font-size: 14px; }
.hold-row .bal { color: var(--ink-2); font-size: 14px; }
.actbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sheet { margin-top: 16px; padding: 16px; border-radius: var(--r); background: var(--surface-3); }

.seg-row { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface-3); }
.seg-btn { border: 0; cursor: pointer; font: 600 14px/1 var(--sans); color: var(--ink-2); background: transparent; padding: 10px 18px; border-radius: 999px; }
.seg-btn.on { background: var(--leaf); color: #fff; }
.quote { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-3); font-size: 14.5px; }
.qrow { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; }
.qrow b { font-variant-numeric: tabular-nums; }
.qrow.fine span { color: var(--ink-2); }

/* `.kv` came from a sibling as a <dl>; this site uses it with <div><span>label</span><b>value</b></div>,
   which that rule leaves unstyled. Both shapes now read the same. */
.kv > div { display: contents; }
.kv > div > span { color: var(--ink-2); }
.kv > div > b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* `.vs li` is a flex row whose ::before is the tick or cross. Any inline markup inside the
   item (a <b>, a figure's <span>) then becomes another flex ITEM and the sentence lays out
   in columns — "Only the | 26 | stocks…". The text goes in its own box. */
.vs li { align-items: flex-start; }
.vs li > b, .vs li > span, .vs li > code, .vs li > a { display: inline; }
.vs li .t { display: block; flex: 1 1 auto; }
/* the tick/cross is position:absolute, so its item has to be the containing block —
   without this they all stack in the card's top-left corner. */
.vs li { position: relative; }
.note-card a, .fine a, .live-foot a, .foot-fine a { color: var(--leaf); text-decoration: underline; text-underline-offset: 2px; }

/* ---- the proof panel ---------------------------------------------------------
   The cards arrived from a sibling stylesheet without their own rules, so they
   rendered as four columns of unstyled text. And a 42-character address in a
   card with no wrapping rule runs straight out the side of it. */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.proof-card { padding: 18px 20px; border-radius: var(--r-sm); background: var(--surface-3); }
.proof-card .k { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); line-height: 1.35; }
.proof-card .v { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 6px 0 4px; color: var(--ink); }
.proof-card .s { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.card .what { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.trio .card .what span { overflow-wrap: anywhere; }