/* debyko.com — page styles on top of css/tokens.css.
   Values follow the design export one to one; class names say what an element is. */

html, body { margin: 0; background: var(--dk-surface-page); }
/* Components set display: flex/grid, which would beat the UA rule for [hidden]. */
[hidden] { display: none !important; }
a { color: var(--dk-text-accent); text-decoration: none; }
a:hover { opacity: .65; }
main { font-family: var(--dk-font-text); color: var(--dk-text-primary); }
button { font: inherit; }
svg { display: block; }
.icon { display: inline-block; flex: none; }
.spin { animation: dk-spin 1.4s linear infinite; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 26px; }
.wrap--wide { max-width: 1440px; }
.section { border-top: 1px solid var(--dk-border-hairline); padding: 88px 0; }
.section--hero { border-top: 0; padding: 72px 0 64px; }
.section--panel { background: var(--dk-surface-panel); }

.stack { display: flex; flex-direction: column; min-width: 0; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.gap-18 { gap: 18px; } .gap-22 { gap: 22px; } .gap-26 { gap: 26px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.row--baseline { align-items: baseline; }
.spacer { flex: 1; }

.split { display: grid; gap: 48px; }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--6-6, .split--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--end { align-items: end; }
.split--start { align-items: start; }
.split--center { align-items: center; }

/* No measure classes: text runs to the edge of its column, so no block ends short of its neighbour. */

/* ── Type ───────────────────────────────────────────────────────────────── */
.label { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); }
.label--accent { color: var(--dk-text-accent); }
.eyebrow { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dk-text-accent); }
.h1 { font: 700 44px/1.08 var(--dk-font-display); letter-spacing: -.025em; color: var(--dk-text-primary); margin: 0; text-wrap: pretty; }
.h2 { font: 700 30px/1.15 var(--dk-font-display); letter-spacing: -.02em; color: var(--dk-text-primary); margin: 0; text-wrap: pretty; }
.h2--small { font: 600 22px/1.25 var(--dk-font-display); letter-spacing: -.02em; }
.lead { font: 400 17px/1.6 var(--dk-font-text); color: var(--dk-text-secondary); margin: 0; text-wrap: pretty; }
.prose { font: 400 15px/1.65 var(--dk-font-text); color: var(--dk-text-secondary); margin: 0; text-wrap: pretty; }
.prose--sm { font: 400 14px/1.6 var(--dk-font-text); }
.product-name { font: 600 13px/1 var(--dk-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--dk-text-accent); }
.statement { font: 600 17px/1.4 var(--dk-font-display); letter-spacing: -.015em; color: var(--dk-text-primary); margin: 0; padding: 14px 0; border-top: 1px solid var(--dk-border-strong); border-bottom: 1px solid var(--dk-border-strong); }
.meta { font: 400 11px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); }
.meta-xs { font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.mono { font-family: var(--dk-font-mono); }
.num { font-family: var(--dk-font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--dk-text-muted); }
.faint { color: var(--dk-text-faint); }
.accent { color: var(--dk-text-accent); }

/* Ruled lists: one fact per rule. */
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dk-border-hairline); display: flex; flex-direction: column; }
.ruled--grid { display: grid; gap: 0 22px; }
.ruled--min-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ruled--min-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ruled--min-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ruled > li { padding: 9px 0; border-bottom: 1px solid var(--dk-border-hairline); font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); }

.price-line { display: flex; gap: 22px; align-items: baseline; }
.price-line__value { font: 400 15px/1 var(--dk-font-mono); color: var(--dk-text-primary); }
.price-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: baseline; }

/* ── Buttons (DS Button) ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--dk-control-h); padding: 0 14px; border-radius: 0;
  font: 600 var(--dk-text-xs)/1 var(--dk-font-mono); letter-spacing: var(--dk-track-label); text-transform: uppercase;
  cursor: pointer; transition: var(--dk-transition-control);
  background: var(--dk-surface-panel); color: var(--dk-text-primary); border: 1px solid var(--dk-border-hairline);
}
.btn > span { padding-top: 1px; }
.btn { white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--dk-surface-subtle); border-color: var(--dk-border-strong); }
.btn--primary { background: var(--dk-accent); color: var(--dk-accent-fg); border-color: transparent; }
.btn--primary:hover:not(:disabled) { background: var(--dk-accent-strong); border-color: transparent; }
.btn--ghost { background: transparent; color: var(--dk-text-secondary); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--dk-surface-subtle); border-color: transparent; }
.btn--sm { height: var(--dk-control-h-sm); padding: 0 10px; font-size: var(--dk-text-2xs); }
.btn--lg { height: var(--dk-control-h-lg); padding: 0 22px; font-size: var(--dk-text-sm); }
.btn--full { display: flex; width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
a.btn, a.btn:hover { opacity: 1; }

.text-btn { background: none; border: 0; padding: 0 8px; cursor: pointer; font: 600 12px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-accent); }
.text-btn:hover { opacity: .65; }
.text-btn--sm { padding: 0; font-size: 11px; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; font: 400 13px/1.4 var(--dk-font-text); color: var(--dk-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #05070C; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
/* DS StatusChip */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 2px;
  border: 1px solid var(--dk-border-strong); background: transparent; color: var(--dk-text-muted);
  font: 600 var(--dk-text-2xs)/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.status-chip > span { padding-top: 1px; }
