/* Website-wide card curvature; the light hero keeps its original shape. */
:root { --radius-card: 16px; --radius-panel: 16px; }
:root[data-theme="dark"] {
  --radius-hero: 16px;
  --surface-page: #0d0e10;
  --surface-card: #1b1d20;
  --white: #1b1d20;
  --surface-sunken: #131518;
  --gray-1000: #ededee;
  --gray-400: #969ba3;
  --text-body: #ededee;
  --text-muted: #b5bac2;
  --text-subtle: #969ba3;
  --border-hairline: #30343a;
  --border-soft: #30343a;
  --border-strong: #505760;
  --button-primary-bg: #d9dce1;
  --button-primary-text: #141619;
  --button-secondary-bg: #23262b;
  --button-secondary-text: #ededee;
  --button-secondary-border: #414750;
  --chrome-bg: #0d0e10;
  --marquee-fade: #0d0e10;
}

/* Landing-only adaptations: keep the shared app and other marketing pages intact. */
:root[data-theme="dark"] .cn-landing {
  --homepage-hero: var(--surface-sunken);
  --grad-hero-soft: var(--surface-sunken);
  --grad-band: var(--surface-sunken);
  --grad-card-tint: var(--white);
  --radius-card: 16px;
  --radius-hero: 16px;
  --radius-md: 4px;
  --radius-btn: 4px;
  --shadow-card: none;
  --shadow-float: none;
  --shadow-ring-brand: none;
  --lift-hover: none;
  --ink-brand: var(--text-body);
  --ink-brand-soft: var(--text-muted);
  --brand-100: var(--surface-sunken);
}
:root[data-theme="dark"] .cn-capabilities { background: var(--surface-page) !important; }
:root[data-theme="dark"] .cn-learning-item { background: var(--surface-card); }
:root[data-theme="dark"] .cn-head-on { background: var(--surface-page); }
.cn-landing *, .cn-landing *::before, .cn-landing *::after { min-width: 0; }
.cn-landing .cn-static-card {
  transition: transform var(--dur-base) var(--ease-out);
  will-change: transform;
}
.cn-landing .cn-static-card:hover,
.cn-landing .cn-static-card:focus-within {
  transform: translateY(-4px);
}
/* Review-agent cards: word on the front, description on the back. The faces
   share one grid cell, so the card is as tall as its longer side and the turn
   never changes the layout around it. */
