/* ============================================================
   CoreCMO — Brand CSS
   v1.0 · May 2026
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: "Jost";
  src: url("./fonts/Jost.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("./fonts/Mulish.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Color */
  --navy-900: #0B1A3A;
  --navy-800: #112A55;
  --navy-700: #1A3A6E;
  --navy-600: #264B85;
  --navy-100: #D9E1EE;
  --navy-050: #EEF2F8;
  --magenta-600: #B01A5C;
  --magenta-500: #D4216C;
  --magenta-400: #E94B8A;
  --magenta-050: #FCE7EF;
  --ink: #000000;
  --slate: #6B6B6B;
  --graphite: #2A2F3A;
  --paper: #FBFAF6;
  --cream: #F7F5F0;
  --fog: #EDEFF3;
  --pearl: #D8DDE5;
  --mist: #8A94A8;
  --white: #FFFFFF;

  /* Type */
  --font-display: "Jost", -apple-system, sans-serif;
  --font-body: "Mulish", -apple-system, sans-serif;
  --font-condensed: "Barlow Condensed", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale (em) */
  --size-display-xl: clamp(2.5rem, 6vw, 4.5rem);
  --size-display-l: clamp(2rem, 4.5vw, 3.25rem);
  --size-h1: clamp(1.75rem, 3vw, 2.5rem);
  --size-h2: 1.625rem;
  --size-h3: 1.125rem;
  --size-body: 1.0625rem;
  --size-small: 0.8125rem;
  --size-eyebrow: 0.75rem;

  /* Spacing */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max-w-prose: 38rem;
  --max-w-content: 56rem;
  --max-w-page: 72rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- Layout shells ---- */
.shell {
  max-width: var(--max-w-page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell--content {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell--prose {
  max-width: var(--max-w-prose);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header bar ---- */
.brand-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--pearl);
  padding: 1rem 0;
}
.brand-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--navy-800);
  text-transform: uppercase;
}
.brand-mark::before {
  content: "●";
  color: var(--magenta-500);
  font-size: 0.9rem;
}
.brand-nav {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.brand-nav a {
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate);
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.2s var(--ease-out);
}
.brand-nav a:hover { color: var(--ink); }
.brand-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--magenta-500);
  transition: right 0.3s var(--ease-out);
}
.brand-nav a:hover::after { right: 0; }
.brand-nav a[aria-current="page"] { color: var(--ink); }
.brand-nav a[aria-current="page"]::after { right: 0; }

/* ---- Nav dropdown (playbook → all 18 modules) ---- */
.brand-nav__item {
  position: relative;
}
.brand-nav__item--has-dropdown > a::after { display: none; }
.brand-nav__item--has-dropdown > .brand-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.brand-nav__trigger-caret {
  font-size: 0.7em;
  color: var(--magenta-500);
  transition: transform 0.2s var(--ease-out);
}
.brand-nav__item--has-dropdown:hover .brand-nav__trigger-caret,
.brand-nav__item--has-dropdown[data-open="true"] .brand-nav__trigger-caret {
  transform: rotate(180deg);
}
.brand-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--pearl);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  width: 620px;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 24px 64px -24px rgba(17, 42, 85, 0.25);
  display: none;
  z-index: 60;
}
/* Hover bridge — a transparent pseudo-element on the dropdown that fills
   the visual gap between the trigger and the dropdown panel so the cursor
   can cross down to the menu items without losing the hover state. */
.brand-nav__dropdown::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  height: 1rem;
  background: transparent;
  pointer-events: auto;
}
/* Extend the parent's hit area down to fully cover the gap. The negative
   margin keeps the visual layout unchanged. */
.brand-nav__item--has-dropdown {
  padding-bottom: 1rem;
  margin-bottom: -1rem;
}
.brand-nav__item--has-dropdown:hover .brand-nav__dropdown,
.brand-nav__item--has-dropdown:focus-within .brand-nav__dropdown,
.brand-nav__item--has-dropdown[data-open="true"] .brand-nav__dropdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}
.brand-nav__dropdown__group {
  break-inside: avoid;
}
.brand-nav__dropdown__group + .brand-nav__dropdown__group { margin-top: 0.5rem; }
.brand-nav__dropdown h5 {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--pearl);
  padding-bottom: 0.35rem;
}
.brand-nav__dropdown a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--slate);
}
.brand-nav__dropdown a::after { display: none !important; }
.brand-nav__dropdown a:hover { color: var(--ink); }
.brand-nav__dropdown a .module-id {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--magenta-500);
  flex: 0 0 2rem;
}
.brand-nav__dropdown__footer {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pearl);
  text-align: center;
}
.brand-nav__dropdown__footer a {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
  display: inline-block;
}
.brand-nav__dropdown__footer a::after {
  content: " →";
  transition: margin 0.2s var(--ease-out);
}
.brand-nav__dropdown__footer a:hover::after { margin-left: 4px; }

/* Mobile: dropdown collapses to inline-block list */
@media (max-width: 720px) {
  .brand-nav { gap: 0.75rem 1rem; }
  .brand-nav__item--has-dropdown:hover .brand-nav__dropdown,
  .brand-nav__item--has-dropdown[data-open="true"] .brand-nav__dropdown {
    position: static;
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0.75rem 0 0;
    grid-template-columns: 1fr;
  }
}

/* ---- Previous / Next module nav (bottom of every module page) ---- */
.module-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid var(--pearl);
  padding-top: 2rem;
  margin: 4rem 0 0;
}
.module-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border-radius: 2px;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.module-nav__link:hover {
  background: var(--magenta-050);
  transform: translateY(-1px);
}
.module-nav__link[data-empty="true"] {
  visibility: hidden;
}
.module-nav__link--next { text-align: right; }
.module-nav__direction {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
}
.module-nav__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

