/* Page compositions
   Shared controls and reusable surfaces live in components.css. This file gives
   each product area its own hierarchy, rhythm, and data-story composition. */

:is(.home-page, .markets-page, .detail-page, .portfolio-page, .activity-page, .learn-page) {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  gap: var(--layout-section-gap);
  min-inline-size: var(--space-0);
}


:is(.home-page, .markets-page, .detail-page, .portfolio-page, .activity-page, .learn-page) > * {
  min-inline-size: var(--space-0);
}

:is(.home-page, .markets-page, .detail-page, .portfolio-page, .activity-page, .learn-page)
  :is(.section-heading, .markets-results__header) {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
}


:is(.home-page, .markets-page, .detail-page, .portfolio-page, .activity-page, .learn-page)
  :is(.section-kicker, .home-hero__eyebrow, .markets-feature__eyebrow) {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-normal);
  text-transform: uppercase;
}

:is(.section-heading, .page-header) > div {
  display: grid;
  gap: var(--space-3);
}

.section-heading h2 {
  max-inline-size: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  line-height: 1;
}

.section-heading > div > p:last-child {
  max-inline-size: 62ch;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

:is(.page-header, .markets-intro, .learn-hero) h1 {
  max-inline-size: 22ch;
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 0.96;
}
:is(.portfolio-page, .activity-page) .page-disclosure {
  max-inline-size: var(--layout-readable-max);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}


/* Home — an editorial opening followed by progressively deeper detail. */

.home-page {
  overflow: clip;
}

/*
 * The copy column sets the hero's height and the card centres against it, so
 * neither side stretches into a void. A single accent bloom sits behind the
 * card to give the panel depth without painting a gradient over the page.
 */
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1.05fr) minmax(var(--space-0), 0.95fr);
  align-items: start;
  gap: var(--space-10) var(--space-14);
  padding-block: var(--space-14) var(--space-12);
  overflow: clip;
  border-block-end: var(--border-subtle);
  isolation: isolate;
}

.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -8rem;
  inset-inline-end: -10rem;
  inline-size: min(44rem, 68%);
  block-size: min(44rem, 130%);
  background: radial-gradient(circle at 58% 42%, rgb(201 242 75 / 0.11), rgb(201 242 75 / 0) 62%);
  pointer-events: none;
}

/*
 * Verified Chainlink rounds, drawn as scenery. No axis, no ticks, no numbers,
 * so it can never be misread as a quote. Empty until real points arrive.
 */
.hero-chart {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline: calc(var(--space-10) * -1) calc(var(--space-10) * -1);
  overflow: clip;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow, 600ms) var(--ease-out);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 95%, transparent),
    linear-gradient(180deg, transparent 20%, #000 55%, #000 92%, transparent);
  mask-composite: intersect;
}

.hero-chart[data-state="ready"] {
  opacity: 1;
}

.hero-chart__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.hero-chart__lines path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-chart-draw 2.8s var(--ease-out) forwards;
}

/* Brighter layered market curves flowing across the hero into the card */
.hero-chart__lines path:nth-child(1) {
  opacity: 0.72;
  stroke-width: 2.25;
  filter: drop-shadow(0 0 10px rgb(201 242 75 / 0.45));
  animation-delay: 0.15s;
}
.hero-chart__lines path:nth-child(2) { opacity: 0.45; stroke-width: 1.75; animation-delay: 0.35s; stroke: var(--color-text); }
.hero-chart__lines path:nth-child(3) { opacity: 0.36; stroke-width: 1.5; animation-delay: 0.55s; stroke: var(--color-text); }
.hero-chart__lines path:nth-child(4) { opacity: 0.28; stroke-width: 1.5; animation-delay: 0.75s; stroke: var(--color-text); }

/* One slow pass of light across the stream */
.hero-chart__sheen {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 38%;
  background: linear-gradient(90deg, transparent, rgb(201 242 75 / 0.18), transparent);
  animation: hero-chart-sheen 10s linear 1s infinite;
}

@keyframes hero-chart-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-chart-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(400%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chart__line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .hero-chart__sheen {
    animation: none;
    opacity: 0;
  }
}


.home-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-9);
  max-inline-size: 46rem;
}

.home-hero__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-7);
}

/* Break at the separator, not mid-phrase: "... CHAIN · NOT / YET TRADABLE". */
.home-hero__eyebrow {
  text-wrap: balance;
}

.home-hero__head {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-5);
}

.home-hero__title {
  max-inline-size: 30ch;
  margin: var(--space-0);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}

.home-hero__lede {
  max-inline-size: 58ch;
  margin: var(--space-0);
  color: var(--color-text-secondary);
  font-size: clamp(var(--text-lg), 1.55vw, var(--text-xl));
  line-height: 1.65;
}

.home-hero__how {
  padding: var(--space-2) var(--space-1);
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(255 255 255 / 0.25);
  cursor: pointer;
}

.home-hero__how:hover,
.home-hero__how:focus-visible {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

.home-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-0);
  padding-block-start: var(--space-7);
  border-block-start: var(--border-subtle);
}

