:root {
  --color-paper: #F6F1E7;
  --color-surface: #FFFDF8;
  --color-ink: #111111;
  --color-ink-secondary: #5A554D;
  --color-signal: #FFD43B;
  --color-border: #AAA398;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-key: 4px;
  --radius-control: 5px;
  --radius-panel: 10px;
  --key-pitch: 42px;
  --key-face: 39px;
  --key-gap: 3px;
  --keyboard-frame: 14px;
  --keyboard-natural-width: 1004.5px;
  --keyboard-natural-height: 322px;
  --keyboard-min-scale: .85;
  --article-width: 720px;
  --commercial-rail-width: 300px;
  --page-pad: 32px;
  --focus-gap: 2px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-interface: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-interface); }
body { margin: 0; min-width: 0; background: var(--color-paper); color: var(--color-ink); font-size: 16px; line-height: 1.55; }
img, svg { max-width: 100%; }
button, select { font: inherit; }
button { color: inherit; }
a { color: var(--color-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: var(--focus-gap); box-shadow: 0 0 0 calc(3px + var(--focus-gap)) var(--color-paper); }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-shell { width: min(100%, 1700px); margin-inline: auto; padding-inline: var(--page-pad); }
.home-hero { max-width: var(--keyboard-natural-width); margin: 30px auto 18px; }
.home-hero h1, .article h1, .article h2, .search-context h2, .home-faq h2 { font-family: var(--font-display); font-optical-sizing: auto; }
.home-hero h1 { margin: 0 0 var(--space-1); font-weight: 900; font-size: clamp(36px, 4vw, 58px); line-height: .98; letter-spacing: -.045em; }
.home-hero > p { margin: 0; font-size: 18px; }
.mobile-physical-keyboard-note { display: none; margin-top: var(--space-2) !important; color: var(--color-ink-secondary); font-size: 14px !important; }

.home-tester-row { display: flex; justify-content: center; align-items: flex-start; gap: 24px; min-width: 0; }
.tester { flex: 0 1 var(--keyboard-natural-width); width: 100%; max-width: var(--keyboard-natural-width); min-width: 0; }
.instrument { padding: 12px 0 14px; }
.instrument__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.configuration-summary, .observed-count { margin: 0; font-size: 14px; }
.configuration-summary { font-weight: 600; }
.observed-count { color: var(--color-ink-secondary); white-space: nowrap; }
.instrument__controls { display: flex; align-items: stretch; gap: var(--space-2); }

.button, .icon-button, .report-menu button { appearance: none; border: 1px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-surface); min-height: 38px; padding: 8px 13px; font-weight: 600; cursor: pointer; }
.button:hover, .icon-button:hover, .report-menu button:hover { background: #F0EADF; }
.button--primary { background: var(--color-ink); color: var(--color-surface); }
.button--primary:hover { background: #2B2925; }
.icon-button { min-width: 38px; padding-inline: 10px; }
.configuration-anchor, .report-split { position: relative; }

.config-panel { position: absolute; top: calc(100% + 7px); left: 0; z-index: 30; width: min(380px, calc(100vw - 48px)); max-height: min(77vh, 620px); overflow: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: 0 16px 38px rgba(17,17,17,.14); }
.config-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.config-panel__head h2 { margin: 0; font-family: var(--font-interface); font-size: 17px; line-height: 1.2; }
.config-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.config-fieldset label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
.config-fieldset select { width: 100%; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); }
.config-fieldset:disabled { opacity: .68; }
.config-note { margin: 14px 0 0; color: var(--color-ink-secondary); font-size: 12px; }
.config-preference { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 12px; font-weight: 600; }
.config-preference input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); }
.config-preference-status { margin: 6px 0 0; color: var(--color-ink-secondary); font-size: 11px; }
.config-backdrop { display: none; }

.report-split { display: flex; }
.report-split__main { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.report-split__arrow { border-left-color: #59544B; border-radius: 0 var(--radius-control) var(--radius-control) 0; padding-inline: 11px; }
.report-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 28; display: grid; min-width: 165px; max-width: calc(100vw - 32px); padding: 5px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); box-shadow: 0 12px 28px rgba(17,17,17,.13); }
.report-menu button { border: 0; text-align: left; font-size: 13px; font-weight: 500; }


/* Task 29 keyboard renderer: independent visual channels, not a mutually-exclusive state enum. */
.keyboard-board {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  max-width: none;
  overflow: visible;
  transform-origin: top left;
  user-select: none;
  pointer-events: none;
}
.keyboard-board__frame {
  fill: var(--color-paper);
  stroke: var(--color-border);
  stroke-width: 1.2;
}
.keyboard-key .key-motion {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 55ms ease;
}
.key-base {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 1.1;
  transition: fill 55ms ease, stroke 55ms ease, filter 55ms ease;
  filter: drop-shadow(0 1.5px 1.2px rgba(17,17,17,.12));
}
.key-depth {
  fill: none;
  stroke: var(--color-ink-secondary);
  stroke-width: 2;
  opacity: .65;
  transition: opacity 55ms ease, stroke 55ms ease;
}
.key-observed-frame {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2.6;
  opacity: 0;
  pointer-events: none;
}
.keyboard-key[data-observed="true"] .key-observed-frame { opacity: 1; }
.keyboard-key[data-active="true"] .key-motion { transform: translateY(2px); }
.keyboard-key[data-active="true"] .key-base {
  fill: var(--color-signal);
  stroke: #D0A600;
  filter: drop-shadow(0 2px 2px rgba(17,17,17,.18));
}
.keyboard-key[data-active="true"] .key-depth {
  stroke: var(--color-ink);
  opacity: .35;
}
.key-legend {
  fill: var(--color-ink);
  font: 600 12px/1 var(--font-interface);
  dominant-baseline: middle;
  text-anchor: middle;
  pointer-events: none;
}
.key-legend--mini { font-size: 9.5px; }
.key-legend--tiny { font-size: 8.2px; }
.key-info { opacity: 0; pointer-events: none; }
.key-info circle {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 1.7;
}
.key-info text {
  fill: var(--color-ink);
  font: 700 8px/1 var(--font-interface);
  dominant-baseline: middle;
  text-anchor: middle;
}
.keyboard-key[data-testability="limited"] .key-info,
.keyboard-key[data-testability="cannot-test"] .key-info { opacity: 1; }
.keyboard-key[data-active="true"] .key-info circle { fill: var(--color-signal); }
.key-focus-gap,
.key-focus-ring {
  fill: none;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.key-focus-gap { stroke: var(--color-paper); stroke-width: 8; }
.key-focus-ring { stroke: var(--color-ink); stroke-width: 3; }
.keyboard-key[data-focused="true"] .key-focus-gap,
.keyboard-key[data-focused="true"] .key-focus-ring { opacity: 1; }

.keyboard-shell { position: relative; min-width: 0; }
.keyboard-shell::before,
.keyboard-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 42px;
  z-index: 2;
  width: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.keyboard-shell::before { left: 0; background: linear-gradient(to right, rgba(246,241,231,.96), rgba(246,241,231,0)); }
.keyboard-shell::after { right: 0; background: linear-gradient(to left, rgba(246,241,231,.96), rgba(246,241,231,0)); }
.keyboard-shell.has-left::before, .keyboard-shell.has-right::after { opacity: 1; }
.keyboard-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--color-border) rgba(170,163,152,.18); overscroll-behavior-inline: contain; touch-action: pan-x pan-y; }
.keyboard-extent { position: relative; width: var(--keyboard-natural-width); height: var(--keyboard-natural-height); }
.keyboard-scroll-tools { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-ink-secondary); font-size: 12px; }
.keyboard-scroll-tools__buttons { margin-left: auto; display: inline-flex; gap: 6px; }
.keyboard-scroll-tools .icon-button { min-height: 34px; min-width: 38px; padding: 4px 9px; }
.tester-limitations, .tester-privacy { color: var(--color-ink-secondary); font-size: 13px; }
.tester-limitations { margin: 12px 0 2px; }
.tester-privacy { margin: 0; font-size: 12px; }

