/* ==========================================================================
   GATE CAPITAL — V3 REFINED
   04/05 · SECTION COMPOSITIONS
   Rhythm rule: alternate editorial ↔ data, wide ↔ narrow, atmospheric ↔ quiet.
   No section repeats "headline / paragraph / three rounded cards".
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — asymmetric editorial stage
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(var(--s-16), 8vw, var(--s-32)) clamp(var(--s-12), 6vw, var(--s-24)); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(var(--s-8), 5vw, var(--s-20));
  align-items: center;
}
.hero__title { max-width: 12ch; }
.hero__body { max-width: 54ch; }
.hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* The hero note — a real instrument, not a pricing card */
.hero__instrument { position: relative; display: flex; flex-direction: column; gap: var(--s-5); }
/* the violet field V3 places behind the note object, so it reads as
   floating above the page rather than drawn onto it */
.hero__instrument::before {
  content: "";
  position: absolute;
  left: 12%; right: -6%; top: 2%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(87,84,212,0.28) 0%, rgba(87,84,212,0) 66%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.hero__instrument > * { position: relative; z-index: 1; }

.note-card {
  position: relative;
  border-radius: 24px;          /* V3 32:8889 */
  padding: var(--s-6) var(--s-7, 28px);
  color: #fff;
  display: flex; flex-direction: column; gap: var(--s-6);
  min-height: 190px;
}
.note-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.note-card__brand { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); letter-spacing: var(--tr-display); }
.note-card__ref { font-size: var(--t-2xs); color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; }
.note-card__figures { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
.note-card__label { font-size: var(--t-2xs); color: rgba(255,255,255,0.72); margin-bottom: 2px; }
.note-card__value { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); letter-spacing: var(--tr-display); line-height: 1; }
.note-card__value--sec { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.625rem); }
.note-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.20);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: rgba(255,255,255,0.82);
}

/* Floating ecosystem marks — meaningful, not decorative */
.hero__marks { position: absolute; top: -28px; right: var(--s-6); display: flex; gap: var(--s-3); z-index: 2; }

.verify-note { display: flex; align-items: flex-start; gap: var(--s-3); max-width: 44ch; }

/* --------------------------------------------------------------------------
   NOTE PRODUCT — selector + outcome
   V1's information architecture, V3's styling.
   -------------------------------------------------------------------------- */
.note-families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gutter);
}
.family {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.family.is-active { border-color: var(--c-accent-border); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.family__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.family__name { font-size: var(--t-h2); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); }
.family__range { font-size: var(--t-2xs); color: var(--c-text-muted); font-family: var(--font-mono); }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--e-2);
}
.calc__inputs {
  padding: clamp(var(--s-6), 3vw, var(--s-8));
  display: flex; flex-direction: column; gap: var(--s-8);
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
}
.calc__output {
  padding: clamp(var(--s-6), 3vw, var(--s-8));
  display: flex; flex-direction: column; gap: var(--s-6);
  background: var(--c-bg-alt);
}
.calc__result { display: flex; flex-direction: column; gap: var(--s-2); }
.calc__result-label { font-size: var(--t-3xs); font-weight: var(--fw-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-text-muted); }
.calc__amount {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem);
  letter-spacing: var(--tr-display); line-height: 0.94;
  font-variant-numeric: tabular-nums;
}
.calc__caption { font-size: var(--t-sm); color: var(--c-text-secondary); }

.calc__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block: 1px solid var(--c-border);
}
.calc__cell { display: flex; flex-direction: column; gap: 3px; }
.calc__cell dt { font-size: var(--t-2xs); color: var(--c-text-muted); }
.calc__cell dd { margin: 0; font-size: var(--t-h3); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.calc__cell--accent dd { color: var(--c-accent-text); }

.calc__structure {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.calc__availability { display: flex; flex-direction: column; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   NET FLOW LEDGER — client-directed hierarchy (§7)
   Net Flow is the dominant centre figure. Inflow sits above it, outflow
   below, so the composition reads as the equation that produces it.
   Everything else is deliberately quiet.
   -------------------------------------------------------------------------- */
.ledger {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0, 2.1fr) minmax(0,1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-16));
  align-items: center;
}

/* Supporting counts — quietest tier, flanking the stage */
.ledger__side { display: flex; flex-direction: column; gap: var(--s-10); }
.ledger__side--right { text-align: right; align-items: flex-end; }
.ledger__stat { display: flex; flex-direction: column; gap: var(--s-1); }
.ledger__stat dt { font-size: var(--t-2xs); color: var(--c-text-muted); }
.ledger__stat dd {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--t-fig-md); letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.ledger__stat small { font-size: var(--t-2xs); color: var(--c-text-faint); display: block; }

/* Centre stage */
.ledger__stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); }

