/* ─────────────────────────────────────────────────────────────────────────────
   GrowMyPractice Brand Book v2 — deck styles
   Editorial register. Restrained type. Generous whitespace.
   Reference document. Not a brand campaign.
   ───────────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent-soft); color: var(--brand-ink); }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--type-p2);
  line-height: var(--lh-loose);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--brand-ink); text-decoration: none; }
ul, ol { list-style: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   Sticky top navigation
   ───────────────────────────────────────────────────────────────────────────── */

.deck-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding: 14px 40px;
  background: rgba(241, 237, 228, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.deck-nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: -0.005em; color: var(--brand-ink);
}
.deck-nav__brand img { width: 22px; height: 22px; }
.deck-nav__brand small {
  font-weight: 500; color: var(--fg-subtle);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  margin-left: 4px;
}
.deck-nav__links {
  display: flex; gap: var(--space-5);
}
.deck-nav__links a {
  font-size: 13px; font-weight: 500; color: var(--fg-muted);
  letter-spacing: 0.02em;
  transition: color var(--dur-fast) var(--ease-out);
}
.deck-nav__links a:hover { color: var(--brand-ink); }
.deck-nav__cta {
  font-size: 13px; font-weight: 600; color: var(--brand-ink);
}
.deck-nav__cta::after { content: " →"; color: var(--brand-sage); }

/* ─────────────────────────────────────────────────────────────────────────────
   Page sections — each page is one screen of editorial content
   ───────────────────────────────────────────────────────────────────────────── */

.page {
  padding: 96px 40px 120px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.page__inner { max-width: 1180px; margin: 0 auto; }
.page__head { margin-bottom: var(--space-8); }
.page__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--fg-faint); font-weight: 500;
  display: inline-block; margin-bottom: 16px;
  font-feature-settings: "tnum";
}
.page__eyebrow {
  display: inline-block;
  font-size: var(--type-cap);
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-subtle); margin-left: 14px;
  position: relative; top: -1px;
}
.page__title {
  font-family: var(--font-serif);
  font-size: 56px; line-height: 1.08; letter-spacing: -0.018em;
  font-weight: 400; color: var(--fg);
  margin-top: 6px;
  max-width: 18ch;
  text-wrap: pretty;
}
.page__lede {
  font-family: var(--font-sans);
  font-size: 20px; line-height: 1.55;
  color: var(--fg-muted); font-weight: 400;
  max-width: 62ch; margin-top: 20px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Cover page — the brand IS the brand book
   ───────────────────────────────────────────────────────────────────────────── */

.cover {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: 40px 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.cover__chrome-top, .cover__chrome-bot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-subtle); font-feature-settings: "tnum";
}
.cover__chrome-bot { align-items: end; }
.cover__center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-7);
}
.cover__title {
  font-family: var(--font-serif);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 1.02; letter-spacing: -0.025em;
  font-weight: 400;
  text-wrap: pretty;
}
.cover__title em { font-style: italic; color: var(--brand-sage); }
.cover__caption {
  font-family: var(--font-sans);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle);
}
.cover__caption .dot {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-sage); margin: 0 14px; vertical-align: middle;
  position: relative; top: -1px;
}
.cover__leaf { width: 200px; height: auto; margin: 0 auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   Introduction page
   ───────────────────────────────────────────────────────────────────────────── */

.intro__body {
  font-family: var(--font-sans);
  font-size: 22px; line-height: 1.55;
  color: var(--fg-muted); font-weight: 400;
  max-width: 36ch;
  text-wrap: pretty;
}
.intro__body p + p { margin-top: 1.2em; }
.intro__body strong { color: var(--fg); font-weight: 600; }
.intro__meta {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
  max-width: 820px;
}
.intro__meta dt {
  font-size: var(--type-cap);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 8px;
}
.intro__meta dd {
  font-size: 16px; line-height: 1.45;
  color: var(--brand-ink); font-weight: 500;
}
.intro__cta {
  margin-top: var(--space-8);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: var(--brand-ink); color: var(--brand-mist);
  font-size: 16px; font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out);
}
.intro__cta:hover { background: #000; }
.intro__cta::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.intro__cta:hover::after { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────────────────────────
   Strategy pages
   ───────────────────────────────────────────────────────────────────────────── */

.strat-paragraph {
  font-family: var(--font-serif);
  font-size: 32px; line-height: 1.32; letter-spacing: -0.012em;
  color: var(--fg); font-weight: 400;
  max-width: 28ch; text-wrap: pretty;
}
.strat-paragraph em { font-style: italic; color: var(--brand-sage); }

.icp-pair {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.icp {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}
.icp__tag {
  font-size: var(--type-cap);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-sage);
}
.icp__name {
  font-family: var(--font-serif);
  font-size: 26px; line-height: 1.2; font-weight: 400;
  margin-top: 12px;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.icp__snap {
  margin-top: var(--space-5);
  font-size: 16px; line-height: 1.6;
  color: var(--fg-muted);
}
.icp__fear {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.icp__fear dt {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-faint);
}
.icp__fear dd {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--brand-ink); font-weight: 400;
  font-style: italic; color: var(--fg);
}

/* Archetype page */
.archetype-stack {
  margin-top: var(--space-8);
  display: grid; gap: var(--space-7);
}
.arch {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-7);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border-subtle);
}
.arch:first-child { border-top: none; padding-top: 0; }
.arch__role {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle);
}
.arch__name {
  font-family: var(--font-serif);
  font-size: 48px; line-height: 1.08; letter-spacing: -0.018em;
  font-weight: 400; margin-top: 6px;
}
.arch__name em { font-style: italic; color: var(--brand-sage); }
.arch__body {
  font-size: 17px; line-height: 1.6;
  color: var(--fg-muted); max-width: 56ch;
  align-self: center;
}

.adjective-pair {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7);
}
.adjective-col__tag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-ink);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--brand-ink);
  margin-bottom: var(--space-5);
}
.adjective-col.is-not .adjective-col__tag {
  color: var(--gray-graphite);
  border-bottom-color: var(--gray-steel);
}
.adjective-col ul { display: grid; gap: 8px; }
.adjective-col li {
  font-family: var(--font-serif);
  font-size: 26px; line-height: 1.25; letter-spacing: -0.012em;
  font-weight: 400;
  padding: 6px 0;
  position: relative;
}
.adjective-col li small {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--fg-subtle); margin-top: 4px;
  font-weight: 400; letter-spacing: 0;
}
.adjective-col.is-not li {
  color: var(--gray-graphite);
  text-decoration: line-through;
  text-decoration-color: var(--gray-steel);
  text-decoration-thickness: 1px;
}

/* Mission/Vision/Values */
.mvv-block {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}
.mvv-block:last-of-type { border-bottom: none; }
.mvv-block__tag {
  font-size: var(--type-cap);
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-sage); margin-bottom: var(--space-4);
}
.mvv-block__text {
  font-family: var(--font-serif);
  font-size: 32px; line-height: 1.28; letter-spacing: -0.012em;
  font-weight: 400; color: var(--fg);
  max-width: 38ch; text-wrap: pretty;
}
.mvv-block__text em { font-style: italic; color: var(--brand-sage); }

.values-grid {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-7);
}
.value {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
}
.value__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px; line-height: 1; font-weight: 400;
  color: var(--brand-sage);
  width: 36px;
  padding-top: 4px;
}
.value__name {
  font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--brand-ink);
}
.value__body {
  margin-top: 6px;
  font-size: 15px; line-height: 1.55;
  color: var(--fg-muted);
}

/* Tagline finalists — each at hero scale */
.taglines {
  margin-top: var(--space-7);
  display: grid; gap: var(--space-9);
}
.tagline {
  display: grid; grid-template-columns: 80px 1fr;
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}
.tagline:last-child { border-bottom: none; }
.tagline__num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
  font-weight: 500; color: var(--fg-faint);
  font-feature-settings: "tnum";
  padding-top: 28px;
}
.tagline__body {}
.tagline__line {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05; letter-spacing: -0.022em;
  font-weight: 400; color: var(--fg);
  text-wrap: balance;
}
.tagline__line em { font-style: italic; color: var(--brand-sage); }
.tagline__line .accent { color: var(--brand-sage); }
.tagline__meta {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-5);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--fg-faint); font-weight: 600;
  text-transform: uppercase;
}
.tagline__meta span { display: inline-flex; align-items: center; gap: 6px; }
.tagline__meta .bullet {
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand-sage);
  display: inline-block;
}
.tagline__note {
  margin-top: var(--space-5);
  font-size: 16px; line-height: 1.55;
  color: var(--fg-muted); max-width: 52ch;
}