.status-chip--sm { height: 17px; padding: 0 5px; font-size: 9px; }
.status-chip--accent { border-color: var(--dk-accent); background: var(--dk-accent-tint); color: var(--dk-text-accent); }

/* Freshness chips: LIVE / DELAYED / STALE / MISSING / UNSUPPORTED */
.fresh { display: inline-flex; align-items: center; gap: 7px; height: 20px; padding: 0 7px; border-radius: 2px; border: 1px solid; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.fresh__value { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }
.fresh--small { gap: 5px; height: 16px; padding: 0 5px; font-size: 9px; letter-spacing: .1em; }
.fresh--small .fresh__value { font-size: 11px; }
.fresh__lbl { font-weight: 400; letter-spacing: 0; color: var(--dk-text-faint); }
.st-live { color: #1F6B3F; border-color: rgba(31,107,63,.45); background: rgba(31,107,63,.08); }
.st-delayed { color: #8A5A00; border-color: rgba(138,90,0,.45); background: rgba(138,90,0,.08); }
.st-stale { color: #9B2C3A; border-color: rgba(155,44,58,.45); background: rgba(155,44,58,.08); }
.st-missing, .st-unsupported { color: var(--dk-text-muted); border-color: var(--dk-border-strong); background: transparent; }
.fg-live { color: #1F6B3F; } .fg-delayed { color: #8A5A00; } .fg-stale { color: #9B2C3A; } .fg-missing { color: var(--dk-text-muted); }

/* Source tag: where the figures on a panel came from */
.source-tag { font: 600 9px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; padding: 4px 6px; white-space: nowrap; }
.source-tag--live { color: #1F6B3F; }
.source-tag--saved { color: #8A5A00; }
.source-tag--none { color: #05070C; }

.tag-box { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #05070C; border: 1px solid #05070C; padding: 4px 6px; }
.dataset-chip { font: 500 9px/1 var(--dk-font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 5px; border-radius: 2px; border: 1px solid var(--dk-border-hairline); color: var(--dk-text-faint); background: transparent; }
.dataset-chip--on { color: var(--dk-text-primary); border-color: var(--dk-border-strong); background: var(--dk-surface-subtle); }
.dataset-chip--more { color: var(--dk-text-muted); border-color: transparent; }
/* BEST / WORST. The slot is always there and always 41px (WORST is 40.4px), so a mark appearing or leaving moves no column. */
.rank-slot { display: inline-block; width: 41px; margin-left: 4px; text-align: left; vertical-align: middle; }
.rank { display: inline-block; font: 600 9px/1 var(--dk-font-mono); letter-spacing: .12em; padding: 2px 3px; border-radius: 2px; border: 1px solid currentColor; }
.rank--best { color: var(--dk-rank-best); background: color-mix(in srgb, var(--dk-rank-best) 10%, transparent); }
.rank--worst { color: var(--dk-rank-worst); background: color-mix(in srgb, var(--dk-rank-worst) 10%, transparent); }

/* ── Form controls (DS Input / Select / SegmentedControl) ───────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: var(--dk-type-label); letter-spacing: var(--dk-track-label); text-transform: uppercase; color: var(--dk-text-faint); }
.field__box { position: relative; display: flex; align-items: center; gap: 8px; height: var(--dk-control-h); padding: 0 10px; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-hairline); border-radius: 0; transition: var(--dk-transition-control); }
.field__box:focus-within { border-color: var(--dk-border-strong); box-shadow: inset 0 -2px 0 0 var(--dk-accent); }
.field__box--lg { height: var(--dk-control-h-lg); }
.field__box--disabled { background: var(--dk-surface-subtle); }
.field__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dk-text-primary); font: 400 var(--dk-text-sm)/1.2 var(--dk-font-text); }
.field__box input.is-mono { font: var(--dk-type-num); font-variant-numeric: tabular-nums; text-align: right; }
.field__unit { font: var(--dk-type-meta); color: var(--dk-text-faint); }
.field__box--select { padding: 0; }
.field__box select { appearance: none; width: 100%; height: 100%; padding: 0 30px 0 10px; border: 0; outline: 0; background: transparent; color: var(--dk-text-primary); font: 400 var(--dk-text-sm)/1 var(--dk-font-mono); cursor: pointer; }
.field__box--select .icon { position: absolute; right: 9px; color: var(--dk-text-faint); pointer-events: none; }
.field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); padding: 8px 10px; font: 400 13px/1.5 var(--dk-font-mono); color: var(--dk-text-primary); resize: vertical; border-radius: 0; }

.segmented { display: inline-flex; gap: 4px; }
.segmented button { white-space: nowrap; height: 26px; padding: 0 8px; border: 1px solid var(--dk-border-hairline); background: transparent; color: var(--dk-text-muted); border-radius: 2px; font: 400 var(--dk-text-xs)/1 var(--dk-font-mono); cursor: pointer; transition: var(--dk-transition-control); }
.segmented button[aria-pressed="true"] { border-color: var(--dk-accent); background: var(--dk-accent-tint); color: var(--dk-text-accent); }
.segmented button:disabled { opacity: .4; cursor: not-allowed; }

/* ── State block (DS StateBlock) ────────────────────────────────────────── */
.state-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px 26px; border: 1px dashed var(--dk-border-hairline); background: var(--dk-surface-inset); }
.state-block .icon { color: var(--dk-text-faint); }
.state-block__title { font: 600 var(--dk-text-md)/1.3 var(--dk-font-display); color: var(--dk-text-secondary); }
.state-block__body { font: var(--dk-type-prose); color: var(--dk-text-faint); }
.state-block--compact { gap: 6px; padding: 18px 14px; }
.state-block--compact .state-block__title { font-size: var(--dk-text-sm); }
.state-block--tall { min-height: 280px; }

/* ── Panels and tables ──────────────────────────────────────────────────── */
.panel { border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); min-width: 0; }
.panel--strong { border-color: var(--dk-border-strong); background: var(--dk-surface-page); }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--dk-border-hairline); background: var(--dk-surface-head); }
.panel__head--roomy { padding: 10px 14px; }
.panel__note { padding: 8px 14px; font: 400 10px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); border-top: 1px solid var(--dk-border-hairline); }
.panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--dk-border-hairline); font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-faint); }
.scroll-x { overflow-x: auto; }

.tbl { border-collapse: collapse; width: 100%; }
.tbl th { padding: 6px 10px; text-align: left; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-faint); border-bottom: 1px solid var(--dk-border-strong); white-space: nowrap; }
.tbl--head-bg th { background: var(--dk-surface-head); padding: 6px 8px; }
.tbl--roomy th { padding: 7px 10px; }
.tbl th:first-child { padding-left: 14px; }
.tbl th:last-child { padding-right: 14px; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.w15 { min-width: 15ch; } .tbl th.w17 { min-width: 17ch; }
.tbl td { padding: 0 10px; border-bottom: 1px solid var(--dk-border-hairline); }
.tbl td:first-child { padding-left: 14px; }
.tbl td:last-child { padding-right: 14px; }
.tbl .td-venue { height: 34px; font: 600 13px/1 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; }
.tbl .td-sym { font: 400 12px/1 var(--dk-font-mono); color: var(--dk-text-muted); white-space: nowrap; }
.tbl .td-num { text-align: right; font: 400 13px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .td-mono { font: 400 12px/1 var(--dk-font-mono); white-space: nowrap; }
/* Long free text (an error message) wraps inside its cell rather than widening the table. */
.tbl .wrap-cell { white-space: normal; line-height: 1.4; padding-top: 6px; padding-bottom: 6px; min-width: 16ch; }
.status-note { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; color: var(--dk-text-muted); }
.tbl .td-cell { padding: 0; text-align: right; }
.tbl .th-accent { color: var(--dk-text-accent); border-bottom: 2px solid var(--dk-accent); }
.min-460 { min-width: 460px; } .min-640 { min-width: 640px; } .min-900 { min-width: 900px; }

/* Figure buttons: every live figure opens its provenance */
.fig { background: none; border: 0; margin: 0; display: block; width: 100%; padding: 6px; cursor: help; text-align: right; font: 400 12px/1.3 var(--dk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dk-text-primary); }
.fig__unit { color: var(--dk-text-faint); font-size: 10px; margin-left: 4px; }
/* Fixed unit widths in characters of the unit's own font, left-aligned, so numbers share a right edge. */
.fig__unit.u3, .arena-table .unit.u3 { display: inline-block; width: 3ch; text-align: left; }
.fig__unit.u5, .arena-table .unit.u5 { display: inline-block; width: 5ch; text-align: left; }
.fig__unit.u7, .arena-table .unit.u7 { display: inline-block; width: 7ch; text-align: left; }
.fig__unit.u9, .arena-table .unit.u9 { display: inline-block; width: 9ch; text-align: left; }
.fig.is-empty { color: var(--dk-text-faint); }
.fig.is-stale { color: var(--dk-fresh-stale); }
.fig--chip { display: flex; justify-content: flex-end; }
.fig--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 5px 6px; font-size: 11px; }
.fig-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 6px; }
.fig-chips button { margin: 0; cursor: help; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 30; background: #F7F7F8; border-bottom: 1px solid var(--dk-border-hairline); }
.site-header__bar { height: 56px; display: flex; align-items: center; gap: 26px; }
.site-header__logo { display: flex; align-items: center; opacity: 1; }
.site-header__logo img { height: 32px; width: auto; display: block; }
/* BlynAI | DEBYKO at one height. Measured from logo-horizontal.svg at 32px: the DEBYKO mark is 27.2px
   tall with its centre 1.1px above the image centre, the letters 13.3px tall with their centre 2.2px
   above. The BlynAI mark (drawn height 61.5% of its box) gets a 44.2px box so it is 27.2px tall, and
   the BlynAI wordmark (cap height 13.3px at 19px) is lifted to the same centre as DEBYKO's letters. */
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand__blynai { display: inline-flex; align-items: center; gap: 4px; color: #05070C; opacity: 1; }
.brand__blynai:hover { opacity: .8; }
.brand__mark { width: 44.2px; height: 44.2px; margin: -6px -8px -6px -8px; transform: translateY(-1.1px); }
.brand__name { font: 600 19px/1 var(--dk-font-display); letter-spacing: .02em; transform: translateY(-2px); }
.brand__name i { font-style: normal; color: var(--dk-text-accent); }
.brand__rule { width: 1px; height: 28px; background: var(--dk-border-strong); }
/* logo-horizontal.svg starts with ~2px of empty canvas before the mark. */
.brand .site-header__logo { margin-left: -2px; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav__item { position: relative; }
.nav__trigger { background: none; border: 0; margin: 0; height: 56px; padding: 0 12px; cursor: pointer; font: 500 13px/1 var(--dk-font-text); color: var(--dk-text-secondary); }
.nav__trigger:hover { color: #05070C; }
.nav__menu { position: absolute; top: 56px; left: 0; min-width: 236px; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-hairline); border-top: 2px solid var(--dk-accent); box-shadow: 0 8px 24px rgba(5,7,12,.12); padding: 8px 0; display: flex; flex-direction: column; }
.nav__menu a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 16px; font: 400 13px/1.3 var(--dk-font-text); color: var(--dk-text-primary); opacity: 1; }
.nav__menu a:hover { background: #F2F2F4; opacity: 1; }
.nav-tag { font: 500 9px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); }
.site-header__actions { display: flex; gap: 8px; align-items: center; flex: none; }
.nav__trigger { white-space: nowrap; }
.menu-btn { display: none; background: none; border: 1px solid var(--dk-border-hairline); height: 32px; padding: 0 12px; cursor: pointer; font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-primary); align-items: center; }
.mobile-nav { border-top: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); padding: 14px 26px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.mobile-nav__group { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav__title { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); padding: 6px 0; }
.mobile-nav__group a { font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); padding: 4px 0; }
.mobile-nav__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ── Principles ─────────────────────────────────────────────────────────── */
.numbered { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dk-border-strong); }
.numbered li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--dk-border-hairline); align-items: baseline; }
.numbered__n { font: 400 12px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.numbered__t { font: 600 17px/1.35 var(--dk-font-display); letter-spacing: -.015em; color: var(--dk-text-primary); text-wrap: pretty; }

.notes-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; font: 400 12px/1.5 var(--dk-font-mono); color: var(--dk-text-muted); }
.notes-3 > div { border-top: 1px solid var(--dk-border-strong); padding-top: 8px; }

