/* ===== The Basket - site/styles.css =====================================
 *  - One stylesheet. No preprocessor, no utility framework, no build step.
 *  - Straw-paper page (#F2EBE0) under white cards ruled with warm hairlines.
 *    The palette is pulled straight off the wicker mark: amber, tan, ink.
 *  - Radius ladder 6 / 8 / 10px. Instrument Sans does everything.
 *    The family tops out at 700 - anything heavier clamps to 700 silently,
 *    so nothing in this file asks for more.
 *  - Data voice: oversized w500 negative-tracked numerals, tabular figures.
 *    Label voice: uppercase 10-11px at .15em, led by a short amber rule.
 *    Numbering is a right-aligned monospace tick, never inline in the label.
 *  - Amber (#C4823C) carries active nav, progress fills, the countdown ring
 *    and the one key figure per block. It is never a large flat fill.
 *  - Breakpoints: 1080 / 960 / 760 / 560.
 * ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ---------- tokens ---------- */

:root {
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --color-ink: #1A1613;
  --color-muted: #7A6A57;
  --color-subtle: #94836D;
  --color-faint: #ADA08C;
  --color-line: #E8DDCC;
  --color-line-soft: #F0E8DA;
  --color-page: #F2EBE0;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FAF5ED;
  --color-surface-warm: #FDFAF5;

  /* wicker amber, straight off the mark */
  --color-accent: #C4823C;
  --color-accent-light: #D9A05B;
  --color-accent-deep: #A96A2C;
  --accent-wash: rgba(196, 130, 60, .12);
  --accent-ring: rgba(196, 130, 60, .30);

  --tint-stone: #F4ECDF;
  --line-strong: #DCCDB4;
  --line-input: #E4D8C4;
  --disabled: #C6B79F;
  --nav-idle: #9A8A74;
  --num-grey: #D9CDB8;

  --ok-bg: #EDF1E3;   --ok-fg: #5A7238;
  --warn-bg: #FAEEDA; --warn-fg: #9A6520;
  --err-bg: #F8E8E1;  --err-fg: #B24F3B;

  --site-rail: 1240px;
  --readable-rail: 880px;
  --panel-sm: 520px;
  --section-x: 24px;
  --section-y: 92px;
  --section-y-tight: 60px;
  --gap-rail: 24px;
  --gap-grid: 12px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --header-offset: 72px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --tracking-label: .15em;
  --tracking-eyebrow: .18em;
}

@media (max-width: 760px) {
  :root { --section-x: 18px; --header-offset: 60px }
}

/* ---------- base ---------- */

* { box-sizing: border-box }

html, body {
  margin: 0; padding: 0; overflow-x: hidden;
  background: var(--color-page); color: var(--color-ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100% }
button { font-family: inherit }
a { color: inherit }

::selection { background: var(--accent-ring) }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }

::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #C4B393; background-clip: content-box }

.app { display: flex; flex-direction: column; min-height: 100vh }
.app > main { flex: 1 0 auto }

/* ---------- layout ---------- */

.layout-rail { width: min(100%, var(--site-rail)); margin-inline: auto }
.layout-readable { width: min(100%, var(--readable-rail)); margin-inline: auto }
.panel-sm { width: min(calc(100vw - var(--section-x) * 2), var(--panel-sm)); margin-inline: auto }

.app-section { padding: var(--section-y) var(--section-x) }
.app-section.compact { padding-block: var(--section-y-tight) }
.app-section.flush-top { padding-top: 0 }
.app-section.flush-bottom { padding-bottom: 0 }
.app-section.centered { text-align: center }
.app-section p, .surface-card p, .table-card p { overflow-wrap: anywhere }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.section-head.centered {
  display: block; max-width: 760px; margin-inline: auto; text-align: center;
}
.section-head .head-copy { max-width: 420px }

.stack { display: flex; flex-direction: column; gap: 12px }
.stack-lg { display: flex; flex-direction: column; gap: 24px }
.row { display: flex; align-items: center; gap: 12px }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.row-wrap { flex-wrap: wrap }

/* Stat strip: cells butt together inside one ruled panel rather than floating
   as separate cards. Each cell draws its own top/left hairline and pulls back
   1px, so wrapped rows rule correctly and a short last row leaves white, not
   a bar of line colour. */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-surface);
}
.stat-grid > .surface-card {
  border-radius: 0; margin: -1px 0 0 -1px;
  border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line);
}
.stat-grid > .surface-card:nth-child(even) { background: var(--color-surface-warm) }

.dashboard-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-grid) }
.pf-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 12px }
.dist-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px }
.process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid) }
.basket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-grid) }

/* ---------- typography ---------- */

