html {
  scroll-padding-top: 90px; /* keeps anchor-linked content clear of the sticky header */
  scroll-behavior: smooth;
}

:root {
  /* Surfaces */
  --bg: #000000;
  --surface: #0C0F16;
  --surface-2: #141923;
  --surface-3: #1E2533;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);

  /* Inks */
  --ink: #FFFFFF;
  --ink-body: #F1F5F9;
  --ink-2: #94A3B8;
  --ink-3: #7D8DA5;

  /* Strict Semantic Accents */
  --orange: #fcee21;
  --orange-dim: rgba(252, 238, 33, 0.12);
  --orange-line: rgba(252, 238, 33, 0.40);

  --blue: #6DCBDC;
  --blue-dim: rgba(109, 203, 220, 0.12);
  --blue-line: rgba(109, 203, 220, 0.40);

  --amber: #E3A53A;
  --amber-dim: rgba(227, 165, 58, 0.12);
  --amber-line: rgba(227, 165, 58, 0.40);

  --green: #2ECC71;
  --green-dim: rgba(46, 204, 113, 0.12);
  --green-line: rgba(46, 204, 113, 0.40);

  --crimson: #DC2626;
  --crimson-dim: rgba(220, 38, 38, 0.12);
  --crimson-line: rgba(220, 38, 38, 0.40);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 9999px;
  --section-rhythm: 48px;
  --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cr-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Master Header */
.cr-web-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  background: rgba(12, 15, 22, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.cr-web-header__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cr-brand-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.cr-brand-slot__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-dim);
}
.cr-brand-slot__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.cr-nav-cluster {
  display: flex;
  align-items: center;
  gap: 32px;
}
.cr-nav-item {
  position: relative;
  padding: 20px 0;
}
.cr-nav-direct,
.cr-nav-trigger {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.15s ease;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cr-nav-direct:hover,
.cr-nav-trigger:hover,
.cr-nav-item:hover > .cr-nav-trigger,
.cr-nav-item.is-open > .cr-nav-trigger,
.cr-nav-direct.active,
.cr-nav-trigger.active {
  color: var(--orange) !important;
}
.cr-nav-caret {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.cr-nav-item.is-open .cr-nav-caret,
html:not(.cr-js) .cr-nav-item:hover .cr-nav-caret {
  transform: rotate(-135deg) translateY(-2px);
}
.cr-dropdown-panel {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.85);
  z-index: 99999;
  flex-direction: column;
  gap: 4px;
}
/* opened by src/a11y.js (hover, Enter/Space, Arrow Down); plain :hover only as a fallback if scripting is off */
.cr-nav-item.is-open .cr-dropdown-panel,
html:not(.cr-js) .cr-nav-item:hover .cr-dropdown-panel {
  display: flex !important;
}
.cr-dropdown-link {
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  display: block;
  transition: background 0.15s ease;
}
.cr-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cr-dropdown-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.cr-dropdown-desc {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.cr-btn--pill-outline {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--orange-line);
  color: var(--orange);
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cr-btn--pill-outline:hover {
  background: var(--orange);
  color: #000000;
}

.cr-lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--orange-line);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.02);
}
.cr-lang-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  background: transparent;
  color: var(--ink-2);
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cr-lang-btn:hover {
  color: var(--orange);
}
.cr-lang-btn.active {
  background: var(--orange);
  color: #000000;
}

/* Masthead */
.cr-hero-section {
      max-width: 1280px; margin: 0 auto; padding: 48px 24px 24px; text-align: center;
    }
.cr-kicker {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--orange); text-transform: uppercase; margin-bottom: 12px;
    }
.cr-hero-headline {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  max-width: 1120px;
  margin: 0 auto 16px;
  text-wrap: balance;
}
.cr-hero-headline span {
  color: var(--orange);
}
.cr-hero-deck {
      max-width: 840px; margin: 0 auto 24px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6;
    }
.cr-quote-card {
  max-width: 580px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--orange-line);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  padding: 18px 28px;
  text-align: center;
}
.cr-quote-card h2 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-style: italic;
  color: var(--ink);
}

/* 7:5 Ratio Grid */
.cr-editorial-block {
      max-width: 1280px; margin: 0 auto; padding: 24px 24px; display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; position: relative;
    }
@media (max-width: 960px) {
  .cr-editorial-block { grid-template-columns: 1fr; gap: 32px; }
  /* Once stacked to one column, sticky positioning has nothing to stick
     relative to except its own (often tall) content — it would freeze mid-
     scroll then release, which reads as a glitch rather than a feature. */
  .cr-col-dock { position: static; top: auto; }
  /* Single-column mode only: grid items default to min-width:auto, so a long title's
     intrinsic width could push the column wider than the screen. Scoped to this
     breakpoint on purpose — applying it on desktop changes the two-column layout. */
  .cr-col-story, .cr-col-dock { min-width: 0; }
}
.cr-col-story {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cr-section-num {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--orange); letter-spacing: 0.1em; text-transform: uppercase;
    }
.cr-article-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.cr-body-copy {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.cr-body-copy strong {
  color: var(--ink);
}

.cr-col-dock {
      position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; align-self: start; width: 100%;
    }
.cr-card {
      background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-card); width: 100%;
    }
.cr-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.cr-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.cr-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.cr-pill--orange { background: var(--orange-dim); color: var(--orange); border: 1px solid var(--orange-line); }
.cr-pill--green  { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green-line); }
.cr-pill--blue   { background: var(--blue-dim);   color: var(--blue);   border: 1px solid var(--blue-line); }

.cr-subgrid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.cr-subcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Feature Break Canvas */
.cr-feature-break-wrap {
      max-width: 1280px; margin: 16px auto 24px; padding: 0 24px; width: 100%; box-sizing: border-box;
    }