.cn-flip {
  display: block; width: 100%; height: 100%; min-height: 150px; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  perspective: 1000px; -webkit-tap-highlight-color: transparent;
}
.cn-flip-inner {
  display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease-out);
}
.cn-flip-face {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; border-radius: var(--radius-card);
  background: var(--white); border: 1px solid var(--border-hairline, #f3e8e3); box-shadow: var(--shadow-card);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.cn-flip-front h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0; text-align: center; }
.cn-flip-back { transform: rotateY(180deg); }
.cn-flip-back p { font: var(--text-body-16); color: var(--text-muted); margin: 0; text-align: center; max-width: 24ch; }
.cn-flip:focus-visible { outline: 2px solid var(--brand-main); outline-offset: 4px; border-radius: var(--radius-card); }
@media (hover: hover) {
  .cn-flip:hover .cn-flip-inner, .cn-flip:focus-visible .cn-flip-inner { transform: rotateY(180deg); }
}
@media (hover: none) {
  .cn-flip.is-flipped .cn-flip-inner { transform: rotateY(180deg); }
}
:root[data-theme="dark"] .cn-landing [style*="background: var(--grad-icon)"] {
  background: var(--surface-sunken) !important;
  color: var(--text-body) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.cn-findings-viewport {
  overflow: hidden;
  padding-block: 4px 16px;
}
.cn-findings-track {
  display: flex;
  width: max-content;
  /* 52s keeps the original 44s pace in px/s now that each card is 380px, not 318px. */
  animation: cn-flow 52s linear infinite;
}
/* GitHub review replicas. Built at GitHub's own size inside a 940x710 stage, then zoomed so
   every card is the same size. `zoom` re-lays text out at the smaller size, so it stays sharp. */
.cn-findings-card {
  flex: 0 0 auto;
  width: 380px;
  height: 287px;
  margin-right: 24px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #0d1117;
  border: 1px solid var(--border-hairline);
  transition: border-color 220ms var(--ease-out);
}
.cn-findings-card:hover { border-color: var(--border-strong); }
.cn-ghr-stage { width: 940px; height: 710px; display: grid; place-items: center; zoom: .4043; }
.cn-ghr {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: #0d1117;
  color: #f0f6fc;
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  text-align: left;
  letter-spacing: normal;
}
.cn-ghr *, .cn-ghr *::before { box-sizing: border-box; }
.cn-ghr p { margin: 0; }
.cn-ghr b { font-weight: 600; }
.cn-ghr-ico { display: inline-block; flex: 0 0 auto; fill: currentColor; vertical-align: text-bottom; }
.cn-ghr-muted { color: #9198a1; }
.cn-ghr-u { text-decoration: underline; text-underline-offset: .2rem; text-decoration-thickness: 1px; }
.cn-ghr-right { margin-left: auto; }
.cn-ghr-small { font-size: 12px; }
.cn-ghr-link { color: #4493f8; }
.cn-ghr-mono { font: 12px/20px ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.cn-ghr-name { color: #f0f6fc; }
.cn-ghr-label { padding: 0 7px; border: 1px solid #3d444d; border-radius: 2em; font-size: 12px; font-weight: 500; line-height: 18px; color: #9198a1; }
.cn-ghr-av40, .cn-ghr-av24, .cn-ghr-av20 { display: block; flex: 0 0 auto; border-radius: 50%; }
.cn-ghr-av40 { width: 40px; height: 40px; }
.cn-ghr-av24 { width: 24px; height: 24px; }
.cn-ghr-av20 { width: 20px; height: 20px; }
.cn-ghr-av40.is-bot { border-radius: 6px; }
.cn-ghr-av24.is-bot, .cn-ghr-av20.is-bot { border-radius: 4px; }
.cn-ghr-line { position: absolute; top: 0; bottom: 0; left: 73px; width: 2px; background: #3d444d; }
.cn-ghr-badge { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #212830; color: #9198a1; box-shadow: 0 0 0 2px #0d1117; }
.cn-ghr-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid #3d444d; border-radius: 6px; background: #212830; color: #f0f6fc; font-size: 14px; font-weight: 500; white-space: nowrap; }
.cn-ghr-btn.is-sm { height: 28px; padding: 0 12px; font-size: 12px; }
.cn-ghr-btn.is-disabled { color: #656c76; background: #212830; border-color: #3d444d; }
.cn-ghr-react { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 8px; border: 1px solid #3d444d; border-radius: 50%; color: #9198a1; }

/* Review thread */
.cn-ghr-item { position: relative; }
.cn-ghr-item.is-review { width: 864px; padding-left: 97px; }
.cn-ghr-item.is-review > .cn-ghr-av40 { position: absolute; left: 0; top: 0; }
.cn-ghr-item.is-review > .cn-ghr-line { top: 0; bottom: -40px; }
.cn-ghr-item.is-review > .cn-ghr-badge { left: 58px; top: 8px; }
.cn-ghr-head { display: flex; align-items: center; gap: 4px; height: 32px; margin-top: 8px; white-space: nowrap; }
.cn-ghr-box { position: relative; margin-top: 14px; border: 1px solid #3d444d; border-radius: 6px; background: #0d1117; }
.cn-ghr-file { display: flex; align-items: center; gap: 8px; height: 39px; padding: 0 16px; background: #151b23; border-bottom: 1px solid #3d444d; border-radius: 6px 6px 0 0; font: 12px/20px ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.cn-ghr-diff { font: 12px/20px ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.cn-ghr-row { display: grid; grid-template-columns: 50px 50px 26px minmax(0, 1fr); align-items: center; height: 20px; color: #9198a1; }
.cn-ghr-diff.is-single .cn-ghr-row { grid-template-columns: 58px 26px minmax(0, 1fr); height: 26px; }
.cn-ghr-num { height: 100%; padding-right: 10px; text-align: right; line-height: inherit; }
.cn-ghr-diff.is-single .cn-ghr-num { line-height: 26px; }
.cn-ghr-sign { text-align: center; }
.cn-ghr-code { padding-right: 16px; }
.cn-ghr-code i { display: block; height: 11px; border-radius: 2px; background: #3f454d; }
.cn-ghr-src { display: block; white-space: pre; color: #f0f6fc; font: inherit; }
.cn-ghr-t.is-kw { color: #ff7b72; }
.cn-ghr-t.is-fn { color: #d2a8ff; }
.cn-ghr-t.is-str { color: #a5d6ff; }
.cn-ghr-row.is-del .cn-ghr-t.is-word { background: #f8514966; }
.cn-ghr-row.is-add .cn-ghr-t.is-word { background: #2ea04366; }
.cn-ghr-row.is-del { background: #25171c; }
.cn-ghr-row.is-del .cn-ghr-num { background: #532426; color: #f0f6fc; }
.cn-ghr-row.is-del .cn-ghr-code i { background: #945a60; }
.cn-ghr-row.is-add { background: #12261e; }
.cn-ghr-row.is-add .cn-ghr-num { background: #1c4428; color: #f0f6fc; }
.cn-ghr-row.is-add .cn-ghr-code i { background: #568366; }
.cn-ghr-comment { position: relative; padding: 24px 16px 16px 48px; }
.cn-ghr-comment > .cn-ghr-av24 { position: absolute; left: 16px; top: 26px; }
.cn-ghr-chead { display: flex; align-items: center; gap: 4px; height: 28px; white-space: nowrap; }
.cn-ghr-md { margin-top: 10px; }
.cn-ghr-md p + p { margin-top: 16px; }
.cn-ghr-ln { display: block; white-space: nowrap; }
.cn-ghr-suggest { margin-top: 16px; border: 1px solid #3d444d; border-radius: 6px; overflow: hidden; }
.cn-ghr-suggest-head { padding: 4px 8px; border-bottom: 1px solid #3d444d; font-size: 12px; color: #9198a1; }
.cn-ghr-suggest-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px; }
.cn-ghr-reply { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid #3d444d; }
.cn-ghr-input { flex: 1; height: 32px; padding: 0 12px; border: 1px solid #3d444d; border-radius: 6px; line-height: 30px; color: #9198a1; }
.cn-ghr-resolve { padding: 16px; border-top: 1px solid #3d444d; }

/* Pull request conversation */
.cn-ghr-tabs { display: flex; width: 895px; height: 37px; margin: -1px 0 0 0; border-bottom: 1px solid #3d444d; }
.cn-ghr-tab { display: flex; align-items: center; gap: 8px; padding: 0 16px; color: #f0f6fc; white-space: nowrap; }
.cn-ghr-tab .cn-ghr-ico { color: #9198a1; }
.cn-ghr-tab.is-selected { border: 1px solid #3d444d; border-bottom-color: #0d1117; border-radius: 6px 6px 0 0; margin-bottom: -1px; }
.cn-ghr-count { padding: 0 6px; border-radius: 2em; background: #2f3742; font-size: 12px; font-weight: 500; line-height: 18px; }
.cn-ghr-thread { position: relative; width: 865px; margin-top: 16px; }
.cn-ghr-thread > .cn-ghr-line { left: 73px; top: 40px; bottom: -40px; }
.cn-ghr-item.is-comment { padding-left: 57px; margin-bottom: 24px; }
.cn-ghr-item.is-comment > .cn-ghr-av40 { position: absolute; left: 0; top: 0; }
.cn-ghr-item.is-comment .cn-ghr-box { margin-top: 0; }
.cn-ghr-box.has-caret::before { content: ""; position: absolute; top: 12px; left: -8px; width: 14px; height: 14px; background: #151b23; border-left: 1px solid #3d444d; border-bottom: 1px solid #3d444d; transform: rotate(45deg); }
.cn-ghr-bhead { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px; background: #151b23; border-bottom: 1px solid #3d444d; border-radius: 6px 6px 0 0; white-space: nowrap; }
.cn-ghr-bbody { padding: 16px 16px 16px; }
.cn-ghr-bbody .cn-ghr-react { margin-top: 16px; }
.cn-ghr-bbody p + p { margin-top: 16px; }
.cn-ghr-mention { position: relative; display: flex; align-items: center; gap: 8px; height: 39px; margin: 0 0 12px 57px; padding: 0 16px; border: 1px solid #3d444d; border-radius: 6px; background: #151b23; }
.cn-ghr-commit { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 0 24px 97px; color: #9198a1; }
.cn-ghr-commit > .cn-ghr-badge { left: -39px; top: 4px; }

/* Sidebar reviewers (captured at native size) */
.cn-ghr-side { position: relative; width: 427px; height: 206px; }
.cn-ghr-side::before { content: ""; position: absolute; left: 2px; top: 0; width: 1px; height: 143px; background: #3d444d; }
.cn-ghr-srow { position: absolute; left: 30px; right: 35px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cn-ghr-srow.is-heading { top: 13px; height: 24px; font-size: 14px; font-weight: 600; color: #9198a1; }
.cn-ghr-srow.is-more { top: 42px; height: 24px; color: #9198a1; }
.cn-ghr-srow.is-person { top: 73px; height: 24px; }
.cn-ghr-srow.is-person + .cn-ghr-srow.is-person { top: 104px; }
.cn-ghr-srow.is-indent { left: 47px; }
.cn-ghr-srow .cn-ghr-ico { color: #9198a1; }
.cn-ghr-copilot { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #212830; color: #9198a1; margin-left: -1px; }
.cn-ghr-copilot .cn-ghr-ico { color: #9198a1; }
.cn-ghr-srow.is-draft { top: 146px; height: 24px; gap: 4px; }
.cn-ghr-srule { position: absolute; left: 30px; right: 33px; top: 194px; height: 1px; background: #3d444d; }
@media (max-width: 640px) {
  .cn-findings-card { width: 320px; height: 242px; }
  .cn-ghr-stage { zoom: .3404; }
}
.cn-findings-viewport:hover .cn-findings-track,
.cn-findings-viewport:focus-within .cn-findings-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .cn-findings-track { width: auto; flex-wrap: wrap; gap: 24px; padding-inline: var(--container-pad); }
  .cn-findings-track > .cn-findings-card { margin: 0; }
  .cn-findings-track [aria-hidden="true"] { display: none; }
}
.cn-deployment-heading { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.cn-deployment-heading > p {
  margin: 0 0 20px;
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cn-deployment-heading h2 {
  margin: 0;
  font: 500 clamp(30px, 3.4vw, 46px)/1.1 var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.cn-deployment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cn-deployment-option {
  padding: clamp(22px, 2vw, 28px);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}
.cn-deployment-option h3 {
  margin: 0 0 8px;
  font: 500 16px/1.4 var(--font-body);
  letter-spacing: .04em;
}
.cn-deployment-status {
  display: block;
  font: var(--text-caption);
  color: var(--text-muted);
}
.cn-deployment-option > p {
  margin: 20px 0 0;
  font: var(--text-body-16);
  color: var(--text-muted);
}
@media (max-width: 800px) {
  .cn-deployment-grid { grid-template-columns: minmax(0, 1fr); }
}
.cn-enterprise-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.cn-enterprise-intro h2 {
  margin: 0 0 20px;
  font: 500 clamp(34px, 4.2vw, 60px)/1.05 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.cn-enterprise-intro p {
  margin: 0;
  max-width: 46ch;
  font: var(--text-lead);
  color: var(--text-muted);
}
.cn-enterprise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}
.cn-enterprise-grid > div {
  display: flex;
}
.cn-enterprise-card {
  width: 100%;
  min-height: 180px;
  padding: clamp(22px, 2vw, 28px);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
.cn-enterprise-card h3 {
  margin: 0 0 12px;
  font: var(--text-h4);
  letter-spacing: var(--tracking-display);
}
.cn-enterprise-card p {
  margin: 0;
  font: var(--text-body-16);
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .cn-enterprise-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cn-enterprise-grid { grid-template-columns: minmax(0, 1fr); }
}
.cn-learning {
  padding: clamp(48px, 5vw, 80px) 0;
  background: var(--surface-sunken);
  color: var(--text-body);
}
.cn-learning-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 112px);
}
.cn-learning-intro { text-align: center; }
.cn-learning-intro h2 {
  max-width: 22ch;
  margin: 0 auto 26px;
  font: 500 clamp(34px, 3.5vw, 56px)/1.1 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.cn-learning-intro p {
  max-width: 46ch;
  margin: 0 auto;
  font: var(--text-lead);
  color: var(--text-muted);
  text-wrap: pretty;
}
.cn-learning-items { display: grid; gap: 12px; }
.cn-learning-item {
  padding: clamp(22px, 2vw, 32px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
}
.cn-learning-item h3 {
  margin: 0 0 10px;
  font: 500 clamp(18px, 1.5vw, 22px)/1.25 var(--font-display);
  letter-spacing: -.025em;
}
.cn-learning-item p {
  margin: 0;
  font: var(--text-body-16);
  color: var(--text-muted);
}
@media (max-width: 800px) {
  .cn-learning-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.cn-repository-qa {
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--surface-sunken);
  color: var(--text-body);
}
.cn-repository-qa-heading { max-width: 820px; margin-inline: auto; text-align: center; }
.cn-repository-qa-eyebrow,
.cn-repository-qa-index dt {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .1em;
}
.cn-repository-qa-eyebrow { margin: 0 0 20px; color: var(--text-muted); }
.cn-repository-qa-heading h2 {
  margin: 0 auto 20px;
  text-wrap: balance;
  max-width: 24ch;
  font: 500 clamp(32px, 3.6vw, 52px)/1.08 var(--font-display);
  letter-spacing: -.03em;
}
.cn-repository-qa-copy {
  margin: 0 auto;
  text-wrap: pretty;
  max-width: 58ch;
  font: var(--text-lead);
  color: var(--text-muted);
}
.cn-repository-qa-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 6vw, 88px);
  margin: 40px 0 0;
}
.cn-repository-qa-index > div {
  padding: 24px 0;
  text-align: center;
}
.cn-repository-qa-index > div:nth-child(n + 3) {
  border-top: 1px solid var(--border-soft);
}
.cn-repository-qa-index dt {
  margin: 0 0 12px;
  font: 500 clamp(18px, 1.6vw, 22px)/1.25 var(--font-display);
  letter-spacing: -.015em;
}
.cn-repository-qa-index dd {
  margin: 0 auto;
  max-width: 44ch;
  font: var(--text-body-16);
  color: var(--text-muted);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .cn-repository-qa-index { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .cn-repository-qa-index > div:nth-child(n + 2) { border-top: 1px solid var(--border-soft); }
}
.cn-landing :focus-visible { outline: 2px solid var(--text-body); outline-offset: 4px; }
@media (max-width: 900px) {
  .cn-landing [style*="grid-template-columns: 1fr 1fr"],
  .cn-landing [style*="grid-template-columns: 0.9fr 1.1fr"],
  .cn-landing [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
}
@media (max-width: 480px) {
  .cn-landing [style*="max-width: 440px"] { flex-wrap: wrap; }
  .cn-findings h2 { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No turn: the faces swap in place. The rule below removes every transform
     on the page, so the back face is hidden by opacity instead of rotation. */
  .cn-flip-back { opacity: 0; }
  .cn-flip:hover .cn-flip-back, .cn-flip:focus-visible .cn-flip-back, .cn-flip.is-flipped .cn-flip-back { opacity: 1; }
  .cn-flip:hover .cn-flip-front, .cn-flip:focus-visible .cn-flip-front, .cn-flip.is-flipped .cn-flip-front { opacity: 0; }
  .cn-landing .cn-static-card:hover,
  .cn-landing .cn-static-card:focus-within {
    transform: none;
  }
  .cn-landing *, .cn-landing *::before, .cn-landing *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Journal: a compact lead story and supporting editorial column. */
.cn-oss { color: var(--gray-1000); }
.cn-oss-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cn-oss-hero h1 { font: 500 clamp(32px, 4.2vw, 62px)/1.03 var(--font-display); letter-spacing: -.038em; max-width: 17ch; margin: 0 0 18px; }
.cn-oss-hero p, .cn-oss-heading p, .cn-oss-maintainers p, .cn-oss-access p, .cn-oss-attention p { font: var(--text-body-16); color: var(--text-muted); margin: 0; }
.cn-oss-hero p { max-width: 54ch; }
.cn-oss-spec { margin: 0; }
.cn-oss-spec > div { display: grid; grid-template-columns: minmax(120px, .62fr) minmax(0, 1.38fr); align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--gray-300); }
.cn-oss-spec dt, .cn-oss-access > span, .cn-oss-facts dt { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.cn-oss-spec dd { font: 500 18px/1.35 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; text-align: right; }
.cn-oss-heading { max-width: 760px; text-align: center; margin: 0 auto var(--space-10); }
.cn-oss h2 { font: var(--text-h2); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-5); text-wrap: balance; }
.cn-oss-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.cn-oss-flow li { position: relative; padding-top: var(--space-6); text-align: center; }
.cn-oss-flow li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gray-300); }
.cn-oss-flow li::after { content: ""; position: absolute; top: -2px; left: calc(50% - 2px); width: 5px; height: 5px; background: var(--gray-600); }
.cn-oss-flow li:first-child::after { background: var(--brand-600); }
.cn-oss-flow span { font: var(--text-caption); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.cn-oss-maintainers { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
.cn-oss-maintainers > div > p { max-width: 42ch; }
.cn-oss-principles { list-style: none; margin: 0; padding: 0; }
.cn-oss-principles li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--gray-300); }
.cn-oss-principles li:first-child { padding-top: 0; }
.cn-oss-principles li > span { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-muted); }
.cn-oss-principles h3 { font: var(--text-label); margin: 0 0 var(--space-3); }
.cn-oss-eligibility { max-width: 800px; margin: 0 auto; }
.cn-oss-eligibility h2 { text-align: center; margin-bottom: var(--space-8); }
.cn-oss-access { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--gray-300); }
.cn-oss-facts { margin: 0; }
.cn-oss-facts > div { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--gray-300); }
.cn-oss-facts dd { font: var(--text-body-14); margin: 0; }
.cn-oss-apply { margin: var(--space-6) 0 var(--space-3); font: var(--text-body-14); color: var(--text-muted); }
.cn-oss-link { font: var(--text-body-14); color: var(--gray-1000); text-underline-offset: 5px; }
.cn-oss-link:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 4px; }
.cn-oss-attention { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); list-style: none; margin: 0; padding: 0; }
.cn-oss-attention li { position: relative; }
.cn-oss-attention h3 { font: var(--text-h3); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); }
.cn-oss-attention li:not(:last-child)::after { content: "→"; position: absolute; right: -32px; top: 4px; color: var(--text-muted); }
.cn-oss-attention li:first-child::before { content: "→"; position: absolute; left: -24px; top: 4px; color: var(--text-muted); }
.cn-oss-ownership { font: var(--text-body-14); color: var(--text-muted); text-align: center; margin: var(--space-10) 0 0; }
@media (max-width: 700px) {
  .cn-oss-hero, .cn-oss-maintainers, .cn-oss-attention { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .cn-oss-flow { grid-template-columns: minmax(0, 1fr); }
  .cn-oss-flow li { text-align: left; padding: var(--space-4) 0 var(--space-4) var(--space-8); }
  .cn-oss-flow li::before { left: 2px; right: auto; width: 1px; height: 100%; }
  .cn-oss-flow li::after { left: 0; top: 22px; }
  .cn-oss-access { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cn-oss-attention li:not(:last-child)::after { content: "↓"; left: 0; right: auto; top: auto; bottom: -30px; }
  .cn-oss-attention li:first-child::before { display: none; }
}

.cn-payments { color: var(--gray-1000); }
.cn-payments > section:first-child > div > div { background: transparent !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.cn-payments-heading { max-width: 800px; margin: 0 auto var(--space-10); text-align: center; }
.cn-payments-heading h2 { font: var(--text-h2); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-5); text-wrap: balance; }
.cn-payments-heading p { font: var(--text-body-16); color: var(--text-muted); max-width: 60ch; margin: 0 auto; }
.cn-payments-path { max-width: 900px; margin: 0 auto; }
.cn-payments-path figcaption, .cn-payments-note { font: var(--text-body-14); color: var(--text-muted); margin: 0 0 var(--space-5); }
.cn-payments-path figcaption { text-align: center; }
.cn-payments-path-start { display: flex; align-items: baseline; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--gray-300); }
.cn-payments-path-start > span, .cn-payments-path-end, .cn-payments-path dt, .cn-payments-questions dt, .cn-payments-ownership h3 { font: var(--text-caption); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.cn-payments-path-start > span { color: var(--brand-600); }
.cn-payments-path-start strong { font: var(--text-h4); letter-spacing: var(--tracking-display); }
.cn-payments-path-rows { margin: 0 0 0 var(--space-4); padding: var(--space-4) 0 var(--space-4) var(--space-8); border-left: 1px solid var(--gray-300); }
.cn-payments-path-rows > div { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-6); padding: var(--space-5) 0; position: relative; }
.cn-payments-path-rows > div::before { content: ""; position: absolute; left: calc(-1 * var(--space-8)); top: 30px; width: var(--space-5); height: 1px; background: var(--gray-300); }
.cn-payments-path dd, .cn-payments-ledger p, .cn-payments-questions dd, .cn-payments-statement > p, .cn-payments-ownership p { font: var(--text-body-16); color: var(--text-muted); margin: 0; }
.cn-payments-path-end { border-top: 1px solid var(--gray-300); padding: var(--space-6) 0; display: flex; gap: var(--space-6); align-items: baseline; }
.cn-payments-path-end span { font: var(--text-body-14); color: var(--text-muted); text-transform: none; letter-spacing: normal; }
.cn-payments-ledger { list-style: none; padding: 0; margin: 0; }
.cn-payments-ledger li { display: grid; grid-template-columns: 40px minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-6); padding: var(--space-8) 0; border-top: 1px solid var(--gray-300); align-items: baseline; }
.cn-payments-ledger li > span { font: var(--text-caption); font-family: var(--font-mono); color: var(--brand-600); }
.cn-payments-ledger h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0; }
.cn-payments-questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); }
.cn-payments-statement h3 { font: var(--text-h3); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-6); max-width: 22ch; text-wrap: balance; }
.cn-payments-statement > .cn-payments-note { font: var(--text-body-14); margin-top: var(--space-6); }
.cn-payments-questions dl { margin: 0; }
.cn-payments-questions dl > div { border-top: 1px solid var(--gray-300); padding: var(--space-5) 0; }
.cn-payments-questions dt { margin-bottom: var(--space-3); }
.cn-payments-ownership { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.cn-payments-ownership li { padding-top: var(--space-6); position: relative; }
.cn-payments-ownership li:first-child::before { content: "→"; position: absolute; left: -24px; top: 18px; color: var(--text-muted); }
.cn-payments-ownership li:not(:last-child)::after { content: "→"; position: absolute; right: -32px; top: 18px; color: var(--text-muted); }
.cn-payments-ownership h3 { margin: 0 0 var(--space-4); }
.cn-payments-responsibility { text-align: center; max-width: 76ch; margin: var(--space-10) auto 0; }
.cn-payments-responsibility p { font: var(--text-body-14); color: var(--text-muted); margin: var(--space-3) 0 0; }
.cn-payments-responsibility p:first-child { color: var(--gray-1000); }
@media (max-width: 700px) {
  .cn-payments-questions, .cn-payments-ownership { grid-template-columns: minmax(0, 1fr); }
  .cn-payments-ownership li:first-child::before { display: none; }
  .cn-payments-path-rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cn-payments-ledger li { grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
  .cn-payments-ledger li p { grid-column: 2; }
  .cn-payments-path-end { flex-direction: column; gap: var(--space-3); }
  .cn-payments-ownership li:not(:last-child)::after { content: "↓"; top: auto; bottom: -34px; right: auto; left: 0; }
}

.cn-platform-teams { color: var(--gray-1000); }
.cn-platform-heading { max-width: 760px; margin: 0 auto var(--space-12); text-align: center; }
.cn-platform-heading h2, .cn-platform-closing > h2 { font: var(--text-h2); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-5); text-wrap: balance; }
.cn-platform-heading p { font: var(--text-body-16); color: var(--text-muted); max-width: 60ch; margin: 0 auto; }
.cn-platform-dependencies { max-width: 820px; margin: 0 auto; text-align: center; }
.cn-platform-dependencies figcaption { font: var(--text-caption); color: var(--text-muted); margin-bottom: var(--space-8); }
.cn-platform-shared, .cn-platform-branch > span { font: var(--text-body-14); font-family: var(--font-mono); }
.cn-platform-shared { color: var(--brand-600); padding-bottom: 48px; position: relative; }
.cn-platform-shared::after { content: ""; position: absolute; bottom: 0; height: 36px; left: 50%; width: 1px; background: var(--gray-300); }
.cn-platform-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.cn-platform-branches::before { content: ""; position: absolute; top: 0; left: 16.6667%; right: 16.6667%; height: 1px; background: var(--gray-300); }
.cn-platform-branch { padding-top: 38px; position: relative; }
.cn-platform-branch::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 26px; background: var(--gray-300); }
.cn-platform-branch > span { display: block; }
.cn-platform-related { position: relative; padding-top: 60px; color: var(--text-muted); }
.cn-platform-related::before { content: ""; position: absolute; height: 36px; width: 1px; background: var(--gray-300); left: 50%; top: 12px; }
.cn-platform-argument { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.cn-platform-argument li { position: relative; margin-left: 18px; border-left: 1px solid var(--gray-300); padding: 0 0 var(--space-12) var(--space-12); }
.cn-platform-argument li:last-child { padding-bottom: 0; }
.cn-platform-number { position: absolute; top: 0; left: -18px; width: 36px; text-align: center; background: var(--surface-page); font: var(--text-caption); font-family: var(--font-mono); color: var(--text-muted); padding: 4px 0; }
.cn-platform-argument h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); }
.cn-platform-argument p, .cn-platform-sequence p, .cn-platform-closing dd { font: var(--text-body-16); color: var(--text-muted); margin: 0; }
.cn-platform-sequence { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.cn-platform-sequence li { position: relative; }
.cn-platform-sequence h3 { font: var(--text-h3); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); }
.cn-platform-sequence li:not(:last-child)::after { content: "→"; position: absolute; top: 4px; right: -32px; font: var(--text-h4); color: var(--gray-600); }
.cn-platform-sequence li:first-child::before { content: "→"; position: absolute; top: 4px; left: -32px; font: var(--text-h4); color: var(--gray-600); }
.cn-platform-closing { max-width: 900px; margin: 0 auto; text-align: center; }
.cn-platform-closing > h2 { max-width: 24ch; margin: 0 auto var(--space-10); }
.cn-platform-closing dl { margin: 0 0 var(--space-10); text-align: left; }
.cn-platform-closing dl > div { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--gray-300); }
.cn-platform-closing dt { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 700px) {
  .cn-platform-sequence { grid-template-columns: minmax(0, 1fr); }
  .cn-platform-sequence li:first-child::before { display: none; }
  .cn-platform-sequence li:not(:last-child)::after { content: "↓"; top: auto; bottom: -34px; left: 0; right: auto; }
  .cn-platform-closing dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cn-platform-argument li { padding-left: var(--space-8); }
  .cn-platform-branch > span { font-size: 12px; }
  .cn-platform-closing a { white-space: normal !important; height: auto !important; }
}

/* Contact-only surface overrides preserve the existing inline geometry. */
.cn-contact-surfaces .cn-contact-route {
  position: relative;
  border-radius: 6px !important;
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  transition: border-color 150ms ease !important;
}
.cn-contact-surfaces .cn-contact-route:hover { border-color: var(--gray-500) !important; }
.cn-contact-bottom-card {
  border-radius: 6px !important;
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
}
.cn-contact-surfaces .cn-contact-icon {
  background: transparent !important; border-radius: 0 !important;
  box-shadow: none !important;
}
.cn-contact-surfaces .cn-contact-icon > * { color: var(--brand-600) !important; }
.cn-contact-surfaces label > span:has(> input), .cn-contact-surfaces textarea {
  border-radius: 6px !important;
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
  transition: border-color 150ms ease !important;
}
.cn-contact-surfaces label > span:has(> input):hover, .cn-contact-surfaces textarea:hover {
  border-color: var(--gray-500) !important;
}
.cn-contact-surfaces label > span:has(> input:focus), .cn-contact-surfaces textarea:focus {
  border-color: var(--brand-600) !important;
  outline: 2px solid var(--brand-600) !important; outline-offset: 2px;
}
.cn-contact-surfaces .cn-contact-submit {
  border-radius: 6px !important; background: var(--gray-1000) !important;
  color: var(--white) !important; box-shadow: none !important;
  transform: none !important; transition: background-color 150ms ease !important;
}
.cn-contact-surfaces .cn-contact-submit > span[aria-hidden="true"] { display: none; }
.cn-contact-surfaces .cn-contact-submit:enabled:hover { background: var(--gray-900) !important; }
.cn-contact-surfaces .cn-contact-submit:enabled:active { background: var(--gray-1000) !important; }
.cn-contact-surfaces .cn-contact-submit:disabled { background: var(--gray-200) !important; color: var(--gray-600) !important; }
.cn-contact-surfaces .cn-contact-route:focus-visible, .cn-contact-surfaces .cn-contact-submit:focus-visible {
  outline: 2px solid var(--brand-600); outline-offset: 3px;
}

.cn-security { color: var(--gray-1000); }
.cn-security-hero { max-width: 760px; margin: 0 auto; text-align: center; }
.cn-security-hero h1 { font: 500 clamp(34px, 4.6vw, 68px)/1.02 var(--font-display); letter-spacing: -.038em; margin: 0 auto var(--space-6); max-width: 20ch; }
.cn-security-hero > p { font: var(--text-lead); color: var(--text-muted); max-width: 56ch; margin: 0 auto; }
.cn-security-boundary, .cn-security-status { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.cn-security-intro { text-align: center; max-width: 760px; margin: 0 auto; }
.cn-security-step { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; position: relative; z-index: 1; background: var(--surface-sunken); color: var(--brand-600); font: var(--text-body-14); font-family: var(--font-mono); }
.cn-security-label { font: var(--text-caption); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--brand-600); margin: 0 0 var(--space-4); }
.cn-security-intro h2, .cn-security-data > h2 { font: var(--text-h3); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-5); text-wrap: balance; }
.cn-security-intro > p:last-child { font: var(--text-body-16); color: var(--text-muted); max-width: 56ch; margin: 0 auto; }
.cn-security-rows, .cn-security-data-rows { margin: 0; }
.cn-security-rows > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(32px, 7vw, 100px); }
.cn-security-rows > div { padding: var(--space-6) 0; }
.cn-security-rows > div:first-child { padding-top: 0; }
.cn-security-rows > div + div { border-top: 1px solid var(--gray-300); }
.cn-security-rows dt { font: var(--text-caption); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }
.cn-security-rows dd, .cn-security-data-rows dd { font: var(--text-body-16); color: var(--text-muted); margin: 0; max-width: 65ch; }
.cn-security-data > .cn-security-label, .cn-security-data > h2 { text-align: center; }
.cn-security-data-rows > div:first-child { border-top: 0; }
.cn-security-data > h2 { margin-bottom: var(--space-8); }
.cn-security-data-rows > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(32px, 7vw, 100px); padding: var(--space-8) 0; border-top: 1px solid var(--gray-300); }
.cn-security-data-rows dt { font: var(--text-h4); letter-spacing: var(--tracking-display); }
.cn-security-contact { display: inline-block; margin-top: var(--space-4); color: var(--gray-1000); font: var(--text-body-14); text-underline-offset: 5px; }
.cn-security-contact:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 5px; }
@media (max-width: 700px) {
  .cn-security-boundary, .cn-security-status, .cn-security-rows > div, .cn-security-data-rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .cn-security-flow { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-8) !important; }
  .cn-security-flow > span { left: 27px !important; right: auto !important; top: 0 !important; bottom: 0; width: 1px !important; height: auto !important; }
  .cn-security-flow > div { padding-left: 76px; min-height: 70px; }
  .cn-security-flow > div > span { position: absolute !important; left: 0; top: 0; }
}

.cn-customers { text-align: center; color: var(--gray-1000); }
.cn-customers-hero { max-width: 760px; margin: 0 auto; }
.cn-customers-hero h1 { margin: 0 0 var(--space-6); font: 500 clamp(44px, 5.5vw, 76px)/1.04 var(--font-display); letter-spacing: var(--tracking-display); }
.cn-customers-hero > p { max-width: 54ch; margin: 0 auto; font: var(--text-lead); color: var(--text-muted); }
.cn-customers-composition { max-width: 960px; margin: 0 auto; padding: var(--space-4) 0 var(--section-y-compact); }
.cn-customers-number, .cn-customers-label { display: block; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cn-customers-number { color: var(--brand-600); margin-bottom: var(--space-4); }
.cn-customers-point h2 { margin: 0 0 var(--space-4); font: var(--text-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.cn-customers-point > p { margin: 0 auto; max-width: 35ch; font: var(--text-body-16); color: var(--text-muted); }
.cn-customers-pilot { max-width: 620px; margin: 0 auto; padding-bottom: var(--space-10); }
.cn-customers-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--gray-300); border-bottom: 1px solid var(--gray-300); }
.cn-customers-evidence > article { padding: var(--space-10) var(--space-6); }
.cn-customers-evidence > article + article { border-left: 1px solid var(--gray-300); }
.cn-customers-invitation { padding-top: var(--space-10); }
.cn-customers-standard { max-width: 960px; margin: 0 auto; }
.cn-customers-label { margin: 0 0 var(--space-6); color: var(--text-muted); }
.cn-customers-standard h2 { margin: 0 auto var(--space-6); font: 500 clamp(32px, 4.5vw, 60px)/1.12 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.cn-customers-support { max-width: 52ch; margin: 0 auto; font: var(--text-body-16); color: var(--text-muted); }
.cn-customers-cta { max-width: 760px; margin: 0 auto; }
.cn-customers-cta h2 { margin: 0 0 var(--space-4); font: var(--text-h3); letter-spacing: var(--tracking-display); text-wrap: balance; }
.cn-customers-cta .cn-customers-support { margin-bottom: var(--space-6); }
@media (max-width: 600px) {
  .cn-customers-evidence { grid-template-columns: minmax(0, 1fr); }
  .cn-customers-evidence > article { padding: var(--space-8) 0; }
  .cn-customers-evidence > article + article { border-left: 0; border-top: 1px solid var(--gray-300); }
  .cn-customers-break { display: none; }
}

.cn-journal { color: var(--text-body); }
.cn-journal-upcoming { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; border-top: 1px solid var(--gray-300); text-align: center; }
.cn-journal-upcoming-intro h2 { margin: 0 0 12px; font: var(--text-h4); letter-spacing: var(--tracking-display); }
.cn-journal-upcoming-intro p { margin: 0 auto; max-width: 64ch; font: var(--text-body-14); color: var(--text-muted); }
.cn-journal-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 28px 0; }
.cn-journal-article:first-child { padding-top: 0; }
.cn-journal-article + .cn-journal-article { border-top: 1px solid var(--gray-300); }
.cn-journal-category { padding-top: 4px; font: var(--text-body-14); color: var(--text-muted); }
.cn-journal-article h3 { margin: 0 0 10px; font: var(--text-h4); letter-spacing: var(--tracking-display); }
.cn-journal-article p { margin: 0 auto; max-width: 58ch; font: var(--text-body-14); color: var(--text-muted); }
@media (max-width: 700px) {
  .cn-journal-upcoming-intro p { max-width: 42ch; }
  .cn-journal-article { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.cn-journal > section > div { max-width: 1120px; }
.cn-journal .cn-journal-label, .cn-journal-meta, .cn-journal-draft { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cn-journal .cn-journal-label { margin: 0; }
.cn-journal-hero { max-width: 760px; margin: 0 auto; text-align: center; padding: var(--space-4) 0 var(--space-3); }
.cn-journal-hero > .cn-journal-label { color: var(--brand-600); }
.cn-journal-hero h1 { font: var(--text-h1); letter-spacing: var(--tracking-display); margin: var(--space-5) 0 var(--space-4); }
.cn-journal-lead { max-width: 60ch; margin: 0 auto; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-journal-edition { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--gray-1000); }
.cn-journal-edition p { font: var(--text-body-14); color: var(--text-muted); margin: 0; }
.cn-journal-spread { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: var(--space-12); padding-top: var(--space-8); }
.cn-journal-feature { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-10); background: var(--surface-sunken); border-top: 2px solid var(--brand-600); }
.cn-journal-meta { display: flex; align-items: baseline; gap: var(--space-3); }
.cn-journal-meta > span:first-child { color: var(--brand-600); }
.cn-journal-feature h3 { font: var(--text-h2); letter-spacing: var(--tracking-display); max-width: 18ch; margin: var(--space-10) 0 var(--space-6); text-wrap: balance; }
.cn-journal-feature-copy > p, .cn-journal-note > p { font: var(--text-body-16); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.cn-journal-draft { margin: auto 0 0; padding-top: var(--space-12); line-height: 1.6; }
.cn-journal-draft span { color: var(--brand-600); margin: 0 var(--space-2); }
.cn-journal-mosaic { display: flex; flex-direction: column; }
.cn-journal-note { padding: var(--space-6) 0; }
.cn-journal-note:first-child { padding-top: 0; }
.cn-journal-note:last-child { padding-bottom: 0; }
.cn-journal-note + .cn-journal-note { border-top: 1px solid var(--gray-300); }
.cn-journal-note h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: var(--space-3) 0; text-wrap: balance; }
.cn-journal-note > p { font: var(--text-body-14); }
.cn-journal-topics { border-top: 1px solid var(--gray-300); border-bottom: 1px solid var(--gray-300); padding: var(--space-8) 0; text-align: center; }
.cn-journal-topics h2 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-5); }
.cn-journal-topics ul { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) 0; list-style: none; max-width: 850px; margin: 0 auto; padding: 0; }
.cn-journal-topics li { font: var(--text-body-16); color: var(--text-muted); padding: 0 var(--space-4); flex: 0 0 33.333%; box-sizing: border-box; }
.cn-journal-topics li + li { border-left: 1px solid var(--gray-300); }
.cn-journal-topics li:nth-child(4) { border-left: 0; }
.cn-journal-colophon { max-width: 640px; margin: 0 auto; text-align: center; }
.cn-journal-colophon h2 { margin: var(--space-4) auto var(--space-5); font: var(--text-h3); letter-spacing: var(--tracking-display); text-wrap: balance; }
.cn-journal-colophon-body { margin: 0 auto; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-journal .cn-journal-signoff { margin-top: var(--space-6); line-height: 1.8; }
.cn-journal-signoff span { color: var(--brand-600); margin: 0 var(--space-2); }
@media (max-width: 800px) {
  .cn-journal-spread { gap: var(--space-6); grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cn-journal-feature { padding: var(--space-6); }
  .cn-journal-feature h3 { font-size: 32px; }
}
@media (max-width: 600px) {
  .cn-journal-hero h1 { font-size: 34px; }
  .cn-journal-edition { flex-direction: column; gap: var(--space-2); }
  .cn-journal-spread { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-journal-feature h3 { font: var(--text-h3); margin-top: var(--space-6); }
  .cn-journal-draft { padding-top: var(--space-8); }
  .cn-journal-topics li { border: 0 !important; padding: 0 var(--space-2); flex: 0 1 auto; }
  .cn-journal-topics ul { gap: var(--space-3); }
}

/* ---------- Paste a pull request ----------
   A product-entry journey, deliberately unlike the feature pages: one central
   trace runs the page, and every band below it is a different asymmetry. */

.cn-pr-eyebrow { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-pr-link { font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-decoration: none; border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; transition: border-color 180ms var(--ease-out); }
.cn-pr-link:hover { border-bottom-color: var(--brand-600); }

/* 01 hero: asymmetric two-column */
.cn-pr-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(28px,5vw,72px); align-items: center; }
.cn-pr-hero h1 { font: 500 clamp(32px,4.2vw,62px)/1.03 var(--font-display); letter-spacing: -.038em; max-width: 17ch; margin: 0; }
.cn-pr-hero-note { display: grid; grid-template-columns: 6px minmax(0,1fr); gap: var(--space-3); align-items: start; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); }
.cn-pr-hero-note i { width: 6px; height: 6px; border-radius: 999rem; background: var(--warm-coral); transform: translateY(7px); font-style: normal; }

/* 02 signature trace: one central line the page is built around */
.cn-pr-trace { max-width: 560px; margin: 0 auto; }
.cn-pr-trace-cap { text-align: center; }
.cn-pr-trace-rail { position: relative; padding: var(--space-6) 0; }
.cn-pr-trace-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-soft); transform: translateX(-.5px); }
.cn-pr-stop { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); align-items: center; padding: var(--space-6) 0; opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.cn-pr-stop.is-on { opacity: 1; transform: none; }
.cn-pr-stop-num { grid-column: 2; justify-self: center; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 999rem; background: var(--white); border: 1px solid var(--border-soft); display: grid; place-items: center; font: var(--text-caption); font-family: var(--font-mono); color: var(--text-muted); }
.cn-pr-stop.is-on .cn-pr-stop-num { border-color: var(--brand-400); color: var(--brand-600); }
.cn-pr-stop-label { grid-column: 1; text-align: right; padding-right: var(--space-6); }
.cn-pr-stop-label h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0; }
.cn-pr-stop-note { grid-column: 3; padding-left: var(--space-6); font: var(--text-body-14); font-family: var(--font-mono); color: var(--text-muted); text-wrap: pretty; }
.cn-pr-trace-end { position: relative; text-align: center; }
.cn-pr-trace-end span { display: inline-block; background: var(--white); padding: 0 var(--space-4); }
.cn-pr-trace-end h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0; }

/* 03 review control: 40/60 */
.cn-pr-control { display: grid; grid-template-columns: minmax(0,.4fr) minmax(0,.6fr); gap: clamp(32px,6vw,96px); align-items: start; }
.cn-pr-control h2 { font: var(--text-h2); letter-spacing: var(--tracking-display); margin: var(--space-4) 0 var(--space-4); text-wrap: balance; }
.cn-pr-control-rows { display: grid; }
.cn-pr-control-rows > div { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--border-hairline); align-items: baseline; }
.cn-pr-control-rows > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.cn-pr-control-rows dt { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-body); margin: 0; }
.cn-pr-control-rows dd { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 04 connection: full-width horizontal sequence on one structural rule */
.cn-pr-install { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--border-strong); }
.cn-pr-install > li { list-style: none; padding: var(--space-8) var(--space-6) 0 0; position: relative; }
.cn-pr-install > li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 999rem; background: var(--warm-coral); }
.cn-pr-install-num { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); }
.cn-pr-install h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: var(--space-3) 0 var(--space-3); }
.cn-pr-install p { font: var(--text-body-14); color: var(--text-muted); margin: 0; text-wrap: pretty; }

/* 05 boundary: 45/55 */
.cn-pr-boundary { display: grid; grid-template-columns: minmax(0,.45fr) minmax(0,.55fr); gap: clamp(32px,6vw,96px); align-items: start; }
.cn-pr-boundary-lede { font: 500 clamp(24px,2.6vw,36px)/1.15 var(--font-display); letter-spacing: var(--tracking-display); margin: var(--space-4) 0 var(--space-5); text-wrap: balance; }
.cn-pr-facts > div { display: grid; grid-template-columns: minmax(0,.32fr) minmax(0,.68fr); gap: var(--space-6); padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); align-items: baseline; }
.cn-pr-facts > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.cn-pr-facts dt { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-body); margin: 0; }
.cn-pr-facts dd { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 06 closing: minimal, centred, circles back to the hero */
.cn-pr-close { max-width: 620px; margin: 0 auto; text-align: center; }
.cn-pr-close h2 { font: 500 clamp(30px,3.6vw,50px)/1.08 var(--font-display); letter-spacing: var(--tracking-display); margin: var(--space-4) 0 var(--space-4); text-wrap: balance; }
.cn-pr-close p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto var(--space-8); max-width: 52ch; text-wrap: pretty; }

@media (max-width: 900px) {
  .cn-pr-hero { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-pr-control, .cn-pr-boundary { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-pr-install { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cn-pr-install > li { padding-bottom: var(--space-8); }
}
@media (max-width: 640px) {
  /* the trace keeps its shape, but the rail moves to the left edge */
  .cn-pr-trace-rail::before { left: 15px; transform: none; }
  .cn-pr-stop { grid-template-columns: 30px minmax(0,1fr); gap: var(--space-4); padding: var(--space-5) 0; }
  .cn-pr-stop-num { grid-column: 1; }
  .cn-pr-stop-label { grid-column: 2; text-align: left; padding-right: 0; }
  .cn-pr-stop-note { grid-column: 2; padding-left: 0; margin-top: var(--space-1); }
  .cn-pr-trace-cap, .cn-pr-trace-end { text-align: left; padding-left: 46px; }
  .cn-pr-trace-end span { padding: 0; }
  .cn-pr-install { grid-template-columns: minmax(0,1fr); }
  .cn-pr-control-rows > div, .cn-pr-facts > div { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-pr-stop { opacity: 1; transform: none; transition: none; }
}

/* ---------- What is AI code review? ----------
   A technical essay. Every section enters differently: the hero has no label,
   02 opens on a numeral, 03 on a centred title, 04 and 06 put the heading in
   a side column, 05 spans its heading across the split. */

.cn-aicr-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-aicr-link { font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-decoration: none; border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; }
.cn-aicr-link:hover { border-bottom-color: var(--brand-600); }

/* 01: the question and the definition share the fold, side by side */
.cn-aicr-open { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(28px,5vw,72px); align-items: center; }
.cn-aicr-open h1 { font: 500 clamp(36px,5.4vw,76px)/1.02 var(--font-display); letter-spacing: -.042em; margin: 0; max-width: 9ch; }
.cn-aicr-open-def { padding-top: var(--space-6); }
.cn-aicr-open-def > p { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-aicr-open-def > p:first-of-type { font: 500 clamp(19px,1.8vw,25px)/1.4 var(--font-display); letter-spacing: -.012em; color: var(--text-body); margin-bottom: var(--space-4); }

/* 02: opens on a numeral; the body is a comparison matrix, read across */
.cn-aicr-numhead { text-align: center; padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-strong); }
/* no measure cap: the title is meant to hold one line on desktop and only wrap
   when the viewport genuinely cannot fit it */
.cn-aicr-numhead h2 { font: 500 clamp(26px,3.2vw,44px)/1.1 var(--font-display); letter-spacing: var(--tracking-display); margin: 0 auto; }
.cn-aicr-matrix { width: 100%; border-collapse: collapse; text-align: left; }
.cn-aicr-matrix th, .cn-aicr-matrix td { vertical-align: top; padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 1px solid var(--border-hairline); }
.cn-aicr-matrix thead th { padding-top: var(--space-5); border-bottom: 1px solid var(--border-soft); }
.cn-aicr-matrix col.is-now, .cn-aicr-matrix td.is-now { background: var(--brand-100); }
.cn-aicr-matrix th.is-now { background: var(--brand-100); }
.cn-aicr-matrix thead th:not(:first-child) { padding-left: var(--space-5); }
.cn-aicr-matrix tbody td { padding-left: var(--space-5); }
.cn-aicr-gen-num { display: block; font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); margin-bottom: var(--space-2); }
.cn-aicr-gen-name { font: var(--text-h4); letter-spacing: var(--tracking-display); font-weight: var(--weight-medium); }
.cn-aicr-matrix th.is-now .cn-aicr-gen-name { color: var(--brand-600); }
.cn-aicr-matrix tbody th { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); font-weight: var(--weight-regular); width: 15%; }
.cn-aicr-matrix tbody td { font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
.cn-aicr-matrix tbody tr:first-child td { color: var(--text-body); font-family: var(--font-mono); }
.cn-aicr-foot { margin: var(--space-5) 0 0; font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); }

/* 03: centred title, then a cascade that steps right as the question narrows */
/* NB: ch units here would resolve against this div's 16px font, not the h2's,
   so the measure is set in px and the headline caps itself in its own ch. */
.cn-aicr-spinehead { text-align: center; max-width: 760px; margin: 0 auto clamp(40px,5vw,64px); }
.cn-aicr-spinehead h2 { font: 500 clamp(28px,3.6vw,50px)/1.08 var(--font-display); letter-spacing: var(--tracking-display); margin: 0 auto var(--space-4); max-width: 20ch; text-wrap: balance; }
.cn-aicr-spinehead p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto; max-width: 56ch; text-wrap: pretty; }
/* the cascade: each stage starts further right, and the rails draw the staircase */
.cn-aicr-cascade { max-width: 920px; margin: 0 auto; }
.cn-aicr-step { position: relative; display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: clamp(20px,3vw,40px); align-items: baseline; padding: var(--space-5) 0 var(--space-5) var(--space-6); }
/* The riser and the tread are drawn, not faded: the riser grows down from the
   step above, then the tread runs right into this one. */
.cn-aicr-step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--border-soft); transform: scaleY(0); transform-origin: top; transition: transform 460ms var(--ease-out); }
.cn-aicr-step::after { content: ""; position: absolute; left: -44px; top: 0; width: 44px; height: 1px; background: var(--border-soft); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out); }
.cn-aicr-step:first-child::after { display: none; }
.cn-aicr-step.is-lit::before, .cn-aicr-step.is-lit::after { transform: none; }
.cn-aicr-step h3 { font: 500 clamp(21px,2.3vw,32px)/1.1 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; color: var(--text-subtle); transition: color 520ms var(--ease-out); }
.cn-aicr-step.is-lit h3 { color: var(--text-body); }
.cn-aicr-step-q { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); margin: var(--space-2) 0 0; opacity: .45; transition: opacity 520ms var(--ease-out); }
.cn-aicr-step p:last-child { font: var(--text-body-14); color: var(--text-muted); margin: 0; text-wrap: pretty; opacity: .45; transition: opacity 520ms var(--ease-out); }
.cn-aicr-step.is-lit .cn-aicr-step-q, .cn-aicr-step.is-lit p:last-child { opacity: 1; }
/* the final stage is marked by its rail alone; the wording stays in the same
   voice as every stage above it */
.cn-aicr-step.is-human::before, .cn-aicr-step.is-human::after { background: var(--warm-coral); }
.cn-aicr-step:nth-child(2) { margin-left: 44px; }
.cn-aicr-step:nth-child(3) { margin-left: 88px; }
.cn-aicr-step:nth-child(4) { margin-left: 132px; }
.cn-aicr-step:nth-child(5) { margin-left: 176px; }
.cn-aicr-step:nth-child(6) { margin-left: 220px; }

/* 04: heading lives in the left column; the terms are the whole right column */
/* the heading rides at the vertical centre of the term list beside it */
.cn-aicr-aside { display: grid; grid-template-columns: minmax(0,.3fr) minmax(0,.7fr); gap: clamp(32px,6vw,96px); align-items: center; }
.cn-aicr-aside h2 { font: 500 clamp(24px,2.8vw,38px)/1.1 var(--font-display); letter-spacing: var(--tracking-display); margin: var(--space-3) 0 var(--space-4); text-wrap: balance; }
.cn-aicr-aside-lead { font: var(--text-body-14); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.cn-aicr-terms { margin: 0; counter-reset: cn-term; }
.cn-aicr-terms dt { counter-increment: cn-term; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--border-hairline); font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-aicr-terms dt::before { content: "0" counter(cn-term); color: var(--text-subtle); letter-spacing: .1em; }
.cn-aicr-terms dd { margin: var(--space-2) 0 var(--space-6) calc(34px + var(--space-5)); font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-aicr-terms dd:last-of-type { border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--space-6); margin-bottom: 0; }

/* 05: the heading spans the split it describes */
.cn-aicr-spanhead { font: 500 clamp(26px,3.4vw,46px)/1.08 var(--font-display); letter-spacing: var(--tracking-display); margin: 0 auto clamp(36px,5vw,64px); max-width: 26ch; text-align: center; text-wrap: balance; }
.cn-aicr-spanhead em { font-style: normal; color: var(--brand-600); }
.cn-aicr-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); border-top: 1px solid var(--border-strong); }
.cn-aicr-cols > div { padding-top: var(--space-6); }
.cn-aicr-cols > div:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,6vw,88px); }
.cn-aicr-cols h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-6); color: var(--text-body); }
.cn-aicr-cols ol { list-style: none; margin: 0; padding: 0; counter-reset: cn-aicr; }
.cn-aicr-cols li { counter-increment: cn-aicr; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: var(--space-4); padding: var(--space-4) 0; font: var(--text-body-16); color: var(--text-muted); }
.cn-aicr-cols li::before { content: "0" counter(cn-aicr); font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); padding-top: 5px; }
.cn-aicr-verdict { margin: clamp(36px,5vw,64px) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); font: 500 clamp(19px,1.9vw,26px)/1.4 var(--font-display); letter-spacing: -.012em; color: var(--text-body); max-width: 44ch; text-align: center; text-wrap: pretty; }


@media (max-width: 900px) {
  .cn-aicr-open, .cn-aicr-aside, .cn-aicr-cols { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-aicr-cols > div:last-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hairline); }
  /* the staircase flattens to a single rail once there is no width to step into */
  .cn-aicr-step { margin-left: 0 !important; }
  .cn-aicr-step::after { display: none; }
  /* the matrix becomes three stacked blocks, each still labelled */
  .cn-aicr-matrix, .cn-aicr-matrix thead, .cn-aicr-matrix tbody, .cn-aicr-matrix tr, .cn-aicr-matrix th, .cn-aicr-matrix td { display: block; width: auto; }
  .cn-aicr-matrix thead { display: none; }
  .cn-aicr-matrix tbody th { width: auto; padding: var(--space-6) 0 0; border: 0; }
  .cn-aicr-matrix tbody td { padding: var(--space-1) 0 0; border: 0; background: none !important; }
  .cn-aicr-matrix tbody td::before { content: attr(data-gen); display: block; font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); margin-bottom: 2px; }
  .cn-aicr-matrix tbody tr { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-hairline); }
}
@media (max-width: 640px) {
  .cn-aicr-step { grid-template-columns: minmax(0,1fr); gap: var(--space-3); }
}
/* This page is not inside .cn-landing, so it misses that scope's dark remap of
   --brand-100; without this the current-generation column stays near-white. */
:root[data-theme="dark"] .cn-aicr-matrix th.is-now,
:root[data-theme="dark"] .cn-aicr-matrix td.is-now { background: var(--surface-sunken); }
:root[data-theme="dark"] .cn-aicr-matrix th.is-now .cn-aicr-gen-name,
:root[data-theme="dark"] .cn-aicr-spanhead em { color: var(--brand-400); }
:root[data-theme="dark"] .cn-aicr-link { color: var(--brand-400); border-bottom-color: #ffffff26; }
:root[data-theme="dark"] .cn-aicr-link:hover { border-bottom-color: var(--brand-400); }
@media (prefers-reduced-motion: reduce) {
  /* the ladder arrives drawn rather than drawing itself */
  .cn-aicr-step::before, .cn-aicr-step::after { transform: none; transition: none; }
  .cn-aicr-step h3 { color: var(--text-body); transition: none; }
  .cn-aicr-step-q, .cn-aicr-step p:last-child { opacity: 1; transition: none; }
}

/* ---------- Code review checklist ----------
   A review sheet, not a landing page: empty boxes the reader could work
   through, one rule per section, and a different structure in every band. */

.cn-cl-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
/* --gray-1000 and --surface-page invert between themes, so the checked box is
   black-on-white in light and white-on-black in dark from the same two tokens */
.cn-cl-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 3px; border: 1px solid var(--border-strong); border-radius: 3px; background: transparent; transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out); }
.cn-cl-box svg { width: 11px; height: 11px; stroke: var(--surface-page); opacity: 0; transform: scale(.5); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.cn-cl-box.is-ticked { background: var(--gray-1000); border-color: var(--gray-1000); }
.cn-cl-box.is-ticked svg { opacity: 1; transform: none; }

/* 01: review brief */
.cn-cl-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(28px,5vw,72px); align-items: center; }
.cn-cl-hero h1 { font: 500 clamp(34px,5vw,70px)/1.02 var(--font-display); letter-spacing: -.04em; margin: 0; max-width: 12ch; }
.cn-cl-hero p { font: var(--text-body-16); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.cn-cl-hero-meta { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-strong); }

/* 02: the working checklist: a dense two-column matrix */
.cn-cl-matrix { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(20px,2.5vw,28px); }
.cn-cl-group { border: 1px solid var(--border-hairline); border-radius: 6px; background: var(--surface-card); padding: clamp(22px,2.4vw,30px); }
.cn-cl-group-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.cn-cl-group-head > span { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); }
.cn-cl-group-head h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--text-body); }
.cn-cl-group ul { list-style: none; margin: 0; padding: 0; }
.cn-cl-group li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
.cn-cl-group li:first-child { border-top: 0; }
.cn-cl-count { margin-top: clamp(36px,5vw,56px); padding-top: var(--space-5); border-top: 1px solid var(--border-strong); display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(20px,4vw,48px); align-items: baseline; }
.cn-cl-count > span:first-child { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600); white-space: nowrap; }
.cn-cl-count p { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 03: the review path: four checkpoints on one horizontal rule */
.cn-cl-path { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--border-strong); }
.cn-cl-path > li { list-style: none; position: relative; padding: var(--space-7) var(--space-6) 0 0; }
.cn-cl-path > li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 999rem; background: var(--warm-coral); }
/* the arrow carrying the eye to the next checkpoint */
.cn-cl-path > li + li::after { content: "\2192"; position: absolute; top: var(--space-7); left: calc(var(--space-6) / -2); transform: translate(-40%,1px); color: var(--gray-400); font: var(--text-body-14); }
.cn-cl-path-num { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); }
.cn-cl-path h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: var(--space-3) 0 var(--space-3); color: var(--text-body); }
.cn-cl-path p { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
.cn-cl-path-note { margin: clamp(32px,4vw,48px) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); font: var(--text-body-16); color: var(--text-muted); max-width: 74ch; text-wrap: pretty; }

/* 04: the spectrum: deterministic → contextual → judgment, across the page */
.cn-cl-axis { position: relative; height: 1px; background: var(--border-soft); margin-bottom: var(--space-5); }
.cn-cl-axis::after { content: "\2192"; position: absolute; right: -2px; top: -9px; color: var(--gray-400); font: var(--text-body-14); }
.cn-cl-spectrum { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(28px,5vw,72px); }
.cn-cl-terr { position: relative; padding-top: var(--space-5); }
.cn-cl-terr::before { content: ""; position: absolute; top: -22px; left: 0; width: 7px; height: 7px; border-radius: 999rem; background: var(--gray-400); }
.cn-cl-terr.is-context::before { background: var(--warm-coral); }
.cn-cl-terr h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-4); color: var(--text-body); }
.cn-cl-terr.is-context h3 { color: var(--brand-600); }
.cn-cl-terr > p { margin: 0 0 var(--space-5); font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
.cn-cl-terr ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.cn-cl-terr li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-hairline); font: var(--text-body-14); color: var(--text-body); text-wrap: pretty; }
/* must out-specify .cn-cl-terr > p above, which would otherwise mute it */
.cn-cl-terr > p.cn-cl-terr-note { margin: var(--space-5) 0 0; font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-wrap: pretty; }
.cn-cl-verdict { margin: clamp(36px,5vw,56px) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); font: 500 clamp(19px,1.9vw,26px)/1.4 var(--font-display); letter-spacing: -.012em; color: var(--text-body); max-width: 46ch; text-align: center; text-wrap: pretty; }