h1, h2, h3, h4, h5 { margin: 0; font-weight: 500 }

/* The label system: an amber rule leads every eyebrow, plain uppercase for
   in-card labels, and a monospace tick carries the numbering at the right
   edge of a card instead of sitting inside the label text. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: 10px; font-weight: 700; line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-accent-deep);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; flex: 0 0 auto;
  background: var(--color-accent); border-radius: 2px;
}
.section-title {
  margin: 18px 0 0; font-size: clamp(32px, 3.2vw, 46px); font-weight: 500;
  line-height: 1.12; letter-spacing: -.025em;
}
.section-title.small { margin-top: 0; font-size: clamp(25px, 2.3vw, 31px) }
.section-copy { margin: 12px 0 0; max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--color-muted) }

.ui-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-subtle); line-height: 1.2;
}
.micro-label {
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-faint); line-height: 1.2;
}
.label-index {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .04em; color: var(--num-grey); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px }

.metric-value {
  font-size: clamp(40px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.metric-unit { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--color-faint) }
.metric-meta { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-muted) }
.metric-sub { margin: 6px 0 0; font-size: 13px; color: var(--color-subtle); font-variant-numeric: tabular-nums }

.card-headline { font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums }
.panel-title, .table-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0 }

.body-copy { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--color-muted) }
.body-copy b, .body-copy strong { color: var(--color-ink); font-weight: 700 }
.lede { margin: 16px 0 0; max-width: 480px; font-size: 16px; line-height: 1.5; color: var(--color-muted) }

.num { font-variant-numeric: tabular-nums }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; overflow-wrap: anywhere }
.muted { color: var(--color-muted) }
.subtle { color: var(--color-subtle) }
.faint { color: var(--color-faint) }
.nowrap { white-space: nowrap }
.hidden { display: none !important }
.not-configured { color: var(--color-faint) }
.value-ok { color: var(--ok-fg) }
.value-warn { color: var(--warn-fg) }
.value-err { color: var(--err-fg) }

/* ---------- header ----------
   A flush, page-width bar rather than a floating pill: it sits on the straw,
   condenses in height on scroll, and carries the live threshold progress as a
   2px amber rail welded to its bottom edge. The rail is the one piece of
   chrome that is also data. */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 70;
  background: rgba(242, 235, 224, .80);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
body.nav-scrolled .site-header {
  background: rgba(242, 235, 224, .95); border-bottom-color: var(--color-line);
}

.header-shell {
  position: relative; width: min(100%, var(--site-rail)); margin-inline: auto;
  height: var(--header-offset); padding-inline: var(--section-x);
  display: flex; align-items: center; gap: 26px;
  transition: height .25s var(--ease);
}
body.nav-scrolled .header-shell { height: 58px }

.header-rail { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden }
.header-rail i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent-deep));
  transition: width .5s var(--ease);
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto }
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; transition: width .25s var(--ease), height .25s var(--ease) }
body.nav-scrolled .brand-mark { width: 26px; height: 26px }
.wordmark { font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase }

/* Nav sits left, tucked behind the brand past a hairline - not centred. */
.topnav { position: relative; display: flex; align-items: center; gap: 26px; padding-left: 26px }
.topnav::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--color-line);
}
.topnav a {
  position: relative; padding: 6px 0; font-size: 11.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--nav-idle);
  text-decoration: none; transition: color .15s var(--ease);
}
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--color-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .18s var(--ease);
}
.topnav a:hover { color: var(--color-ink) }
.topnav a.active { color: var(--color-accent-deep); font-weight: 600 }
.topnav a.active::after { transform: scaleX(1) }

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto }

.countdown-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.countdown-pill .cd-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-faint);
}
.countdown-pill .cd-value {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--color-ink);
}

/* the countdown ring - also used at size in the hero rail */
.cd-ring { flex: 0 0 auto; width: 14px; height: 14px; overflow: visible }
.cd-ring circle { fill: none; stroke-width: 3 }
.cd-ring .track { stroke: var(--color-line) }
.cd-ring .arc {
  stroke: var(--color-accent); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s linear;
}

.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--color-ink); text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.icon-link:hover { background: var(--color-surface); border-color: var(--color-line) }
.icon-link svg, .icon-link img { width: 16px; height: 16px }

.nav-right .btn-outline { min-height: 36px; padding: 0 14px; font-size: 11px; gap: 6px }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
}
.nav-toggle i { display: block; width: 16px; height: 1.5px; background: var(--color-ink); position: relative }
.nav-toggle i::before, .nav-toggle i::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--color-ink);
}
.nav-toggle i::before { top: -5px }
.nav-toggle i::after { top: 5px }