.cr-diagram-box {
  background: #000000;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cr-diagram-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Memory Anchor */
.cr-memory-anchor-wrap {
      max-width: 1280px; margin: 0 auto; padding: 24px 24px 36px;
    }
.cr-memory-anchor {
      background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; display: flex; align-items: stretch; gap: 32px; box-shadow: var(--shadow-card);
    }
@media (max-width: 900px) {
  .cr-memory-anchor { flex-direction: column; gap: 24px; }
}
.cr-memory-anchor__meta {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cr-memory-anchor__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 6px;
}
.cr-memory-anchor__headline {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
}
.cr-memory-anchor__subtext {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}
.cr-memory-anchor__grid {
      flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start;
    }
@media (max-width: 1100px) {
  .cr-memory-anchor__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cr-memory-anchor__grid { grid-template-columns: 1fr; }
}
.cr-memory-anchor__item {
  border-left: 2px solid var(--orange);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-memory-anchor__item-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cr-memory-anchor__item-desc {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

/* Master Footer */
.cr-sitemap-footer {
      border-top: 1px solid var(--line); background: #05070A; padding: 48px 24px 28px; margin-top: 24px;
    }
.cr-sitemap-grid {
      max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line-soft);
    }
.cr-sitemap-col h4,
.cr-sitemap-col h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}
.cr-sitemap-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-sitemap-links a {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cr-sitemap-links a:hover {
  color: var(--orange);
}
.cr-sitemap-bottom {
      max-width: 1280px; margin: 20px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono);
    }

/* === Scoped modifier: App Anatomy dropdown has 12 items (vs 4-6 in other dropdowns) — needs scroll instead of growing unbounded === */
.cr-dropdown-panel--scroll {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}


/* ===== Consolidated from page-specific stylesheets ===== */

.cr-pullquote {
      background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 0px !important; padding: 20px 28px; max-width: 760px; margin: 0 auto; text-align: center; font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: var(--ink);
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-play-btn {
      width: 40px; height: 40px; border-radius: 50%; background: var(--orange); border: none; color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    }

.cr-audio-widget-container[data-state="docked"] {
      position: fixed; bottom: 24px; right: 24px; width: auto; max-width: 420px; z-index: 999999 !important; animation: floatPill 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

.cr-audio-widget-container[data-state="docked"]:hover .cr-audio-card,
    .cr-audio-widget-container[data-state="docked"].is-playing .cr-audio-card {
      background: rgba(12, 15, 22, 0.95); border-color: rgba(252, 238, 33, 0.45); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
    }

.cr-audio-retrigger {
      display: none; position: fixed; bottom: 24px; z-index: 999998 !important; background: rgba(12, 15, 22, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--r-pill); padding: 6px 14px 6px 10px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); align-items: center; gap: 8px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

.cr-audio-retrigger__orb {
      width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: 0.30; box-shadow: 0 0 6px rgba(252, 238, 33, 0.3); transition: opacity 0.2s, box-shadow 0.2s;
    }

.cr-audio-retrigger:hover .cr-audio-retrigger__orb {
      opacity: 1; box-shadow: 0 0 10px rgba(252, 238, 33, 0.8); animation: crPulse 2s infinite ease-in-out;
    }

.cr-ordered-list li {
      display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.6;
    }

.cr-feature-break {
      width: 100%; background: #000000; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; box-sizing: border-box;
    }

.cr-feature-break__canvas {
      width: 100%; background: #000000; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; padding: 0 !important; margin: 0 auto !important; line-height: 0; overflow: hidden; box-sizing: border-box;
    }

.cr-feature-break__canvas img {
      max-width: 100% !important; width: auto !important; height: auto !important; display: block !important; margin: 0 auto !important; object-fit: contain !important; border: none !important;
    }

.cr-image-placeholder {
      min-height: 220px;
      border: 1.5px dashed rgba(255, 255, 255, 0.15);
      box-sizing: border-box;
    }
.cr-image-placeholder__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: var(--ink-3);
      padding: 24px;
    }
.cr-image-placeholder__inner span {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      text-align: center;
    }

/* The calculator's canvas holds a header + a grid stacked vertically, not a single
   centered image — override the shared flex-center layout for this specific case. */
#calculator .cr-feature-break__canvas {
      display: block !important;
      line-height: normal !important;
    }

.cr-feature-break__bar {
      display: flex; justify-content: space-between; align-items: center; background: #080A0F; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 14px 24px; box-sizing: border-box; width: 100%;
    }

.cr-feature-tag {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--orange); text-transform: uppercase;
    }

.cr-nav-direct,
    .cr-nav-trigger {
      color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.15s ease; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0;
    }

.cr-nav-direct:hover,
    .cr-nav-trigger:hover,
    .cr-nav-item:hover > .cr-nav-trigger,
    .cr-nav-direct.active,
    .cr-nav-trigger.active {
      color: var(--orange) !important;
    }

.cr-dock-item {
      padding: 6px 0 6px 12px; border-radius: 0 6px 6px 0;
    }