.home-proof__tile {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  background: rgb(12 12 14 / 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-proof__tile dt {
  min-block-size: 2.4em;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.home-proof__tile dd {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0;
}

.home-proof__tile strong {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.home-proof__tile span {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.home-proof__tile a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.home-proof__tile a:hover,
.home-proof__tile a:focus-visible {
  color: var(--color-accent);
}

.home-proof__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.hero-market-card__footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-decoration: none;
}

.hero-market-card__footer a:hover,
.hero-market-card__footer a:focus-visible {
  color: var(--color-accent);
}

.home-fit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-0);
  padding: var(--space-7) 0 0;
  border-block-start: var(--border-subtle);
  list-style: none;
}

.home-fit__item {
  display: grid;
  gap: var(--space-2);
}

.home-fit__chain {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.home-fit__ours {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .home-fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 520px) {
  .home-fit {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .home-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home-proof {
    grid-template-columns: minmax(0, 1fr);
  }
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

/* Three source-backed facts, anchoring the foot of the copy column. */




.home-hero__visual {
  position: relative;
  display: grid;
  min-inline-size: var(--space-0);
}


.hero-market-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  align-content: start;
  inline-size: 100%;
  padding: var(--space-7);
  overflow: clip;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-xl);
  background: rgb(14 14 16 / 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: var(--transition-colors);
}

.hero-market-card__tag {
  padding: var(--space-1) var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}


.hero-market-card__header,
.hero-choice-row__header,
.hero-market-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hero-market-card__header {
  padding-block-end: var(--space-1);
}


.hero-market-card__yield {
  display: grid;
  gap: var(--space-6);
}

/*
 * The two return paths read as a list, not as cards nested inside a card. Only
 * the live quote keeps a frame, because it is the one fact that moves.
 */
.hero-choice-row {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) auto;
  gap: var(--space-2) var(--space-5);
}

.hero-choice-row--reference {
  gap: var(--space-3) var(--space-5);
  padding: var(--space-6);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  background: rgb(8 8 10 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/*
 * The product is one pool becoming two claims, so the card draws it. The fork
 * reuses the mark's language: a solid core and round-capped strokes.
 */
.hero-split {
  display: grid;
  grid-template-columns: auto minmax(var(--space-0), 1fr);
  gap: var(--space-5);
  align-items: center;
}

.hero-split__fork {
  inline-size: 3.5rem;
  block-size: 6rem;
  fill: var(--color-accent);
  stroke: var(--color-border-strong);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.hero-split__fork path {
  fill: none;
}

.hero-split__branches {
  display: grid;
  gap: var(--space-6);
  min-inline-size: var(--space-0);
}

.hero-split__branch {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.hero-split__branch p {
  margin: var(--space-0);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  text-wrap: pretty;
}


.hero-choice-row__header {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.hero-choice-row__value {
  display: grid;
  align-self: center;
  gap: var(--space-1);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
}

.hero-choice-row__value strong {
  font-size: clamp(var(--text-3xl), 3.8vw, 3.5rem);
  font-weight: var(--weight-medium);
  letter-spacing: -0.03em;
}

.hero-choice-row__value small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.hero-choice-row__value small.is-live::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-live);
  box-shadow: 0 0 0 3px rgb(201 242 75 / 0.18);
}

/* No live quote means no number, so the hero scale would only shout a sentence. */
.hero-choice-row--reference.is-unquoted .hero-choice-row__value strong {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.hero-choice-row--reference.is-unquoted .hero-choice-row__value small {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: normal;
  text-transform: none;
}


.hero-choice-row__copy {
  grid-column: 1 / -1;
  max-inline-size: 46ch;
  margin: var(--space-0);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  text-align: start;
  text-wrap: pretty;
}

/* Provenance, not a label: caps plus tracking pushed this past the card width
   and broke "ERC-8056" across two lines. */
.hero-choice-row__copy--source {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}



.hero-market-card__footer {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}


.market-spotlight,
.strategy-explainer,
.explainer {
  display: grid;
  gap: var(--space-8);
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: stretch;
  gap: var(--layout-card-gap);
}

.spotlight-grid .spotlight-card {
  block-size: 100%;
  align-content: space-between;
}

.strategy-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  align-items: stretch;
  gap: var(--space-0);
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

/*
 * The two cards are stretched to a shared height, so whichever has less to say
 * used to trail off into dead space \u2014 321px of it once the PT card's disclosure
 * grew. Both cards are header / title / description / facts / footnote, so the
 * facts row takes the slack and the "May fit when" footnotes land flush with
 * each other at the foot of both columns.
 */
.strategy-choice-grid .strategy-choice-card {
  grid-template-rows: auto auto auto 1fr auto;
  border: var(--space-0);
  border-radius: var(--space-0);
  box-shadow: none;
}

/*
 * The facts list takes the slack row, so it must pack its own rows at the top:
 * left to stretch it pulls every dt away from its dd. The gap belongs in one
 * place, between the last fact and the footnote.
 */
.strategy-choice-grid .strategy-choice-card__facts {
  align-content: start;
}

.strategy-choice-grid .strategy-choice-card__example {
  align-self: end;
}

.strategy-choice-grid .strategy-choice-card + .strategy-choice-card {
  border-inline-start: var(--border-default);
}

.strategy-choice-card--dividend {
  margin-block-start: var(--space-0);
}

/*
 * A sidenote layout. The intro is short and the step list is long, so the intro
 * rides the scroll rather than leaving a one-sided hole under itself; it is
 * centred against the list at rest so the band never reads as half-empty.
 */
.explainer {
  grid-template-columns: minmax(var(--space-0), 4fr) minmax(var(--space-0), 8fr);
  align-items: center;
  padding-block: var(--space-16);
  border-block: var(--border-strong);
}

.explainer__intro {
  position: sticky;
  top: var(--layout-sticky-offset);
  display: grid;
  gap: var(--space-4);
  max-inline-size: 34ch;
}

.explainer__steps {
  display: grid;
}

.explainer-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(var(--space-0), 1fr) auto;
  align-items: start;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-block-start: var(--border-subtle);
}

.explainer-step:last-child {
  border-block-end: var(--border-subtle);
}

.explainer-step__number {
  display: grid;
  place-items: center;
  inline-size: var(--size-control-lg);
  block-size: var(--size-control-lg);
  border: var(--border-width) solid #ffffff;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #000000;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  box-shadow: 0 10px 30px rgb(255 255 255 / 0.08);
}

.explainer-step__content {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 54ch;
}

.explainer-step__content :is(h3, p) {
  margin: var(--space-0);
}

.explainer-step__content p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.explainer-step__visual {
  display: grid;
  place-items: center;
  min-inline-size: calc(var(--space-16) * 2);
  min-block-size: var(--size-control-lg);
  border-inline: var(--border-subtle);
  color: var(--color-accent);
}




.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-block: var(--border-subtle);
}

.trust-strip__item {
  display: flex;
  flex: 1 1 var(--layout-sidebar-width);
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control-lg);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.trust-strip__item > div {
  display: grid;
  gap: var(--space-1);
}

.trust-strip__item > div > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}


.trust-strip__item:not(:last-child) {
  border-inline-end: var(--border-subtle);
}

.home-page .eligibility-note {
  max-inline-size: var(--layout-readable-max);
  margin-inline: auto;
}

/* Markets — strong feature narrative above a deliberately dense catalog. */

.markets-page {
  gap: var(--space-12);
}

.markets-intro {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 4fr) minmax(var(--space-0), 5fr);
  align-items: end;
  gap: var(--space-10);
  padding-block-end: var(--space-6);
  border-block-end: var(--border-subtle);
}

.markets-intro > p {
  max-inline-size: 58ch;
  color: var(--color-text-secondary);
}


.markets-intro :is(h1, p) {
  margin: var(--space-0);
}


.markets-toolbar {
  position: sticky;
  z-index: var(--z-sticky);
  top: var(--layout-sticky-offset);
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--blur-glass)) saturate(120%);
}

.markets-toolbar__primary {
  display: grid;
  min-inline-size: var(--space-0);
}

.markets-filter-toggle {
  display: none;
}

.markets-filter-toggle__icon {
  display: inline-grid;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  place-items: center;
  transition: var(--transition-transform);
}

.markets-filter-toggle[aria-expanded="true"] .markets-filter-toggle__icon {
  transform: rotate(45deg);
}


.markets-search {
  min-inline-size: var(--space-0);
  inline-size: 100%;
}

.markets-filters,
.markets-filter-group,
.markets-filter-group__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.markets-filters {
  gap: var(--space-4) var(--space-8);
}

.markets-filter-group {
  gap: var(--space-3);
}

.markets-filter-group__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.markets-filter-group__options {
  gap: var(--space-2);
}

.markets-sort {
  margin-inline-start: auto;
}

.markets-results {
  display: grid;
  gap: var(--space-5);
}

.markets-results__header {
  min-block-size: var(--size-touch-min);
}

.markets-results__count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.markets-results__hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}