.site-header-offset { height: var(--header-offset) }

/* mobile menu sheet */
.mobile-menu {
  position: fixed; inset: 0; z-index: 75; display: none;
  flex-direction: column; gap: 8px; padding: 96px var(--section-x) 32px;
  background: var(--color-page);
}
.mobile-menu.open { display: flex }
.mobile-menu .brand { margin-bottom: 16px }
.mobile-menu-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; border-bottom: 1px solid var(--color-line);
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; text-decoration: none; color: var(--color-ink);
}
.mobile-menu-link.active { color: var(--color-accent-deep) }
.mobile-menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px }

/* ---------- buttons ---------- */

.btn-dark {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--color-ink); color: #fff; border-radius: var(--radius-md);
  padding: 16px 24px; font-size: 12px; letter-spacing: var(--tracking-label);
  font-weight: 700; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; border: 0; cursor: pointer; transition: background .15s var(--ease);
}
.btn-dark:hover { background: #2F2721 }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 0 18px; background: var(--color-surface); color: var(--color-ink);
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .15s var(--ease);
}
.btn-outline:hover { background: var(--color-surface-soft) }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--color-ink); border-radius: var(--radius-md); padding: 15px 24px;
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn-ghost:hover { background: var(--color-surface); border-color: var(--color-accent) }

.btn-block {
  display: block; width: 100%; text-align: center;
  background: var(--color-ink); color: #fff; border-radius: var(--radius-md);
  padding: 14px; font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: 0; cursor: pointer; text-decoration: none; transition: background .15s var(--ease);
}
.btn-block:hover { background: #2F2721 }
.btn-block:disabled { opacity: .5; cursor: not-allowed; background: var(--color-ink) }

.btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.btn-dark .go, .btn-outline .go, .btn-ghost .go, .btn-block .go { font-size: 13px; line-height: 1 }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 0 }
.pager-label {
  margin-right: auto; font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-faint);
}
.pager-btn {
  font-size: 12px; letter-spacing: .04em; font-weight: 600; padding: 6px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-ink); cursor: pointer;
  min-width: 62px; transition: background .15s var(--ease);
}
.pager-btn:hover:not(:disabled) { background: var(--color-surface-soft) }
.pager-btn:disabled { background: var(--color-surface-soft); color: var(--disabled); cursor: not-allowed }

/* segmented tabs */
.seg { display: inline-flex; gap: 4px; background: var(--tint-stone); border-radius: var(--radius-md); padding: 4px }
.seg-tab {
  border: 0; border-radius: var(--radius-sm); padding: 8px 16px; font-size: 12px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 500;
  background: transparent; color: var(--nav-idle); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg-tab.active { background: var(--color-ink); color: #fff; font-weight: 700 }

/* ---------- cards ---------- */

.surface-card, .surface-panel, .table-card {
  min-width: 0; background: var(--color-surface); border-radius: var(--radius-md);
}
.surface-card { padding: 24px }
.surface-panel, .table-card { padding: 0 24px }
.surface-card.bordered, .surface-panel.bordered, .table-card.bordered { border: 1px solid var(--color-line) }

.inset-well { background: var(--color-surface-soft); border-radius: var(--radius-md); padding: 16px }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px }
.card-foot { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-muted) }
.card-divider { height: 1px; background: var(--color-line); margin: 20px 0 }

/* info card: threshold, minimum payout, single-value docs blocks */
.info-card { border: 1px solid var(--color-line) }
.info-card .ui-label { display: block; margin-bottom: 16px }
.info-card .label-row { margin-bottom: 16px }
.info-card .label-row .ui-label { margin-bottom: 0 }
.info-value {
  font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.info-copy { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-muted) }
.info-copy b { color: var(--color-ink); font-weight: 700 }

/* metric cards: label and its numbering tick share one row, the figure sits
   under a generous gap, and the first cell of a strip carries the key figure
   in amber. */
.metric-card { padding: 26px 24px 28px }
.metric-card .label-row { margin-bottom: 26px }
.metric-card .metric-value { display: inline-flex; align-items: baseline; gap: 8px }
.metric-card .metric-value { font-size: clamp(34px, 3vw, 44px) }
.stat-grid > .metric-card:first-child .metric-value { color: var(--color-accent-deep) }
.portfolio-metric-card .metric-value { font-size: clamp(32px, 2.8vw, 38px) }
.portfolio-metric-card .metric-pct { font-size: 24px; font-weight: 500; letter-spacing: -.02em }

/* ---------- pills, chips, badges ---------- */