/* Flanking flow figures — mid tier */
.ledger__flow { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.ledger__flow dt { font-size: var(--t-2xs); color: var(--c-text-muted); }
.ledger__flow dd {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--t-fig-lg); letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-secondary);
}
.ledger__flow small { font-size: var(--t-2xs); color: var(--c-text-faint); }

.ledger__op {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; max-width: 300px;
  color: var(--c-text-faint);
}
.ledger__op::before, .ledger__op::after {
  content: ""; flex: 1; height: 1px; background: var(--c-border-strong);
}
.ledger__op span { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--tr-wide); }

/* The dominant figure */
.ledger__net { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-block: var(--s-2); }
.ledger__net-label {
  font-size: var(--t-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-accent-text);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.ledger__net-value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-fig-xl);
  letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.ledger__net-sub { font-size: var(--t-sm); color: var(--c-text-secondary); max-width: 42ch; }

/* Caveats stay attached to the figure they qualify — never dropped */
.ledger__caveat {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   SPLIT PANEL — the black / blue editorial pair (working capital)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  border-radius: var(--r-xl);
  overflow: hidden;
}
.split__pane { padding: clamp(var(--s-8), 4vw, var(--s-16)); display: flex; flex-direction: column; gap: var(--s-6); }
.split__pane--ink  { background: var(--g-mid-1000); color: #fff; }
.split__pane--blue { background: var(--c-pane-blue); color: #fff; }
.split__pane--blue .lead, .split__pane--blue .body { color: rgba(255,255,255,0.86); }
.split__pane--ink  .body { color: rgba(255,255,255,0.72); }

/* Concentric working-capital diagram */
.orbit { position: relative; aspect-ratio: 1; max-width: 320px; margin-inline: auto; display: grid; place-items: center; }
.orbit__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); }
.orbit__ring--1 { inset: 0; }
.orbit__ring--2 { inset: 16%; border-color: rgba(255,255,255,0.16); }
.orbit__ring--3 { inset: 32%; border-color: rgba(255,255,255,0.22); }
.orbit__core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.orbit__tiles { display: flex; gap: var(--s-2); }
.orbit__caption { font-size: var(--t-2xs); color: rgba(255,255,255,0.72); max-width: 20ch; }

/* --------------------------------------------------------------------------
   ARBITRAGE DIAGRAM — venue A / venue B
   -------------------------------------------------------------------------- */
.arb {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-12));
  align-items: center;
  padding: clamp(var(--s-6), 3vw, var(--s-10));
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}
.arb__stage { position: relative; min-height: 240px; display: grid; place-items: center; }
.arb__venues { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); width: 100%; }
.arb__venue {
  flex: 1; min-width: 0;
  padding: var(--s-5); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: var(--s-2);
  text-align: center;
}
.arb__venue--a { background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--e-2); }
.arb__venue--b { background: var(--g-mid-1000); color: #fff; }
.arb__venue-label { font-size: var(--t-2xs); color: var(--c-text-muted); }
.arb__venue--b .arb__venue-label { color: rgba(255,255,255,0.6); }
.arb__venue-action { font-size: var(--t-h4); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); }
.arb__link { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); flex: none; }
.arb__asset {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-size: var(--t-2xs); font-weight: var(--fw-semibold); color: #fff; line-height: 1.15;
  background: linear-gradient(155deg, #a8a6fa 12.376%, #6f6de6 53.762%, #5754d4 87.624%);
  box-shadow: var(--dim-material);
  filter: drop-shadow(var(--e-dim-violet));
  position: relative;
}
.arb__delta { font-size: var(--t-2xs); color: var(--c-text-muted); white-space: nowrap; }
.arb__foot { font-size: var(--t-2xs); color: var(--c-text-faint); text-align: center; margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   REGISTRY — layered series records (dimensional objects, used once)
   -------------------------------------------------------------------------- */
.series-stack { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding-block: var(--s-6); }
.series-card {
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  color: #fff;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xs);
  position: relative;
}
.series-card--1 { width: 76%; margin-left: 0; }
.series-card--2 { width: 84%; margin-left: 8%; }
.series-card--current {
  /* The stack steps right by 8% a card. At 100% width the 16% offset pushed
     this card 16% past its own grid column and into the adjacent text column,
     clipping the last line of the paragraph beside it. 84% + 16% lands the
     card flush with the column edge, leaving the full grid gutter clear. */
  width: 84%; margin-left: 16%;
  padding: var(--s-6);
  flex-direction: column; align-items: stretch; gap: var(--s-5);
  border-radius: var(--r-xl);
}
.series-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.series-card__count { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-fig-md); letter-spacing: -0.03em; }
.series-card__meta { font-size: var(--t-2xs); color: rgba(255,255,255,0.78); }
.series-card__log { font-family: var(--font-mono); font-size: var(--t-2xs); color: rgba(255,255,255,0.82); line-height: 1.8; }

.registry-search {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.registry-search__input {
  flex: 1; min-width: 0;
  background: transparent; border: 0;
  color: #fff; font-size: var(--t-h4); font-weight: var(--fw-medium);
}
.registry-search__input::placeholder { color: rgba(255,255,255,0.42); }

/* --------------------------------------------------------------------------
   ACCESS — wallet routes
   -------------------------------------------------------------------------- */
.route { display: flex; gap: var(--s-5); align-items: flex-start; }
.route__object {
  width: 74px; height: 74px; border-radius: var(--r-xl);
  display: grid; place-items: center; flex: none;
  position: relative;
}
.route__object--light { background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--e-3); color: var(--c-accent); }
.route__object--light svg { filter: drop-shadow(0 6px 10px rgba(87,84,212,0.22)); }
.route__object--dark  { background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%); color: #fff;
                        font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-h2);
                        box-shadow: var(--dim-material); filter: drop-shadow(var(--e-dim-ink)); }
