/* DEBYKO home — page styles. Needs the colour tokens from handoff/colour-system/palette.html
   (<style id="dk-colour-tokens">: :root + [data-theme="dark"]) and the font tokens in css/tokens.css.
   Every colour here is a --dk-* role token; no raw hex, except the paper-ground roles defined right below. */

/* Paper ground (owner review 2026-10-13): the page is paper, content surfaces are white, hairlines unchanged. No gradients, shadows or texture. */
:root {
  --dk-page: #F6F4EF;                  /* the page ground: warm off-white */
  --dk-surface: #FFFFFF;               /* cards, tables, tiles on the page */
  --dk-surface-page: var(--dk-page);   /* the Chrome header and footer stand on the page too */
  --dk-base: #0052FF;                  /* Base, the chain: the one word "Base" in the H1; not an action, not a status */
}
[data-theme="dark"] {
  --dk-page: #0A0D12;
  --dk-surface: #12161E;
  --dk-surface-page: var(--dk-page);
  --dk-base: #6B9BFF;                  /* #0052FF reads 2.9:1 on night; this tint is the first that passes 4.5:1 */
}

.h-wrap { width: 100%; max-width: var(--dk-container); margin: 0 auto; padding-inline: var(--dk-page-pad); box-sizing: border-box; }
.h-sec { border-bottom: 1px solid var(--dk-line); }
.h-sec__in { padding-block: 88px; display: flex; flex-direction: column; gap: 40px; }
.h-h2 { margin: 0; font: 700 clamp(28px, 3.2vw, 40px)/1.1 var(--dk-font-display); letter-spacing: -.02em; text-wrap: balance; color: var(--dk-ink); }
.h-h3 { margin: 0; font: 700 22px/1.2 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-ink); }
.h-text { margin: 0; color: var(--dk-ink-muted); text-wrap: pretty; }
.h-label { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dk-ink-muted); }
.h-more { font-weight: 600; font-size: 14px; color: var(--dk-action-ink); }
.h-sep { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--dk-ink-muted); }

/* buttons: magenta = action only */
.h-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; font: 600 12px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; }
.h-btn--primary { background: var(--dk-action); color: var(--dk-action-on); }
.h-btn--primary:hover { background: var(--dk-action-hover); color: var(--dk-action-on); text-decoration: none; }
.h-btn--secondary { border-color: var(--dk-line-strong); color: var(--dk-ink); background: transparent; }
.h-btn--secondary:hover { border-color: var(--dk-action); color: var(--dk-ink); text-decoration: none; }
.h-btn--sm { height: 32px; padding: 0 14px; font-size: 11px; cursor: pointer; }

/* 1 · hero — split: text left, live card right */
.h-hero__in { padding-block: 52px 56px; display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.h-hero__text { flex: 1.1 1 460px; min-width: 0; display: flex; flex-wrap: wrap; gap: 22px 48px; align-items: flex-end; }
.h-hero__head, .h-hero__rest { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; }
.h-hero__head { gap: 18px; }
.h-hero__rest { gap: 22px; }
.h-hero__card { flex: 1 1 500px; min-width: 0; }
.h-h1 { margin: 0; font: 700 clamp(34px, 3.5vw, 54px)/1.06 var(--dk-font-display); letter-spacing: -.025em; text-wrap: balance; color: var(--dk-ink); }
.h-h1__seal { color: var(--dk-seal); }           /* seal slate: the line about the daily seal */
.h-h1__muted { color: var(--dk-ink-muted); }     /* the muted part of the Arena mini-hero headline: muted ink, no colour */
.h-base { color: var(--dk-base); }
.h-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--dk-ink-muted); text-wrap: pretty; }
.h-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.h-note { margin: 0; font-size: 13px; color: var(--dk-ink-muted); }