.muted-pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-sm);
  padding: 8px 12px; background: var(--color-surface-soft); color: var(--color-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--tint-stone);
  border-radius: 5px; padding: 3px 7px; font-size: 11px; color: var(--color-ink); line-height: 1.3;
}
.chip-lg { border-radius: var(--radius-sm); padding: 5px 10px; letter-spacing: .06em; font-weight: 700; text-transform: uppercase }
.chip-outline { background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-muted) }
.chip-ok { background: var(--ok-bg); color: var(--ok-fg) }
.chip-warn { background: var(--warn-bg); color: var(--warn-fg) }
.chip-err { background: var(--err-bg); color: var(--err-fg) }
.chip-strip { display: flex; flex-wrap: wrap; gap: 8px }

.token-badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--color-surface);
  border-radius: var(--radius-md); padding: 8px 14px;
}
.token-badge img { width: 18px; height: 18px; border-radius: 999px }
.token-badge b { font-size: 14px; font-weight: 700 }
.stock-token-badge {
  flex: 0 0 132px; border: 1px solid var(--color-line); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.stock-token-badge:hover { border-color: var(--line-strong); background: var(--color-surface-warm) }
.stock-token-badge:active { transform: translateY(1px) }

/* ---------- tables ---------- */

.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 24px 0; flex-wrap: wrap;
}
.table-head {
  display: grid; gap: 16px; align-items: center;
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  padding: 12px 0; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.table-head span {
  font-size: 11px; letter-spacing: var(--tracking-label); color: var(--color-faint);
  font-weight: 700; text-transform: uppercase;
}
.feed-row {
  display: grid; gap: 16px; align-items: center; padding: 16px 0;
  border-bottom: 1px solid var(--color-line-soft); font-size: 14px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  transition: background .15s var(--ease);
}
.feed-row:hover { background: var(--color-surface-warm) }
.feed-row:last-child { border-bottom: 0 }
.feed-row .num, .feed-row .amount, .feed-row .value { font-variant-numeric: tabular-nums }
.feed-row .go { text-align: right; color: var(--color-faint); text-decoration: none; transition: color .15s var(--ease) }
.feed-row .go:hover { color: var(--color-ink) }
.feed-row .cell-strong { font-weight: 600 }
.feed-row .cell-time { color: var(--color-muted); font-size: 13px }
.feed-scroll { overflow-x: auto }

/* column templates - applied to the head and every row of the same table */
.table-head.g-dist-home, .feed-row.g-dist-home { grid-template-columns: 1.1fr 1.9fr .8fr .4fr }
.table-head.g-dist, .feed-row.g-dist { grid-template-columns: 1.1fr 1.7fr .8fr .4fr }
.table-head.g-payouts, .feed-row.g-payouts { grid-template-columns: 1.1fr .7fr 1fr 1fr .4fr }
.table-head.g-buys, .feed-row.g-buys { grid-template-columns: 1.2fr 1fr .4fr }
.table-head.g-address, .feed-row.g-address { grid-template-columns: 1.2fr 1.8fr .3fr }
.table-head.g-basket, .feed-row.g-basket { grid-template-columns: 1.3fr 1fr .9fr .9fr .4fr }
.table-head.g-candidates, .feed-row.g-candidates { grid-template-columns: 1.4fr 1fr 1fr .4fr }
.table-head.g-costs, .feed-row.g-costs { grid-template-columns: 1fr auto }

.table-empty, .empty-state { padding: 40px 0; text-align: center }
.table-empty h4, .empty-state h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px }
.table-empty p, .empty-state p { font-size: 13px; color: var(--color-muted); margin: 0 auto; max-width: 420px; line-height: 1.5 }
.empty-state .chip-strip { justify-content: center; margin-top: 20px }

/* ---------- inputs ---------- */

.search {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 1px solid var(--line-input); border-radius: 9px;
  background: var(--color-surface); color: var(--color-subtle);
  box-shadow: 0 1px rgba(26, 22, 19, .03);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.search:focus-within {
  border-color: var(--color-accent); background: #FFFDF8;
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.search svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-faint) }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--color-ink);
}
.search input::placeholder { color: var(--color-faint) }
.search .search-action { flex: 0 0 auto }

.field-label { display: block; margin-bottom: 8px }
.status-line { margin: 12px 0 0; font-size: 13px; color: var(--color-muted); line-height: 1.5 }
.status-line b { color: var(--color-ink); font-weight: 700 }