/* 05: the approval gate: narrow, quiet, the bottom of the sheet */
.cn-cl-gate { max-width: 660px; margin: 0 auto; }
.cn-cl-gate h2 { font: 500 clamp(26px,3vw,40px)/1.1 var(--font-display); letter-spacing: var(--tracking-display); margin: var(--space-3) 0 clamp(28px,4vw,44px); }
.cn-cl-gate ul { list-style: none; margin: 0; padding: 0; }
.cn-cl-gate li { display: flex; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); font: var(--text-body-16); color: var(--text-body); text-wrap: pretty; }
.cn-cl-gate-final { margin: clamp(32px,4vw,48px) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); font: 500 clamp(20px,2vw,28px)/1.35 var(--font-display); letter-spacing: -.014em; color: var(--text-body); text-wrap: balance; }

@media (max-width: 900px) {
  .cn-cl-hero { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-cl-matrix { grid-template-columns: minmax(0,1fr); }
  /* path and spectrum stack, each keeping its own rule and marker */
  .cn-cl-path { grid-template-columns: minmax(0,1fr); border-top: 0; }
  .cn-cl-path > li { border-top: 1px solid var(--border-strong); padding-bottom: var(--space-6); padding-right: 0; }
  .cn-cl-path > li + li::after { display: none; }
  .cn-cl-spectrum { grid-template-columns: minmax(0,1fr); gap: var(--space-10); }
  .cn-cl-axis { display: none; }
  .cn-cl-terr { border-top: 1px solid var(--border-soft); padding-top: var(--space-6); }
  .cn-cl-terr::before { top: -4px; }
}
/* this page is not inside .cn-landing, so the coral accents need lifting off
   the dark ground themselves: brand-600 is too dark against #0d0e10 */
:root[data-theme="dark"] .cn-cl-count > span:first-child,
:root[data-theme="dark"] .cn-cl-terr.is-context h3,
:root[data-theme="dark"] .cn-cl-terr > p.cn-cl-terr-note { color: var(--brand-400); }
/* the empty boxes read as outlines, not filled controls, in either theme */
:root[data-theme="dark"] .cn-cl-box { border-color: var(--text-subtle); }

@media (prefers-reduced-motion: reduce) {
  .cn-cl-box, .cn-cl-box svg { transition: none; }
  .cn-cl-box.is-ticked svg { transform: none; }
}
/* the page is meant to survive being printed and kept beside a monitor */
@media print {
  /* printed, the sheet is blank for the reader to work through */
  .cn-cl-box { border-color: #000; background: transparent !important; }
  .cn-cl-box svg { display: none; }
  .cn-cl-matrix, .cn-cl-spectrum { break-inside: avoid; }
  .cn-cl-group, .cn-cl-terr, .cn-cl-gate li { break-inside: avoid; }
}

/* ---------- Utility pages: status, careers, changelog ----------
   Deliberately quieter than the marketing pages. Three different grammars:
   status is a ledger, careers is editorial, changelog is a chronology. */

.cn-util-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }

/* --- STATUS: an operational ledger. Label left, state right, ruled between. --- */
.cn-st-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,5vw,72px); align-items: end; padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-strong); }
.cn-st-head h1 { font: 500 clamp(30px,3.4vw,48px)/1.05 var(--font-display); letter-spacing: -.032em; margin: var(--space-3) 0 0; }
.cn-st-state { justify-self: start; }
.cn-st-badge { display: inline-block; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-600); border: 1px solid var(--brand-200); border-radius: 4px; padding: 5px 10px; }
.cn-st-lede { margin: var(--space-6) 0 0; font: var(--text-body-16); color: var(--text-muted); max-width: 64ch; text-wrap: pretty; }
.cn-st-ledger { margin-top: clamp(40px,6vw,72px); }
.cn-st-ledger-cap { display: flex; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); }
.cn-st-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); }
.cn-st-row dt { margin: 0; font: var(--text-body-16); color: var(--text-body); }
.cn-st-row dd { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; }
.cn-st-note { margin: var(--space-5) 0 0; font: var(--text-body-14); color: var(--text-subtle); max-width: 68ch; text-wrap: pretty; }