.home-sections { max-width: var(--keyboard-natural-width); margin: 30px auto 0; }
.need-help { padding-top: 8px; }
.need-help h2 { margin: 0 0 10px; font-family: var(--font-interface); font-size: 18px; }
.need-help__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.editorial-link { display: block; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); font-weight: 600; text-decoration: none; }
.editorial-link:hover { border-color: var(--color-ink); }
.search-context { margin-top: 54px; padding: 28px 20px; border-top: 1px solid var(--color-border); background: rgba(255,253,248,.48); }
.search-context h2 { margin: 0 0 7px; font-size: 20px; font-weight: 800; }
.search-context p { max-width: 780px; margin: 0 0 8px; color: var(--color-ink-secondary); font-size: 13px; line-height: 1.7; }
.search-context p:last-child { margin-bottom: 0; }
.home-faq { margin-top: 34px; padding-top: 4px; }
.home-faq h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.15; font-weight: 800; }
.home-faq details { border-bottom: 1px solid var(--color-border); }
.home-faq details:first-of-type { border-top: 1px solid var(--color-border); }
.home-faq summary { padding: 14px 2px; font-weight: 600; cursor: pointer; }
.home-faq details[open] summary { padding-bottom: 8px; }
.home-faq details p { max-width: 780px; margin: 0 2px 16px; color: var(--color-ink-secondary); font-size: 14px; line-height: 1.65; }
.site-footer { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 46px auto 0; padding: 18px 0 34px; border-top: 1px solid var(--color-border); color: var(--color-ink-secondary); font-size: 12px; }
.site-footer a { color: inherit; }

.article-layout { display: grid; grid-template-columns: minmax(0, var(--article-width)); justify-content: center; align-items: start; gap: 32px; margin: 34px auto 0; }
.article { min-width: 0; }
.article-brand { display: inline-block; margin-bottom: 30px; font-weight: 600; font-size: 14px; text-decoration: none; }
.article h1 { margin: 0 0 14px; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; font-weight: 900; letter-spacing: -.035em; }
.article-lead { margin: 0 0 22px; color: var(--color-ink-secondary); font-size: 18px; line-height: 1.65; }
.article h2 { margin: 38px 0 10px; font-size: 25px; line-height: 1.15; font-weight: 800; }
.article p { margin: 0 0 15px; }
.tester-return { margin: 22px 0 30px; padding: 16px; border: 1px solid var(--color-border); background: var(--color-surface); }
.tester-return p { margin: 0 0 6px; }

