/* WIM Robotics — "Test Report" design system.
   Light document body + dark instrument bands where measured data lives.
   IBM Plex Sans / Mono / Sans JP. 0 radius, 1px rules, no shadows, safety-orange accent. */
:root {
  --paper: #EDEFF1; --sheet: #FAFBFC; --ink: #0E1216; --ink-2: #4A535C; --ink-3: #646D76;
  --rule: #C9CFD5; --rule-strong: #0E1216;
  --accent: #E8590C; --accent-text: #B5450A; --ok: #2B8A3E; --fail: #C92A2A;
  --scope-bg: #0A0D10; --scope-panel: #11161B; --scope-grid: #1E262E; --scope-rule: #2C3640;
  --scope-ink: #E6EBEF; --scope-ink-2: #8C98A3; --trace-1: #FFB000; --trace-2: #36C5D6; --limit: #E8590C;
  --sans: "IBM Plex Sans", "IBM Plex Sans JP", "IBM Plex Sans KR", "Hiragino Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans JP", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wide: 1200px; --gutter: 32px; --section: 112px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 12px 0 0; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: 760px; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.ac { color: var(--accent-text); }
@media (max-width: 760px) { :root { --gutter: 16px; --section: 72px; } body { font-size: 16px; } }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 64px; line-height: 1.05; }
h2 { font-size: 44px; line-height: 1.1; }
h3 { font-size: 26px; line-height: 1.25; }
h4 { font-size: 19px; line-height: 1.35; }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink-2); margin-top: 20px; }
.label { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { h1 { font-size: 44px; } h2 { font-size: 32px; } h3 { font-size: 22px; } .lead { font-size: 18px; } }
@media (max-width: 480px) { h1 { font-size: 36px; } h2 { font-size: 28px; } }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { font-feature-settings: "palt"; letter-spacing: 0; }
:lang(ja) p, :lang(ja) li { line-height: 1.85; }

/* ---------- header (dark bar) ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--scope-bg); color: var(--scope-ink); border-bottom: 1px solid var(--scope-rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 20px; width: auto; filter: brightness(0) invert(1); }
.brand span { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--scope-ink-2); border-left: 1px solid var(--scope-rule); padding-left: 10px; }
.nav { display: flex; align-items: center; gap: 28px; font: 500 14px var(--sans); }
.nav a { color: var(--scope-ink-2); padding: 19px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--scope-ink); }
.nav a[aria-current="page"] { color: var(--scope-ink); border-bottom-color: var(--accent); }
.nav .jp { font-family: var(--mono); font-size: 12px; }
.nav .btn { height: 36px; padding: 0 14px; font-size: 14px; }
@media (max-width: 900px) { .nav { gap: 14px; font-size: 13px; } .nav .btn, .brand span { display: none; } }
@media (max-width: 480px) { .nav { gap: 10px; font-size: 12px; } .nav .jp { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--accent); background: var(--accent); color: var(--ink); font: 600 15px var(--sans); border-radius: 0; cursor: pointer; }
.btn:hover { background: #FF7A33; border-color: #FF7A33; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.band .btn.line, .top .btn.line { color: var(--scope-ink); border-color: var(--scope-ink-2); }
.band .btn.line:hover { background: var(--scope-ink); color: var(--scope-bg); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.arrow { font: 600 15px var(--sans); color: var(--accent-text); border-bottom: 1px solid currentColor; }
.band .arrow { color: #FF7A33; }

/* ---------- sections + document header row (signature) ---------- */
section { padding: var(--section) 0; }
section.sheet-bg { background: var(--sheet); }
.dh { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 48px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dh b { color: var(--ink); font-weight: 600; }
.dh b em { font-style: normal; color: var(--accent-text); }
.band .dh { border-bottom-color: var(--scope-rule); color: var(--scope-ink-2); }
.band .dh b { color: var(--scope-ink); }
.band .dh b em { color: var(--accent); }
.sh { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.sh p { margin: 0; color: var(--ink-2); font-size: 18px; }
.band .sh p { color: var(--scope-ink-2); }
@media (max-width: 900px) { .sh { grid-template-columns: 1fr; gap: 16px; } .dh .r { display: none; } }

/* ---------- dark instrument band ---------- */
.band { background-color: var(--scope-bg); color: var(--scope-ink);
  background-image: linear-gradient(var(--scope-grid) 1px, transparent 1px), linear-gradient(90deg, var(--scope-grid) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }
.band .muted, .band .lead { color: var(--scope-ink-2); }
.band .label { color: var(--scope-ink-2); }

/* ---------- hero ---------- */
.hero { padding: 96px 0 88px; }
.hero .grid-h { display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: start; }
.hero h1 { margin-top: 20px; }
.hero .lead { max-width: 560px; }
.hero .who { margin-top: 36px; }
.hero .who .label { display: block; margin-bottom: 10px; }
.doors-mini { display: grid; gap: 0; border-top: 1px solid var(--scope-rule); }
.doors-mini a { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--scope-rule); font: 500 16px var(--sans); color: var(--scope-ink); }
.doors-mini a span { font: 400 13px var(--mono); color: var(--scope-ink-2); }
.doors-mini a:hover { color: #FF7A33; }
.doors-mini a:hover span { color: var(--scope-ink); }
@media (max-width: 980px) { .hero .grid-h { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 64px 0 64px; } }

/* ---------- scope panel ---------- */
.scope { background: var(--scope-panel); border: 1px solid var(--scope-rule); color: var(--scope-ink); }
.scope .sc-h { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--scope-rule); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--scope-ink-2); }
.scope .sc-h b { color: var(--scope-ink); font-weight: 500; }
.scope .sc-b { padding: 16px 14px 10px; }
.scope .sc-f { padding: 10px 14px; border-top: 1px solid var(--scope-rule); font: 400 11px/1.55 var(--mono); color: var(--scope-ink-2); }
.scope .sc-f b { color: var(--scope-ink); font-weight: 500; }
.scope svg text { font-family: var(--mono); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font: 400 11px var(--mono); color: var(--scope-ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; }
.scope video, .scope img { width: 100%; }

/* ---------- readout tiles ---------- */
.readouts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--scope-rule); border-left: 1px solid var(--scope-rule); }
.readouts.r4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ro { min-width: 0; }
.ro { padding: 18px 16px 16px; border-right: 1px solid var(--scope-rule); border-bottom: 1px solid var(--scope-rule); }
.ro .v { font: 500 40px/1 var(--mono); letter-spacing: -.02em; color: var(--scope-ink); font-variant-numeric: tabular-nums; }
.ro .v small { font-size: 18px; color: var(--scope-ink-2); margin-left: 4px; }
.ro .c { font: 400 12px/1.45 var(--mono); color: var(--scope-ink-2); margin-top: 10px; }
.ro .s { font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--trace-1); margin-top: 8px; }
.light .readouts, .readouts.light { border-color: var(--rule); }
.readouts.light .ro { border-color: var(--rule); background: var(--sheet); }
.readouts.light .ro .v { color: var(--ink); }
.readouts.light .ro .v small, .readouts.light .ro .c { color: var(--ink-2); }
.readouts.light .ro .s { color: var(--accent-text); }
@media (max-width: 900px) { .readouts.r4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ro .v { font-size: 32px; } }
@media (max-width: 520px) { .ro { padding: 14px 12px; } .ro .v { font-size: 24px; } .ro .v small { font-size: 13px; } }