/* --- CAREERS: editorial. Larger type, more air, no cards. --- */
.cn-ca-hero { max-width: 780px; margin: 0 auto; text-align: center; }
.cn-ca-hero h1 { font: 500 clamp(34px,4.4vw,64px)/1.03 var(--font-display); letter-spacing: -.038em; margin: var(--space-4) auto var(--space-5); max-width: 16ch; }
.cn-ca-hero p { font: var(--text-lead); color: var(--text-muted); margin: 0 auto; max-width: 52ch; text-wrap: pretty; }
.cn-ca-principles { display: grid; }
.cn-ca-principles > div { display: grid; grid-template-columns: minmax(0,.28fr) minmax(0,.72fr); gap: clamp(24px,5vw,72px); padding: clamp(24px,3vw,36px) 0; border-top: 1px solid var(--border-hairline); align-items: baseline; }
.cn-ca-principles > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.cn-ca-principles dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-ca-principles dd { margin: 0; font: 500 clamp(17px,1.5vw,21px)/1.45 var(--font-display); letter-spacing: -.008em; color: var(--text-body); text-wrap: pretty; }
.cn-ca-roles { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.cn-ca-roles > span:first-child { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-ca-roles > span:last-child { font: 500 clamp(19px,1.8vw,26px)/1.2 var(--font-display); letter-spacing: -.014em; color: var(--text-body); }
.cn-ca-after { margin: var(--space-5) 0 0; font: var(--text-body-14); color: var(--text-muted); text-align: center; }
.cn-ca-contact { max-width: 620px; margin: 0 auto; text-align: center; }
.cn-ca-contact h2 { font: 500 clamp(21px,2vw,28px)/1.2 var(--font-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); }
.cn-ca-contact p { font: var(--text-body-16); color: var(--text-muted); margin: 0 0 var(--space-5); text-wrap: pretty; }
.cn-util-link { font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-decoration: none; border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; }
.cn-util-link:hover { border-bottom-color: var(--brand-600); }

/* --- CHANGELOG: a chronology. One spine the real releases will hang from. --- */
.cn-ch-head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-strong); text-align: center; }
.cn-ch-head h1 { font: 500 clamp(30px,3.4vw,48px)/1.05 var(--font-display); letter-spacing: -.032em; margin: var(--space-3) auto var(--space-4); }
.cn-ch-head p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto; max-width: 56ch; }
/* one connected box divided into four, rather than four separate rules */
.cn-ch-tax { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin-top: clamp(32px,4vw,48px); border: 1px solid var(--border-hairline); border-radius: 6px; overflow: hidden; }
.cn-ch-tax > div { padding: clamp(18px,2vw,24px); border-left: 1px solid var(--border-hairline); }
.cn-ch-tax > div:first-child { border-left: 0; }
.cn-ch-tax dt { margin: 0 0 var(--space-2); font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-ch-tax dd { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
/* the spine: entries will slot in here as list items with no other change */
.cn-ch-timeline { margin-top: clamp(40px,6vw,72px); position: relative; padding-left: 30px; }
.cn-ch-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 0; width: 1px; background: var(--border-soft); }
.cn-ch-entry { position: relative; padding-bottom: clamp(32px,4vw,48px); }
.cn-ch-entry:last-child { padding-bottom: 0; }
.cn-ch-entry::before { content: ""; position: absolute; left: -30px; top: 5px; width: 9px; height: 9px; border-radius: 999rem; background: var(--white); border: 1px solid var(--border-strong); }
.cn-ch-entry.is-now::before { background: var(--warm-coral); border-color: var(--warm-coral); }
.cn-ch-entry-meta { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-ch-entry.is-now .cn-ch-entry-meta { color: var(--brand-600); }
.cn-ch-entry h3 { font: 500 clamp(19px,1.8vw,25px)/1.25 var(--font-display); letter-spacing: -.014em; margin: var(--space-2) 0 var(--space-2); }
.cn-ch-entry p { margin: 0; font: var(--text-body-16); color: var(--text-muted); max-width: 60ch; text-wrap: pretty; }

@media (max-width: 900px) {
  .cn-st-head { grid-template-columns: minmax(0,1fr); gap: var(--space-6); align-items: start; }
  .cn-ca-principles > div { grid-template-columns: minmax(0,1fr); gap: var(--space-3); }
  /* two up: the divider grid turns, so cell 3 starts a new row */
  .cn-ch-tax { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cn-ch-tax > div:nth-child(odd) { border-left: 0; }
  .cn-ch-tax > div:nth-child(n+3) { border-top: 1px solid var(--border-hairline); }
}
@media (max-width: 560px) {
  /* one up: every cell but the first is separated by a horizontal rule only */
  .cn-ch-tax { grid-template-columns: minmax(0,1fr); }
  .cn-ch-tax > div { border-left: 0; border-top: 1px solid var(--border-hairline); }
  .cn-ch-tax > div:first-child { border-top: 0; }
  .cn-st-row, .cn-ca-roles { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
/* the coral reads too dark on the dark ground outside .cn-landing */
:root[data-theme="dark"] .cn-st-badge { color: var(--brand-400); border-color: #ffffff26; }
:root[data-theme="dark"] .cn-ch-entry.is-now .cn-ch-entry-meta,
:root[data-theme="dark"] .cn-util-link { color: var(--brand-400); }
:root[data-theme="dark"] .cn-util-link { border-bottom-color: #ffffff26; }
:root[data-theme="dark"] .cn-util-link:hover { border-bottom-color: var(--brand-400); }

/* ---------- About ----------
   A founder letter in an editorial layout. Almost no decoration: the
   personality is meant to come from the writing and the composition. */

.cn-ab-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }

/* 01: the statement, then the explanation set low and right against it */
.cn-ab-hero { text-align: center; }
.cn-ab-hero h1 { font: 500 clamp(36px,5.4vw,86px)/1 var(--font-display); letter-spacing: -.042em; max-width: 17ch; margin: 0 auto; }
.cn-ab-open { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(30px,6vw,96px); align-items: start; }
/* qualified so it out-specifies the .cn-ab-open p base rule below */
.cn-ab-open p.cn-ab-open-lede { font: 500 clamp(21px,2.1vw,29px)/1.45 var(--font-display); letter-spacing: -.022em; color: var(--text-body); max-width: 40ch; margin: 0; text-wrap: pretty; }
/* each paragraph sits in its own Reveal wrapper, so the rhythm is set on the
   wrappers rather than with an adjacent-sibling rule on the paragraphs */
.cn-ab-open p { margin: 0; font: var(--text-lead); color: var(--text-muted); max-width: 58ch; text-wrap: pretty; }
.cn-ab-open > div:last-child > div + div { margin-top: var(--space-6); }
.cn-ab-open p.cn-ab-open-close { color: var(--text-body); }

/* 02: the signature: what changed, and everything it reaches */
.cn-ab-case h2 { font: 500 clamp(26px,3.4vw,46px)/1.1 var(--font-display); letter-spacing: var(--tracking-display); margin: var(--space-4) 0 clamp(40px,5vw,64px); max-width: 22ch; text-wrap: balance; }
.cn-ab-branch { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: clamp(28px,5vw,80px); }
.cn-ab-side h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); color: var(--text-body); }
.cn-ab-side p { margin: 0; font: var(--text-body-16); color: var(--text-muted); max-width: 34ch; text-wrap: pretty; }
/* the four things a change reaches, hung off one vertical rule */
.cn-ab-leaves { position: relative; margin-top: clamp(28px,4vw,44px); padding-left: 0; }
/* the spine brackets every branch, so no leaf hangs off an unconnected line */
.cn-ab-leaves::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--border-soft); }
.cn-ab-leaf { list-style: none; position: relative; display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-5) 0 var(--space-5) 84px; }
/* the branch: a horizontal run out to the label, ending in an arrow */
.cn-ab-leaf::before { content: ""; position: absolute; left: 0; top: 50%; width: 62px; height: 1px; background: var(--border-soft); }
.cn-ab-leaf::after { content: "\2192"; position: absolute; left: 62px; top: 50%; transform: translateY(-52%); color: var(--gray-400); font: var(--text-body-14); }
.cn-ab-leaf > span:first-child { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); white-space: nowrap; }
.cn-ab-leaf > span:last-child { font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
.cn-ab-case-close { margin: clamp(40px,5vw,64px) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); font: 500 clamp(19px,1.9vw,26px)/1.4 var(--font-display); letter-spacing: -.012em; color: var(--text-body); max-width: 52ch; text-align: center; text-wrap: pretty; }

