/* =========================================================
   The Cardinal Source — Design System
   Single source of truth for tokens. Don't override these
   inline; extend new components by composing tokens.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Font loading ---------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Cormorant:ital,wght@1,600;1,700&display=swap');

/* ---------- Design tokens — Light mode (default) ---------- */
:root,
[data-mode="light"] {
  /* Color */
  --bg: #F5F2EC;
  --bg-surface: #FAF8F3;
  --fg: #1B1B1D;
  --fg-muted: #6E6E70;
  --accent: #BE1E2D;
  --accent-soft: rgba(190, 30, 45, 0.08);
  --hairline: #D8D5CE;
  --cursor-color: #BE1E2D;

  /* Typography */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;
  --font-italic: 'Cormorant', Georgia, serif;

  /* Type scale — fixed steps, no in-between */
  --t-display-1: 56px;
  --t-display-2: 40px;
  --t-h1: 28px;
  --t-h2: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 12px;
  --t-micro: 11px;

  /* Line heights */
  --lh-display: 1.15;
  --lh-body: 1.6;
  --lh-mono: 1.4;

  /* Tracking */
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.08em;

  /* Spacing scale (8pt + granular extras) */
  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px;
  --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-96: 96px; --s-128: 128px; --s-192: 192px;

  /* Layout */
  --content-max: 1280px;
  --prose-max: 720px;
  --gutter: clamp(20px, 4vw, 64px);

  /* Motion */
  --duration: 120ms;
  --duration-mode: 200ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Design tokens — Dark mode ---------- */
[data-mode="dark"] {
  --bg: #1A1817;
  --bg-surface: #232120;
  --fg: #F0EDE5;
  --fg-muted: #8E8B83;
  --accent: #E63946;
  --accent-soft: rgba(230, 57, 70, 0.10);
  --hairline: #2C2926;
  --cursor-color: #E63946;
}

/* ---------- Design tokens — Manifesto easter egg (optional) ---------- */
[data-mode="manifesto"] {
  --bg: #BE1E2D;
  --bg-surface: rgba(0, 0, 0, 0.06);
  --fg: #F5F2EC;
  --fg-muted: rgba(245, 242, 236, 0.7);
  --accent: #F5F2EC;
  --accent-soft: rgba(245, 242, 236, 0.10);
  --hairline: rgba(245, 242, 236, 0.20);
  --cursor-color: #F5F2EC;
}

/* ---------- Base ---------- */
html { background: var(--bg); transition: background var(--duration-mode) var(--easing); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  transition: background var(--duration-mode) var(--easing), color var(--duration-mode) var(--easing);
}

/* ---------- Custom cursor ---------- */
/*
 * The cursor matches the brand mark: a small filled red circle
 * with a thin cream cross inside (the simplified favicon variant).
 * Body cursor swaps to a slightly larger version over interactive
 * elements. Text cursors are left to the OS default for readability.
 */
html {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='7' cy='7' r='6' fill='%23BE1E2D'/><rect x='6.25' y='2.5' width='1.5' height='9' fill='%23F5F2EC'/><rect x='2.5' y='6.25' width='9' height='1.5' fill='%23F5F2EC'/></svg>") 7 7, auto;
}
a, button, [role="button"], input[type="submit"], input[type="button"], select, summary, .interactive {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='%23BE1E2D'/><rect x='9' y='3' width='2' height='14' fill='%23F5F2EC'/><rect x='3' y='9' width='14' height='2' fill='%23F5F2EC'/></svg>") 10 10, pointer;
}
[data-mode="dark"] html { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='7' cy='7' r='6' fill='%23E63946'/><rect x='6.25' y='2.5' width='1.5' height='9' fill='%23F0EDE5'/><rect x='2.5' y='6.25' width='9' height='1.5' fill='%23F0EDE5'/></svg>") 7 7, auto; }
input, textarea, p, h1, h2, h3, h4, h5, h6, li, span, td, dd, dt, blockquote {
  cursor: text;
}
@media (hover: none) { html, body { cursor: auto; } }

/* ---------- Typography primitives ---------- */
.display-1, .display-2, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
.display-1 { font-size: var(--t-display-1); }
.display-2 { font-size: var(--t-display-2); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-body); letter-spacing: var(--tracking-body); font-weight: 600; font-family: var(--font-body); }
.lead { font-size: var(--t-body); color: var(--fg-muted); max-width: 60ch; }
.mono, .label, .meta { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }

/* ---------- Layout primitives ---------- */
.container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.prose { max-width: var(--prose-max); }
.section { padding: var(--s-96) 0; border-top: 1px solid var(--hairline); }
.section:first-of-type { border-top: none; }
.stack-12 > * + * { margin-top: var(--s-12); }
.stack-16 > * + * { margin-top: var(--s-16); }
.stack-24 > * + * { margin-top: var(--s-24); }
.stack-32 > * + * { margin-top: var(--s-32); }
.stack-48 > * + * { margin-top: var(--s-48); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--s-16) var(--gutter); max-width: var(--content-max); margin: 0 auto; gap: var(--s-24); }
.nav__brand { display: flex; align-items: center; gap: var(--s-12); }
.nav__brand-mark { width: 32px; height: 32px; }
.nav__brand-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: var(--tracking-display); color: var(--fg); }
.nav__brand-wordmark .the { font-size: 13px; opacity: 0.6; margin-right: 2px; vertical-align: 4px; }
.nav__links { display: flex; gap: var(--s-32); align-items: center; }
.nav__link { font-size: var(--t-small); color: var(--fg-muted); transition: color var(--duration) var(--easing); }
.nav__link:hover { color: var(--fg); }
.nav__cta { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--accent); color: var(--bg); padding: 10px 18px; border-radius: 0; transition: background var(--duration) var(--easing); }
.nav__cta:hover { background: var(--fg); }
.nav__mode { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--hairline); }
.nav__mode-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 6px 10px; color: var(--fg-muted); }
.nav__mode-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__mode { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: var(--s-128) 0 var(--s-96); }
.hero__kicker { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-16); }
.hero__headline { font-size: clamp(40px, 5vw, var(--t-display-1)); max-width: 22ch; margin-bottom: var(--s-24); }
.hero__dek { font-size: var(--t-h2); color: var(--fg-muted); max-width: 56ch; line-height: 1.45; }
.hero__updated { margin-top: var(--s-32); font-family: var(--font-mono); font-size: var(--t-micro); color: var(--fg-muted); }