.wallet-slots { display: flex; gap: var(--s-2); }
.wallet-slot {
  width: 52px; height: 40px; border-radius: var(--r-sm);
  border: 1px dashed var(--c-border-strong);
  display: grid; place-items: center;
  font-size: 9px; color: var(--c-text-faint);
  background: var(--c-surface-muted);
}

/* --------------------------------------------------------------------------
   CABINET PREVIEW — product UI shown at full width
   -------------------------------------------------------------------------- */
.cabinet {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--e-3);
}
.cabinet__side { padding: var(--s-6); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; gap: var(--s-6); background: var(--c-surface); }
.cabinet__user { display: flex; align-items: center; gap: var(--s-3); }
.cabinet__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-bg-sunken); color: var(--c-bg);
  display: grid; place-items: center; overflow: hidden;
  font-size: var(--t-2xs); font-weight: var(--fw-bold); flex: none;
  box-shadow: inset 0 0 0 1px rgba(87, 84, 212, 0.24);
}
.cabinet__avatar img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 22%; border-radius: inherit;
}
.cabinet__nav { display: flex; flex-direction: column; gap: 2px; }
.cabinet__navlink {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--c-text-secondary);
}
.cabinet__navlink.is-active { background: var(--c-control-selected-bg); color: var(--c-control-selected-text); font-weight: var(--fw-semibold); }
.cabinet__main { padding: clamp(var(--s-6), 3vw, var(--s-8)); background: var(--c-bg-alt); display: flex; flex-direction: column; gap: var(--s-6); }
.cabinet__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--grid-gutter); align-items: start; }
.cabinet__summary { display: flex; flex-direction: column; gap: var(--s-4); }
.cabinet__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); }
.cabinet__summary-row dt { color: rgba(255,255,255,0.62); }
.cabinet__summary-row dd { margin: 0; font-weight: var(--fw-semibold); color: #fff; }

/* --------------------------------------------------------------------------
   HORIZON — issuance timeline
   -------------------------------------------------------------------------- */
.horizon { display: flex; flex-direction: column; gap: var(--s-4); }
.horizon__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border-subtle);
}
.horizon__row--current { border-bottom-color: var(--c-accent-border); }
.horizon__series { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--c-text); }
.horizon__meta { font-size: var(--t-2xs); color: var(--c-text-muted); }

.target {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  text-align: center;
  padding: clamp(var(--s-8), 4vw, var(--s-12));
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}
.target__value { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-fig-lg); letter-spacing: -0.03em; }