.commercial-slot[hidden] { display: none !important; }
.commercial-slot { min-width: 0; }
.commercial-mock { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 120px; border: 1px dashed #8D857A; background: #EFE8DB; color: #6B6258; text-align: center; font-size: 13px; font-weight: 600; }
.commercial-mock small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; }
.home-commercial-rail, .article-commercial-rail { width: var(--commercial-rail-width); min-width: var(--commercial-rail-width); min-height: 380px; }
.home-commercial-rail > .commercial-mock, .article-commercial-rail > .commercial-mock { min-height: 380px; height: 100%; }
.home-commercial-inflow { max-width: 930px; min-height: 112px; margin: 28px auto 0; }
.article-commercial-inline { min-height: 160px; margin: 30px 0; }
.article-commercial-inline-display { min-height: 250px; margin: 30px 0; }
.article-commercial-inline-display > .commercial-mock { min-height: 250px; }
.home-commercial-post { display: grid; gap: 18px; }
.commercial-mock--affiliate { align-items: flex-start; padding: 18px 20px; text-align: left; }
.commercial-mock--affiliate p { margin: 7px 0; font-weight: 400; }
.commercial-mock--affiliate a { color: var(--color-ink); font-weight: 600; }
.privacy-controls { margin-top: 40px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.privacy-controls h2 { margin-top: 0; }
.privacy-toggle { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; font-weight: 600; }
.privacy-toggle input { width: 20px; height: 20px; accent-color: var(--color-ink); }
.privacy-status { color: var(--color-ink-secondary); font-size: 13px; }

@media (min-width: 1393px) {
  .commercial-mode-mock .home-tester-row { display: grid; grid-template-columns: var(--keyboard-natural-width) var(--commercial-rail-width); max-width: 1328.5px; margin-inline: auto; }
}
@media (max-width: 1392px) {
  .commercial-mode-mock .home-commercial-rail { display: none; }
}
@media (min-width: 1120px) {
  .commercial-mode-mock .article-layout:not(.article-layout--legal) { grid-template-columns: minmax(0,var(--article-width)) var(--commercial-rail-width); max-width: 1052px; }
}
@media (max-width: 1119px) {
  .commercial-mode-mock .article-commercial-rail { display: none; }
}

@media (max-width: 767px) {
  :root { --page-pad: 16px; }
  .home-hero { margin-top: 21px; margin-bottom: 14px; }
  .home-hero h1 { font-size: clamp(34px, 11vw, 48px); }
  .home-hero > p { font-size: 16px; }
  .mobile-physical-keyboard-note { display: block; }
  .instrument { padding: 8px 0 12px; }
  .instrument__summary-row { display: block; margin-bottom: 9px; }
  .configuration-summary { margin-bottom: 4px; font-size: 13px; }
  .observed-count { font-size: 13px; }
  .instrument__controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .configuration-anchor { grid-column: 1 / -1; position: static; }
  .change-keyboard { width: 100%; }
  .report-split { min-width: 0; }
  .report-split__main { flex: 1; min-width: 0; }
  .config-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(17,17,17,.48); }
  .config-panel { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: min(80dvh,720px); border-radius: 18px 18px 0 0; padding: 20px 18px max(24px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 34px rgba(17,17,17,.16); }
  .need-help__links { grid-template-columns: 1fr; }
  .home-sections { margin-top: 24px; }
  .search-context { margin-top: 40px; padding: 22px 16px; }
  .article-layout { margin-top: 22px; }
  .article-brand { margin-bottom: 24px; }
  .article h1 { font-size: clamp(32px, 10vw, 42px); }
  .article-lead { font-size: 16px; }
  .article h2 { font-size: 23px; margin-top: 32px; }
  .site-footer { gap: 9px 16px; }
  .home-commercial-inflow { height: 100px; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Task 30 report snapshot: evidence, not a completion mode or health verdict. */
.report-result {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
.report-result h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
}
.report-result > p { margin: 8px 0; }
.report-result__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.report-result__facts > div { padding-top: 10px; border-top: 1px solid var(--color-border); }
.report-result__facts dt { color: var(--color-ink-secondary); font-size: 12px; font-weight: 600; }
.report-result__facts dd { margin: 2px 0 0; font-size: 14px; }
.report-result__caveat { color: var(--color-ink-secondary); font-size: 13px; }
@media (max-width: 767px) {
  .report-result__facts { grid-template-columns: 1fr; }
}

/* Task 35 accessibility interaction: mobile modal sheet only. */
body[data-modal-sheet-open="true"] { overflow: hidden; }

/* Task 39 supporting-guide content */
.article ul,
.article ol { margin: 0 0 18px; padding-left: 1.4rem; }
.article li { margin: 0 0 8px; }
.article-links { margin-top: 4px; font-weight: 600; }
.article-links a { text-underline-offset: 3px; }

/* Task 59 amendment: restrained editorial figures for the keyboard-history article. */
.article-figure {
  margin: 24px 0 28px;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: #f5f0e7;
}
.article-figure figcaption {
  margin-top: 8px;
  color: var(--color-ink-secondary);
  font-size: 13px;
  line-height: 1.45;
}

/* ================================================================
   Phase 6 approved visual implementation — KEYBOARD TEST CARD
   Visual contract: cobalt calibration field + ivory instrument surface.
   This block intentionally supersedes earlier presentation tokens only.
   ================================================================ */
:root {
  --color-blue: #0750BF;
  --color-blue-deep: #053A91;
  --color-blue-light: #2D6ED1;
  --color-paper: #F4EAD5;
  --color-surface: #FFF7E7;
  --color-ink: #11110F;
  --color-ink-secondary: #5B554B;
  --color-signal: #FFD31A;
  --color-border: #1D1C18;
  --color-blue-rule: rgba(255,255,255,.28);
  --radius-control: 0px;
  --radius-panel: 0px;
  --article-width: 790px;
  --page-pad: clamp(16px, 2.2vw, 38px);
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-tech: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html { background: var(--color-blue); }
body {
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    var(--color-blue);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px, auto;
  color: var(--color-ink);
}

.site-shell {
  position: relative;
  width: min(100%, 1780px);
  min-height: 100vh;
  padding-inline: var(--page-pad);
}

.system-label,
.section-kicker,
.instrument-label,
.home-hero__spec,
.article-masthead__system,
.article-index,
.article-section__marker,
.site-footer__stamp,
.observed-count::after {
  font-family: var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .075em;
}

.calibration-frame { pointer-events:none; position:absolute; inset:18px var(--page-pad) auto; height:calc(100vh - 36px); border:1px solid rgba(255,255,255,.18); z-index:0; }
.calibration-mark { position:absolute; width:30px; height:30px; opacity:.72; pointer-events:none; }
.calibration-mark::before,
.calibration-mark::after { content:""; position:absolute; background:rgba(255,255,255,.72); }
.calibration-mark::before { width:30px; height:1px; top:14px; left:0; }
.calibration-mark::after { width:1px; height:30px; left:14px; top:0; }
.calibration-mark--tl { left:-15px; top:-15px; }
.calibration-mark--tr { right:-15px; top:-15px; }
.calibration-mark--bl { left:-15px; bottom:-15px; }
.calibration-mark--br { right:-15px; bottom:-15px; }

/* Homepage: poster question + diagnostic instrument */
.home-testcard {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(285px, .44fr) minmax(0, 1.16fr);
  gap:clamp(28px, 3vw, 58px);
  align-items:center;
  min-height:min(860px, 100vh);
  padding:clamp(44px, 5vh, 78px) 12px clamp(48px, 6vh, 88px);
}
.home-hero { max-width:none; margin:0; color:var(--color-surface); align-self:center; }
.home-hero .system-label { margin:0 0 28px; color:rgba(255,255,255,.82); font-size:11px; }
.home-hero h1 {
  display:flex;
  flex-direction:column;
  margin:0;
  color:var(--color-surface);
  font-family:var(--font-display);
  font-size:clamp(82px, 8.3vw, 154px);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.home-hero h1 span { display:block; }
.home-hero h1 .brand-question { display:inline; color:var(--color-signal); }
.home-hero__instruction { margin:30px 0 0 !important; padding-left:54px; position:relative; color:var(--color-surface); font-family:var(--font-tech); font-size:clamp(15px,1.2vw,20px) !important; font-weight:700; }
.home-hero__instruction::before { content:"→"; position:absolute; left:0; color:var(--color-signal); }
.home-hero__promise { max-width:360px; margin:9px 0 0 54px !important; color:rgba(255,255,255,.8); font-size:13px !important; line-height:1.5; }
.home-hero__spec { display:grid; gap:3px; margin:42px 0 0; padding-left:14px; border-left:1px solid rgba(255,255,255,.5); color:rgba(255,255,255,.86); font-size:10px; }
.mobile-physical-keyboard-note { color:rgba(255,255,255,.74); }

.home-instrument-zone {
  position:relative;
  min-width:0;
  padding:34px 26px 24px;
  border:1px solid rgba(255,255,255,.55);
  background:var(--color-paper);
  box-shadow:10px 10px 0 rgba(2,28,82,.34);
}
.home-instrument-zone::before,
.home-instrument-zone::after { content:"+"; position:absolute; color:var(--color-ink); font:18px/1 var(--font-tech); }
.home-instrument-zone::before { left:9px; top:7px; }
.home-instrument-zone::after { right:9px; bottom:7px; }
.instrument-label { position:absolute; left:26px; right:26px; top:11px; display:flex; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid var(--color-ink); font-size:10px; font-weight:700; }
.home-tester-row { display:flex; justify-content:center; align-items:flex-start; gap:22px; }
.tester { flex:1 1 auto; max-width:none; }
.instrument { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:end; padding:14px 0 12px; border-bottom:1px solid var(--color-ink); }
.instrument__summary-row { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:3px; margin:0; order:2; min-width:176px; padding-left:18px; border-left:1px solid var(--color-ink); }
.configuration-summary { order:2; font-family:var(--font-tech); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.observed-count { position:relative; order:1; min-height:55px; margin:0; color:var(--color-ink); font-size:0; line-height:1; white-space:nowrap; }
.observed-count::before { content:attr(data-primary-coverage-numerator) " / " attr(data-primary-coverage-denominator); display:block; font-family:var(--font-display); font-size:48px; letter-spacing:-.02em; }
.observed-count::after { content:"KEYS DETECTED"; display:block; margin-top:4px; font-size:9px; font-weight:700; }
.instrument__controls { order:1; display:flex; align-items:stretch; flex-wrap:wrap; gap:7px; }
.button, .icon-button, .report-menu button { border:1px solid var(--color-ink); border-radius:0; background:transparent; min-height:36px; padding:7px 11px; font-family:var(--font-tech); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.button:hover, .icon-button:hover, .report-menu button:hover { background:#E4D8C0; }
.button--primary { background:var(--color-ink); color:var(--color-surface); }
.button--primary:hover { background:var(--color-blue-deep); }
.config-panel, .report-menu { border-radius:0; border:1px solid var(--color-ink); background:var(--color-surface); box-shadow:8px 8px 0 rgba(17,17,15,.18); }
.config-fieldset select { border-radius:0; border-color:var(--color-ink); }

.keyboard-shell { margin-top:18px; padding-top:8px; }
.keyboard-board__frame { fill:#E9DFC9; stroke:var(--color-ink); rx:0; }
.key-base { fill:#181816; stroke:#000; filter:none; }
.key-depth { stroke:#000; opacity:.95; }
.key-observed-frame { stroke:#F4EAD5; stroke-width:2.2; }
.key-legend { fill:#FFF7E7; font-weight:700; }
.key-info circle { fill:#181816; stroke:#F4EAD5; }
.key-info text { fill:#FFF7E7; }
.keyboard-key[data-active="true"] .key-base { fill:var(--color-signal); stroke:#B89200; filter:none; }
.keyboard-key[data-active="true"] .key-legend { fill:var(--color-ink); }
.keyboard-key[data-active="true"] .key-info circle { fill:var(--color-signal); stroke:var(--color-ink); }
.keyboard-key[data-active="true"] .key-info text { fill:var(--color-ink); }
.key-focus-gap { stroke:var(--color-paper); }
.key-focus-ring { stroke:var(--color-blue); }
.keyboard-shell::before { background:linear-gradient(to right, rgba(244,234,213,.96), rgba(244,234,213,0)); }
.keyboard-shell::after { background:linear-gradient(to left, rgba(244,234,213,.96), rgba(244,234,213,0)); }
.tester-footnotes { display:flex; justify-content:space-between; gap:18px; padding-top:9px; border-top:1px solid rgba(17,17,15,.25); }
.tester-limitations,.tester-privacy { margin:0; color:var(--color-ink-secondary); font-family:var(--font-tech); font-size:9px; }
.tester-limitations a { color:var(--color-blue-deep); font-weight:700; }

.report-result { border-radius:0; border:1px solid var(--color-ink); background:#EFE4CD; }
.report-result h2 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0; }

/* Below-tester field manual */
.home-manual { position:relative; z-index:1; display:grid; grid-template-columns:150px minmax(0,1fr); margin:0 12px; background:var(--color-paper); border-top:1px solid var(--color-surface); border-bottom:1px solid var(--color-surface); }
.manual-index { padding:34px 20px; border-right:1px solid var(--color-ink); font-family:var(--font-tech); font-size:10px; }
.manual-index span { display:block; margin-bottom:8px; }
.manual-index strong { display:block; color:var(--color-blue); font-family:var(--font-display); font-size:50px; font-weight:900; line-height:.9; }
.home-sections { max-width:none; margin:0; padding:34px clamp(26px,4vw,70px) 52px; }
.section-kicker { margin:0 0 8px; color:var(--color-blue); font-size:10px; font-weight:700; }
.need-help { padding:0; }
.need-help h2,.search-context h2,.home-faq h2 { margin:0 0 16px; color:var(--color-ink); font-family:var(--font-display); font-size:clamp(34px,3vw,52px); line-height:.95; text-transform:uppercase; letter-spacing:0; }
.need-help__links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:1px solid var(--color-ink); }
.editorial-link { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; min-height:82px; padding:14px 16px; border:0; border-radius:0; background:transparent; color:var(--color-ink); text-decoration:none; }
.editorial-link + .editorial-link { border-left:1px solid var(--color-ink); }
.editorial-link:hover { background:#E6DBC5; }
.editorial-link__index { color:var(--color-blue); font-family:var(--font-display); font-size:30px; }
.search-context { margin-top:50px; padding:34px 0 0; border-top:1px solid var(--color-ink); background:transparent; }
.search-context p { max-width:760px; color:var(--color-ink-secondary); font-size:15px; }
.home-faq { margin-top:48px; padding-top:34px; border-top:1px solid var(--color-ink); }
.home-faq details,.home-faq details:first-of-type { border-color:var(--color-ink); }
.home-faq summary { position:relative; padding:15px 32px 15px 0; font-family:var(--font-tech); font-size:12px; font-weight:700; text-transform:uppercase; }
.home-faq summary::after { content:"+"; position:absolute; right:4px; top:14px; color:var(--color-blue); font-size:20px; }
.home-faq details[open] summary::after { content:"−"; }
.home-faq details p { margin-left:0; color:var(--color-ink-secondary); font-size:14px; }

/* Supporting-page field manual */
.page--article .site-shell { padding-top:20px; }
.article-masthead { position:relative; z-index:1; margin:0; padding:18px clamp(22px,3vw,48px) 38px; border:1px solid rgba(255,255,255,.5); color:var(--color-surface); }
.article-masthead::before { content:""; position:absolute; left:0; right:0; top:58px; border-top:1px solid rgba(255,255,255,.25); }
.article-masthead__system { display:flex; justify-content:space-between; gap:20px; padding-bottom:18px; color:rgba(255,255,255,.8); font-size:10px; }
.article-masthead__system a { color:var(--color-surface); text-decoration:none; }
.article-masthead__system a:hover { color:var(--color-signal); }
.article-masthead__title-grid { display:grid; grid-template-columns:minmax(110px, .22fr) minmax(0,1fr); gap:clamp(24px,4vw,70px); align-items:end; padding-top:34px; }
.article-masthead__index { color:var(--color-signal); font-family:var(--font-display); font-size:clamp(70px,9vw,150px); line-height:.72; text-transform:uppercase; }
.article-masthead .system-label { margin:0 0 10px; color:rgba(255,255,255,.68); font-size:10px; }
.article-masthead h1 { max-width:1000px; margin:0; color:var(--color-surface); font-family:var(--font-display); font-size:clamp(58px,6.3vw,108px); font-weight:900; line-height:.83; text-transform:uppercase; letter-spacing:-.01em; }
.article-masthead .article-lead { max-width:820px; margin:18px 0 0; color:rgba(255,255,255,.84); font-size:16px; line-height:1.5; }
.calibration-mark--masthead { right:22px; bottom:22px; }
.article-layout { position:relative; z-index:1; display:grid; grid-template-columns:210px minmax(0,var(--article-width)); justify-content:center; gap:0; max-width:1220px; margin:0 auto; background:var(--color-paper); border-left:1px solid var(--color-surface); border-right:1px solid var(--color-surface); }
.article-index { position:sticky; top:0; align-self:start; max-height:100vh; overflow:auto; padding:34px 24px; border-right:1px solid var(--color-ink); color:var(--color-ink); font-size:9px; }
.article-index > p { margin:0 0 18px; font-weight:700; }
.article-index a { display:grid; grid-template-columns:28px 1fr; gap:7px; padding:9px 0; border-top:1px solid rgba(17,17,15,.22); color:var(--color-ink); line-height:1.25; text-decoration:none; text-transform:none; letter-spacing:0; }
.article-index a span { color:var(--color-blue); font-weight:700; }
.article { min-width:0; padding:38px clamp(28px,5vw,74px) 70px; }
.article > .tester-return { margin:0 0 38px; }
.tester-return { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:14px 16px; border:1px solid var(--color-ink); background:transparent; }
.tester-return p { margin:0; font-family:var(--font-tech); font-size:10px; text-transform:uppercase; }
.tester-return a { color:var(--color-blue-deep); font-family:var(--font-tech); font-size:11px; font-weight:700; text-transform:uppercase; }
.article-section { display:grid; grid-template-columns:58px minmax(0,1fr); gap:18px; padding:30px 0 36px; border-top:1px solid var(--color-ink); scroll-margin-top:16px; }
.article-section:first-of-type { border-top:0; padding-top:0; }
.article-section__marker { padding-top:3px; color:var(--color-blue); font-family:var(--font-display); font-size:36px; line-height:1; }
.article-section__body { min-width:0; }
.article h2 { margin:0 0 15px; color:var(--color-ink); font-family:var(--font-display); font-size:clamp(31px,3vw,46px); line-height:.98; text-transform:uppercase; letter-spacing:0; }
.article p { max-width:720px; margin:0 0 16px; }
.article a { color:var(--color-blue-deep); }
.article ul,.article ol { max-width:690px; }
.article-links { font-family:var(--font-tech); font-size:11px; text-transform:uppercase; }
.article-figure { margin:28px 0 34px; }
.article-figure__plate { position:relative; padding:10px; border:1px solid var(--color-ink); background:#E8DDC5; }
.article-figure__plate::before,.article-figure__plate::after { content:"+"; position:absolute; z-index:2; color:var(--color-blue); font:16px/1 var(--font-tech); }
.article-figure__plate::before { left:3px; top:1px; }
.article-figure__plate::after { right:3px; bottom:1px; }
.article-figure img { border:0; border-radius:0; filter:grayscale(.15) contrast(1.03); }
.article-figure figcaption { display:grid; grid-template-columns:72px 1fr; gap:12px; margin-top:9px; color:var(--color-ink-secondary); font-size:12px; }
.article-figure figcaption span { color:var(--color-blue); font-family:var(--font-tech); font-size:9px; font-weight:700; }
.privacy-controls { margin-top:34px; padding:22px; border:1px solid var(--color-ink); border-radius:0; background:#E8DDC5; }
.privacy-controls h2 { font-family:var(--font-display); font-size:38px; text-transform:uppercase; }
.privacy-toggle input { accent-color:var(--color-blue); }

/* Footer is part of the cobalt field, not a generic utility strip. */
.site-footer { position:relative; z-index:1; display:grid; grid-template-columns:160px 1fr; gap:26px; margin:0 12px; padding:30px 24px 42px; border-top:1px solid rgba(255,255,255,.45); color:rgba(255,255,255,.78); font-size:10px; }
.site-footer__stamp { display:grid; gap:3px; align-content:start; color:var(--color-surface); font-size:9px; }
.site-footer__stamp span:first-child { color:var(--color-signal); font-family:var(--font-display); font-size:24px; letter-spacing:0; }
.site-footer__links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 24px; }
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { color:var(--color-surface); text-decoration:underline; }

/* Monetisation readiness: invisible OFF; instrument-compatible mock only. */
.commercial-mock { border:1px dashed var(--color-blue); border-radius:0; background:#E4D9C1; color:var(--color-ink-secondary); font-family:var(--font-tech); text-transform:uppercase; }
.home-commercial-rail,.article-commercial-rail { width:280px; min-width:280px; }
.home-commercial-inflow { max-width:1000px; }
.article-commercial-inline { border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); }
.article-commercial-inline-display { border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); }

@media (min-width: 1740px) {
  .commercial-mode-mock .home-testcard { grid-template-columns:minmax(285px,.38fr) minmax(0,1fr); }
  .commercial-mode-mock .home-tester-row { display:grid; grid-template-columns:minmax(0,1fr) 280px; max-width:none; margin:0; }
}
@media (max-width: 1739px) {
  .commercial-mode-mock .home-commercial-rail { display:none; }
}
@media (min-width: 1280px) {
  .commercial-mode-mock .article-layout:not(.article-layout--legal) { grid-template-columns:210px minmax(0,var(--article-width)) 280px; max-width:1500px; }
}
@media (max-width: 1279px) {
  .commercial-mode-mock .article-commercial-rail { display:none; }
}

@media (max-width: 1160px) {
  .home-testcard { grid-template-columns:1fr; align-items:start; min-height:0; padding-top:48px; }
  .home-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; align-items:end; }
  .home-hero .system-label { grid-column:1/-1; margin-bottom:8px; }
  .home-hero h1 { grid-column:1; font-size:clamp(68px,12vw,122px); line-height:.78; }
  .home-hero__instruction,.home-hero__promise,.home-hero__spec { grid-column:2; width:230px; }
  .home-hero__instruction { margin:0 !important; padding-left:34px; }
  .home-hero__promise { margin:8px 0 0 !important; }
  .home-hero__spec { margin:20px 0 0; }
  .article-layout { grid-template-columns:180px minmax(0,var(--article-width)); }
}

@media (max-width: 820px) {
  :root { --page-pad:14px; }
  body { background-size:36px 36px,36px 36px,12px 12px,12px 12px,auto; }
  .calibration-frame { inset:10px var(--page-pad) auto; height:calc(100vh - 20px); }
  .home-testcard { display:block; padding:38px 6px 28px; }
  .home-hero { display:block; }
  .home-hero .system-label { margin-bottom:18px; }
  .home-hero h1 { font-size:clamp(57px,20vw,100px); line-height:.77; }
  .home-hero__instruction { margin:24px 0 0 !important; padding-left:32px; font-size:15px !important; }
  .home-hero__promise { width:auto; max-width:300px; margin:8px 0 0 32px !important; }
  .home-hero__spec { display:none; }
  .mobile-physical-keyboard-note { display:block; margin-left:32px !important; }
  .home-instrument-zone { margin-top:28px; padding:32px 12px 16px; box-shadow:6px 6px 0 rgba(2,28,82,.34); }
  .instrument-label { left:12px; right:12px; }
  .instrument { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding-top:10px; }
  .instrument__summary-row { order:1; display:grid; grid-template-columns:1fr auto; align-items:end; min-width:0; padding:0 0 9px; border-left:0; border-bottom:1px solid var(--color-ink); }
  .observed-count { grid-column:1; min-height:48px; }
  .observed-count::before { font-size:40px; }
  .configuration-summary { grid-column:2; grid-row:1; max-width:135px; text-align:right; }
  .instrument__controls { order:2; display:grid; grid-template-columns:1fr auto; }
  .configuration-anchor { grid-column:1 / -1; position:static; }
  .change-keyboard { width:100%; }
  .report-split { min-width:0; }
  .report-split__main { flex:1; min-width:0; }
  .tester-footnotes { display:block; }
  .tester-privacy { margin-top:4px; }
  .home-manual { grid-template-columns:1fr; margin:0 6px; }
  .manual-index { display:flex; justify-content:space-between; align-items:center; padding:18px; border-right:0; border-bottom:1px solid var(--color-ink); }
  .manual-index strong { font-size:34px; }
  .home-sections { padding:28px 20px 40px; }
  .need-help__links { grid-template-columns:1fr; }
  .editorial-link + .editorial-link { border-left:0; border-top:1px solid var(--color-ink); }
  .need-help h2,.search-context h2,.home-faq h2 { font-size:38px; }
  .site-footer { grid-template-columns:1fr; margin:0 6px; padding:26px 18px 36px; }
  .site-footer__links { grid-template-columns:1fr 1fr; }

  .page--article .site-shell { padding-top:10px; }
  .article-masthead { padding:15px 18px 28px; }
  .article-masthead__system { padding-bottom:14px; }
  .article-masthead__title-grid { grid-template-columns:1fr; gap:14px; padding-top:28px; }
  .article-masthead__index { font-size:62px; }
  .article-masthead h1 { font-size:clamp(52px,15vw,84px); }
  .article-masthead .article-lead { font-size:15px; }
  .article-layout { grid-template-columns:1fr; margin:0 6px; }
  .article-index { position:static; display:flex; gap:0; overflow-x:auto; max-height:none; padding:0; border-right:0; border-bottom:1px solid var(--color-ink); }
  .article-index > p { flex:0 0 auto; margin:0; padding:12px 14px; border-right:1px solid var(--color-ink); }
  .article-index a { flex:0 0 190px; display:grid; padding:12px 14px; border-top:0; border-right:1px solid rgba(17,17,15,.25); }
  .article { padding:28px 20px 52px; }
  .article-section { grid-template-columns:42px minmax(0,1fr); gap:12px; }
  .article-section__marker { font-size:28px; }
  .article h2 { font-size:34px; }
  .article-figure figcaption { grid-template-columns:1fr; gap:4px; }
  .tester-return { display:block; }
  .tester-return a { display:inline-block; margin-top:8px; }
  .config-panel { border-radius:0; }
}

@media (max-width: 480px) {
  .home-hero h1 { font-size:clamp(52px,19vw,82px); }
  .home-instrument-zone { margin-left:-4px; margin-right:-4px; }
  .home-sections { padding-inline:16px; }
  .site-footer__links { grid-template-columns:1fr; }
  .article { padding-inline:16px; }
  .article-section { grid-template-columns:1fr; }
  .article-section__marker { padding-bottom:5px; border-bottom:1px solid rgba(17,17,15,.2); }
}
/* Preserve frozen Signal colour and existing commercial mock breakpoints. */
:root { --color-signal:#FFD43B; }
@media (min-width: 1393px) {
  .commercial-mode-mock .home-testcard { grid-template-columns:minmax(260px,.30fr) minmax(0,1fr); }
  .commercial-mode-mock .home-tester-row { display:grid; grid-template-columns:minmax(0,1fr) 280px; max-width:none; margin:0; }
  .commercial-mode-mock .home-commercial-rail { display:block; }
}
@media (max-width: 1392px) {
  .commercial-mode-mock .home-commercial-rail { display:none; }
}
@media (min-width: 1120px) {
  .commercial-mode-mock .article-layout:not(.article-layout--legal) { grid-template-columns:150px minmax(0,1fr) 280px; max-width:1052px; }
  .commercial-mode-mock .article-commercial-rail { display:block; }
}
@media (max-width: 1119px) {
  .commercial-mode-mock .article-commercial-rail { display:none; }
}
@media (max-width: 820px) {
  .article-index { width:100%; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; }
}
.page--article .site-shell { overflow-x:clip; }
:root { --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", "Fraunces", sans-serif; }

.page--legal .article-masthead__index { font-size:clamp(58px,7vw,104px); }


/* ==========================================================================\n   Keyboard Test Card — owner-approved cleanup pass\n   2026-10-02: same visual direction, reduced noise and stronger hierarchy.\n   ========================================================================== */

/* Fewer calibration marks: retain the technical frame without making every
   corner compete with the tester. */
.calibration-frame--home { height: min(640px, 74vh); border-color: rgba(255,255,255,.13); }
.calibration-frame--home .calibration-mark--bl,
.calibration-frame--home .calibration-mark--br { display:none; }
.calibration-frame--home .calibration-mark { opacity:.52; }

/* Hero: deliberate four-line poster typography. No stretch hacks or collisions. */
.home-testcard {
  grid-template-columns: minmax(430px, .50fr) minmax(0, 1.10fr);
  gap: clamp(32px, 3vw, 56px);
  align-items:center;
  min-height:0;
  padding: clamp(48px, 6vh, 72px) 12px clamp(42px, 5vh, 62px);
}
.home-hero { align-self:center; min-width:0; }
.home-hero .system-label { margin-bottom:20px; opacity:.72; }
.home-hero h1 {
  display:grid;
  gap:0;
  max-width:520px;
  font-size:clamp(74px, 6.8vw, 118px);
  line-height:.82;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.home-hero h1 > span,
.home-hero h1 > span:nth-child(3) {
  width:auto;
  transform:none;
}
.home-hero h1 .brand-question { width:auto; transform:none; }
.home-hero__instruction {
  margin-top:26px !important;
  padding-left:42px;
  font-size:clamp(15px,1.05vw,18px) !important;
}
.home-hero__promise,
.home-hero__spec { display:none; }

/* The instrument grows; annotation around it gets quieter. */
.home-instrument-zone {
  padding:32px 20px 20px;
  box-shadow:7px 7px 0 rgba(2,28,82,.28);
}
.home-instrument-zone::after { display:none; }
.instrument-label { left:20px; right:20px; color:rgba(17,17,15,.72); font-size:9px; }
.instrument { gap:22px; padding:14px 0 14px; }
.instrument__summary-row { min-width:196px; padding-left:20px; }
.observed-count::before { font-size:54px; }
.configuration-summary { font-size:9px; }
.button, .icon-button, .report-menu button {
  min-height:42px;
  padding:9px 14px;
  font-size:11px;
}
.keyboard-shell { margin-top:20px; }
.tester-footnotes { padding-top:10px; }
.tester-limitations,.tester-privacy { font-size:9px; opacity:.86; }

/* The lower field-manual section is one calm reading surface rather than a
   second technical dashboard. */
.home-manual {
  display:block;
  margin:0 12px;
  border-top:1px solid rgba(255,255,255,.52);
  border-bottom:1px solid rgba(255,255,255,.52);
}
.manual-index { display:none !important; }
.home-sections {
  width:min(100%, 1180px);
  max-width:1180px;
  margin:0 auto;
  padding:38px clamp(24px,4vw,58px) 56px;
}
.section-kicker { margin-bottom:7px; font-size:9px; opacity:.84; }
.need-help h2,
.search-context h2,
.home-faq h2 {
  margin:0 0 15px;
  font-family:var(--font-interface);
  font-weight:760;
  text-transform:none;
  letter-spacing:-.025em;
  line-height:1.05;
  font-size:clamp(27px,2.1vw,36px);
}
.need-help__links { max-width:1000px; }
.editorial-link { min-height:72px; padding:13px 16px; }
.editorial-link__index { font-size:26px; }
.search-context { margin-top:38px; padding-top:30px; }
.search-context p { max-width:620px; font-size:15px; line-height:1.62; }
.home-faq { margin-top:38px; padding-top:30px; max-width:900px; }
.home-faq summary {
  padding:14px 32px 14px 0;
  font-family:var(--font-interface);
  font-size:13px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}
.home-faq details p { max-width:680px; line-height:1.6; }

/* Supporting pages: keep the field-manual frame, but reserve condensed
   display type for mastheads and major editorial statements. */
.article h2 {
  font-family:var(--font-interface);
  font-size:clamp(25px,2.2vw,34px);
  font-weight:780;
  line-height:1.08;
  text-transform:none;
  letter-spacing:-.025em;
}
.article-section__marker { font-size:30px; opacity:.92; }
.article p { max-width:650px; line-height:1.65; }
.article ul,.article ol { max-width:650px; }
.article-index { font-size:8.5px; }
.article-masthead__system { opacity:.84; }

@media (min-width: 1161px) {
  .home-testcard { grid-template-columns:minmax(430px,.50fr) minmax(0,1.10fr); }
  .home-hero h1 { font-size:clamp(74px,6.8vw,118px); letter-spacing:-.045em; }
}

@media (max-width: 1160px) {
  .home-testcard { padding-top:42px; }
  .home-hero { display:block; }
  .home-hero h1 { max-width:760px; font-size:clamp(68px,11vw,112px); line-height:.82; }
  .home-hero__instruction { width:auto; margin-top:22px !important; }
}

@media (max-width: 820px) {
  .calibration-frame--home { height:420px; }
  .home-testcard { padding:34px 6px 30px; }
  .home-hero h1 { max-width:none; font-size:clamp(52px,17vw,78px); line-height:.82; letter-spacing:-.04em; }
  .home-hero__instruction { margin-top:20px !important; padding-left:32px; }
  .home-instrument-zone { margin-top:24px; padding:30px 12px 14px; }
  .instrument__summary-row { min-width:0; }
  .observed-count::before { font-size:42px; }
  .button, .icon-button, .report-menu button { min-height:40px; font-size:10px; padding:8px 11px; }
  .home-sections { padding:30px 18px 44px; }
  .need-help h2,.search-context h2,.home-faq h2 { font-size:29px; }
  .search-context,.home-faq { margin-top:32px; padding-top:26px; }
}

@media (max-width: 480px) {
  .home-hero h1 { font-size:16vw; line-height:.84; }
  .home-instrument-zone { margin-left:-4px; margin-right:-4px; }
  .home-faq { max-width:none; }
}

/* ==========================================================================\n   Keyboard Test Card — targeted owner polish pass 2\n   2026-10-02: readable brand lockup + quieter post-tester hierarchy.\n   ========================================================================== */

/* Brand lockup: preserve the poster scale, but make every word immediately
   legible. The earlier compressed line-height was visually distinctive but
   made the four-line question read as one tangled vertical mark. */
.home-hero h1 {
  gap: .045em;
  max-width: 500px;
  font-size: clamp(66px, 5.8vw, 102px);
  line-height: .94;
  letter-spacing: -.035em;
}
.home-hero h1 > span {
  display: block;
  width: max-content;
  max-width: 100%;
}
.home-hero h1 > span:nth-child(3) {
  font-size: .84em;
  letter-spacing: -.025em;
}
.home-hero h1 > span:nth-child(4) {
  font-size: .96em;
}
.home-hero h1 .brand-question {
  display: inline;
  width: auto;
  color: var(--color-signal);
}
.home-hero__instruction {
  margin-top: 30px !important;
}

/* Give the tester first visual ownership of the screen. */
.home-testcard {
  grid-template-columns: minmax(350px, .38fr) minmax(0, 1.18fr);
  gap: clamp(42px, 4vw, 72px);
  padding-bottom: clamp(56px, 7vh, 92px);
}

/* Post-tester material now recedes into the cobalt field instead of arriving
   as a second full-width ivory hero. The immediate help choices remain easy
   to find but are deliberately secondary to the keyboard. */
.home-manual {
  display: block;
  width: auto;
  max-width: none;
  margin: 0 12px;
  background: transparent;
  border: 0;
}
.home-sections {
  width: min(100%, 1040px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 38px 0 80px;
  background: transparent;
}
.need-help {
  color: var(--color-surface);
  padding: 0 8px;
}
.need-help .section-kicker {
  color: rgba(255,255,255,.64);
}
.need-help h2 {
  margin-bottom: 13px;
  color: var(--color-surface);
  font-size: clamp(24px, 1.8vw, 31px);
  font-weight: 760;
}
.need-help__links {
  max-width: 920px;
  border-color: rgba(255,255,255,.42);
}
.editorial-link {
  min-height: 58px;
  padding: 11px 14px;
  color: var(--color-surface);
  border-color: rgba(255,255,255,.42);
}
.editorial-link + .editorial-link {
  border-left-color: rgba(255,255,255,.42);
}
.editorial-link:hover {
  background: rgba(255,255,255,.08);
}
.editorial-link__index {
  color: rgba(255,255,255,.72);
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: 700;
}

/* Explanatory material becomes a lower, narrower reference sheet rather than
   sharing the tester's visual weight. */
.search-context,
.home-faq {
  width: min(100%, 880px);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-paper);
}
.search-context {
  margin-top: 78px;
  padding: 34px 38px 30px;
  border: 1px solid rgba(255,255,255,.52);
  border-bottom: 0;
}
.home-faq {
  margin-top: 0;
  padding: 28px 38px 36px;
  border: 1px solid rgba(255,255,255,.52);
  border-top: 1px solid rgba(17,17,15,.22);
}
.search-context .section-kicker,
.home-faq .section-kicker {
  color: var(--color-blue);
}
.search-context h2,
.home-faq h2 {
  color: var(--color-ink);
  font-size: clamp(25px, 1.9vw, 32px);
}
.search-context p {
  max-width: 610px;
}
.home-faq summary {
  font-size: 12px;
}

@media (max-width: 1160px) {
  .home-hero h1 {
    max-width: 680px;
    font-size: clamp(62px, 9.6vw, 98px);
    line-height: .95;
  }
  .home-hero h1 > span:nth-child(3) { font-size: .86em; }
}

@media (max-width: 820px) {
  .home-hero h1 {
    font-size: clamp(50px, 15.5vw, 72px);
    line-height: .96;
    gap: .035em;
  }
  .home-hero h1 > span:nth-child(3) { font-size: .86em; }
  .home-sections { padding: 28px 8px 56px; }
  .need-help { padding: 0; }
  .need-help__links { grid-template-columns: 1fr; }
  .editorial-link + .editorial-link {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.42);
  }
  .search-context {
    margin-top: 54px;
    padding: 28px 22px 24px;
  }
  .home-faq { padding: 24px 22px 30px; }
}

@media (max-width: 480px) {
  .home-hero h1 {
    font-size: clamp(48px, 14.8vw, 66px);
    line-height: .97;
  }
  .home-hero__instruction { margin-top: 24px !important; }
}

/* ==========================================================================
   Task 47 accessibility QA corrections
   Preserve the approved visual system while meeting small-text / state contrast.
   ========================================================================== */
.home-hero .system-label { opacity: 1; }
.tester-limitations,
.tester-privacy { opacity: .90; }
.article-masthead__system { opacity: 1; }
.article-masthead .system-label { color: rgba(255,255,255,.76); }
.need-help .section-kicker { opacity: 1; color: rgba(255,255,255,.78); }
.keyboard-key[data-observed="true"][data-active="true"] .key-observed-frame { stroke: var(--color-ink); }