.tagline-grouptag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
}
.tagline-grouptag:first-of-type { margin-top: 0; padding-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   Logo system pages
   ───────────────────────────────────────────────────────────────────────────── */

.lockup-row {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.lockup {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid; grid-template-rows: 220px auto;
}
.lockup__canvas {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.lockup__canvas img { max-width: 100%; max-height: 100%; }
.lockup--ivory  .lockup__canvas { background: var(--brand-mist); }
.lockup--sage   .lockup__canvas { background: var(--brand-sage); }
.lockup--ink    .lockup__canvas { background: var(--brand-ink); }
.lockup--tonal  .lockup__canvas { background: var(--sage-100); }
.lockup__caption {
  padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.lockup__name {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--brand-ink); font-weight: 500;
  margin-bottom: 6px;
}
.lockup__role {
  font-size: 13px; color: var(--fg-subtle); line-height: 1.5;
}

.marks-row {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.mark-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.mark-card--ivory { background: var(--brand-mist); }
.mark-card--sage  { background: var(--brand-sage); }
.mark-card--ink   { background: var(--brand-ink); }
.mark-card svg, .mark-card img {
  width: 80px; height: 88px; margin: 0 auto var(--space-5);
}
.mark-card__name {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--brand-ink);
}
.mark-card--ink .mark-card__name,
.mark-card--ink .mark-card__role { color: var(--brand-mist); }
.mark-card--sage .mark-card__name,
.mark-card--sage .mark-card__role { color: var(--brand-ink); }
.mark-card__role {
  font-size: 12px; color: var(--fg-subtle); margin-top: 4px;
}

/* Logo B: Clear-space + sizing */
.spec-row {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7);
}
.spec-block {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  background: var(--bg-elevated);
}
.spec-block h3 {
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 600;
  margin-bottom: var(--space-3);
}
.spec-block p {
  font-size: 14px; line-height: 1.55; color: var(--fg-muted);
}
.spec-block dl {
  margin-top: var(--space-5);
  display: grid; grid-template-columns: auto 1fr; gap: 10px 24px;
  font-size: 14px;
}
.spec-block dt {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-subtle); font-weight: 500;
}
.spec-block dd { color: var(--brand-ink); font-weight: 500; }

.clearspace {
  margin-top: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.clearspace__grid {
  position: relative;
  padding: 56px;                  /* clear-space = ~equal to wordmark x-height */
  background:
    linear-gradient(var(--sage-200), var(--sage-200)) top left   / 16px 1px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) top right  / 16px 1px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) bottom left / 16px 1px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) top left   / 1px 16px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) top right  / 1px 16px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--sage-200), var(--sage-200)) bottom right / 1px 16px no-repeat;
  border: 1px dashed var(--sage-300);
}
.clearspace__inner {
  border: 1px dashed transparent;
  padding: 0;
}
.clearspace img { width: 360px; height: auto; }
.clearspace__caption {
  position: absolute; left: 24px; top: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--fg-subtle); text-transform: uppercase;
}

.size-row {
  margin-top: var(--space-7);
  display: grid; gap: var(--space-5);
}
.size-row__item {
  display: grid; grid-template-columns: 100px 1fr 120px;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.size-row__label {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--brand-ink); font-weight: 500;
}
.size-row__label small { color: var(--fg-faint); display: block; margin-top: 4px; font-weight: 400; }
.size-row__sample { display: flex; align-items: center; }
.size-row__sample img { max-height: 56px; height: auto; }
.size-row__note { font-size: 12px; color: var(--fg-subtle); text-align: right; }

/* Favicon system grid */
.favset {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-4);
}
.favset__cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.favset__cell .fav-icon {
  display: flex; align-items: center; justify-content: center;
  height: 76px; width: 100%;
}
.favset__cell .fav-icon img {
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px rgba(31,31,33,0.06);
}
.favset__cell .fav-icon img[data-rounded="true"] {
  border-radius: 22%;
}
.favset__cell .fav-name {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brand-ink); font-weight: 500;
  line-height: 1.4;
}
.favset__cell .fav-sub {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--fg-faint); letter-spacing: 0.04em;
}

/* Logo C: greyscale + never */
.greyscale-pair {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
}
.greyscale-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.greyscale-card__canvas {
  height: 180px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.greyscale-card--light .greyscale-card__canvas { background: #F1F1F1; }
.greyscale-card--dark  .greyscale-card__canvas { background: #1F1F21; }
.greyscale-card__canvas img { max-width: 100%; max-height: 100%; }
.greyscale-card__caption {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5);
}
.greyscale-card__caption h3 {
  font-size: 14px; font-weight: 600; margin-bottom: 4px;
}
.greyscale-card__caption p { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }

.never-grid {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
}
.never {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4);
}
.never__x {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gray-cloud); color: var(--gray-graphite);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0; margin-top: 2px;
}
.never__txt {
  font-size: 14px; line-height: 1.55; color: var(--fg-muted);
}
.never__txt strong { color: var(--brand-ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   Color system pages
   ───────────────────────────────────────────────────────────────────────────── */

.token-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.token {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid; grid-template-rows: 220px auto;
}
.token__swatch {
  position: relative;
}
.token__swatch[data-light="true"] { box-shadow: inset 0 0 0 1px rgba(31,31,33,0.05); }
.token__body {
  padding: var(--space-5);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
}
.token__name {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--brand-ink); font-weight: 500;
  margin-bottom: 6px;
}
.token__hex {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--fg-muted);
  margin-bottom: 14px;
  display: flex; gap: 12px; align-items: center;
}
.token__hex small { color: var(--fg-faint); font-size: 11px; }
.token__role {
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.25; font-weight: 400;
  color: var(--brand-ink);
  letter-spacing: -0.008em;
  margin-bottom: 10px;
}
.token__rule {
  font-size: 13px; line-height: 1.6;
  color: var(--fg-muted);
}