/* ---------- Featured article unit ---------- */
.featured { display: grid; grid-template-columns: 1fr; gap: var(--s-48); padding-top: var(--s-96); }
@media (min-width: 880px) { .featured { grid-template-columns: 7fr 5fr; gap: var(--s-96); } }
.featured__meta { display: flex; gap: var(--s-12); align-items: center; }
.featured__tag { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); padding: 4px 8px; border: 1px solid var(--accent); }
.featured__headline { font-size: var(--t-display-2); margin: var(--s-16) 0 var(--s-16); max-width: 22ch; }
.featured__dek { font-size: var(--t-body); color: var(--fg-muted); }
.featured__byline { margin-top: var(--s-24); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.featured__byline em { color: var(--fg); font-style: normal; }
.featured__cta { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: var(--s-24); font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ---------- Article grid ---------- */
.articles { display: grid; grid-template-columns: 1fr; gap: var(--s-32); padding-top: var(--s-48); }
@media (min-width: 600px) { .articles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .articles { grid-template-columns: 1fr 1fr 1fr; } }
.article-card { padding-top: var(--s-24); border-top: 1px solid var(--hairline); }
.article-card__meta { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-12); }
.article-card__meta strong { color: var(--accent); }
.article-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.25; margin-bottom: var(--s-12); }
.article-card__excerpt { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.55; }
.article-card__date { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--fg-muted); margin-top: var(--s-16); display: block; }

/* ---------- Outcome strip ---------- */
.outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-48); margin-top: var(--s-48); }
@media (min-width: 760px) { .outcomes { grid-template-columns: repeat(4, 1fr); } }
.outcome { padding-top: var(--s-16); border-top: 2px solid var(--accent); }
.outcome__number { font-family: var(--font-display); font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: var(--tracking-display); color: var(--fg); margin-bottom: var(--s-12); }
.outcome__label { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); margin-bottom: var(--s-4); }
.outcome__context { font-size: var(--t-caption); color: var(--fg-muted); }

