/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * hero: H2 split diptych (ratio=5/7, right=product capture, divider=negative space)
 * tour: F5 annotated screenshot (callouts=numbered pins, frame=plain hairline, anchor=text-led)
 * roles: ruled rows · proof: T4 counts (4-up, display, under) + T1 marginalia (roman large, signed, none)
 * deploy: F3 spec sheet (columns=5, rules=every row, numbers=tabular) · guides: index rows · faq: S3 pinned head
 * cta: C4 sticky bar (reveal=after tour, anchored=bottom, shadow=hairline) · nav: N13 · footer: Ft1
 * theme: custom · vibe: "precision instrument, institutional navy, teal as signal"
 * paper: oklch(98.6% 0.005 215) · accent: oklch(53.2% 0.088 194) · display: Space Grotesk · body: IBM Plex Sans
 * axes: light / grotesk-sans / cool · enrichment: none (real product captures) · studied: no · context: user-provided
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) at 320/375/414/768/1280/1440
 * gate 38 waived by design.md: IBM Plex Mono is the declared label role, not an outlier
 */

/* ── Shared section head ───────────────────────────────────── */
.wb-head { max-width: 44rem; margin-bottom: var(--space-2xl); }
.wb-head h2 { margin: 0 0 var(--space-sm); }
.wb-head p { margin: 0; max-width: 62ch; }
.wb-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}
.wb-head--split > div { max-width: 44rem; }

.wb-live {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}

/* ── Screenshot frame + pins ───────────────────────────────── */
.wb-shot { margin: 0; min-width: 0; }
.wb-shot__frame {
  position: relative;
  overflow: hidden;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-figure);
  box-shadow: var(--shadow-lift);
}
.wb-shot__frame img { display: block; width: 100%; height: auto; }
.wb-shot figcaption { margin-top: var(--space-sm); }

.wb-pin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent-ink);
  background: var(--color-accent);
}
.wb-pin--on {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--color-paper);
}

/* ── Hero ──────────────────────────────────────────────────── */
.wb-hero { padding-top: calc(var(--nav-h) + var(--space-2xl)); }
.wb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
}
.wb-hero__copy h1 { margin: 0 0 var(--space-lg); max-width: 13ch; }
.wb-lede { margin: 0 0 var(--space-xl); max-width: 36rem; }
.wb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.wb-hero__actions .ds-link .ds-label { margin-left: var(--space-2xs); }
.wb-hero__proof {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-xl) 0 0;
  font-size: var(--text-label);
  color: var(--color-muted);
}

.wb-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-xl);
  margin: var(--space-2xl) 0 0;
  padding-block: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
}
.wb-sources dt { margin: 0; }
.wb-sources dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.wb-sources dd.wb-sources__more {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
}

/* ── Tour ──────────────────────────────────────────────────── */
.wb-tour { padding-block: var(--space-3xl); }
.wb-step {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
  align-items: start;
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.wb-step + .wb-step { margin-top: var(--space-3xl); }
.wb-step__copy { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.wb-step__copy h3 { margin: 0 0 var(--space-sm); }
.wb-step__copy > p { margin: 0 0 var(--space-lg); }
.wb-notes { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.wb-notes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  line-height: 1.45;
  color: var(--color-ink);
}

/* ── Roles ─────────────────────────────────────────────────── */
.wb-roles { padding-block: var(--space-xl) var(--space-3xl); }
.wb-roles .wb-head { margin-bottom: var(--space-xl); }
.wb-role {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.wb-role:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.wb-role__name h3 { margin: 0 0 var(--space-xs); }
.wb-role__name .ds-label { margin: 0; }
.wb-role__what { margin: 0; color: var(--color-ink); }
.wb-role__list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.wb-role__list li { position: relative; padding-left: var(--space-lg); }
.wb-role__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75rem;
  height: 1px;
  background: var(--color-accent);
}

/* ── Proof · the one dark band ─────────────────────────────── */
.wb-proof {
  padding-block: var(--space-3xl);
  color: var(--color-band-muted);
  background: var(--color-band);
}
.wb-proof__head { max-width: 44rem; }
.wb-proof h2 { margin: 0 0 var(--space-sm); color: var(--color-band-ink); }
.wb-proof__head p { margin: 0; max-width: 62ch; }
.wb-proof .ds-label,
.wb-proof .ds-caption { color: var(--color-band-muted); }

.wb-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--space-2xl) 0 0;
  border-top: var(--rule-hair) solid var(--color-band-rule);
}
.wb-counts > div { display: flex; flex-direction: column; padding: var(--space-lg) var(--space-lg) 0 0; }
.wb-counts > div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-band-rule); }
.wb-counts dt { margin: 0 0 var(--space-sm); }
.wb-counts dd {
  margin: auto 0 0;   /* bottom-align values of different sizes */
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-band-ink);
}
.wb-counts dd.wb-counts__words { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.015em; }
.wb-counts__source { margin: var(--space-lg) 0 0; }

.wb-quote {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0 0;
  padding-top: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-band-rule);
}
.wb-quote blockquote { margin: 0; }
.wb-quote blockquote p {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-band-ink);
}
.wb-quote figcaption { display: flex; flex-direction: column; gap: var(--space-2xs); }
.wb-quote__name { font-family: var(--font-display); font-weight: 600; color: var(--color-band-ink); }
.wb-quote .ds-link { align-self: flex-start; margin-top: var(--space-lg); }

