/* Shared composition for BRAND-01/02/03. Uses semantic tokens only (tokens/tokens.css),
   so the three samples differ in palette/application and nothing else. */
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sans: "Geist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 6px; --r: 8px; --r-lg: 14px; --r-xl: 20px;
  --t-fast: 160ms; --ease: cubic-bezier(.2, .7, .2, 1); --dur: 1;
  --wrap: 1200px; --gut: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not(.sim-reduce) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
section[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--surface); padding: 8px 12px; border-radius: var(--r); }
.skip:focus { left: 16px; }

/* ---------- sample bar (provenance + theme deep links; not part of the homepage) ---------- */
.sbar { background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.sbar .wrap { display: flex; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.sbar b { color: var(--text); font-weight: 600; }
.sbar nav { margin-left: auto; display: flex; gap: 4px; }
.sbar nav a { text-decoration: none; color: var(--text-2); padding: 4px 8px; border-radius: var(--r-sm); }
.sbar nav a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 600; }

/* ---------- header ---------- */
.site { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo img { height: 24px; width: auto; }
.navl { display: flex; gap: 24px; list-style: none; margin: 0 auto 0 8px; padding: 0; }
.navl a { color: var(--text-2); text-decoration: none; font-size: 15px; padding: 6px 0; }
.navl a:hover { color: var(--text); }
.site .menu { display: none; margin-left: auto; }
.btn[hidden] { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r); border: 1px solid transparent; font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color calc(var(--t-fast) * var(--dur)) var(--ease), border-color calc(var(--t-fast) * var(--dur)) var(--ease), transform calc(var(--t-fast) * var(--dur)) var(--ease); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }
.btn-p { background: var(--action-bg); color: var(--action-text); }
.btn-p:hover, .btn-p.is-hover { background: var(--action-bg-hover); }
.btn-p:active, .btn-p.is-active { background: var(--action-bg-pressed); transform: translateY(1px); }
.btn-s { background: var(--secondary-bg); color: var(--secondary-text); border-color: var(--secondary-border); }
.btn-s:hover, .btn-s.is-hover { background: var(--secondary-bg-hover); }
.btn-s:active, .btn-s.is-active { transform: translateY(1px); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-text); border-color: transparent; cursor: not-allowed; transform: none; }
.btn .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin calc(800ms * var(--dur)) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tlink { font-weight: 500; font-size: 15px; }

/* ---------- badges (status = icon + word + hue) ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 999px; font: 500 12.5px/1 var(--sans); white-space: nowrap; }
.badge svg { width: 12px; height: 12px; flex: none; }
.b-ok { background: var(--status-success-bg); color: var(--status-success-text); }
.b-warn { background: var(--status-warning-bg); color: var(--status-warning-text); }
.b-err { background: var(--status-error-bg); color: var(--status-error-text); }
.b-unk { background: var(--status-unknown-bg); color: var(--status-unknown-text); box-shadow: inset 0 0 0 1px var(--status-unknown-border); border-radius: 999px; background-image: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0,0,0,.035) 4px 8px); }
.b-sample { background: var(--surface-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
.b-dark { background: rgba(255,255,255,.12); color: var(--decision-text); }

/* ---------- hero ---------- */
.hero { padding: 44px 0 24px; }
h1 { font: 500 58px/1.02 var(--sans); letter-spacing: -0.04em; margin: 0 0 14px; }
.hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--text-2); margin: 0; max-width: 54ch; }
.hero-cta { display: flex; align-items: center; gap: 20px; flex: none; }
.work { margin-top: 28px; background: var(--stage); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.k { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.flow { display: grid; gap: 14px; }
.msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; }
.msg .who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.msg .av { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); display: grid; place-items: center; font: 600 11px/1 var(--sans); color: var(--text-2); }
.msg p { margin: 0 0 10px; font-size: 16px; color: var(--text); }
.expect { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.call { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-sm); background: var(--selected-bg); color: var(--selected-text); font-weight: 500; }
.step-note { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); border: 1px dashed var(--border-strong); background: var(--surface); font-size: 14.5px; color: var(--text-2); }
.step-note .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--selected-bg); color: var(--selected-text); }
.step-note b { color: var(--text); font-weight: 600; }