/* ---------- home hero ----------
   No gradient slab and no tilted app replica. Straw paper, ink type, a woven
   hatch drawn from the mark's weave, and one physical object on the right:
   the basket sitting inside the threshold dial. The live figures run as a
   ruled rail under the whole thing rather than inside a fake window. */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(44px, 6vw, 84px) var(--section-x) 0;
}
/* the weave: two hatches crossing, faded out from the dial */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(169, 106, 44, .13) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(169, 106, 44, .13) 0 1px, transparent 1px 13px);
  -webkit-mask-image: radial-gradient(120% 95% at 74% 26%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
  mask-image: radial-gradient(120% 95% at 74% 26%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
}
/* the warmth behind the weave */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(720px 520px at 74% 20%, rgba(217, 160, 91, .34), transparent 62%),
    radial-gradient(620px 460px at 2% 98%, rgba(196, 130, 60, .14), transparent 60%);
}

.hero-inner {
  width: min(100%, var(--site-rail)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-bottom: clamp(40px, 5vw, 68px);
}
.hero-copy { max-width: 560px }
.hero-title {
  margin: 20px 0 0; font-size: clamp(44px, 4.9vw, 68px); font-weight: 500;
  line-height: 1.03; letter-spacing: -.025em; color: var(--color-ink);
}
.hero-title em { font-style: normal; color: var(--color-accent-deep) }
.hero-sub { margin: 20px 0 0; max-width: 470px; font-size: 16px; line-height: 1.55; color: var(--color-muted) }
.hero-sub b { color: var(--color-ink); font-weight: 600 }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px }
.hero-note {
  margin: 22px 0 0; font-size: 10px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-faint);
}

/* the dial: threshold progress ringing the mark */
.hero-dial { justify-self: center; width: min(100%, 360px); display: flex; flex-direction: column; align-items: center }
.dial { position: relative; width: min(100%, 320px); aspect-ratio: 1 / 1 }
.dial > svg { width: 100%; height: 100% }
.dial .track { fill: none; stroke: var(--color-line); stroke-width: 9 }
.dial .arc {
  fill: none; stroke: var(--color-accent); stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .6s var(--ease);
}
.dial-mark { position: absolute; inset: 21%; display: grid; place-items: center }
.dial-mark img { width: 100%; height: auto }
.dial-legend { margin-top: 22px; text-align: center }
.dial-legend .figure {
  margin-top: 10px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 500;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--color-accent-deep);
}
.dial-legend .figure span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--color-faint) }
.dial-legend .note { margin: 12px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); max-width: 300px }

/* the live rail: figures ruled across the foot of the hero, no cards */
.hero-rail {
  position: relative; width: min(100%, var(--site-rail)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.hero-rail-cell {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 24px 22px 30px; border-right: 1px solid var(--color-line);
}
.hero-rail-cell:first-child { padding-left: 0 }
.hero-rail-cell:last-child { padding-right: 0; border-right: 0 }
.hero-rail-cell b {
  font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.hero-rail-cell b.accent { color: var(--color-accent-deep) }
.hero-rail-cell .value-row { display: flex; align-items: center; gap: 10px }
.hero-rail-cell .value-row .cd-ring { width: 22px; height: 22px }
.hero-rail-cell small { font-size: 12px; line-height: 1.45; color: var(--color-muted) }

.hero-stock-logo { width: 20px; height: 20px; border-radius: 999px; background: var(--color-surface-soft) }
.hero-stock-logo-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--tint-stone); color: var(--color-subtle);
  font-size: 9px; font-weight: 700;
}

/* ---------- inner page hero ---------- */

.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(40px, 5vw, 68px) var(--section-x) clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--color-line);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(169, 106, 44, .12) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(169, 106, 44, .12) 0 1px, transparent 1px 13px);
  -webkit-mask-image: linear-gradient(255deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(255deg, #000 0%, transparent 58%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(760px 320px at 92% 0%, rgba(217, 160, 91, .28), transparent 64%);
}
.page-hero h1 {
  margin: 18px 0 0; font-size: clamp(38px, 4vw, 56px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.025em; color: var(--color-ink);
}
.page-hero .lede { color: var(--color-muted) }
.page-hero .search { max-width: 520px; margin-top: 28px }

/* ---------- cycle band ----------
   Split by a hairline rather than a gap, so the threshold reads as one
   instrument: state and figure on the left, the bar and its legend right. */

.cycle-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
  gap: 0; align-items: stretch; padding: 0; border: 1px solid var(--color-line);
}
.cycle-band > * { padding: 26px 28px }
.cycle-band > * + * { border-left: 1px solid var(--color-line); display: flex; flex-direction: column; justify-content: center }
.cycle-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.cycle-copy { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--color-muted); max-width: 520px }
.cycle-figures { display: flex; align-items: baseline; gap: 10px; margin-top: 18px }
.cycle-figures .now {
  font-size: clamp(28px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--color-accent-deep);
}
.cycle-figures .of { font-size: 13px; color: var(--color-faint); font-variant-numeric: tabular-nums }