.token-aside {
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-7);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  display: grid; grid-template-columns: 120px 1fr; gap: var(--space-6);
  align-items: center;
}
.token-aside__swatch {
  width: 100%; height: 80px;
  background: var(--brand-bone);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.token-aside__body {}
.token-aside__head {
  display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 13px;
}
.token-aside__head strong { color: var(--brand-ink); font-weight: 500; }
.token-aside__head span { color: var(--fg-muted); }
.token-aside__rule {
  font-size: 14px; line-height: 1.55; color: var(--fg-muted);
}

/* Scale ramps */
.ramp {
  margin-top: var(--space-6);
}
.ramp__head {
  display: flex; gap: 12px; align-items: baseline;
  margin-bottom: var(--space-4);
}
.ramp__head h3 {
  font-family: var(--font-sans); font-size: 18px; font-weight: 600;
}
.ramp__head em {
  font-style: italic; color: var(--brand-sage); font-family: var(--font-serif);
  font-size: 18px; font-weight: 400; letter-spacing: -0.005em;
}
.ramp__strip {
  display: grid; grid-template-columns: repeat(10, 1fr);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.ramp__cell {
  padding: 20px 12px 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 110px;
}
.ramp__cell .step {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  font-weight: 500;
}
.ramp__cell .hex {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.02em; font-weight: 400;
  margin-top: 4px; opacity: 0.85;
}
.ramp__cell[data-light="true"] { color: var(--brand-ink); }
.ramp__cell[data-light="false"] { color: var(--brand-mist); }
.ramp__cell--anchor::after {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; margin-top: 6px;
}

.status-row {
  margin-top: var(--space-6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.status {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  overflow: hidden;
}
.status__swatch { height: 64px; }
.status__body {
  padding: 14px 16px; background: var(--bg-elevated);
}
.status__name { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--brand-ink); }
.status__hex { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); margin-top: 4px; }

/* Color C: usage rules table */
.rules-table {
  margin-top: var(--space-7);
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.rules-table th, .rules-table td {
  padding: 18px 20px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.rules-table thead th {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-subtle); font-weight: 700;
  padding-bottom: var(--space-4);
}
.rules-table tbody td:first-child {
  font-family: var(--font-mono); font-size: 13px;
  font-weight: 500; color: var(--brand-ink);
  white-space: nowrap; width: 130px;
}
.rules-table tbody td:nth-child(2) {
  line-height: 1.55; color: var(--fg);
}
.rules-table tbody td:nth-child(3) {
  line-height: 1.55; color: var(--gray-graphite);
}
.rules-table .col-tick { color: var(--brand-sage); font-weight: 700; margin-right: 6px; }
.rules-table .col-x    { color: var(--gray-steel); font-weight: 700; margin-right: 6px; }

.contrast-grid {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.contrast {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.contrast__pair {
  display: flex; gap: 6px; margin-bottom: var(--space-4);
}
.contrast__pair span {
  flex: 1; height: 36px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-mono);
}
.contrast__ratio {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 500;
  color: var(--brand-ink);
  margin-bottom: 6px;
}
.contrast__verdict {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.contrast__verdict--aaa { background: var(--sage-100); color: var(--sage-800); }
.contrast__verdict--aa  { background: var(--clay-50); color: var(--clay-700); }
.contrast__verdict--no  { background: #F8E8E5; color: var(--clay-800); }
.contrast__desc {
  margin-top: var(--space-4);
  font-size: 13px; line-height: 1.5; color: var(--fg-muted);
}

.cb-notes {
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.cb-notes h3 {
  font-size: 16px; font-weight: 600; margin-bottom: var(--space-4);
}
.cb-notes ul { display: grid; gap: 10px; }
.cb-notes li {
  position: relative; padding-left: 22px;
  font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
}
.cb-notes li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-sage);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Typography pages
   ───────────────────────────────────────────────────────────────────────────── */

.type-specimens {
  margin-top: var(--space-7);
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.specimen {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--bg);
  padding: var(--space-6) var(--space-7);
  gap: var(--space-6);
  align-items: baseline;
}
.specimen[data-serif="true"] { background: var(--bg-elevated); }
.specimen__meta {
  display: grid; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding-top: 14px;
}
.specimen__meta strong {
  color: var(--brand-ink);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.specimen__meta .sub {
  color: var(--fg-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.specimen__sample {
  color: var(--brand-ink);
  text-wrap: balance;
}
.specimen__sample em { font-style: italic; color: var(--brand-sage); }

.specimen--display .specimen__sample {
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.specimen--h1 .specimen__sample {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.specimen--h2 .specimen__sample {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.specimen--stat-lg .specimen__sample {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.specimen--sh1 .specimen__sample {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.specimen--stat-md .specimen__sample {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.specimen--sh2 .specimen__sample {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500;
}
.specimen--p1 .specimen__sample {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--fg-muted);
  max-width: 56ch;
}
.specimen--p2 .specimen__sample {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--fg-muted);
  max-width: 60ch;
}
.specimen--cap .specimen__sample {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-subtle);
}
.specimen--meta .specimen__sample {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg-faint);
}

/* When-serif-vs-sans table */
.use-table {
  margin-top: var(--space-7);
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.use-table thead th {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-subtle);
  background: var(--bg-elevated);
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.use-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--fg);
}
.use-table tbody tr:last-child td { border-bottom: none; }
.use-table td:first-child {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: var(--brand-ink);
  width: 50%;
}
.use-table td:nth-child(2) {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--fg-muted);
}

/* Italic-sage emphasis pattern callout */
.brand-em-demo {
  margin-top: var(--space-7);
  padding: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-7);
  align-items: start;
}
.brand-em-demo__line {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brand-ink);
  text-wrap: balance;
}
.brand-em-demo__line em {
  font-style: italic;
  color: var(--brand-sage);
  font-weight: 400;
}
.brand-em-demo__spec {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-muted);
  padding-top: 16px;
}
.brand-em-demo__spec strong {
  color: var(--brand-ink);
  font-weight: 500;
}
.brand-em-demo__spec code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--brand-ink);
}
.brand-em-demo__spec .hl {
  display: inline-block;
  background: var(--accent-spark-soft);
  color: var(--brand-ink);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Type test cases */
.type-tests {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-6);
}
.type-test {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
.type-test__tag {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.type-test__body {
  padding: var(--space-7);
  background: var(--bg);
}
.type-test--hero .type-test__body {
  padding: var(--space-8) var(--space-7);
}
.type-test--hero h3 {
  font-family: var(--font-serif);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--brand-ink);
  max-width: 14ch;
  text-wrap: balance;
}
.type-test--hero h3 em {
  font-style: italic;
  color: var(--brand-sage);
  font-weight: 400;
}
.type-test--hero p {
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--fg-muted);
  max-width: 58ch;
}
.type-test--section {
  background: var(--bg);
}
.type-test--section .type-test__body {
  background: var(--bg-sunken);
}
.type-test--section h3 {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--brand-ink);
}
.type-test--section h3 em { font-style: italic; color: var(--brand-sage); font-weight: 400; }
.type-test--section p {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 60ch;
}
.type-test--longform .type-test__body {
  background: var(--bg);
  padding: var(--space-7) var(--space-8);
}
.type-test--longform p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg);
  max-width: 62ch;
  font-weight: 400;
}
.type-test--longform p + p { margin-top: 1.2em; }
.type-test--stat .type-test__body {
  background: var(--bg-elevated);
  padding: var(--space-8) var(--space-7);
}
.type-test--stat__cap {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-sage);
}
.type-test--stat .figure {
  font-family: var(--font-sans);
  font-size: 80px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--brand-ink);
  margin-top: 12px;
  font-feature-settings: "tnum";
}
.type-test--stat .context {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 50ch;
}
.type-test--quote .type-test__body {
  background: var(--bg-warm);
  padding: var(--space-8) var(--space-7);
}
.type-test--quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--brand-ink);
  max-width: 32ch;
  text-wrap: balance;
}
.type-test--quote cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  font-style: normal;
  color: var(--fg-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Photography pages
   ───────────────────────────────────────────────────────────────────────────── */

.photo-category {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}
.photo-category:first-of-type {
  margin-top: var(--space-7);
  padding-top: 0;
  border-top: none;
}
.photo-category__head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-7);
  align-items: baseline;
  margin-bottom: var(--space-5);
}
.photo-category__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 600;
  padding-top: 8px;
}
.photo-category__name {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--brand-ink);
}
.photo-category__name em { font-style: italic; color: var(--brand-sage); }
.photo-category__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 64ch;
}
.photo-row {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.photo-row--2 { grid-template-columns: repeat(2, 1fr); }
.photo-row--2 .photo-placeholder { aspect-ratio: 3/2; }
.photo-placeholder {
  background:
    repeating-linear-gradient(135deg,
      var(--sage-100) 0px,
      var(--sage-100) 12px,
      var(--sage-50) 12px,
      var(--sage-50) 24px
    );
  border-radius: var(--radius-md);
  aspect-ratio: 4/5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  text-align: center;
  position: relative;
}
.photo-placeholder--portrait { aspect-ratio: 4/5; }
.photo-placeholder--wide { aspect-ratio: 16/9; }
.photo-placeholder--detail { aspect-ratio: 1/1; }
.photo-placeholder__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage-600);
  margin-bottom: 8px;
  background: var(--brand-mist);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.photo-placeholder__caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--sage-700);
  max-width: 22ch;
}
.photo-placeholder__caption strong {
  display: block;
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.photo-rules {
  margin-top: var(--space-7);
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.photo-rule__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-sage);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.photo-rule__name {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
}
.photo-rule__body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Anti-pattern grid */
.anti-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.anti {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
.anti__img {
  aspect-ratio: 4/3;
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--gray-cloud) 0px,
      var(--gray-cloud) 8px,
      var(--gray-smoke) 8px,
      var(--gray-smoke) 16px
    );
  display: flex;
  align-items: center;
  justify-content: center;
}
.anti__img::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--brand-spark) calc(50% - 1px), var(--brand-spark) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg,  transparent calc(50% - 1px), var(--brand-spark) calc(50% - 1px), var(--brand-spark) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: 0.85;
}
.anti__img-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-graphite);
  background: var(--brand-mist);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}
.anti__body {
  padding: 16px 18px 18px;
}
.anti__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 4px;
}
.anti__why {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.illustration-block {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}
.icon-row {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.icon-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.icon-cell__svg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.icon-cell__svg svg {
  stroke: var(--brand-ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-cell__name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
}

.icon-sizes {
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: end;
  gap: var(--space-7);
  justify-content: center;
}
.icon-sizes__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.icon-sizes__cell svg {
  stroke: var(--brand-ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sizes__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Voice DO / DON'T pages
   ───────────────────────────────────────────────────────────────────────────── */

.voice-pair {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.voice-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-elevated);
}
.voice-card--dont {
  background: var(--bg-elevated);
}
.voice-card--do {
  background: var(--bg-warm);
  border-color: var(--clay-100);
}
.voice-card__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gray-graphite);
}
.voice-card--do .voice-card__tag { color: var(--clay-700); }
.voice-card__tag .mark {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.voice-card--dont .mark { background: var(--gray-cloud); color: var(--gray-graphite); }
.voice-card--do   .mark { background: var(--clay-100); color: var(--clay-700); }
.voice-card__quote {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.008em;
  font-weight: 400;
  color: var(--brand-ink);
  text-wrap: pretty;
}
.voice-card--dont .voice-card__quote {
  color: var(--gray-graphite);
  font-style: italic;
}
.voice-card__why {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-subtle);
}
.voice-card--do .voice-card__why { border-top-color: var(--clay-100); }
.voice-card__why strong {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 4px;
}

.voice-row {
  margin-bottom: var(--space-7);
}
.voice-row__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-sage);
  margin-bottom: 14px;
}
.voice-row__title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 400;
  margin-bottom: 4px;
}

