/* koko-relaunch styles. Owner: pixel. Values come from tokens.css only.
   Ids are behaviour contracts (atlas.md), classes are style contracts: no rule here targets a JS id for layout,
   except where noted for state (#status is styled through .status / .ok / .err only). */
@layer reset, base, components, pages, utilities;

/* ================================================================ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
  ol, ul { padding: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button, input { font: inherit; color: inherit; }
}

/* ================================================================ base */
@layer base {
  [hidden] { display: none !important; }
  html { background: var(--paper); color-scheme: light; }
  body {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--paper); color: var(--ink);
    font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-body);
    font-variant-numeric: tabular-nums;
  }
  main { flex: 1; padding-bottom: var(--s-section); outline: none; }
  h1, h2, h3, summary { text-wrap: balance; }
  p, li, dd, figcaption { text-wrap: pretty; }
  h1 { font-size: var(--t-h1-tool); line-height: var(--lh-tight); font-weight: var(--w-h1); letter-spacing: -0.01em; }
  h2 { font-size: var(--t-h2); line-height: var(--lh-head); font-weight: var(--w-head); letter-spacing: -0.005em; }
  h3 { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: var(--w-strong); }
  b, strong { font-weight: var(--w-strong); }
  small { font-size: var(--t-small); }
  a { color: var(--leaf-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  code { font-family: var(--mono); font-size: var(--t-addr); overflow-wrap: anywhere; }
  :focus-visible { outline: var(--bw-bold) solid var(--focus); outline-offset: 3px; }
  :target, [id] { scroll-margin-top: var(--s-4); }
  ::selection { background: var(--leaf); color: var(--ink); }
}

/* ================================================================ components */
@layer components {
  .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); }
  .mut { color: var(--muted); }
  .sig { font-size: var(--t-lead); font-weight: var(--w-strong); line-height: var(--lh-lead); }

  /* skip link (aegis A1) */
  .skip {
    position: absolute; left: var(--s-2); top: var(--s-2); z-index: 10; transform: translateY(-200%);
    background: var(--surface); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-tag);
    padding: var(--s-2) var(--s-3); font-weight: var(--w-strong); min-height: var(--tap); display: inline-flex; align-items: center;
  }
  .skip:focus, .skip:focus-visible { transform: none; }

  /* 1. guard banner: anti-phishing, 2 lines at 390 */
  .guard {
    background: var(--guard); color: var(--ink); border-bottom: var(--bw-bold) solid var(--ink);
    font-size: var(--t-small); line-height: var(--lh-small); padding-block: 6px;
  }
  .guard b { font-weight: 750; }
  .guard .addr { font-size: var(--t-addr); }
  .guard .addr.unset { font-family: var(--font); font-size: inherit; }

  /* addresses: full, never truncated, wrap anywhere (aegis worst case table) */
  .addr { font-family: var(--mono); font-size: var(--t-addr); overflow-wrap: anywhere; word-break: normal; min-width: 0; }
  .addr.unset { font-family: var(--font); font-size: var(--t-small); }

  /* 2. header */
  header.top .wrap { display: flex; align-items: center; gap: var(--s-1); min-height: 52px; padding-block: var(--s-1); }
  .brand {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
    font-size: var(--t-lead); font-weight: 750; color: var(--ink); text-decoration: none;
  }
  .mark {
    flex: none; display: block; width: 32px; height: 32px; overflow: hidden;
    background: var(--sky); border: var(--bw) solid var(--ink); border-radius: var(--r-avatar);
  }
  .mark picture, .mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
  nav.main { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .social { display: flex; align-items: center; gap: 2px; }
  .social a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tap); min-width: var(--tap); padding: 2px var(--s-2);
    font-size: var(--t-small); font-weight: var(--w-lead); line-height: 1.15; color: var(--ink); text-decoration: none;
    border-radius: var(--r-tag);
  }
  .social svg { flex: none; width: 16px; height: 16px; }
  .social .lt, .social .tt { display: none; }
  .social .x-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  nav.main a {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: var(--tap); min-width: var(--tap); padding: 2px var(--s-2);
    font-size: var(--t-small); font-weight: var(--w-lead); line-height: 1.15; color: var(--ink); text-decoration: none;
    border: var(--bw) solid transparent; border-radius: var(--r-tag);
  }
  nav.main a[aria-current] { background: var(--leaf); border-color: var(--ink); }
  nav.main .later { display: none; font-size: var(--t-small); font-weight: var(--w-body); color: var(--muted); line-height: 1.1; }
  nav.main a[aria-current] .later { color: var(--ink); }
  html[data-stage="soon"] nav.main .later[data-later~="soon"],
  html[data-stage="deposit"] nav.main .later[data-later~="deposit"],
  html[data-stage="closed"] nav.main .later[data-later~="closed"],
  html[data-stage="launched"] nav.main .later[data-later~="launched"] { display: block; }

  /* phase badge */
  .badge {
    display: inline-block; font-size: var(--t-small); font-weight: 600; line-height: var(--lh-small);
    padding: 2px var(--s-2); border: var(--bw) solid var(--ink); border-radius: var(--r-tag); background: var(--surface);
  }
  .badge[data-state="deposit"], .badge[data-state="claim"] { background: var(--leaf); }
  .badge[data-state="closed"], .badge[data-state="launched"] { background: var(--sunk); }

  /* 3. case file + manila field */
  .file-tab {
    position: relative; z-index: 1; display: inline-block; margin-bottom: calc(-1 * var(--bw-bold));
    padding: var(--s-1) var(--s-3) calc(var(--s-1) + var(--bw-bold));
    background: var(--manila); border: var(--bw-bold) solid var(--ink); border-bottom: 0; border-radius: 8px 12px 0 0;
    font-size: var(--t-small); font-weight: var(--w-strong); line-height: var(--lh-small);
  }
  .file-body, .field {
    position: relative; background: var(--manila); border: var(--bw-bold) solid var(--ink);
    border-radius: var(--r-file); box-shadow: var(--sheet); padding: var(--s-4); min-width: 0;
  }
  .file-body { border-top-left-radius: 0; }
  .rows > * + * { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bw-hair) dashed var(--ink); }

  /* 4. stamp */
  .stamp {
    display: inline-block; color: var(--stamp); box-shadow: var(--stamp-ring); border-radius: var(--r-tag);
    padding: 1px var(--s-2); font-size: var(--t-small); font-weight: var(--w-strong); letter-spacing: 0.04em;
    line-height: var(--lh-small); transform: rotate(-4deg); white-space: nowrap;
  }
  .stamp.big { font-size: var(--t-lead); transform: rotate(-3deg); padding: 2px var(--s-3); }

  /* 5. buttons and quiet links (ledge press: decisions.md, straight 3px drop) */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 48px; padding: var(--s-3) 20px; margin-bottom: 3px;
    font-size: var(--t-lead); font-weight: var(--w-strong); line-height: 1.2; text-align: center; text-decoration: none;
    color: var(--ink); background: var(--leaf); border: var(--bw-bold) solid var(--ink); border-radius: var(--r-btn);
    box-shadow: var(--ledge); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform var(--dur-release) var(--ease-out), box-shadow var(--dur-release) var(--ease-out), background-color var(--dur-release) var(--ease-out);
  }
  .btn.ghost {
    min-height: var(--tap); padding: var(--s-2) var(--s-4); margin-bottom: 0;
    font-size: var(--t-body); font-weight: var(--w-lead); background: var(--surface); border-width: var(--bw); box-shadow: none;
  }
  .btn.block { display: flex; width: 100%; }
  .btn:disabled, .btn[aria-disabled="true"] {
    background: var(--sunk); color: var(--muted); border-style: dashed; border-width: var(--bw); box-shadow: none; cursor: not-allowed;
  }
  .btn:not(:disabled):active { transform: translateY(3px); box-shadow: var(--ledge-none); transition-duration: var(--dur-press); }
  .btn.ghost:not(:disabled):active { transform: translateY(1px); }
  .quiet {
    display: inline-flex; align-items: center; min-height: var(--tap);
    color: var(--leaf-ink); font-size: var(--t-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  }
  [data-copy-vault], [data-copy-from] { min-inline-size: 7.5ch; }
  [data-copy-vault][data-copied], [data-copy-from][data-copied] { background: var(--leaf); animation: koko-stamp var(--dur-stamp) var(--ease-out); }
  @keyframes koko-stamp { from { transform: scale(1.12) rotate(-3deg); } }

  /* 6. countdown */
  .cd-label { font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); }
  .cd-value {
    font-size: var(--t-figure); font-weight: 650; line-height: var(--lh-head); font-variant-numeric: tabular-nums;
    min-inline-size: 17ch; text-align: left;
  }
  .cd-at { font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); }
  .cd-at:has(time[hidden]) { display: none; }
  .when { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }

  /* 10. address block */
  .addr-block .addr, .field .addr:not(.inline) {
    display: block; margin: var(--s-1) 0 var(--s-2); padding: var(--s-2) 10px;
    background: var(--surface); border: var(--bw) dashed var(--ink); border-radius: var(--r-field); user-select: all;
  }
  .addr-block .addr.unset, .field .addr.unset { user-select: auto; }
  .label { font-size: var(--t-small); color: var(--muted); }

  /* 9. FAQ */
  .faq-list { max-width: var(--measure); }
  .faq-list details { border-bottom: var(--bw-hair) dashed var(--ink); }
  .faq-list details:first-child { border-top: var(--bw-hair) dashed var(--ink); }
  summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 48px; padding-block: var(--s-2); cursor: pointer; list-style: none;
    font-size: var(--t-lead); font-weight: 600; line-height: var(--lh-lead);
  }
  summary::-webkit-details-marker { display: none; }
  summary svg { flex: none; width: 14px; height: 14px; transition: transform var(--dur-ui) var(--ease-out); }
  details[open] > summary svg { transform: rotate(45deg); }
  .a { background: var(--surface); border-radius: var(--r-field); padding: var(--s-4); margin-bottom: var(--s-3); }
  .a > * + * { margin-top: var(--s-2); }

  /* forms */
  label { display: block; font-weight: var(--w-strong); margin: var(--s-3) 0 6px; }
  input:not([type]), input[type="text"], input[type="search"] {
    width: 100%; min-width: 0; min-height: var(--tap); padding: 10px var(--s-3);
    font-size: var(--t-body); background: var(--surface); color: var(--ink);
    border: var(--bw) solid var(--ink); border-radius: var(--r-field);
  }
  input.bad, input[aria-invalid="true"] { border-color: var(--stamp); box-shadow: inset 0 0 0 1px var(--stamp); }
  .check { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap); padding-block: var(--s-2); font-weight: var(--w-body); cursor: pointer; margin: var(--s-2) 0; }
  .check input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--leaf-ink); }
  .row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; }
  .row > input { flex: 1 1 10rem; }

  /* 12. status messages (#status className is replaced wholesale by JS) */
  .status { min-height: 24px; margin-top: var(--s-3); overflow-wrap: anywhere; min-width: 0; }
  .status:empty { min-height: 0; margin-top: 0; }
  .status.ok {
    color: var(--success); font-weight: var(--w-strong); padding-left: 24px;
    background: no-repeat 0 0.25em / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 14C3 7 7 2.5 14 2c.5 7-4 11.5-12 12z' fill='%2386AE9F' stroke='%231C211E' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M2.5 13.5 10 6' stroke='%231C211E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .status.err {
    background: var(--stamp-wash); color: var(--stamp); font-weight: var(--w-strong);
    border-left: var(--bw) solid var(--stamp); border-radius: var(--r-field); padding: var(--s-2) var(--s-3);
  }
  .status a, .status.err a { color: var(--leaf-ink); }
  .err { color: var(--stamp); font-weight: var(--w-strong); overflow-wrap: anywhere; }
  .gate { color: var(--stamp); font-size: var(--t-small); margin-top: var(--s-2); overflow-wrap: anywhere; min-width: 0; }
  .gate:empty { margin: 0; }
  .next { display: none; margin-top: var(--s-2); }
  .status.ok + .next { display: block; }
  .hrow {
    display: flex; flex-wrap: wrap; gap: var(--s-1) 14px; padding-block: var(--s-2);
    border-bottom: var(--bw-hair) dashed var(--ink); overflow-wrap: anywhere; min-width: 0;
  }
  .hrow:last-child { border-bottom: 0; }

  /* key/value lists (also written by claim.js) */
  dl.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 14px; }
  dl.kv dt { color: var(--muted); }
  dl.kv dd { font-weight: var(--w-strong); overflow-wrap: anywhere; min-width: 0; }

  /* notes */
  .note-bad { background: var(--stamp-wash); border: var(--bw) solid var(--stamp); border-radius: var(--r-field); padding: var(--s-3) var(--s-4); }
  .note-bad h2 { color: var(--stamp); font-size: var(--t-lead); line-height: var(--lh-lead); margin-bottom: var(--s-1); }
  .note-sample { background: var(--stamp-wash); color: var(--ink); border-radius: var(--r-field); padding: var(--s-2) var(--s-3); font-size: var(--t-small); }
  .tile {
    display: block; flex: none; width: 120px; aspect-ratio: 1; overflow: hidden;
    background: var(--sky); border: var(--bw) solid var(--ink); border-radius: var(--r-field);
  }
  .tile picture, .tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .empty { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); align-items: center; }

  /* 11. stat rows (replaces .card) */
  .stats { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-5); }
  .stat { padding-block: var(--s-3); border-top: var(--bw-hair) dashed var(--ink); min-width: 0; }
  .stat .k { font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); }
  .stat .v { font-size: var(--t-figure); font-weight: 650; line-height: var(--lh-head); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .stat .s { font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); margin-top: 2px; overflow-wrap: anywhere; }
  .stat.lead .v { font-size: var(--t-h2); }
  .stat.wide { grid-column: 1 / -1; }
  .stat .body { font-size: var(--t-body); color: var(--ink); line-height: var(--lh-body); }

  /* 13. table */
  .tablebox { position: relative; }
  .tablewrap { overflow-x: auto; background: var(--surface); border-block: var(--bw) solid var(--ink); }
  .tablewrap:focus-visible { outline-offset: 2px; }
  .tablebox::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 16px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--sunk));
  }
  table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
  th, td { padding: var(--s-2) 6px; text-align: left; white-space: nowrap; border-bottom: var(--bw-hair) dashed var(--ink); }
  tr:last-child td { border-bottom: 0; }
  td:first-child, th:first-child { width: 28px; }
  td.r, th.r { text-align: right; }
  td a { font-family: var(--mono); display: inline-block; padding-block: calc((var(--tap) - 1lh) / 2); margin-block: calc((1lh - var(--tap)) / 2); } /* 44px hit area, row height unchanged */
  th { background: var(--sunk); padding: 0; font-weight: var(--w-strong); }
  th button {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: var(--tap); padding: 0 6px;
    background: none; border: 0; color: var(--ink); font-weight: var(--w-strong); cursor: pointer; text-align: inherit;
  }
  th.r button { justify-content: flex-end; }
  th button::after {
    content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: 0.35;
  }
  th[data-dir] button::after { opacity: 1; }
  th[data-dir="asc"] button::after { transform: translateY(2px) rotate(-135deg); }
  .tablewrap :focus-visible { outline-offset: -3px; }

  /* footer */
  footer.foot { background: var(--sunk); border-top: var(--bw-bold) solid var(--ink); padding-block: var(--s-5) var(--s-6); font-size: var(--t-small); line-height: var(--lh-small); }
  footer.foot .wrap > * + * { margin-top: var(--s-2); }
  footer.foot p { max-width: var(--measure); }
  .foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); overflow-wrap: anywhere; }
}

