/* ==========================================================================
   GATE CAPITAL — V3 REFINED
   02 · COMPONENTS
   Every component is theme-agnostic: it reads only semantic --c-* tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON — 3 variants x 3 sizes. CTA hierarchy is enforced by variant,
   never by ad-hoc styling.
     primary   : one per view stage — the action we want taken
     secondary : the credible alternative
     ghost     : tertiary / in-card
     link      : inline navigational, never a primary action
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-normal);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0 var(--s-6);
  height: 44px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-btn-primary-bg);
  color: var(--c-btn-primary-text);
  border-color: var(--c-btn-primary-bg);
  box-shadow: var(--e-2);
}
.btn--primary:hover { background: var(--c-btn-primary-hover); border-color: var(--c-btn-primary-hover); box-shadow: var(--e-3); }

.btn--secondary {
  background: var(--c-btn-secondary-bg);
  color: var(--c-btn-secondary-text);
  border-color: var(--c-btn-secondary-border);
}
.btn--secondary:hover { border-color: var(--c-text); background: var(--c-surface-muted); }

.btn--ghost { background: transparent; color: var(--c-text); border-color: transparent; }
.btn--ghost:hover { background: var(--c-control-bg-hover); }

.btn--accent {
  background: var(--c-accent); color: #fff; border-color: var(--c-accent);
  box-shadow: 0 8px 22px -8px var(--c-accent);
}
.btn--accent:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn--sm { height: 36px; padding: 0 var(--s-4); font-size: var(--t-xs); }
.btn--lg { height: 52px; padding: 0 var(--s-8); font-size: var(--t-h4); }
.btn--block { width: 100%; }

/* On inverse (black / blue / dimensional) panels */
.on-dark .btn--primary   { background: #fff; color: var(--g-ink); border-color: #fff; }
.on-dark .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); }
.on-dark .btn--secondary:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.5); }

/* Inline link with arrow — the standard tertiary action across V3 */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: var(--fw-semibold);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-strong);
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  width: fit-content;
}
.link-arrow .arw { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover { color: var(--c-accent-text); border-color: var(--c-accent); }
.link-arrow:hover .arw { transform: translateX(4px); }
.link-arrow--verify { color: var(--c-verify); border-color: var(--c-verify-border); }
.link-arrow--verify:hover { color: var(--c-verify); border-color: var(--c-verify); }
.on-dark .link-arrow { color: #fff; border-color: rgba(255,255,255,0.3); }
.on-dark .link-arrow:hover { border-color: #fff; color: #fff; }

/* --------------------------------------------------------------------------
   CARD — one construction, four intents. Rounded cards are used only
   where a surface genuinely groups content; never as decoration.
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.card--flat    { box-shadow: none; }
.card--raised  { box-shadow: var(--e-2); }
.card--float   { box-shadow: var(--e-3); border-color: var(--c-border-subtle); }
.card--muted   { background: var(--c-surface-muted); border-color: transparent; }
.card--inverse {
  background: var(--c-surface-inverse);
  border-color: var(--c-border-inverse);
  color: #fff;
}
.card--inverse .body, .card--inverse .body-sm { color: rgba(255,255,255,0.72); }
.card--inverse .caption, .card--inverse .micro { color: rgba(255,255,255,0.58); }
.card--pad-lg { padding: clamp(var(--s-6), 3vw, var(--s-10)); }
.card--pad-sm { padding: var(--s-4); }

/* Evidence card — the restrained variant used in data-heavy sections.
   No shadow, hairline border, sunken ground. */
.card--evidence {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   CHIP / TAG / BADGE
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-4);
  background: var(--c-control-bg);
  border: 1px solid var(--c-control-border);
  border-radius: var(--r-pill);
  font-size: var(--t-2xs); font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  white-space: nowrap;
}
.chip--verify { background: var(--c-verify-bg); border-color: var(--c-verify-border); color: var(--c-verify); font-weight: var(--fw-semibold); }
.chip--accent { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-accent-text); font-weight: var(--fw-semibold); }
.chip--warn   { background: var(--c-warn-bg);   border-color: var(--c-warn-border);   color: var(--c-warn); font-weight: var(--fw-semibold); }
.chip--ghost  { background: transparent; }
.on-dark .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.82); }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-dot--live {
  background: var(--c-verify);
  box-shadow: 0 0 0 0 var(--c-verify);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,201,138,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(47,201,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,201,138,0); }
}