.markets-table {
  min-inline-size: calc(var(--space-16) * 15);
}


.markets-table :is(th, td):first-child {
  inline-size: 30%;
}

.markets-table__asset {
  min-inline-size: var(--layout-grid-min);
}


.markets-cards {
  display: none;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--layout-card-gap);
}

.markets-cards .market-card {
  min-inline-size: var(--space-0);
}

.markets-empty {
  display: grid;
  place-items: center;
  min-block-size: calc(var(--space-16) * 5);
  padding: var(--space-12);
  border-block: var(--border-subtle);
}

/* Market detail — one compact exchange surface directly under the shell. */

.page-content:has(> .detail-page[data-market-id]) {
  display: flex;
  max-inline-size: none;
  padding: var(--space-0);
  margin-inline: var(--space-0);
}

.detail-page[data-market-id] {
  flex: 1 1 auto;
  grid-template-rows: calc(100dvh - var(--layout-header-height)) auto;
  min-block-size: var(--space-0);
  block-size: auto;
  gap: var(--space-0);
  overflow: visible;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) clamp(21rem, 24vw, 26rem);
  align-items: stretch;
  min-block-size: var(--space-0);
  block-size: 100%;
  gap: var(--space-0);
}

.detail-main {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  grid-template-rows: minmax(var(--space-0), 1fr);
  min-inline-size: var(--space-0);
  min-block-size: var(--space-0);
}

.detail-page[data-market-id] .market-chart {
  min-block-size: var(--space-0);
  block-size: 100%;
  margin-block-end: var(--space-0);
  border: var(--space-0);
  border-inline-end: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: none;
}

.detail-page[data-market-id] .market-chart__embed {
  flex: 1 1 auto;
  min-block-size: var(--space-0);
  block-size: auto;
}
.detail-page[data-market-id] .market-chart__embed iframe {
  border-radius: var(--radius-none);
}


.detail-trade-rail {
  min-inline-size: var(--space-0);
  min-block-size: var(--space-0);
}

.detail-trade-rail .trade-panel {
  block-size: 100%;
  max-block-size: none;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  border: var(--space-0);
  border-radius: var(--radius-none);
  box-shadow: none;
}

.detail-trade-rail [data-trade-mode-panel="trade"] > .trade-balance {
  display: grid;
  grid-template-columns: max-content minmax(var(--space-0), 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-0);
}

.detail-trade-rail [data-trade-mode-panel="trade"] > .trade-balance > :last-child {
  min-inline-size: var(--space-0);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-align: end;
}
.detail-trade-rail [data-trade-mode-panel="series"] > .trade-side-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
}


.detail-trade-rail .amount-field {
  grid-template-columns: minmax(var(--space-0), 1fr) max-content;
}

.detail-trade-rail .amount-currency {
  flex: none;
  min-inline-size: max-content;
  inline-size: max-content;
  justify-self: end;
  white-space: nowrap;
}

/* Pair Lab — explicit assumptions first, exact payoff evidence second. */

.pair-lab {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  gap: var(--space-8);
  min-inline-size: var(--space-0);
  padding: var(--space-10) max(var(--layout-page-gutter), calc((100vw - var(--layout-content-max)) / 2));
  border-block-start: var(--border-strong);
  background:
    radial-gradient(circle at 8% 0%, var(--color-accent-softer), transparent 28rem),
    var(--color-bg);
}

.pair-lab :is(h2, h3, h4, p, dl, ul, ol) {
  margin: var(--space-0);
}

.pair-lab__header {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1.35fr) minmax(18rem, 0.65fr);
  gap: var(--space-3) var(--space-8);
  align-items: end;
  padding-block-end: var(--space-6);
  border-block-end: var(--border-default);
}

.pair-lab__header .eyebrow,
.pair-lab__header h2 {
  grid-column: 1;
}

.pair-lab__header h2 {
  max-inline-size: 17ch;
  font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
}

.pair-lab__header > p:not(.eyebrow) {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.pair-lab__identity {
  grid-column: 1 / -1 !important;
  padding: var(--space-4);
  border-inline-start: var(--border-accent);
  background: var(--color-accent-softer);
  color: var(--color-text-secondary) !important;
  overflow-wrap: anywhere;
}

.pair-lab__scenario-header {
  display: grid;
  gap: var(--space-2);
  max-inline-size: var(--layout-readable-max);
  padding-block-start: var(--space-2);
}

.pair-lab__scenario-header > p:not(.eyebrow) {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}


.pair-lab__worksheet {
  display: grid;
  grid-template-columns: repeat(12, minmax(var(--space-0), 1fr));
  gap: var(--space-5);
  align-items: start;
}

.pair-lab__worksheet :is(fieldset, legend) {
  min-inline-size: var(--space-0);
  padding: var(--space-0);
  border: var(--space-0);
}

.pair-lab__worksheet > :is(fieldset, .pair-lab__controls) {
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.pair-lab__worksheet legend {
  inline-size: 100%;
  margin-block-end: var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.pair-lab__recipes {
  display: grid;
  grid-column: span 3;
  gap: var(--space-2);
}

.pair-lab__recipes label {
  display: grid;
  grid-template-columns: auto minmax(var(--space-0), 1fr);
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-touch-min);
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.pair-lab__recipes label:has(input:checked) {
  border-color: var(--color-border-accent);
  background: var(--surface-selected);
  color: var(--color-text);
  box-shadow: var(--ring-selected);
}

.pair-lab__recipes input,
.pair-lab__choice input,
.pair-lab__same-reference input {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  margin: var(--space-0);
  accent-color: var(--color-accent);
}

.pair-lab__fieldset--common {
  grid-column: span 5;
}

.pair-lab__recipe-fields {
  display: grid;
  grid-column: span 4;
  gap: var(--space-4);
}

.pair-lab__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-4);
}

.pair-lab__field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
}

.pair-lab__field label,
.pair-lab__choice legend {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.pair-lab__field small,
.pair-lab__recipe-note,
.pair-lab__same-reference-note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.pair-lab__input-row {
  display: grid;
  grid-template-columns: auto minmax(var(--space-0), 1fr);
  align-items: center;
  min-block-size: var(--size-touch-min);
  border: var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-well);
  box-shadow: var(--shadow-inset);
}