/* live card */
.h-card { border: 1px solid var(--dk-line); background: var(--dk-surface); }
.h-card__top { padding: 18px 20px 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.h-card__title { margin: 0; font: 700 18px/1.2 var(--dk-font-display); letter-spacing: -.01em; }
.h-card__served { font: 400 11px/1 var(--dk-font-mono); color: var(--dk-ink-muted); }
.h-tabs { display: flex; gap: 22px; padding: 14px 20px 0; border-bottom: 1px solid var(--dk-line); }
.h-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 0 10px; cursor: pointer; font: 500 13px/1 var(--dk-font-text); color: var(--dk-ink-muted); }
.h-tab:hover { color: var(--dk-ink); }
.h-tab[aria-selected="true"] { border-bottom-color: var(--dk-action); color: var(--dk-action-ink); font-weight: 600; }
.h-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 6px; }
.h-pill { height: 28px; padding: 0 12px; border: 1px solid var(--dk-line-strong); background: transparent; color: var(--dk-ink); cursor: pointer; font: 500 11px/1 var(--dk-font-mono); letter-spacing: .04em; }
.h-pill:hover { border-color: var(--dk-action); }
.h-pill[aria-pressed="true"] { background: var(--dk-action); border-color: var(--dk-action); color: var(--dk-action-on); font-weight: 600; }
.h-rows { padding: 6px 20px 10px; display: flex; flex-direction: column; }
.h-row { display: grid; grid-template-columns: minmax(0, 118px) minmax(36px, 1fr) 76px 112px; gap: 10px; align-items: center; min-height: 25px; border-bottom: 1px solid var(--dk-line); }
.h-row__venue { display: flex; align-items: center; gap: 7px; min-width: 0; font: 500 11px/1 var(--dk-font-mono); }
.h-row__venue span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-sw { flex: none; width: 8px; height: 8px; background: var(--sw, var(--dk-venue-other)); }   /* venue colour via --sw */
.h-track { position: relative; height: 10px; }
.h-bar { position: absolute; top: 0; bottom: 0; background: var(--sw, var(--dk-venue-other)); }
.h-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--dk-ink-muted); }
.h-val { font: 500 12px/1 var(--dk-font-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-row__chip { display: flex; justify-content: flex-end; }
.h-range { padding: 4px 20px 0; font: 500 12px/1.4 var(--dk-font-mono); }
.h-card__foot { padding: 12px 20px 18px; }

/* status chip — colour + shape + word */
.dk-chip { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .06em; white-space: nowrap; border: 1px solid; }
.dk-chip::before { content: ""; flex: none; }
.dk-chip--present { color: var(--dk-status-present); border-color: var(--dk-status-present); background: var(--dk-status-present-tint); }
.dk-chip--present::before { width: 6px; height: 6px; border-radius: 50%; background: var(--dk-status-present); }
.dk-chip--stale, .dk-chip--cap { color: var(--dk-status-stale); border-color: var(--dk-status-stale); background: var(--dk-status-stale-tint); }
.dk-chip--stale::before, .dk-chip--cap::before { width: 4px; height: 4px; border-radius: 50%; border: 1px solid var(--dk-status-stale); }
.dk-chip--absent { color: var(--dk-status-absent); border: 1px dashed var(--dk-status-absent); background: transparent; }
.dk-chip--absent::before { width: 6px; height: 1px; background: var(--dk-status-absent); }

/* 2 · proof strip */
/* The strip stands on the page. Codes are centred across the container, their size by the venue's order-book depth within 10 bps (data-step, four steps, 11 to 13.5 px);
   the status count and "Coverage →" are centred on a line of their own beneath them.
   The four numbers are white tiles in four equal columns (the .h-plans pattern), "Anchors →" inside the fourth. */
.h-proof { background: transparent; border-bottom: 1px solid var(--dk-line); }
.h-proof__in { padding-block: 22px; display: flex; flex-direction: column; gap: 18px; }
.h-codes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; align-items: baseline; font: 500 11px/1.6 var(--dk-font-mono); }
.h-codes [data-live="codes"] { flex: 0 0 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; }
/* Each code is the venue's card with the venue's swatch (the live card's colour, square: round marks mean status). Ink at rest, action ink on hover.
   A venue that is not live keeps its place: muted ink, hollow swatch, the state in `title`. */
.h-codes .h-code { display: inline-flex; align-items: center; gap: 6px; font: inherit; overflow: visible; color: var(--dk-ink); white-space: nowrap; text-decoration: none; }
.h-codes .h-code:hover { color: var(--dk-action-ink); opacity: 1; }
.h-codes .h-code .h-sw { width: 7px; height: 7px; }
/* The steps of VenueDepth.SizesPx (a test holds the two together); a venue that is not live, or has no depth, has none: 11 px. */
.h-codes .h-code[data-step="1"] { font-size: 11.9px; }
.h-codes .h-code[data-step="2"] { font-size: 12.7px; }
.h-codes .h-code[data-step="3"] { font-size: 13.5px; }
.h-codes .h-code[data-status] { color: var(--dk-ink-muted); }
.h-codes .h-code[data-status] .h-sw { background: transparent !important; box-shadow: inset 0 0 0 1px var(--dk-status-stale); }
.h-codes__note { flex: 0 0 100%; text-align: center; color: var(--dk-ink-muted); font: 400 11px/1.6 var(--dk-font-mono); }
.h-codes__status { flex: none; white-space: nowrap; color: var(--dk-ink-muted); }
.h-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); }
.h-num { display: flex; flex-direction: column; gap: 8px; background: var(--dk-surface); padding: 16px 18px 18px; }
.h-num .h-more { margin-top: 2px; }
@media (max-width: 760px) { .h-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-num dt { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-ink-muted); }
.h-num dd { margin: 0; font: 600 22px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; }
.h-num__split { display: block; margin-top: 6px; font: 400 12px/1 var(--dk-font-mono); color: var(--dk-ink-muted); letter-spacing: 0; }
.h-num__to { margin: 0 .35em; font: 400 13px/1 var(--dk-font-text); color: var(--dk-ink-muted); letter-spacing: 0; }
.h-num--seal dt, .h-num--seal dd { color: var(--dk-seal); }