.cr-audio-widget-container {
      width: 100%; position: relative;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-card {
      background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-lg); padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); width: 100%;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-top-row {
      display: flex; align-items: center; gap: 12px;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-meta {
      display: flex; flex-direction: column; gap: 2px; overflow: hidden;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-tag {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-title {
      font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-controls-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line-soft);
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-time {
      font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-progress-rail {
      flex: 1; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; cursor: pointer; position: relative;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-progress-bar {
      height: 100%; width: 0%; background: var(--orange); transition: width 0.1s linear;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-actions {
      display: flex; align-items: center; gap: 8px;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-speed {
      background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--r-sm); cursor: pointer;
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-close {
      display: none;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-card {
      background: rgba(12, 15, 22, 0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--r-pill); padding: 6px 14px 6px 6px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-top-row {
      display: flex; align-items: center; gap: 8px; flex: 1; overflow: hidden;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-play-btn {
      width: 32px; height: 32px; border-radius: 50%; background: var(--orange); border: none; color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-tag {
      display: none;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-title {
      font-size: 12px; font-weight: 700; color: rgba(241, 245, 249, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

.cr-audio-widget-container[data-state="docked"]:hover .cr-audio-title {
      color: var(--ink);
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-controls-row {
      display: flex; align-items: center; gap: 8px; border-top: none; padding-top: 0; flex-shrink: 0;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-time {
      font-family: var(--font-mono); font-size: 10.5px; color: rgba(148, 163, 184, 0.6);
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-progress-rail {
      width: 50px; height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-progress-bar {
      height: 100%; width: 0%; background: var(--orange);
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-actions {
      display: flex; align-items: center; gap: 6px;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-speed {
      background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-mono); font-size: 10px; padding: 1px 4px; border-radius: 4px; cursor: pointer;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-close {
      display: block; background: transparent; border: none; color: var(--ink-3); font-size: 15px; cursor: pointer; line-height: 1; padding: 0 2px;
    }

.cr-audio-widget-container[data-state="docked"] .cr-audio-close:hover {
      color: var(--ink);
    }

.cr-audio-retrigger:hover {
      background: rgba(12, 15, 22, 0.92); border-color: var(--orange-line); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7); transform: translateY(-2px);
    }

.cr-audio-retrigger__label {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.06em; transition: color 0.2s;
    }

.cr-audio-retrigger:hover .cr-audio-retrigger__label {
      color: #ffffff;
    }

.cr-dropdown-link.is-active {
      background: var(--orange-dim); border: 1px solid var(--orange-line);
    }

.cr-pill--amber {
      background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-line);
    }

.cr-ordered-list {
      list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 8px;
    }

.cr-list-num {
      font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--orange); flex-shrink: 0; line-height: 1.6;
    }

.cr-bullet-list-clean {
      list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 8px;
    }

.cr-bullet-list-clean li {
      display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
    }

.cr-bullet-dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-top: 8px; flex-shrink: 0;
    }

.cr-timeline-stack {
      display: flex; flex-direction: column; gap: 14px;
    }

.cr-timeline-node {
      display: flex; gap: 12px; align-items: flex-start;
    }

.cr-timeline-year {
      font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--orange); background: var(--orange-dim); border: 1px solid var(--orange-line); padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
    }

.cr-timeline-content {
      font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
    }

.cr-timeline-content strong {
      color: var(--ink);
    }

.cr-feature-caption {
      font-family: var(--font-sans); font-size: 12px; color: #94A3B8; text-align: right;
    }

.cr-pill--crimson {
      background: var(--crimson-dim); color: #ff6b6b; border: 1px solid var(--crimson-line);
    }

.cr-link {
      color: var(--orange); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease;
    }

.cr-link:hover {
      text-decoration: underline;
    }

.cr-link__icon--next {
      width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none;
    }

.cr-calc-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
    }

.cr-control-group {
      display: flex; flex-direction: column; gap: 16px;
    }

.cr-slider-block {
      background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
    }

.cr-slider-head {
      display: flex; justify-content: space-between; align-items: center;
    }

.cr-slider-label {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em;
    }

.cr-slider-val {
      font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--orange);
    }

.cr-range-input {
      -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #1e2533; outline: none; cursor: pointer;
    }

.cr-range-input::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); cursor: pointer; border: 2px solid #ffffff; box-shadow: 0 0 10px rgba(252, 238, 33, 0.5);
    }

.cr-range-input::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%; background: var(--orange); cursor: pointer; border: 2px solid #ffffff; box-shadow: 0 0 10px rgba(252, 238, 33, 0.5);
    }

.cr-calc-results {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }

.cr-result-card {
      background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
    }

.cr-result-kicker {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em;
    }

.cr-result-number {
      font-family: var(--font-mono); font-size: 24px; font-weight: 800; line-height: 1.1;
    }

.cr-result-subtext {
      font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin: 0;
    }

.cr-hero-audio-slot {
      max-width: 760px; margin: 24px auto 0; width: 100%; position: relative;
    }

.cr-matrix-table {
      width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 16px;
    }

.cr-matrix-table th, .cr-matrix-table td {
      padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
    }

.cr-matrix-table th {
      background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
    }

.cr-matrix-table td strong {
      color: var(--ink);
    }

.cr-matrix-table td:last-child {
      color: var(--orange); font-weight: 600; background: var(--orange-dim);
    }

.cr-profile-badge-row {
      display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
    }

.cr-profile-badge-row:last-child {
      border-bottom: none;
    }

.cr-profile-badge-tag {
      font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
    }

.cr-main-content {
      max-width: 1280px; margin: 0 auto; padding: 0 24px;
    }

.cr-logo-slot {
      display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: 0.1em;
    }

.cr-logo-slot__mark {
      width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--orange); display: flex; align-items: center; justify-content: center; background: var(--orange-dim);
    }

.cr-logo-slot__dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
    }

.cr-nav-links {
      display: flex; gap: 20px; align-items: center;
    }

.cr-nav-link {
      color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.15s;
    }

.cr-nav-link:hover, .cr-nav-link.active {
      color: var(--orange);
    }

.cr-audio-widget-container[data-state="inline"] .cr-audio-play-btn:hover {
      transform: scale(1.06);
    }

.cr-color-radar {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0;
    }

.cr-color-chip {
      background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
    }

.cr-color-chip__dot {
      width: 10px; height: 10px; border-radius: 50%;
    }

.cr-color-chip__name {
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink);
    }

.cr-color-chip__role {
      font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
    }

.cr-web-footer {
      border-top: 1px solid var(--line); background: #05070a; padding: 32px 0; margin-top: 64px;
    }

.cr-web-footer__container {
      max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono);
    }


/* ===== App Anatomy detail pages (12 pillar viewers) ===== */


  :root {
    /* Surfaces & Canvas */
    --bg: #000000;
    --bg-subtle: #05070A;
    --surface: #0C0F16;
    --surface-2: #141923;
    --surface-3: #1E2533;
    /* Lines & Dividers */
    --line: rgba(255, 255, 255, 0.08);
    --line-hover: rgba(255, 255, 255, 0.20);
    --line-soft: rgba(255, 255, 255, 0.05);
    /* Typography Inks */
    --ink: #FFFFFF;
    --ink-1: #E6EDF3;
    --ink-2: #94A3B8;
    --ink-3: #7D8DA5;
    /* Semantic accent */
    --orange: #fcee21;
    --orange-subtle: rgba(252, 238, 33, 0.15);
    /* Fonts */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: 'Playfair Display', 'Newsreader', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Geometry */
    --section-rhythm: 64px;
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;
    --r-pill: 9999px;
    --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.6);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
.section-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--section-rhythm) 24px 40px;
  }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--orange);
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: var(--font-sans);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    max-width: 720px;
    color: var(--ink);
    text-wrap: balance;
  }
  .section-hook {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 620px;
    margin: 0;
    font-weight: 400;
  }

  /* ---------- two column stage ---------- */
  .stage {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 56px;
    align-items: stretch;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    box-sizing: border-box;
    background: var(--bg);
    z-index: 20;
  }
  @media (max-width: 900px) {
    .stage {
      grid-template-columns: 1fr;
      position: static;
      height: auto;
    }
  }

  .shot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 0;
    height: 100%;
  }
  .shot-frame {
    position: relative;
    width: auto;
    height: min(100%, 796px);
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 794 / 1662;
    overflow: hidden;
    border-radius: 40px;
    border: 1.5px solid var(--line-hover);
    background: #000;
  }

  .marker-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .marker-toolbar input[type="range"] {
    width: 120px;
    accent-color: var(--orange);
  }
  .marker-toolbar .rotate-label {
    font-size: 12px;
    color: var(--ink-2);
    font-family: var(--mono, monospace);
  }
  .marker-toolbar button {
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    transition: all .15s ease;
  }
  .marker-toolbar button:hover {
    border-color: var(--line-hover);
    color: var(--ink);
  }
  .marker-toolbar button.active {
    background: var(--orange-subtle);
    border-color: var(--orange);
    color: var(--orange);
  }
  .marker-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
  }
  .marker-layer.placing {
    pointer-events: auto;
    cursor: crosshair;
  }
  .marker-el {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: move;
  }
  .marker-el .marker-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff5555;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
  }
  .marker-el.selected .arrow-rotator svg polygon {
    stroke: #fff;
    stroke-width: 2.5;
  }
  .arrow-rotator {
    position: relative;
    width: 26px;
    height: 26px;
  }
  .arrow-rotator svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  }
  .arrow-rotator svg polygon {
    fill: var(--anno-arrow-fill);
    stroke: var(--anno-arrow-outline);
    stroke-width: var(--anno-arrow-outline-width);
  }
  .shot-frame img {
    position: absolute;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    object-fit: cover;
    display: block;
  }


  /* ---------- dock list ---------- */
  .dock-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    height: 100%;
    padding: 40px 8px 40px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
  }
  .dock-list::-webkit-scrollbar { width: 6px; }
  .dock-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }
  .dock-list::-webkit-scrollbar-track { background: transparent; }
  .dock-item {
    padding: 22px 16px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: var(--r-md);
  }
  .dock-item:last-child { border-bottom: 1px solid var(--line); }
  .dock-item:hover { background: var(--surface); }
  .dock-item.active {
    background: var(--orange-subtle);
  }
  .dock-item.active .dock-item__badge {
    background: var(--orange);
    color: #05070A;
  }
  .dock-item.active .dock-item__title {
    color: var(--orange);
  }
  .dock-item__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .dock-item__badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 3px 9px;
    flex-shrink: 0;
  }
  .dock-item__title {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-1);
    letter-spacing: -0.005em;
  }
  .dock-item__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    padding-left: 44px;
  }

  @media (max-width: 900px) {
    .shot-col { margin-bottom: 8px; }
    .dock-list { overflow-y: visible; height: auto; padding: 0; }
  }