/* Voice rules grid */
.voice-rules {
  margin-top: var(--space-7);
  padding: var(--space-7) var(--space-7);
  background: var(--brand-ink);
  color: var(--brand-mist);
  border-radius: var(--radius-md);
}
.voice-rules__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-sage);
  margin-bottom: var(--space-5);
}
.voice-rules__title {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 400;
  margin-bottom: var(--space-6);
  color: var(--brand-mist);
  max-width: 24ch;
}
.voice-rules__title em { font-style: italic; color: var(--brand-sage); }
.voice-rules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-7);
}
.voice-rule {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
}
.voice-rule__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-sage);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}
.voice-rule__txt {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--brand-mist);
}
.voice-rule__txt strong {
  font-weight: 600;
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Component library — Buttons
   Primary = ink fill (v2 default reaffirmed). Spark stays out of buttons.
   ───────────────────────────────────────────────────────────────────────────── */

.btn-table {
  margin-top: var(--space-7);
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.btn-row {
  display: grid;
  grid-template-columns: 200px repeat(5, 1fr);
  gap: 1px;
  background: var(--border-subtle);
}
.btn-row > * { background: var(--bg-elevated); padding: var(--space-5) var(--space-5); }
.btn-row.header { background: var(--bg); }
.btn-row.header > * {
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-subtle);
  padding: 14px 20px;
}
.btn-row__label {
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; color: var(--brand-ink);
}
.btn-row__label small {
  font-weight: 400; font-size: 12px; color: var(--fg-subtle);
}
.btn-cell {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 80px;
}

/* Button base */
.bx {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bx:focus { outline: none; }

/* Primary — ink fill */
.bx--primary { background: var(--brand-ink); color: var(--brand-mist); }
.bx--primary.is-hover, .bx--primary:hover { background: #000; }
.bx--primary.is-active, .bx--primary:active {
  background: #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.bx--primary.is-focus, .bx--primary:focus-visible {
  outline: 2px solid var(--brand-sage);
  outline-offset: 2px;
}
.bx--primary.is-disabled, .bx--primary[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Secondary — sage fill */
.bx--secondary { background: var(--brand-sage); color: var(--brand-ink); }
.bx--secondary.is-hover, .bx--secondary:hover { background: var(--sage-500); color: var(--brand-mist); }
.bx--secondary.is-active, .bx--secondary:active { background: var(--sage-600); color: var(--brand-mist); }
.bx--secondary.is-focus, .bx--secondary:focus-visible {
  outline: 2px solid var(--brand-ink); outline-offset: 2px;
}
.bx--secondary.is-disabled, .bx--secondary[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Tertiary — text + 1px ink underline */
.bx--tertiary {
  background: transparent; color: var(--brand-ink); padding: 6px 0;
  border-radius: 0; border-bottom: 1px solid var(--brand-ink);
  font-size: 15px;
}
.bx--tertiary.is-hover, .bx--tertiary:hover {
  color: var(--brand-sage); border-bottom-color: var(--brand-sage); border-bottom-width: 2px; padding-bottom: 5px;
}
.bx--tertiary.is-active, .bx--tertiary:active { color: var(--sage-600); border-bottom-color: var(--sage-600); }
.bx--tertiary.is-focus, .bx--tertiary:focus-visible {
  outline: 2px solid var(--brand-sage); outline-offset: 4px;
}
.bx--tertiary.is-disabled, .bx--tertiary[disabled] {
  opacity: 0.5; cursor: not-allowed;
}

/* Link-button — text + sage arrow */
.bx--link {
  background: transparent; color: var(--brand-ink); padding: 6px 0;
  border-radius: 0; font-weight: 600;
}
.bx--link .arrow {
  color: var(--brand-sage);
  transition: transform var(--dur-fast) var(--ease-out);
  font-weight: 400;
}
.bx--link.is-hover .arrow, .bx--link:hover .arrow { transform: translateX(4px); }
.bx--link.is-active .arrow, .bx--link:active .arrow { transform: translateX(6px); }
.bx--link.is-focus, .bx--link:focus-visible {
  outline: 2px solid var(--brand-sage); outline-offset: 4px;
}
.bx--link.is-disabled, .bx--link[disabled] { opacity: 0.5; cursor: not-allowed; }

.cta-row {
  margin-top: var(--space-7);
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.cta-row__head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--fg-subtle); margin-bottom: var(--space-4);
}
.cta-row__body { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }

/* Inverse buttons on dark sections */
.inverse-row {
  margin-top: var(--space-5);
  padding: var(--space-7);
  background: var(--brand-ink);
  border-radius: var(--radius-md);
}
.inverse-row .cta-row__head { color: var(--gray-space); }
.inverse-row .bx--primary { background: var(--brand-mist); color: var(--brand-ink); }
.inverse-row .bx--primary:hover { background: #fff; }
.inverse-row .bx--tertiary { color: var(--brand-mist); border-bottom-color: var(--brand-mist); }
.inverse-row .bx--tertiary:hover { color: var(--brand-sage); border-bottom-color: var(--brand-sage); }
.inverse-row .bx--link { color: var(--brand-mist); }
.inverse-row .bx--link .arrow { color: var(--brand-sage); }

/* ─────────────────────────────────────────────────────────────────────────────
   Forms — 6 types × 5 states
   ───────────────────────────────────────────────────────────────────────────── */

.form-grid {
  margin-top: var(--space-7);
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.form-grid-row {
  display: grid;
  grid-template-columns: 160px repeat(5, 1fr);
  gap: 1px; background: var(--border-subtle);
}
.form-grid-row.header > * {
  background: var(--bg); padding: 12px 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-subtle);
}
.form-grid-row > * { background: var(--bg-elevated); padding: var(--space-5); min-height: 88px; }
.form-grid-row__label {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; color: var(--brand-ink);
}
.form-grid-row__label small { font-weight: 400; color: var(--fg-subtle); font-size: 11px; }

/* Input base */
.fx {
  width: 100%;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--brand-ink);
  background: var(--bg-elevated);
  border: 1px solid var(--gray-steel);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fx::placeholder { color: var(--gray-space); }
.fx.is-focus, .fx:focus {
  outline: none;
  border-color: var(--brand-sage);
  box-shadow: 0 0 0 2px var(--brand-sage), 0 0 0 4px var(--bg);
}
.fx.is-filled { border-color: var(--gray-graphite); }
.fx.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(181, 86, 75, 0.18);
}
.fx.is-disabled, .fx[disabled] {
  background: var(--gray-cloud);
  color: var(--fg-faint); border-color: var(--gray-smoke);
  cursor: not-allowed;
}
.fx-error-text {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--danger); font-weight: 500;
}

textarea.fx { min-height: 60px; resize: vertical; }

select.fx {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F1F21' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Checkbox + radio */
.cx-box, .cx-radio {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--brand-ink);
  cursor: pointer;
}
.cx-box__bx, .cx-radio__bx {
  width: 18px; height: 18px;
  border: 1.5px solid var(--gray-steel);
  background: var(--bg-elevated);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.cx-box__bx { border-radius: 4px; }
.cx-radio__bx { border-radius: 50%; }
.cx-box.is-focus .cx-box__bx, .cx-radio.is-focus .cx-radio__bx {
  outline: 2px solid var(--brand-sage); outline-offset: 2px;
}
.cx-box.is-filled .cx-box__bx,
.cx-box.is-filled .cx-box__bx { background: var(--brand-ink); border-color: var(--brand-ink); }
.cx-box.is-filled .cx-box__bx::after {
  content: ""; width: 9px; height: 5px;
  border: 1.8px solid var(--brand-mist);
  border-top: none; border-right: none;
  transform: rotate(-45deg) translate(1px, -1px);
}
.cx-radio.is-filled .cx-radio__bx {
  border-color: var(--brand-ink);
}
.cx-radio.is-filled .cx-radio__bx::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-ink);
}
.cx-box.is-error .cx-box__bx, .cx-radio.is-error .cx-radio__bx {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(181, 86, 75, 0.18);
}
.cx-box.is-disabled, .cx-radio.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* File upload */
.fx-file {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-family: var(--font-sans);
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1.5px dashed var(--gray-steel);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  width: 100%;
  cursor: pointer;
}
.fx-file__icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fx-file__icon svg { stroke: var(--brand-sage); fill: none; stroke-width: 1.8; }
.fx-file.is-focus { border-color: var(--brand-sage); box-shadow: 0 0 0 2px var(--brand-sage); }
.fx-file.is-filled { border-style: solid; border-color: var(--gray-graphite); color: var(--brand-ink); }
.fx-file.is-error { border-color: var(--danger); }
.fx-file.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────────────
   Card types
   ───────────────────────────────────────────────────────────────────────────── */

.cards-row {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.cards-row--2 { grid-template-columns: 1fr 1fr; }
.cd {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1);
}
.cd--service .cd__num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 22px; color: var(--brand-sage); font-weight: 400; line-height: 1;
}
.cd__cap {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle); margin-bottom: 10px;
}
.cd--service .cd__cap { color: var(--brand-sage); }
.cd__title {
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.25; letter-spacing: -0.008em;
  font-weight: 400; color: var(--brand-ink);
  text-wrap: balance;
}
.cd__body {
  margin-top: 12px;
  font-size: 14px; line-height: 1.55; color: var(--fg-muted);
}
.cd__link {
  margin-top: var(--space-5);
  font-size: 13px; font-weight: 600; color: var(--brand-ink);
}
.cd__link::after { content: " →"; color: var(--brand-sage); }
.cd--case .cd__stat {
  font-family: var(--font-sans); font-size: 40px; font-weight: 600;
  letter-spacing: -0.018em; line-height: 1; color: var(--brand-ink);
  font-feature-settings: "tnum";
}
.cd--case .cd__statlabel {
  margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--fg-muted);
}
.cd--testimonial .cd__quote {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; line-height: 1.45; letter-spacing: -0.005em;
  color: var(--brand-ink); text-wrap: pretty;
}
.cd--testimonial .cd__attr {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 600; color: var(--fg-subtle);
}
.cd--testimonial .cd__attr strong { color: var(--brand-ink); display: block; }
.cd--magnet {}
.cd--magnet .cd__thumb {
  height: 120px; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background:
    repeating-linear-gradient(135deg,
      var(--sage-100) 0px, var(--sage-100) 8px,
      var(--sage-50) 8px, var(--sage-50) 16px);
  display: flex; align-items: end;
  padding: 14px; color: var(--sage-700);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.cd--faq { padding: var(--space-5) var(--space-6); }
.cd--faq .cd__q {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); cursor: pointer;
}
.cd--faq .cd__qtxt {
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: var(--brand-ink); line-height: 1.4;
}
.cd--faq .cd__chev {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cd--faq .cd__chev svg {
  stroke: var(--brand-sage); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}
.cd--faq.is-open .cd__chev svg { transform: rotate(90deg); }
.cd--faq .cd__a {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: 14px; line-height: 1.55; color: var(--fg-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Section pattern miniatures
   ───────────────────────────────────────────────────────────────────────────── */

.patterns {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.pat {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pat__canvas {
  background: var(--bg);
  padding: 16px;
  height: 140px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.pat__name {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; color: var(--brand-ink);
}
.pat__name small { display: block; font-weight: 400; color: var(--fg-subtle); margin-top: 3px; }

/* Pattern primitives */
.mn-eb { display: block; height: 5px; width: 50px; background: var(--brand-sage); border-radius: 2px; }
.mn-h  { height: 9px; background: var(--brand-ink); border-radius: 2px; }
.mn-h.w1 { width: 90%; } .mn-h.w2 { width: 70%; } .mn-h.w3 { width: 50%; }
.mn-l  { height: 4px; background: var(--gray-steel); border-radius: 2px; }
.mn-l.w1 { width: 100%; } .mn-l.w2 { width: 90%; } .mn-l.w3 { width: 65%; }
.mn-btn { width: 60px; height: 12px; background: var(--brand-ink); border-radius: 6px; margin-top: 4px; }
.mn-stat { display:block; font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--brand-ink); line-height: 1; }
.mn-statlab { display:block; font-size: 8px; color: var(--fg-subtle); margin-top: 2px; }
.mn-card {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 4px; padding: 8px; flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}

/* Specific miniatures */
.mini-hero { gap: 6px; }
.mini-sticky { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; height: 100%; align-items: stretch; padding: 0; }
.mini-sticky__left { background: var(--bg-sunken); padding: 12px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.mini-sticky__right { padding: 12px; display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 6px; align-content: center; }
.mini-sticky__step { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: center; }
.mini-sticky__step span { font-family: var(--font-serif); font-style: italic; font-size: 11px; color: var(--brand-sage); }
.mini-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 4px; align-items: stretch; height: 100%; }
.mini-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 4px; align-items: stretch; height: 100%; }
.mini-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; justify-items: center; height: 100%; }
.mini-table { display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0 4px; }
.mini-table__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--border-subtle); align-items: center; min-height: 18px; }
.mini-table__row:last-child { border-bottom: none; }
.mini-table__row.h { font-family: var(--font-mono); font-size: 8px; color: var(--fg-subtle); text-transform: uppercase; }
.mini-table__row .hl { background: rgba(162, 168, 146, 0.12); margin: -4px -6px; padding: 4px 6px; }
.mini-table__cell { height: 4px; background: var(--gray-steel); border-radius: 2px; }
.mini-table__cell.tx { background: transparent; font-size: 8px; color: var(--fg-muted); height: auto; }
.mini-quote { padding: 14px; background: var(--bg-warm); border-radius: 4px; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; }
.mini-quote__txt { font-family: var(--font-serif); font-style: italic; font-size: 12px; line-height: 1.3; color: var(--brand-ink); }
.mini-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; justify-content: center; height: 100%; padding: 4px 0; }