.progress { height: 8px; border-radius: 999px; background: var(--tint-stone); overflow: hidden }
.progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent-deep));
  transition: width .35s ease;
}
.progress-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap }
.progress-legend .num { color: var(--color-ink) }
.cycle-cadence {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-accent-deep);
}
.cycle-cadence::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--color-accent) }

/* ---------- stocks ---------- */

.stock-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 20px;
  text-decoration: none; color: inherit;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.stock-card:hover { background: var(--color-surface-warm); border-color: var(--line-strong) }
a.stock-card:hover { border-color: var(--color-accent) }
.stock-logo { width: 36px; height: 36px; border-radius: 999px; background: var(--color-surface-soft); object-fit: cover }
.stock-sym { font-size: 15px; font-weight: 700; letter-spacing: .02em }
.stock-name { font-size: 12px; color: var(--color-muted); line-height: 1.4; overflow-wrap: anywhere }
.stock-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-line-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.stock-price { font-size: 15px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums }

/* the wallet's per-stock list on #/portfolio */
.stock-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft);
}
.stock-row:last-child { border-bottom: 0 }
.stock-row img { width: 32px; height: 32px; border-radius: 999px; background: var(--color-surface-soft) }
.stock-row .id b { display: block; font-size: 13px; font-weight: 700 }
.stock-row .id span { display: block; font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere }
.stock-row .bal { text-align: right }
.stock-row .bal b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.stock-row .bal span { display: block; font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums }

/* the wallet's UNPAID accrual on #/portfolio. A share below the payout floor
   is held for the wallet that earned it, so each row carries a meter showing
   how close that stock is to clearing its floor. */
.pending-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.pending-total-value {
  font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--color-accent-deep);
}
.pending-total-unit {
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-faint);
}
.pending-copy { margin: 14px 0 4px; font-size: 13px; line-height: 1.55; color: var(--color-muted) }
.pending-copy b { color: var(--color-ink); font-weight: 700 }
.pending-row { row-gap: 10px; padding: 14px 0 }
.pending-row .meter { grid-column: 1 / -1 }
.pending-row .progress { display: block; height: 6px }
.pending-row .progress-fill { display: block }
.pending-row .meter-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 6px; font-size: 11px; color: var(--color-faint); font-variant-numeric: tabular-nums;
}

/* ---------- charts ---------- */

.dashboard-chart-card { display: flex; flex-direction: column; gap: 16px; min-height: 260px; border: 1px solid var(--color-line) }
.dashboard-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.dashboard-chart-head .label-row { flex: 1 1 100%; align-items: baseline }
.chart-headline { font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums }
.chart-unit { font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-faint) }
.chart-plot { flex: 1; display: flex; align-items: flex-end; gap: 3px; min-height: 110px }
.chart-bar { flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0; background: var(--color-ink) }
/* the newest bar is the live one */
.chart-bar:last-child { background: var(--color-accent) }
.chart-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--color-line-soft);
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-faint);
}
.chart-empty {
  flex: 1; min-height: 110px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--color-surface-soft) 0 8px, var(--color-surface) 8px 16px);
}

/* ---------- docs ---------- */

.process-card { display: flex; flex-direction: column; gap: 12px; min-height: 200px; border: 1px solid var(--color-line) }
.process-num {
  font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1;
  color: var(--num-grey); padding-bottom: 12px; border-bottom: 2px solid var(--color-accent);
  align-self: flex-start;
}
.process-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em }
.process-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-muted) }
.process-card .muted-pill { margin-top: auto; align-self: flex-start }

.docs-table { display: block }
.docs-fee-head, .docs-fee-row { display: grid; grid-template-columns: .8fr 1.3fr 1.3fr; gap: 16px; align-items: start }
.docs-fee-head {
  padding: 12px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
}
.docs-fee-head span {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-faint);
}
.docs-fee-row { padding: 16px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px; line-height: 1.5 }
.docs-fee-row .point { font-weight: 700 }
.docs-fee-row .old { color: var(--color-muted) }
.docs-fee-row.highlight {
  background: var(--ok-bg); border-bottom-color: transparent;
  padding-inline: 12px; margin-inline: -12px; border-radius: var(--radius-sm);
}
.docs-note { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-muted) }
.docs-callout {
  border-left: 2px solid var(--color-accent); padding: 4px 0 4px 20px;
  font-size: 14px; line-height: 1.6; color: var(--color-muted); max-width: 720px;
}
.docs-callout b { color: var(--color-ink); font-weight: 600 }