/* ---- Locked-preview banner on teaser pages ---- */
.locked-banner {
  background: var(--cream);
  border-left: 3px solid var(--magenta-500);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.locked-banner p {
  margin: 0;
  flex: 1 1 280px;
  color: var(--ink);
  font-weight: 500;
}
.locked-banner .btn { flex-shrink: 0; }

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--font-condensed);
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.eyebrow--signature { color: var(--magenta-500); }

.emdash {
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  margin: 0.75rem 0 1.5rem;
  border: 0;
}
.emdash--signature { background: var(--magenta-500); }

.display-xl, .display-l, h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.display-xl {
  font-size: var(--size-display-xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.display-l {
  font-size: var(--size-display-l);
  line-height: 1.05;
}
h1 { font-size: var(--size-h1); line-height: 1.15; }
h2 { font-size: var(--size-h2); line-height: 1.25; margin-top: 2.5rem; }
h3 {
  font-size: var(--size-h3);
  line-height: 1.35;
  margin-top: 2rem;
  letter-spacing: 0.01em;
}
p { margin: 0 0 1.25rem; }
p, li { color: var(--slate); }
strong { color: var(--ink); font-weight: 600; }

.lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 1.5rem;
}

ul { padding-left: 0; list-style: none; margin: 0 0 1.5rem; }
ul li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.5rem;
  line-height: 1.55;
}
ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--magenta-500);
  font-weight: 700;
}

/* ---- Callout ---- */
.callout {
  background: var(--cream);
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0;
  border-radius: 2px;
}
.callout--signature { background: var(--magenta-050); }
.callout > .eyebrow { margin-bottom: 0.75rem; }
.callout > p:last-child { margin-bottom: 0; }
.callout > ul li::before { color: var(--ink); }
.callout--signature > .eyebrow { color: var(--magenta-500); }

/* ---- Contingency callout — the "this advice is conditional" pattern ---- */
.callout--contingency {
  background: var(--paper);
  border: 1px solid var(--navy-100);
  border-left: 4px solid var(--navy-700);
  padding: 1.5rem 1.75rem;
}
.callout--contingency > .eyebrow {
  color: var(--navy-700);
  letter-spacing: 0.14em;
}
.callout--contingency table.data-table {
  margin: 1rem 0;
}
.callout--contingency p strong:first-child {
  color: var(--navy-700);
}

/* ---- CFO callout — navy gravitas, white text, magenta accent ----
   Used where the message carries budget-defense / CFO weight and the
   light-magenta signature callout reads too soft for the gravity. */
.callout--cfo {
  background: var(--navy-700, #0f172a);
  color: white;
  border: 0;
  border-left: 4px solid var(--magenta-500);
  border-radius: 0 8px 8px 0;
  padding: 1.5rem 1.75rem;
}
.callout--cfo > .eyebrow,
.callout--cfo .eyebrow {
  color: var(--magenta-500);
  letter-spacing: 0.14em;
}
.callout--cfo p,
.callout--cfo li {
  color: rgba(255, 255, 255, 0.92);
}
.callout--cfo strong {
  color: white;
}
.callout--cfo a {
  color: var(--magenta-050, #FCE7EF);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}
.callout--cfo > p:last-child {
  margin-bottom: 0;
}

/* ---- Pull quote ---- */
.pull {
  border-left: 3px solid var(--magenta-500);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 2rem 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ---- Buttons / CTAs ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  transition: all 0.2s var(--ease-out);
}
.btn--primary {
  background: var(--magenta-500);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--magenta-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(212, 33, 108, 0.4);
}
.btn--secondary {
  background: transparent;
  color: var(--navy-800);
  border: 1.5px solid var(--navy-800);
}
.btn--secondary:hover {
  background: var(--navy-800);
  color: var(--white);
}
.btn--ghost {
  background: transparent;
  color: var(--slate);
  padding: 0.5rem 0;
}
.btn--ghost::after {
  content: "→";
  transition: transform 0.2s var(--ease-out);
}
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover::after { transform: translateX(4px); }

/* ---- Module cards ---- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.module-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  padding: 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.25s var(--ease-out);
  border: 1px solid transparent;
  min-height: 200px;
}
.module-card:hover {
  border-color: var(--magenta-500);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(17, 42, 85, 0.15);
}
.module-card[data-locked="true"] { opacity: 0.55; }
.module-card[data-locked="true"]:hover {
  border-color: var(--pearl);
  transform: none;
  box-shadow: none;
}
.module-card__eyebrow {
  font-family: var(--font-condensed);
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.module-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.5rem 0 0.75rem;
  line-height: 1.2;
}
.module-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.tag--fit-high {
  background: var(--magenta-050);
  color: var(--magenta-600);
}
.tag--fit-med {
  background: var(--navy-050);
  color: var(--navy-800);
}
.tag--fit-low {
  background: var(--fog);
  color: var(--slate);
}
.tag--locked {
  background: var(--pearl);
  color: var(--graphite);
}
.module-card__meta-text {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--slate);
  text-transform: uppercase;
}

/* ---- Code blocks ---- */
.code {
  background: var(--cream);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}
.code-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.5rem;
}
/* ---- Inline placeholder substitution markers ---- */
/* Filled — the user's real value, subtle magenta underline to show provenance */
.placeholder-filled {
  background: var(--magenta-050);
  color: var(--ink);
  border-bottom: 1px dotted var(--magenta-500);
  padding: 0 0.15em;
  border-radius: 1px;
  font-style: normal;
  cursor: help;
}
.placeholder-filled:hover {
  background: var(--magenta-100, #fad3e1);
}

/* Unfilled — bracketed placeholder, dashed amber + hover tooltip pointing
   to the source module where this gets filled in. */
.placeholder-unfilled {
  background: #fff8e6;
  color: #8a6a0e;
  border-bottom: 1px dashed #d4a017;
  padding: 0 0.25em;
  border-radius: 1px;
  font-style: italic;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.placeholder-unfilled:hover {
  background: #ffeec2;
  color: #5a4500;
}
.placeholder-unfilled::after {
  content: attr(data-source-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.375rem 0.625rem;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-out);
  z-index: 100;
}
.placeholder-unfilled:hover::after {
  opacity: 1;
}
.placeholder-unfilled::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 0px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
  z-index: 100;
}
.placeholder-unfilled:hover::before {
  opacity: 1;
}

/* ---- Brief-builder cards (inline interactive Brief inputs in module pages) ---- */
.brief-builder {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  background: var(--paper);
  border: 2px solid var(--magenta-500);
  border-radius: 4px;
  position: relative;
  box-shadow: 0 4px 24px -8px rgba(220, 50, 130, 0.12);
}
.brief-builder::before {
  content: "FILL THIS IN — SAVES TO YOUR BRIEF";
  position: absolute;
  top: -0.6rem;
  left: 1.5rem;
  background: var(--paper);
  padding: 0 0.75rem;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--magenta-500);
}
.brief-builder h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.brief-builder > p {
  margin: 0 0 1.5rem;
  color: var(--slate);
}
.brief-builder__field {
  margin: 1.25rem 0;
}
.brief-builder__field > label {
  display: block;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
  margin-bottom: 0.5rem;
}
.brief-builder__field input[type="text"],
.brief-builder__field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--pearl);
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.brief-builder__field input[type="text"]:focus,
.brief-builder__field textarea:focus {
  outline: none;
  border-color: var(--magenta-500);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--magenta-050);
}
.brief-builder__field input[type="text"]:not(:placeholder-shown),
.brief-builder__field textarea:not(:placeholder-shown) {
  background: var(--paper);
}
.brief-builder__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.brief-builder__voice {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0;
  background: var(--cream);
}
.brief-builder__voice th,
.brief-builder__voice td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pearl);
  vertical-align: top;
  line-height: 1.45;
  font-size: 0.9375rem;
}
.brief-builder__voice thead th {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta-500);
  background: var(--paper);
}
.brief-builder__voice tbody th {
  background: var(--paper);
  color: var(--slate);
  width: 12ch;
}
.brief-builder__voice td[contenteditable] {
  background: var(--cream);
  cursor: text;
  min-height: 1.5em;
}
.brief-builder__voice td[contenteditable]:focus {
  outline: none;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--magenta-500);
}
.brief-builder__voice td[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--slate);
  opacity: 0.55;
  font-style: italic;
}
.brief-builder__hint {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--pearl);
  font-size: 0.875rem;
  color: var(--slate);
}
.brief-builder__hint a {
  color: var(--magenta-500);
  font-weight: 600;
}