/* 03: principles keep their numbered rows; only the measure is tuned */
.cn-ab-hold { display: grid; }
.cn-ab-hold > div { display: grid; grid-template-columns: 44px minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(18px,3vw,48px); align-items: start; padding: var(--space-8) 0; border-top: 1px solid var(--border-hairline); }
.cn-ab-hold > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.cn-ab-hold-num { font: var(--text-caption); font-family: var(--font-mono); color: var(--brand-600); padding-top: 6px; }
.cn-ab-hold h3 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin: 0; }
.cn-ab-hold p { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }

/* 04: belief above, consequence below, joined by a single drop */
.cn-ab-because { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(28px,4vw,56px) clamp(32px,6vw,88px); }
.cn-ab-pair { border-top: 1px solid var(--border-strong); padding-top: var(--space-5); text-align: center; }
.cn-ab-pair-label { display: block; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-ab-pair-belief { margin: var(--space-2) auto 0; font: 500 clamp(18px,1.7vw,24px)/1.3 var(--font-display); letter-spacing: -.014em; color: var(--text-body); text-wrap: pretty; }
/* the drop between belief and consequence */
.cn-ab-pair-arrow { display: block; margin: var(--space-4) 0; color: var(--warm-coral); font: var(--text-body-14); line-height: 1; }
.cn-ab-pair-so { margin: var(--space-2) auto 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }

/* 05: where we are: quiet, factual, the end of the letter */
/* dt and dd auto-place into the two columns, one row per fact */
.cn-ab-where { display: grid; grid-template-columns: minmax(0,.32fr) minmax(0,.68fr); column-gap: clamp(28px,5vw,80px); row-gap: var(--space-6); align-items: baseline; margin: 0; }
.cn-ab-where dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-ab-where dd { margin: 0; font: var(--text-body-16); color: var(--text-body); max-width: 50ch; text-wrap: pretty; }
.cn-ab-where-cta { grid-column: 2; margin-top: var(--space-2) !important; }
.cn-ab-cta { background: none; border: 0; padding: 0; cursor: pointer; font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; }
.cn-ab-cta:hover { border-bottom-color: var(--brand-600); }

@media (max-width: 900px) {
  .cn-ab-open, .cn-ab-branch, .cn-ab-because, .cn-ab-where { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-ab-hold > div { grid-template-columns: 32px minmax(0,1fr); gap: var(--space-4); }
  .cn-ab-hold p { grid-column: 2; margin-top: var(--space-2); }
  /* the grid is one column here, so the CTA must not ask for a second */
  .cn-ab-where-cta { grid-column: 1; }
}
@media (max-width: 560px) {
  .cn-ab-leaf { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-left: 44px; }
  .cn-ab-leaf::before { width: 26px; top: 14px; }
  .cn-ab-leaf::after { left: 26px; top: 14px; }
}
/* coral is too dark on the dark ground outside .cn-landing */
:root[data-theme="dark"] .cn-ab-hold-num,
:root[data-theme="dark"] .cn-ab-pair-arrow,
:root[data-theme="dark"] .cn-ab-cta { color: var(--brand-400); }
:root[data-theme="dark"] .cn-ab-cta { border-bottom-color: #ffffff26; }
:root[data-theme="dark"] .cn-ab-cta:hover { border-bottom-color: var(--brand-400); }

/* ---------- Content library ----------
   The front page of a publication, not a resource-card grid. Typography and
   rules carry it; nothing on the page is a container for its own sake. */

.cn-lib-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-lib-read { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: var(--text-body-14); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-600); border-bottom: 1px solid var(--brand-200); padding-bottom: 3px; }
.cn-lib-read:hover { border-bottom-color: var(--brand-600); }

/* 01 - the masthead */
.cn-lib-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(28px,5vw,72px); align-items: center; }
.cn-lib-hero h1 { font: 500 clamp(34px,4.6vw,68px)/1.02 var(--font-display); letter-spacing: -.04em; max-width: 12ch; margin: 0; }
.cn-lib-hero p { font: var(--text-body-16); color: var(--text-muted); margin: 0; max-width: 52ch; text-wrap: pretty; }
.cn-lib-hero p + p { margin-top: var(--space-4); }
.cn-lib-hero-tax { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-strong); text-align: center; }