/* --------------------------------------------------------------------------
   MEDIA / NEWS
   -------------------------------------------------------------------------- */
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-border);
  transition: background-color var(--dur-1) var(--ease-out);
}
.news-item:last-child { border-bottom: 1px solid var(--c-border); }
.news-item__date { font-size: var(--t-2xs); color: var(--c-text-muted); }
.news-item__title { font-size: var(--t-h3); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-bg-sunken);
  border-top: 1px solid var(--c-border);
  padding-block: var(--s-20) var(--s-10);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-8), 5vw, var(--s-16));
}
.footer__col { display: flex; flex-direction: column; gap: var(--s-4); }
.footer__heading {
  font-size: var(--t-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-text-faint);
}
.footer__links { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__links a { font-size: var(--t-sm); color: var(--c-text-secondary); transition: color var(--dur-1) var(--ease-out); }
.footer__links a:hover { color: var(--c-text); }
.footer__bottom {
  margin-top: var(--s-16); padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.footer__disclaimer {
  margin-top: var(--s-6);
  font-size: var(--t-2xs); color: var(--c-text-faint);
  line-height: var(--lh-body);
  max-width: 96ch;
}
.footer__wordmark {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(4rem, 2rem + 9vw, 11rem);
  letter-spacing: var(--tr-display);
  line-height: 0.8;
  color: var(--c-border);
  margin-top: var(--s-12);
  user-select: none;
}


/* Wallet providers — the source names MetaMask explicitly; everything else
   stays generic. No invented provider logos, no placeholder boxes. */
.wallet-brands { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.wallet-brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.wallet-brand img { width: 22px; height: 22px; }
.wallet-brand--generic {
  background: transparent; border-style: dashed;
  color: var(--c-text-muted); font-weight: var(--fw-regular);
}

/* Wallet providers — the source names MetaMask explicitly; everything else
   stays generic. No invented provider logos, no placeholder boxes, no
   internal design notes in client-facing copy. */
.wallet-brands { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.wallet-brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.wallet-brand img { width: 22px; height: 22px; }
.wallet-brand--generic {
  background: transparent; border-style: dashed;
  color: var(--c-text-muted); font-weight: var(--fw-regular);
}

/* --------------------------------------------------------------------------
   WHAT'S NEW — the approved V3 editorial treatment: three saturated
   pink / blue / cyan cards with a line-art motif. This is a deliberate
   colour moment in a long, otherwise restrained page. Copy is the verified
   GATE source; only the visual treatment comes from V3.
   -------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gutter);
}
.news-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: var(--s-4);
  min-height: 340px;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  color: #fff;
}
.news-card--pink { background: #f472bb; color: #14060f; }
.news-card--blue { background: #4457ec; }
.news-card--cyan { background: #4cc4e6; color: #06222b; }

.news-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-2xs); font-weight: var(--fw-semibold);
}
.news-card__cat  { font-weight: var(--fw-bold); }
.news-card__date { opacity: 0.78; }
.news-card__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h1); line-height: 1.15; letter-spacing: var(--tr-tight);
  max-width: 18ch;
}
.news-card__desc { font-size: var(--t-sm); line-height: 1.5; opacity: 0.86; max-width: 40ch; }
.news-card__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: var(--fw-semibold);
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px; width: fit-content;
}
.news-card__cta .arw { transition: transform var(--dur-2) var(--ease-out); }
.news-card__cta:hover .arw { transform: translateX(4px); }

/* the V3 line-art circles, bled off the lower-right corner */
.news-card__motif {
  position: absolute; z-index: -1;
  right: -46px; bottom: -54px;
  width: 240px; height: 200px;
  stroke: currentColor; stroke-width: 1; opacity: 0.34;
  pointer-events: none;
}

/* Dark theme: hold the same hues, dropped slightly so they sit in a
   midnight page without glaring. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .news-card--pink { background: #d94f9c; color: #14060f; }
  :root:not([data-theme="light"]) .news-card--blue { background: #3a49cf; }
  :root:not([data-theme="light"]) .news-card--cyan { background: #2f9cbd; color: #041a21; }
}
:root[data-theme="dark"] .news-card--pink { background: #d94f9c; color: #14060f; }
:root[data-theme="dark"] .news-card--blue { background: #3a49cf; }
:root[data-theme="dark"] .news-card--cyan { background: #2f9cbd; color: #041a21; }

/* ==========================================================================
   CABINET PREVIEW — a window into the GATE application
   --------------------------------------------------------------------------
   UX, labels, metrics and copy come from the existing GATE Overview screen.
   Only the visual layer is redesigned in V3. Cropped to a desktop-product
   viewport (16:9) so the homepage section stays a preview, not a full page:
   content continues below and is masked rather than stretching the page.
   ========================================================================== */
.cabinet {
  /* A complete application viewport: no crop, no fade, no mask.
     The composition ends exactly where the interface ends. */
  position: relative;
}
.cabinet__main { gap: var(--s-5); justify-content: flex-start; }
/* nothing may shrink — the crop must cut content, never squash it */
.cabinet__main > * { flex: none; }


.cab-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.cab-status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-muted); }

/* application top bar */
.cab-appbar { display: flex; align-items: center; gap: var(--s-3); }
.cab-appbar__spacer { flex: 1; }
.cab-bell {
  position: relative; width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); background: var(--c-surface);
  display: grid; place-items: center; color: var(--c-text-secondary);
}
.cab-bell__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: #c62b2b; color: #fff;
  font-size: 10px; font-weight: var(--fw-bold);
  display: grid; place-items: center;
}