/* ---- "Suggest defaults" button (Tier 1 inference) ---- */
.brief-builder__suggest {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.15rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  background: var(--paper);
  color: var(--navy-700);
  border: 1px solid var(--navy-100);
  border-left: 3px solid var(--magenta-500);
  border-radius: 4px;
  font-family: var(--font-eyebrow);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.brief-builder__suggest:hover {
  background: var(--navy-700);
  color: var(--paper);
  border-color: var(--navy-700);
  border-left-color: var(--magenta-500);
  transform: translateY(-1px);
}
.brief-builder__suggest:active { transform: translateY(0); }
.brief-builder__suggest-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.brief-builder__suggest[data-state="empty"] {
  border-left-color: var(--slate);
  color: var(--slate);
}
.brief-builder__suggest[data-state="empty"]:hover {
  background: var(--slate);
  border-color: var(--slate);
}
.brief-builder__suggest[data-state="filled"] {
  border-left-color: var(--navy-700);
}
.brief-builder__field input[data-suggested="true"],
.brief-builder__field textarea[data-suggested="true"] {
  background: linear-gradient(0deg, rgba(228, 0, 124, 0.04), rgba(228, 0, 124, 0.04)), var(--paper);
  border-color: rgba(228, 0, 124, 0.35);
}
.brief-builder__field input[data-suggested="true"]:focus,
.brief-builder__field textarea[data-suggested="true"]:focus {
  background: var(--paper);
}
.brief-builder__voice td[data-suggested="true"] {
  background: linear-gradient(0deg, rgba(228, 0, 124, 0.04), rgba(228, 0, 124, 0.04));
}

/* ---- Brief indicator (bottom-right floating pill) ---- */
.brief-banner {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--navy-100);
  border-left: 3px solid var(--navy-700);
  border-radius: 4px;
  box-shadow: 0 8px 28px -10px rgba(17, 42, 85, 0.25);
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.brief-banner[data-state="empty"] {
  border-left-color: #d4a017;
  background: #fffbf0;
}
.brief-banner__inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.brief-banner__dot {
  width: 7px;
  height: 7px;
  background: var(--navy-700);
  border-radius: 50%;
  flex-shrink: 0;
}
.brief-banner__dot--empty {
  background: #d4a017;
}
.brief-banner__text {
  flex: 1;
  min-width: 0;
}
.brief-banner__link {
  flex-shrink: 0;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-700);
  text-decoration: none;
  border: 1px solid var(--pearl);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  transition: all 0.2s var(--ease-out);
}
.brief-banner__link:hover {
  background: var(--navy-700);
  color: var(--paper);
  border-color: var(--navy-700);
}
.brief-banner code {
  background: rgba(0,0,0,0.05);
  padding: 0.05em 0.3em;
  border-radius: 2px;
  font-size: 0.85em;
}
/* Hide on the brief page itself */
.has-brief-form .brief-banner { display: none; }
/* Make smaller on narrow viewports */
@media (max-width: 720px) {
  .brief-banner {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
    font-size: 0.75rem;
  }
}