/* 02 - featured reading: one lead story, one secondary, deliberately unequal */
.cn-lib-featured { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(32px,5vw,72px); border-top: 1px solid var(--border-strong); padding-top: clamp(28px,4vw,44px); }
.cn-lib-featured > article:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,5vw,72px); }
.cn-lib-meta { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.cn-lib-meta > span:first-child { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600); }
.cn-lib-meta > span:last-child { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); }
.cn-lib-lead h2 { font: 500 clamp(30px,3.8vw,54px)/1.05 var(--font-display); letter-spacing: -.032em; margin: 0 0 var(--space-4); max-width: 14ch; text-wrap: balance; }
.cn-lib-lead p { font: var(--text-lead); color: var(--text-muted); margin: 0 0 var(--space-6); max-width: 44ch; text-wrap: pretty; }
.cn-lib-second h2 { font: 500 clamp(22px,2.2vw,30px)/1.15 var(--font-display); letter-spacing: -.02em; margin: 0 0 var(--space-4); max-width: 16ch; text-wrap: balance; }
.cn-lib-second p { font: var(--text-body-16); color: var(--text-muted); margin: 0 0 var(--space-6); text-wrap: pretty; }

/* 03 - the index: one ruled row per subject */
.cn-lib-index { border-top: 1px solid var(--border-strong); }
.cn-lib-row { display: grid; grid-template-columns: minmax(0,.26fr) minmax(0,.54fr) minmax(0,.2fr); gap: clamp(20px,4vw,56px); align-items: baseline; padding: clamp(22px,3vw,32px) 0; border-bottom: 1px solid var(--border-hairline); }
.cn-lib-row h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--text-body); }
.cn-lib-row p { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-lib-count { justify-self: end; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; }

/* 04 - the reading fork: two intents, one rule between them */
.cn-lib-fork { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); }
.cn-lib-fork > div:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,6vw,88px); }
.cn-lib-fork h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-4); color: var(--text-body); }
.cn-lib-fork p { font: 500 clamp(18px,1.7vw,24px)/1.35 var(--font-display); letter-spacing: -.012em; color: var(--text-body); margin: 0 0 var(--space-6); text-wrap: pretty; }
.cn-lib-fork-start { display: block; margin-bottom: var(--space-3); font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }

/* 05 - the editorial standard: three statements on one strip */
.cn-lib-standard { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(28px,5vw,72px); border-top: 1px solid var(--border-strong); padding-top: clamp(24px,3vw,36px); }
.cn-lib-standard > div + div { border-left: 1px solid var(--border-hairline); padding-left: clamp(28px,5vw,72px); }
.cn-lib-standard dt { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600); margin: 0 0 var(--space-4); }
.cn-lib-standard dd { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }

@media (max-width: 900px) {
  .cn-lib-hero, .cn-lib-featured, .cn-lib-fork, .cn-lib-standard { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-lib-featured > article:last-child,
  .cn-lib-fork > div:last-child,
  .cn-lib-standard > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hairline); padding-top: var(--space-8); }
  .cn-lib-row { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
  .cn-lib-count { justify-self: start; }
}
/* the coral runs too dark on the dark ground outside .cn-landing */
:root[data-theme="dark"] .cn-lib-meta > span:first-child,
:root[data-theme="dark"] .cn-lib-standard dt,
:root[data-theme="dark"] .cn-lib-read { color: var(--brand-400); }
:root[data-theme="dark"] .cn-lib-read { border-bottom-color: #ffffff26; }
:root[data-theme="dark"] .cn-lib-read:hover { border-bottom-color: var(--brand-400); }

/* ---------- Privacy ----------
   A technical disclosure, not a marketing page. Ledger rows, monospace
   metadata and thin rules; no cards, badges or compliance decoration. */

.cn-pv-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-pv-link { font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-decoration: none; border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; }
.cn-pv-link:hover { border-bottom-color: var(--brand-600); }

/* 01 - a quiet opening */
.cn-pv-hero { max-width: 760px; margin: 0 auto; text-align: center; }
.cn-pv-hero h1 { font: 500 clamp(32px,4vw,58px)/1.03 var(--font-display); letter-spacing: -.038em; margin: var(--space-4) 0 var(--space-5); }
.cn-pv-hero p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto; max-width: 60ch; text-wrap: pretty; }
.cn-pv-hero p + p { margin-top: var(--space-3); }

/* 02 - the data ledger: one row per category, four columns */
.cn-pv-ledger { width: 100%; border-collapse: collapse; text-align: left; }
.cn-pv-ledger th, .cn-pv-ledger td { vertical-align: top; padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); }
.cn-pv-ledger thead th { padding-top: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-strong); font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); font-weight: var(--weight-regular); }
.cn-pv-ledger tbody th { font: var(--text-body-16); color: var(--text-body); font-weight: var(--weight-medium); width: 22%; }
.cn-pv-ledger tbody td { font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
.cn-pv-none { color: var(--brand-600) !important; font-family: var(--font-mono); font-size: var(--fs-p12); letter-spacing: .06em; text-transform: uppercase; }
.cn-pv-foot { margin: var(--space-5) 0 0; font: var(--text-body-14); color: var(--text-subtle); max-width: 78ch; text-wrap: pretty; }

/* 03 - the data path: where information goes, nothing more */
.cn-pv-path { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid var(--border-strong); }
.cn-pv-path > li { list-style: none; position: relative; padding: var(--space-7) var(--space-5) 0 0; }
.cn-pv-path > li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 999rem; background: var(--gray-400); }
.cn-pv-path > li.is-here::before { background: var(--warm-coral); }
.cn-pv-path > li + li::after { content: "\2192"; position: absolute; top: var(--space-7); left: calc(var(--space-5) / -2); transform: translate(-40%,1px); color: var(--gray-400); font: var(--text-body-14); }
.cn-pv-path h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-3); color: var(--text-body); }
.cn-pv-path p { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 04 - retention and model use, split */
.cn-pv-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); }
.cn-pv-split > div:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,6vw,88px); }
.cn-pv-split h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); color: var(--text-body); }
.cn-pv-defs { margin: 0; }
.cn-pv-defs dt { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-body); margin-top: var(--space-6); }
.cn-pv-defs dt:first-of-type { margin-top: 0; }
.cn-pv-defs dd { margin: var(--space-2) 0 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 05 - controls, then the compact reference */
.cn-pv-rows { border-top: 1px solid var(--border-strong); }
.cn-pv-rows > div { display: grid; grid-template-columns: minmax(0,.28fr) minmax(0,.72fr); gap: clamp(20px,4vw,56px); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-pv-rows dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-pv-rows dd { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-pv-ref { border-top: 1px solid var(--border-strong); margin-top: clamp(40px,5vw,64px); }
.cn-pv-ref > div { display: grid; grid-template-columns: minmax(0,.28fr) minmax(0,.72fr); gap: clamp(20px,4vw,56px); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-pv-ref dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.cn-pv-ref dd { margin: 0; font: var(--text-body-14); color: var(--text-body); text-wrap: pretty; }

@media (max-width: 900px) {
  .cn-pv-split { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-pv-split > div:last-child { border-left: 0; padding-left: 0; }
  .cn-pv-path { grid-template-columns: minmax(0,1fr); border-top: 0; }
  .cn-pv-path > li { border-top: 1px solid var(--border-strong); padding-bottom: var(--space-6); padding-right: 0; }
  .cn-pv-path > li + li::after { display: none; }
  .cn-pv-rows > div, .cn-pv-ref > div { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
  /* the ledger becomes one labelled block per data type */
  .cn-pv-ledger, .cn-pv-ledger thead, .cn-pv-ledger tbody, .cn-pv-ledger tr, .cn-pv-ledger th, .cn-pv-ledger td { display: block; width: auto; }
  .cn-pv-ledger thead { display: none; }
  .cn-pv-ledger tbody th { width: auto; padding: var(--space-6) 0 var(--space-2); border: 0; }
  .cn-pv-ledger tbody td { padding: 0 0 var(--space-3); border: 0; }
  .cn-pv-ledger tbody td::before { content: attr(data-col); display: block; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 2px; }
  .cn-pv-ledger tbody tr { border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--space-4); }
}
:root[data-theme="dark"] .cn-pv-none,
:root[data-theme="dark"] .cn-pv-link { color: var(--brand-400) !important; }
:root[data-theme="dark"] .cn-pv-link { border-bottom-color: #ffffff26; }

/* ---------- Terms ----------
   A term sheet: numbered clauses, ruled rows, monospace metadata. No cards,
   no icons, no decoration. Deliberately plain. */

.cn-tm-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-tm-link { font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-decoration: none; border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; }
.cn-tm-link:hover { border-bottom-color: var(--brand-600); }

/* 01 - quiet hero, with the document's own status stated up front */
.cn-tm-hero { max-width: 720px; margin: 0 auto; text-align: center; }
.cn-tm-hero h1 { font: 500 clamp(32px,4vw,58px)/1.03 var(--font-display); letter-spacing: -.038em; margin: var(--space-4) 0 var(--space-5); }
.cn-tm-hero p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto; max-width: 58ch; text-wrap: pretty; }
.cn-tm-hero p + p { margin-top: var(--space-3); }
.cn-tm-status { display: inline-block; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-strong); font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600); }

/* 02 - the contract ledger: numbered clauses on ruled rows */
.cn-tm-ledger { border-top: 1px solid var(--border-strong); }
.cn-tm-clause { display: grid; grid-template-columns: 52px minmax(0,.24fr) minmax(0,.76fr); gap: clamp(18px,3vw,48px); padding: clamp(24px,3vw,34px) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-tm-clause-num { font: var(--text-caption); font-family: var(--font-mono); color: var(--brand-600); }
.cn-tm-clause h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--text-body); }
.cn-tm-clause p { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-tm-clause p + p { margin-top: var(--space-3); font: var(--text-body-14); color: var(--text-subtle); }

/* 03 - responsibilities, split down one rule */
.cn-tm-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); }
.cn-tm-split > div:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,6vw,88px); }
.cn-tm-split h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); color: var(--text-body); }
.cn-tm-split ul { list-style: none; margin: 0; padding: 0; }
.cn-tm-split li { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }

/* 04 - ownership rows, then the exit sequence */
.cn-tm-rows { border-top: 1px solid var(--border-strong); }
.cn-tm-rows > div { display: grid; grid-template-columns: minmax(0,.26fr) minmax(0,.74fr); gap: clamp(20px,4vw,56px); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-tm-rows dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-tm-rows dd { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-tm-exit { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--border-strong); margin-top: clamp(40px,5vw,64px); }
.cn-tm-exit > li { list-style: none; position: relative; padding: var(--space-7) var(--space-5) 0 0; }
.cn-tm-exit > li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 999rem; background: var(--warm-coral); }
.cn-tm-exit > li + li::after { content: "\2192"; position: absolute; top: var(--space-7); left: calc(var(--space-5) / -2); transform: translate(-40%,1px); color: var(--gray-400); font: var(--text-body-14); }
.cn-tm-exit h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-3); color: var(--text-body); }
.cn-tm-exit p { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 05 - the legal reference */
.cn-tm-ref { border-top: 1px solid var(--border-strong); }
.cn-tm-ref > div { display: grid; grid-template-columns: minmax(0,.26fr) minmax(0,.74fr); gap: clamp(20px,4vw,56px); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-tm-ref dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.cn-tm-ref dd { margin: 0; font: var(--text-body-14); color: var(--text-body); text-wrap: pretty; }

@media (max-width: 900px) {
  .cn-tm-split { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-tm-split > div:last-child { border-left: 0; padding-left: 0; }
  .cn-tm-clause { grid-template-columns: 40px minmax(0,1fr); gap: var(--space-3) var(--space-4); }
  .cn-tm-clause p { grid-column: 2; }
  .cn-tm-exit { grid-template-columns: minmax(0,1fr); border-top: 0; }
  .cn-tm-exit > li { border-top: 1px solid var(--border-strong); padding-bottom: var(--space-6); padding-right: 0; }
  .cn-tm-exit > li + li::after { display: none; }
  .cn-tm-rows > div, .cn-tm-ref > div { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
}
:root[data-theme="dark"] .cn-tm-status,
:root[data-theme="dark"] .cn-tm-clause-num,
:root[data-theme="dark"] .cn-tm-link { color: var(--brand-400); }
:root[data-theme="dark"] .cn-tm-link { border-bottom-color: #ffffff26; }

/* ---------- Review ----------
   The page's identity is one thread. A single 1px line runs the anatomy and
   the flow; nothing here imitates GitHub chrome. */

.cn-rv-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.cn-rv-link { font: var(--text-body-14); font-family: var(--font-mono); color: var(--brand-600); text-decoration: none; border-bottom: 1px solid var(--brand-200); padding-bottom: 2px; }
.cn-rv-link:hover, .cn-rv-link:focus-visible { border-bottom-color: var(--brand-600); }

/* 01 - quiet hero */
.cn-rv-hero { max-width: 780px; margin: 0 auto; text-align: center; }
.cn-rv-hero h1 { font: 500 clamp(32px,4.2vw,60px)/1.04 var(--font-display); letter-spacing: -.038em; margin: 0 auto var(--space-5); max-width: 18ch; text-wrap: balance; }
.cn-rv-hero p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto; max-width: 58ch; text-wrap: pretty; }

/* 02 - anatomy: a control rail, then the thread itself */
.cn-rv-anatomy { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: clamp(20px,4vw,56px); max-width: 940px; margin: 0 auto; }
.cn-rv-thread { position: relative; padding-left: 30px; }
.cn-rv-thread::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--border-soft); }
.cn-rv-part { position: relative; padding: 0 0 clamp(26px,3.4vw,38px); }
.cn-rv-part:last-child { padding-bottom: 0; }
.cn-rv-part::before { content: ""; position: absolute; left: -30px; top: 7px; width: 9px; height: 9px; border-radius: 999rem; background: var(--white); border: 1px solid var(--border-strong); }
.cn-rv-part.is-key::before { background: var(--warm-coral); border-color: var(--warm-coral); }
.cn-rv-part h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-2); color: var(--text-body); }
.cn-rv-part p { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
/* the rail states line up with the thread parts, and never rely on colour alone */
.cn-rv-rail { display: grid; }
.cn-rv-rail > div { padding: 0 0 clamp(26px,3.4vw,38px); text-align: right; }
.cn-rv-state { display: block; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.cn-rv-state-on { color: var(--brand-600); }
.cn-rv-anatomy-note { max-width: 940px; margin: clamp(28px,4vw,40px) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); font: var(--text-body-14); color: var(--text-subtle); text-wrap: pretty; }

/* 03 - controls: four columns divided by thin rules, not cards */
.cn-rv-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(24px,3vw,44px); border-top: 1px solid var(--border-strong); }
.cn-rv-controls > div { padding-top: var(--space-6); }
.cn-rv-controls > div + div { border-left: 1px solid var(--border-hairline); padding-left: clamp(24px,3vw,44px); }
.cn-rv-controls h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-3); color: var(--text-body); }
.cn-rv-controls p { margin: 0 0 var(--space-4); font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }
/* severity marks carry their own letters, so they are never colour-only */
.cn-rv-marks { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.cn-rv-marks li { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .06em; color: var(--text-body); border: 1px solid var(--border-soft); border-radius: 4px; padding: 3px 7px; }

/* 04 - flow: the same thread, turned horizontal */
.cn-rv-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid var(--border-strong); }
.cn-rv-flow > li { list-style: none; position: relative; padding: var(--space-7) var(--space-5) 0 0; }
.cn-rv-flow > li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 999rem; background: var(--gray-400); }
.cn-rv-flow > li.is-key::before { background: var(--warm-coral); }
.cn-rv-flow > li + li::after { content: "\2192"; position: absolute; top: var(--space-7); left: calc(var(--space-5) / -2); transform: translate(-40%,1px); color: var(--gray-400); font: var(--text-body-14); }
.cn-rv-flow h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-3); color: var(--text-body); }
.cn-rv-flow p { margin: 0; font: var(--text-body-14); color: var(--text-muted); text-wrap: pretty; }

/* 05 - after the review, plus the closing line */
.cn-rv-after { border-top: 1px solid var(--border-strong); }
.cn-rv-after > div { display: grid; grid-template-columns: minmax(0,.24fr) minmax(0,.76fr); gap: clamp(20px,4vw,56px); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-rv-after dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-rv-after dd { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-rv-close { margin: clamp(40px,5vw,64px) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); font: 500 clamp(19px,1.9vw,26px)/1.4 var(--font-display); letter-spacing: -.012em; color: var(--text-body); max-width: 46ch; text-align: center; text-wrap: pretty; }

@media (max-width: 900px) {
  /* the rail folds into each part rather than sitting beside it */
  .cn-rv-anatomy { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cn-rv-rail { display: none; }
  .cn-rv-controls { grid-template-columns: minmax(0,1fr); gap: 0; border-top: 0; }
  .cn-rv-controls > div { border-top: 1px solid var(--border-strong); padding-bottom: var(--space-6); }
  .cn-rv-controls > div + div { border-left: 0; padding-left: 0; }
  .cn-rv-flow { grid-template-columns: minmax(0,1fr); border-top: 0; }
  .cn-rv-flow > li { border-top: 1px solid var(--border-strong); padding-bottom: var(--space-6); padding-right: 0; }
  .cn-rv-flow > li + li::after { display: none; }
  .cn-rv-after > div { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
}
:root[data-theme="dark"] .cn-rv-state-on,
:root[data-theme="dark"] .cn-rv-link { color: var(--brand-400); }
:root[data-theme="dark"] .cn-rv-link { border-bottom-color: #ffffff26; }

/* ---------- Execution layer ----------
   An engineering design document for something not yet built. The page's
   grammar is one execution trace: read, suspect, run, observe, attach. */

.cn-ex-mono { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }

/* 01 - hero, with the status stated quietly rather than as a banner */
.cn-ex-hero { max-width: 800px; margin: 0 auto; text-align: center; }
.cn-ex-hero h1 { font: 500 clamp(32px,4.2vw,60px)/1.04 var(--font-display); letter-spacing: -.038em; margin: var(--space-4) auto var(--space-5); max-width: 18ch; text-wrap: balance; }
.cn-ex-hero p { font: var(--text-body-16); color: var(--text-muted); margin: 0 auto; max-width: 60ch; text-wrap: pretty; }
.cn-ex-status { display: inline-grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-4); align-items: baseline; margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--border-strong); text-align: left; max-width: 52ch; }
.cn-ex-status > span:first-child { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-600); white-space: nowrap; }
.cn-ex-status > span:last-child { font: var(--text-body-14); color: var(--text-muted); }

/* 02 - the trace. One line, numbered stages, future tense throughout. */
.cn-ex-trace { max-width: 900px; margin: 0 auto; position: relative; padding-left: 34px; }
.cn-ex-trace::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--border-soft); }
.cn-ex-stage { position: relative; display: grid; grid-template-columns: 44px minmax(0,.34fr) minmax(0,.66fr); gap: clamp(16px,3vw,36px); align-items: baseline; padding: clamp(18px,2.4vw,26px) 0; }
.cn-ex-stage::before { content: ""; position: absolute; left: -34px; top: 24px; width: 11px; height: 11px; border-radius: 999rem; background: var(--white); border: 1px solid var(--border-soft); }
.cn-ex-stage.is-key::before { background: var(--warm-coral); border-color: var(--warm-coral); }
.cn-ex-num { font: var(--text-caption); font-family: var(--font-mono); color: var(--text-subtle); }
.cn-ex-stage h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--text-body); }
.cn-ex-stage p { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }

/* 03 - reading vs running */
.cn-ex-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); }
.cn-ex-split > div:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,6vw,88px); }
.cn-ex-split h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-3); color: var(--text-body); }
.cn-ex-split > div > p { margin: 0 0 var(--space-5); font: var(--text-body-14); color: var(--text-subtle); }
.cn-ex-split ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.cn-ex-split li { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-ex-principle { margin: clamp(36px,5vw,56px) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-strong); font: 500 clamp(19px,1.9vw,26px)/1.4 var(--font-display); letter-spacing: -.012em; color: var(--text-body); max-width: 44ch; text-align: center; text-wrap: pretty; }

/* 04 - design principles as ruled rows, then the boundary */
.cn-ex-rows { border-top: 1px solid var(--border-strong); }
.cn-ex-rows > div { display: grid; grid-template-columns: 44px minmax(0,.28fr) minmax(0,.72fr); gap: clamp(16px,3vw,44px); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-ex-rows dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-ex-rows dd { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }
.cn-ex-bound { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); }
.cn-ex-bound > div:last-child { border-left: 1px solid var(--border-hairline); padding-left: clamp(32px,6vw,88px); }
.cn-ex-bound h3 { font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); color: var(--text-body); }
.cn-ex-bound ul { list-style: none; margin: 0; padding: 0; }
.cn-ex-bound li { padding: var(--space-3) 0; font: var(--text-body-16); color: var(--text-muted); }
.cn-ex-bound-note { margin: clamp(28px,4vw,40px) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); font: var(--text-body-14); color: var(--text-subtle); max-width: 74ch; text-wrap: pretty; }