/* ===== Shared logo SVG fills ===== */

.cls-1 { fill: #fcee21; }
.cls-2 { fill: #6dcbdc; }
.cls-3 { fill: #fcee21; }

/* ===== Scroll-reveal system (Step 1) ===== */
.cr-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cr-reveal.cr-reveal-visible,
.cr-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
/* App Anatomy's sticky phone-mockup stage manages its own layout — never fade/transform it */
.stage .cr-reveal,
.stage.cr-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===== Hover states (Step 2) ===== */
.cr-card,
.cr-subcard,
.cr-persona-card-v2,
.cr-anatomy-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cr-card:hover,
.cr-subcard:hover,
.cr-persona-card-v2:hover,
.cr-anatomy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border-color: var(--orange-line);
}
.cr-btn--pill-outline,
.cr-lang-btn,
.cr-nav-direct,
.cr-nav-trigger {
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cr-btn--pill-outline:hover {
  transform: translateY(-1px);
}
.dock-item {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dock-item:hover {
  border-color: var(--orange-line);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .cr-reveal,
  .cr-card, .cr-subcard, .cr-persona-card-v2, .cr-anatomy-card,
  .cr-btn--pill-outline, .cr-lang-btn, .cr-nav-direct, .cr-nav-trigger, .dock-item {
    transition: none !important;
  }
}

/* ===== SVG diagram assembly animation (Step 3) ===== */
/* Direct children of an inline diagram fade + scale in with a slight stagger once
   the parent .cr-feature-break has been revealed (see scroll-reveal.js above). */
.cr-feature-break__canvas svg > * {
  opacity: 0;
  transform: scale(0.92);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cr-reveal-visible .cr-feature-break__canvas svg > *,
.cr-feature-break__canvas.cr-reveal-visible svg > * {
  opacity: 1;
  transform: scale(1);
}
/* Stagger up to the first 12 elements so the diagram assembles rather than snapping in at once */
.cr-feature-break__canvas svg > *:nth-child(1)  { transition-delay: 0.00s; }
.cr-feature-break__canvas svg > *:nth-child(2)  { transition-delay: 0.05s; }
.cr-feature-break__canvas svg > *:nth-child(3)  { transition-delay: 0.10s; }
.cr-feature-break__canvas svg > *:nth-child(4)  { transition-delay: 0.15s; }
.cr-feature-break__canvas svg > *:nth-child(5)  { transition-delay: 0.20s; }
.cr-feature-break__canvas svg > *:nth-child(6)  { transition-delay: 0.25s; }
.cr-feature-break__canvas svg > *:nth-child(7)  { transition-delay: 0.30s; }
.cr-feature-break__canvas svg > *:nth-child(8)  { transition-delay: 0.35s; }
.cr-feature-break__canvas svg > *:nth-child(9)  { transition-delay: 0.40s; }
.cr-feature-break__canvas svg > *:nth-child(10) { transition-delay: 0.45s; }
.cr-feature-break__canvas svg > *:nth-child(11) { transition-delay: 0.50s; }
.cr-feature-break__canvas svg > *:nth-child(12) { transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .cr-feature-break__canvas svg > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Scroll-progress bar (Step 2.1) ===== */
.cr-scroll-progress {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 999;
}
.cr-scroll-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--blue);
  transition: width 0.1s linear;
}

/* ===== Read-time badge (Step 2.2) ===== */
.cr-read-time-badge {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

/* ===== In-page chapter nav (Step 2.3) ===== */
.cr-chapter-nav {
  position: fixed;
  right: 12px; /* the dots' boxes are 24px wide now; this keeps each 8px dot exactly where it was */
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none; /* shown only on wide viewports, see media query below */
}
.cr-chapter-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Each dot is a 24x24px target (WCAG 2.2 target size) with the original 8px dot drawn inside it. */
.cr-chapter-nav__dot {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}
.cr-chapter-nav__dot::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.cr-chapter-nav__dot:hover::before {
  transform: scale(1.3);
  border-color: var(--orange-line);
}
.cr-chapter-nav__dot.is-active::before {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.3);
}
.cr-chapter-nav__dot::after {
  content: attr(data-label);
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--r-sm, 6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cr-chapter-nav__dot:hover::after,
.cr-chapter-nav__dot:focus-visible::after {
  opacity: 1;
}
@media (min-width: 1280px) {
  .cr-chapter-nav {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-scroll-progress__fill {
    transition: none;
  }
  .cr-chapter-nav__dot {
    transition: none;
  }
}

/* ===== Click-to-highlight linking (Step 4) ===== */
/* retired per user request — kept empty to avoid renumbering surrounding rules */

/* ===== Visitor role picker (Step 5) ===== */
.cr-path-picker {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 8px;
  text-align: center;
}
.cr-path-picker__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin: 0 0 8px;
}
.cr-path-picker__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
}
.cr-path-picker__deck {
  font-size: 14px;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 auto 28px;
  line-height: 1.5;
}
.cr-path-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.cr-path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--path-accent, var(--orange));
  border-radius: 10px;
  padding: 18px 18px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cr-path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  border-color: var(--path-accent, var(--orange));
}
.cr-path-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--path-accent, var(--orange));
}
.cr-path-card__desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.cr-path-card__steps {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ===== Persistent path tracker (Step 5) ===== */
.cr-path-tracker {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9500; /* above the desktop-only gate (9000), below the header (10000) and
                    mobile menu overlay — so a visitor finishing a guided path on a
                    phone still sees the completion state and can dismiss it */
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 12px 10px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-width: calc(100vw - 40px);
}
.cr-path-tracker__content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
}
.cr-path-tracker__role {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cr-path-tracker__step {
  color: var(--ink-3);
}
.cr-path-tracker__next {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--orange-line);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  transition: background-color 0.2s ease;
}
.cr-path-tracker__next:hover {
  background-color: var(--orange-dim);
}
.cr-path-tracker__done {
  color: var(--green);
  font-weight: 700;
}
.cr-path-tracker__close {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.cr-path-tracker__close:hover {
  color: var(--ink);
}
@media (max-width: 640px) {
  .cr-path-tracker {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

/* ===== Live edit mode (review tool, not a visitor-facing feature) ===== */
.cr-edit-mode-active [data-i18n],
.cr-edit-mode-active [data-i18n-html] {
  outline: 1px dashed var(--blue-line);
  outline-offset: 2px;
  cursor: text;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}
.cr-edit-mode-active [data-i18n]:hover,
.cr-edit-mode-active [data-i18n-html]:hover,
.cr-edit-mode-active [data-i18n]:focus,
.cr-edit-mode-active [data-i18n-html]:focus {
  outline: 1px dashed var(--orange);
  background-color: rgba(230, 78, 25, 0.06);
}
.cr-edit-panel {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 900;
  font-family: var(--font-mono);
  font-size: 12px;
}
/* Collapsed (default): a small pill that stays out of the way of whatever's underneath it */
.cr-edit-panel__pill {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--orange-line);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  color: var(--orange);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.cr-edit-panel.is-collapsed .cr-edit-panel__pill {
  display: flex;
}
/* Expanded: the full panel with hint + actions */
.cr-edit-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--orange-line);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  max-width: 260px;
}
.cr-edit-panel.is-collapsed .cr-edit-panel__body {
  display: none;
}
.cr-edit-panel__label {
  color: var(--orange);
  font-weight: 700;
}
.cr-edit-panel__hint {
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.4;
}
.cr-edit-panel__btn {
  background: var(--surface-1, #111);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cr-edit-panel__save {
  border-color: var(--green);
  color: var(--green);
}
.cr-edit-panel__save:hover {
  background-color: rgba(0, 200, 120, 0.1);
}
.cr-edit-panel__discard {
  border-color: var(--crimson, #bc2020);
  color: var(--crimson, #bc2020);
}
.cr-edit-panel__discard:hover {
  background-color: rgba(188, 32, 32, 0.1);
}
.cr-edit-panel__close:hover,
.cr-edit-panel__collapse:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ===== Default bold text color ===== */
/* Plain <strong>/<b> tags with no inline color (including new bold text created via
   the browser's native Ctrl/Cmd+B while in edit mode) render white to stand out
   against the muted body-copy gray. Tags that already set their own color via an
   inline style are untouched, since inline styles take precedence over this rule.
   If a bold selection accidentally spans into body copy that should stay muted,
   select that portion and press Cmd/Ctrl+Shift+G (see src/edit-mode.js) to give it
   its own explicit gray — more reliable than trying to guess the right color here. */
strong:not([style]), b:not([style]) {
  color: #ffffff;
}

/* ===== Intro video library (mockup) ===== */
.cr-video-library {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Hero / featured video */
.cr-video-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.cr-video-hero__player {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(230, 78, 25, 0.12), rgba(0, 0, 0, 0.4));
  aspect-ratio: 16 / 9;
}
.cr-video-hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-video-hero__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--orange);
  color: #000;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 8px 24px rgba(230, 78, 25, 0.4);
  transition: transform 0.2s ease;
}
.cr-video-hero__play:hover {
  transform: scale(1.08);
}
.cr-video-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.cr-video-hero__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.cr-video-hero__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.cr-video-hero__desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.cr-video-hero__duration {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* Grouped rows */
.cr-video-group__header {
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.cr-video-group__title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--group-accent, var(--orange));
  margin: 0 0 4px;
}
.cr-video-group__subtitle {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}
.cr-video-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.cr-video-row::-webkit-scrollbar {
  height: 6px;
}
.cr-video-row::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.cr-video-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cr-video-card:hover {
  transform: translateY(-3px);
  border-color: var(--group-accent, var(--orange));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.cr-video-card.is-active {
  border-color: var(--group-accent, var(--orange));
  box-shadow: 0 0 0 1px var(--group-accent, var(--orange));
}
.cr-video-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--group-accent, var(--orange)) 18%, transparent), rgba(0, 0, 0, 0.3));
}
.cr-video-card__play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--group-accent, var(--orange));
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding-left: 2px;
}
.cr-video-card__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.cr-video-card__duration {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .cr-video-hero {
    grid-template-columns: 1fr;
  }
}