/* evidence panel = NucleAI */
.ev { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ev-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 10px; }
.ev-h h2 { font: 600 17px/1.25 var(--sans); margin: 0 0 3px; letter-spacing: -0.01em; }
.ev-h p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.legend { display: flex; gap: 14px; padding: 0 20px 8px; font-size: 12.5px; color: var(--chart-label); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-v1); }
.legend i.v3 { background: var(--chart-v3); }
.rows { margin: 0; padding: 0 20px; }
.row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.row dt { font-size: 14.5px; color: var(--text); }
.row dt small { display: block; font-size: 12.5px; color: var(--text-muted); }
.row dd { margin: 0; }
.bars { display: grid; gap: 5px; }
.bar { display: grid; grid-template-columns: 22px 1fr 54px; gap: 8px; align-items: center; font: 500 12.5px/1 var(--mono); color: var(--chart-label); }
.bar .tr { height: 8px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.bar .tr i { display: block; height: 100%; width: var(--w); background: var(--chart-v1); border-radius: 4px; }
.bar.v3 .tr i { background: var(--chart-v3); }
.bar b { font-weight: 500; color: var(--text); text-align: right; }
.vals { font: 500 14px/1 var(--mono); color: var(--text); white-space: nowrap; }
.ev-d { margin-top: 6px; background: var(--decision-bg); color: var(--decision-text); padding: 16px 20px 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; position: relative; }
.ev-d::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--decision-marker); }
.ev-d .lbl { font: 500 11.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--decision-muted); }
.ev-d .v { font: 500 22px/1.15 var(--sans); letter-spacing: -0.015em; margin: 4px 0 2px; grid-column: 1; }
.ev-d p { margin: 0; font-size: 13.5px; color: var(--decision-muted); grid-column: 1 / -1; }
.prov { margin: 14px 2px 0; font-size: 13.5px; color: var(--text-muted); }

/* walkthrough: emphasis only — nothing is hidden or faded */
.walk { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.walk .cap { font-size: 14px; color: var(--text-2); margin: 0 auto 0 0; min-height: 20px; flex: 1 1 420px; }
.walk-ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.walk .cap b { color: var(--text); font-weight: 600; }
.walk-dots { display: flex; gap: 6px; }
.walk-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--border); transition: background-color calc(240ms * var(--dur)) var(--ease); }
.walk-dots i.on { background: var(--selected-indicator); }
[data-step] { transition: box-shadow calc(300ms * var(--dur)) var(--ease); border-radius: var(--r-lg); }
[data-step].lit { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--selected-indicator); }