/* --------------------------------------------------------------------------
   SEGMENTED CONTROL / TAB GROUP
   Used for: period filters, arbitrage strategies, note families, registry.
   -------------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--c-control-bg);
  border: 1px solid var(--c-control-border);
  border-radius: var(--r-pill);
  flex-wrap: wrap;
}
.segmented__btn {
  height: 36px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
  transition: background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.segmented__btn:hover { color: var(--c-text); }
.segmented__btn[aria-selected="true"],
.segmented__btn.is-active {
  background: var(--c-control-selected-bg);
  color: var(--c-control-selected-text);
}

/* Standalone pill tabs (no track) — used for the arbitrage strategy switch */
.tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tabs__btn {
  height: 40px; padding: 0 var(--s-5);
  border: 1px solid var(--c-control-border);
  background: var(--c-surface);
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
  transition: all var(--dur-2) var(--ease-out);
}
.tabs__btn:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.tabs__btn[aria-selected="true"] {
  background: var(--c-control-selected-bg);
  color: var(--c-control-selected-text);
  border-color: var(--c-control-selected-border);
}

/* --------------------------------------------------------------------------
   FIELD — labelled input group.
   Borrowed from V1: every selector carries an explicit label, so the
   product never presents a naked row of chips.
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-3); }
.field__label {
  font-size: var(--t-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-text-muted);
}
.field__hint { font-size: var(--t-2xs); color: var(--c-text-faint); }
.field__options { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Option button — the atom behind nominal / term selection.
   Two-line: value + qualifier. This is the V1 clarity fix for V3's
   bare "1W" chips, which never stated the term in days. */
.option {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 1px;
  min-width: 84px; padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-control-border);
  border-radius: var(--r-md);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.option__value { font-size: var(--t-h4); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); color: var(--c-text); }
.option__meta  { font-size: var(--t-2xs); color: var(--c-text-muted); font-weight: var(--fw-medium); }
.option:hover { border-color: var(--c-border-strong); background: var(--c-control-bg-hover); }
.option[aria-pressed="true"], .option.is-selected {
  background: var(--c-control-selected-bg);
  border-color: var(--c-control-selected-border);
  box-shadow: var(--e-2);
}
.option[aria-pressed="true"] .option__value,
.option.is-selected .option__value { color: var(--c-control-selected-text); }
.option[aria-pressed="true"] .option__meta,
.option.is-selected .option__meta {
  color: var(--c-control-selected-text); opacity: 0.66;
}
.option:disabled, .option[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }
.option--compact { min-width: 0; padding: var(--s-2) var(--s-4); }
.option--compact .option__value { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   DATA TABLE — institutional treatment.
   Hairline rules only, tabular numerals, one emphasised column.
   Horizontal overflow is contained; the page never scrolls sideways.
   -------------------------------------------------------------------------- */
.table-wrap {
  position: relative;   /* contains .sr-only captions/labels — without this
                           they escape the scroller and widen the document */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}
.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.data-table th {
  text-align: left;
  font-size: var(--t-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: 0 var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-border-strong);
  white-space: nowrap;
}
.data-table td {
  padding: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-text-secondary);
  border-bottom: 1px solid var(--c-border-subtle);
  vertical-align: middle;
}
.data-table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.data-table tbody tr:hover { background: var(--c-surface-muted); }
.data-table td:first-child, .data-table th:first-child { padding-left: 0; }
.data-table td:last-child,  .data-table th:last-child  { padding-right: 0; }
.data-table .num { font-weight: var(--fw-semibold); color: var(--c-text); }

/* The one emphasised column — V1's highlighted premium column,
   rendered as a tinted lane rather than a solid violet block. */
.data-table .col-key {
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  font-weight: var(--fw-bold);
}
.data-table th.col-key { color: var(--c-accent-text); }
.data-table tbody tr:hover .col-key { background: var(--c-accent-soft); }