.cr-video-ai-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 32px;
}

/* ===== Mobile navigation (hamburger + full-screen overlay) ===== */
.cr-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10001;
}
.cr-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.cr-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.cr-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.cr-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.cr-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: var(--bg, #0c0f16);
  overflow-y: auto;
  padding: 0 0 48px;
}
.cr-mobile-overlay.is-open {
  display: block;
}
.cr-mobile-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.cr-mobile-overlay__brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.cr-mobile-overlay__close {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.cr-mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 0;
}
.cr-mobile-nav__direct {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cr-mobile-nav__direct.active {
  color: var(--orange);
}
.cr-mobile-accordion {
  border-bottom: 1px solid var(--line);
}
.cr-mobile-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 16px 0;
  cursor: pointer;
  text-align: left;
}
.cr-mobile-accordion__caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.cr-mobile-accordion--open .cr-mobile-accordion__caret {
  transform: rotate(-135deg);
}
.cr-mobile-accordion__panel {
  display: none;
  flex-direction: column;
  padding-bottom: 12px;
}
.cr-mobile-accordion--open .cr-mobile-accordion__panel {
  display: flex;
}
.cr-mobile-nav__link {
  text-decoration: none;
  padding: 10px 0 10px 12px;
  border-left: 2px solid var(--line);
}
.cr-mobile-nav__link.is-active {
  border-left-color: var(--orange);
}
.cr-mobile-nav__link-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.cr-mobile-nav__link-desc {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.cr-mobile-nav__lang {
  margin: 24px 0 0;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .cr-nav-cluster,
  .cr-web-header .cr-lang-switch {
    display: none;
  }
  .cr-hamburger {
    display: flex;
  }
}

/* Rigid 2-up grids used across several pages (contact cards, spec pairs, etc.)
   — these had no responsive fallback at all and were forcing the whole page
   wider than the viewport on mobile, causing horizontal scroll. */
.cr-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
/* conclusion-contact.html and phygital-hardware.html originally used a slightly
   tighter spacing (14px gap, 4px top margin) — kept exactly so desktop is unchanged. */
.cr-two-col-grid--tight {
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .cr-two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* Comparison table (phygital-hardware.html): cell content doesn't wrap enough
   to fit a narrow screen and was forcing the whole page wider. Scope the
   scroll to the table itself instead, so only the table scrolls sideways
   while the rest of the page stays put. */
.cr-table-scroll {
  width: 100%;
  overflow-x: auto;
}

/* Same rigid-grid problem as .cr-two-col-grid, but a 3-column variant found
   on user-flows.html — collapses to 1 column on phones, 2 on small tablets. */
.cr-three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
@media (max-width: 700px) {
  .cr-three-col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .cr-three-col-grid {
    grid-template-columns: 1fr;
  }
}

/* App Anatomy hub (app-anatomy-v2.html): these 12 pillar screenshots have no
   sizing rule of their own and render at their natural ~794px width. That is
   the intended desktop look, so this rule must NOT resize them — it only stops
   them from ever being wider than their card (narrow screens), via max-width.
   (An earlier version forced width:100% here, which also enlarged them on
   desktop; do not reintroduce that.) */
.cr-anatomy-thumb img {
  max-width: 100%;
  height: auto;
}

/* Docked audio player: the normal single-row layout (play button, title, time,
   progress, speed, close) has no room to breathe at mobile widths — the title
   was getting truncated to a couple of characters. Stack it into two rows:
   title gets its own full-width line, controls sit below it. */
@media (max-width: 640px) {
  .cr-audio-widget-container[data-state="docked"] .cr-audio-card {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .cr-audio-widget-container[data-state="docked"] .cr-audio-top-row {
    flex: 1 1 100%;
  }
  .cr-audio-widget-container[data-state="docked"] .cr-audio-title {
    white-space: normal;
  }
  .cr-audio-widget-container[data-state="docked"] .cr-audio-controls-row {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .cr-audio-widget-container[data-state="docked"] .cr-audio-progress-rail {
    flex: 1;
    width: auto;
  }
}

/* ===== App Anatomy on small screens and zoomed-in windows ===== */
/* The screenshot panel is moved under the selected item by src/anatomy-layout.js, so each item opens its own
   screenshot in place. This gives the panel a real size: the frame was width:auto with only absolutely
   positioned contents, centred in a flex column, which collapsed it to nothing below 900px. */
@media (max-width: 900px) {
  .shot-col {
    height: auto;
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    margin: 14px 0 22px;
  }
  .shot-frame {
    width: 100%;
    height: auto;          /* the height now follows from the width and the 794:1662 aspect ratio */
    max-width: 380px;
  }
  /* items move when the panel does; src/anatomy-layout.js keeps the tapped item in place by hand */
  .dock-list {
    overflow-anchor: none;
  }
}

/* The quiet note that replaced the full-screen "larger screen" message: it only appears on small screens
   and never blocks anything. */
.cr-small-screen-note {
  display: none;
}
@media (max-width: 900px) {
  .cr-small-screen-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 20px 0 0;
    padding: 12px 14px;
    max-width: 620px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cr-small-screen-note > span {
    min-width: 0;
    flex: 1 1 200px;
  }
  .cr-small-screen-note__copy {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 14px;
    background: transparent;
    color: var(--orange);
    border: 1px solid var(--orange-line);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
}

/* Footer on phones: one column, like every other block. Phones only —
   at larger widths the footer keeps its original column behaviour. */
@media (max-width: 600px) {
  .cr-sitemap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Title + badge rows inside the cards on user-flows.html: allow them to wrap on small
   screens (a long title plus its pill pushed the page wider than the screen).
   Phones/small tablets only — on desktop these rows keep their original layout exactly. */
@media (max-width: 700px) {
  .cr-head-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===== Video library: play inside the card on small screens (intro.html) ===== */
/* The cards used to be <button>s; as <div role="button"> they keep a button's default line height. */
.cr-video-card { line-height: normal; }
.cr-video-card__thumb { position: relative; }
.cr-video-card__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #000;
  object-fit: contain;
}
.cr-video-card__error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-2);
  pointer-events: none;
}
/* the lift-on-hover would make a playing card jump under a thumb */
.cr-video-card.is-playing-inline:hover { transform: none; }

/* ===== Annotation arrows on the App Anatomy screenshots ===== */
/* One place to change how every arrow looks. The arrows are drawn by each anatomy page with
   their old yellow written into the SVG itself; a stylesheet rule outranks that, so these
   rules restyle all of them without touching the pages. */
:root {
  --anno-arrow-fill: #E3E6EB;        /* pale neutral grey: can't be mistaken for a product colour or for a link */
  --anno-arrow-outline: #0B0D12;     /* near-black keyline: what keeps the arrow readable on yellow bars and white panels */
  --anno-arrow-outline-width: 3;     /* painted behind the fill (see paint-order), so about half of it shows outside the shape */
}
#markerLayer svg polygon,
.marker-el svg polygon,
.arrow-rotator svg polygon {
  fill: var(--anno-arrow-fill);
  stroke: var(--anno-arrow-outline);
  stroke-width: var(--anno-arrow-outline-width);
  paint-order: stroke fill;
  stroke-linejoin: round;
}
/* the arrow touches the corners of its box, so let its outline extend past the edge instead of being clipped */
#markerLayer svg,
.marker-el svg,
.arrow-rotator svg {
  overflow: visible;
}
/* The placement tool's crosshair cursor and click-capturing were left on in the published pages:
   visitors saw a crosshair over the screenshot, which suggests you can draw on it. */
#markerLayer.placing {
  cursor: default;
  pointer-events: none;
}

/* ===== Accessibility: text contrast (WCAG 2.2 AA, 1.4.3 — 4.5:1 for normal text) ===== */
:root {
  --crimson-text: #EF4444;   /* red for TEXT on the dark surfaces; the stock --crimson is 4.3:1 on black */
}
/* user-flows.html colour legend: "Guardian Crimson" is written in crimson. The words come from the
   translation text with the colour inside it, so this overrides it here without touching the language files. */
[data-i18n-html="flows.ch1.color4"] strong {
  color: var(--crimson-text) !important;
}
/* App Anatomy hub cards: the card is a link and had no colours of its own, so its label, title and
   description showed in the browser's default link blue, underlined (about 2:1 on near-black).
   Given the site's standard label colours instead. Colours only — sizes and layout are untouched. */
.cr-anatomy-card {
  color: var(--ink);
  text-decoration: none;
}
.cr-anatomy-num {
  color: var(--orange);
}
.cr-anatomy-title {
  color: var(--ink);
  /* these are h2 now (they sit directly under the page's h1) but keep the h3 size they always had */
  font-size: 1.17em;
}
.cr-anatomy-hook {
  color: var(--ink-2);
}

/* ===== Accessibility: page structure (WCAG 2.2 AA — 2.4.1 Bypass Blocks) ===== */
/* Skip link: first thing a keyboard user reaches; hidden off-screen until it has focus. */
.cr-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 20000;
  padding: 12px 18px;
  background: var(--orange);
  color: #000;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 8px;
  transform: translateY(-200%);
}
.cr-skip-link:focus {
  transform: none;
  outline: 3px solid #fff;
  outline-offset: 2px;
}
/* The skip link lands focus on <main>. It isn't a control, so it gets no ring when focus arrives there. */
#main:focus {
  outline: none;
}

/* ===== Accessibility: keyboard focus (WCAG 2.2 AA — 2.4.7 Focus Visible) ===== */
/* One ring for every control: 3px signal yellow (15:1 on the dark surfaces), set off by a 2px gap so it also
   separates from the yellow buttons. :where() keeps this easy to override for a specific component. */
:where(a, button, summary, input, select, textarea, [role="button"], [role="slider"], [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
/* keyboard focus on the reopen pill looks like hovering it */
.cr-audio-retrigger:focus-visible {
  background: rgba(12, 15, 22, 0.92);
  border-color: var(--orange-line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
}
.cr-audio-retrigger:focus-visible .cr-audio-retrigger__label {
  color: #ffffff;
}

/* ===== Accessibility: text that is read out but not shown (the announcement region) ===== */
.cr-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Step 5: transcripts, video descriptions, reduced motion ===== */
/* the "Read the transcript" link lives in the audio card, only while the card sits in the page (not in the small docked pill) */
.cr-audio-transcript-link { display: none; }
.cr-audio-widget-container[data-state="inline"] .cr-audio-transcript-link {
  display: inline-flex; align-items: center; min-height: 24px; margin-top: 10px; padding: 2px 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue); text-decoration: underline; text-underline-offset: 3px;
}
.cr-audio-widget-container[data-state="inline"] .cr-audio-transcript-link:hover { color: var(--ink); }

/* transcript panel at the end of each audio page */
/* Fix 1 (design pass): tighter gaps around the transcript panel. Above it there are also 36px of space under the
   Memory Anchor card, so 12px here makes 48px in total; below it, 32px to the footer. This rule no longer follows the
   shared --section-rhythm value, which stays untouched for every other section. */
.cr-transcript-wrap { margin-top: 12px; margin-bottom: 32px; }
.cr-transcript { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); scroll-margin-top: 96px; }
.cr-transcript__summary,
.cr-video-text__item > summary {
  display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none;
}
.cr-transcript__summary::-webkit-details-marker,
.cr-video-text__item > summary::-webkit-details-marker { display: none; }
.cr-transcript__summary::before,
.cr-video-text__item > summary::before {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.cr-transcript[open] > .cr-transcript__summary::before,
.cr-video-text__item[open] > summary::before { transform: rotate(45deg); }
.cr-transcript__summary {
  padding: 0 20px; font-family: var(--font-mono); font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange);
}
.cr-transcript__body { padding: 4px 20px 22px; max-width: 72ch; }
.cr-transcript__body p { margin: 0 0 1em; font-size: 16px; line-height: 1.75; color: var(--ink-body); }
.cr-transcript__body p:last-child { margin-bottom: 0; }

/* "what happens in each video" on the intro page */
.cr-video-text { margin-top: var(--section-rhythm); }
.cr-video-text__list { border-top: 1px solid var(--line); }
.cr-video-text__item { border-bottom: 1px solid var(--line); }
.cr-video-text__item > summary { font-size: 15px; font-weight: 600; color: var(--ink-body); }
.cr-video-text__body { padding: 0 0 18px 20px; max-width: 72ch; }
.cr-video-text__body p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--ink-body); }
.cr-video-text__body p:last-child { margin-bottom: 0; }
.cr-video-text__body strong {
  display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue);
}

