/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: custom (storyboard sheet) · enrichment: none (real product captures) · nav: N9 · footer: Ft4
 * tone: technical-editorial · anchor hue: 28 (arrow red)
 * pre-emit critique: P4 H5 E5 S5 R4 V5 · 2026-10-08 extension: desk (annotated capture) · catalogue ledger · tablet gestures
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-style: normal; margin: 0; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--color-rule); transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.skip { position: absolute; left: var(--space-md); top: -4rem; background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-xs) var(--space-md); z-index: 10; }
.skip:focus { top: var(--space-md); }

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* ── N9 edge-aligned nav ───────────────────────── */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; min-height: 44px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; border: var(--rule-hair) solid var(--color-rule); }
.nav-links { display: flex; gap: var(--space-lg); font-size: var(--text-sm); }
.nav-links a { text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink-2); }
.nav-links a:hover { color: var(--color-ink); }

/* ── hero ─────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.hero h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-display); line-height: 1.08; letter-spacing: -0.035em; }
.hero h1 .last { position: relative; display: inline-block; }
.hero h1 .last svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.32em; overflow: visible; color: var(--color-accent); }
.hero-aside { display: grid; gap: var(--space-lg); align-content: end; max-width: var(--measure); }
.lede { font-size: var(--text-lg); line-height: 1.75; color: var(--color-ink-2); }
.lede strong { color: var(--color-ink); font-weight: 600; }
.status { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; color: var(--color-ink-2); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  background: var(--color-ink); color: var(--color-on-ink);
  font: 600 var(--text-sm) / 1 var(--font-body); white-space: nowrap; text-decoration: none;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-ink-hover); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.textlink { font-size: var(--text-sm); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 60rem) {
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
  .hero h1 { grid-column: 1 / span 8; }
  .hero-aside { grid-column: 9 / span 4; padding-bottom: var(--space-xs); }
}

/* ── the storyboard sheet ─────────────────────── */
.sheet { background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule); padding: clamp(var(--space-md), 3vw, var(--space-2xl)); }
.sheet-head { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.panel { margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.panel-label { display: flex; justify-content: space-between; color: var(--color-ink-3); }
.panel-label b { color: var(--color-accent); font-weight: 600; }
.panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1.5px solid var(--color-ink); background: var(--color-sheet); }
.panel figcaption { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.6; }
.panel .say { font-weight: 600; }
.panel .act { color: var(--color-ink-2); }
.sheet-note { margin-top: var(--space-md); color: var(--color-ink-3); }
@media (min-width: 48rem) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }

/* ── narrative workflow stages ────────────────── */
.workflow { padding-top: var(--space-4xl); }
.workflow-intro { max-width: 44rem; margin-bottom: var(--space-3xl); }
.workflow-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.25; letter-spacing: -0.025em; margin-bottom: var(--space-md); }
.workflow-intro p { color: var(--color-ink-2); font-size: var(--text-lg); }

.stage { border-top: var(--rule-thick) solid var(--color-rule-strong); padding-top: var(--space-lg); padding-bottom: var(--space-4xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.stage-head { display: grid; gap: var(--space-xs); }
.stage-no { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); letter-spacing: 0.04em; }
.stage h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.3; letter-spacing: -0.02em; }
.stage-body { display: grid; gap: var(--space-lg); align-content: start; max-width: var(--measure); }
.stage-body > p { color: var(--color-ink-2); }
.ticks { display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-xs); line-height: 1.6; }
.ticks li::before { content: "—"; color: var(--color-ink-3); }
.shot { margin: 0; min-width: 0; }
.shot img { width: 100%; border: var(--rule-hair) solid var(--color-rule); background: var(--color-ink); }
.shot figcaption { margin-top: var(--space-xs); color: var(--color-ink-3); }
.shot-side img { max-width: 290px; }

@media (min-width: 60rem) {
  .stage { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--space-xl); }
  .stage-head { grid-column: 1 / span 4; }
  .stage-body { grid-column: 1 / span 4; grid-row: 2; }
  .stage .shot, .stage .shot-pair { grid-column: 5 / span 8; grid-row: 1 / span 2; }
  .stage.wide .shot { grid-column: 1 / -1; grid-row: auto; }
  .stage.wide .stage-body { grid-column: 1 / span 5; max-width: none; }
  .stage.wide .shot-side { grid-column: 7 / span 4; grid-row: 1 / span 2; }
  .stage.flip .stage-head, .stage.flip .stage-body { grid-column: 9 / span 4; }
  .stage.flip .shot { grid-column: 1 / span 7; }
  .stage.export .shot { grid-column: 6 / span 6; }
}