.pair-lab__input-row > span {
  padding-inline-start: var(--space-3);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.pair-lab__input-row input {
  min-inline-size: var(--space-0);
  inline-size: 100%;
  min-block-size: var(--size-touch-min);
  padding: var(--space-2) var(--space-3);
  border: var(--space-0);
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.pair-lab__select {
  display: block;
  min-inline-size: var(--space-0);
  inline-size: 100%;
  min-block-size: var(--size-touch-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1rem;
  box-shadow: var(--shadow-inset);
}

.pair-lab__input-row:focus-within,
.pair-lab__select:focus-visible {
  border-color: var(--color-control-border-focus);
  box-shadow: var(--shadow-focus);
}

.pair-lab__field[aria-invalid="true"] :is(.pair-lab__input-row, .pair-lab__select),
.pair-lab__choice[aria-invalid="true"] {
  border-color: var(--color-error-border);
  box-shadow: var(--shadow-focus-error);
}

.pair-lab__field[aria-invalid="true"] .pair-lab__select:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus-ring);
  outline-offset: var(--space-1);
}

.pair-lab__error {
  color: var(--color-error) !important;
}

.pair-lab__choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) !important;
  border: var(--border-default) !important;
  border-radius: var(--radius-md);
}

.pair-lab__choice legend {
  inline-size: 100%;
  margin-block-end: var(--space-0);
}

.pair-lab__choice label,
.pair-lab__same-reference {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-touch-min);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.pair-lab__same-reference {
  padding: var(--space-2) var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-md);
}

.pair-lab__controls {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.pair-lab__status {
  min-block-size: 1.5em;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.pair-lab__empty {
  display: grid;
  gap: var(--space-2);
  min-block-size: 10rem;
  padding: var(--space-8);
  place-content: center;
  text-align: center;
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-well);
}

.pair-lab__empty p {
  max-inline-size: var(--layout-readable-max);
  color: var(--color-text-muted);
}

.pair-lab__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-5);
}

.pair-lab__results[hidden] {
  display: none;
}

.pair-lab__results > section {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-inline-size: var(--space-0);
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.pair-lab__selected {
  border-color: var(--color-border-accent) !important;
  background: var(--surface-selected) !important;
}

.pair-lab__scenarios,
.pair-lab__risk {
  grid-column: 1 / -1;
}

.pair-lab__comparison-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.pair-lab__comparison {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8rem, 1fr);
  min-inline-size: 48rem;
  gap: var(--space-2) var(--space-4);
}

.pair-lab__comparison dt,
.pair-lab__ledger dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.pair-lab__comparison dd {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.pair-lab__ribbon {
  display: flex;
  min-block-size: var(--space-10);
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.pair-lab__ribbon span {
  display: grid;
  min-inline-size: var(--space-0);
  padding-inline: var(--space-1);
  overflow: hidden;
  flex-basis: var(--space-0);
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-overflow: clip;
  white-space: nowrap;
}

.pair-lab__ribbon-core {
  background: var(--color-surface-high);
}

.pair-lab__ribbon-sidecar {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.pair-lab__ledger {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) minmax(8rem, auto);
}

.pair-lab__ledger :is(dt, dd) {
  padding-block: var(--space-3);
  border-block-end: var(--border-subtle);
}

.pair-lab__ledger dd {
  max-inline-size: 36rem;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  text-align: end;
}

.pair-lab__table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  border: var(--border-default);
  border-radius: var(--radius-lg);
  overscroll-behavior-inline: contain;
}

.pair-lab table {
  inline-size: 100%;
  min-inline-size: 56rem;
  border-collapse: collapse;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.pair-lab :is(th, td) {
  padding: var(--space-3);
  border-block-end: var(--border-subtle);
  text-align: start;
  vertical-align: top;
}

.pair-lab th {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.pair-lab thead {
  background: var(--color-surface-elevated);
}

.pair-lab caption {
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
  text-align: start;
}

.pair-lab__contour {
  padding: var(--space-4);
  border-inline-start: var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-softer);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.pair-lab__break-evens {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.pair-lab__boundary {
  display: grid;
  gap: var(--space-4);
  min-inline-size: var(--space-0);
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.pair-lab__boundary p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.pair-lab__native-plan {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--space-0), 3fr);
  gap: var(--space-6);
  min-inline-size: var(--space-0);
  padding: var(--space-6);
  border: var(--border-default);
  border-inline-start: var(--border-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-softer);
}

.pair-lab__native-plan > div {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.pair-lab__native-plan > div > p:not(.eyebrow) {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.pair-lab__native-plan dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-3);
  min-inline-size: var(--space-0);
}

.pair-lab__native-plan dl > div {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-subtle);
}

.pair-lab__native-plan dt {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pair-lab__native-plan dd {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.pair-lab__activation {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(12rem, 0.6fr) minmax(var(--space-0), 2.4fr);
  gap: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-default);
}

.pair-lab__activation > div {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.pair-lab__activation ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(var(--space-0), 1fr));
  gap: var(--space-2);
  padding: var(--space-0);
  list-style: none;
}

.pair-lab__activation li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.pair-lab__activation li::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: 50%;
  background: var(--color-text-subtle);
}

.pair-lab__activation li[data-state="complete"] {
  border-color: var(--color-border-accent);
}

.pair-lab__activation li[data-state="complete"]::before {
  background: var(--color-accent);
}

.pair-lab__activation li[data-state="next"]::before {
  background: var(--color-warning);
}

.pair-lab__activation strong {
  color: var(--color-text);
  font-size: var(--text-xs);
}

.pair-lab__activation span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}



.strategy-metric-legend {
  max-inline-size: var(--layout-readable-max);
  padding: var(--space-4);
  border-inline-start: var(--border-accent);
  background: var(--color-accent-softer);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}


.contract-link {
  display: inline-flex;
  min-block-size: var(--size-touch-min);
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}



/* Portfolio — one dominant value, then allocation and holdings evidence. */

.portfolio-page {
  gap: var(--space-12);
}

[data-portfolio-content] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  min-inline-size: var(--space-0);
}

.portfolio-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 7fr) minmax(var(--space-0), 5fr);
  align-items: end;
  gap: var(--space-8);
  margin-block-end: var(--space-0);
  padding: var(--space-10);
  overflow: clip;
  border-block: var(--border-strong);
  background:
    radial-gradient(circle at 86% 30%, var(--color-accent-soft), transparent 32%),
    linear-gradient(120deg, var(--color-highlight), transparent 38%);
}

.portfolio-hero > * {
  position: relative;
  z-index: 1;
}

.portfolio-hero > div {
  max-inline-size: var(--layout-readable-max);
}
.portfolio-hero > .button {
  justify-self: end;
}