.cab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cab-head__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem);
  letter-spacing: var(--tr-display); line-height: 1.1;
  margin: 2px 0 var(--s-1);
}

/* one panel holds the whole portfolio story */
.cab-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cab-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--s-5);
}
.cab-panel__title {
  display: block; margin-top: var(--s-1);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h2); letter-spacing: var(--tr-tight);
}


/* four glance metrics, divided by hairlines rather than boxed in cards */
.cab-glance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--c-border);
}
.cab-glance__cell {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-left: 1px solid var(--c-border);
}
.cab-glance__cell:first-child { border-left: 0; }
.cab-glance__label { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-glance__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-fig-md); letter-spacing: -0.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cab-glance__value--empty { color: var(--c-text-faint); }
.cab-glance__foot { font-size: var(--t-2xs); color: var(--c-text-faint); }

/* the cash-position band — the one dark surface, carrying the headline figure */
.cab-cash { background: var(--g-mid-1000); color: #fff; }
.cab-cash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
}
.cab-cash__lead, .cab-cash__cell {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-left: 1px solid rgba(255,255,255,0.10);
}
.cab-cash__lead { border-left: 0; }
.cab-cash__label {
  font-size: var(--t-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.cab-cash__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--g-amber-400);
}
.cab-cash__num {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h2); letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums; color: #fff;
}
.cab-cash__foot { font-size: var(--t-2xs); color: rgba(255,255,255,0.56); }
.cab-cash__strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-size: var(--t-2xs); color: rgba(255,255,255,0.78);
}
.cab-cash__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--g-amber-400); margin-right: var(--s-2);
}

/* next redemption / recent activity */
.cab-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.cab-split__cell {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-left: 1px solid var(--c-border);
}
.cab-split__cell:first-child { border-left: 0; }
.cab-split__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-fig-md); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cab-split__head { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.cab-split__meta { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-split__flag { font-size: var(--t-2xs); font-weight: var(--fw-semibold); color: var(--c-verify); }

@media (max-width: 1100px) {
  .cabinet { aspect-ratio: auto; }
  .cabinet::after { display: none; }
  .cab-panel--peek { display: none; }
  .cab-glance { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cab-glance__cell:nth-child(3) { border-left: 0; }
  .cab-cash__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cab-cash__cell:nth-child(2) { border-left: 0; }
}
@media (max-width: 640px) {
  .cab-glance, .cab-cash__grid, .cab-split { grid-template-columns: minmax(0,1fr); }
  .cab-glance__cell, .cab-cash__cell, .cab-cash__lead, .cab-split__cell { border-left: 0; border-top: 1px solid var(--c-border); }
  .cab-cash__cell, .cab-cash__lead { border-top-color: rgba(255,255,255,0.10); }
  .cab-glance__cell:first-child, .cab-cash__lead:first-child, .cab-split__cell:first-child { border-top: 0; }
}

/* ==========================================================================
   HOW TO ACCESS — one composition, not fragments.
   Both routes sit on a single stage and meet at the same smart contract,
   which is what the GATE source actually describes. V3 dimensional
   character: the two route objects are elevated, the hub sits between them.
   ========================================================================== */
.access-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--s-8), 5vw, var(--s-20));
  align-items: end;
  margin-bottom: clamp(var(--s-10), 5vw, var(--s-16));
}

.access-stage {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(var(--s-6), 3vw, var(--s-10));
  padding: clamp(var(--s-8), 4vw, var(--s-16)) clamp(var(--s-6), 3vw, var(--s-12));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--e-2);
  overflow: hidden;
}
.access-stage::before {
  content: "";
  position: absolute; inset: -40% 20% auto 20%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(87,84,212,0.13) 0%, rgba(87,84,212,0) 70%);
  pointer-events: none;
}
.access-stage > * { position: relative; }