/* ---- Brief form inputs (the /brief.html page) ---- */
#brief-form .field {
  margin: 1.25rem 0;
}
#brief-form input[type="text"],
#brief-form select,
#brief-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--pearl);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
#brief-form input[type="text"]:focus,
#brief-form select:focus,
#brief-form textarea:focus {
  outline: none;
  border-color: var(--magenta-500);
  box-shadow: 0 0 0 3px var(--magenta-050);
}
#brief-form label {
  display: block;
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
  margin-bottom: 0.375rem;
}

/* ---- Data tables (multi-row matrices in the framework / spec sections) ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  background: var(--paper);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.75rem 0.875rem;
  vertical-align: top;
  border-bottom: 1px solid var(--pearl);
  line-height: 1.5;
}
.data-table thead th {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta-500);
  background: var(--cream);
  border-bottom: 2px solid var(--magenta-500);
}
.data-table tbody tr:hover {
  background: var(--cream);
}
.data-table strong {
  color: var(--ink);
}

/* ---- Prompt cards (collapsible <details>) ---- */
.prompt-card {
  border: 1px solid var(--pearl);
  border-radius: 4px;
  margin: 1.25rem 0;
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.prompt-card[open] {
  border-color: var(--magenta-300, #f0a8c4);
  box-shadow: 0 4px 16px -8px rgba(17, 42, 85, 0.12);
}
.prompt-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  position: relative;
  user-select: none;
}
.prompt-card > summary::-webkit-details-marker { display: none; }
.prompt-card > summary::after {
  content: "Show prompt";
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
  flex-shrink: 0;
  border: 1px solid var(--pearl);
  padding: 0.375rem 0.75rem;
  border-radius: 2px;
  transition: all 0.2s var(--ease-out);
}
.prompt-card[open] > summary::after {
  content: "Hide";
  background: var(--magenta-500);
  color: var(--paper);
  border-color: var(--magenta-500);
}
.prompt-card > summary:hover::after {
  border-color: var(--magenta-500);
}
.prompt-card__head {
  flex: 1;
  min-width: 0;
}
.prompt-card__id {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-500);
  margin: 0 0 0.25rem;
}
.prompt-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.prompt-card__desc {
  font-size: 0.9375rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.5;
}
.prompt-card__body {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--cream);
  margin-top: -1px;
}
.prompt-card__body > *:first-child { margin-top: 1.25rem; }
.prompt-card__body .code { margin: 0; }

/* ---- Agent install guide (sits at the top of every Agent Spec section) ---- */
.agent-install {
  background: var(--magenta-050);
  border-left: 3px solid var(--magenta-500);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2rem;
  border-radius: 2px;
}
.agent-install p.eyebrow {
  color: var(--magenta-500);
  margin: 0 0 0.5rem;
}
.agent-install h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  color: var(--ink);
}
.agent-install ol {
  margin: 0;
  padding-left: 1.25rem;
}
.agent-install ol > li {
  margin: 0.5rem 0;
  line-height: 1.55;
  color: var(--ink);
}
.agent-install ol > li strong {
  color: var(--magenta-500);
}

.copy-btn {
  background: transparent;
  border: 1px solid var(--pearl);
  padding: 0.375rem 0.75rem;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.copy-btn:hover {
  color: var(--magenta-500);
  border-color: var(--magenta-500);
}
.copy-btn[data-copied="true"] {
  color: var(--magenta-500);
  border-color: var(--magenta-500);
}

/* ---- Footer ---- */
.pillar-bar {
  background: var(--navy-800);
  color: var(--paper);
  padding: 1.25rem 0;
  margin-top: 6rem;
}
.pillar-bar__inner {
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
}
.pillar-bar__inner .dot { color: var(--magenta-400); margin: 0 0.5rem; }

.site-footer {
  background: var(--navy-900);
  color: var(--mist);
  padding: 3rem 0 2rem;
}
.site-footer a { color: var(--paper); transition: color 0.2s var(--ease-out); }
.site-footer a:hover { color: var(--magenta-400); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.site-footer__col h4 {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 1rem;
}
.site-footer__col ul li::before { display: none; }
.site-footer__col ul li { padding-left: 0; }
.site-footer__base {
  border-top: 1px solid var(--graphite);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
}

/* ---- Hero ---- */
.hero {
  padding: 5rem 0 4rem;
}
.hero__eyebrow { margin-bottom: 0.75rem; }
.hero__lead {
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: 36rem;
  margin: 1.5rem 0 2rem;
  font-weight: 400;
}
.hero__signal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 2.5rem;
}
.hero__signal .dot { color: var(--magenta-500); }
.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Section spacing ---- */
.section { padding: 4rem 0; }
.section--tight { padding: 2.5rem 0; }
.section--wide { padding: 6rem 0; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }

.section-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ---- Module page ---- */
.module-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--pearl);
}
.module-hero__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 1rem;
}
.module-section { padding: 2.5rem 0; }

/* ---- Floating "Have a question?" card ---- */
.floating-ask {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  background: var(--paper);
  border: 1px solid var(--pearl);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  max-width: 280px;
  box-shadow: 0 16px 48px -16px rgba(17, 42, 85, 0.2);
  transform: translateY(120%);
  opacity: 0;
  transition: all 0.4s var(--ease-out);
}
.floating-ask[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}
.floating-ask__close {
  position: absolute;
  top: 0.5rem;
  right: 0.625rem;
  background: transparent;
  border: none;
  color: var(--slate);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.floating-ask__close:hover { color: var(--ink); }
.floating-ask p {
  font-size: 0.9375rem;
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}
.floating-ask a {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta-500);
}
.floating-ask a::after {
  content: " →";
  transition: margin 0.2s var(--ease-out);
}
.floating-ask a:hover::after { margin-left: 4px; }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal[data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Form ---- */
.form {
  display: grid;
  gap: 1.25rem;
  max-width: 32rem;
}
.field { display: grid; gap: 0.375rem; }
.field label {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.field input, .field textarea {
  background: var(--paper);
  border: 1.5px solid var(--pearl);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--magenta-500);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  background: var(--paper);
  border: 1.5px solid var(--pearl);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.2s var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23112A55' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field select:focus { outline: none; border-color: var(--magenta-500); }
.field__hint {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
  font-style: italic;
}
.field__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.5rem 1.25rem;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--pearl);
  border-radius: 2px;
}
.field__checks .check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0.15rem 0;
}
.field__checks .check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--magenta-500);
  cursor: pointer;
}