.address-row {
  display: grid; grid-template-columns: 1.2fr 1.8fr .3fr; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px;
  transition: background .15s var(--ease);
}
.address-row:hover { background: var(--color-surface-warm) }
.address-row:last-child { border-bottom: 0 }
.address-row .name { font-weight: 600 }
.address-row .go { text-align: right; color: var(--color-faint); text-decoration: none }
.address-row .go:hover { color: var(--color-ink) }

.cost-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px;
}
.cost-row:last-child { border-bottom: 0 }
.cost-row .val { font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums }

.risk-card { border-color: var(--color-line) }
.risk-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px }
.risk-card .label-row { align-items: baseline; margin-bottom: 10px }
.risk-card .label-row h3 { margin-bottom: 0 }
.risk-card p { margin: 0; max-width: none; font-size: 13px; line-height: 1.5; color: var(--color-muted) }

/* ---------- accordion ---------- */

.faq { border-top: 1px solid var(--color-line) }
.faq-item { border-bottom: 1px solid var(--color-line) }
.faq-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 64px; padding: 12px 0; border: 0; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-ink);
  text-align: left; cursor: pointer; transition: background .15s var(--ease);
}
.faq-trigger:hover { background: var(--color-surface-warm) }
.faq-trigger:focus-visible { outline-offset: -2px }
.faq-chevron { flex: 0 0 auto; width: 14px; height: 14px; color: var(--color-faint); transition: transform .2s ease }
.faq-item[data-state="open"] .faq-chevron,
.faq-trigger[data-state="open"] .faq-chevron,
.faq-trigger[aria-expanded="true"] .faq-chevron { transform: rotate(180deg) }

.faq-panel { overflow: hidden }
.faq-panel[data-state="closed"] { display: none }
.faq-panel[data-state="open"] { animation: faqDown .2s ease }
.faq-panel[data-state="closing"] { animation: faqUp .2s ease }
.faq-panel p { margin: 0 0 20px; max-width: 720px; font-size: 13px; line-height: 1.6; color: var(--color-muted) }

@keyframes faqDown { from { height: 0 } to { height: var(--acc-h) } }
@keyframes faqUp { from { height: var(--acc-h) } to { height: 0 } }

/* ---------- legal ---------- */

.legal-body { max-width: var(--readable-rail) }
.legal-list { list-style: none; margin: 0; padding: 0; counter-reset: legal }
.legal-list > li { padding: 28px 0; border-bottom: 1px solid var(--color-line) }
.legal-list > li:last-child { border-bottom: 0 }
.legal-list h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px }
.legal-list h3 { font-size: 14px; font-weight: 600; margin: 20px 0 8px }
.legal-copy { margin: 0 0 12px; max-width: none; font-size: 13px; line-height: 1.6; color: var(--color-muted) }
.legal-list li.legal-copy { margin: 0 }
.legal-sub { margin: 18px 0 0; font-size: 13px; letter-spacing: .02em; color: var(--color-muted) }
.disclaimer { max-width: 720px; margin: 0 auto; font-size: 11px; line-height: 1.6; color: var(--color-muted); text-align: center }

/* ---------- brand assets (#/assets) ----------
   A download card is a preview well over a ruled body. The well is the soft
   surface rather than white, so a transparent PNG and a full-bleed graphic
   both read against it, and nothing here carries a shadow. */

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-grid) }
.asset-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--color-line) }
.asset-preview {
  height: 196px; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-line);
}
.asset-preview img { display: block; max-width: 100%; max-height: 100% }
/* The wide graphics run flat near-white to their own edges, lighter than the
   well behind them, so they carry a hairline to hold their frame. */
.asset-wide img { width: auto; height: auto; border: 1px solid var(--color-line) }
.asset-square img { height: 148px; width: auto }
.asset-icon img { height: 88px; width: 88px; border-radius: 20px }

.asset-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px }
.asset-name { margin: 12px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--color-ink) }
.asset-copy { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--color-muted) }
.asset-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 20px;
}
.asset-dims { font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: .01em; color: var(--color-subtle) }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap-grid) }
.swatch {
  display: flex; flex-direction: column; padding: 14px;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.swatch-chip { display: block; height: 58px; margin-bottom: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-sm) }
.swatch-hex { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--color-ink) }
.swatch-name { margin-top: 2px; font-size: 12px; color: var(--color-muted) }
.swatch-role {
  margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-faint);
}

@media (max-width: 560px) {
  .asset-grid { grid-template-columns: 1fr }
  .asset-preview { height: 168px }
  .asset-foot { flex-direction: column; align-items: flex-start; gap: 14px }
}