@media (max-width: 600px) {
  .cr-transcript__summary { padding: 0 16px; }
  .cr-transcript__body { padding: 4px 16px 20px; }
}

/* people who asked their device for less motion: no smooth scrolling, no looping or long animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .cr-transcript__summary::before, .cr-video-text__item > summary::before { transition: none; }
}

/* ===== Step 6: accessibility statement ===== */
/* one column of readable width instead of the story + visual grid */
.cr-editorial-block--single { grid-template-columns: minmax(0, 760px); }
.cr-a11y-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-a11y-list li {
  position: relative; min-width: 0; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--ink-body);
  overflow-wrap: anywhere; word-break: break-word;
}
.cr-a11y-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }
.cr-a11y-list strong { color: var(--ink); }
.cr-a11y-gaps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cr-a11y-gap { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.cr-a11y-gap__ref {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange);
  overflow-wrap: anywhere; word-break: break-word;
}
.cr-a11y-gap__title { margin: 6px 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
.cr-a11y-gap p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-body); overflow-wrap: anywhere; word-break: break-word; }
.cr-a11y-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; word-break: break-word; }
.cr-a11y-prose a:hover { color: var(--ink); }
.cr-a11y-date { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 600px) { .cr-a11y-gap { padding: 16px; } }

/* ===== Step 7: the audio card title wraps instead of being cut off (WCAG 1.4.12 text spacing) ===== */
.cr-audio-widget-container[data-state="inline"] .cr-audio-meta { min-width: 0; }
.cr-audio-widget-container[data-state="inline"] .cr-audio-title {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word;
}