/* ---- Scorecard ---- */
.scorecard {
  background: var(--cream);
  padding: 2rem;
  border-radius: 2px;
  margin: 2rem 0;
}
.scorecard__question {
  padding: 1rem 0;
  border-bottom: 1px solid var(--pearl);
  transition: background 0.3s var(--ease-out), padding 0.2s var(--ease-out);
}
.scorecard__question:last-of-type { border-bottom: none; }
.scorecard__question[data-missing="true"] {
  background: var(--magenta-050);
  padding: 1rem 1rem;
  border-radius: 4px;
  border-left: 3px solid var(--magenta-500);
  animation: scorecard-flash 0.6s var(--ease-out) 2;
}
@keyframes scorecard-flash {
  0% { background: var(--magenta-050); }
  50% { background: var(--magenta-100, #fad3e1); }
  100% { background: var(--magenta-050); }
}
.scorecard__question h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.scorecard__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.scorecard__option {
  flex: 1 1 auto;
  min-width: 120px;
}
.scorecard__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scorecard__option label {
  display: block;
  padding: 0.625rem 0.875rem;
  text-align: center;
  background: var(--paper);
  border: 1.5px solid var(--pearl);
  border-radius: 2px;
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.scorecard__option input[type="radio"]:checked + label {
  background: var(--magenta-500);
  border-color: var(--magenta-500);
  color: var(--white);
}
.scorecard__option label:hover { border-color: var(--magenta-500); color: var(--ink); }
.scorecard__result {
  background: var(--magenta-050);
  padding: 2rem;
  border-radius: 2px;
  margin-top: 2rem;
  display: none;
}
.scorecard__result[data-visible="true"] { display: block; }
.scorecard__result .display-l { margin-top: 0; }
.scorecard__level {
  font-family: var(--font-condensed);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-600);
  font-weight: 700;
}

/* ---- Utility ---- */
.text-center { text-align: center; }
.divider {
  height: 1px;
  background: var(--pearl);
  border: 0;
  margin: 4rem 0;
}
.muted { color: var(--slate); }
.small { font-size: var(--size-small); }


/* ============================================================
   COLOR REBALANCE — shift structural accents from magenta to navy.
   Keeps magenta for emphasis (signature variants), buttons, success
   states, and the brief-banner's "loaded" highlight.
   ============================================================ */

/* Structural labels — navy, not magenta */
.brand-nav__dropdown h5,
.data-table thead th,
.prompt-card__id,
.brief-builder__field > label,
.brief-banner__link,
.module-card__eyebrow,
.agent-spec__h3,
.framework__h2 {
  color: var(--navy-700) !important;
}

/* Data table — navy hierarchy, magenta only for hover */
.data-table thead th {
  background: var(--navy-050);
  border-bottom: 2px solid var(--navy-700) !important;
}

/* Brief-builder — navy frame, magenta only for active focus */
.brief-builder {
  border-color: var(--navy-700);
  box-shadow: 0 4px 24px -8px rgba(17, 42, 85, 0.10);
}
.brief-builder::before {
  color: var(--navy-700);
}

/* The "Show prompt" pill on prompt cards — navy text, magenta on hover */
.prompt-card > summary::after {
  color: var(--navy-700);
  border-color: var(--pearl);
}
.prompt-card > summary:hover::after {
  border-color: var(--magenta-500);
  color: var(--magenta-500);
}
.prompt-card[open] > summary::after {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--paper);
}

/* Open prompt card border — navy not magenta */
.prompt-card[open] {
  border-color: var(--navy-600);
  box-shadow: 0 4px 16px -8px rgba(17, 42, 85, 0.18);
}

/* Brief banner — loaded state turns to navy-bordered cream instead of pink */
.brief-banner {
  background: var(--navy-050);
  border-bottom-color: var(--navy-100);
}
.brief-banner__dot {
  background: var(--navy-700);
}
.brief-banner__link {
  border-color: var(--navy-700);
  color: var(--navy-700);
}
.brief-banner__link:hover {
  background: var(--navy-700);
  color: var(--paper);
}
/* Empty/unfilled state stays amber to call attention */

/* Brief-form labels on /brief.html — navy */
#brief-form label {
  color: var(--navy-700);
}

/* Forbidden-language bullets and section em-dashes stay magenta because
   they're the signature accent — but the default ul li::before goes navy
   for visual quietness. */
ul li::before {
  color: var(--navy-700);
}

/* Callout eyebrows — signature stays magenta, default goes navy */
.callout > .eyebrow:not(.eyebrow--signature) {
  color: var(--navy-700);
}

/* Brand-nav caret — navy, not magenta */
.brand-nav__trigger-caret {
  color: var(--navy-700);
}

/* Module-hero meta dots — keep one magenta as accent, rest go navy via inline style on H */