/* Row identity — note code badge + family name */
.note-id { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.note-id__code {
  font-weight: var(--fw-semibold); font-size: var(--t-h4);
  color: var(--c-text); letter-spacing: var(--tr-tight);
}
.note-id__family { font-size: var(--t-xs); color: var(--c-text-muted); }
.note-id__family--amort { color: var(--c-accent-text); font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------------------
   ACCORDION / DISCLOSURE
   Progressive disclosure — the approved way to shorten a long page
   without deleting content.
   -------------------------------------------------------------------------- */
.disclosure { border-bottom: 1px solid var(--c-border); }
.disclosure__trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  transition: color var(--dur-1) var(--ease-out);
}
.disclosure__trigger:hover { color: var(--c-accent-text); }
.disclosure__title { font-size: var(--t-h4); font-weight: var(--fw-semibold); }
.disclosure__sub   { font-size: var(--t-2xs); color: var(--c-text-muted); font-weight: var(--fw-regular); }
.disclosure__icon {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--c-text-muted);
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.disclosure__icon::before { content: ""; width: 11px; height: 1.5px; background: currentColor; position: absolute; }
.disclosure__icon::after  { content: ""; width: 1.5px; height: 11px; background: currentColor; position: absolute;
                            transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.disclosure__icon { position: relative; }
.disclosure[open] .disclosure__icon::after,
.disclosure.is-open .disclosure__icon::after { opacity: 0; transform: rotate(90deg); }
.disclosure__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out);
}
.disclosure.is-open .disclosure__panel { grid-template-rows: 1fr; }
.disclosure__panel > div { overflow: hidden; }
.disclosure__body { padding-bottom: var(--s-5); }

/* --------------------------------------------------------------------------
   TERMINAL PANEL — the dark evidence surface (documents, registry).
   Kept from V3. Monospace, green confirmations, no decoration.
   -------------------------------------------------------------------------- */
.terminal {
  background: var(--g-mid-1000);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #e4e8f0;
  box-shadow: var(--e-3);
}
.terminal__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.terminal__title { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: #fff; }
.terminal__dots { display: flex; gap: 6px; }
.terminal__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.terminal__body { padding: var(--s-5); }
.terminal__comment { font-family: var(--font-mono); font-size: var(--t-2xs); color: rgba(255,255,255,0.56); line-height: 1.7; }
.terminal__row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.terminal__row:last-child { border-bottom: 0; }
.terminal__label { font-family: var(--font-mono); font-size: var(--t-2xs); color: rgba(255,255,255,0.56); }
.terminal__value { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--g-green-term); }
.terminal__meta  { font-family: var(--font-mono); font-size: var(--t-2xs); color: rgba(255,255,255,0.56); white-space: nowrap; }
.terminal__open {
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-wide);
  color: #fff; border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-xs); padding: 4px 10px;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.terminal__open:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }

.terminal .data-table th { color: rgba(255,255,255,0.56); border-bottom-color: rgba(255,255,255,0.12); font-family: var(--font-mono); }
.terminal .data-table td { color: rgba(255,255,255,0.72); border-bottom-color: rgba(255,255,255,0.06); font-family: var(--font-mono); font-size: var(--t-xs); }
.terminal .data-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.terminal .data-table .series { color: var(--g-green-term); }

/* --------------------------------------------------------------------------
   DIMENSIONAL OBJECTS — approved V3 treatment, transcribed from Figma
   (32:8889 hero note, 32:8905 USDT, 32:8907 chain, 32:8912 verify).

   The V3 signature is three things working together:
     1. a LARGE drop shadow tinted to the object's own hue (not neutral grey)
     2. a satin material: dark inner base + a 1px bright top edge
     3. a soft internal highlight on the larger surfaces
   That combination is what makes these read as physically present objects
   rather than flat cards. Elevation is reserved for product objects only —
   evidence and data surfaces stay flat by design.
   -------------------------------------------------------------------------- */
.dim {
  position: relative;
  border-radius: var(--r-xl);
  isolation: isolate;
  box-shadow: var(--e-dim-violet), var(--dim-material);
}
/* soft internal highlight — the "polish" on the material */
.dim::after {
  content: "";
  position: absolute;
  top: -34%; right: -14%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 66%);
  pointer-events: none;
  z-index: 0;
}
.dim > * { position: relative; z-index: 1; }