/* ================================================================ pages */
@layer pages {
  /* shared section rhythm */
  .stack > * + * { margin-top: var(--s-section); }
  .flow > * + * { margin-top: var(--s-3); }
  .page-head > * + * { margin-top: var(--s-2); }
  .page-head { padding-top: var(--s-4); }
  .page-head .lead { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: var(--w-lead); max-width: var(--measure); }
  .prose { max-width: var(--measure); }

  /* -------- home -------- */
  .page-home main { overflow-x: clip; }
  .page-home section > h2 { position: relative; padding-bottom: 10px; margin-bottom: var(--s-4); width: fit-content; max-width: 100%; }
  .page-home section > h2::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke' d='M4 8C14 8 41 6 61 6C80 6 100 9 120 8C140 8 161 5 180 5C199 4 232 6 236 7C239 8 218 10 201 11C183 11 152 11 130 11C108 12 80 11 70 11'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke' d='M4 8C14 8 41 6 61 6C80 6 100 9 120 8C140 8 161 5 180 5C199 4 232 6 236 7C239 8 218 10 201 11C183 11 152 11 130 11C108 12 80 11 70 11'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .hero { position: relative; isolation: isolate; }
  .hero-head {
    display: grid; grid-template-columns: minmax(0, 1fr) calc(30vw - var(--pad-x) - var(--s-2)); align-items: end; column-gap: var(--s-2);
    margin-inline: calc(-1 * var(--pad-x)); padding: var(--s-5) var(--pad-x) var(--s-6);
    background: var(--sky); border-block: var(--bw-bold) solid var(--ink); overflow: clip;
  }
  .hero h1 {
    font-size: min(var(--t-h1), 8.2vw); line-height: var(--lh-tight); font-weight: var(--w-h1); letter-spacing: -0.015em;
    padding-bottom: var(--s-3); overflow-wrap: anywhere; position: relative; z-index: 1;
  }
  .hero-art { align-self: end; width: 30vw; margin-right: calc(-1 * var(--pad-x) - var(--s-2)); margin-bottom: calc(-1 * var(--s-6)); }
  .koko-stack { position: relative; }
  .koko-stack picture, .koko-stack img { display: block; width: 100%; height: auto; }
  .koko-stack .k-sleep { position: absolute; inset: 0; pointer-events: none; }
  .file-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--s-6)); padding: 0 7px 8px 0; }
  .file .why { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: var(--w-lead); }
  .plan-mini { list-style: none; counter-reset: pm; display: grid; gap: var(--s-2); }
  .plan-mini li { counter-increment: pm; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: start; align-content: start; min-height: 40px; line-height: 1.35; }
  .plan-mini li::before, .steps li::before {
    content: counter(pm); display: grid; place-items: center; width: 32px; height: 32px;
    background: var(--leaf); border: var(--bw) solid var(--ink); border-radius: 50% 45% 55% 48%;
    font-size: 1rem; font-weight: 750; line-height: 1;
  }
  .plan-mini .k { display: none; }
  .plan-mini .when { white-space: nowrap; margin-left: 6px; }
  .ratio-line { font-weight: var(--w-strong); }
  .status-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .status-row > * { grid-column: 1; }
  .status-row .badge { justify-self: start; margin-top: var(--s-2); }
  @media (max-width: 719px) {
    .file .rows > * + * { margin-top: var(--s-2); padding-top: var(--s-2); }
    .file .why { font-size: var(--t-body); line-height: var(--lh-small); }
    .file .plan-mini li { min-height: 0; line-height: var(--lh-small); }
    .status-row .badge { margin-top: var(--s-1); }
  }
  .cd-note { font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); margin-top: 2px; }
  .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
  .cta .helper { flex-basis: 100%; font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); }
  .evidence { display: none; }

  .truths-grid { display: grid; }
  .truth { padding-block: var(--s-4); }
  .truth + .truth { border-top: var(--bw-hair) dashed var(--ink); }
  .truth .stamp { margin-bottom: var(--s-3); }
  .truth p:not(.stamp) { max-width: var(--measure); }
  .truths .sig { font-size: var(--t-small); color: var(--muted); }

  .strip {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bw-bold);
    background: var(--ink); border: var(--bw-bold) solid var(--ink); border-radius: var(--r-field); overflow: hidden;
  }
  .panel { position: relative; background: var(--surface); min-width: 0; }
  .panel img { width: 100%; background: var(--paper); }
  .panel.p3 img { background: var(--sky); }
  .panel .cap {
    position: absolute; top: var(--s-2); left: var(--s-2); max-width: calc(100% - 16px);
    background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r-tag);
    padding: 1px var(--s-2); font-size: var(--t-small); font-weight: var(--w-strong); line-height: var(--lh-small);
  }
  .panel p { padding: var(--s-2) var(--s-3) var(--s-3); font-size: var(--t-small); line-height: var(--lh-small); }

  .steps { list-style: none; counter-reset: pm; display: grid; gap: var(--s-5); margin-top: var(--s-5); }
  .steps li { counter-increment: pm; position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-3); align-content: start; }
  .steps li::before { grid-row: 1 / span 3; }
  .steps li::after {
    content: ""; position: absolute; left: 15px; top: 38px; bottom: calc(-1 * var(--s-5) + 6px);
    border-left: var(--bw) dashed var(--ink);
  }
  .steps li:last-child::after { display: none; }
  .steps h3 { line-height: 1.25; padding-top: 2px; }
  .steps .when { margin-top: 2px; }
  .steps .when time { margin-left: 6px; }
  .steps p:not(.when) { margin-top: var(--s-1); max-width: var(--measure); }

  .ratio .lead-p { max-width: var(--measure); }
  .ratio dl.kv { margin-block: var(--s-4); grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ratio dl.kv dt { font-size: var(--t-small); }
  .ratio dl.kv dd { font-weight: var(--w-lead); margin-bottom: var(--s-2); }
  .ratio dl.kv dd.num { font-weight: 650; font-size: var(--t-lead); }
  .phish .flow { max-width: var(--measure); }

  /* -------- tool pages -------- */
  .tool { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); padding-top: var(--s-4); }
  .tool > section > h2, .tool h2.sub { margin-bottom: var(--s-3); }
  .step-h { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 700; margin-top: var(--s-5); margin-bottom: var(--s-2); }
  .step-h:first-child { margin-top: 0; }
  .form { max-width: var(--tool); }
  .form .row { margin-top: var(--s-2); }
  .form .hint { font-size: var(--t-small); margin-top: var(--s-2); }
  .form .pre { font-size: var(--t-small); margin-bottom: var(--s-2); }
  .form .scare { font-size: var(--t-small); margin-top: var(--s-3); }
  .who { overflow-wrap: anywhere; min-width: 0; font-size: var(--t-small); }
  .field h2 { font-size: var(--t-lead); line-height: var(--lh-lead); margin-bottom: var(--s-2); }
  .field .mut { font-size: var(--t-small); line-height: var(--lh-small); }
  .field .mut + .addr { margin-top: var(--s-1); }
  .field > * + * { margin-top: var(--s-2); }
  .disclosure { font-size: var(--t-small); max-width: var(--measure); }
  .disclosure code { font-size: var(--t-addr); }

  /* dashboard */
  .tree { max-width: 280px; }
  .tree .tree-art svg { width: 100%; height: auto; }
  .tree figcaption { font-size: var(--t-small); color: var(--muted); line-height: var(--lh-small); margin-top: var(--s-2); }
  .tree figcaption strong { color: var(--ink); font-size: var(--t-body); }
  .ledger-more { margin-top: 0; }
  .table-sec > p { font-size: var(--t-small); max-width: var(--measure); margin-bottom: var(--s-3); }

  /* claim */
  .split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .split > section > h2.sub { margin-bottom: var(--s-3); }
  .mine h2 { font-size: var(--t-h2); line-height: var(--lh-head); }
  .mine .hint { font-size: var(--t-small); margin-top: var(--s-2); }
  .mine-body { margin-block: var(--s-2) var(--s-3); }
  .mine-body .addr { display: inline; padding: 0; border: 0; background: none; }
  .mine .fees { margin-top: var(--s-4); }
  .stat.say .v { font-size: var(--t-lead); line-height: var(--lh-lead); }
  .stat .v.date { font-size: var(--t-lead); line-height: var(--lh-lead); }
  .cal { margin-top: var(--s-5); }
  .cal h2 { font-size: var(--t-lead); line-height: var(--lh-lead); margin-bottom: var(--s-1); }
  .cal-intro { font-size: var(--t-small); line-height: var(--lh-small); margin-bottom: var(--s-2); }
  .cal .fold-btn { margin-top: var(--s-2); }
  .other { margin-top: var(--s-3); min-width: 0; }
  .other:empty { margin: 0; }
  #lookup .row > input { flex: 1 1 12rem; }
  .exch { font-size: var(--t-small); max-width: var(--measure); }
  .cal-sum { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-2); }
  ol.sched { padding-left: 1.6em; font-size: var(--t-small); line-height: var(--lh-small); }
  ol.sched li { padding-block: 3px; }
  ol.sched li.done { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .fold-btn { display: none; }
  .fees { font-size: var(--t-small); line-height: var(--lh-small); }
  .history-box { display: flex; gap: var(--s-4); align-items: center; }
  .history-box > div { min-width: 0; flex: 1; }
  .history-box:has(.hrow) .tile { display: none; }
  #lookup .row { margin-top: var(--s-2); }

  /* 404 */
  .lost { text-align: center; padding-top: var(--s-6); }
  .lost > * { margin-inline: auto; }
  .lost .tile.big { width: 200px; }
  .lost > * + * { margin-top: var(--s-4); }
  .lost p { max-width: var(--measure); }

  /* ---------- 720+ ---------- */
  @media (min-width: 720px) {
    .hero-head { grid-template-columns: minmax(0, 1fr) 200px; }
    .hero-art { width: 216px; margin-right: calc(-1 * var(--s-4)); }
    .social .x-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .social .lt, .social .tt { display: inline-flex; }
    .file-body, .field { padding: var(--s-5); }
    .truths-grid { grid-template-columns: 5fr 4fr 3fr; column-gap: var(--gutter); }
    .truth + .truth { border-top: 0; border-left: var(--bw-hair) dashed var(--ink); padding-left: var(--gutter); }
    .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel img { aspect-ratio: 1; object-fit: contain; }
    .ratio dl.kv { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
    .ratio dl.kv dd { margin-bottom: 0; }
    .ratio dl.kv dt { font-size: var(--t-body); }
    .addr-block .addr, .field .addr:not(.inline) { font-size: 0.9375rem; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ledger-top .stats { grid-template-columns: minmax(0, 1fr); }
    .ledger-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: center; }
    .tablebox::after { display: none; }
  }

  /* ---------- 1024+ ---------- */
  @media (min-width: 1024px) {
    .hero {
      display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6);
      grid-template-areas: "h1 art" "file art"; align-items: start; padding-top: var(--s-5); container-type: inline-size;
    }
    .hero-head { display: contents; }
    /* 2 lines in the 7 columns: "$KOKO is relaunching." measures 11.4em, the column is 0.57 of the hero */
    .hero h1 { grid-area: h1; align-self: end; padding-bottom: var(--s-5); font-size: min(var(--t-h1), 4.9cqi); }
    .hero-art {
      grid-area: art; align-self: start; aspect-ratio: 453 / 540; width: auto; margin: 0;
      display: flex; align-items: flex-end; justify-content: center; padding: var(--s-5) var(--s-4) 0;
      background: var(--sky); border: var(--bw-bold) solid var(--ink); border-radius: var(--r-panel); overflow: hidden;
    }
    .hero-art .koko-stack { width: 100%; max-width: none; }
    .file-wrap { grid-area: file; margin-top: 0; }
    .mark { width: 40px; height: 40px; }
    .empty { grid-template-columns: 160px minmax(0, 1fr); }
    .tile { width: 160px; }
    .split { grid-template-columns: minmax(0, var(--tool)) minmax(0, 400px); column-gap: var(--s-7); align-items: start; }
    .split > * { grid-column: 1; }
    .split { grid-template-rows: auto auto auto 1fr; }
    .split > .side { grid-column: 2; grid-row: 1 / span 4; }
    .split > .side .stats { grid-template-columns: minmax(0, 1fr); }
    .plan-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
    .plan-mini li { grid-template-columns: 32px minmax(0, 1fr); }
    .plan-mini .k { display: block; font-size: var(--t-small); font-weight: var(--w-strong); }
    .plan-mini li::before { grid-row: 1 / span 2; }
    .plan-mini .when { display: block; margin-left: 0; }
    .evidence { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
    .evidence .tree { max-width: 72px; }
    .evidence p { font-size: var(--t-small); }

    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: var(--gutter); }
    .steps li:nth-child(2n)::after { display: none; }

    .pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-7); align-items: start; }
    .pair > * + * { margin-top: 0; }

    .tool { grid-template-columns: minmax(0, var(--tool)) minmax(0, 400px); column-gap: var(--s-7); align-items: start; }
    .tool > * { grid-column: 1; }
    .tool > .side { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: var(--s-5); }
    .page-claim .tool { grid-template-columns: minmax(0, 1fr); }
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ledger-top .stats { grid-template-columns: minmax(0, 1fr); }
    .tool-wide { grid-template-columns: minmax(0, 1fr); }
    .tool-wide > * { grid-column: 1; }
    .tool > .side .stats { grid-template-columns: minmax(0, 1fr); }
    .tree { max-width: 360px; }
  }

  /* calendar fold at every width (claim): 14 tranches never outgrow the main column (iris QA 9) */
  .fold-btn { display: inline-flex; }
  .cal:not(.open) ol.sched li.done { display: none; }
  .cal:not(.open) ol.sched li:not(.done) ~ li:not(.done) ~ li:not(.done) ~ li { display: none; }
  .cal-sum:empty { display: none; }
}