/* Nav + footer + modal miniatures */
.layout-row {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.layout {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.layout__head {
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle);
  display: flex; justify-content: space-between;
}
.layout__body { padding: 0; min-height: 160px; }

/* Desktop nav demo */
.demo-nav-d {
  padding: 14px 22px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.demo-nav-d__brand { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.demo-nav-d__brand img { width: 18px; height: 18px; }
.demo-nav-d__links { display: flex; gap: 18px; font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.demo-nav-d__cta {
  background: var(--brand-ink); color: var(--brand-mist);
  padding: 8px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
}
.demo-page { padding: 28px 22px; color: var(--fg-faint); font-size: 11px; }

/* Mobile drawer demo */
.demo-nav-m {
  height: 220px; display: flex;
}
.demo-nav-m__drawer {
  background: var(--brand-mist); width: 70%;
  padding: 18px 18px; display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--border-subtle);
}
.demo-nav-m__close { font-size: 18px; color: var(--brand-ink); cursor: pointer; align-self: flex-end; line-height: 1; }
.demo-nav-m__item { font-family: var(--font-serif); font-size: 18px; color: var(--brand-ink); }
.demo-nav-m__cta {
  margin-top: auto; background: var(--brand-ink); color: var(--brand-mist);
  text-align: center; padding: 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}
.demo-nav-m__overlay { flex: 1; background: rgba(31, 31, 33, 0.4); }

/* Footer demos */
.demo-foot-full {
  padding: 22px;
  background: var(--bg-elevated);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 16px;
}
.demo-foot-full > div { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.demo-foot-full__brand img { width: 22px; height: 22px; margin-bottom: 6px; }
.demo-foot-full__brand small { color: var(--fg-muted); }
.demo-foot-full__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); font-weight: 700; margin-bottom: 4px; }
.demo-foot-full a { color: var(--fg-muted); font-size: 11px; }
.demo-foot-min {
  padding: 18px 22px;
  background: var(--bg-elevated);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--fg-subtle);
}
.demo-foot-min__brand { display: flex; align-items: center; gap: 6px; }
.demo-foot-min__brand img { width: 16px; height: 16px; }
.demo-foot-min__links { display: flex; gap: 18px; }

/* Modal demos */
.demo-modal {
  background: rgba(31, 31, 33, 0.55);
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.demo-modal__dialog {
  background: var(--brand-mist);
  border-radius: var(--radius-md);
  width: 100%; max-width: 360px;
  padding: 22px;
  box-shadow: var(--shadow-3);
  position: relative;
}
.demo-modal__close {
  position: absolute; top: 10px; right: 12px;
  font-size: 18px; line-height: 1; color: var(--fg-muted);
  cursor: pointer;
}
.demo-modal__head {
  font-family: var(--font-serif); font-size: 20px;
  font-weight: 400; line-height: 1.2; letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.demo-modal__body { font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 14px; }
.demo-modal__actions { display: flex; gap: 8px; }
.demo-modal .bx { font-size: 12px; padding: 8px 14px; }
.demo-modal__form { display: grid; gap: 10px; }
.demo-modal__form .fx { font-size: 12px; padding: 8px 10px; }
.demo-modal__form label { font-size: 10px; font-weight: 600; color: var(--fg-subtle); letter-spacing: 0.06em; text-transform: uppercase; }

/* ─────────────────────────────────────────────────────────────────────────────
   Layout + spacing + motion
   ───────────────────────────────────────────────────────────────────────────── */

.space-scale {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.space-row {
  display: grid;
  grid-template-columns: 120px 100px 1fr;
  gap: var(--space-4);
  align-items: center;
}
.space-row__token {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--brand-ink); font-weight: 500;
}
.space-row__px {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-subtle);
}
.space-row__bar {
  height: 14px;
  background: var(--brand-sage);
  border-radius: 2px;
}

.grid-demo {
  margin-top: var(--space-7);
  display: grid; gap: var(--space-5);
}
.gd {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.gd__head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle);
  margin-bottom: var(--space-4);
  display: flex; justify-content: space-between;
}
.gd__grid {
  display: grid; gap: 6px;
}
.gd__cell {
  height: 36px;
  background:
    repeating-linear-gradient(135deg,
      var(--sage-100) 0px, var(--sage-100) 6px,
      var(--sage-50) 6px, var(--sage-50) 12px);
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--sage-700);
  display: flex; align-items: center; justify-content: center;
}
.gd-12 .gd__grid { grid-template-columns: repeat(12, 1fr); }
.gd-6  .gd__grid { grid-template-columns: repeat(6, 1fr); }
.gd-4  .gd__grid { grid-template-columns: repeat(4, 1fr); }