/* ---------- Cardinal Method timeline ---------- */
.method { padding-top: var(--s-48); }
.method__intro { max-width: 60ch; margin-bottom: var(--s-48); }
.method__steps { display: grid; grid-template-columns: 1fr; gap: var(--s-24); position: relative; }
@media (min-width: 760px) { .method__steps { grid-template-columns: repeat(5, 1fr); gap: var(--s-16); } }
.method__step { padding: var(--s-24); border: 1px solid var(--hairline); background: var(--bg-surface); }
.method__step-cardinal { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-8); }
.method__step-title { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; margin-bottom: var(--s-8); }
.method__step-desc { font-size: var(--t-caption); color: var(--fg-muted); line-height: 1.5; margin-bottom: var(--s-16); }
.method__step-deliverable { padding-top: var(--s-12); border-top: 1px dashed var(--hairline); font-family: var(--font-mono); font-size: var(--t-micro); color: var(--accent); }

/* ---------- Tiered offer ladder ---------- */
.ladder { display: grid; grid-template-columns: 1fr; gap: var(--s-24); margin-top: var(--s-48); }
@media (min-width: 760px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
.tier { padding: var(--s-32); border: 1px solid var(--hairline); background: var(--bg-surface); display: flex; flex-direction: column; }
.tier__label { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-12); }
.tier__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: var(--s-12); }
.tier__what { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.55; margin-bottom: var(--s-16); flex: 1; }
.tier__specs { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--fg-muted); padding-top: var(--s-12); border-top: 1px dashed var(--hairline); margin-bottom: var(--s-16); }
.tier__cta { display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--accent); color: var(--bg); padding: 12px 20px; align-self: flex-start; transition: background var(--duration) var(--easing); }
.tier__cta:hover { background: var(--fg); }

/* ---------- FAQ ---------- */
.faq { padding-top: var(--s-48); }
.faq__item { padding: var(--s-24) 0; border-top: 1px solid var(--hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: var(--s-12); }
.faq__a { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.65; max-width: 70ch; }

/* ---------- Footer ---------- */
.footer { padding: var(--s-96) 0 var(--s-48); border-top: 1px solid var(--hairline); margin-top: var(--s-96); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-32); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-16); font-weight: 500; }
.footer__col ul { display: flex; flex-direction: column; gap: var(--s-8); }
.footer__col a { font-size: var(--t-small); color: var(--fg); }
.footer__col a:hover { color: var(--accent); }
.footer__brand-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.footer__position { font-size: var(--t-caption); color: var(--fg-muted); max-width: 30ch; margin-top: var(--s-12); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-32); margin-top: var(--s-48); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--t-micro); color: var(--fg-muted); }
.footer__start-easter { color: var(--fg-muted); border: none; padding: 0; font: inherit; opacity: 0.6; }
.footer__start-easter:hover { color: var(--accent); opacity: 1; }

/* ---------- Buttons ---------- */
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-16); margin-top: var(--s-32); }
.btn {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-family: var(--font-mono); font-size: var(--t-caption);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 14px 24px; border-radius: 0;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: var(--fg); }
.btn--secondary { background: transparent; color: var(--fg); border: 1px solid var(--fg); }
.btn--secondary:hover { background: var(--fg); color: var(--bg); }

/* ---------- Disqualification list ---------- */
.disqual { display: grid; grid-template-columns: 1fr; gap: var(--s-16); max-width: 70ch; margin-top: var(--s-24); }
@media (min-width: 760px) { .disqual { grid-template-columns: 1fr 1fr; gap: var(--s-24); } }
.disqual li { padding: var(--s-16) 0; border-top: 1px solid var(--hairline); font-size: var(--t-small); color: var(--fg); line-height: 1.5; }
.disqual li::before { content: "—"; color: var(--accent); margin-right: var(--s-8); font-weight: 500; }
.disqual-footer { margin-top: var(--s-32); font-family: var(--font-mono); font-size: var(--t-caption); color: var(--fg-muted); }