/* 05 - evidence anatomy */
.cn-ex-anatomy { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--border-strong); }
.cn-ex-anatomy > div { display: grid; grid-template-columns: minmax(0,.26fr) minmax(0,.74fr); gap: clamp(20px,4vw,56px); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); align-items: baseline; }
.cn-ex-anatomy dt { margin: 0; font: var(--text-caption); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.cn-ex-anatomy dd { margin: 0; font: var(--text-body-16); color: var(--text-muted); text-wrap: pretty; }

@media (max-width: 900px) {
  .cn-ex-split, .cn-ex-bound { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .cn-ex-split > div:last-child, .cn-ex-bound > div:last-child { border-left: 0; padding-left: 0; }
  .cn-ex-stage { grid-template-columns: 40px minmax(0,1fr); gap: var(--space-2) var(--space-4); }
  .cn-ex-stage p { grid-column: 2; }
  .cn-ex-rows > div { grid-template-columns: 40px minmax(0,1fr); gap: var(--space-2) var(--space-4); }
  .cn-ex-rows dd { grid-column: 2; }
  .cn-ex-anatomy > div { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
}
:root[data-theme="dark"] .cn-ex-status > span:first-child { color: var(--brand-400); }

/* Review + Verify timelines: the spine draws down as the section enters, while
   each stage fades in on its own delay (DrawnSpine in Library.jsx). */
.cn-spine::before { transform: scaleY(0); transform-origin: top; transition: transform 1100ms var(--ease-out) 80ms; }
.cn-spine.is-on::before { transform: scaleY(1); }
.cn-spine.is-instant::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cn-spine::before { transform: none; transition: none; }
}

/* Navbar entrance on page load: brand, then each link, then the actions, drop in
   one after another. translateY + opacity only - the Navbar measures its links'
   widths to decide the compact state, and neither property changes a width. The
   header stays mounted across page changes, so this plays once per load. */
@keyframes cn-nav-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.cn-head nav > div > a,
.cn-head nav > div > div:nth-child(2) > *,
.cn-head nav > div > div:last-child > *,
.cn-head > nav + div > div:first-child > button { animation: cn-nav-in 700ms var(--ease-out) both; }
.cn-head nav > div > a { animation-delay: 60ms; }
.cn-head nav > div > div:nth-child(2) > :nth-child(1), .cn-head > nav + div > div:first-child > :nth-child(1) { animation-delay: 140ms; }
.cn-head nav > div > div:nth-child(2) > :nth-child(2), .cn-head > nav + div > div:first-child > :nth-child(2) { animation-delay: 200ms; }
.cn-head nav > div > div:nth-child(2) > :nth-child(3), .cn-head > nav + div > div:first-child > :nth-child(3) { animation-delay: 260ms; }
.cn-head nav > div > div:nth-child(2) > :nth-child(4), .cn-head > nav + div > div:first-child > :nth-child(4) { animation-delay: 320ms; }
.cn-head nav > div > div:nth-child(2) > :nth-child(5), .cn-head > nav + div > div:first-child > :nth-child(5) { animation-delay: 380ms; }
.cn-head nav > div > div:nth-child(2) > :nth-child(n+6), .cn-head > nav + div > div:first-child > :nth-child(n+6) { animation-delay: 440ms; }
.cn-head nav > div > div:last-child > :nth-child(1) { animation-delay: 420ms; }
.cn-head nav > div > div:last-child > :nth-child(2) { animation-delay: 480ms; }
.cn-head nav > div > div:last-child > :nth-child(n+3) { animation-delay: 540ms; }
/* The three-line menu button (NavDrawer in Site.jsx) enters with the brand. */
.cn-head > .cn-nav-burger { animation: cn-nav-in 700ms var(--ease-out) 40ms both; }
.cn-head > .cn-nav-burger:hover, .cn-drawer-close:hover { background: var(--surface-sunken) !important; }
/* Menu panel rows, in the site's own palette: hover is the warm sunken surface with
   the soft border (the theme switch and outline buttons use the same border); pressed,
   or an open group, is the slightly deeper warm hairline tint, text stays ink. Keyboard focus
   shows the hover state instead of the site-wide red ring, which read as an error here. */
.cn-drawer-row, .cn-drawer-sub { transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.cn-drawer-row:hover, .cn-drawer-row:focus-visible,
.cn-drawer-sub:hover, .cn-drawer-sub:focus-visible { background: var(--surface-sunken) !important; border-color: var(--border-soft) !important; outline: none; }
.cn-drawer-sub:hover, .cn-drawer-sub:focus-visible { color: var(--gray-1000) !important; }
.cn-drawer-row:active, .cn-drawer-row[aria-expanded="true"], .cn-drawer-sub:active { background: var(--border-hairline) !important; border-color: var(--border-soft) !important; color: var(--gray-1000) !important; }
/* The dropdown hint on Features and Resources: flips when the group is open. */
.cn-drawer-chev { flex: 0 0 auto; color: var(--text-subtle); transition: transform 240ms var(--ease-out), color 200ms var(--ease-out); }
.cn-drawer-row:hover .cn-drawer-chev { color: var(--gray-1000); }
.cn-drawer-row:active .cn-drawer-chev, .cn-drawer-row[aria-expanded="true"] .cn-drawer-chev { color: var(--gray-1000); }
.cn-drawer-row[aria-expanded="true"] .cn-drawer-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cn-drawer-row, .cn-drawer-sub, .cn-drawer-chev { transition: none; } }
/* index.html stacks the header into two rows at <=640px. With the menu button the
   header is short enough for one row (the other buttons moved into the menu), and
   stacking would leave the button floating between the rows. */
@media (max-width: 640px) {
  .cn-head.cn-head-menu nav > div { grid-template-columns: minmax(0,auto) minmax(0,1fr) minmax(0,auto) !important; gap: 12px !important; }
  .cn-head.cn-head-menu nav > div > div:last-child { justify-self: end !important; flex-wrap: nowrap; }
}
/* The instant-paint cover (index.html) shows the header bar with its words
   hidden, so the live navbar's entrance is the first time they appear. */
#cn-boot .cn-head nav > div > a,
#cn-boot .cn-head nav > div > div > *,
#cn-boot .cn-head > nav + div button,
#cn-boot .cn-head > .cn-nav-burger { animation: none; opacity: 0; }

/* ---------- Access pages (early access + sign in) ----------
   Inline styles cannot express :focus / :hover, so the interactive states for
   the shared form controls live here. Surfaces stay flat: no shadow, no glow. */
.cn-access-input:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.cn-access-input::placeholder { color: var(--text-subtle); }
.cn-access-oauth:disabled { opacity: .7; }
:root[data-theme="dark"] .cn-access-input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px #ffffff1a; }

/* Execution Layer only: shared tokens, flat editorial sections. */
.cn-exl-page { color: var(--gray-1000); }
.cn-exl-page h1, .cn-exl-page h2, .cn-exl-page h3 { letter-spacing: var(--tracking-display); text-wrap: balance; }
.cn-exl-page p { text-wrap: pretty; }
.cn-exl-label { margin: 0 0 var(--space-5); font: var(--text-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.cn-exl-hero { max-width: 1100px; margin: 0 auto; text-align: center; }
.cn-exl-hero h1 { font: var(--text-display-2); margin: 0 auto var(--space-6); }
.cn-exl-hero h1 > span { display: inline; }
.cn-exl-hero h1 > span:last-child { display: block; }
.cn-exl-hero em { font-style: normal; color: var(--warm-coral); }
.cn-exl-hero h1 > span:last-child em { color: var(--brand-600); }
.cn-exl-lede { font: var(--text-lead); color: var(--text-muted); max-width: 64ch; margin: 0 auto; }
.cn-exl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.cn-exl-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: var(--space-16); }
.cn-exl-principles > div, .cn-exl-dimensions > div { padding: 0 var(--space-8); border-left: 1px solid var(--border-hairline); }
.cn-exl-principles > div:first-child, .cn-exl-dimensions > div:first-child { padding-left: 0; border-left: 0; }
.cn-exl-principles > div:last-child, .cn-exl-dimensions > div:last-child { padding-right: 0; }
.cn-exl-principles h2, .cn-exl-sequence h3 { font: var(--text-h4); margin: 0 0 var(--space-3); }
.cn-exl-principles p, .cn-exl-sequence p, .cn-exl-dimensions dd { font: var(--text-body-16); color: var(--text-muted); margin: 0; }
.cn-exl-split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--space-16); align-items: start; }
.cn-exl-split h2, .cn-exl-intro h2 { font: var(--text-h1); margin: 0 0 var(--space-5); }
.cn-exl-body { font: var(--text-lead); color: var(--text-muted); max-width: 46ch; margin: 0; }
.cn-exl-sequence { list-style: none; margin: 0; padding: 0; }
.cn-exl-sequence li { display: grid; grid-template-columns: var(--space-8) minmax(0,1fr); gap: var(--space-5); padding: var(--space-7) 0; border-top: 1px solid var(--border-hairline); }
.cn-exl-sequence li:first-child { border-top: 0; padding-top: 0; }
.cn-exl-sequence li:last-child { padding-bottom: 0; }
.cn-exl-number { font: var(--text-caption); color: var(--text-subtle); padding-top: var(--space-1); }
.cn-exl-intro { max-width: var(--measure-wide); margin: 0 auto var(--space-12); text-align: center; }
.cn-exl-intro p { font: var(--text-lead); color: var(--text-muted); margin: 0; }
.cn-exl-dimensions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; }
.cn-exl-dimensions dt { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin-bottom: var(--space-4); }
.cn-exl-note { font: var(--text-body-14); color: var(--text-muted); margin: var(--space-5) 0 0; }
.cn-exl-statement { font: var(--text-h2); letter-spacing: var(--tracking-display); max-width: 23ch; margin: var(--space-10) 0 0; }
@media (max-width: 1024px) {
  .cn-exl-split { grid-template-columns: minmax(0,1fr); gap: var(--space-10); }
  .cn-exl-dimensions { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: var(--space-8); }
  .cn-exl-dimensions > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cn-exl-principles > div { padding: 0 var(--space-5); }
  .cn-exl-statement { margin-top: 0; }
}
@media (max-width: 640px) {
  .cn-exl-hero h1 { font: var(--text-h2); }
  .cn-exl-split h2, .cn-exl-intro h2 { font: var(--text-h2); }
  .cn-exl-principles, .cn-exl-dimensions { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cn-exl-principles > div, .cn-exl-dimensions > div { padding: var(--space-6) 0; border-left: 0; border-top: 1px solid var(--border-hairline); }
  .cn-exl-principles > div:first-child, .cn-exl-dimensions > div:first-child { padding-top: 0; border-top: 0; }
  .cn-exl-principles > div:last-child, .cn-exl-dimensions > div:last-child { padding-bottom: 0; }
  .cn-exl-statement { font: var(--text-h3); }
}

/* Screenshot-matched hero and closing sections, scoped to Execution Layer. */
.cn-exl-page .cn-exl-principles { gap: var(--space-6); margin-top: var(--space-12); }
.cn-exl-page .cn-exl-principles > div { padding: var(--space-6); border: 1px solid var(--border-hairline); border-radius: 4px; }
.cn-exl-principles p { font: var(--text-body-14); }
.cn-exl-integrations-head { text-align: center; max-width: var(--measure-wide); margin: 0 auto var(--space-16); }
.cn-exl-integrations-head h2 { font: var(--text-h1); margin: var(--space-5) 0; }
.cn-exl-integrations-head p { font: var(--text-lead); color: var(--text-muted); margin: 0; }
.cn-exl-integrations { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-3); }
.cn-exl-integrations > div { padding: var(--space-6) var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); text-align: center; }
.cn-exl-integrations img { display: block; object-fit: contain; margin: 0 auto var(--space-4); }
.cn-exl-integrations h3 { font: var(--text-label); margin: 0 0 var(--space-1); }
.cn-exl-integrations p { font: var(--text-caption); color: var(--text-subtle); margin: 0; }
.cn-exl-deployment { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-5); }
.cn-exl-deployment > div { padding: var(--space-7); border: 1px solid var(--border-hairline); border-radius: 4px; }
.cn-exl-deployment h2 { font: var(--text-label); text-transform: uppercase; margin: 0 0 var(--space-2); }
.cn-exl-deployment span { display: block; font: var(--text-caption); color: var(--text-muted); }
.cn-exl-deployment p { font: var(--text-body-16); color: var(--text-muted); margin: var(--space-6) 0 0; }
.cn-exl-closing input { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .cn-exl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 1024px) {
  .cn-exl-hero h1 { font: var(--text-h1); }
  .cn-exl-integrations { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .cn-exl-hero h1 { font: var(--text-h2); }
  .cn-exl-integrations { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cn-exl-integrations-head h2 { font: var(--text-h2); }
  .cn-exl-deployment { grid-template-columns: minmax(0,1fr); }
  .cn-exl-closing input { width: 100%; }
  .cn-exl-closing [style*="max-width: 440px"] { flex-wrap: wrap; }
}
/* Demo scheduling: calendar, preferred time and attendee details. Colours come
   from the site's own tokens, so the panel follows the theme toggle instead of
   staying dark on a light page. --button-primary-* exist only in the dark
   theme; the light fallback is the ink-on-white pair its dark buttons use. */
.cn-demo-booking { display:grid; border:1px solid var(--border-hairline); border-radius:var(--radius-card); background:var(--surface-card); color:var(--text-body); overflow:hidden; font:var(--text-body-14); }
.cn-demo-calendar-step { grid-template-columns:.85fr 1.45fr .85fr; }
.cn-demo-details-step { grid-template-columns:.85fr 1.45fr; max-width:920px; margin:auto; }
.cn-demo-booking h1 { font:var(--text-h3); margin:12px 0; }
.cn-demo-booking h2 { font:var(--text-h4); margin:0 0 20px; }
.cn-demo-booking p { margin:0 0 20px; line-height:1.5; }
.cn-demo-summary,.cn-demo-calendar,.cn-demo-times,.cn-demo-form { padding:28px; min-width:0; }
.cn-demo-summary,.cn-demo-calendar { border-right:1px solid var(--border-hairline); }
.cn-demo-owner,.cn-demo-hint { color:var(--text-muted); }
.cn-demo-summary ul { list-style:none; padding:0; display:grid; gap:16px; margin:28px 0; }
.cn-demo-selection { font-weight:500; margin-top:28px!important; }
.cn-demo-month,.cn-demo-time-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:24px; }
.cn-demo-month h2,.cn-demo-time-head h2 { font:var(--text-body-16); margin:0; }
.cn-demo-booking button { font:inherit; cursor:pointer; color:var(--text-body); background:transparent; border:1px solid var(--border-soft); border-radius:8px; padding:8px 12px; transition:var(--t-hover); }
.cn-demo-booking button:disabled { opacity:.35; cursor:default; }
.cn-demo-booking button:hover:not(:disabled) { background:var(--button-secondary-bg, var(--surface-sunken)); border-color:var(--border-hairline); }
.cn-demo-booking button:focus-visible,.cn-demo-booking input:focus-visible,.cn-demo-booking select:focus-visible,.cn-demo-booking textarea:focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }
.cn-demo-month>div,.cn-demo-time-head>div { display:flex; gap:4px; }
.cn-demo-month button { border:0; }
.cn-demo-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.cn-demo-weekday { text-align:center; font:var(--text-caption); text-transform:uppercase; color:var(--text-subtle); padding:12px 0; }
.cn-demo-days button { aspect-ratio:1; padding:0; background:var(--button-secondary-bg, var(--surface-sunken)); border:0; }
.cn-demo-days button[aria-pressed="true"],.cn-demo-time-head button[aria-pressed="true"],.cn-demo-form-actions button[type="submit"] { background:var(--button-primary-bg, var(--gray-1000)); color:var(--button-primary-text, var(--white)); }
.cn-demo-days button[aria-pressed="true"]:hover,.cn-demo-time-head button[aria-pressed="true"]:hover,.cn-demo-form-actions button[type="submit"]:hover:not(:disabled) { background:var(--button-primary-bg, var(--gray-1000)); opacity:.88; }
.cn-demo-days button:disabled { background:transparent; }
.cn-demo-slot { display:block; width:100%; margin:0 0 9px; }
.cn-demo-time-head button { padding:5px; border:0; }
.cn-demo-form { display:grid; gap:18px; align-content:start; }
.cn-demo-form label { display:grid; gap:8px; font-weight:500; }
.cn-demo-form input,.cn-demo-form select,.cn-demo-form textarea { width:100%; box-sizing:border-box; min-height:40px; border:1px solid var(--border-soft); border-radius:9px; padding:8px 12px; background:var(--surface-page); color:var(--text-body); font:inherit; }
.cn-demo-form a { color:var(--text-brand); text-decoration:underline; }
.cn-demo-form .cn-demo-add-guests { justify-self:start; border:0; color:var(--text-muted); }
.cn-demo-form-actions { display:flex; justify-content:flex-end; gap:12px; }
.cn-demo-booking [role="alert"] { color:var(--brand-600); }
/* The dark theme needs the lighter tint of the same red to stay readable, and
   the native select arrow needs telling which way the panel leans. */
:root[data-theme="dark"] .cn-demo-booking { color-scheme:dark; }
:root[data-theme="dark"] .cn-demo-booking [role="alert"] { color:#ffb3ac; }
@media(max-width:1024px){.cn-demo-calendar-step{grid-template-columns:1fr 1fr}.cn-demo-calendar-step .cn-demo-summary{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--border-hairline)}.cn-demo-summary ul{display:flex;flex-wrap:wrap;gap:12px 24px}}
@media(max-width:640px){.cn-demo-calendar-step,.cn-demo-details-step{grid-template-columns:1fr}.cn-demo-summary,.cn-demo-calendar{border-right:0;border-bottom:1px solid var(--border-hairline)}.cn-demo-summary,.cn-demo-calendar,.cn-demo-times,.cn-demo-form{padding:20px}.cn-demo-summary ul{display:grid}.cn-demo-days{gap:4px}}

/* Local layouts for the annotated repository and integration sections. */
.cn-index-steps, .cn-index-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.cn-index-stages { text-align: center; gap: clamp(20px,3vw,44px); }
@media (max-width: 640px) {
  .cn-index-steps, .cn-index-stages { grid-template-columns: minmax(0, 1fr); }
  .cn-example-cards { grid-template-columns: minmax(0, 1fr) !important; }
  .cn-int-directions { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Examples page: the five execution captures, rebuilt as live HTML (see Examples.jsx).
   Each card holds one replica at GitHub's own 14px metrics plus its description. The
   replica is scaled with zoom (--cap-fit / --cap-w, its natural width) rather than
   reflowed, so the capture keeps its exact line breaks in a half-width column. */
.cn-examples { max-width: 1180px; margin: 0 auto; --cap-fit: 516; }
.cn-examples-heading { text-align: center; margin-bottom: clamp(56px,6.5vw,104px); }
.cn-examples-heading h1 { font: 500 clamp(30px,3.8vw,56px)/1.04 var(--font-display); letter-spacing: -.035em; margin: 0; text-wrap: balance; }

.cn-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(20px,2.4vw,32px); }
.cn-cap { display: grid; grid-template-rows: auto 1fr auto; height: 100%; margin: 0; padding: clamp(18px,1.8vw,22px); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--white); }
/* An odd last card has no partner, so it spans the row and is centred at one column wide. */
.cn-caps > .cn-cap:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - clamp(20px,2.4vw,32px)) / 2); margin-inline: auto; }
.cn-cap-label { display: flex; align-items: baseline; gap: var(--space-3); font: var(--text-caption); letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-4); }
.cn-cap-label span { color: var(--gray-1000); }
.cn-cap-frame { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-hairline); border-radius: 12px; background: #0d1117; overflow: hidden; }
.cn-cap-stage { zoom: min(1, calc(var(--cap-fit) / var(--cap-w))); }
.cn-cap-note { font: var(--text-body-14); color: var(--text-muted); margin: var(--space-4) 0 0; text-wrap: pretty; }

@media (max-width: 1180px) { .cn-examples { --cap-fit: 430; } }
@media (max-width: 1000px) { .cn-examples { --cap-fit: 360; } }
@media (max-width: 860px) {
  /* One column: equal heights would only pad every short capture with dead space. */
  .cn-caps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .cn-caps > .cn-cap:last-child:nth-child(odd) { grid-column: auto; width: auto; }
  .cn-examples { --cap-fit: 640; }
}
@media (max-width: 760px) { .cn-examples { --cap-fit: 540; } }
@media (max-width: 640px) { .cn-examples { --cap-fit: 430; } }
@media (max-width: 520px) { .cn-examples { --cap-fit: 340; } }
@media (max-width: 430px) { .cn-examples { --cap-fit: 280; } }

.cn-exfoot { text-align: center; margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-hairline); }
.cn-exfoot p { font: var(--text-lead); color: var(--text-muted); margin: 0 0 var(--space-5); }
.cn-exfoot > div { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

@media (max-width: 1000px) {
  .cn-pricing-plans { grid-template-columns: minmax(0, 1fr) !important; }
  .cn-pricing-credits { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .cn-pricing-credits { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Platform page grids. These used to be fixed column counts written inline, which
   cannot narrow: on a phone they pushed the page to 556px, and mobile browsers
   then zoomed the whole page out to fit it. Each now reflows by width. */
.cn-plat-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cn-plat-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cn-plat-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cn-plat-cat { height: 100%; padding: 0 clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--gray-200); }
.cn-plat-cats > :first-child .cn-plat-cat { padding-left: 0; border-left: none; }
.cn-plat-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) {
  .cn-plat-2, .cn-plat-3 { grid-template-columns: minmax(0, 1fr); gap: 40px !important; }
  .cn-plat-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .cn-plat-cat, .cn-plat-cats > :first-child .cn-plat-cat { padding: 0; border-left: none; }
  .cn-plat-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cn-plat-cats { grid-template-columns: minmax(0, 1fr); }
  .cn-plat-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contact: the two panels sit side by side on a desktop and stack on a phone.
   The columns are set inline, hence !important. */
@media (max-width: 860px) {
  .cn-contact-surfaces { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
}
/* Examples: a capture caption carries a long file path, which must wrap rather
   than push a narrow screen wider. */
.cn-cap-label { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
/* The platform section headings use the page's largest type; on the narrowest
   phones a single long word ("consequences.") was wider than the screen. */
@media (max-width: 400px) {
  .cn-plat-2 h2 { font-size: clamp(26px, 8.6vw, 40px) !important; }
}