.dim--violet { background: linear-gradient(169.6deg, #a8a6fa 12.376%, #6f6de6 53.762%, #5754d4 87.624%); box-shadow: var(--e-dim), var(--dim-material); }
.dim--blue   { background: linear-gradient(155deg, #7d94ff 12.376%, #3d5bfa 53.762%, #2740d0 87.624%); box-shadow: var(--e-dim-blue), var(--dim-material); }
.dim--cyan   { background: linear-gradient(155deg, #6fe0ef 12.376%, #17aecb 53.762%, #0e8aa6 87.624%); box-shadow: var(--e-dim-cyan), var(--dim-material); }
.dim--pink   { background: linear-gradient(155deg, #f7a9d6 12.376%, #de6bac 53.762%, #c64f94 87.624%); box-shadow: var(--e-dim-pink), var(--dim-material); }
.dim--ink    { background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%); box-shadow: var(--e-dim-ink), var(--dim-material); }

/* Token / ecosystem marks — real identities only, never invented logos.
   Each carries a drop shadow in its own hue, exactly as V3 specifies. */
.token-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--t-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-normal);
  color: #fff;
  position: relative;
  flex: none;
  box-shadow: var(--dim-material);
}
.token-mark--usdt  { background: linear-gradient(155deg, #5fd2a6 12.376%, #22916c 87.624%); filter: drop-shadow(var(--e-dim-green)); }
.token-mark--chain { background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%); filter: drop-shadow(var(--e-dim-ink)); }
.token-mark--pink  { background: linear-gradient(155deg, #f7a9d6 12.376%, #de6bac 53.762%, #c64f94 87.624%); filter: drop-shadow(var(--e-dim-pink)); }
.token-mark--bnb   { background: linear-gradient(155deg, #f8d16a 12.376%, #d69f07 87.624%); color: #1a1a1a; filter: drop-shadow(0 21px 18px rgba(214,159,7,0.28)); }
.token-mark--sm    { width: 40px; height: 40px; font-size: 9px; }
.token-mark--lg    { width: 84px; height: 84px; font-size: var(--t-2xs); }

/* Small gradient icon tiles — the recurring V3 process-step marker */
.icon-tile {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: var(--dim-material);
  position: relative;
  flex: none;
}
.icon-tile svg { position: relative; z-index: 1; width: 18px; height: 18px; }
.icon-tile--violet { background: linear-gradient(155deg, #a8a6fa 12.376%, #6f6de6 87.624%); filter: drop-shadow(0 12px 14px rgba(87,84,212,0.32)); }
.icon-tile--blue   { background: linear-gradient(155deg, #7d94ff 12.376%, #3d5bfa 87.624%); filter: drop-shadow(0 12px 14px rgba(52,80,232,0.30)); }
.icon-tile--cyan   { background: linear-gradient(155deg, #6fe0ef 12.376%, #17aecb 87.624%); filter: drop-shadow(0 12px 14px rgba(23,174,203,0.30)); }
.icon-tile--green  { background: linear-gradient(155deg, #5fd2a6 12.376%, #22916c 87.624%); filter: drop-shadow(0 12px 14px rgba(34,145,108,0.28)); }
.icon-tile--ink    { background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%); filter: drop-shadow(0 12px 14px rgba(22,24,47,0.24)); }

/* Icon rules: 1.6px stroke, 24px box, round caps/joins, currentColor */
.ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6;
       fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   CALLOUT — disclosures, warnings, important notes. Never decorative.
   -------------------------------------------------------------------------- */
.callout {
  display: flex; gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.callout__icon {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: var(--fw-bold);
}
.callout--warn   { background: var(--c-warn-bg);   border-color: var(--c-warn-border); }
.callout--warn   .callout__icon { background: var(--c-warn); color: #1a1400; }
.callout--verify { background: var(--c-verify-bg); border-color: var(--c-verify-border); }
.callout--verify .callout__icon { background: var(--c-verify); color: #04251a; }
.callout--plain  { background: var(--c-surface-muted); border-color: transparent; }

/* Inline emphasis used throughout the locked copy */
.strong-label { font-weight: var(--fw-bold); color: var(--c-text); }

/* --------------------------------------------------------------------------
   METER / PROGRESS — series allocation, repayment coverage
   -------------------------------------------------------------------------- */
.meter { display: flex; flex-direction: column; gap: var(--s-2); }
.meter__track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--c-viz-track);
  overflow: hidden;
}
.meter__fill {
  height: 100%; border-radius: inherit;
  background: var(--c-text);
  transition: width var(--dur-4) var(--ease-out);
}
.meter__fill--accent { background: var(--c-accent); }
.meter__fill--verify { background: var(--c-verify); }
.meter__row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-2xs); color: var(--c-text-muted); }
.on-dark .meter__track { background: rgba(255,255,255,0.14); }
.on-dark .meter__fill  { background: #fff; }

/* --------------------------------------------------------------------------
   TIMELINE — payout structure visualisation.
   Two distinct marks, so 1W–7W and 3M/6M can never be confused (§11).
   -------------------------------------------------------------------------- */
.payout-viz { display: flex; flex-direction: column; gap: var(--s-3); }
.payout-viz__label { font-size: var(--t-2xs); color: var(--c-text-muted); font-weight: var(--fw-medium); }

/* At maturity: a single terminal payment at the end of a quiet run */
.viz-maturity { display: flex; align-items: center; gap: 0; height: 34px; }
.viz-maturity__start { width: 9px; height: 9px; border-radius: 50%; background: var(--c-text); flex: none; }
.viz-maturity__run   { flex: 1; height: 2px; background: var(--c-viz-track); }
.viz-maturity__end   {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-accent); flex: none;
  box-shadow: 0 0 0 4px var(--c-accent-soft);
}

/* Amortizing: many equal daily marks — reads instantly as "paid in parts" */
.viz-amort { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.viz-amort i {
  flex: 1; height: 16px; min-width: 3px;
  border-radius: 2px;
  background: var(--c-accent);
  opacity: 0.42;
  display: block;
}
.viz-amort i:nth-child(3n) { opacity: 0.72; }
.viz-amort i:last-child { opacity: 1; }
.on-dark .viz-maturity__run { background: rgba(255,255,255,0.18); }
.on-dark .viz-maturity__start { background: #fff; }

/* --------------------------------------------------------------------------
   STEP LIST — numbered process (registration, issuance horizon)
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--grid-gutter); }
.step { display: flex; flex-direction: column; gap: var(--s-3); }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--t-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-wide);
  color: var(--c-accent-text);
}
.step__title { font-size: var(--t-h3); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); }
.step--ruled { padding-top: var(--s-5); border-top: 1px solid var(--c-border-strong); }

/* --------------------------------------------------------------------------
   FLOW ROW — arrow-prefixed list used in locked copy
   -------------------------------------------------------------------------- */
.arrow-list { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.arrow-list li { display: flex; gap: var(--s-3); font-size: var(--t-sm); line-height: var(--lh-body); color: var(--c-text-secondary); }
.arrow-list li::before { content: "→"; color: var(--c-accent-text); flex: none; font-weight: var(--fw-bold); }
.on-dark .arrow-list li { color: rgba(255,255,255,0.78); }
.on-dark .arrow-list li::before { color: rgba(255,255,255,0.9); }

/* --------------------------------------------------------------------------
   MARQUEE — the series ticker at the top of the page
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-bg-alt);
  padding-block: var(--s-3);
}
.marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__group { display: flex; align-items: center; gap: var(--s-8); padding-inline: var(--s-6); }
.marquee__item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-muted); white-space: nowrap; }
.marquee__item b { color: var(--c-text); font-weight: var(--fw-bold); }
.marquee__item .up { color: var(--c-verify); font-weight: var(--fw-semibold); }

/* Option buttons on an inverse surface — the selected state must read as
   selected against a dark card, not disappear into it. */
.on-dark .option {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}
.on-dark .option .option__value { color: rgba(255,255,255,0.86); }
.on-dark .option .option__meta  { color: rgba(255,255,255,0.55); }
.on-dark .option:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.32); }
.on-dark .option[aria-pressed="true"],
.on-dark .option.is-selected {
  background: #fff; border-color: #fff; box-shadow: none;
}
.on-dark .option[aria-pressed="true"] .option__value,
.on-dark .option.is-selected .option__value { color: var(--g-ink); }
.on-dark .option[aria-pressed="true"] .option__meta,
.on-dark .option.is-selected .option__meta { color: var(--g-ink); opacity: 0.6; }

/* Editorial category chips — a small, deliberate set of V3 colour moments,
   used ONLY in expressive sections (What's New, Gate Media). Evidence,
   registry, risk and financial-proof sections stay neutral. */
.chip--cat-product { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-accent-text); font-weight: var(--fw-semibold); }
.chip--cat-transp  { background: rgba(23,174,203,0.12); border-color: rgba(23,174,203,0.34); color: #0c6a7c; font-weight: var(--fw-semibold); }
.chip--cat-platform{ background: var(--c-blue-soft); border-color: rgba(61,91,250,0.30); color: #2135b4; font-weight: var(--fw-semibold); }
.chip--cat-media   { background: var(--c-pink-soft); border-color: rgba(232,80,156,0.30); color: #b02e72; font-weight: var(--fw-semibold); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--cat-transp   { color: var(--g-cyan-400); }
  :root:not([data-theme="light"]) .chip--cat-platform { color: var(--g-blue-300); }
  :root:not([data-theme="light"]) .chip--cat-media    { color: var(--g-pink-300); }
}
:root[data-theme="dark"] .chip--cat-transp   { color: var(--g-cyan-400); }
:root[data-theme="dark"] .chip--cat-platform { color: var(--g-blue-300); }
:root[data-theme="dark"] .chip--cat-media    { color: var(--g-pink-300); }

/* Meter labels inherit the surface they sit on */
.on-dark .meter__row { color: rgba(255,255,255,0.62); }
.on-dark .meter__row .strong-label { color: #fff; }


/* ==========================================================================
   NOTE TERMS TABLE
   V1 = table architecture (Figma 32:5399): a full-height highlighted
   premium column, generous 85px row rhythm, a 40x40 note badge plus family
   label in column one, centred numeric columns.
   V3 = typography, colour, accent and identity.
   All nine notes and exact verified values retained.
   ========================================================================== */
.nt-wrap { --nt-row: 76px; }

.nt-table {
  width: 100%;
  min-width: 940px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* V1 column proportions, normalised to percentages */
.nt-col-note   { width: 22%; }
.nt-col-term   { width: 13.7%; }
.nt-col-payout { width: 16.4%; }
.nt-col-prem   { width: 17.8%; }
.nt-col-daily  { width: 15.1%; }
.nt-col-total  { width: 15%; }

.nt-table thead th {
  font-size: var(--t-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-normal);
  color: var(--c-text-secondary);
  text-align: left;
  padding: 0 var(--s-4) var(--s-5);
  vertical-align: bottom;
  white-space: nowrap;
}
.nt-c { text-align: center; }
.nt-table thead th.nt-c { text-align: center; }

/* the one column being compared runs floor-to-ceiling, exactly as V1 */
.nt-table thead th.nt-prem-head {
  background: var(--c-accent-solid);
  color: #fff !important;
  border-radius: var(--r-md) var(--r-md) 0 0;
  /* symmetric padding + middle alignment so the label sits centred in the
     purple cell instead of hugging its top edge */
  padding: var(--s-5) var(--s-5);
  vertical-align: middle;
  white-space: normal;
  line-height: 1.3;
}
.nt-table tbody td.nt-prem {
  background: var(--c-accent-solid);
  color: #fff;
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
}
.nt-table tbody tr:last-child td.nt-prem { border-radius: 0 0 var(--r-md) var(--r-md); }

.nt-table tbody th,
.nt-table tbody td {
  height: var(--nt-row);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm);
  color: var(--c-text-secondary);
  font-weight: var(--fw-regular);
  vertical-align: middle;
}
.nt-table tbody tr:first-child th,
.nt-table tbody tr:first-child td { border-top: 0; }

/* column one: note badge + family, per V1 */
.nt-note { text-align: left !important; }
.nt-badge {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  font-size: var(--t-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-normal);
  margin-right: var(--s-4);
  vertical-align: middle;
}
.nt-badge--amort { background: var(--c-accent-solid); color: #fff; }
.nt-fam { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.nt-fam--amort { color: var(--c-accent-text); }

.nt-total { font-weight: var(--fw-semibold); color: var(--c-text); }
.nt-daily { font-size: var(--t-xs); }
.nt-payout { font-size: var(--t-xs); }

/* row state — the whole row responds, the premium column stays solid */
.nt-table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.nt-table tbody tr:hover th,
.nt-table tbody tr:hover td:not(.nt-prem) { background: var(--c-surface-muted); }

.nt-foot { margin-top: var(--s-6); max-width: 96ch; }

@media (max-width: 640px) {
  .nt-wrap { --nt-row: 64px; }
  .nt-badge { margin-right: var(--s-3); }
}