.maxwidth-demo {
  margin-top: var(--space-7);
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.maxwidth-demo__cap {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-subtle); font-weight: 600;
  margin-bottom: 12px;
}
.maxwidth-demo__line {
  max-width: 700px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--fg-muted);
  line-height: 1.55;
}
.maxwidth-demo__meta {
  margin-top: 8px; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-faint);
}

/* Motion */
.motion-row {
  margin-top: var(--space-7);
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(3, 1fr);
}
.motion {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
}
.motion__name {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--brand-ink); font-weight: 500;
}
.motion__curve {
  margin-top: 14px;
  height: 80px;
  position: relative;
}
.motion__curve svg { width: 100%; height: 100%; }
.motion__curve svg path { stroke: var(--brand-sage); stroke-width: 2; fill: none; }
.motion__curve svg .axis { stroke: var(--gray-smoke); stroke-width: 1; }
.motion__dur {
  margin-top: 12px;
  font-size: 12px; color: var(--fg-muted); line-height: 1.5;
}
.motion__dur strong { color: var(--brand-ink); font-weight: 600; }
.motion__use {
  margin-top: 10px;
  font-size: 12px; color: var(--fg-subtle); line-height: 1.5;
}

.motion-rules {
  margin-top: var(--space-7);
  padding: var(--space-7);
  background: var(--brand-ink);
  color: var(--brand-mist);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5) var(--space-6);
}
.motion-rule__num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brand-sage); font-weight: 600;
  letter-spacing: 0.04em;
}
.motion-rule__name {
  font-family: var(--font-sans); font-size: 15px;
  margin-top: 8px; font-weight: 600; color: #fff;
}
.motion-rule__why {
  margin-top: 6px;
  font-size: 13px; line-height: 1.55; color: var(--brand-mist);
  opacity: 0.85;
}

.link-out {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--brand-sage);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  display: flex; gap: var(--space-5); align-items: center;
}
.link-out__txt {
  font-size: 14px; line-height: 1.5; color: var(--fg-muted);
}
.link-out__txt strong { color: var(--brand-ink); font-weight: 600; }

/* Responsive — Phase 3 specific */
@media (max-width: 1100px) {
  .btn-row { grid-template-columns: 140px repeat(5, 1fr); }
  .form-grid-row { grid-template-columns: 120px repeat(5, 1fr); }
  .cards-row { grid-template-columns: 1fr 1fr; }
  .patterns { grid-template-columns: repeat(2, 1fr); }
  .layout-row { grid-template-columns: 1fr; }
  .motion-row { grid-template-columns: 1fr; }
  .motion-rules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .btn-row { grid-template-columns: 1fr; }
  .btn-row > * { padding: 12px; min-height: 56px; }
  .form-grid-row { grid-template-columns: 1fr; }
  .cards-row, .cards-row--2 { grid-template-columns: 1fr; }
  .patterns { grid-template-columns: 1fr; }
  .motion-rules { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Applied surface examples
   Each rendered as a near-pixel-perfect mock at near-real fidelity.
   ───────────────────────────────────────────────────────────────────────────── */

.applied {
  margin-top: var(--space-7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
.applied__chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-subtle);
}
.applied__chrome strong { color: var(--brand-ink); font-weight: 700; }
.applied__chrome .tag {
  display: inline-flex; align-items: center; gap: 6px;
}
.applied__chrome .dots {
  display: inline-flex; gap: 4px;
}
.applied__chrome .dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gray-smoke);
}
.applied__stage {
  background: var(--brand-mist);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Home hero render */
.applied-home {
  padding: 72px 56px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  position: relative;
}
.applied-home::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--sage-100);
}
.applied-home__nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: -24px;
}
.applied-home__nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700; color: var(--brand-ink);
}
.applied-home__nav .brand img { width: 22px; height: 22px; }
.applied-home__nav .links { display: flex; gap: 28px; font-size: 13px; color: var(--fg-muted); font-weight: 500; }
.applied-home__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.applied-home__h1 {
  font-family: var(--font-serif);
  font-size: clamp(48px, 5.8vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--brand-ink);
  max-width: 18ch;
  margin-top: 14px;
  text-wrap: balance;
}
.applied-home__h1 em {
  font-style: italic;
  color: var(--brand-sage);
  font-weight: 400;
}
.applied-home__lede {
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 19px; line-height: 1.55;
  color: var(--fg-muted);
  max-width: 60ch;
}
.applied-home__ctas {
  margin-top: 32px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.applied-home__proof {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--sage-100);
}
.applied-home__proof-cell .cap {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.applied-home__proof-cell .figure {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--brand-ink);
  font-feature-settings: "tnum";
}
.applied-home__proof-cell .body {
  margin-top: 6px;
  font-size: 14px; color: var(--fg-muted);
}

/* Case study hero render */
.applied-case {
  padding: 96px 56px;
  background: var(--brand-mist);
  display: grid;
  gap: 24px;
}
.applied-case__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.applied-case__stat {
  font-family: var(--font-serif);
  font-size: clamp(80px, 10vw, 120px);
  line-height: 1;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--brand-ink);
}
.applied-case__sub {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 24px; line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--brand-ink);
  max-width: 30ch;
}
.applied-case__context {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 18px; line-height: 1.55;
  color: var(--fg-muted);
  max-width: 58ch;
}
.applied-case__rule {
  margin-top: 36px;
  width: 64px; height: 2px;
  background: var(--brand-sage);
}

/* Audit report cover render — ivory foundation, documentary register */
.applied-audit {
  padding: 64px 56px 72px;
  background: var(--brand-mist);
  color: var(--brand-ink);
}
.applied-audit__head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--sage-100);
  padding-bottom: 18px;
}
.applied-audit__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700; color: var(--brand-ink);
}
.applied-audit__brand img { width: 22px; height: 22px; }
.applied-audit__date {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.applied-audit__eyebrow {
  margin-top: 36px;
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.applied-audit__h1 {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--brand-ink);
  max-width: 22ch;
}
.applied-audit__h1 em { font-style: italic; color: var(--brand-sage); }
.applied-audit__sub {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
}
.applied-audit__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.audit-card {
  background: var(--brand-bone);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}
.audit-card__cat {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle);
}
.audit-card__grade {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--brand-ink);
  font-feature-settings: "tnum";
}
.audit-card__name {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  color: var(--brand-ink);
}
.audit-card__why {
  margin-top: 4px;
  font-size: 12px; line-height: 1.4;
  color: var(--fg-muted);
}
.audit-card--standout {
  background: var(--accent-spark-soft);
  border-color: rgba(229, 90, 43, 0.35);
}
.audit-card--standout .audit-card__grade { color: var(--brand-spark); }
.audit-card--standout .audit-card__cat   { color: var(--brand-spark); }

/* Sales deck cover render — ivory · Aesop / Athletics register */
.applied-sales {
  padding: 96px 64px 80px;
  background: var(--brand-mist);
  color: var(--brand-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 460px;
  gap: 0;
}
.applied-sales__top {
  display: flex; justify-content: space-between; align-items: start;
}
.applied-sales__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 14px;
  color: var(--brand-ink);
}
.applied-sales__brand img { width: 28px; height: 28px; }
.applied-sales__meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.applied-sales__center {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 40px 0;
}
.applied-sales__tagline {
  font-family: var(--font-serif);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--brand-ink);
  text-wrap: balance;
  max-width: 14ch;
}
.applied-sales__tagline em {
  font-style: italic;
  color: var(--brand-sage);
  font-weight: 400;
}
.applied-sales__sub {
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--fg-subtle);
}
.applied-sales__bot {
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* About page founder render */
.applied-about {
  padding: 64px 56px 80px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: start;
}
.applied-about__col {}
.applied-about__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.applied-about__h1 {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brand-ink);
  text-wrap: balance;
  max-width: 16ch;
}
.applied-about__h1 em { font-style: italic; color: var(--brand-sage); }
.applied-about__body {
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.65;
  color: var(--fg);
  max-width: 50ch;
}
.applied-about__body p + p { margin-top: 1.2em; }
.applied-about__rule {
  margin-top: 24px;
  width: 56px; height: 2px;
  background: var(--brand-sage);
}
.applied-about__cred {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-subtle);
}
.applied-about__portrait {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg,
      var(--sage-100) 0px,
      var(--sage-100) 12px,
      var(--sage-50) 12px,
      var(--sage-50) 24px
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  gap: 10px;
}
.applied-about__portrait .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage-700);
  background: var(--brand-mist);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.applied-about__portrait .caption {
  font-size: 13px; line-height: 1.5;
  font-weight: 500;
  color: var(--sage-700);
  max-width: 24ch;
}