.portfolio-hero::after {
  position: absolute;
  inset: calc(var(--space-16) * -1) calc(var(--space-16) * -1) auto auto;
  inline-size: calc(var(--space-16) * 4);
  aspect-ratio: 1;
  border: var(--space-2) solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  box-shadow:
    0 0 0 var(--space-4) var(--color-border-subtle),
    0 0 0 var(--space-9) var(--color-border-subtle);
  content: "";
  pointer-events: none;
}

.portfolio-value {
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 7fr) minmax(var(--space-0), 5fr);
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  overflow: clip;
  border-color: var(--color-border-strong);
  background:
    radial-gradient(circle at 8% 8%, var(--color-accent-soft), transparent 34%),
    var(--gradient-surface);
  box-shadow: var(--shadow-md);
}

.portfolio-value::after {
  position: absolute;
  inset: auto calc(var(--space-16) * -1) calc(var(--space-16) * -1) auto;
  inline-size: calc(var(--space-16) * 3);
  aspect-ratio: 1;
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--color-highlight), transparent 66%);
  content: "";
  pointer-events: none;
}

.portfolio-value__primary,
.portfolio-value__meta {
  position: relative;
  z-index: 1;
}

.portfolio-value__primary {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}


.portfolio-value__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.portfolio-value__amount {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}

.portfolio-value__change {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-control-sm);
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}


.portfolio-value__meta {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  max-inline-size: none;
  margin: var(--space-0);
  padding-inline-start: var(--space-8);
  border-inline-start: var(--border-subtle);
}

.portfolio-value__meta .stat-card {
  padding-block: var(--space-4);
  border-block-start: var(--border-subtle);
}

.portfolio-value__meta .stat-card:last-child {
  border-block-end: var(--border-subtle);
}

.dividend-proof,
.payoff-lab {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  overflow: hidden;
  border-color: var(--color-border-strong);
}

.dividend-proof {
  background:
    radial-gradient(circle at 92% 4%, var(--color-accent-soft), transparent 28%),
    var(--gradient-surface);
  box-shadow: var(--shadow-md);
}

.dividend-proof__header,
.payoff-lab__header,
.dividend-proof__observation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.dividend-proof__header > div,
.payoff-lab__header > div {
  display: grid;
  gap: var(--space-2);
}

.dividend-proof__header :is(h2, p),
.payoff-lab__header :is(h2, p) {
  margin: var(--space-0);
}

.dividend-proof__header > div > p:last-child {
  max-inline-size: var(--layout-readable-max);
  color: var(--color-text-muted);
}

.proof-capital-flow,
.payoff-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
}

.proof-capital-flow > div,
.payoff-flow > div {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
  padding: var(--space-5);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
}

.proof-capital-flow > div:first-child,
.payoff-flow > div:first-child {
  border-color: var(--color-border-accent);
  background: var(--color-accent-soft);
}

.proof-capital-flow > div :is(span, small),
.payoff-flow > div :is(span, small) {
  color: var(--color-text-muted);
}

.proof-capital-flow strong,
.payoff-flow strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.proof-capital-flow__operator,
.payoff-flow__operator {
  align-self: center;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.corporate-action-airlock {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--color-accent-soft), transparent 32%),
    var(--color-surface-elevated);
}

.corporate-action-airlock[data-status="pending"] {
  border-color: var(--color-warning-border);
  background:
    linear-gradient(135deg, var(--color-warning-soft), transparent 32%),
    var(--color-surface-elevated);
}

.corporate-action-airlock__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.corporate-action-airlock__header > div {
  display: grid;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
}

.corporate-action-airlock :is(h3, p, dl, dd) {
  margin: var(--space-0);
}

.corporate-action-airlock__header p:last-child,
.corporate-action-airlock[data-status="unavailable"] > p,
.corporate-action-airlock__note {
  max-inline-size: var(--layout-readable-max);
  color: var(--color-text-muted);
}

.corporate-action-airlock__lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-4);
}

.corporate-action-airlock__lanes article {
  display: grid;
  gap: var(--space-3);
  min-inline-size: var(--space-0);
  padding: var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.corporate-action-airlock__lane-label {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.corporate-action-airlock__lanes dl {
  display: grid;
  gap: var(--space-3);
}

.corporate-action-airlock__lanes dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-subtle);
}

.corporate-action-airlock__lanes dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.corporate-action-airlock__lanes dd {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
  overflow-wrap: anywhere;
}

.corporate-action-airlock__boundary {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.corporate-action-airlock__boundary span {
  inline-size: var(--border-width);
  background: var(--color-border-strong);
}

.corporate-action-airlock__note {
  padding-block-start: var(--space-4);
  border-block-start: var(--border-subtle);
}

.corporate-action-airlock > a {
  justify-self: start;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
}

.dividend-proof__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.dividend-proof__evidence {
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  white-space: normal;
}

.dividend-proof__observation {
  padding: var(--space-5);
  border-block: var(--border-subtle);
}

.dividend-proof__observation > div {
  display: grid;
  gap: var(--space-1);
}

.dividend-proof__observation :is(span, small) {
  color: var(--color-text-muted);
}

.dividend-proof__observation strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.dividend-proof__contracts {
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
}

.dividend-proof__contracts summary {
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.dividend-proof__contracts ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-0);
  margin: var(--space-0);
  padding: var(--space-0);
  border-block-start: var(--border-subtle);
  list-style: none;
}

.dividend-proof__contracts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-inline-size: var(--space-0);
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-subtle);
}

.dividend-proof__contracts li:nth-child(odd) {
  border-inline-end: var(--border-subtle);
}

.dividend-proof__contracts li a {
  color: var(--color-accent);
  font-family: var(--font-mono);
  text-decoration: none;
}

.payoff-lab {
  background:
    linear-gradient(135deg, var(--color-highlight), transparent 48%),
    var(--color-surface);
}

.payoff-lab__header output {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.payoff-lab__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 2fr);
  align-items: center;
  gap: var(--space-3) var(--space-6);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}

.payoff-lab__control input {
  inline-size: 100%;
  accent-color: var(--color-accent);
}

.payoff-lab__control small {
  grid-column: 2;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}


.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 7fr) minmax(var(--space-0), 5fr);
  align-items: start;
  gap: var(--space-8);
}

.allocation-card {
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  overflow: clip;
}



.allocation-card::before {
  position: absolute;
  inset: calc(var(--space-16) * -1) calc(var(--space-16) * -1) auto auto;
  inline-size: calc(var(--space-16) * 3);
  aspect-ratio: 1;
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--color-highlight), transparent 64%);
  content: "";
  pointer-events: none;
}

.allocation-card > * {
  position: relative;
  z-index: 1;
}
.portfolio-note {
  position: sticky;
  top: var(--layout-sticky-offset);
  display: grid;
  gap: var(--space-4);
  border-block-start-color: var(--color-border-accent);
  background:
    linear-gradient(135deg, var(--color-accent-softer), transparent 42%),
    var(--gradient-surface);
}