/* 3 · mechanism */
.h-mech { font: 500 13px/1 var(--dk-font-mono); color: var(--dk-ink-muted); }
.h-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--dk-ink); }
.h-three > div { padding: 22px 28px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.h-label--seal { color: var(--dk-seal); }

/* 4 · ways to use */
/* Studio · AI assistants · API in one row; Agent full width under them; one column under 1180px. */
.h-four { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); }
.h-four > div { background: var(--dk-surface); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.h-four .h-more { margin-top: auto; }
.h-four > #agent { grid-column: 1 / -1; }
@media (max-width: 1180px) { .h-four { grid-template-columns: minmax(0, 1fr); } }
.h-box { background: var(--dk-raised); border: 1px solid var(--dk-line); padding: 18px; }
.h-box--prompt { display: flex; flex-direction: column; gap: 14px; font: 400 14px/1.55 var(--dk-font-mono); }
/* API request: wraps inside its block instead of running out of frame. */
.h-code { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.7 var(--dk-font-mono); color: var(--dk-ink); }
.h-mini { border: 1px solid var(--dk-line); font: 400 12px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; }
.h-mini > div { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1fr; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--dk-line); align-items: center; }
.h-mini > div:first-child { border-top: 0; background: var(--dk-raised); color: var(--dk-ink-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; align-items: center; }
.h-mini > div > span:not(:first-child) { text-align: right; }
/* The head's instrument label is the hero's pill: the same object, outlined, not a control (no hover, no pointer). */
.h-mini .h-pill { display: inline-flex; align-items: center; cursor: default; text-transform: none; }
.h-mini .h-pill:hover { border-color: var(--dk-line-strong); }
.h-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dk-line); }
.h-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dk-line); }
.h-steps li > span { font: 600 12px/1.5 var(--dk-font-mono); color: var(--dk-ink-muted); }
.h-steps code { font: 400 13px/1.5 var(--dk-font-mono); background: var(--dk-raised); padding: 6px 10px; display: inline-block; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Agent: its three steps lie left to right under the list's top hairline; under 760px they stack again with their rules. */
#agent .h-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
#agent .h-steps li { padding: 14px 0 0; border-bottom: 0; }
@media (max-width: 760px) {
  #agent .h-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #agent .h-steps li { padding: 12px 0; border-bottom: 1px solid var(--dk-line); }
}

/* 5 · pricing */
.h-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); }
.h-plan { background: var(--dk-surface); padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.h-plan__price { font: 700 34px/1 var(--dk-font-display); letter-spacing: -.02em; }
.h-plan__per, .h-plan__who { font-size: 13px; color: var(--dk-ink-muted); }
.h-plan ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dk-line); }
.h-plan li { padding: 9px 0; border-bottom: 1px solid var(--dk-line); font-size: 14px; }
.h-plan .h-btn { height: 40px; padding: 0 10px; font-size: 11px; letter-spacing: .1em; white-space: nowrap; margin-top: auto; text-align: center; }
.h-plan details { border-top: 1px solid var(--dk-line); padding-top: 10px; }
.h-plan summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font: 600 11px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-ink-muted); }
.h-plan dl { margin: 10px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: 12px; }
.h-plan dt { color: var(--dk-ink-muted); }
.h-plan dd { margin: 0; text-align: right; font-family: var(--dk-font-mono); font-variant-numeric: tabular-nums; }