/* LinkedIn carousel */
.applied-linkedin {
  padding: 40px 56px 56px;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  justify-items: center;
}
.li-slide {
  aspect-ratio: 1080 / 1350;
  max-width: 360px;
  width: 100%;
  background: var(--brand-mist);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 36px 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-2);
}
.li-slide__brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; color: var(--brand-ink);
}
.li-slide__brand img { width: 18px; height: 18px; }
.li-slide__body { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 24px; }
.li-slide__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--brand-ink);
  text-wrap: balance;
}
.li-slide__title em { font-style: italic; color: var(--brand-sage); }
.li-slide__lede {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--fg-muted);
}
.li-slide__num {
  position: absolute;
  bottom: 20px; right: 28px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-faint); font-weight: 500;
}
.li-slide__author {
  position: absolute; bottom: 20px; left: 32px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.li-slide--insight {}
.li-slide--insight .li-slide__title {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: 600;
}
.li-slide--insight .li-slide__cap {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.li-slide--insight .li-slide__quote {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--brand-ink);
  font-style: italic;
  text-wrap: balance;
}
.li-slide--insight .li-slide__quote em { font-style: italic; color: var(--brand-sage); }
.li-slide--insight .li-slide__body {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
  justify-content: flex-start;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Asset inventory + Migration
   ───────────────────────────────────────────────────────────────────────────── */

.inv-block {
  margin-top: var(--space-7);
}
.inv-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.inv-block__head h3 {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 600;
  color: var(--brand-ink);
}
.inv-block__head .count {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-subtle);
  letter-spacing: 0.04em;
}
.inv-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
.inv-table th, .inv-table td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}
.inv-table thead th {
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-subtle);
}
.inv-table tbody tr:last-child td { border-bottom: none; }
.inv-table tbody td { color: var(--fg-muted); }
.inv-table tbody td:first-child {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--brand-ink); font-weight: 500;
  white-space: nowrap;
}
.inv-table tbody td:nth-child(2) {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-muted);
}

/* Migration table */
.migration-table {
  margin-top: var(--space-7);
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
.migration-table th, .migration-table td {
  padding: 16px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.migration-table thead th {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-subtle);
  background: var(--bg-elevated);
}
.migration-table tbody tr:last-child td { border-bottom: none; }
.migration-table tbody td:first-child {
  font-family: var(--font-sans); font-size: 14px;
  font-weight: 600; color: var(--brand-ink);
  width: 26%;
}
.migration-table .v1 {
  color: var(--gray-graphite);
  text-decoration: line-through;
  text-decoration-color: var(--gray-steel);
  text-decoration-thickness: 1px;
  font-size: 13px;
}
.migration-table .arrow {
  color: var(--brand-sage);
  margin: 0 10px;
  font-weight: 700;
}
.migration-table .v2 {
  font-weight: 600;
  color: var(--brand-ink);
  font-size: 14px;
}
.migration-table .swatch-pair {
  display: inline-flex; gap: 4px; margin-right: 8px;
  vertical-align: middle;
}
.migration-table .swatch-pair span {
  width: 14px; height: 14px; border-radius: 3px;
  display: inline-block;
  border: 1px solid rgba(31, 31, 33, 0.08);
}

.checklist {
  margin-top: var(--space-7);
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.checklist__head {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-sage);
  margin-bottom: var(--space-5);
}
.checklist__list {
  display: grid; gap: 10px;
}
.checklist__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 14px; line-height: 1.5;
  color: var(--fg-muted);
}
.checklist__item .box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--brand-sage);
  border-radius: 3px;
  margin-top: 3px;
  position: relative;
  flex-shrink: 0;
}
.checklist__item .box::after {
  content: ""; position: absolute;
  top: 2px; left: 4px;
  width: 5px; height: 9px;
  border: 1.6px solid var(--brand-sage);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.checklist__item strong { color: var(--brand-ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   Index + credits + version log
   ───────────────────────────────────────────────────────────────────────────── */

.toc {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.toc__col h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-sage);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.toc__col ol {
  display: grid; gap: 10px;
}
.toc__col li { display: flex; gap: 16px; align-items: baseline; }
.toc__col li a {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--brand-ink);
  text-decoration: none;
  flex: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.toc__col li a:hover { color: var(--brand-sage); }
.toc__col li .num {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-faint);
  font-weight: 500;
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}

.how-to {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
}
.how-to__cell h4 {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
  margin-bottom: 10px;
}
.how-to__cell p {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
}
.how-to__cell strong { color: var(--brand-ink); font-weight: 600; }

/* Credits + version log */
.credits {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
}
.credit {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.credit__role {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--brand-sage);
}
.credit__name {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--brand-ink);
}
.credit__role-desc {
  margin-top: 10px;
  font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
}

.version-log {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}
.version-log h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-sage);
  margin-bottom: var(--space-6);
}
.version-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
}
.version-row:first-child { border-top: none; padding-top: 0; }
.version-row__tag {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.version-row__tag em { font-style: italic; color: var(--brand-sage); }
.version-row__date {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-subtle);
  letter-spacing: 0.06em;
}
.version-row__body {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-muted);
}
.version-row__body ul { display: grid; gap: 6px; margin-top: 6px; }
.version-row__body li { padding-left: 18px; position: relative; }
.version-row__body li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--brand-sage);
}