.portfolio-note p {
  color: var(--color-text-secondary);
}

.portfolio-note a {
  justify-self: start;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}



.allocation-list {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.allocation-item {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-start: var(--border-subtle);
}

.allocation-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.allocation-item__header > div,
.allocation-item__value {
  display: grid;
  gap: var(--space-1);
}

.allocation-item__header span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.allocation-item__value {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
}


.allocation-bar {
  grid-column: 1 / -1;
  block-size: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-active);
  box-shadow: var(--shadow-inset);
}

.allocation-bar__fill {
  block-size: 100%;
  min-inline-size: var(--space-1);
  border-radius: inherit;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

.holdings-section {
  display: grid;
  min-inline-size: var(--space-0);
  gap: var(--space-5);
}

.holdings-table {
  min-inline-size: 100%;
  font-variant-numeric: tabular-nums;
}

.holdings-table__head,
.holding-card {
  display: grid;
  grid-template-columns:
    minmax(var(--space-0), 3fr)
    minmax(var(--space-0), 2fr)
    minmax(var(--space-0), 2fr)
    minmax(var(--space-0), 1fr)
    minmax(var(--space-0), 2fr)
    minmax(calc(var(--space-16) * 2), auto);
  align-items: center;
  gap: var(--space-3);
}

.holding-card {
  min-inline-size: var(--space-0);
  min-block-size: calc(var(--size-touch-min) + var(--space-6));
  padding: var(--space-4);
}

.holding-cell {
  display: grid;
  gap: var(--space-1);
  min-inline-size: var(--space-0);
}

.holding-cell--asset {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.holding-cell--asset > span:last-child {
  display: grid;
  gap: var(--space-1);
  min-inline-size: var(--space-0);
}

.holding-symbol {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--size-touch-min);
  aspect-ratio: 1;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--gradient-metal);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.holding-card__action {
  justify-self: end;
}

.holding-cell--action {
  justify-items: end;
}


/* Activity — chronological continuity rather than disconnected status cards. */

.activity-page {
  gap: var(--space-10);
}

.activity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
  border-block: var(--border-subtle);
}

.activity-summary > * {
  min-inline-size: var(--space-0);
  padding: var(--space-6);
}

.activity-summary > *:not(:first-child) {
  border-inline-start: var(--border-subtle);
}

.activity-page > section[aria-labelledby="activity-list-title"] {
  display: grid;
  gap: var(--space-5);
}

.activity-filters {
  position: sticky;
  z-index: var(--z-sticky);
  top: var(--layout-sticky-offset);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  backdrop-filter: blur(var(--blur-glass));
}


.activity-timeline {
  position: relative;
  display: grid;
}

.activity-pagination {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4);
}


.activity-timeline::before {
  position: absolute;
  inset: var(--space-3) auto var(--space-3) calc(var(--space-3) / 2);
  inline-size: var(--border-width);
  background: linear-gradient(var(--color-border-accent), var(--color-border-subtle));
  content: "";
}

.activity-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-3) minmax(var(--space-0), 1fr) auto auto;
  align-items: center;
  gap: var(--space-6);
  min-block-size: calc(var(--size-touch-min) + var(--space-8));
  padding-block: var(--space-5);
  border-block-end: var(--border-subtle);
}

.activity-row__marker {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  place-items: center;
  inline-size: var(--space-3);
  aspect-ratio: 1;
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  color: var(--color-accent);
  font-size: var(--text-xs);
}


.activity-row:first-child .activity-row__marker {
  border-color: var(--color-border-accent);
  background: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.activity-row__main {
  display: grid;
  gap: var(--space-2);
  min-inline-size: var(--space-0);
}

.activity-row__main :is(strong, p) {
  margin: var(--space-0);
}
.activity-row__title,
.activity-row__reference {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.activity-row__reference {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.activity-row__reference small {
  flex-basis: 100%;
}


.activity-row__main p,
.activity-row__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.activity-row__meta {
  display: grid;
  gap: var(--space-1);
  text-align: end;
}

.activity-row__amount {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
  min-inline-size: 11ch;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.activity-row__amount span {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}


/* Learn — calm editorial education with reference material and sober risk. */

.learn-page {
  gap: var(--space-14);
}

.learn-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 7fr) minmax(var(--space-0), 5fr);
  align-items: end;
  gap: var(--space-12);
  min-block-size: calc(var(--space-16) * 5);
  padding: var(--space-10);
  overflow: clip;
  border-block: var(--border-strong);
  background:
    linear-gradient(118deg, var(--color-highlight), transparent 38%),
    radial-gradient(circle at 84% 28%, var(--color-accent-soft), transparent 34%);
}

.learn-hero::before {
  position: absolute;
  inset: calc(var(--space-16) * -1) calc(var(--space-16) * -1) auto auto;
  inline-size: calc(var(--space-16) * 5);
  aspect-ratio: 1;
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle, transparent 47%, var(--color-border-strong) 48%, transparent 49%),
    radial-gradient(circle, var(--color-highlight), transparent 68%);
  box-shadow:
    0 0 0 var(--space-8) var(--color-border-subtle),
    inset 0 0 var(--space-16) var(--color-surface);
  content: "";
  pointer-events: none;
}

.learn-hero > * {
  position: relative;
  z-index: 1;
}

.learn-hero :is(h1, p) {
  margin: var(--space-0);
}

.learn-hero h1 {
  max-inline-size: 13ch;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  text-wrap: balance;
}

.learn-hero__copy > p:not(.eyebrow) {
  max-inline-size: 52ch;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.learn-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.learn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.learn-hero__actions > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.learn-hero__note {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  border-block-start-color: var(--color-warning-border);
  background:
    linear-gradient(145deg, var(--color-warning-soft), transparent 36%),
    var(--gradient-surface);
}

.learn-hero__note h2 {
  font-size: var(--text-2xl);
}

.learn-hero__note p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.learn-topic-nav {
  position: sticky;
  z-index: var(--z-sticky);
  top: var(--layout-sticky-offset);
  display: flex;
  gap: var(--space-2);
  max-inline-size: 100%;
  padding: var(--space-2);
  overflow-x: auto;
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  backdrop-filter: blur(var(--blur-glass));
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.learn-topic-nav button {
  flex: 0 0 auto;
  min-block-size: var(--size-touch-min);
}

.learn-section,
.architecture-section,
.routing-section,
.official-sources,
.faq-section,
.eligibility-section {
  display: grid;
  gap: var(--space-8);
}

:is(
  #plain-language,
  #maturity,
  #risks,
  #eligibility,
  #architecture,
  #routing,
  #faq
) {
  scroll-margin-block-start: calc(var(--layout-sticky-offset) + var(--size-control-lg) + var(--space-6));
}


.learn-grid {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 7fr) minmax(var(--space-0), 5fr);
  align-items: stretch;
  gap: var(--layout-card-gap);
}

.lesson-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-block-size: calc(var(--space-16) * 3);
  padding: var(--space-6);
  overflow: clip;
  transition: var(--transition-colors), var(--transition-transform);
}


.lesson-card::before {
  position: absolute;
  inset: var(--space-0) var(--space-0) auto;
  block-size: var(--border-width);
  background: linear-gradient(90deg, var(--color-border-strong), transparent 70%);
  content: "";
}

a.lesson-card:hover,
a.lesson-card:focus-visible {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-hover);
  transform: translateY(calc(var(--space-1) * -1));
}