/* index.html draws part of its diagram with this colour (it was never defined, so that text and those outlines were invisible).
   Same coral as the fills already used in that diagram: rgb(224, 87, 62). */
:root { --coral: #E0573E; }

/* ===== Step 8: one caption look under every image =====
   Left-aligned. The yellow tag, one normal space, then the copy. The same everywhere: in the card bar and under a bare image. */
.cr-feature-break__bar { display: block; text-align: left; font-size: 12px; line-height: 1.55; }
.cr-feature-caption { text-align: left; overflow-wrap: anywhere; word-break: break-word; }
.cr-feature-tag { overflow-wrap: anywhere; word-break: break-word; }
.cr-figcap { margin: 14px 0 0; text-align: left; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }

/* the call-to-action bar on the home page is not an image caption: it keeps its original layout (tag left, link at the right edge) */
.cr-feature-break__bar--cta { display: flex; justify-content: space-between; align-items: center; font-size: inherit; line-height: normal; }

/* ===== Step 9: very narrow screens (320px, WCAG 1.4.10 reflow), found once the real fonts were loaded ===== */
/* a 1fr column cannot shrink below its content; minmax(0, 1fr) can, and the cards may wrap their own text */
.cr-subgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-subcard { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* a very long word in a big headline breaks only if it would otherwise push the page wider than the screen */
.cr-hero-headline { overflow-wrap: break-word; }
/* cards are one column on every phone: there is no room for two */
@media (max-width: 600px) {
  .cr-subgrid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .cr-hero-headline { font-size: 2rem; }
}

/* a link that jumps to a chapter must not leave its title hidden under the sticky header */
#frameworks { scroll-margin-top: 96px; }

/* ===== Step 10: a long address or code string inside a card must be able to break, not push the page wider (320px reflow) ===== */
main code { overflow-wrap: anywhere; word-break: break-word; }

/* ===== Step 11: the four-gateway diagram (chapter 1 of the contact page). Live text, so it reflows and translates. ===== */
.cr-gw-map { margin: 26px 0 0; container-type: inline-size; container-name: crgw; min-width: 0; }
.cr-gw-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "citizen" "sentinel" "beacon" "aTop" "core" "aBottom" "guardian"; }
.cr-gw-node { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; word-break: break-word; }
.cr-gw-node--citizen { border-left-color: var(--green); } .cr-gw-node--sentinel { border-left-color: var(--blue); } .cr-gw-node--beacon { border-left-color: var(--amber); } .cr-gw-node--guardian { border-left-color: var(--orange); }
.cr-gw-node--core { background: var(--surface-2); border-left-color: rgba(255, 255, 255, 0.22); text-align: center; align-items: center; }
.cr-gw-title { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
.cr-gw-sub { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; word-break: break-word; }
.cr-gw-arrow { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 18px; line-height: 1; color: var(--ink-3); }
.cr-gw-arrow--left, .cr-gw-arrow--right { display: none; }
.cr-gw-map .cr-figcap { margin-top: 12px; }
@container crgw (min-width: 480px) {
  .cr-gw-grid { gap: 6px; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.1fr) 26px minmax(0, 1fr); grid-template-areas: ". . citizen . ." ". . aTop . ." "sentinel aLeft core aRight beacon" ". . aBottom . ." ". . guardian . ."; }
  .cr-gw-arrow--left, .cr-gw-arrow--right { display: flex; }
  .cr-gw-node { align-items: flex-start; }
  .cr-gw-node--core { align-items: center; }
}

/* ===== Step 12: two variables the stylesheet already used but never defined. They hold exactly the
   fallback values the browser was already using, so nothing changes visually; they can be pointed at the
   site's own font and surface tokens later if a slightly different look is wanted. ===== */
:root { --mono: monospace; --surface-1: #111; }

/* ===== App Anatomy on small screens: list (hub) and detail (numbered pages) ===== */
/* The hub (app-anatomy-v2.html) becomes a list of cards with only a label, title and description: the long device
   pictures are hidden on small screens (they stay on a wide screen). Each numbered page keeps its own layout and
   gets a "< All screens" bar at the top that returns to the hub. */
.cr-anat-back { display: none; }
/* space between the hub cards (they were touching); applies at every width */
.cr-anatomy-grid { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) {
  .cr-anatomy-thumb { display: none; }
  .cr-anatomy-card { padding-top: 20px; }
  .cr-anatomy-title, .cr-anatomy-hook { overflow-wrap: anywhere; word-break: break-word; }
  .cr-anat-back {
    display: block; position: sticky; top: 70px; z-index: 30;
    margin: 0 0 8px; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .cr-anat-back__link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px;
    color: var(--orange); border: 1.5px solid var(--orange-line); border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600; text-decoration: none;
  }
  .cr-anat-back__link:hover { background: var(--orange-dim); }
}

/* Contact page: the email address is a real mail link, and #connect lands on the contact details */
.cr-contact-mail a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; word-break: break-word; }
.cr-contact-mail a:hover { color: var(--ink); }
.cr-contact-mail a code { color: inherit; overflow-wrap: anywhere; word-break: break-word; }
#connect { scroll-margin-top: 150px; }