/* ================================================================ utilities */
@layer utilities {
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .nowrap { white-space: nowrap; }
  @media (max-width: 359px) { .brand-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
}

/* ================================================================ motion (flux, motion.md), unlayered on purpose: last word on transitions */
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not(.ghost):hover { transform: translateY(-1px); box-shadow: var(--ledge-hover); }
  .btn.ghost:not(:disabled):hover { background-color: var(--sunk); }
  nav.main a:hover, .social a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  summary:hover { color: var(--leaf-ink); }
  th button:hover { text-decoration: underline; }
}
/* a press always beats the hover lift (kept after the hover block) */
.btn:not(:disabled):not(.ghost):active { transform: translateY(3px); box-shadow: var(--ledge-none); transition-duration: var(--dur-press); }
.btn.ghost:not(:disabled):active { transform: translateY(1px); }

@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size var(--dur-ui) var(--ease-out), opacity var(--dur-release) var(--ease-out), content-visibility var(--dur-ui) allow-discrete;
  }
  details[open]::details-content { block-size: auto; opacity: 1; }
}

/* hero koko wakes once: sleep holds, then fades off the awake layer. never loops (decisions.md, Reprise).
   only the top layer fades: the face pixels are identical in both files, so the awake layer stays opaque
   underneath and the face never dips to half alpha with sky showing through. */