.lesson-card :is(h2, h3, p) {
  position: relative;
  z-index: 1;
  margin: var(--space-0);
}

.lesson-card p {
  max-inline-size: 64ch;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.lesson-card--example {
  grid-template-columns: minmax(var(--space-0), 3fr) minmax(var(--space-0), 9fr);
  align-items: start;
  min-block-size: var(--space-0);
  background:
    radial-gradient(circle at 100% 0%, var(--color-accent-soft), transparent 34%),
    var(--gradient-surface);
}

.lesson-card--example .lesson-card__fineprint {
  grid-column: 1 / -1;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-subtle);
  font-size: var(--text-xs);
}

.example-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-6);
}

.example-comparison > div {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-accent);
}

.example-comparison > div:last-child {
  border-block-start-color: var(--color-info-border);
}

.glossary-section,
.risk-section {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-block: var(--border-subtle);
}
.learn-page .section-heading--centered {
  justify-content: center;
  text-align: center;
}

.learn-page .section-heading--centered > div {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-inline-size: var(--layout-readable-max);
}


.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-5);
}

.glossary-term {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-inline-size: var(--space-0);
  padding: var(--space-6);
  overflow: clip;
}

.glossary-term--principal {
  border-color: var(--color-border-accent);
  background:
    radial-gradient(circle at 100% 0%, var(--color-accent-soft), transparent 38%),
    var(--gradient-surface);
}

.glossary-term--yield {
  border-color: var(--color-info-border);
  background:
    linear-gradient(145deg, var(--color-highlight), transparent 36%),
    var(--gradient-surface);
}

.glossary-term__number {
  position: absolute;
  inset: var(--space-5) var(--space-5) auto auto;
  color: var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  line-height: var(--leading-none);
}

.glossary-term > :not(.glossary-term__number) {
  position: relative;
  z-index: 1;
}

.glossary-term > h3 {
  max-inline-size: 25ch;
}

.glossary-term > p:not(.eyebrow) {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.glossary-term dl {
  display: grid;
  margin: var(--space-0);
  border-block-start: var(--border-subtle);
}

.glossary-term dl > div {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--space-0), 3fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: var(--border-subtle);
}

.glossary-term :is(dt, dd) {
  margin: var(--space-0);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.glossary-term dt {
  color: var(--color-text-muted);
}

.glossary-term dd {
  color: var(--color-text-secondary);
  text-align: end;
}

.maturity-walkthrough {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
  gap: var(--layout-card-gap);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.maturity-walkthrough .lesson-card {
  min-block-size: calc(var(--space-16) * 4);
}

.maturity-walkthrough .lesson-card > span {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


.risk-section {
  position: relative;
  grid-template-columns: minmax(var(--space-0), 4fr) minmax(var(--space-0), 8fr);
  padding: var(--space-8);
  overflow: clip;
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--color-warning-soft), transparent 24%),
    var(--color-surface);
}

.risk-section::after {
  position: absolute;
  inset: auto calc(var(--space-16) * -1) calc(var(--space-16) * -1) auto;
  inline-size: calc(var(--space-16) * 3);
  aspect-ratio: 1;
  border: var(--border-warning);
  border-radius: var(--radius-pill);
  content: "";
  opacity: var(--opacity-muted);
  pointer-events: none;
}

.risk-section > * {
  position: relative;
  z-index: 1;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-6);
}

.risk-section .risk-item {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-warning);
}

.risk-section .risk-item :is(h3, p) {
  margin: var(--space-0);
}

.risk-section .risk-item p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.architecture-flow {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  border-block: var(--border-subtle);
  list-style: none;
}

.architecture-flow > li {
  display: grid;
  grid-template-columns: auto minmax(var(--space-0), 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block-end: var(--border-subtle);
}

.architecture-flow > li:last-child {
  border-block-end: var(--space-0);
}

.architecture-flow > li > span {
  display: grid;
  place-items: center;
  inline-size: var(--size-touch-min);
  aspect-ratio: 1;
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--gradient-metal);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.architecture-flow > li > div {
  display: grid;
  gap: var(--space-2);
  max-inline-size: var(--layout-readable-max);
}

.architecture-flow p,
.official-sources > p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.routing-status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.routing-status > span {
  display: grid;
  inline-size: var(--size-control-lg);
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #000000;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.routing-status > div {
  display: grid;
  gap: var(--space-1);
}

.routing-status small {
  color: var(--color-text-muted);
}

.contract-registry {
  display: grid;
  margin: var(--space-2) var(--space-0);
  padding: var(--space-0);
  border-block: var(--border-subtle);
  list-style: none;
}

.contract-registry li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--size-touch-min);
  padding-block: var(--space-3);
  border-block-end: var(--border-subtle);
}

.contract-registry li:last-child {
  border-block-end: var(--space-0);
}

.contract-registry span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.contract-registry a {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.readiness-gate {
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
}

.readiness-gate :is(h3, strong) {
  color: #000000;
}

.readiness-gate :is(p, li) {
  color: #262626;
}

.readiness-gate .eyebrow {
  color: #525252;
}

.readiness-gate ul {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: var(--space-5);
}

.external-resource {
  min-block-size: calc(var(--space-16) * 2);
  color: inherit;
  text-decoration: none;
}

.external-resource span,
.external-resource small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.external-resource strong {
  font-size: var(--text-lg);
}

.lesson-card--checklist ul {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-0);
  padding-inline-start: var(--space-5);
  color: var(--color-text-secondary);
}

.learn-footer {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  overflow: clip;
  border-color: var(--color-border-accent);
  background:
    radial-gradient(circle at 90% 10%, var(--color-accent-soft), transparent 38%),
    var(--gradient-surface);
}

.learn-footer > div {
  display: grid;
  gap: var(--space-2);
}

.faq-list {
  display: grid;
  border-block-start: var(--border-subtle);
}