/* TWO EQUAL ACCESS OPTIONS */
.access-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* equal rows so the two routes stay the same height once they stack, not
     just side by side — neither option may read as the larger one */
  grid-auto-rows: 1fr;
  gap: clamp(var(--s-5), 3vw, var(--s-10));
}
.access-route {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3);
  padding: clamp(var(--s-5), 2.5vw, var(--s-8));
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  transition: border-color var(--m1,200ms) var(--m-ease,ease),
              box-shadow var(--m1,200ms) var(--m-ease,ease),
              transform var(--m1,200ms) var(--m-ease,ease);
}
@media (hover: hover) {
  .access-route:hover { border-color: var(--c-accent-border); box-shadow: var(--e-3); transform: translateY(-2px); }
}
.access-route:focus-within { border-color: var(--c-accent-border); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.access-route__tag {
  font-size: var(--t-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-text-faint);
}
.access-route__title { font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); }
.access-route__sub { font-size: var(--t-sm); color: var(--c-text-secondary); }
.access-route .micro { max-width: 36ch; }
.access-route__cta { margin-top: auto; }

/* the wallet object must read unmistakably as a wallet */
.access-obj {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 28px;
  display: grid; place-items: center;
  margin-bottom: var(--s-2);
}
.access-obj--light {
  background: linear-gradient(155deg, #ffffff 12.376%, #eceaff 87.624%);
  color: var(--c-accent);
  box-shadow: var(--dim-material);
  filter: drop-shadow(0 24px 30px rgba(87,84,212,0.26));
  border: 1px solid var(--c-border);
}
.access-obj__glyph { width: 52px; height: 44px; }
.access-obj--dark {
  background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%);
  color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h1);
  box-shadow: var(--dim-material);
  filter: drop-shadow(var(--e-dim-ink));
}

/* SHARED INFRASTRUCTURE — supporting, never a third option */
.access-infra { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.access-infra__rule { width: 1px; height: 28px; background: linear-gradient(var(--c-border-strong), transparent); }
.access-infra__body {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-alt);
}
.access-infra__label { font-size: var(--t-2xs); color: var(--c-text-muted); }
.access-infra__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.access-infra__name { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.access-infra__meta { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--c-text-muted); }
.access-infra__marks { display: inline-flex; gap: var(--s-2); }
.access-infra__marks img { width: 22px; height: 22px; }

.access-stage__foot {
  grid-column: 1 / -1;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-xs); color: var(--c-text-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .access-head   { grid-template-columns: 1fr; align-items: start; }
  .access-stage  { grid-template-columns: 1fr; }
  .access-link   { flex-direction: row; align-self: auto; }
  .access-link__line { width: auto; height: 1px; min-width: 28px; flex: 1;
                       background: linear-gradient(90deg, var(--c-border-strong), transparent); }
  .access-link__line:last-child { background: linear-gradient(90deg, transparent, var(--c-border-strong)); }
}

/* ---- Cabinet: V3 presentation layer ----------------------------------- */
/* Stronger active state in the application rail */
.cabinet__navlink.is-active {
  background: var(--c-accent-solid);
  color: #fff;
  box-shadow: 0 10px 18px -10px rgba(87,84,212,0.7);
}
/* the portfolio panel is a product surface — subtly dimensional (tier 2) */
.cab-panel { box-shadow: var(--e-2); }

.cab-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

/* Active note rows — real data-viz: term elapsed against redemption */
.cab-note {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-border);
}
.cab-note__badge {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--c-accent-soft); color: var(--c-accent-text);
  display: grid; place-items: center; align-content: center;
  font-size: var(--t-sm); font-weight: var(--fw-bold); line-height: 1;
}
.cab-note__badge small { font-size: 10px; font-weight: var(--fw-medium); opacity: .8; }
.cab-note__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.cab-note__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.cab-note__id { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.cab-note__when, .cab-note__elapsed { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-note__money { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.cab-note__nominal { font-size: var(--t-2xs); color: var(--c-text-faint); }
.cab-note__redeem {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h2); letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cab-note__at { font-size: var(--t-2xs); color: var(--c-verify); }

/* Current series — the second dark surface, carrying the series figure */
.cab-series {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, #2a2f52 0%, #16182f 62%, #0d0f1e 100%);
  color: #fff;
  box-shadow: var(--dim-material), var(--e-dim-violet);
}
.cab-series__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.cab-series__label { font-size: var(--t-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: rgba(255,255,255,0.6); }
.cab-series__code  { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--g-violet-300); }
.cab-series__dates { font-size: var(--t-2xs); color: rgba(255,255,255,0.6); }
.cab-series__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-fig-md); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cab-series .meter__track { background: rgba(255,255,255,0.14); }
.cab-series .meter__fill  { background: linear-gradient(90deg, var(--g-violet-300), var(--g-violet-500)); }
.cab-series__limits { padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: var(--s-3); }
.cab-series__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--t-2xs); color: rgba(255,255,255,0.7); }
.cab-series__avail { color: var(--g-violet-300); font-weight: var(--fw-semibold); }
.cab-series__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.cab-series__grid > div { display: flex; flex-direction: column; gap: 2px; }
.cab-series__grid strong { font-size: var(--t-h4); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cab-series__grid .micro { color: rgba(255,255,255,0.55); }

@media (max-width: 1100px) { .cab-lower { grid-template-columns: 1fr; } }

/* ==========================================================================
   CABINET — portfolio module
   Hierarchy over decoration: one primary figure, one honest visualisation
   built from the verified numbers, and the cash position as a compact
   accent module rather than a full-width dark band.
   ========================================================================== */
.cab-port {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-border);
}
.cab-port__main {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding: var(--s-6);
  /* the one place a V3 violet tint appears in the application chrome */
  background:
    radial-gradient(120% 90% at 0% 0%, var(--c-accent-soft) 0%, transparent 62%),
    var(--c-surface);
}