@media (prefers-reduced-motion: no-preference) {
  .koko-stack .k-sleep { animation: koko-wake var(--dur-wake) var(--ease-in-out) var(--delay-wake) both; }
  /* the clock waits for the sleep frame: common.js sets data-wake="go" once it is decoded (flux QA 2) */
  @media (scripting: enabled) { .koko-stack:not([data-wake]) .k-sleep { animation-play-state: paused; } }
}
/* sleep frame not ready within the skip window: koko is simply awake, never awake, asleep, awake */
.koko-stack[data-wake="skip"] .k-sleep { display: none; }
@keyframes koko-wake { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

[data-tree] [id^="leaf-"] { opacity: 0; transform: scale(.55) rotate(-16deg); }
[data-tree] [id^="leaf-"].on { opacity: 1; transform: none; transition: transform var(--dur-leaf) var(--ease-pop), opacity var(--dur-fade) var(--ease-out); }
[data-tree] [id^="leaf-"].now { transition: none; }
[data-tree] .koko-asleep, [data-tree] .koko-awake { display: none; }
[data-tree][data-koko="asleep"] .koko-asleep, [data-tree][data-koko="awake"] .koko-awake { display: inline; }
/* home case file: the hero bust is the one koko on screen (iris QA 3). 0,4,0 beats the line above */
.evidence[data-tree][data-koko] .koko-asleep, .evidence[data-tree][data-koko] .koko-awake { display: none; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* aegis S1: only ink on sky */
.sky, .sky * { color: var(--on-sky); }
.sky a { color: var(--on-sky); text-decoration: underline var(--bw); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn.ghost, summary svg, details::details-content { transition: none !important; }
  [data-copy-vault][data-copied], [data-copy-from][data-copied] { animation: none !important; }
  .koko-stack .k-sleep { display: none; }
  [data-tree] [id^="leaf-"] { transform: none; }
  [data-tree] [id^="leaf-"].on { transition: opacity var(--dur-fade) ease; }
  [data-tree] [id^="leaf-"].now { transition: none; }
}

@media (forced-colors: active) {
  .stamp { border: 2px solid; }
  nav.main a[aria-current] { border-color: CanvasText; text-decoration: underline; }
  .btn { border-color: ButtonText; }
  .file-body, .field { border-color: CanvasText; }
  .hero-head, .hero-art, .mark, .tile { border-color: CanvasText; }
}