.faq-list details {
  border-block-end: var(--border-subtle);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--size-control-lg);
  padding-block: var(--space-4);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  content: "+";
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details > :not(summary) {
  max-inline-size: var(--layout-readable-max);
  margin: var(--space-0);
  padding-block: var(--space-0) var(--space-5);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Page-level interaction remains quiet, with keyboard focus always explicit. */

.hero-market-card:focus-within,
a.lesson-card:focus-visible {
  outline: var(--border-accent);
  outline-offset: var(--space-1);
  box-shadow: var(--shadow-focus);
}


@media (prefers-reduced-motion: reduce) {
  :is(.hero-market-card, a.lesson-card) {
    transition-duration: var(--duration-instant);
  }

  :is(.hero-market-card, a.lesson-card):hover,
  .hero-market-card:focus-within,
  a.lesson-card:focus-visible {
    transform: none;
  }


}


@media (max-width: 35rem) {

  /*
   * Two ~171px columns orphan the last word of every note here ("payments",
   * "reinvested", "RETURN"). One column per fact fits each on a single line.
   */
  .home-hero__facts .asset-fundamentals {
    grid-template-columns: minmax(var(--space-0), 1fr);
    gap: var(--space-5);
  }

  .home-hero__facts .asset-fundamentals__item {
    grid-template-rows: auto;
    grid-row: auto;
  }
}

/* Protocol map
   -------------------------------------------------------------------------- */

.protocol-map {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-16);
  border-block-start: var(--border-strong);
}

.protocol-map__intro {
  display: grid;
  gap: var(--space-3);
  max-inline-size: var(--layout-readable-max);
}

.protocol-map__intro h2 {
  margin: 0;
}

.protocol-map__intro p:last-child {
  margin: 0;
  color: var(--color-text-secondary);
}

.protocol-map__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--layout-card-gap);
}

.protocol-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface-panel);
  border: var(--border-default);
  border-radius: var(--radius-card);
}

/* Product motion: one small looping picture per card, literal to its claim. */
.protocol-motion {
  display: block;
  inline-size: 100%;
  block-size: 3.5rem;
  overflow: visible;
  color: var(--color-accent);
}

.protocol-motion__track {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.protocol-motion__label {
  fill: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.protocol-motion__node {
  fill: currentColor;
}

/* Yield: one token forks into PT and YT. */
.protocol-motion__pulse {
  fill: currentColor;
}

.protocol-motion__pulse--yt {
  fill: var(--color-text);
}

/* Baskets: longs rise, shorts sink, both collapse into one position. */
.protocol-motion__bar {
  fill: currentColor;
  transform-box: fill-box;
  animation: protocol-basket-long 3.2s ease-in-out infinite;
}

.protocol-motion__bar--long {
  transform-origin: bottom;
}

.protocol-motion__bar--short {
  fill: var(--color-text-muted);
  transform-origin: top;
  animation-name: protocol-basket-short;
}

.protocol-motion__bar:nth-child(3) { animation-delay: 0.15s; }
.protocol-motion__bar:nth-child(4) { animation-delay: 0.3s; }
.protocol-motion__bar:nth-child(6) { animation-delay: 0.2s; }

.protocol-motion__one {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  animation: protocol-basket-one 3.2s ease-in-out infinite;
}

@keyframes protocol-basket-long {
  0%, 20% { transform: translateY(0) scaleY(0.2); }
  50%, 70% { transform: translateY(-100%) scaleY(1); }
  100% { transform: translateY(0) scaleY(0.2); }
}

@keyframes protocol-basket-short {
  0%, 20% { transform: scaleY(0.2); }
  50%, 70% { transform: scaleY(1); }
  100% { transform: scaleY(0.2); }
}

@keyframes protocol-basket-one {
  0%, 45% { opacity: 0.25; }
  65%, 85% { opacity: 1; }
  100% { opacity: 0.25; }
}

/* Capital: the desk gauge fills as equity climbs. */
.protocol-motion__fill {
  fill: currentColor;
  opacity: 0.16;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: protocol-vault-fill 4s ease-in-out infinite;
}

.protocol-motion__equity {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: protocol-draw 4s ease-in-out infinite;
}

@keyframes protocol-vault-fill {
  0% { transform: scaleY(0.1); }
  60%, 80% { transform: scaleY(1); }
  100% { transform: scaleY(0.1); }
}

@keyframes protocol-draw {
  0% { stroke-dashoffset: 200; }
  60%, 80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 200; }
}

/* Index: four tokens slide into one ETF tile, then back out (mint / redeem). */
.protocol-motion__tile {
  fill: var(--color-text-muted);
  animation: protocol-etf-mint 4s ease-in-out infinite;
}

.protocol-motion__tile--a { --dx: 80px; --dy: 4px; }
.protocol-motion__tile--b { --dx: 80px; --dy: -4px; }
.protocol-motion__tile--c { --dx: 58px; --dy: 4px; }
.protocol-motion__tile--d { --dx: 58px; --dy: -4px; }

.protocol-motion__etf {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  animation: protocol-etf-ready 4s ease-in-out infinite;
}

@keyframes protocol-etf-mint {
  0%, 15% { transform: translate(0, 0); opacity: 1; }
  45%, 65% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  85%, 100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes protocol-etf-ready {
  0%, 30% { fill: transparent; }
  50%, 65% { fill: color-mix(in srgb, currentColor 22%, transparent); }
  90%, 100% { fill: transparent; }
}

/* Options: the payoff hockey stick draws; the flat floor is the premium. */
.protocol-motion__floor {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.protocol-motion__payoff {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: protocol-payoff 3.6s ease-in-out infinite;
}

@keyframes protocol-payoff {
  0% { stroke-dashoffset: 160; }
  55%, 80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 160; }
}

/* Research: two pair lines, one scan cursor reading across them. */
.protocol-motion__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.protocol-motion__line--b {
  stroke: var(--color-text-muted);
}

.protocol-motion__scan {
  stroke: var(--color-text);
  stroke-width: 1;
  fill: var(--color-text);
  animation: protocol-scan 3s linear infinite;
}

@keyframes protocol-scan {
  from { transform: translateX(8px); }
  to { transform: translateX(152px); }
}

@media (prefers-reduced-motion: reduce) {
  .protocol-motion *,
  .protocol-motion__bar,
  .protocol-motion__tile,
  .protocol-motion__scan {
    animation: none !important;
  }

  .protocol-motion__pulse { display: none; }
  .protocol-motion__bar { transform: none; }
  .protocol-motion__fill { transform: scaleY(0.7); }
  .protocol-motion__equity,
  .protocol-motion__payoff { stroke-dashoffset: 0; }
  .protocol-motion__scan { transform: translateX(80px); }
}

.protocol-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.protocol-card__status {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.protocol-card__status.is-live {
  color: var(--color-accent);
}

.protocol-card__title {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--color-text);
}

.protocol-card__copy {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.protocol-card__facts {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.protocol-card__facts li::before {
  content: "·";
  margin-inline-end: var(--space-2);
  color: var(--color-accent);
}

.protocol-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}

.protocol-card__cta:hover {
  color: var(--color-accent);
}




@media (max-width: 40rem) {
}