/* PRIMARY — the largest figure in the application */
.cab-lead { display: flex; flex-direction: column; gap: var(--s-1); }
.cab-lead__label { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-lead__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
  letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cab-lead__foot { font-size: var(--t-2xs); color: var(--c-text-faint); }

/* THE VISUALISATION — capital in play, split into active and returned.
   Derived only from published figures; no history, no projections. */
.cab-alloc { display: flex; flex-direction: column; gap: var(--s-3); }
.cab-alloc__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.cab-alloc__label { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-alloc__total {
  font-size: var(--t-h4); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cab-alloc__total small { font-size: var(--t-2xs); font-weight: var(--fw-regular); color: var(--c-text-faint); margin-left: var(--s-2); }
.cab-alloc__bar {
  display: flex; gap: 3px;
  height: 12px; border-radius: var(--r-pill);
  overflow: hidden;
}
.cab-alloc__seg { display: block; height: 100%; border-radius: var(--r-pill); }
.cab-alloc__seg--active   { background: linear-gradient(90deg, var(--g-violet-400), var(--c-accent-solid)); }
.cab-alloc__seg--returned { background: var(--c-verify); }
.cab-alloc__keys { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.cab-alloc__key { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-alloc__key b { color: var(--c-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cab-alloc__key i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.cab-alloc__key .k-active   { background: var(--c-accent-solid); }
.cab-alloc__key .k-returned { background: var(--c-verify); }

/* SUPPORTING metrics — same labels, deliberately lighter than the primary */
.cab-sub {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}
.cab-sub__cell { display: flex; flex-direction: column; gap: 2px; }
.cab-sub__label { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-sub__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h2); letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cab-sub__value--pos   { color: var(--c-verify); }   /* green only for a positive state */
.cab-sub__value--empty { color: var(--c-text-faint); }
.cab-sub__foot { font-size: var(--t-2xs); color: var(--c-text-faint); }
.cab-sub__action {
  font-size: var(--t-2xs); font-weight: var(--fw-semibold);
  color: var(--c-accent-text); width: fit-content;
  border-bottom: 1px solid var(--c-accent-border); padding-bottom: 1px;
}
.cab-sub__action:hover { border-bottom-color: var(--c-accent); }

/* CASH POSITION — compact module. Navy is an accent edge, not a slab.
   Amber is used only because this figure is genuinely a negative state. */
.cab-cashcard {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  border-left: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  position: relative;
}
.cab-cashcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--g-amber-400), var(--g-mid-800));
}
.cab-cashcard__label {
  font-size: var(--t-3xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-text-muted);
}
.cab-cashcard__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.5rem);
  letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #a9690a;   /* 4.2:1 on the application ground */
}
.cab-cashcard__foot { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-cashcard__rows {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.cab-cashcard__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.cab-cashcard__rows dt { font-size: var(--t-2xs); color: var(--c-text-muted); }
.cab-cashcard__rows dd {
  margin: 0; text-align: right;
  font-size: var(--t-sm); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cab-cashcard__rows dd small { display: block; font-size: var(--t-3xs); font-weight: var(--fw-regular); color: var(--c-text-faint); }
.cab-cashcard__note {
  font-size: var(--t-2xs); color: var(--c-text-muted);
  padding-top: var(--s-3); border-top: 1px solid var(--c-border);
}
.cab-cashcard__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--g-amber-400); margin-right: var(--s-2);
}

@media (max-width: 1024px) {
  .cab-port { grid-template-columns: 1fr; }
  .cab-sub  { grid-template-columns: 1fr 1fr; }
  .cab-sub__cell:last-child { grid-column: 1 / -1; }
  .cab-cashcard { border-left: 0; border-top: 1px solid var(--c-border); }
  .cab-cashcard::before { width: 100%; height: 3px; bottom: auto;
    background: linear-gradient(90deg, var(--g-amber-400), var(--g-mid-800)); }
}
@media (max-width: 640px) {
  .cab-sub { grid-template-columns: 1fr 1fr; }
  .cab-sub__cell:last-child { grid-column: 1 / -1; }
  .cab-port__main, .cab-cashcard { padding: var(--s-5); }
}

/* dark theme: the light-ground amber would be too dark on midnight */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cab-cashcard__value { color: var(--g-amber-400); }
}
:root[data-theme="dark"] .cab-cashcard__value { color: var(--g-amber-400); }

/* ==========================================================================
   NOTE MODULE — one consolidated product experience
   Replaces the two standing family cards + always-open calculator.
   Type → term → nominal → essential result, with the detailed calculator
   and the comparison table behind progressive disclosure.
   ========================================================================== */
.note-module {
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--e-2);
  overflow: hidden;
}

/* 1 · note type */
.nm-types { display: grid; grid-template-columns: 1fr 1fr; }
.nm-type {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start; text-align: left;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  position: relative;
}
.nm-type + .nm-type { border-left: 1px solid var(--c-border); }
.nm-type__name {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h2); letter-spacing: var(--tr-tight);
  color: var(--c-text-muted);
  transition: color var(--m1, 200ms) var(--m-ease, ease);
}
.nm-type__range { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--c-text-faint); }
.nm-type[aria-pressed="true"] { background: var(--c-surface); border-bottom-color: transparent; }
.nm-type[aria-pressed="true"] .nm-type__name { color: var(--c-text); }
.nm-type[aria-pressed="true"]::after {
  content: ""; position: absolute; left: var(--s-6); right: var(--s-6); bottom: -1px;
  height: 2px; border-radius: var(--r-pill); background: var(--c-accent);
}
.nm-type:hover .nm-type__name { color: var(--c-text); }