/* ── Deployment · spec sheet ───────────────────────────────── */
.wb-deploy { padding-block: var(--space-3xl); }
.wb-spec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* app.css sets tr { display: grid } globally; restore real table layout */
.wb-spec tr { display: table-row; }
.wb-spec th, .wb-spec td { display: table-cell; }
.wb-spec thead th {
  padding: 0 var(--space-md) var(--space-sm) 0;
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: var(--rule-hair) solid var(--color-ink);
}
.wb-spec tbody th,
.wb-spec td {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.wb-spec tbody th {
  width: 18%;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.wb-spec td { color: var(--color-ink-2); }
.wb-tag {
  display: block;
  width: max-content;
  margin-top: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-strong);
  background: var(--color-accent-tint);
  border-radius: 4px;
}
.wb-deploy__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.wb-deploy__foot p { margin: 0; max-width: 40rem; }
.wb-deploy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }

/* ── Guides · index rows ───────────────────────────────────── */
.wb-guides { padding-block: var(--space-xl) var(--space-3xl); }
.wb-guides__more { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; }
.wb-index { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.wb-index a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  align-items: start;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xs);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-micro) var(--ease-out);
}
/* One hover signal: the row lifts one surface step */
.wb-index a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.wb-index a:active { background: var(--color-paper-3); }
.wb-index__name { display: flex; flex-direction: column; gap: var(--space-2xs); }
.wb-index__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.wb-index__desc { color: var(--color-ink-2); }
.wb-index i { align-self: center; color: var(--color-muted); }

/* ── FAQ ───────────────────────────────────────────────────── */
.wb-faq {
  padding-block: var(--space-3xl);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.wb-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
  align-items: start;
}
.wb-faq__head { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.wb-faq__head h2 { margin: 0 0 var(--space-sm); }
.wb-faq__head p { margin: 0; }
.wb-faq__list { border-top: var(--rule-hair) solid var(--color-ink); }
.wb-qa { border-bottom: var(--rule-hair) solid var(--color-rule); }
.wb-qa h3 { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.wb-qa__q {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--color-ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.wb-qa__q i {
  flex: none;
  font-size: 1.25rem;
  color: var(--color-muted);
  transition: transform var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.wb-qa__q:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.wb-qa__q[aria-expanded="true"] i { transform: rotate(45deg); color: var(--color-accent); }
.wb-qa__q:active span { color: var(--color-accent-strong); }
.wb-qa__a p { margin: 0; padding: 0 var(--space-2xl) var(--space-lg) 0; max-width: 65ch; }

/* ── Contact ───────────────────────────────────────────────── */
.wb-contact { padding-block: var(--space-3xl) var(--space-4xl); }
.wb-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.wb-contact__copy h2 { margin: 0 0 var(--space-sm); }
.wb-contact__copy > p { margin: 0 0 var(--space-xl); }
.wb-facts { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.wb-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.wb-facts dt { margin: 0; align-self: center; }
.wb-facts dd { margin: 0; color: var(--color-ink); }

/* ── C4 sticky bar ─────────────────────────────────────────── */
.wb-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--dur-short) var(--ease-in), visibility 0s linear var(--dur-short);
}
.wb-sticky.is-shown {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-short) var(--ease-out), visibility 0s;
}
.wb-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.wb-sticky p {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-weight: 500;
  color: var(--color-ink);
}

/* ── ≤ 60rem · layout collapses to one column ──────────────── */
@media (max-width: 60rem) {
  .wb-hero__grid,
  .wb-step,
  .wb-faq__grid,
  .wb-contact__grid,
  .wb-quote { grid-template-columns: minmax(0, 1fr); }
  .wb-hero__grid,
  .wb-step,
  .wb-faq__grid,
  .wb-contact__grid,
  .wb-quote { gap: var(--space-xl); }
  .wb-step__copy,
  .wb-faq__head { position: static; }
  .wb-role { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

  .wb-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); border-top: 0; }
  .wb-counts > div,
  .wb-counts > div + div { padding: var(--space-md) 0 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-band-rule); }

  .wb-sources dd.wb-sources__more { margin-left: 0; flex-basis: 100%; }

  .wb-spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wb-spec, .wb-spec tbody, .wb-spec tr, .wb-spec th, .wb-spec td { display: block; width: 100%; }
  .wb-spec tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .wb-spec tr:first-child { border-top: var(--rule-hair) solid var(--color-ink); }
  .wb-spec tbody th, .wb-spec td { padding: 0; border: 0; }
  .wb-spec tbody th { width: 100%; margin-bottom: var(--space-xs); }
  .wb-spec td::before {
    content: attr(data-label);
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .wb-index a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name arrow" "desc arrow";
    gap: var(--space-xs) var(--space-md);
  }
  .wb-index__name { grid-area: name; }
  .wb-index__desc { grid-area: desc; }
  .wb-index a > i { grid-area: arrow; }
}

/* ── ≤ 40rem · phone ───────────────────────────────────────── */
@media (max-width: 40rem) {
  .wb-hero { padding-top: calc(var(--nav-h) + var(--space-xl)); }
  .wb-hero__actions .ds-btn { width: 100%; }
  .wb-tour, .wb-proof, .wb-deploy, .wb-faq { padding-block: var(--space-2xl); }
  .wb-roles, .wb-guides { padding-bottom: var(--space-2xl); }
  .wb-contact { padding-block: var(--space-2xl) var(--space-3xl); }
  .wb-step + .wb-step { margin-top: var(--space-2xl); }
  .wb-head { margin-bottom: var(--space-xl); }
  .wb-quote { margin-top: var(--space-2xl); padding-top: var(--space-xl); }
  .wb-counts dd { font-size: var(--text-h2); }
  .wb-pin--on { width: 1.25rem; height: 1.25rem; box-shadow: 0 0 0 2px var(--color-paper); }
  .wb-qa__a p { padding-right: 0; }
  .wb-sticky p { display: none; }
  .wb-sticky .ds-btn { width: 100%; }
}