/* ---------- problem: three failure modes ---------- */
.fails { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-strong); }
.fail { padding: 24px 24px 28px 0; border-right: 1px solid var(--rule); }
.fail + .fail { padding-left: 24px; }
.fail:last-child { border-right: 0; }
.fail .label { color: var(--accent-text); }
.fail h4 { margin-top: 10px; }
.fail p { color: var(--ink-2); font-size: 15.5px; }
.fail svg { margin-top: 18px; }
@media (max-width: 900px) { .fails { grid-template-columns: 1fr; } .fail, .fail + .fail { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ---------- two-column figure + conditions ---------- */
.fig { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
.fig.rev { grid-template-columns: 5fr 7fr; }
.cond dl, .light-cond dl { margin: 0; border-top: 1px solid var(--scope-rule); }
.cond dt, .light-cond dt { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--scope-ink-2); padding-top: 12px; }
.cond dd, .light-cond dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--scope-rule); font-size: 15px; color: var(--scope-ink); }
.light-cond dl { border-color: var(--rule); }
.light-cond dt { color: var(--ink-3); }
.light-cond dd { color: var(--ink); border-color: var(--rule); }
@media (max-width: 900px) { .fig, .fig.rev { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- doors (ICP self-select) ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-strong); background: var(--sheet); }
.door { padding: 28px 26px 26px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.door:last-child { border-right: 0; }
.door .label { color: var(--accent-text); }
.door h3 { margin-top: 12px; font-size: 24px; }
.door .end { margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.door .end b { color: var(--ink); font-weight: 500; }
.door ul { list-style: none; padding: 0; margin: 14px 0 0; font-size: 15px; }
.door li { padding: 6px 0 6px 18px; position: relative; color: var(--ink-2); }
.door li::before { content: "—"; position: absolute; left: 0; color: var(--accent-text); }
.door .first { margin-top: auto; padding-top: 20px; }
.door .first .label { display: block; color: var(--ink-3); margin-bottom: 6px; }
.door .first p { margin: 0 0 16px; font-weight: 600; font-size: 15.5px; }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } .door { border-right: 0; border-bottom: 1px solid var(--rule); } .door:last-child { border-bottom: 0; } }