/* ---------- app fragment ---------- */
.sec { padding: 72px 0; }
.sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
h2.t { font: 500 36px/1.1 var(--sans); letter-spacing: -0.03em; margin: 0 0 8px; }
.sec-h p { margin: 0; color: var(--text-2); max-width: 60ch; }
.app { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(18,23,34,.04), 0 24px 48px -28px rgba(18,23,34,.25); }
.app-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 14px; color: var(--text-2); }
.app-top img { width: 24px; height: 24px; }
.app-top .crumb b { color: var(--text); font-weight: 600; }
.app-top .badge { margin-left: auto; }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.stg { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: center; transition: border-color calc(var(--t-fast) * var(--dur)), background-color calc(var(--t-fast) * var(--dur)); }
.stg:hover { border-color: var(--border-strong); }
.stg .n { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); border: 1.5px solid var(--border-strong); color: var(--text-2); }
.stg.done .n { background: var(--text); border-color: var(--text); color: var(--page); }
.stg b { font: 600 14px/1.2 var(--sans); }
.stg span.s { font-size: 12.5px; color: var(--text-muted); }
.stg[aria-selected="true"] { background: var(--selected-bg); border-color: var(--selected-indicator); box-shadow: inset 0 -3px 0 var(--selected-indicator); }
.stg[aria-selected="true"] b, .stg[aria-selected="true"] span.s { color: var(--selected-text); }
.stage-detail { padding: 12px 18px; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--border); min-height: 46px; }
.stage-detail b { color: var(--text); }
.panes { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.pane { padding: 20px 22px 22px; }
.pane + .pane { border-left: 1px solid var(--border); }
.pane h3 { font: 600 15px/1.2 var(--sans); margin: 0 0 14px; display: flex; gap: 8px; align-items: center; }
.dec { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
.dec .v { font: 500 24px/1.15 var(--sans); letter-spacing: -0.015em; margin: 6px 0 6px; }
.dec q { display: block; font-size: 14.5px; color: var(--text-2); quotes: "“" "”"; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; margin: 0; font-size: 14px; }
.kv dt, .kv dd { padding: 8px 0; border-top: 1px solid var(--border); margin: 0; }
.kv dt { color: var(--text-muted); padding-right: 12px; }
.kv dd { color: var(--text); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.kv .badge { height: 20px; font-size: 11.5px; padding: 0 6px; }
.note { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.stack { display: grid; gap: 10px; margin: 4px 0 16px; }
.sb { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; font: 500 12.5px/1 var(--mono); color: var(--chart-label); }
.sb .segs { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; }
.sb .segs span { display: grid; place-items: center; color: #fff; font-weight: 600; }
.sb .a { background: var(--status-success-text); } .sb .r { background: var(--status-error-text); } .sb .p { background: var(--status-warning-text); }
.slegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--chart-label); margin-bottom: 12px; }
.slegend span { display: inline-flex; gap: 6px; align-items: center; }
.slegend i { width: 10px; height: 10px; border-radius: 2px; }
.mini { margin: 0; display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px; font-size: 14px; }
.mini > * { padding: 8px 0; border-top: 1px solid var(--border); margin: 0; }
.mini dd { font-family: var(--mono); text-align: right; }

/* decision action */
.act { border-top: 1px solid var(--border); padding: 18px 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font: 600 14px/1.2 var(--sans); margin-bottom: 10px; padding: 0; }
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radios label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r); font-size: 14px; cursor: pointer; background: var(--surface); }
.radios input { accent-color: var(--selected-indicator); width: 16px; height: 16px; margin: 0; }
.radios label:has(input:checked) { background: var(--selected-bg); border-color: var(--selected-indicator); color: var(--selected-text); font-weight: 500; }
.radios label:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.act-btns { display: flex; gap: 10px; }
.status-msg { grid-column: 1 / -1; display: none; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border-strong); font-size: 14px; color: var(--text); }
.status-msg.show { display: flex; }
.status-msg svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ---------- specimens ---------- */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; background: var(--surface); }
.card h3 { font: 600 15px/1.2 var(--sans); margin: 0 0 4px; }
.card > p { margin: 0 0 16px; font-size: 13.5px; color: var(--text-muted); }
.grid-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.cell { display: grid; gap: 6px; justify-items: start; }
.cell small { font: 500 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font: 500 14px/1.2 var(--sans); }
.field .help { font-size: 13px; color: var(--text-muted); }
.inp { height: 44px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); width: 100%; transition: border-color calc(var(--t-fast) * var(--dur)), box-shadow calc(var(--t-fast) * var(--dur)); }
.inp::placeholder { color: var(--text-muted); }
.inp:focus, .inp.is-focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 22%, transparent); }
.inp[aria-invalid="true"] { border-color: var(--status-error-icon); box-shadow: 0 0 0 1px var(--status-error-icon); }
.err { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--status-error-text); }
.err[hidden] { display: none; }
.err svg { width: 14px; height: 14px; flex: none; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.logos { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px 8px 0 0; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; font-size: 13px; color: var(--text-2); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); padding: 28px 0 48px; font-size: 13.5px; color: var(--text-muted); }
.foot .wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* dev panel */
.dev { position: fixed; right: 12px; bottom: 12px; z-index: 100; background: #121722; color: #fff; padding: 12px 14px; border-radius: 12px; font: 12px/1.5 var(--mono); display: grid; gap: 6px; }
.sim-reduce *, .sim-reduce *::before, .sim-reduce *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .ev-col { order: -1; }                       /* result first on narrow screens (UX-10) */
  .panes { grid-template-columns: minmax(0, 1fr); }
  .pane + .pane { border-left: 0; border-top: 1px solid var(--border); }
  .stages { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .stg { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  :root { --gut: 16px; }
  .site .wrap { gap: 12px; }
  .navl, .site .btn-p { display: none; }
  .site .menu { display: inline-flex; }
  .navl.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px 16px; background: var(--page); border-bottom: 1px solid var(--border); }
  .navl.open a { display: block; padding: 12px 0; font-size: 17px; }
  .sbar nav { margin-left: 0; }
  .hero { padding-top: 32px; }
  h1 { font-size: 40px; }
  .lede { font-size: 17px; }
  .work { padding: 14px; gap: 16px; margin-top: 24px; border-radius: 16px; }
  .ev-h { padding: 14px 14px 10px; flex-direction: column; gap: 8px; }
  .legend, .rows { padding-left: 14px; padding-right: 14px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .row dd.bars { grid-column: 1 / -1; grid-row: 2; }
  .ev-d { padding: 14px 14px 16px; }
  .walk { gap: 8px; }
  .walk .cap { flex-basis: 100%; }
  h2.t { font-size: 28px; }
  .sec { padding: 56px 0; }
  .sec-h { flex-direction: column; align-items: flex-start; }
  .act { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pane { padding: 16px; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .grid-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-top { flex-wrap: wrap; }
}