/* 2–4 · body */
.nm-body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 1fr);
}
.nm-explain, .nm-select, .nm-result {
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.nm-select, .nm-result { border-left: 1px solid var(--c-border); }
.nm-result { background: var(--c-bg-alt); }

.nm-explain__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-h1); letter-spacing: var(--tr-tight); line-height: 1.15;
}
.nm-explain__caption { font-size: var(--t-2xs); color: var(--c-text-muted); }
.nm-explain #calcViz { min-height: 34px; }

.nm-result__rows { display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.nm-result__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.nm-result__rows dt { font-size: var(--t-2xs); color: var(--c-text-muted); }
.nm-result__rows dd { margin: 0; font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--c-text); text-align: right; }

/* 5 · actions + disclosures */
.nm-actions {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
.nm-chev { transition: transform var(--m2, 380ms) var(--m-ease, ease); }
[aria-expanded="true"] .nm-chev { transform: rotate(180deg); }

.nm-panel, .nt-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--m-ease, ease);
}
.nm-panel.is-open, .nt-panel.is-open { grid-template-rows: 1fr; }
.nm-panel > div, .nt-panel > div { overflow: hidden; }
.nm-panel__inner {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}
.nm-panel__inner .calc__breakdown { border-block: 0; padding-block: 0; }

/* the comparison table keeps its approved design; only visibility changes */
.nt-panel .nt-wrap { padding-top: var(--s-6); }

@media (max-width: 1100px) {
  .nm-body { grid-template-columns: 1fr 1fr; }
  .nm-explain { grid-column: 1 / -1; border-bottom: 1px solid var(--c-border); }
  .nm-select { border-left: 0; }
}
@media (max-width: 700px) {
  .nm-types { grid-template-columns: 1fr; }
  .nm-type + .nm-type { border-left: 0; border-top: 1px solid var(--c-border); }
  .nm-type[aria-pressed="true"]::after { display: none; }
  .nm-type[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--c-accent); }
  .nm-body { grid-template-columns: 1fr; }
  .nm-select, .nm-result { border-left: 0; border-top: 1px solid var(--c-border); }
  .nm-explain, .nm-select, .nm-result, .nm-actions, .nm-panel__inner { padding: var(--s-5); }
  .nm-actions .btn { width: 100%; }
}

/* The comparison section carries no visible content while the panel is closed —
   without this it renders as an empty grey band under a heading that has moved
   inside the disclosure. Collapses to nothing closed, spaced properly open. */
#notes-table { padding-block: 0; transition: padding-block var(--dur-3) var(--ease-out); }
#notes-table:has(#ntPanel.is-open) { padding-block: var(--sec-pad-tight); }
@supports not (selector(:has(*))) { #notes-table { padding-block: var(--sec-pad-tight); } }