/* ---------- certificate strip ---------- */
.certs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); background: var(--sheet); margin-top: 24px; }
.cert { padding: 16px; border-right: 1px solid var(--rule); position: relative; }
.cert:last-child { border-right: 0; }
.cert .stamp { display: inline-block; font: 600 10.5px var(--mono); letter-spacing: .12em; color: var(--ok); border: 1.5px solid var(--ok); padding: 2px 7px; transform: rotate(-3deg); }
.cert .stamp.pend { color: var(--ink-3); border-color: var(--ink-3); }
.cert h4 { font-size: 15px; margin-top: 10px; }
.cert p { margin-top: 4px; font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
@media (max-width: 900px) { .certs { grid-template-columns: 1fr 1fr; } .cert:nth-child(2) { border-right: 0; } .cert:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 480px) { .certs { grid-template-columns: 1fr; } .cert { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ---------- cases ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-c { background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.case-c .ph { aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--scope-panel); }
.case-c .ph img, .case-c .ph video { width: 100%; height: 100%; object-fit: cover; }
.case-c .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.case-c h4 { margin-top: 8px; }
.case-c p { font-size: 15px; color: var(--ink-2); }
.case-c table { margin-top: auto; }
a.case-c:hover h4 { color: var(--accent-text); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

/* ---------- spec table ---------- */
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 16px; }
table.spec th { text-align: left; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-strong); }
table.spec td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.spec td:first-child { font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; width: 34%; }
table.spec td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.band table.spec th { color: var(--scope-ink-2); border-color: var(--scope-ink-2); }
.band table.spec td { border-color: var(--scope-rule); }
.band table.spec td:first-child { color: var(--scope-ink-2); }

/* ---------- procedure ---------- */
.proc { border-top: 1px solid var(--rule-strong); }
.pr { display: grid; grid-template-columns: 70px 1.3fr 2fr 1.1fr 1.3fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.pr.hd { padding: 10px 0; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pr .n { font: 500 22px var(--mono); color: var(--accent-text); }
.pr h4 { font-size: 18px; }
.pr p { margin: 0; color: var(--ink-2); font-size: 15px; }
.pr .d, .pr .o { font: 400 13px/1.5 var(--mono); color: var(--ink); }
.pr .gate { display: block; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); margin-top: 6px; }
@media (max-width: 900px) { .pr { grid-template-columns: 48px 1fr; gap: 6px 14px; } .pr.hd { display: none; } .pr > :nth-child(n+3) { grid-column: 2; } }

/* ---------- risk list / objections ---------- */
.risks { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule-strong); }
.rk { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule); }
.rk:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule); }
.rk .n { font: 500 13px var(--mono); color: var(--accent-text); padding-top: 3px; }
.rk h4 { font-size: 17px; }
.rk p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .risks { grid-template-columns: 1fr; } .rk:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ---------- media grid (real hardware) ---------- */
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mgrid figure { margin: 0; }
.mgrid .ph { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--rule); background: var(--scope-panel); }
.mgrid.dark .ph { border-color: var(--scope-rule); }
.mgrid .ph img, .mgrid .ph video { width: 100%; height: 100%; object-fit: cover; }
.mgrid .wide { grid-column: span 2; }
.mgrid .wide .ph { aspect-ratio: 16/10; }
figcaption, .cap { font: 400 12px/1.5 var(--mono); color: var(--ink-3); margin-top: 8px; }
.band figcaption { color: var(--scope-ink-2); }
figcaption b { color: var(--ink); font-weight: 500; }
.band figcaption b { color: var(--scope-ink); }
@media (max-width: 900px) { .mgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mgrid { grid-template-columns: 1fr; } .mgrid .wide { grid-column: auto; } }

/* ---------- stack diagram ---------- */
.stk { border: 1px solid var(--scope-rule); }
.stk .ly { display: grid; grid-template-columns: 180px 1fr 140px; gap: 16px; padding: 16px 18px; border-bottom: 1px dashed var(--scope-rule); align-items: center; }
.stk .ly:last-child { border-bottom: 0; }
.stk .ly b { font: 500 13px var(--mono); color: var(--scope-ink); }
.stk .ly span { font-size: 14.5px; color: var(--scope-ink-2); }
.stk .ly i { font: normal 500 11px var(--mono); letter-spacing: .08em; text-align: right; color: var(--scope-ink-2); }
.stk .ly.we { background: rgba(255,176,0,.07); box-shadow: inset 3px 0 0 var(--trace-1); }
.stk .ly.we i { color: var(--trace-1); }
.stk .tm { font: 400 11px var(--mono); color: var(--trace-2); }
@media (max-width: 700px) { .stk .ly { grid-template-columns: 1fr; gap: 4px; } .stk .ly i { text-align: left; } }