/* ---------- footer ---------- */

.site-footer { padding: 0 var(--section-x) 48px }
.footer-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-accent);
}
.footer-tagline { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--color-ink) }
.footer-note { margin: 24px auto 0; max-width: 720px; font-size: 11px; line-height: 1.6; color: var(--color-muted); text-align: center }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; flex-wrap: wrap }
.footer-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-faint); text-decoration: none;
  transition: color .15s var(--ease);
}
.footer-links a:hover { color: var(--color-accent-deep) }
.footer-links svg { width: 12px; height: 12px }
.pad-top-8 { padding-top: 8px }
.pad-top-24 { padding-top: 24px }
.pad-top-48 { padding-top: 48px }
.pad-top-96 { padding-top: 96px }

/* ---------- modals and dropdowns ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center;
  justify-content: center; padding: 28px 12px; background: rgba(26, 22, 19, .30);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal-sheet {
  width: min(100%, 460px); max-height: 100%; overflow: auto;
  border: 1px solid var(--color-line); border-radius: 12px;
  background: var(--color-surface); box-shadow: 0 24px 80px rgba(26, 22, 19, .18);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--color-line);
}
.modal-body { padding: 20px 24px }
.dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; z-index: 60;
  border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 10px;
  background: var(--color-surface); box-shadow: 0 8px 24px rgba(26, 22, 19, .10);
}

/* ---------- motion ---------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease) }
.reveal.in { opacity: 1; transform: none }
.spin { animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.pulse { animation: pulse 1.6s var(--ease) infinite }
@keyframes pulse { 50% { opacity: .5 } }

/* ---------- breakpoints ---------- */

@media (max-width: 1080px) {
  .topnav { gap: 18px; padding-left: 18px }
  .topnav a { font-size: 11px; letter-spacing: .08em }
  .hero-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero-rail-cell:nth-child(2) { padding-right: 0; border-right: 0 }
  .hero-rail-cell:nth-child(3) { padding-left: 0; border-top: 1px solid var(--color-line) }
  .hero-rail-cell:nth-child(4) { border-top: 1px solid var(--color-line) }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px }
  .hero-copy { max-width: none }
  .hero-title { font-size: clamp(40px, 11vw, 58px); letter-spacing: -.015em }
  .hero-dial { justify-self: start; width: min(100%, 320px) }
  .pf-body, .dist-body, .process-grid, .risk-grid, .stock-grid { grid-template-columns: 1fr }
  .cycle-band { grid-template-columns: 1fr }
  .cycle-band > * + * { border-left: 0; border-top: 1px solid var(--color-line) }
  .docs-fee-head, .docs-fee-row, .address-row { grid-template-columns: 1fr }
  .docs-fee-head { display: none }
  .address-row .go { text-align: left }
  .feed-row, .table-head { min-width: 640px }          /* inside .feed-scroll{overflow-x:auto} */
  .section-head { flex-direction: column; align-items: flex-start }
}

@media (max-width: 760px) {
  .topnav { display: none }
  .nav-toggle { display: inline-flex }
  .countdown-pill { display: none }
  .header-shell { gap: 12px }
  .app-section { padding-block: var(--section-y-tight) }
  .section-title { font-size: clamp(28px, 6vw, 36px) }
  .footer-card { flex-direction: column; align-items: flex-start }
  .cycle-band > * { padding: 22px }
}

@media (max-width: 560px) {
  .panel-sm { width: min(100%, 340px) }
  .hero-title { font-size: clamp(36px, 10.4vw, 46px); line-height: 1.08 }
  .hero-actions { flex-direction: column; align-items: stretch }
  .hero-actions .btn-dark, .hero-actions .btn-ghost, .hero-actions .btn-outline { justify-content: center }
  .hero-rail { grid-template-columns: 1fr }
  .hero-rail-cell { padding: 20px 0; border-right: 0; border-top: 1px solid var(--color-line) }
  .hero-rail-cell:first-child { border-top: 0 }
  .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .surface-card { padding: 20px }
  .metric-card { padding: 22px 20px 24px }
  .surface-panel, .table-card { padding-inline: 16px }
  .metric-value { font-size: clamp(32px, 9vw, 40px) }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .faq-panel[data-state="open"], .faq-panel[data-state="closing"] { animation: none }
  .site-header, .header-shell, .brand-mark { transition: none }
  .reveal { opacity: 1; transform: none; transition: none }
  .progress-fill, .header-rail i, .dial .arc, .cd-ring .arc { transition: none }
  .spin, .pulse { animation: none }
  *, *::before, *::after { scroll-behavior: auto }
}