:root {
  color-scheme: light;
  --bg: #f8faf9;
  --surface: #ffffff;
  --wash: #eef3f1;
  --ink: #101819;
  --ink-2: #445254;
  --ink-3: #687576;
  --line: #dce4e1;
  --accent: #08766e;
  --accent-deep: #055d57;
  --accent-wash: #e3f2ee;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Vertical rhythm — one scale for the whole page. The largest steps separate
     fluid display type, so they scale with the viewport like that type; the
     smaller steps separate fixed body-size content and stay fixed. The ladder
     descends boundary (top + bottom) > heading-block > block > panel at every
     width — do not let a step overtake the one above it. */
  --space-section-top: 2.75rem;  /* fixed: the sticky header clears the section
                                    kicker through this inset alone (§14) */
  --space-section-bottom: clamp(2.75rem, 2vw + 1.45rem, 3.5rem);
  --space-heading-block: clamp(2.75rem, 0.8vw + 2.3rem, 3.125rem); /* section heading -> first block */
  --space-block: 2.5rem;         /* block -> block inside a section */
  --space-panel: 2rem;           /* block -> block inside a panel */
  --space-subrule: 2rem;         /* padding after an in-section divider */
  --space-caption: 1rem;         /* content -> footnote/caption */

  /* Boxes and measures */
  --pad-box: 1.5rem;             /* card and grid-cell padding */
  --pad-panel: 3rem;             /* full-width panel block padding (2 x --pad-box) */
  --label-col: 10rem;            /* label column in label/content rows */
  --measure-prose: 48rem;
  --measure-heading: 42rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: clamp(1rem, 0.96rem + 0.12vw, 1.0625rem);
  /* Anchor dividers scroll beneath the sticky header; the section content's
     own top padding keeps its heading readable below the shell. */
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 0.9375rem/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
figcaption,
dl,
dt,
dd,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.case {
  width: min(100% - 3rem, 75rem);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  padding: 0.625rem 0.875rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.55rem;
  white-space: nowrap;
}

.brand-mark {
  width: 1.625rem;
  height: 1.625rem;
  object-fit: contain;
}

.brand strong {
  font: 700 1rem/1 var(--font-display);
  letter-spacing: -0.02em;
}

.brand-sub {
  padding-left: 0.55rem;
  border-left: 1px solid var(--line);
  color: var(--ink-3);
  font: 500 0.625rem/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.kicker {
  color: var(--ink-3);
  font: 500 0.6875rem/1.45 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.kicker span {
  margin-right: 0.625rem;
  color: var(--accent);
  font-weight: 600;
}

/* Block label — same mono/uppercase role as .kicker, dt and .evidence-status. */
.preview-label {
  color: var(--ink-3);
  font: 600 0.6875rem/1.45 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* --accent-wash needs the darker ink for AA contrast at label size. */
.role-note .preview-label {
  color: var(--ink-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.625rem;
  padding: 0.7rem 1.05rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.8125rem/1 var(--font-ui);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.btn--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.btn--primary:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.case-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.3rem 1.5rem;
  min-height: 0;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--line);
}

.case-top::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  backdrop-filter: blur(12px);
  content: '';
}

.case-top nav {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.case-top nav::-webkit-scrollbar {
  display: none;
}

.case-top nav a {
  flex: none;
  color: var(--ink-2);
  font-size: 0.78125rem;
  font-weight: 500;
}

.case-top nav a:hover {
  color: var(--accent-deep);
}

.case-hero {
  min-height: 0;
  padding: var(--space-section-top) 0 var(--space-section-bottom);
}

.hero-copy {
  max-width: 60rem;
}

.case-hero h1 {
  max-width: 60rem;
  margin-top: 1.5rem;
  font: 600 clamp(2.25rem, 4.4vw, 4rem)/1.02 var(--font-display);
  letter-spacing: -0.04em;
}

.case-lede {
  max-width: var(--measure-prose);
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.65;
}

.case-status {
  max-width: 60rem;
  margin-top: 1.25rem;
  color: var(--accent-deep);
  font: 600 0.6875rem/1.6 var(--font-mono);
  letter-spacing: 0.03em;
}

#product .case-status {
  margin-top: 1.5rem;
}

.case-status p + p {
  margin-top: 0.25rem;
}

.case-status strong {
  color: var(--ink-2);
}

.hero-ownership {
  max-width: 60rem;
}

.term {
  position: relative;
  display: inline-block;
}

.term__trigger {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: underline dotted;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.12em;
  cursor: help;
}

.term__trigger:hover {
  color: var(--accent-deep);
}

.term__tooltip {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  z-index: 50;
  display: none;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.65rem 0.75rem;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font: 500 0.75rem/1.45 var(--font-ui);
  letter-spacing: 0;
  text-align: left;
  pointer-events: none;
}

.term:hover .term__tooltip,
.term__trigger:focus-visible + .term__tooltip,
.term__trigger[aria-expanded='true'] + .term__tooltip {
  display: block;
}

.term--align-start .term__tooltip {
  left: 0;
  transform: none;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--measure-prose);
  margin-top: var(--space-block);
  border-top: 1px solid var(--ink);
}

.case-meta div {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.case-meta div:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.case-meta dt {
  color: var(--ink-3);
  font: 500 0.625rem/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.case-meta dd {
  margin-top: 0.3rem;
  font-size: 0.78125rem;
  font-weight: 600;
}

.product-carousel {
  --product-carousel-media-width: clamp(14rem, calc(70.4svh - 4.225rem), 24rem);
  --product-carousel-copy-width: 25rem;
  /* Reserved so the controls sit at one fixed offset on every slide. Measured
     against the longest approved slide copy in this column; `min-height` keeps
     longer copy from ever being clipped. Recalibrated per breakpoint — see
     §5.4. */
  --product-carousel-caption-height: 13.5rem;
  margin-top: var(--space-block);
  padding-top: var(--space-subrule);
  border-top: 1px solid var(--line);
}

.product-carousel__stage {
  display: grid;
  grid-template-columns: var(--product-carousel-media-width) minmax(18rem, var(--product-carousel-copy-width));
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: var(--pad-box);
  padding: var(--pad-box);
  border: 1px solid var(--ink);
  background: var(--surface);
}

.product-carousel__slide[hidden] {
  display: none;
}

.product-carousel__slides,
.product-carousel__slide:not([hidden]),
.product-carousel__slide figure {
  display: contents;
}

.product-carousel__image-frame {
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1070 / 1520;
  border: 1px solid var(--ink);
  background: var(--wash);
  box-shadow: 0 2rem 4.5rem -3.5rem rgba(16, 24, 25, 0.45);
}

.product-carousel__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-carousel__slide figcaption span {
  display: block;
  color: var(--accent-deep);
  font: 600 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.product-carousel__slide figcaption {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--product-carousel-caption-height);
}

.product-carousel__slide figcaption strong {
  display: block;
  max-width: 24rem;
  margin-top: 1rem;
  font: 600 clamp(1.5rem, 3vw, 2.25rem)/1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.product-carousel__slide figcaption p {
  max-width: 25rem;
  margin-top: 1rem;
}

.product-carousel__slide figcaption .product-carousel__credit {
  margin-top: 0.75rem;
  color: var(--ink-3);
}

.product-carousel__credit small {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.5;
}

.product-carousel__footer {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  width: 100%;
}

.product-carousel__controls {
  display: inline-flex;
  align-items: center;
}

.carousel-button {
  position: relative;
  display: grid;
  width: 2.625rem;
  height: 2.625rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

[data-carousel-next] {
  margin-left: -1px;
}

.carousel-button:hover:not(:disabled) {
  z-index: 1;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.carousel-button:focus-visible {
  z-index: 2;
}

.carousel-button:disabled {
  border-color: var(--line);
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 0.45;
}

.carousel-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

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

/* Supporting prose — one size and one line height across the page. */
.section-heading > p:not(.kicker),
.qa-scorecard__heading > div > p,
.qa-subheading > div > p,
.product-carousel__slide figcaption p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Card and grid-cell copy — one size and one line height across the page. */
.workflow p,
.decision-list article > p:last-child,
.qa-selection__steps p,
.qa-cost__calculation p:last-child,
.qa-scorecard__metrics dd p,
.product-journey li p,
.reliability-boundary section > p:last-child,
.evidence-card li,
.reliability-boundary li {
  color: var(--ink-2);
  font-size: 0.84375rem;
  line-height: 1.6;
}

/* Cell / step title — one role for workflow, decision and selection cells. */
.workflow h3,
.decision-list h3,
.qa-selection__steps strong {
  display: block;
  margin-top: 1.25rem;
  font: 600 1.125rem/1.3 var(--font-display);
  letter-spacing: -0.015em;
}

/* Sub-block heading, major. */
.qa-scorecard__heading h3,
.reliability-boundary h2,
.product-carousel__heading h2 {
  max-width: var(--measure-heading);
  font: 600 clamp(1.35rem, 2.5vw, 2rem)/1.15 var(--font-display);
  letter-spacing: -0.025em;
}

/* Sub-block heading, minor. */
.qa-subheading h4,
.product-journey h2 {
  font: 600 clamp(1.15rem, 2vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

/* Repeated equal-weight cells share one joined-hairline construction. */
.evidence-grid,
.decision-list,
.qa-selection__steps,
.qa-scorecard__metrics,
.qa-cost__calculation,
.reliability-boundary > div {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.evidence-card,
.decision-list article,
.qa-selection__steps li,
.qa-scorecard__metrics > div,
.qa-cost__calculation > div,
.reliability-boundary section {
  min-width: 0;
  padding: var(--pad-box);
  background: var(--surface);
}

.case-section {
  padding: var(--space-section-top) 0 var(--space-section-bottom);
  border-top: 1px solid var(--ink);
}

/* One gap between a section heading and the block that follows it. */
.section-heading + * {
  margin-top: var(--space-heading-block);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 1.5rem 4rem;
  align-items: start;
}

.section-heading .kicker {
  grid-column: 1 / -1;
}

.section-heading h2,
.ai-evaluation-intro h2 {
  font: 600 clamp(1.75rem, 4vw, 3rem)/1.06 var(--font-display);
  letter-spacing: -0.035em;
}

.section-heading h2 {
  max-width: 60rem;
}

.ai-evaluation-intro h2 {
  max-width: 60rem;
}

.section-heading--statement h2 {
  grid-column: 1 / -1;
}

.section-heading > p:not(.kicker) {
  max-width: 32rem;
}

.workflow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pad-box);
  margin-top: var(--space-block);
}

.workflow--four {
  grid-template-columns: repeat(4, 1fr);
}

.workflow li {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* Step / item number — one marker role across workflow, decision, selection
   and journey lists. Only the colour changes, and only where it carries
   meaning (the muted "Without FlatFeed" column). */
.workflow li > span,
.decision-number,
.qa-selection__steps span,
.product-journey li span {
  display: block;
  color: var(--accent);
  font: 600 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.07em;
}

.workflow p {
  margin-top: 0.75rem;
}

.decision-list {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-block);
}

.decision-list--four {
  grid-template-columns: repeat(4, 1fr);
}

.decision-list--three {
  grid-template-columns: repeat(3, 1fr);
}

.decision-list article > p:last-child {
  max-width: 60ch;
  margin-top: 0.75rem;
}

@supports (grid-template-rows: subgrid) {
  .workflow li,
  .decision-list article {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.role-note {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  gap: var(--pad-box);
  margin-top: var(--space-block);
  padding: var(--pad-box);
  /* 2px accent bar instead of a 1px hairline: pull the inline padding back by
     that 1px so every panel shares one inner spine. */
  padding-left: calc(var(--pad-box) - 1px);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
}

.role-note__body,
.role-note__scope {
  max-width: var(--measure-prose);
}

.role-note__body {
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.role-note--large {
  margin-top: var(--space-block);
}

.role-note--stacked {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.decision-ownership {
  margin-top: var(--space-heading-block);
}

.role-note > .role-note__scope {
  margin-top: 0.25rem;
  color: var(--ink-3);
  font: 500 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.case-details {
  margin-top: var(--space-block);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.case-details + .case-details {
  margin-top: 1rem;
}

.case-details > summary {
  padding: 1rem 0;
  color: var(--accent-deep);
  font: 600 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.case-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.case-details > .qa-field-results,
.case-details > .qa-cost {
  margin-top: 0;
  padding: var(--space-panel) 0;
  border-top: 0;
}

.case-details > .prototype-limits {
  padding: var(--space-panel) 0;
}

.prototype-limits {
  max-width: var(--measure-prose);
  color: var(--ink-2);
  line-height: 1.65;
}

.prototype-limits p + p {
  margin-top: 0.75rem;
}

.next-question {
  max-width: var(--measure-prose);
  margin-top: var(--space-block);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.65;
}

.evidence-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-block);
}

.evidence-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
  font: 600 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.evidence-status i {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

.evidence-card ul,
.reliability-boundary ul {
  margin-top: 0.5rem;
}

.evidence-card li,
.reliability-boundary li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}

.evidence-card li:last-child,
.reliability-boundary li:last-child {
  border-bottom: 0;
}

.evidence-card li::before,
.reliability-boundary li::before {
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--accent);
  content: '';
}

.evidence-footnote {
  max-width: 44rem;
  margin-top: var(--space-caption);
  color: var(--ink-3);
  font: 400 0.71875rem/1.6 var(--font-mono);
}

.qa-scorecard {
  margin-top: var(--space-block);
  padding: var(--pad-box);
  border: 1px solid var(--ink);
  background: var(--surface);
}

.qa-example {
  margin-top: var(--space-block);
  padding: var(--pad-box);
  border: 1px solid var(--line);
  background: var(--surface);
}

.qa-example h3 {
  max-width: var(--measure-heading);
  font: 600 clamp(1.15rem, 2vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.qa-example__comparison {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1px;
  max-width: none;
  margin-top: var(--space-panel);
  border: 1px solid var(--line);
  background: var(--line);
}

.qa-example__row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  height: 100%;
  background: var(--surface);
}

.qa-example__row > p {
  display: flex;
  align-items: center;
  padding: var(--pad-box);
  border-right: 1px solid var(--line);
  color: var(--ink-3);
  font: 600 0.6875rem/1.45 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qa-example__row--source blockquote {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--pad-box);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.qa-example__values {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.9fr) minmax(14rem, 1.7fr) minmax(6rem, 0.75fr) minmax(3rem, 0.4fr);
  gap: 1px;
  height: 100%;
  background: var(--line);
}

.qa-example__value {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--pad-box);
  background: var(--surface);
  color: var(--ink);
  font: 500 0.8125rem/1.5 var(--font-mono);
  overflow-wrap: anywhere;
}

.qa-example__value--mismatch {
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-weight: 600;
}

.qa-example__result {
  max-width: var(--measure-prose);
  margin-top: var(--space-panel);
  padding: var(--pad-box);
  padding-left: calc(var(--pad-box) - 1px);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  color: var(--ink-2);
  font-size: 0.84375rem;
  line-height: 1.6;
}

.qa-example__result strong {
  color: var(--ink);
}

.qa-scorecard__heading {
  display: block;
}

.qa-scorecard__heading > div > p {
  max-width: var(--measure-prose);
  margin-top: 0.75rem;
}

.qa-selection {
  margin-top: var(--space-block);
  padding-top: var(--space-subrule);
  border-top: 1px solid var(--line);
}

.qa-selection__steps {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--pad-box);
  list-style: none;
}

.qa-selection__steps p {
  margin-top: 0.75rem;
}

.qa-subheading > div > p {
  margin-top: 0.75rem;
}

.qa-scorecard__metrics {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-panel);
}

.qa-scorecard__metrics dt {
  min-height: 2rem;
  color: var(--ink-2);
  font: 600 0.6875rem/1.35 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qa-scorecard__metrics dd {
  margin-top: 1rem;
}

.qa-scorecard__metrics strong {
  display: block;
  color: var(--accent);
  font: 600 clamp(1.9rem, 3vw, 2.75rem)/1 var(--font-display);
  letter-spacing: -0.04em;
}

.qa-scorecard__metrics span {
  display: block;
  margin-top: 0.75rem;
  color: var(--ink-3);
  font: 400 0.71875rem/1.5 var(--font-mono);
}

.qa-scorecard__metrics dd p {
  margin-top: 0.75rem;
}

.qa-scorecard__metrics dd p + p {
  margin-top: 0.4rem;
}

.qa-scorecard__metrics b {
  color: var(--ink);
  font-weight: 600;
}

.qa-field-results,
.qa-cost {
  margin-top: var(--space-block);
  padding-top: var(--space-subrule);
  border-top: 1px solid var(--line);
}

.qa-subheading {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  gap: var(--pad-box);
}

.qa-subheading--full {
  grid-template-columns: 1fr;
}

.qa-subheading > div > p {
  max-width: var(--measure-prose);
}

.qa-subheading a,
.qa-evidence-links a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.qa-table-wrap {
  margin-top: var(--pad-box);
  overflow-x: auto;
}

.qa-table {
  width: 100%;
  min-width: 47rem;
  border-collapse: collapse;
  text-align: left;
}

.qa-table th,
.qa-table td {
  padding: 0.75rem;
  border: 1px solid var(--line);
  vertical-align: middle;
}

.qa-table thead th {
  background: var(--wash);
  color: var(--ink-2);
  font: 600 0.625rem/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.qa-table tbody th {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.qa-table tbody td {
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

.qa-stop {
  margin: var(--space-panel) 0 0;
  padding: var(--pad-box);
  /* 2px accent bar instead of a 1px hairline: pull the inline padding back by
     that 1px so every panel shares one inner spine. */
  padding-left: calc(var(--pad-box) - 1px);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
  font: 500 clamp(1rem, 1.8vw, 1.2rem)/1.6 var(--font-display);
}

.qa-cost__calculation {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--pad-box);
}

.qa-cost__calculation strong,
.qa-cost__calculation span {
  display: block;
}

.qa-cost__calculation strong {
  margin-top: 1rem;
  color: var(--accent);
  font: 600 clamp(1.75rem, 3vw, 2.5rem)/1 var(--font-display);
  letter-spacing: -0.035em;
}

.qa-cost__calculation span {
  margin-top: 0.75rem;
  color: var(--ink-3);
  font: 400 0.71875rem/1.5 var(--font-mono);
}

.qa-cost__calculation p:last-child {
  margin-top: 0.75rem;
}

.qa-evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: var(--space-panel);
  padding-top: var(--pad-box);
  border-top: 1px solid var(--line);
  font-size: 0.78125rem;
}

.case-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  /* The filled panel draws no border, so its inline padding absorbs the 1px
     the bordered panels spend on their hairline: one inner spine page-wide. */
  padding: var(--pad-panel) calc(var(--pad-box) + 1px);
  background: var(--ink);
  color: #fff;
}

.case-footer {
  margin-top: var(--space-section-top);
  padding-top: var(--space-caption);
  padding-bottom: var(--space-section-top);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.case-cta h2 {
  max-width: var(--measure-heading);
  font: 600 clamp(1.75rem, 3.5vw, 2.75rem)/1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.case-cta__copy {
  max-width: var(--measure-prose);
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.case-prose {
  max-width: 42.5rem;
}

.case-prose p {
  margin-bottom: 1rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (max-width: 68rem) {
  .case-top {
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
  }

  .case-top nav {
    gap: 1rem;
    justify-content: center;
  }

  .section-heading {
    grid-template-columns: 1fr 1fr;
  }

  .workflow {
    grid-template-columns: repeat(3, 1fr);
  }

  .workflow--four,
  .decision-list--four {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 56rem) {
  html {
    scroll-padding-top: 1rem;
  }

  .case-top {
    position: static;
    grid-template-columns: 1fr;
    padding-block: 0;
    padding-top: 0.35rem;
  }

  .case-top nav {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 1rem;
    padding: 0.45rem 0;
    overflow: visible;
    border-top: 1px solid var(--line);
  }

  .case-top nav a {
    padding: 0.2rem 0;
  }

  .hero-copy {
    max-width: 52rem;
  }

  .product-carousel {
    /* Below 56rem the two-column composition squeezes the commentary to about
       200px, which both breaks the measure and makes the seventh slide's
       attribution overflow the reserved caption height. The slide becomes the
       vertical stack here instead, and the reserve is recalibrated for that
       column so the controls still sit at one fixed offset on every slide. */
    --product-carousel-caption-height: 12.5rem;
    margin-top: var(--space-block);
    padding-top: var(--space-subrule);
  }

  .product-carousel__stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1.25rem;
    align-items: start;
  }

  .product-carousel__slides,
  .product-carousel__slide:not([hidden]),
  .product-carousel__slide figure {
    display: contents;
  }

  .product-carousel__image-frame {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, var(--product-carousel-media-width));
    margin-inline: auto;
  }

  .product-carousel__slide figcaption {
    grid-column: 1;
    grid-row: 2;
    /* Top-aligned in the stack: leftover reserve must fall between the comment
       and the controls, never between the screenshot and its own comment. */
    justify-content: flex-start;
    width: min(100%, 26rem);
    margin-inline: auto;
  }

  .product-carousel__slide figcaption strong,
  .product-carousel__slide figcaption p {
    margin-top: 0.75rem;
  }

  .product-carousel__footer {
    grid-column: 1;
    grid-row: 3;
    width: min(100%, 26rem);
    margin-inline: auto;
  }

  .product-carousel__controls {
    grid-column: 1;
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .section-heading .kicker {
    grid-column: auto;
  }

  .decision-list {
    grid-template-columns: 1fr;
  }

  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .qa-scorecard__heading,
  .qa-subheading,
  .qa-scorecard__metrics {
    grid-template-columns: 1fr;
  }

  .qa-scorecard__heading,
  .qa-subheading {
    gap: 0.75rem;
  }

  .qa-scorecard__metrics dt {
    min-height: 0;
  }

  .qa-selection__steps,
  .qa-cost__calculation {
    grid-template-columns: 1fr;
  }

  .case-cta {
    display: block;
    padding: var(--space-panel) calc(var(--pad-box) + 1px);
  }

  .case-lede,
  .ai-evaluation-intro > p {
    max-width: min(var(--measure-prose), 72ch);
  }

}

@media (min-width: 40.01rem) and (max-height: 40rem) {
  .product-carousel {
    --product-carousel-media-width: clamp(14rem, calc(70.3svh - 5.75rem), 18.75rem);
  }

  .product-carousel__stage {
    padding: 0.5rem;
  }

  .product-carousel__footer {
    margin-top: 0.375rem;
  }

  .product-carousel__controls {
    display: inline-flex;
  }

  .carousel-button {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (max-width: 40rem) {
  .case {
    width: min(100% - 2rem, 75rem);
    /* One tighter box padding for every panel and cell on small screens, so the
       inner spine stays single. */
    --pad-box: 1.25rem;
  }

  /* Keep the compact brand within the narrow page spine. */
  .brand-sub {
    display: none;
  }

  .case-meta {
    grid-template-columns: 1fr;
  }

  .case-meta div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .workflow {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .role-note {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .case-cta {
    padding: var(--space-panel) calc(var(--pad-box) + 1px);
  }

  .case-top nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.product-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
  margin-top: var(--space-block);
  align-items: stretch;
}

.product-journey__panel {
  min-width: 0;
  padding: var(--pad-box);
  border: 1px solid var(--line);
}

.product-journey__panel--without {
  background: var(--wash);
}

/* Same accent-bar idiom as .role-note and .qa-stop. */
.product-journey__panel--with {
  /* 2px accent bar instead of a 1px hairline: pull the inline padding back by
     that 1px so every panel shares one inner spine. */
  padding-left: calc(var(--pad-box) - 1px);
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

.product-journey ol {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.product-journey li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

/* Inline marker: optical offset onto the first line of the copy. */
/* Separators between items, no trailing rule — same as the evidence and
   boundary lists. */
.product-journey li:last-child {
  border-bottom: 0;
}

.product-journey li span {
  padding-top: 0.2rem;
}

.product-journey__panel--without li span {
  color: var(--ink-3);
}

.product-journey__panel--with li span {
  color: var(--accent-deep);
}




.product-journey__arrow {
  display: grid;
  place-items: center;
  color: var(--accent-deep);
}

.product-journey__arrow svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reliability-boundary {
  grid-column: 1 / -1;
  margin-top: var(--space-block);
  padding-top: var(--space-subrule);
  border-top: 1px solid var(--line);
}

.reliability-boundary header {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  gap: var(--pad-box);
}

.reliability-boundary > div {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--pad-box);
}

.reliability-boundary section > p:last-child {
  margin-top: 0.75rem;
}

.ai-evaluation-intro {
  max-width: 60rem;
  margin-top: 1.5rem;
}

.ai-evaluation-intro > p {
  max-width: var(--measure-prose);
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (max-width: 56rem) {
  .product-journey {
    grid-template-columns: 1fr;
  }

  .product-journey__arrow {
    min-height: 3rem;
  }

  .product-journey__arrow svg {
    transform: rotate(90deg);
  }

  .qa-example__row {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .qa-example__row > p {
    padding-bottom: 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 40rem) {
  .reliability-boundary header,
  .reliability-boundary > div {
    grid-template-columns: 1fr;
  }

  .qa-example__values {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.75rem 0;
    padding: var(--pad-box);
    background: var(--surface);
  }

  .qa-example__value {
    padding: 0;
    background: transparent;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .qa-example__value:nth-child(2) {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .qa-example__value:not(:last-child)::after {
    margin: 0 0.75rem;
    color: var(--ink-3);
    font-weight: 400;
    content: '·';
  }

  .qa-example__value--mismatch {
    color: var(--accent-deep);
  }
}

.demo-listing-page {
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.demo-listing-page .brand {
  margin-bottom: 2.5rem;
}

.demo-listing-page h1 {
  max-width: 40rem;
  margin-top: 0.9rem;
  font: 600 clamp(2rem, 5vw, 3.25rem)/1.05 var(--font-display);
  letter-spacing: -0.035em;
}

.demo-listing-deck {
  max-width: 38rem;
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.65;
}

.demo-listing-disclosure {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
}

.demo-listing-disclosure strong {
  font: 600 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-listing-disclosure p {
  margin-top: 0.45rem;
  color: var(--ink-2);
  font-size: 0.84375rem;
  line-height: 1.6;
}

.demo-listing-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
  border: 1px solid var(--line);
}

.demo-listing-facts div {
  min-height: 4.25rem;
  padding: 0.8rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.demo-listing-facts div:nth-child(even) {
  border-right: 0;
}

.demo-listing-facts dt {
  color: var(--ink-3);
  font: 500 0.625rem/1.35 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-listing-facts dd {
  margin-top: 0.25rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.demo-raw {
  margin-top: 2rem;
}

.demo-raw pre {
  overflow: auto;
  margin-top: 0.7rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: 400 0.75rem/1.6 var(--font-mono);
  white-space: pre-wrap;
}

.demo-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (max-width: 40rem) {
  .demo-listing-page {
    padding-inline: 1rem;
  }

  .demo-listing-facts {
    grid-template-columns: 1fr;
  }

  .demo-listing-facts div,
  .demo-listing-facts div:nth-child(even) {
    border-right: 0;
  }
}