/* ---------- field log ---------- */
.log { border-top: 1px solid var(--rule-strong); }
.lg { display: grid; grid-template-columns: 130px 120px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.lg .d { font: 400 13px var(--mono); color: var(--ink-3); }
.lg .t { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.lg p { margin: 0; font-size: 15.5px; }
.lg p span { color: var(--ink-2); }
@media (max-width: 700px) { .lg { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- where we work ---------- */
.sites { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); background: var(--sheet); }
.site { padding: 22px 22px 24px; border-right: 1px solid var(--rule); }
.site:last-child { border-right: 0; }
.site .label { color: var(--accent-text); }
.site h4 { margin-top: 8px; }
.site p { font-size: 15px; color: var(--ink-2); }
.site .tz { font: 400 13px var(--mono); color: var(--ink); margin-top: 12px; }
@media (max-width: 900px) { .sites { grid-template-columns: 1fr; } .site { border-right: 0; border-bottom: 1px solid var(--rule); } }
.jpblock { margin-top: 24px; border: 1px solid var(--rule-strong); background: var(--sheet); padding: 24px 26px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.jpblock h4 { font-size: 20px; }
.jpblock p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .jpblock { grid-template-columns: 1fr; } }

/* ---------- service spec sheet ---------- */
.svc { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--rule-strong); }
.dh + .svc { border-top: 0; padding-top: 0; }
.svc .label { color: var(--accent-text); }
.svc h3 { margin-top: 10px; font-size: 32px; line-height: 1.15; }
.svc .vp { margin-top: 14px; font-size: 18px; color: var(--ink-2); }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; gap: 20px; } .svc h3 { font-size: 26px; } }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid var(--rule); padding: 16px 0; }
details:first-of-type { border-top: 1px solid var(--rule-strong); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 600 17px var(--sans); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 18px var(--mono); color: var(--ink-3); }
details[open] summary::after { content: "−"; }
details p { color: var(--ink-2); font-size: 15.5px; }

/* ---------- form ---------- */
form.intake { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; border: 1px solid var(--rule-strong); background: var(--sheet); padding: 28px; }
form.intake label { display: grid; gap: 6px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
form.intake .full { grid-column: 1 / -1; }
form.intake input, form.intake select, form.intake textarea { font: 400 15.5px var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 0; padding: 10px 12px; text-transform: none; letter-spacing: 0; }
form.intake input:focus, form.intake select:focus, form.intake textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
form.intake textarea { min-height: 120px; resize: vertical; }
form.intake .btn { justify-self: start; }
@media (max-width: 700px) { form.intake { grid-template-columns: 1fr; padding: 20px; } }

/* ---------- closing CTA ---------- */
.close { padding: 104px 0; }
.close h2 { max-width: 880px; }
.close .jp { margin-top: 24px; font-size: 15px; color: var(--scope-ink-2); }

/* ---------- footer ---------- */
footer { background: var(--paper); border-top: 1px solid var(--rule-strong); padding: 40px 0 32px; font: 400 13px/1.8 var(--mono); color: var(--ink-2); }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.3fr; gap: 24px; }
footer .brand img { filter: brightness(0); }
footer .brand span { color: var(--ink-3); border-left-color: var(--rule); }
footer a:hover { color: var(--accent-text); }
footer .clocks span { display: block; font-variant-numeric: tabular-nums; }
footer .base { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--ink-3); font-size: 12px; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- motion: plots sweep once ---------- */
.sweep { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.in .sweep { animation: sw 1.1s linear forwards; }
@keyframes sw { to { stroke-dashoffset: 0; } }
.bar-g { transform-origin: left; transform: scaleX(0); transform-box: fill-box; }
.in .bar-g { animation: gr .7s ease-out forwards; }
@keyframes gr { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sweep { stroke-dashoffset: 0; } .bar-g { transform: none; } .in .sweep, .in .bar-g { animation: none; } }

/* inner page hero */
.phero { padding: 88px 0 72px; }
.phero h1 { font-size: 56px; margin-top: 18px; max-width: 900px; }
@media (max-width: 900px) { .phero h1 { font-size: 38px; } .phero { padding: 56px 0 48px; } }
.toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.toc a { color: var(--scope-ink-2); border-bottom: 1px solid var(--scope-rule); padding-bottom: 2px; }
.toc a:hover { color: #FF7A33; }
.note { font: 400 12px/1.6 var(--mono); color: var(--ink-3); margin-top: 20px; }
.band .note { color: var(--scope-ink-2); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

svg { overflow: hidden; }