/* 6 · FAQ */
.h-faq__in { padding-block: 88px; display: flex; flex-wrap: wrap; gap: 32px 64px; }
.h-faq__in > .h-h2 { flex: 1 1 280px; }
.h-faq__list { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--dk-ink); }
.h-faq__list details { border-bottom: 1px solid var(--dk-line); padding: 18px 0; }
.h-faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font: 600 17px/1.35 var(--dk-font-text); }
.h-faq__list p { margin: 12px 0 0; color: var(--dk-ink-muted); }
summary::-webkit-details-marker { display: none; }
.h-plus { flex: none; font: 400 20px/1 var(--dk-font-mono); color: var(--dk-ink-muted); transition: transform .15s; }
details[open] .h-plus { transform: rotate(45deg); }

/* 7 · closing */
.h-close__in { padding-block: 96px 112px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.h-close__in .h-h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.025em; }

/* The page stands on paper (owner review 2026-10-13). */
html, body { background: var(--dk-page); }
/* "Coverage →" matches "Anchors →": the link font, not the strip's mono. */
.h-codes .h-more { font: 600 14px/1.4 var(--dk-font-text); letter-spacing: 0; }
/* Details "+" in a plan card at the size of its label (the FAQ keeps the larger one). */
.h-plan .h-plus { font-size: 13px; }
/* Each H1 line is one phrase: it never breaks inside on a desktop width (owner review 2026-10-12). */
.h-h1__line { display: block; }
@media (min-width: 900px) { .h-h1__line { white-space: nowrap; } }
/* Plans (owner 2026-10-12): one line above the cards; the recommended card is marked by a heavier edge and a label, not by colour; its button is the primary action. */
.h-plans__all { margin: -16px 0 0; color: var(--dk-ink-muted); font-size: 15px; }
.h-plan--featured { position: relative; box-shadow: inset 0 0 0 2px var(--dk-ink); }
.h-plan__badge { align-self: flex-start; padding: 4px 8px; border: 1px solid var(--dk-ink); font: 600 10px/1 var(--dk-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dk-ink); }
/* The badge takes no row: it sits on the top edge, so the four rows stay level with the other cards. */
.h-plan--featured .h-plan__badge { position: absolute; top: -10px; left: 22px; background: var(--dk-surface); }

/* 1b · Arena block: the hero's two columns and type scale. The card lists the five best by P&L over 30 days; percent only, ink only. */
.h-arena { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--dk-line); }
.h-arena__title { margin: 0; font: 600 clamp(22px, 2vw, 30px)/1.15 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-ink); }
.h-arena__lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dk-ink-muted); text-wrap: pretty; }
.h-arena .h-card { margin-top: 8px; }
.h-arow { display: grid; grid-template-columns: minmax(0, 1.4fr) 104px 96px 104px 100px; gap: 12px; align-items: center; min-height: 36px; padding: 0 20px; border-bottom: 1px solid var(--dk-line); font: 500 12px/1.3 var(--dk-font-mono); font-variant-numeric: tabular-nums; }
.h-arena__rows { list-style: none; margin: 0; padding: 0; }
.h-arow--head { min-height: 32px; margin-top: 12px; border-top: 1px solid var(--dk-line); font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-ink-muted); }
.h-arow__h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--dk-ink); text-decoration: none; }
a.h-arow__h:hover { text-decoration: underline; }
.h-arow__s, .h-arow__l { color: var(--dk-ink-muted); white-space: nowrap; }
.h-arow__p { text-align: right; white-space: nowrap; }
.h-arow--head .h-arow__p { text-align: right; }
.h-arow__b { display: flex; justify-content: flex-end; }
li.h-arow .h-arow__b { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .06em; white-space: nowrap; color: var(--dk-ink); }
.h-arena .h-card__foot { border-top: 0; }
@media (max-width: 560px) {
  .h-arow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "h p b" "s l l"; gap: 2px 12px; padding: 8px 20px; }
  .h-arow--head { display: none; }
  .h-arow__h { grid-area: h; } .h-arow__p { grid-area: p; } .h-arow__b { grid-area: b; } .h-arow__s { grid-area: s; } .h-arow__l { grid-area: l; text-align: right; }
}