/* ── the whole desk: annotated workspace capture ─ */
.desk { padding-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.desk-intro { max-width: 44rem; display: grid; gap: var(--space-md); }
.desk-intro h2, .catalog-intro h2, .tablet-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.25; letter-spacing: -0.025em; }
.desk-intro p, .catalog-intro p, .tablet-intro p { color: var(--color-ink-2); font-size: var(--text-lg); }
.desk-shot { margin: 0; min-width: 0; }
.desk-frame { position: relative; border: var(--rule-hair) solid var(--color-rule); background: var(--color-ink); }
.desk-frame img { width: 100%; }
.desk-shot figcaption { margin-top: var(--space-xs); color: var(--color-ink-3); }
.pin {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent);
  font: 600 var(--text-xs) / 1 var(--font-mono);
  box-shadow: 0 0 0 3px var(--color-pin-halo), 0 2px 6px var(--color-shadow);
  transition: scale var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.desk-legend { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--space-xl); counter-reset: none; }
.desk-legend li { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); column-gap: var(--space-sm); font-size: var(--text-sm); line-height: 1.6; cursor: default; }
.desk-legend li::before {
  content: attr(data-k); grid-row: 1 / span 2; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  border: 1.5px solid var(--color-accent); color: var(--color-accent); font: 600 var(--text-xs) / 1 var(--font-mono);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.desk-legend b { font-weight: 700; }
.desk-legend span { color: var(--color-ink-2); }
/* hover a legend line → its pin answers on the capture */
.desk-legend li:hover::before { background: var(--color-accent); color: var(--color-on-accent); }
.desk:has(.desk-legend li[data-k="1"]:hover) .pin[data-k="1"],
.desk:has(.desk-legend li[data-k="2"]:hover) .pin[data-k="2"],
.desk:has(.desk-legend li[data-k="3"]:hover) .pin[data-k="3"],
.desk:has(.desk-legend li[data-k="4"]:hover) .pin[data-k="4"],
.desk:has(.desk-legend li[data-k="5"]:hover) .pin[data-k="5"],
.desk:has(.desk-legend li[data-k="6"]:hover) .pin[data-k="6"] { scale: 1.45; background: var(--color-ink); }
@media (min-width: 40rem) { .desk-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .desk-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pin { width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; box-shadow: 0 0 0 2px var(--color-pin-halo); } }

/* ── catalogue: a breakdown sheet, not a card grid ─ */
.catalog { padding-top: var(--space-4xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.catalog-intro { display: grid; gap: var(--space-md); max-width: 40rem; }
.catalog-intro h2 { font-size: var(--text-display-s); line-height: 1.12; letter-spacing: -0.03em; }
.ledger { border-top: var(--rule-thick) solid var(--color-rule-strong); }
.ledger-group {
  display: flex; align-items: baseline; gap: var(--space-md);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.015em;
  padding-top: var(--space-2xl); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink);
}
.ledger-group:first-child { padding-top: var(--space-lg); }
.ledger-group .stage-no { min-width: 2.75rem; }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ledger-row h4 { margin: 0; font-size: var(--text-base); font-weight: 700; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.count { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.flow { display: block; font-size: var(--text-sm); line-height: 1.85; color: var(--color-ink-2); }
.flow li { display: inline; }
.flow li:not(:last-child)::after { content: "/"; margin-inline: 0.55em; color: var(--color-rule-mid); }
.ledger-note { margin-top: var(--space-md); color: var(--color-ink-3); font-size: var(--text-xs); }
@media (min-width: 48rem) {
  .ledger-row { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-lg); }
  .ledger-row h4 { padding-top: 0.12em; }
}
@media (min-width: 60rem) {
  .catalog { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .catalog-intro { grid-column: 1 / span 4; align-content: start; position: sticky; top: var(--space-xl); align-self: start; }
  .ledger { grid-column: 5 / span 8; }
}

/* ── tablet: storyboard arrow notation for gestures ─ */
.tablet { padding-top: var(--space-4xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.tablet-intro { display: grid; gap: var(--space-lg); align-content: start; max-width: 40rem; }
.stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.stores li { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; font-size: var(--text-sm); }
.stores li + li { padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule); }
.stores b { font-weight: 700; }
.stores span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.gestures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.gestures li { display: grid; gap: var(--space-2xs); align-content: start; font-size: var(--text-sm); line-height: 1.6; }
.gestures svg { width: 4rem; height: 4rem; margin-bottom: var(--space-xs); background: var(--color-sheet); border: 1.5px solid var(--color-ink); overflow: visible; }
.gestures b { font-weight: 700; }
.gestures span { color: var(--color-ink-2); }
.g-tip { fill: var(--color-ink); }
.g-ring { fill: none; stroke: var(--color-ink-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.g-acc { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tablet-more { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.tablet-note { color: var(--color-ink-3); font-size: var(--text-xs); max-width: var(--measure); }
@media (min-width: 40rem) { .gestures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .tablet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .tablet-intro { grid-column: 1 / span 5; grid-row: 1 / span 3; }
  .gestures, .tablet-more, .tablet-note { grid-column: 7 / span 6; }
}

/* ── browser surfaces carry the design too ─────── */
::selection { background: var(--color-accent); color: var(--color-on-accent); }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-lg); accent-color: var(--color-accent); }

/* ── keep-your-work statement ─────────────────── */
.safe { border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-3xl); display: grid; gap: var(--space-lg); }
.safe p.big { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.3; letter-spacing: -0.025em; max-width: 22em; }
.safe p.small { color: var(--color-ink-2); max-width: var(--measure); }

/* ── spec sheet ───────────────────────────────── */
.spec { padding-top: var(--space-4xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.spec h2, .faq h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.3; }
.spec dl { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.spec .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec dt { font-weight: 600; font-size: var(--text-sm); }
.spec dd { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.spec .note { margin-top: var(--space-md); color: var(--color-ink-3); font-size: var(--text-xs); }
@media (min-width: 48rem) { .spec .row { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-lg); } }
@media (min-width: 60rem) {
  .spec { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .spec h2 { grid-column: 1 / span 4; }
  .spec .spec-table { grid-column: 5 / span 8; }
}

/* ── faq ──────────────────────────────────────── */
.faq { padding-top: var(--space-4xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.faq-list { display: grid; gap: var(--space-xl); }
.faq-list h3 { font-size: var(--text-lg); font-weight: 700; line-height: 1.5; margin-bottom: var(--space-xs); }
.faq-list p { color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .faq h2 { grid-column: 1 / span 4; }
  .faq-list { grid-column: 5 / span 8; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}

/* ── closing call ─────────────────────────────── */
.closing { margin-top: var(--space-4xl); padding-block: var(--space-3xl); border-top: var(--rule-thick) solid var(--color-rule-strong); display: grid; gap: var(--space-lg); justify-items: start; }
.closing p { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.3; letter-spacing: -0.025em; }

/* ── Ft4 colophon ─────────────────────────────── */
.colophon { background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.8; }
.colophon .wrap { display: grid; gap: var(--space-lg); }
.colophon-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.colophon-links a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.colophon .disclose { max-width: 48rem; color: var(--color-ink-3); }

@media (max-width: 40rem) {
  .nav-links { gap: var(--space-md); }
  .nav-anchor { display: none !important; }
  .stage { padding-bottom: var(--space-3xl); }
  .workflow { padding-top: var(--space-3xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  html { scroll-behavior: auto; }
  .btn:hover .arrow { transform: none; }
}

/* pin coordinates on the workspace capture (CSP forbids inline style) */
.pin[data-k="1"] { --x: 13%;  --y: 3.4%; }
.pin[data-k="2"] { --x: 1.1%; --y: 24%; }
.pin[data-k="3"] { --x: 22%;  --y: 30%; }
.pin[data-k="4"] { --x: 79%;  --y: 32%; }
.pin[data-k="5"] { --x: 93%;  --y: 20%; }
.pin[data-k="6"] { --x: 62%;  --y: 79%; }

@media (max-width: 26rem) {
  .stores { grid-template-columns: minmax(0, 1fr); }
  .stores li { grid-auto-flow: column; justify-content: space-between; align-items: baseline; padding: var(--space-sm) 0; }
  .stores li + li { padding-left: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
}