/* ---- Left sidebar module TOC (sticky, on module pages, wide viewports only) ---- */
.module-toc {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--navy-800);
  color: var(--paper);
  padding: 1.75rem 1.25rem 1.5rem;
  overflow-y: auto;
  z-index: 40;
  display: none;
}
@media (min-width: 1280px) {
  .module-toc { display: block; }
  body.has-module-toc { padding-left: 240px; }
}
.module-toc__brand {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-decoration: none;
  display: block;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 1.25rem;
}
.module-toc__brand:hover { color: var(--magenta-400); }
.module-toc__group {
  margin-bottom: 1.25rem;
}
.module-toc__group h6 {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 0.5rem;
}
.module-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 2px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.35;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.module-toc__link:hover {
  background: rgba(255,255,255,0.08);
  color: var(--paper);
}
.module-toc__link[aria-current="page"] {
  background: var(--magenta-500);
  color: var(--paper);
}
.module-toc__link[aria-current="page"] .module-toc__id {
  color: var(--paper);
  opacity: 0.85;
}
.module-toc__id {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--magenta-400);
  flex: 0 0 1.85rem;
  letter-spacing: 0.08em;
}
/* Within-module sub-heading nav — nested under active module entry */
.module-toc__sub {
  display: block;
  margin: 0.4rem 0 0.75rem;
  padding: 0 0 0 0.5rem;
  border-left: 1px solid rgba(255,255,255,0.18);
  margin-left: 1.2rem;
}
.module-toc__sublink {
  display: block;
  padding: 0.22rem 0.6rem;
  margin: 0;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.35;
  border-left: 2px solid transparent;
  margin-left: -0.5rem;
  padding-left: 0.6rem;
  transition: color 0.12s var(--ease-out), border-left-color 0.12s var(--ease-out), background 0.12s var(--ease-out);
}
.module-toc__sublink--h3 {
  padding-left: 1.4rem;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
}
.module-toc__sublink:hover {
  color: var(--paper);
  background: rgba(255,255,255,0.05);
}
.module-toc__sublink--active {
  color: var(--paper);
  border-left-color: var(--magenta-500);
  font-weight: 600;
  background: rgba(228, 0, 124, 0.12);
}
.module-toc__footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.75rem;
}
.module-toc__footer a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
}
.module-toc__footer a:hover { color: var(--paper); }