/* ── Studio Pro workstation ─────────────────────────────────────────────── */
.workstation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); }
.workstation > .cell { min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--dk-border-hairline); }
.workstation > .cell--left { border-right: 1px solid var(--dk-border-hairline); }
.cell__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.hours { display: flex; flex-direction: column; gap: 5px; }
.hours__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; }
.hours__venue { font: 600 11px/1 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; }
.hours__strip { display: block; width: 100%; height: 20px; overflow: visible; }
.hours__axis { display: flex; justify-content: space-between; font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font: 400 10px/1.5 var(--dk-font-mono); color: var(--dk-text-muted); }
.legend-row > span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; display: inline-block; }
.swatch--observed { background: rgba(5,7,12,.9); }
.swatch--not-observed { border: 1px solid var(--dk-border-strong); }
.swatch--not-collected { border: 1px solid var(--dk-border-hairline); }
.swatch--mark { width: 5px; height: 5px; background: var(--dk-accent); }
.candles { position: relative; }
.candles svg { width: 100%; height: 150px; }
.candles .grid { stroke: #E6E6E9; vector-effect: non-scaling-stroke; }
.candles .wick { stroke: #33383F; vector-effect: non-scaling-stroke; }
.candles .rise, .candles .fall { stroke: #05070C; vector-effect: non-scaling-stroke; }
.candles .rise { fill: #FFFFFF; } .candles .fall { fill: #05070C; }
.chart-flag { position: absolute; top: 6px; font: 600 9px/1.4 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-primary); background: var(--dk-surface-panel); padding: 2px 5px; border: 1px solid var(--dk-border-strong); }
.snippet { margin: 0; padding: 14px; font: 400 11px/1.6 var(--dk-font-mono); color: var(--dk-text-primary); overflow-x: auto; background: var(--dk-surface-inset); flex: 1; }

/* ── Dark concept panels (Studio Trader, Agent) ─────────────────────────── */
.dark-panel { border: 1px solid #1E2430; background: #0E1116; color: #EDEFF3; position: relative; min-width: 0; }
.dark-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #1E2430; background: #161A22; }
.dark-label { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: #9BA6B8; }
.dark-label--sm { font-size: 10px; letter-spacing: .14em; color: #6D7583; }
.dark-tag { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #EDEFF3; border: 1px solid #EDEFF3; padding: 4px 6px; }
.dark-tag--sm { font-size: 9px; padding: 3px 5px; }
.dark-meta { font: 400 10px/1 var(--dk-font-mono); color: #9BA6B8; }
.dark-note { font: 400 11px/1.5 var(--dk-font-mono); color: #6D7583; }
.trader { padding: 26px; display: flex; flex-direction: column; gap: 26px; }
.trader__big { font: 400 40px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; color: #6D7583; letter-spacing: -.01em; }
.trader__big small { font-size: 18px; }
.trader__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trader__quote { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #1E2430; padding-top: 10px; }
.trader__quote .value { font: 400 22px/1 var(--dk-font-mono); color: #6D7583; }

.agent-console { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border: 1px solid #1E2430; background: #0E1116; color: #EDEFF3; }
.agent-console__side { border-right: 1px solid #1E2430; border-bottom: 1px solid #1E2430; display: flex; flex-direction: column; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; padding: 14px; font: 400 12px/1.4 var(--dk-font-mono); border-bottom: 1px solid #1E2430; }
.kv__k { color: #6D7583; font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.params { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; font: 400 12px/1.4 var(--dk-font-mono); }
.params__k { color: #C6CCD8; }
.journal { overflow-x: auto; padding: 8px 0; }
.journal__line { display: grid; grid-template-columns: 150px 92px 84px minmax(0, 1fr); gap: 14px; padding: 5px 14px; font: 400 12px/1.5 var(--dk-font-mono); white-space: nowrap; }
.journal__line--warn { background: rgba(238,47,114,.08); }
.journal__t { color: #9BA6B8; } .journal__id { color: #6D7583; }
.journal__k { color: #9BA6B8; font-weight: 600; letter-spacing: .1em; font-size: 10px; padding-top: 2px; }
.journal__k--decide { color: #EDEFF3; } .journal__k--warn { color: #EE2F72; }
.journal__m { color: #EDEFF3; white-space: normal; }
[data-theme="dark"] .status-chip--accent { color: #EE2F72; }

/* ── Execution evidence, offers, services, pricing ──────────────────────── */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; padding: 14px; border-bottom: 1px solid var(--dk-border-hairline); }
.fact { display: flex; flex-direction: column; gap: 6px; }
.fact__k { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); }
.fact__v { font: 400 13px/1.3 var(--dk-font-mono); }
.method-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; padding: 14px; border-top: 1px solid var(--dk-border-hairline); font: 400 12px/1.55 var(--dk-font-mono); color: var(--dk-text-muted); }
.method-notes b { color: var(--dk-text-primary); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.age-col { background: var(--dk-accent-tint); }

.offer-list { display: flex; flex-direction: column; }
.offer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) 230px 150px; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--dk-border-hairline); align-items: center; }
.offer--head { padding: 0 0 10px; border-bottom-color: var(--dk-border-strong); font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); }
.offer--top { border-bottom: 0; border-top: 1px solid var(--dk-border-hairline); }
.offer__name { font: 600 15px/1.3 var(--dk-font-display); letter-spacing: -.01em; }
.offer__desc { font: 400 13px/1.5 var(--dk-font-text); color: var(--dk-text-secondary); }
.offer__price { font: 400 13px/1.3 var(--dk-font-mono); white-space: nowrap; text-align: right; }
.offer__price--sm { font-size: 12px; line-height: 1.4; }
.pricing-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) 220px; gap: 22px; padding: 14px 0; border-top: 1px solid var(--dk-border-hairline); align-items: center; }
.pricing-row__status { font: 600 10px/1.4 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-muted); }
.rule-end { border-top: 1px solid var(--dk-border-hairline); }

/* ── Compare plans ──────────────────────────────────────────────────────── */
.plans { border-collapse: collapse; width: 100%; min-width: 720px; }
.plans th, .plans td { padding: 12px 14px; border-bottom: 1px solid var(--dk-border-hairline); text-align: center; vertical-align: middle; }
.plans thead th { vertical-align: bottom; border-bottom: 1px solid var(--dk-border-strong); background: var(--dk-surface-head); }
.plans thead th:first-child, .plans tbody th { text-align: left; }
.plans__name { display: block; font: 600 15px/1.3 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.plans__price { display: block; margin-top: 6px; font: 400 15px/1 var(--dk-font-mono); color: var(--dk-text-primary); }
.plans__for { display: block; margin-top: 6px; font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-faint); }
.plans tbody th { font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); }
.plans td { width: 22%; }
.plans .plan-yes { margin: 0 auto; color: var(--dk-text-accent); }
.plans .plan-no { font: 400 13px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.plans tfoot td, .plans tfoot th { border-bottom: 0; }

/* ── Methodology ────────────────────────────────────────────────────────── */
.clock-card { border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-page); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.clocks { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; }
.clock { border: 1px solid var(--dk-border-strong); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clock--dashed { border-style: dashed; }
.clock--age { border-color: var(--dk-accent); background: var(--dk-accent-tint); }
.clock__k { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.clock__v { font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-muted); }
.clocks__arrow { font: 400 14px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; border-top: 1px solid var(--dk-border-strong); }
.method-grid > div { padding: 18px 0; border-bottom: 1px solid var(--dk-border-hairline); display: flex; flex-direction: column; gap: 8px; }
.method-grid__n { font: 400 11px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.method-grid__t { font: 600 15px/1.35 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.method-grid__b { font: 400 13px/1.55 var(--dk-font-text); color: var(--dk-text-secondary); text-wrap: pretty; }

.closing { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--dk-border-strong); padding-top: 22px; }

/* Footer credit: the company and the engine, each with its mark at the cap height of the line. */
.credit { margin: 0; font: 400 12px/1.7 var(--dk-font-text); color: var(--dk-text-muted); }
.credit__brand { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; color: var(--dk-text-primary); white-space: nowrap; opacity: 1; }
a.credit__brand:hover { opacity: .65; }
.credit__brand i { font-style: normal; color: var(--dk-text-accent); }
.credit__mark { display: inline-block; align-self: center; }
.credit__mark--blynai { width: 14px; height: 14px; }
.credit__mark--csx { width: 22.7px; height: 22.7px; margin: -6px -3px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--dk-border-strong); padding: 48px 0 32px; }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__title { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); padding-bottom: 6px; }
.site-footer__col a { font: 400 13px/1.4 var(--dk-font-text); color: var(--dk-text-primary); display: flex; gap: 8px; align-items: baseline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; border-top: 1px solid var(--dk-border-hairline); padding-top: 18px; font: 400 11px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); }

/* ── Live market: slice, full comparison, arena ─────────────────────────── */
.lm-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 14px; border-bottom: 1px solid var(--dk-border-hairline); background: var(--dk-surface-head); }
.lm-controls label.field { min-width: 180px; }
.lm-controls .field__box select { width: auto; }
.lm-source { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.lm-banner { padding: 10px 14px; border-bottom: 1px solid var(--dk-border-hairline); font: 400 13px/1.5 var(--dk-font-text); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lm-chart-area { display: grid; grid-template-columns: minmax(0, 1fr) 232px; border-bottom: 1px solid var(--dk-border-hairline); }
.lm-chart { padding: 14px 14px 10px; min-width: 0; }
.lm-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.lm-chart__plot { position: relative; }
.lm-chart__plot svg { width: 100%; height: 240px; }
.lm-chart__plot .grid { stroke: #E6E6E9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-chart__plot path { fill: none; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lm-chart__ylabels { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; justify-content: space-between; height: 240px; pointer-events: none; }
.lm-chart__ylabels span { font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); background: var(--dk-surface-panel); padding: 1px 3px; align-self: flex-end; }
.lm-chart__x { display: flex; justify-content: space-between; margin-top: 6px; font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.lm-legend { border-left: 1px solid var(--dk-border-hairline); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.lm-legend__item { background: none; border: 0; margin: 0; padding: 5px 0; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.lm-legend__item:hover { background: #F2F2F4; }
.lm-legend__item:disabled { opacity: .55; cursor: default; }
.lm-legend__box { width: 12px; height: 12px; border: 1px solid var(--dk-border-strong); display: inline-flex; flex: none; }
.lm-legend__item[aria-pressed="true"] .lm-legend__box { background: var(--dk-text-primary); }
.lm-legend__venue { font: 600 12px/1 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); flex: 1; }
.unsup-tag { font: 600 9px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-muted); border: 1px solid var(--dk-border-strong); padding: 3px 5px; border-radius: 2px; }

.lm-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.lm-table th { background: var(--dk-surface-head); padding: 6px; text-align: right; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-faint); border-bottom: 1px solid var(--dk-border-strong); white-space: nowrap; }
.lm-table th.l { text-align: left; }
.lm-table .group { padding: 6px 10px; text-align: left; letter-spacing: .18em; color: var(--dk-text-accent); background: var(--dk-surface-subtle); border-bottom: 1px solid var(--dk-border-hairline); border-left: 1px solid var(--dk-border-hairline); }
.lm-table .group--age { color: #FFFFFF; background: var(--dk-accent); }
.lm-table .sticky { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--dk-border-hairline); }
.lm-table td { padding: 0; border-bottom: 1px solid var(--dk-border-hairline); text-align: right; }
.lm-table td.venue { position: sticky; left: 0; z-index: 1; background: var(--dk-surface-panel); padding: 0 10px; height: 34px; line-height: 1.2 !important; border-right: 1px solid var(--dk-border-hairline); font: 600 12px/1 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; text-align: left; }
.lm-table td.venue small { display: block; margin-top: 3px; font: 400 10px/1.3 var(--dk-font-mono); letter-spacing: 0; color: var(--dk-text-muted); }
.fig-pair { display: flex; flex-direction: column; }
.lm-table td.venue .row-status { display: inline-flex; margin-top: 5px; cursor: help; }
.fig-pair .fig { padding: 2px 6px; }
.lm-table td.sym { padding: 0 8px; font: 400 11px/1.3 var(--dk-font-mono); color: var(--dk-text-muted); white-space: nowrap; text-align: left; }
.lm-table td.sym small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-faint); margin-top: 2px; }
.lm-observation { padding: 14px; border-top: 1px solid var(--dk-border-hairline); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lm-observation__text { font: 400 14px/1.5 var(--dk-font-text); color: var(--dk-text-primary); }
.lm-log { border-top: 1px solid var(--dk-border-hairline); }
.lm-log summary { padding: 8px 14px; cursor: pointer; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); list-style: none; }
.lm-log__grid { padding: 0 14px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 3px 18px; font: 400 10px/1.5 var(--dk-font-mono); }
.lm-log__grid .path { color: var(--dk-text-muted); overflow-wrap: anywhere; }

.slice-table td.venue-cell { padding: 4px 10px; height: 34px; font: 600 13px/1.2 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; text-align: left; }
.slice-table td.venue-cell small { display: block; margin-top: 3px; font: 400 10px/1.3 var(--dk-font-mono); letter-spacing: 0; color: var(--dk-text-muted); }
.slice-table td.sym-cell { padding: 0 10px; font: 400 12px/1 var(--dk-font-mono); color: var(--dk-text-muted); white-space: nowrap; text-align: left; }

.arena-table td { height: 40px; }
/* Arena sits in the 7/12 column: tighter cell padding so its six columns fit without scrolling. */
.arena-table th, .arena-table td { padding-left: 6px !important; padding-right: 6px !important; }
.arena-table th:first-child, .arena-table td:first-child { padding-left: 12px !important; }
.arena-table th:last-child, .arena-table td:last-child { padding-right: 12px !important; }
.arena-table .venue-cell { font: 600 13px/1.2 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; }
.arena-table .venue-cell small { display: block; font: 400 10px/1.3 var(--dk-font-mono); color: var(--dk-text-faint); margin-top: 2px; }
.arena-table .td-num { font-size: 13px; line-height: 1.3; }
.arena-table .unit { color: var(--dk-text-faint); font-size: 11px; margin-left: 3px; }
.arena-table .age { font: 400 12px/1.3 var(--dk-font-mono); white-space: nowrap; color: var(--dk-text-secondary); text-align: right; }
.spark-note { font: 400 9px/1 var(--dk-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dk-text-faint); }
.sparkline path { fill: none; stroke: var(--dk-chart-ink-soft); stroke-width: 1; stroke-linejoin: round; }

/* Provenance popover (desktop) and bottom sheet (narrow screens) */
.prov-scrim { position: fixed; inset: 0; background: transparent; border: 0; margin: 0; padding: 0; z-index: 40; cursor: default; }
.prov { position: fixed; width: 380px; z-index: 41; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-hairline); border-top: 2px solid var(--dk-accent); box-shadow: 0 8px 24px rgba(5,7,12,.12); }
.prov--sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 70vh; overflow: auto; border: 0; border-top: 2px solid var(--dk-accent); }
.prov__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--dk-border-hairline); background: var(--dk-surface-head); }
.prov__title { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-accent); }
.prov__close { background: none; border: 0; padding: 0; cursor: pointer; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-muted); }
.prov__lines { padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font: 400 12px/1.45 var(--dk-font-mono); }
.prov__k { font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); padding-top: 3px; white-space: nowrap; }
.prov__v { color: var(--dk-text-primary); overflow-wrap: anywhere; }

/* ── Dialogs (DS Dialog) ────────────────────────────────────────────────── */
.dialog-scrim { position: fixed; inset: 0; z-index: 60; background: var(--dk-scrim); display: flex; align-items: flex-start; justify-content: center; padding: 64px 22px; }
.dialog { width: 520px; max-width: 100%; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-strong); border-top: 2px solid var(--dk-accent); box-shadow: var(--dk-shadow-modal); display: flex; flex-direction: column; }
.dialog--narrow { width: 460px; }
.dialog__head { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--dk-border-hairline); }
.dialog__title { font: var(--dk-type-heading); color: var(--dk-text-primary); min-width: 0; }
.dialog__meta { font: var(--dk-type-meta); color: var(--dk-text-faint); }
.dialog__close { margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--dk-text-muted); cursor: pointer; }
.dialog__close:hover { background: var(--dk-surface-subtle); }
.dialog__body { padding: 18px; font: var(--dk-type-prose); color: var(--dk-text-secondary); display: flex; flex-direction: column; gap: 14px; }
.dialog__body p { margin: 0; font: 400 14px/1.55 var(--dk-font-text); color: var(--dk-text-secondary); }
.dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--dk-border-hairline); background: var(--dk-surface-subtle); }
.fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
/* The header needs about 1,270px for both logos, seven menus and two buttons; below that the menus
   fold into Menu while the buttons stay. */
@media (max-width: 1320px) {
  .nav { display: none !important; }
  .menu-btn { display: inline-flex; }
}

@media (max-width: 960px) {
  .nav, .hide-narrow { display: none !important; }
  .menu-btn { display: inline-flex; }
  .split, .workstation, .agent-console, .site-footer__cols, .lm-chart-area { grid-template-columns: minmax(0, 1fr) !important; }
  .workstation > .cell--left, .agent-console__side { border-right: 0; }
  .lm-legend { border-left: 0; border-top: 1px solid var(--dk-border-hairline); }
  .h1 { font-size: 32px; }
  .section { padding: 56px 0; }
  .offer, .pricing-row { grid-template-columns: minmax(0, 1fr) auto; }
  .offer > .btn, .pricing-row > .btn { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .brand { gap: 10px; }
  .site-header__logo img { height: 26px; }
  .brand__mark { width: 35.9px; height: 35.9px; margin: -5px -6.5px; transform: translateY(-.9px); }
  .brand__name { font-size: 15.4px; transform: translateY(-1.8px); }
  .brand__rule { height: 22px; }
}