/* ---------- Callout block (Cardinal Index, Why we move faster, etc) ---------- */
.callout { padding: var(--s-48); background: var(--bg-surface); border-left: 4px solid var(--accent); }
.callout__kicker { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-16); }
.callout__title { font-family: var(--font-display); font-size: var(--t-display-2); font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--tracking-display); margin-bottom: var(--s-24); max-width: 24ch; }
.callout__body { font-size: var(--t-body); color: var(--fg); line-height: 1.6; max-width: 65ch; }
.callout__body p + p { margin-top: var(--s-16); }
.callout__cta { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: var(--s-24); font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ---------- Mini scoring rubric (homepage) ---------- */
.rubric-mini { width: 100%; border-collapse: collapse; margin-top: var(--s-32); font-size: var(--t-small); }
.rubric-mini th, .rubric-mini td { padding: var(--s-12) var(--s-16); text-align: right; }
.rubric-mini th:first-child, .rubric-mini td:first-child { text-align: left; }
.rubric-mini thead tr { border-bottom: 2px solid var(--accent); }
.rubric-mini th { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }
.rubric-mini tbody tr { border-bottom: 1px solid var(--hairline); }
.rubric-mini tbody td { font-family: var(--font-mono); }
.rubric-mini tbody td.is-low { color: var(--fg-muted); }
.rubric-mini tbody td:first-child { font-family: var(--font-body); color: var(--fg); }

/* ---------- Email capture ---------- */
.signup { padding: var(--s-48); background: var(--accent); color: var(--bg); display: grid; grid-template-columns: 1fr; gap: var(--s-32); }
@media (min-width: 760px) { .signup { grid-template-columns: 7fr 5fr; gap: var(--s-64); align-items: center; } }
.signup__title { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; color: var(--bg); margin-bottom: var(--s-8); }
.signup__dek { font-size: var(--t-small); color: var(--bg); opacity: 0.85; max-width: 50ch; }
.signup__form { display: flex; flex-direction: column; gap: var(--s-12); }
@media (min-width: 540px) { .signup__form { flex-direction: row; } }
.signup__input { flex: 1; padding: 14px var(--s-16); background: transparent; border: 1px solid var(--bg); color: var(--bg); font: inherit; font-size: var(--t-small); }
.signup__input::placeholder { color: var(--bg); opacity: 0.6; }
.signup__input:focus { outline: none; border-color: var(--bg); background: rgba(255,255,255,0.06); }
.signup__submit { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--bg); color: var(--accent); padding: 14px var(--s-24); border: 1px solid var(--bg); transition: opacity var(--duration) var(--easing); }
.signup__submit:hover { opacity: 0.85; }
.signup__legal { margin-top: var(--s-12); font-family: var(--font-mono); font-size: 10px; color: var(--bg); opacity: 0.65; }

/* ---------- Forms (intake, contact) ---------- */
.form { display: grid; grid-template-columns: 1fr; gap: var(--s-24); max-width: 640px; }
.form__row { display: flex; flex-direction: column; gap: var(--s-6); }
.form__row--split { display: grid; grid-template-columns: 1fr; gap: var(--s-16); }
@media (min-width: 560px) { .form__row--split { grid-template-columns: 1fr 1fr; } }
.form__label { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); }
.form__hint { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); margin-top: 2px; }
.form__input, .form__select, .form__textarea { padding: 12px var(--s-16); background: var(--bg-surface); border: 1px solid var(--hairline); color: var(--fg); font: inherit; font-size: var(--t-small); transition: border-color var(--duration) var(--easing); }
.form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--accent); }
.form__textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }
.form__submit { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--accent); color: var(--bg); padding: 14px var(--s-24); border: none; cursor: pointer; align-self: flex-start; transition: background var(--duration) var(--easing); }
.form__submit:hover { background: var(--fg); }

/* ---------- Coming-next card (article placeholders that aren't fake) ---------- */
.coming-next { padding-top: var(--s-24); border-top: 1px dashed var(--hairline); opacity: 0.72; }
.coming-next .article-card__meta strong { color: var(--fg-muted); }
.coming-next .article-card__title { color: var(--fg-muted); font-style: italic; }
.coming-next .article-card__date { color: var(--fg-muted); }

/* ---------- Industry grid (Library hub) ---------- */
.industry-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-24); margin-top: var(--s-48); }
@media (min-width: 760px) { .industry-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .industry-grid { grid-template-columns: 1fr 1fr 1fr; } }
.industry-card { padding: var(--s-32); border: 1px solid var(--hairline); background: var(--bg-surface); display: flex; flex-direction: column; gap: var(--s-12); transition: border-color var(--duration) var(--easing); }
.industry-card:hover { border-color: var(--accent); }
.industry-card__status { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.industry-card__status--coming { color: var(--fg-muted); }
.industry-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--fg); }
.industry-card__pain { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.55; flex: 1; }
.industry-card__cta { margin-top: var(--s-12); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }

/* ---------- Featured industries grid (McKinsey-style "living in right now") ---------- */
.featured-industries { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-top: var(--s-48); }
@media (min-width: 760px) { .featured-industries { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .featured-industries { grid-template-columns: 1fr 1fr 1fr; } }
.featured-industry { padding: var(--s-48) var(--s-32); background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-24); text-decoration: none; transition: background var(--duration) var(--easing); min-height: 220px; }
.featured-industry:hover { background: var(--bg-surface); }
.featured-industry__name { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--fg); }
.featured-industry__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.featured-industry__cta { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }

/* ---------- Coverage list (A-Z compact list) ---------- */
.coverage-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-32); border-top: 1px solid var(--hairline); }
@media (min-width: 600px) { .coverage-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .coverage-list { grid-template-columns: 1fr 1fr 1fr; } }
.coverage-row { padding: var(--s-16) 0; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-16); }
.coverage-row__name { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg); }
.coverage-row__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.coverage-row__status--active { color: var(--accent); }

/* ---------- Compass graphic (Method page) ---------- */
.compass-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s-48); align-items: center; margin: var(--s-48) 0; }
@media (min-width: 880px) { .compass-wrap { grid-template-columns: 1fr 1fr; gap: var(--s-96); } }
.compass-svg { width: 100%; max-width: 480px; height: auto; }
.compass-svg__seg { cursor: pointer; transition: fill var(--duration) var(--easing), stroke var(--duration) var(--easing); }
.compass-svg__seg:hover { fill: var(--accent); stroke: var(--accent); }
.compass-svg__seg.is-active { fill: var(--accent); stroke: var(--accent); }
/* Active-state text inversion: when a point is active, its letter and label flip to cream */
.compass-svg .compass-svg__seg.is-active + .compass-svg__letter { fill: var(--bg); }
.compass-svg--star { background: transparent; }
.compass-detail { padding: var(--s-32); background: var(--bg-surface); border-left: 4px solid var(--accent); min-height: 240px; }
.compass-detail__cardinal { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-8); }
.compass-detail__title { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; margin-bottom: var(--s-16); }
.compass-detail__desc { font-size: var(--t-body); color: var(--fg); line-height: 1.6; margin-bottom: var(--s-16); }
.compass-detail__deliverable { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--accent); }

/* ---------- Role-FAQ shortcut (footer) ---------- */
.role-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); margin-top: var(--s-12); }
@media (min-width: 760px) { .role-faq-grid { grid-template-columns: repeat(3, 1fr); } }
.role-faq-grid a { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.role-faq-grid a:hover { color: var(--accent); }

/* ---------- Deliverable preview modal ---------- */
.deliverable-modal {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-24);
}
.deliverable-modal.is-open { display: flex; }
.deliverable-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 12, 8, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.deliverable-modal__dialog {
  position: relative;
  background: var(--bg);
  width: 100%;
  max-width: 1100px;
  height: calc(100vh - 48px);
  max-height: 900px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 64px rgba(15, 12, 8, 0.4);
}
.deliverable-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.deliverable-modal__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.deliverable-modal__title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 500;
  color: var(--fg);
  flex: 1;
  margin: 0;
}
.deliverable-modal__close {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--hairline);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
  flex-shrink: 0;
}
.deliverable-modal__close:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.deliverable-modal__body {
  flex: 1;
  overflow: hidden;
  background: var(--bg);
}
.deliverable-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
body.is-modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .deliverable-modal { padding: 0; }
  .deliverable-modal__dialog { height: 100vh; max-height: 100vh; border: none; }
  .deliverable-modal__title { font-size: 18px; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--accent); color: var(--bg);
  padding: var(--s-16) var(--gutter);
  display: flex; align-items: center; gap: var(--s-24);
  flex-wrap: wrap;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.24s var(--easing);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__text {
  flex: 1 1 320px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--bg);
}
.cookie-banner__text a {
  color: var(--bg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner__text a:hover { opacity: 0.85; }
.cookie-banner__actions {
  display: flex;
  gap: var(--s-12);
  flex-wrap: wrap;
}
.cookie-banner__btn {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--bg);
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}
.cookie-banner__btn:hover { opacity: 0.85; }
.cookie-banner__btn--secondary {
  background: transparent;
  color: var(--bg);
  border: 1px solid var(--bg);
}
.cookie-banner__btn--secondary:hover { background: var(--bg); color: var(--accent); opacity: 1; }
@media (max-width: 600px) {
  .cookie-banner { padding: var(--s-16); gap: var(--s-12); }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1; }
}

/* ---------- Utilities ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--fg-muted); }
.hairline-top { border-top: 1px solid var(--hairline); padding-top: var(--s-24); }
.compass-rule { width: 100%; height: 2px; background: var(--accent); }