/* Responsive */
@media (max-width: 1100px) {
  .applied-home { padding: 56px 36px 64px; }
  .applied-home__proof { grid-template-columns: 1fr; gap: 20px; }
  .applied-case { padding: 64px 36px; }
  .applied-audit { padding: 48px 36px 60px; }
  .applied-audit__grid { grid-template-columns: repeat(2, 1fr); }
  .applied-sales { padding: 72px 36px 60px; }
  .applied-about { grid-template-columns: 1fr; gap: 36px; padding: 48px 36px 60px; }
  .applied-linkedin { grid-template-columns: 1fr; padding: 32px 36px 48px; }
  .toc { grid-template-columns: 1fr; }
  .how-to { grid-template-columns: 1fr; }
  .credits { grid-template-columns: 1fr; }
  .version-row { grid-template-columns: 1fr; gap: 12px; }
  .applied-home__nav .links { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Phase placeholder
   ───────────────────────────────────────────────────────────────────────────── */

.coming-next {
  margin-top: var(--space-7);
  padding: var(--space-8);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
}
.coming-next__tag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-sage); font-weight: 600;
}
.coming-next__head {
  font-family: var(--font-serif);
  font-size: 32px; line-height: 1.2; letter-spacing: -0.01em;
  font-weight: 400; margin-top: 8px;
}
.coming-next__body {
  margin-top: 12px; font-size: 14px;
  color: var(--fg-subtle); max-width: 60ch; margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────────── */

.deck-foot {
  padding: var(--space-8) 40px;
  border-top: 1px solid var(--border-subtle);
  background: var(--brand-mist);
  text-align: center;
}
.deck-foot__top {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-subtle);
}
.deck-foot__url {
  font-family: var(--font-mono); font-size: 13px;
  margin-top: 6px; color: var(--brand-ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .page__title { font-size: 44px; }
  .lockup-row { grid-template-columns: repeat(2, 1fr); }
  .token-grid { grid-template-columns: repeat(2, 1fr); }
  .contrast-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .icp-pair { grid-template-columns: 1fr; gap: var(--space-5); }
  .specimen { grid-template-columns: 160px 1fr; gap: var(--space-5); }
  .specimen--display .specimen__sample { font-size: 56px; }
  .specimen--h1 .specimen__sample { font-size: 48px; }
  .specimen--stat-lg .specimen__sample { font-size: 48px; }
  .photo-rules { grid-template-columns: repeat(2, 1fr); }
  .anti-grid { grid-template-columns: repeat(2, 1fr); }
  .icon-row { grid-template-columns: repeat(3, 1fr); }
  .voice-pair { grid-template-columns: 1fr; gap: var(--space-4); }
  .voice-rules__grid { grid-template-columns: 1fr; }
  .brand-em-demo { grid-template-columns: 1fr; }
  .brand-em-demo__line { font-size: 40px; }
  .type-test--hero h3 { font-size: 48px; }
  .type-test--section h3 { font-size: 36px; }
  .type-test--stat .figure { font-size: 64px; }
  .photo-category__head { grid-template-columns: 1fr; gap: var(--space-3); }
  .photo-row { grid-template-columns: repeat(2, 1fr); }
  .photo-row--2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .page { padding: 64px 24px 80px; }
  .deck-nav { padding: 12px 24px; }
  .deck-nav__links { display: none; }
  .page__title { font-size: 36px; }
  .icp-pair { grid-template-columns: 1fr; }
  .arch { grid-template-columns: 1fr; gap: var(--space-4); }
  .adjective-pair { grid-template-columns: 1fr; }
  .lockup-row, .marks-row { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; }
  .greyscale-pair { grid-template-columns: 1fr; }
  .never-grid { grid-template-columns: 1fr; }
  .token-grid { grid-template-columns: 1fr; }
  .ramp__strip { grid-template-columns: repeat(5, 1fr); }
  .ramp__strip .ramp__cell:nth-child(n+6) { display: none; }
  .ramp__strip + .ramp__strip-mobile-rest { display: grid; grid-template-columns: repeat(5, 1fr); }
  .status-row { grid-template-columns: 1fr 1fr; }
  .contrast-grid { grid-template-columns: 1fr; }
  .tagline { grid-template-columns: 1fr; }
  .tagline__num { padding-top: 0; }
  .tagline__line { font-size: 32px; }
  .size-row__item { grid-template-columns: 1fr; }
  .size-row__note { text-align: left; }
  .cover__title { font-size: 56px; }
  .specimen { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5); }
  .specimen__meta { padding-top: 0; }
  .photo-row, .photo-rules { grid-template-columns: 1fr; }
  .anti-grid { grid-template-columns: 1fr; }
  .icon-row { grid-template-columns: repeat(2, 1fr); }
  .use-table td:first-child { font-size: 16px; }
  .use-table td, .use-table th { padding: 12px 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Print  (per brief 03b §B — additions for PDF export pipeline)
   ─────────────────────────────────────────────────────────────────────────────

   Notes on choices:
   - `@page` declares margin only, NOT size. The Playwright export script
     injects `@page { size: Letter | A4; ... }` at runtime so one stylesheet
     serves both PDFs. If you ever want to print directly from the browser
     without the script, pick a page size in the print dialog.
   - The previous rule `.page { page-break-after: always }` is intentionally
     dropped — it was forcing a page break after EVERY .page wrapper, which
     blew the page count up. We now break before major sections only.
   - `print-color-adjust: exact` is the magic that keeps ivory backgrounds,
     sage swatches, and the deep voice-rules slab from being stripped to
     white. Browsers do this by default to save toner.
   ───────────────────────────────────────────────────────────────────────────── */

/* Toggle visibility utilities used by the print-only cover + colophon */
.print-only { display: none; }

@media print {

  /* ── Page setup ──────────────────────────────────────────────────────── */
  @page {
    margin: 0.5in 0.5in 0.5in 0.5in;
  }

  /* ── Color fidelity ──────────────────────────────────────────────────── */
  /* Force background colors + images to render in print. Applied broadly
     because the deck uses background tones across many surfaces. */
  body,
  .section,
  .swatch,
  [class*="bg-"],
  [class^="bg-"],
  .bg-deep, .bg-sunken, .bg-warm,
  .lockup__canvas, .mark-card,
  .greyscale-card__canvas,
  .token__swatch, .ramp__cell, .status__swatch, .contrast__pair span,
  .voice-rules, .voice-card,
  .photo-placeholder, .anti__img,
  .icp, .spec-block, .token-aside, .cb-notes,
  .btn-row > *, .bx,
  .type-test__body, .type-test--quote .type-test__body,
  .clearspace, .clearspace__grid,
  .print-cover, .print-colophon, .section--cover, .section--colophon {
    -webkit-print-color-adjust: exact !important;
       color-adjust: exact !important;
       print-color-adjust: exact !important;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
       print-color-adjust: exact !important;
  }

  /* ── Suppress interactive / on-screen-only chrome ────────────────────── */
  .nav, .deck-nav,
  .footer-cta,
  .scroll-to-top, .theme-toggle {
    display: none !important;
  }

  /* Hover states must not leak into print — printed PDFs see the :hover
     state of whatever was last under the cursor in some renderers. */
  *:hover {
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    text-decoration: inherit !important;
  }

  /* ── Layout: force desktop, kill the mobile collapse ─────────────────── */
  html, body {
    width: 8.5in;
    margin: 0 auto;
    font-size: 11pt;
  }
  .page {
    padding: 48px 40px;
    border-bottom: none;
  }

  /* ── Section page breaks ─────────────────────────────────────────────── */
  /* Each major section starts on a new page. Cover handled separately
     (it's already page 1). Avoid `page-break-after: always` on .page —
     that's what we're fixing. */
  .section--cover,
  .section--strategy,
  .section--logo-system,
  .section--color-system,
  .section--typography,
  .section--photography,
  .section--voice,
  .section--components,
  .section--layout,
  .section--applied-home,
  .section--applied-case-study,
  .section--applied-audit,
  .section--applied-deck,
  .section--applied-about,
  .section--applied-linkedin,
  .section--asset-inventory,
  .section--migration,
  .section--index,
  .section--colophon {
    page-break-before: always;
    break-before: page;
  }
  .section--cover {
    page-break-before: auto;          /* it's already page 1 */
    break-before: auto;
  }

  /* Avoid orphan headings: don't end a page with a heading whose body is
     stranded on the next page. */
  h1, h2, h3,
  .page__title, .page__head,
  .cover__title,
  .mvv-block__tag, .photo-category__head,
  .voice-row__head, .ramp__head {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Cards and table rows shouldn't split across pages where avoidable */
  .icp, .lockup, .mark-card, .token, .never, .voice-card,
  .specimen, .anti, .icon-cell,
  .btn-row, .rules-table tr, .use-table tr,
  .photo-placeholder, .spec-block,
  .contrast, .greyscale-card, .size-row__item {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Cover (on-screen variant) shouldn't claim full-viewport height in
     print — that collides with the print-only cover and wastes a page. */
  .cover { min-height: auto; }

  /* Make print-only sections visible only in print */
  .print-only { display: block !important; }

  /* ── Print-only COVER page (per brief 03b §A) ────────────────────────── */
  .print-cover {
    /* Single page, centered vertically, ivory background. */
    background: var(--brand-mist, #F1EDE4);
    min-height: calc(100vh - 1in);       /* fill the printable area */
    height: 10in;                         /* Letter-safe; A4 just runs taller */
    display: flex;
    align-items: center;
    justify-content: center;
    page-break-after: always;
    break-after: page;
    padding: 0;
    margin: 0;
  }
  .print-cover__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
  }
  .print-cover__leaf {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
  }
  .print-cover__title {
    font-family: var(--font-serif, "DM Serif Display", Georgia, serif);
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: var(--brand-ink, #1F1F21);
    margin: 0;
  }
  .print-cover__subtitle {
    margin: 4px 0 0;
    font-family: var(--font-serif, "DM Serif Display", Georgia, serif);
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    font-weight: 400;
    color: var(--brand-sage, #A2A892);
  }
  .print-cover__subtitle em { font-style: italic; }
  .print-cover__caption {
    margin-top: 56px;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fg-subtle, #5A5A5E);
  }
  .print-cover__dot {
    display: inline-block;
    margin: 0 8px;
    color: var(--brand-sage, #A2A892);
  }

  /* ── Print-only COLOPHON page (per brief 03b §D) ─────────────────────── */
  .print-colophon {
    background: var(--brand-mist, #F1EDE4);
    min-height: calc(100vh - 1in);
    height: 10in;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.75in 0.5in 0.5in;
    margin: 0;
  }
  .print-colophon__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 5.5in;
    width: 100%;
    margin: 0 auto;
  }
  .print-colophon__title {
    font-family: var(--font-serif, "DM Serif Display", Georgia, serif);
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    font-weight: 400;
    color: var(--brand-ink, #1F1F21);
    margin: 0 0 28px;
  }
  .print-colophon__body {
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg, #2A2A2C);
    font-weight: 400;
    flex: 1;
  }
  .print-colophon__body p {
    margin: 0 0 1.1em;
    max-width: 5.2in;
  }
  .print-colophon__body strong {
    color: var(--brand-ink, #1F1F21);
    font-weight: 600;
  }
  .print-colophon__body code {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 13px;
    background: rgba(31, 31, 33, 0.04);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--brand-ink, #1F1F21);
  }
  .print-colophon__meta {
    margin: 28px 0;
    padding: 18px 0;
    border-top: 1px solid rgba(31, 31, 33, 0.12);
    border-bottom: 1px solid rgba(31, 31, 33, 0.12);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 32px;
  }
  .print-colophon__meta div { display: flex; gap: 12px; align-items: baseline; }
  .print-colophon__meta dt {
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fg-faint, #8A8A8E);
    width: 90px;
    flex-shrink: 0;
  }
  .print-colophon__meta dd {
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 14px;
    color: var(--brand-ink, #1F1F21);
    font-weight: 500;
    margin: 0;
  }
  .print-colophon__live {
    margin-top: 24px;
    font-style: italic;
    color: var(--fg-muted, #4A4A4C);
  }
  .print-colophon__leaf {
    align-self: center;
    margin-top: auto;
    width: 40px;
    height: 40px;
    opacity: 0.9;
  }
}