/* ---- Module TOC — faceted polygonal blue background ---- */
.module-toc {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%20900%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%20%3Crect%20width=%22240%22%20height=%22900%22%20fill=%22%230B1A3A%22/%3E%20%3Cpolygon%20points=%220,0%2090,0%200,140%22%20fill=%22%231A3A6E%22/%3E%20%3Cpolygon%20points=%2290,0%20240,0%20240,80%20140,100%200,140%22%20fill=%22%23112A55%22%20opacity=%220.9%22/%3E%20%3Cpolygon%20points=%220,140%20140,100%20100,230%200,260%22%20fill=%22%23264B85%22%20opacity=%220.85%22/%3E%20%3Cpolygon%20points=%22140,100%20240,80%20240,260%20170,290%20100,230%22%20fill=%22%231A3A6E%22/%3E%20%3Cpolygon%20points=%220,260%20100,230%2070,380%200,420%22%20fill=%22%23112A55%22%20opacity=%220.95%22/%3E%20%3Cpolygon%20points=%22100,230%20170,290%20240,260%20240,420%20180,440%2070,380%22%20fill=%22%23264B85%22%20opacity=%220.7%22/%3E%20%3Cpolygon%20points=%220,420%2070,380%20120,500%2030,560%200,560%22%20fill=%22%231A3A6E%22/%3E%20%3Cpolygon%20points=%2270,380%20180,440%20240,420%20240,560%20150,580%20120,500%22%20fill=%22%23112A55%22%20opacity=%220.9%22/%3E%20%3Cpolygon%20points=%220,560%2030,560%20120,500%2090,680%200,720%22%20fill=%22%23264B85%22%20opacity=%220.8%22/%3E%20%3Cpolygon%20points=%22120,500%20150,580%20240,560%20240,720%20180,740%2090,680%22%20fill=%22%231A3A6E%22/%3E%20%3Cpolygon%20points=%220,720%2090,680%2060,830%200,860%22%20fill=%22%23112A55%22%20opacity=%220.95%22/%3E%20%3Cpolygon%20points=%2290,680%20180,740%20240,720%20240,860%20150,880%2060,830%22%20fill=%22%23264B85%22%20opacity=%220.7%22/%3E%20%3Cpolygon%20points=%220,860%2060,830%200,900%22%20fill=%22%231A3A6E%22/%3E%20%3Cpolygon%20points=%2260,830%20150,880%20240,860%20240,900%200,900%2060,830%22%20fill=%22%23112A55%22/%3E%20%3C/svg%3E")
    center / cover no-repeat,
    var(--navy-900);
}
.module-toc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,26,58,0) 0%, rgba(11,26,58,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
.module-toc > * { position: relative; z-index: 1; }


/* ---- Print styles — for AOS report PDF export + module print ---- */
@media print {
  .brand-bar,
  .module-toc,
  .brief-banner,
  .brand-nav,
  .brand-nav__dropdown,
  .footer,
  .hero__ctas,
  .module-hero__meta,
  .brief-builder__suggest {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .module-hero,
  .module-section,
  .shell--content {
    padding: 0 !important;
    margin: 0 !important;
  }
  a { color: #000 !important; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .callout, .callout--contingency, .callout--signature {
    border: 1px solid #999 !important;
    background: #fff !important;
    page-break-inside: avoid;
  }
  table.data-table { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Placeholder token tinting — so [BRACKETED] reads as "fill this in" ---- */
/* This applies to body prose; suggest-injected fields already get magenta tint */
.module-section__prose code:not(pre code) {
  background: rgba(228, 0, 124, 0.06);
  color: var(--navy-700);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.92em;
}

/* =========================================================
   AGENT SPEC v2 — the canonical 16-section operating doc
   Used for all 35 named agents across the playbook
   Visual hierarchy: 4 groups, 16 sections, callouts + tables
   ========================================================= */

.agent-v2 {
  margin: 2.5rem 0 3rem;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 14px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.agent-v2--canonical {
  border-top: 4px solid #0284c7;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 12%);
}
.agent-v2--orchestration {
  border-top: 4px solid var(--magenta-500, #e4007c);
  background: linear-gradient(180deg, #fff5f7 0%, #ffffff 12%);
}
.agent-v2--specialist {
  border-top: 4px solid var(--navy-700, #1e3a8a);
}

.agent-v2__name {
  font-size: 1.85rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.agent-v2__tagline {
  color: var(--slate, #64748b);
  font-style: italic;
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
}

.agent-v2__group {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--slate-100, #f1f5f9);
}
.agent-v2__group:first-of-type {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}
.agent-v2__group-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta-500, #e4007c);
  margin-bottom: 1rem;
}

.agent-v2__section {
  margin: 1.5rem 0;
}
.agent-v2__section h5 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-700, #334155);
  margin: 0 0 0.65rem;
  font-family: var(--font-mono, monospace);
}
.agent-v2__section > p,
.agent-v2__section > ol,
.agent-v2__section > ul {
  margin: 0.5rem 0;
  line-height: 1.6;
}
.agent-v2__section ol,
.agent-v2__section ul {
  padding-left: 1.4rem;
}
.agent-v2__section li {
  margin-bottom: 0.4rem;
}

.agent-v2__idcard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem 1.5rem;
  background: var(--cream, #faf6f0);
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 8px;
  padding: 1.1rem 1.35rem;
  margin: 0.5rem 0;
}
.agent-v2__idcard__cell strong {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-500, #e4007c);
  margin-bottom: 0.15rem;
  font-family: var(--font-mono, monospace);
}
.agent-v2__idcard__cell span {
  font-size: 0.95rem;
  color: var(--slate-900, #0f172a);
  line-height: 1.4;
}

.agent-v2__mission {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0.5rem 0;
  font-size: 1.02rem;
  line-height: 1.6;
}

.agent-v2__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 0.5rem 0;
}
.agent-v2__kpi {
  background: white;
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 8px;
  padding: 0.95rem 1.1rem;
}
.agent-v2__kpi strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-500, #e4007c);
  margin-bottom: 0.3rem;
}
.agent-v2__kpi span {
  font-size: 0.92rem;
  color: var(--slate-700, #334155);
  line-height: 1.45;
}

/* v1.15.1 — two-tier KPI groups (leading + lagging indicators with subheaders).
   The KPI rewrite splits each agent's KPIs into 2 groups: leading indicators
   the agent controls, and lagging indicators with review triggers. */
.agent-v2__kpi__group,
.agent-v2__kpis + .agent-v2__kpis {
  margin-top: 1rem;
}
.agent-v2__kpi__group h5,
.agent-v2__kpis h5,
.agent-v2__kpi-tier {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta-500);
  margin: 0 0 0.5rem 0;
  padding: 0;
}
.agent-v2__kpi__group .agent-v2__kpi,
.agent-v2__kpis .agent-v2__kpi {
  margin-bottom: 0.5rem;
}

.agent-v2__tasklist {
  counter-reset: tasklist;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.agent-v2__tasklist li {
  counter-increment: tasklist;
  background: white;
  border: 1px solid var(--slate-200, #e5e7eb);
  border-left: 3px solid var(--magenta-500, #e4007c);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  margin-bottom: 0.55rem;
  position: relative;
  font-size: 0.93rem;
  line-height: 1.5;
}
.agent-v2__tasklist li::before {
  content: counter(tasklist, decimal-leading-zero);
  position: absolute;
  left: 0.85rem;
  top: 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--magenta-500, #e4007c);
  letter-spacing: 0.04em;
}
.agent-v2__tasklist .tag-freq {
  display: inline-block;
  background: var(--cream, #faf6f0);
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 12px;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.05em;
  color: var(--navy-700, #1e3a8a);
  margin-right: 0.5rem;
  vertical-align: middle;
  text-transform: uppercase;
}

.agent-v2__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.agent-v2__table th {
  background: var(--cream, #faf6f0);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--magenta-500, #e4007c);
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 2px solid var(--magenta-500, #e4007c);
}
.agent-v2__table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--slate-200, #e5e7eb);
  vertical-align: top;
  line-height: 1.5;
}
.agent-v2__table tr:last-child td { border-bottom: 0; }
.agent-v2__table td code {
  background: rgba(228, 0, 124, 0.07);
  color: var(--navy-700, #1e3a8a);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.85rem;
}

.agent-v2__flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.5rem 0;
}
@media (max-width: 720px) {
  .agent-v2__flow { grid-template-columns: 1fr; }
}
.agent-v2__flow__lane {
  background: white;
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.agent-v2__flow__lane--up { border-top: 3px solid #10b981; }
.agent-v2__flow__lane--down { border-top: 3px solid #6366f1; }
.agent-v2__flow__lane h6 {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.65rem;
  color: var(--slate-700, #334155);
}
.agent-v2__flow__lane ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.agent-v2__flow__lane li {
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--slate-200, #e5e7eb);
  font-size: 0.9rem;
  line-height: 1.45;
}
.agent-v2__flow__lane li:last-child { border-bottom: 0; }
.agent-v2__flow__lane li strong {
  display: block;
  color: var(--magenta-500, #e4007c);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.agent-v2__prompt {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-wrap;
  margin: 0.5rem 0;
  overflow-x: auto;
}
.agent-v2__prompt .pkey {
  color: #f9a8d4;
  font-weight: 700;
}

.agent-v2__maturity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin: 0.5rem 0;
}
.agent-v2__maturity__rung {
  background: white;
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 8px;
  padding: 0.95rem 1.1rem;
  position: relative;
}
.agent-v2__maturity__rung strong {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-500, #e4007c);
  margin-bottom: 0.35rem;
}
.agent-v2__maturity__rung span {
  font-size: 0.88rem;
  color: var(--slate-700, #334155);
  line-height: 1.5;
}

.agent-v2__install {
  background: var(--cream, #faf6f0);
  border: 1px dashed var(--magenta-500, #e4007c);
  border-radius: 8px;
  padding: 1rem 1.35rem;
  margin: 0.5rem 0;
}
.agent-v2__install ol {
  margin: 0;
  padding-left: 1.3rem;
}
.agent-v2__install li {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ============================================================
   v1.11 — sidebar/brand-bar layering + simplified within-module nav
   ============================================================ */

/* v1.11.1 — sidebar starts BELOW the brand-bar (not behind it).
   Brand-bar stays at full viewport width (no full-width hack), and the
   sidebar uses top: var(--brand-bar-h) so it begins at the bottom of the
   sticky header. */
:root {
  --brand-bar-h: 64px;
}
@media (min-width: 1280px) {
  .module-toc {
    top: var(--brand-bar-h);
  }
}

/* Brand-bar layout: keep CoreCMO on the far left and the nav links pushed
   to the right. Prevent wrapping so the top bar never folds. */
.brand-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.brand-nav {
  flex-wrap: nowrap;
  gap: 1.35rem;
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  .brand-nav {
    gap: 1.1rem;
  }
  .brand-nav a {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}

/* Within-module sub-nav: bullet-prefixed list of h2 sections + bottom jumps. */
.module-toc__sublink {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.module-toc__sublink__bullet {
  color: var(--magenta-400);
  opacity: 0.6;
  flex: 0 0 0.6rem;
  font-size: 1rem;
  line-height: 1;
  margin-top: 0.15rem;
}
.module-toc__sublink--active .module-toc__sublink__bullet {
  opacity: 1;
}

/* Bottom-of-sub jumps to Prompts + Agents */
.module-toc__jumps {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(255,255,255,0.18);
  margin-left: -0.5rem;
  padding-left: 0.5rem;
}
.module-toc__jump {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-400);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(228, 0, 124, 0.35);
  border-radius: 3px;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out), border-color 0.12s var(--ease-out);
}
.module-toc__jump:hover {
  background: var(--magenta-500);
  color: var(--paper);
  border-color: var(--magenta-500);
}

/* ============================================================
   v1.12 — Nav restructure: Assessments + About dropdowns,
   Log In + Start Now CTA, uniform no-wrap, hard-left brand
   ============================================================ */

/* No nav-item wraps internally; brand stays hard-left, util group hard-right */
.brand-nav a,
.brand-nav__trigger {
  white-space: nowrap;
}
.brand-mark {
  margin-right: auto;
}

/* v1.13.3 — brand-bar goes full viewport width.
   The site-wide .shell { max-width: 72rem } constraint was centering the
   top nav and creating a dead margin on either side of CoreCMO on wide
   screens. Override here so the brand-bar shell is full-bleed, with just
   a comfortable gutter on left + right. Other .shell containers on the
   page are unaffected. */
.brand-bar .shell {
  max-width: none;
  padding: 0 1.25rem;
}
@media (min-width: 1280px) {
  .brand-bar .shell {
    padding: 0 1.5rem;
  }
}

/* v1.13.4 — brand-bar escapes the sidebar body-padding.
   On pages with the sidebar (body.has-module-toc), body has padding-left:240px
   to make room for the sidebar. The brand-bar inherits that padding as a
   normal block-level child, shoving CoreCMO 240px to the right and out from
   above the sidebar. Counter it with negative margin + width expansion so the
   brand-bar spans the full viewport and CoreCMO lines up with the sidebar's
   actual left edge. */
@media (min-width: 980px) {
  body.has-module-toc .brand-bar {
    margin-left: -240px;
    width: calc(100% + 240px);
  }
}

/* Simple dropdowns (Assessments + About): single column, vertical list */
.brand-nav__dropdown--simple {
  width: 220px;
  display: none;
  padding: 0.75rem 0;
}
.brand-nav__item--has-dropdown:hover .brand-nav__dropdown--simple,
.brand-nav__item--has-dropdown:focus-within .brand-nav__dropdown--simple,
.brand-nav__item--has-dropdown[data-open="true"] .brand-nav__dropdown--simple {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.brand-nav__dropdown--simple a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.brand-nav__dropdown--simple a::after { display: none !important; }
.brand-nav__dropdown--simple a:hover {
  background: var(--cream);
  color: var(--magenta-500);
}
.brand-nav__dropdown--simple a[aria-current="page"] {
  color: var(--magenta-500);
  font-weight: 700;
}

/* Right-side utility cluster: Log In + Start Now CTA */
.brand-nav__util {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: 0.85rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(17, 42, 85, 0.12);
}
.brand-nav__login {
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s var(--ease-out);
}
.brand-nav__login:hover { color: var(--ink); }
.brand-nav__login::after { display: none !important; }

.brand-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  background: var(--magenta-500);
  color: white !important;
  border-radius: 4px;
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s var(--ease-out);
}
.brand-nav__cta:hover { background: #b8005f; color: white !important; }
.brand-nav__cta::after { display: none !important; }

/* Lower sidebar viewport threshold so more pages render it.
   Threshold dropped from 1280 → 980 so virtually every laptop / desktop
   gets the sidebar by default. Force display in case any earlier rule
   set display:none. */
@media (min-width: 980px) {
  body.has-module-toc .module-toc { display: block !important; }
  body.has-module-toc { padding-left: 240px; }
}

/* Narrower viewport: tighten nav further, hide login text, keep CTA */
@media (max-width: 1200px) {
  .brand-nav {
    gap: 0.95rem;
  }
  .brand-nav a,
  .brand-nav__trigger {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  .brand-nav__util {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    gap: 0.6rem;
  }
  .brand-nav__login {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  .brand-nav__cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
}