/* ─── AI Uni — Shared Stylesheet ─── */

:root {
  --ink: #0a0a0a;
  --paper: #f5f0e8;
  --accent: #c4380d;
  --accent-light: #e8ddd0;
  --muted: #6b6560;
  --rule: #d0c8bc;
  --highlight: #fef3cd;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Instrument Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

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

/* ─── Focus styles — WCAG 2.2 AA compliance ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ─── UTILITY ─── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px);
  background: rgba(245,240,232,0.94);
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

nav .logo {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
}

nav .logo img {
  display: block;
  margin-top: -8px;
  margin-left: -14px;
}

nav .cta-nav {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s;
}

nav .cta-nav:hover { background: var(--accent); }

nav .hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 36px;
  height: 36px;
}

nav .hamburger span,
nav .hamburger span::before,
nav .hamburger span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s;
}

nav .hamburger span::before,
nav .hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
}

nav .hamburger span::before { top: -6px; }
nav .hamburger span::after { top: 6px; }

/* ─── NAV LINKS ─── */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }

/* ─── HERO ─── */
.hero {
  padding: 10rem 0 6rem;
  border-bottom: 2px solid var(--ink);
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.2s forwards;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.08;
  font-weight: 400;
  max-width: 14ch;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.4s forwards;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 38ch;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.6s forwards;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.8s forwards;
}

.hero-cta-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-meta {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.8s forwards;
}

.hero-meta-item {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

/* ─── SECTION LABEL ─── */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ─── THREE QUESTIONS ─── */
.three-questions {
  padding: 4rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.tq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}

.tq-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.tq-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.tq-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
}

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

/* ─── PROBLEM ─── */
.problem {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.problem h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  max-width: 16ch;
}

.problem-text {
  color: var(--muted);
  font-size: 1rem;
}

.problem-text p + p { margin-top: 1rem; }

.problem-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.problem-stat {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

.problem-stat strong {
  font-size: 1.1rem;
  color: var(--accent);
}

.problem-closer {
  margin-top: 1.5rem;
  font-weight: 500;
  color: var(--ink) !important;
}

.not-list {
  list-style: none;
  margin-top: 2rem;
  padding: 0;
}

.not-list li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  font-size: 0.95rem;
}

.not-list li strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.15rem;
}

.not-list li span { color: var(--muted); }

/* ─── THESIS ─── */
.thesis {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.thesis blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.3;
  max-width: 26ch;
  font-style: italic;
}

.thesis .attribution {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── TUTOR ─── */
.tutor {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.tutor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.tutor h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.tutor-desc {
  color: rgba(245,240,232,0.65);
  margin-bottom: 2rem;
}

.tutor-demo {
  background: rgba(245,240,232,0.06);
  border: 1px solid rgba(245,240,232,0.1);
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.8;
}

.tutor-demo .msg-student {
  color: rgba(245,240,232,0.5);
}

.tutor-demo .msg-tutor {
  color: var(--paper);
  margin-top: 0.8rem;
}

.tutor-demo .msg-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.tutor-demo .msg-label.student-label { color: rgba(245,240,232,0.3); }
.tutor-demo .msg-label.tutor-label { color: var(--accent); }

.tutor-features {
  list-style: none;
  padding: 0;
}

.tutor-features li {
  padding: 1rem 0;
  border-top: 1px solid rgba(245,240,232,0.1);
}

.tutor-features li strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.3rem;
}

.tutor-features li span {
  font-size: 0.9rem;
  color: rgba(245,240,232,0.55);
}

/* ─── WORK IS THE PROMPTING ─── */
.work-is {
  padding: 5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.work-is h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.work-is-intro {
  color: var(--muted);
  max-width: 700px;
  margin-bottom: 3rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.work-is-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.work-is-three {
  grid-template-columns: 1fr 1fr 1fr;
}

.work-is-panel {
  padding: 2rem;
  font-size: 0.88rem;
  line-height: 1.7;
  border: 1px solid var(--rule);
  background: rgba(10,10,10,0.04);
}

.work-is-panel.student-version {
  background: rgba(34,120,60,0.06);
  border-color: rgba(34,120,60,0.25);
}

.work-is-panel-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.work-is-panel.student-version .work-is-panel-label {
  color: #1a6b35;
}

.work-is-panel p {
  color: var(--ink);
  line-height: 1.7;
}

.work-is-takeaway {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 700px;
}

/* ─── HONESTY ─── */
.honesty {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.honesty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.honesty h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
}

.honesty-text { color: var(--muted); }
.honesty-text p + p { margin-top: 1rem; }

.honesty-examples {
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}

.honesty-examples li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.honesty-examples .icon { font-size: 1rem; line-height: 1.4; }
.honesty-examples .example-text { color: var(--muted); }

/* ─── PRICING COMPARISON (homepage) ─── */
.pricing {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.pricing h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.pricing-intro {
  color: var(--muted);
  max-width: 45ch;
  margin-bottom: 3rem;
}

.pricing-comparison {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.pricing-col {
  background: var(--paper);
  padding: 2rem;
  text-align: center;
}

.pricing-col.featured {
  background: var(--ink);
  color: var(--paper);
}

.pricing-col h3 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.pricing-col.featured h3 { color: var(--accent); }
.pricing-col:not(.featured) h3 { color: var(--muted); }

.pricing-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom: 0.3rem;
}

.pricing-period {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.pricing-col.featured .pricing-period { color: rgba(245,240,232,0.5); }

.pricing-detail {
  font-size: 0.85rem;
  line-height: 1.5;
}

.pricing-col.featured .pricing-detail { color: rgba(245,240,232,0.6); }
.pricing-col:not(.featured) .pricing-detail { color: var(--muted); }

.pricing-cta-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.pricing-cta-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.pricing-cta-note a {
  color: var(--accent);
  text-decoration: none;
}

.pricing-cta-note a:hover { text-decoration: underline; }

/* ─── ORG TEASER ─── */
.org-teaser { padding: 3rem 0; border-bottom: 1px solid var(--rule); background: var(--accent-light); }

/* ─── FOR ORGANIZATIONS PAGE ─── */
.org-config { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.org-audiences { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.org-process { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.org-examples { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.tour-flow { display: flex; flex-direction: column; }
.tour-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.tour-step:last-child { border-bottom: none; }
.tour-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  margin-top: 0.15rem;
}
.tour-content h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}
.tour-content p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ─── TIMELINE ─── */
.timeline {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--accent-light);
}

.timeline h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 3rem;
}

.timeline-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.track {
  background: var(--paper);
  padding: 2.5rem;
}

.track h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.track-duration {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.track p { color: var(--muted); font-size: 0.9rem; }

/* ─── COURSES TEASER (homepage) ─── */
.courses-teaser {
  padding: 5rem 0;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.courses-teaser-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.courses-teaser h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
}

.courses-teaser-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.courses-teaser-link:hover { opacity: 0.75; }

.courses-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(245,240,232,0.08);
  margin-bottom: 1.5rem;
}

.teaser-col-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(245,240,232,0.08);
}

.teaser-col-header h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

.teaser-col-header span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.teaser-courses {
  padding: 0 1.5rem;
}

.teaser-course-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(245,240,232,0.06);
  font-size: 0.85rem;
  color: rgba(245,240,232,0.6);
}

a.teaser-course-row { text-decoration: none; color: inherit; }
a.teaser-course-row:hover { color: var(--accent); }

.teaser-course-row:first-child { border-top: none; }

.teaser-course-num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(245,240,232,0.55);
  flex-shrink: 0;
}

.teaser-majors {
  padding: 0 1.5rem;
}

.teaser-major-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(245,240,232,0.06);
  font-size: 0.85rem;
  color: rgba(245,240,232,0.6);
}

a.teaser-major-row { text-decoration: none; color: inherit; }
a.teaser-major-row:hover { color: var(--accent); }
.teaser-major-row:first-child { border-top: none; }

.teaser-major-num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(245,240,232,0.55);
  flex-shrink: 0;
  width: 4rem;
}

.teaser-total {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245,240,232,0.06);
}

/* ─── SETUP CALLOUT ─── */
.setup-callout {
  padding: 3rem 0;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(245,240,232,0.15);
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.setup-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.setup-once h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.setup-steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.setup-steps li {
  counter-increment: step;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: rgba(245,240,232,0.7);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.setup-steps li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 1.2rem;
}

.setup-steps li strong {
  color: var(--paper);
  font-weight: 500;
}

.setup-platforms {
  font-size: 0.8rem;
  color: rgba(245,240,232,0.5);
  margin-top: 1rem;
}

.setup-every {
  text-align: center;
  padding: 2rem;
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: 8px;
  background: rgba(245,240,232,0.03);
}

.setup-flow {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-top: 0.75rem;
  line-height: 1.3;
}

.setup-flow-sub {
  font-size: 0.9rem;
  color: rgba(245,240,232,0.5);
  margin-top: 0.5rem;
}

/* ─── ADA: accent text on dark backgrounds ─── */
/* #c4380d on #0a0a0a = 3.69:1 (fails 4.5:1 AA for normal text) */
/* #d94a1a on #0a0a0a = 4.66:1 (passes) */
.courses-teaser .section-label,
.course-project .section-label,
.plans .section-label { --accent: #d94a1a; }
.courses-teaser .courses-teaser-link,
.courses-teaser .teaser-live-badge,
.setup-callout .setup-label,
.setup-callout .setup-steps li::before { color: #d94a1a; }

/* ─── INLINE PRICING (homepage) ─── */
.pricing-inline {
  padding: 4rem 0;
  border-bottom: 1px solid var(--rule);
}

.pricing-inline h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.pi-intro {
  color: var(--muted);
  max-width: 50ch;
  margin-bottom: 2.5rem;
}

.pi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 640px;
}

.pi-card {
  padding: 2rem;
  background: var(--paper);
}

.pi-card.featured {
  background: var(--accent);
  color: var(--paper);
}

.pi-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.pi-card.featured h3 { color: var(--paper); }

.pi-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.pi-amount span {
  font-size: 1rem;
  opacity: 0.7;
}

.pi-card.featured .pi-amount { color: #fff; }
.pi-card.featured .pi-amount span { opacity: 1; }

.pi-period {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.pi-card.featured .pi-period { color: var(--paper); }

.pi-features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.pi-features li {
  padding: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

.pi-card.featured .pi-features li {
  color: var(--paper);
  border-top-color: rgba(255,255,255,0.15);
}

.pi-compare {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.pi-compare a {
  color: var(--accent);
  text-decoration: none;
}

.pi-compare a:hover { text-decoration: underline; }

/* ─── CURRICULUM TEASER: LIVE / PLANNED ─── */
.teaser-course-row.live {
  color: var(--paper);
  font-weight: 500;
}

.teaser-course-row.planned {
  color: rgba(245,240,232,0.5);
}

.teaser-major-row.planned {
  color: rgba(245,240,232,0.5);
}

.teaser-course-row {
  transition: background 0.15s ease;
}

.teaser-course-row:hover {
  background: rgba(255,255,255,0.05);
}

.teaser-major-row {
  transition: background 0.15s ease;
}

.teaser-major-row:hover {
  background: rgba(255,255,255,0.05);
}

.teaser-live-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  flex-shrink: 0;
}

.teaser-standalone {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(245,240,232,0.08);
}

.teaser-standalone .teaser-course-row {
  border-top: none;
}

/* ─── WORK IS THE PROMPTING: COMPACT ─── */
.work-is-compact {
  max-width: 640px;
}

.work-is-compact p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

.work-is-compact p + p {
  margin-top: 1rem;
}

.work-is-compact .work-is-takeaway {
  margin-top: 1rem;
}

/* ─── FULL CURRICULUM MAP (courses page) ─── */
.curriculum-map {
  padding: 5rem 0;
  background: var(--ink);
  color: var(--paper);
  --accent: #d94a1a; /* ADA: #d94a1a on #0a0a0a = 4.66:1 (passes AA) */
}

.curriculum-map .section-label { margin-bottom: 2rem; }

.cmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(245,240,232,0.08);
}

.cmap-col { background: var(--ink); }

.cmap-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(245,240,232,0.1);
}

.cmap-header h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.cmap-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.cmap-courses { padding: 0 2rem; }

.cmap-row {
  display: block;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(245,240,232,0.08);
  text-decoration: none;
  transition: background 0.15s;
}

.cmap-row:first-child { border-top: none; }
.cmap-row:hover .cmap-name { color: var(--accent); }

.cmap-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(245,240,232,0.35);
  display: block;
  margin-bottom: 0.15rem;
}

.cmap-name {
  font-size: 0.92rem;
  color: var(--paper);
  display: block;
  transition: color 0.15s;
}

.cmap-desc {
  font-size: 0.78rem;
  color: rgba(245,240,232,0.5);
  display: block;
  margin-top: 0.15rem;
}


.cmap-row.live { border-left: 3px solid var(--accent); padding-left: 0.75rem; }

.cmap-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.3rem;
}



.cmap-major-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(245,240,232,0.06);
}

.cmap-major-card {
  background: var(--ink);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}

.cmap-major-card:hover { background: rgba(245,240,232,0.06); }

.cmap-major-card .major-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(245,240,232,0.35);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.cmap-major-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 400;
  margin-bottom: 0.4rem;
  color: var(--paper);
}

.cmap-major-card .major-replaces {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.cmap-major-card p {
  font-size: 0.8rem;
  color: rgba(245,240,232,0.6);
  line-height: 1.5;
  flex: 1;
}

.cmap-major-card .major-careers {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(245,240,232,0.08);
  font-size: 0.72rem;
  color: rgba(245,240,232,0.45);
}

.cmap-major-card .major-careers strong {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(245,240,232,0.6);
  display: block;
  margin-bottom: 0.2rem;
}

.cmap-totals {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(245,240,232,0.08);
}

/* ─── MAJORS (light bg cards) ─── */
.majors {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.majors h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.majors-intro {
  color: var(--muted);
  max-width: 50ch;
  margin-bottom: 3rem;
}

.major-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.major-card {
  background: var(--paper);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

a.major-card {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

a.major-card:hover { background: var(--accent-light); }

.major-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.major-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.major-replaces {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.major-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.major-careers {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

.major-careers strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
}

/* ─── TWO LAYERS ─── */
.layers { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.layers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.layer-card { background: var(--paper); padding: 2.5rem; }
.layer-card.dark { background: var(--ink); color: var(--paper); }

.layer-card h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.layer-card .layer-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.layer-card.dark .layer-sub { color: var(--accent); }
.layer-card:not(.dark) .layer-sub { color: var(--accent); }

.layer-card ul { list-style: none; padding: 0; }

.layer-card ul li {
  padding: 0.5rem 0;
  border-top: 1px solid;
  font-size: 0.9rem;
}

.layer-card.dark ul li { border-color: rgba(245,240,232,0.12); color: rgba(245,240,232,0.7); }
.layer-card:not(.dark) ul li { border-color: var(--rule); color: var(--muted); }
.layer-card ul li a { color: inherit; text-decoration: none; }
.layer-card ul li a:hover { color: var(--accent); }

/* ─── CTA ─── */
.final-cta {
  padding: 6rem 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.final-cta h2 em { font-style: italic; color: var(--accent); }

.final-cta p {
  color: rgba(245,240,232,0.55);
  max-width: 40ch;
  margin: 0 auto 2.5rem;
}

.btn-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.btn-cta:hover { background: #d94a1a; transform: translateY(-1px); }

.final-sub {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
}

/* ─── PLATFORM TOUR ─── */
.platform-tour { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.tour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 600px;
  margin: 2.5rem auto 0;
}
.tour-grid > div { display: flex; flex-direction: column; }
.tour-grid > div > div:first-child { flex: 1; display: flex; flex-direction: column; }
.tour-grid > div > div:first-child > div:last-child { flex: 1; }

/* ─── SESSION TIMELINE ─── */
.session-timeline {
  margin-top: 2.5rem;
  max-width: 600px;
}

.session-timeline h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.timeline-row {
  display: flex;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-left: 2px solid var(--rule);
  padding-left: 1.5rem;
  position: relative;
}

.timeline-row::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  min-width: 2.5rem;
  font-weight: 500;
}

.timeline-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── BETWEEN SESSIONS ─── */
.between-sessions { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.between-sessions .portfolio-desc { color: var(--muted); }
.between-sessions .tutor-demo { background: rgba(10,10,10,0.04); border: 1px solid var(--rule); }
.between-sessions .demo-label { color: var(--muted); }
.between-sessions .portfolio-example { border-top-color: var(--rule); }
.between-sessions .portfolio-example span { color: var(--muted); }

/* ─── FOOTER ─── */
footer {
  padding: 2rem 0;
  background: var(--ink);
  border-top: 1px solid rgba(245,240,232,0.08);
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer .logo { display: flex; align-items: center; }

footer .logo img {
  opacity: 0.4;
  filter: invert(1) grayscale(1);
}

footer .logo-inverted img {
  filter: brightness(0) invert(0.85);
  opacity: 1;
}

footer .legal {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgba(245,240,232,0.5);
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(245,240,232,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: rgba(245,240,232,0.7); }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── DETAIL PAGE: BACK STRIP ─── */
.back-strip {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  margin-top: 60px;
}

.back-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.back-link:hover { color: var(--accent); }

/* ─── PAGE HERO (internal pages) ─── */
.page-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
}

.page-hero .hero-eyebrow {
  opacity: 1;
  animation: none;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.page-hero h1 em { font-style: italic; color: var(--accent); }

.page-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.6;
}

/* keep .hiw-hero as alias */
.hiw-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
}

.hiw-hero .hero-eyebrow { opacity: 1; animation: none; }

.hiw-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.hiw-hero h1 em { font-style: italic; color: var(--accent); }

.hiw-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.6;
}

/* ─── HOW IT WORKS: PHASES ─── */
.phases { padding: 5rem 0; border-bottom: 1px solid var(--rule); background: var(--accent-light); }

.phases h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.phases-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.phase-card { background: var(--paper); padding: 2rem; }

.phase-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.phase-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.phase-weight {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.phase-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.5rem; }

.phase-example {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

.phase-example strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: block;
  margin-bottom: 0.4rem;
}

.phase-example span { color: var(--muted); line-height: 1.55; }

/* ─── HOW IT WORKS: TUTOR MODES ─── */
.tutor-modes {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.tutor-modes h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.modes-intro { color: rgba(245,240,232,0.55); max-width: 50ch; margin-bottom: 3rem; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245,240,232,0.1);
  border: 1px solid rgba(245,240,232,0.1);
  margin-bottom: 3rem;
}

.mode-card { background: var(--ink); padding: 1.5rem; }

.mode-card h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.mode-card p { font-size: 0.88rem; color: rgba(245,240,232,0.55); line-height: 1.55; }
.mode-card-subtitle { font-style: italic; margin-bottom: 0.25rem; color: rgba(245,240,232,0.4) !important; font-size: 0.8rem !important; }

.hiw-demo { max-width: 700px; }

.hiw-demo .msg-student + .msg-tutor,
.hiw-demo .msg-tutor + .msg-student { margin-top: 0.8rem; }

.demo-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.25);
  margin-bottom: 1rem;
}

/* ─── HOW IT WORKS: MASTERY ─── */
.mastery { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.mastery h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.mastery-intro { color: var(--muted); max-width: 55ch; margin-bottom: 3rem; }
.mastery-levels { margin-bottom: 3rem; }

.mastery-level {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.level-marker {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--level-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.level-info strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.level-info span { font-size: 0.88rem; color: var(--muted); }

.mastery-callout { background: var(--ink); color: var(--paper); padding: 2rem; }

.mastery-callout strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.75rem;
}

.mastery-callout p { font-size: 0.92rem; color: rgba(245,240,232,0.65); line-height: 1.6; max-width: 60ch; }

/* ─── HOW IT WORKS: BLOOM'S TAXONOMY ─── */
.blooms-explainer { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.blooms-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.blooms-intro { color: var(--muted); max-width: 55ch; margin-bottom: 2.5rem; }
.blooms-scale { margin-bottom: 3rem; }

.blooms-level {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}

.blooms-level strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.blooms-level span { font-size: 0.92rem; color: var(--muted); }

/* ─── COURSE PAGES: OBJECTIVE HEADER + FOOTNOTE ─── */
.objective-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.objective-header h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0;
}

.objective-col-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.blooms-footnote {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 1rem;
  padding-top: 0.5rem;
}

.blooms-help {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--muted);
  text-decoration: none;
  vertical-align: super;
  margin-left: 0.2rem;
}

.blooms-help:hover { color: var(--accent); }

/* ─── REAL SESSION ─── */
.real-session {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
}

.real-session h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.real-session-intro {
  color: rgba(245,240,232,0.65);
  max-width: 700px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.real-session-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.5rem;
}

.real-session-flow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.real-session-step {
  background: rgba(245,240,232,0.05);
  border: 1px solid rgba(245,240,232,0.1);
  padding: 1.5rem;
}

.real-session-step strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.real-session-step p { font-size: 0.88rem; color: rgba(245,240,232,0.55); line-height: 1.55; }

/* ─── HOW IT WORKS: RETENTION ─── */
.retention { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.retention h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.retention-intro { color: var(--muted); max-width: 55ch; margin-bottom: 3rem; }

.retention-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.retention-card { background: var(--paper); padding: 2rem; }

.retention-card h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.retention-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* ─── HOW IT WORKS: PORTFOLIO ─── */
.portfolio {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.portfolio h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.portfolio-desc { color: rgba(245,240,232,0.55); margin-bottom: 2rem; }

.portfolio-example {
  padding: 0.8rem 0;
  border-top: 1px solid rgba(245,240,232,0.1);
  font-size: 0.82rem;
  line-height: 1.6;
}

.portfolio-example strong {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.2rem;
}

.portfolio-example span { color: rgba(245,240,232,0.5); }

/* ─── HOW IT WORKS: CUSTOMIZATION ─── */
.customization { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.customization h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.customization-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.adapt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.adapt-col { background: var(--paper); padding: 2rem; }
.adapt-col.fixed-col { background: var(--ink); color: var(--paper); }

.adapt-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.adapt-col:not(.fixed-col) h3 { color: var(--accent); }
.adapt-col.fixed-col h3 { color: var(--accent); }

.adapt-list { list-style: none; padding: 0; }

.adapt-list li {
  padding: 0.6rem 0;
  border-top: 1px solid;
  font-size: 0.88rem;
  line-height: 1.5;
}

.adapt-col:not(.fixed-col) .adapt-list li { border-color: var(--rule); color: var(--muted); }
.adapt-col.fixed-col .adapt-list li { border-color: rgba(245,240,232,0.1); color: rgba(245,240,232,0.6); }
.adapt-list li strong { color: var(--ink); }
.adapt-col.fixed-col .adapt-list li strong { color: var(--paper); }

/* ─── HOW IT WORKS: PACE ─── */
.pace-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

/* ─── DOCS HUB ─── */
.docs-hub-links {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0.8rem 0;
  position: sticky;
  top: 60px;
  z-index: 90;
}

.docs-hub-links ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.docs-hub-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  padding: 0.3rem 0;
}

.docs-hub-links a:hover { color: var(--accent); }

.docs-section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--rule);
}

.docs-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.8rem;
  font-weight: 400;
}

.docs-section h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  margin-top: 2.5rem;
}

.docs-section h3:first-of-type { margin-top: 2rem; }

.docs-section p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 1rem;
}

.docs-section .section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.docs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.docs-step {
  background: rgba(10,10,10,0.03);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.5rem;
}

.docs-step-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.docs-step h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.docs-step p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; max-width: none; }

.troubleshooting-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.troubleshooting-list li {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--rule);
  margin-bottom: 0.75rem;
  background: rgba(10,10,10,0.02);
  border-radius: 0 6px 6px 0;
}

.troubleshooting-list li strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.troubleshooting-list li p {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.5;
}

.faq-list {
  max-width: 700px;
  margin: 2rem 0;
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  line-height: 1.4;
}

.faq-question:hover { color: var(--accent); }

.faq-question::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s;
}

.faq-item.open .faq-question::after {
  content: '\2212';
}

.faq-answer {
  display: none;
  padding-bottom: 1.2rem;
}

.faq-item.open .faq-answer { display: block; }

.faq-answer p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 0.5rem;
}

.faq-answer p:last-child { margin-bottom: 0; }

.community-card {
  background: var(--ink);
  color: var(--paper);
  padding: 2.5rem;
  border-radius: 8px;
  margin: 2rem 0;
  max-width: 600px;
}

.community-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 0.8rem;
  color: var(--paper);
}

.community-card p {
  font-size: 0.88rem;
  color: rgba(245,240,232,0.6);
  line-height: 1.6;
  max-width: none;
  margin-bottom: 0.8rem;
}

.community-card .community-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin-top: 0.5rem;
}

.learning-pace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 2rem 0;
}

.pace-card {
  background: var(--paper);
  padding: 2rem;
}

.pace-card h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.pace-duration {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.pace-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; max-width: none; margin-bottom: 0; }

/* ─── ABOUT PAGE ─── */
.about-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.about-hero .hero-eyebrow { opacity: 1; animation: none; color: var(--accent); }
.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.about-hero .hero-sub {
  opacity: 1; animation: none;
  font-size: 1.1rem;
  color: rgba(245,240,232,0.6);
}

.about-founder-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

.about-avatar {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.about-avatar--founder {
  width: 72px; height: 72px;
  font-size: 1.2rem;
  border-radius: 50%;
}
.about-avatar--soon {
  background: transparent;
  border: 2px dashed rgba(0,0,0,0.2);
  color: var(--muted);
}

.about-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.about-agent-card {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
}
.about-agent-card--soon {
  opacity: 0.6;
  border-style: dashed;
}

.about-agent-role {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0.75rem 0 0.25rem;
}

.about-agent-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-bottom: 0.5rem;
}
.about-agent-status--active {
  color: var(--accent);
  border: 1px solid var(--accent);
}
.about-agent-status--soon {
  color: var(--muted);
  border: 1px solid var(--rule);
}

.about-agent-bio {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ─── COURSES PAGE HERO ─── */
.courses-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.courses-hero .hero-eyebrow { opacity: 1; animation: none; color: var(--accent); }

.courses-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.courses-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: rgba(245,240,232,0.6);
  max-width: 48ch;
  line-height: 1.6;
}

/* ─── COURSES PAGE — SECTIONS & CARDS ─── */
.section-light {
  padding: 5rem 0;
  background: var(--paper);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.section-desc {
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 3rem;
}

/* Foundation / standalone grid */
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.foundation-card {
  background: var(--paper);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.foundation-card.fc-planned { border-style: dashed; }

.fc-code {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}

.fc-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.3rem;
}

.fc-badge-planned {
  color: var(--muted) !important;
}

.fc-badge-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.4rem;
}

.fc-badge-free {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.4rem;
}

.fc-summary {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0.6rem 0 0;
}

.fc-meta {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.fc-meta strong {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fc-tools { margin-bottom: 0.4rem; }

.fc-sessions {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Expandable card behavior */
.expand-trigger {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
}

.expand-chevron::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform 0.2s;
}

.expand-chevron-dark::after {
  color: rgba(245,240,232,0.35);
}

.expand-card.open .expand-chevron::after {
  content: '\2212';
}

.expand-content {
  display: none;
}

.expand-card.open .expand-content {
  display: block;
}

/* Session list inside expanded cards */
.fc-session-list {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--muted);
}

.fc-session-list strong {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.5rem;
}

.fc-session-list ul {
  list-style: none;
  padding: 0;
}

.fc-session-list ul li {
  padding: 0.25rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
}

.fc-prereq {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* Course table inside expanded major cards */
.course-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.75rem;
}

.course-table th {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245,240,232,0.4);
  text-align: left;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(245,240,232,0.1);
}

.course-table td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(245,240,232,0.06);
  color: rgba(245,240,232,0.6);
  vertical-align: top;
}

.course-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(245,240,232,0.3);
  width: 2rem;
}

.course-table td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(245,240,232,0.35);
  width: 4rem;
  text-align: center;
}

/* ─── COURSE DETAIL PAGES ─── */
.course-hero {
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--ink);
  margin-top: 60px;
}

.course-hero .hero-eyebrow { opacity: 1; animation: none; }

.course-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 22ch;
  margin-bottom: 1rem;
}

.course-major-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 1.5rem;
  display: inline-block;
  transition: color 0.2s;
}

.course-major-link:hover { color: var(--ink); }

.course-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1rem;
  color: var(--muted);
  max-width: 50ch;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.course-meta { display: flex; gap: 2rem; flex-wrap: wrap; }

.course-meta-item {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.course-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 0.1rem;
}

/* ─── COURSE PAGE: OBJECTIVES ─── */
.objectives-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.objectives-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.objective-phase { margin-bottom: 2rem; }

.objective-phase h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.objective-list { list-style: none; padding: 0; }

.objective-item {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.blooms-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── COURSE PAGE: CURRICULUM BREAKDOWN ─── */
.curriculum-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.curriculum-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.session-list {
  list-style: none;
  padding: 0;
  counter-reset: session;
}

.session-item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
}

.session-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.session-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.session-number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 1.5rem;
}

.session-header h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0;
  flex: 1;
}

.session-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.session-overview {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0.4rem 0 0 2.25rem;
}

.session-exercise {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.4rem 0 0 2.25rem;
}

/* ─── COURSE PAGE: UNITS ─── */
.units-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.units-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.units-phase { margin-bottom: 3rem; }

.units-phase h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.units-phase-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.unit-card { background: var(--paper); padding: 1.5rem; }

.unit-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.unit-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

.unit-topics { list-style: none; padding: 0; margin-top: 0.75rem; }

.unit-topics li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ─── COURSE PAGE: PROJECT ─── */
.course-project {
  padding: 4rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.course-project h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.project-driving {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  max-width: 36ch;
  margin-bottom: 1.5rem;
}

.project-deliverable {
  color: rgba(245,240,232,0.6);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50ch;
  margin-bottom: 2rem;
}

.project-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245,240,232,0.1);
  border: 1px solid rgba(245,240,232,0.1);
  margin-bottom: 2rem;
}

.project-example { background: var(--ink); padding: 1.5rem; }

.project-example strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}

.project-example span { font-size: 0.85rem; color: rgba(245,240,232,0.5); line-height: 1.55; }

.project-rubric {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245,240,232,0.1);
}

.project-rubric h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.rubric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245,240,232,0.1);
  border: 1px solid rgba(245,240,232,0.1);
}

.rubric-item { background: var(--ink); padding: 1rem; }
.rubric-item strong { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; }
.rubric-item span { font-size: 0.8rem; color: rgba(245,240,232,0.45); line-height: 1.5; }

/* ─── COURSE PAGE: TOOLS ─── */
.tools-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.tools-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.tools-section > .container > p { color: var(--muted); max-width: 50ch; margin-bottom: 2.5rem; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.tool-card { background: var(--paper); padding: 1.5rem; }
.tool-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; margin-bottom: 0.3rem; }
.tool-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.5rem; }

.tool-market-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* ─── COURSE PAGE: PREREQUISITES ─── */
.prereq-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.prereq-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.prereq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.prereq-col { background: var(--paper); padding: 2rem; }

.prereq-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.prereq-col:first-child h3 { color: var(--muted); }
.prereq-col:last-child h3 { color: var(--accent); }

.prereq-list { list-style: none; padding: 0; }

.prereq-list li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}

.prereq-list a { color: var(--ink); text-decoration: none; transition: color 0.2s; }
.prereq-list a:hover { color: var(--accent); }

.prereq-list .prereq-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ─── COURSE CARD LINK STYLE ─── */
a.course-card {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  display: block;
}

a.course-card:hover { background: var(--accent-light); }

/* ─── COURSE GRID ─── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.course-card { background: var(--paper); padding: 1.5rem; }

.course-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.course-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.75rem; }

.course-card ul { list-style: none; padding: 0; }

.course-card ul li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ─── CAREER PATHS ─── */
.careers-section {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
}

.careers-section h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.careers-section > .container > p {
  color: rgba(245,240,232,0.55);
  max-width: 50ch;
  margin-bottom: 3rem;
}

.career-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(245,240,232,0.1);
  border: 1px solid rgba(245,240,232,0.1);
}

.career-card { background: var(--ink); padding: 2rem; }

.career-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.career-card p { font-size: 0.88rem; color: rgba(245,240,232,0.55); line-height: 1.55; margin-bottom: 1rem; }

.career-differentiator {
  padding-top: 1rem;
  border-top: 1px solid rgba(245,240,232,0.1);
  font-size: 0.8rem;
}

.career-differentiator strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.3rem;
}

.career-differentiator span { color: rgba(245,240,232,0.45); }

/* ─── PROJECTS SECTION ─── */
.projects-section { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.projects-section h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.projects-section > .container > p { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.project-card { background: var(--paper); padding: 2rem; }

.project-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.project-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.project-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* ─── MAJOR HERO ─── */
.major-hero {
  padding: 5rem 0 4rem;
  border-bottom: 2px solid var(--ink);
}

.major-hero .hero-eyebrow { opacity: 1; animation: none; }

.major-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 20ch;
  margin-bottom: 1rem;
}

.major-replaces-hero {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.major-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 50ch;
  line-height: 1.6;
}

/* ─── CURRICULUM SECTION (major pages) ─── */
.curriculum-section { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.curriculum-section h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.curriculum-section > .container > p { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.curriculum-layer { margin-bottom: 3rem; }

.curriculum-layer h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.curriculum-layer .layer-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.curriculum-layer ul { list-style: none; padding: 0; }

.curriculum-layer ul li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

.curriculum-layer ul li a { color: inherit; text-decoration: none; }
.curriculum-layer ul li a:hover { color: var(--accent); }

/* ─── MAJOR TIMELINE ─── */
.major-timeline { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.major-timeline h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 3rem;
}

.track-phases { margin-top: 1.5rem; }

.phase {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  font-size: 0.88rem;
}

.phase strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  padding-top: 0.1rem;
}

.phase span { color: var(--muted); }

/* ─── MAJOR HONESTY ─── */
.major-honesty { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.major-honesty h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 3rem;
}

.honesty-grid-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.honesty-col { background: var(--paper); padding: 2rem; }

.honesty-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.honesty-col:first-child h3 { color: var(--accent); }
.honesty-col:last-child h3 { color: var(--muted); }

.honesty-list { list-style: none; padding: 0; }

.honesty-list li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ─── PRICING PAGE PLANS ─── */
.plans {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.plans h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.plans-intro {
  color: rgba(245,240,232,0.55);
  max-width: 50ch;
  margin-bottom: 3rem;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.plan-col { padding: 2rem; border-radius: 4px; }

.plan-col.subtle {
  background: rgba(245,240,232,0.04);
  border: 1px solid rgba(245,240,232,0.1);
}

.plan-col.featured { background: var(--accent); color: var(--paper); }

.plan-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: rgba(245,240,232,0.2);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.plan-col h3 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: rgba(245,240,232,0.5);
}

.plan-col.featured h3 { color: rgba(255,255,255,0.85); }

.plan-amount {
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: 1;
}

.plan-period {
  font-size: 0.8rem;
  color: rgba(245,240,232,0.5);
  margin-bottom: 0.75rem;
}

.plan-col.featured .plan-period { color: rgba(255,255,255,0.7); }

.plan-tagline {
  font-size: 0.85rem;
  color: rgba(245,240,232,0.5);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.plan-col.featured .plan-tagline { color: rgba(255,255,255,0.7); }

.plan-includes {
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.plan-features li {
  padding: 0.5rem 0;
  border-top: 1px solid rgba(245,240,232,0.08);
  font-size: 0.85rem;
  color: rgba(245,240,232,0.6);
}

.plan-col.featured .plan-features li {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
}

.plan-features li strong { color: rgba(245,240,232,0.85); font-weight: 500; }
.plan-col.featured .plan-features li strong { color: #fff; }

.plan-cta-outline {
  display: inline-block;
  border: 1px solid rgba(245,240,232,0.3);
  color: var(--paper);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s;
}

.plan-cta-outline:hover { background: rgba(245,240,232,0.08); }

.pi-card .plan-cta-outline {
  color: var(--ink);
  border-color: var(--ink);
}
.pi-card .plan-cta-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.plan-cta-solid {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}

.plan-cta-solid:hover { opacity: 0.9; }

.plans-note {
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(245,240,232,0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(245,240,232,0.5);
}

/* ─── PRICING PAGE: AI MODEL EXPLAINER ─── */
.ai-explainer { padding: 5rem 0; border-bottom: 1px solid var(--rule); background: var(--paper); }

.ai-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.ai-explainer-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.ai-explainer .model-check { list-style: none; padding: 0; margin-top: 1rem; }

.ai-explainer .model-check li { padding: 0.3rem 0; font-size: 0.85rem; color: var(--muted); }

.layer-card .model-check { list-style: none; padding: 0; margin-top: 1rem; }
.layer-card.dark .model-check li { padding: 0.3rem 0; font-size: 0.85rem; color: rgba(245,240,232,0.65); }

.ai-callout {
  margin-top: 2rem;
  background: #f0e8dc;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--accent);
}

.ai-callout p { color: var(--muted); font-size: 0.88rem; margin: 0; }

/* ─── PRICING PAGE: USAGE EXPLAINER ─── */
.usage-explainer { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.usage-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 2rem;
}

.usage-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-bottom: 0.5rem;
}

.usage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.usage-note { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); margin-top: 1rem; }

/* ─── PRICING PAGE: MCP EXPLAINER ─── */
.mcp-explainer {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.mcp-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.mcp-explainer h2 em { font-style: italic; }
.mcp-desc { color: rgba(245,240,232,0.65); margin-bottom: 1rem; }

.mcp-cta {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.mcp-cta:hover { text-decoration: underline; }

.mcp-card {
  background: rgba(245,240,232,0.05);
  border: 1px solid rgba(245,240,232,0.1);
  padding: 1.5rem;
}

.mcp-card-header {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.mcp-card-row {
  border-top: 1px solid rgba(245,240,232,0.08);
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: rgba(245,240,232,0.65);
}

.mcp-card-note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(245,240,232,0.3);
  margin-top: 1rem;
}

/* ─── PRICING PAGE: FAQ ─── */
.pricing-faq { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.pricing-faq h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 2rem;
}

.faq-item { border-top: 1px solid var(--rule); padding: 1.5rem 0; }

.faq-item h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.faq-item p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* ─── NEWS ─── */

.news-listing { padding: 3rem 0 5rem; }

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.news-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s;
  background: var(--paper);
}

.news-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

.news-card a { text-decoration: none; color: inherit; display: block; }

.news-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.news-card-body { padding: 1.5rem; }

.news-card-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.news-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.news-card-summary {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Article page */

.news-article {
  max-width: 740px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

.news-article-header { margin-bottom: 2rem; }

.news-article-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.news-article-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.news-article-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.5;
}

.news-article-hero {
  margin: 0 0 2.5rem;
}

.news-article-hero img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.news-article-hero figcaption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: right;
}

.news-article-body p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.news-article-body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 2.5rem 0 1rem;
}

.news-article-body h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}

.news-article-body ul,
.news-article-body ol {
  margin: 0 0 1.5rem 1.5rem;
  line-height: 1.8;
}

.news-article-body li { margin-bottom: 0.5rem; }

.news-article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--muted);
}

.news-callout {
  background: var(--accent-light);
  border-radius: 6px;
  padding: 2rem;
  margin: 2.5rem 0;
}

.news-callout h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.news-callout p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.news-callout .btn-cta {
  font-size: 0.85rem;
  padding: 0.6rem 1.5rem;
}

.news-sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.news-sources h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.news-sources ol {
  margin-left: 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.8;
}

.news-sources a { color: var(--accent); }

/* ─── START HERE (4-COURSE ARC) ─── */

.start-here {
  padding: 5rem 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
}

.start-here-header {
  max-width: 44ch;
  margin-bottom: 3rem;
}

.start-here h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.start-here h2 em { font-style: italic; }

.start-here-intro {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Vertical timeline --- */
.start-here-timeline {
  position: relative;
  padding-left: 3.5rem;
}

.start-here-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--rule);
}

/* --- Timeline item --- */
.sh-tl-item {
  position: relative;
  padding-bottom: 2rem;
}

.sh-tl-item:last-child {
  padding-bottom: 0;
}

/* --- Timeline marker (step number on the line) --- */
.sh-tl-marker {
  position: absolute;
  left: -3.5rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
  z-index: 1;
}

.sh-tl-item--live .sh-tl-marker {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}

.sh-tl-item--soon .sh-tl-marker {
  border-style: dashed;
}

/* --- Coming Soon muted treatment --- */
.sh-card--soon {
  opacity: 0.75;
  transition: opacity 0.2s;
}

.sh-card--soon:hover { opacity: 1; }

/* --- Timeline content --- */
.sh-tl-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Timeline header (code + title inline) --- */
.sh-tl-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
}

.sh-tl-header .sh-card-title {
  flex-basis: 100%;
}

/* --- Coming Soon pill badge --- */
.sh-tl-soon-pill {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--muted);
  color: var(--paper);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

/* --- Actions row (details + CTA inline) --- */
.sh-tl-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sh-tl-actions .sh-card-details {
  text-align: left;
  padding: 0;
}

.sh-tl-actions .sh-card-cta {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  flex-shrink: 0;
}

/* --- Course code label --- */
.sh-card-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.sh-card--soon .sh-card-label { color: var(--muted); }

/* --- Title --- */
.sh-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
}

/* --- Tagline --- */
.sh-card-tagline {
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* --- For line --- */
.sh-card-for {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}

/* --- Walk away with --- */
.sh-card-build {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.sh-card--soon .sh-card-build { border-left-color: var(--muted); }

.sh-card-build-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.sh-card--soon .sh-card-build-label { color: var(--muted); }

/* --- CTA button --- */
.sh-card-cta {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  padding: 0.75rem 1rem;
}

.sh-card-details {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  display: block;
  padding: 0.25rem 0;
  transition: opacity 0.2s;
}
.sh-card-details:hover { opacity: 0.7; }

/* --- Outline CTA (waitlist) --- */
.btn-cta-outline.sh-card-cta {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.btn-cta-outline.sh-card-cta:hover {
  background: var(--ink);
  color: var(--paper);
}


/* --- Waitlist inline form --- */
.sh-waitlist-form {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

.sh-waitlist-form.hidden { display: none; }

.sh-waitlist-heading {
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.sh-waitlist-sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.sh-waitlist-inline {
  display: flex;
  gap: 0.5rem;
}

.sh-waitlist-inline input[type="email"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0;
  min-width: 0;
}

.sh-waitlist-inline input[type="email"]:focus {
  border-bottom-color: var(--ink);
}

.sh-waitlist-submit {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.sh-waitlist-submit:hover { background: var(--accent); }
.sh-waitlist-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.sh-waitlist-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

.sh-waitlist-status.success { color: #2e7d32; }
.sh-waitlist-status.error { color: var(--accent); }

/* --- Pricing: all courses line --- */
.pi-all-courses {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  nav .logo img { height: 40px; }

  .problem-grid,
  .layers-grid,
  .tutor-grid,
  .honesty-grid,
  .setup-grid,
  .timeline-tracks { grid-template-columns: 1fr; gap: 2rem; }

  .pi-grid { grid-template-columns: 1fr 1fr; }

  .phase-grid,
  .mode-grid { grid-template-columns: 1fr 1fr; }

  .retention-grid,
  .adapt-grid { grid-template-columns: 1fr; }

  .major-grid { grid-template-columns: 1fr; }

  .start-here-timeline { padding-left: 3.5rem; }

  .pricing-comparison { grid-template-columns: 1fr 1fr; }
  .plans-grid { grid-template-columns: 1fr 1fr; }

  .hero-meta { gap: 1.5rem; }

  .course-grid { grid-template-columns: 1fr 1fr; }

  .career-grid,
  .project-grid,
  .honesty-grid-detail { grid-template-columns: 1fr; }

  .phase { grid-template-columns: 6rem 1fr; }

  .unit-grid,
  .tool-grid,
  .project-examples,
  .rubric-grid { grid-template-columns: 1fr 1fr; }

  .prereq-grid { grid-template-columns: 1fr; }

  .cmap-grid { grid-template-columns: 1fr; }
  .cmap-major-grid { grid-template-columns: 1fr 1fr; }
  .foundation-grid { grid-template-columns: 1fr 1fr; }
  .tq-grid { grid-template-columns: 1fr; gap: 2rem; }

  .courses-teaser-grid { grid-template-columns: 1fr; }
  .problem-stats { grid-template-columns: 1fr; }

  .docs-steps { grid-template-columns: 1fr; }
  .learning-pace-grid { grid-template-columns: 1fr; }
  .docs-hub-links ul { gap: 1rem; justify-content: flex-start; padding: 0 0.5rem; }
}

/* ─── CONTACT FLOATING BUTTON + DIALOG ─── */
.contact-trigger {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 100;
  transition: color 0.2s;
}

.contact-trigger:hover { color: var(--ink); }

.contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-overlay.hidden { display: none; }

.contact-dialog {
  background: var(--paper);
  max-width: 480px;
  width: 90%;
  border-radius: 8px;
  padding: 2rem;
  position: relative;
}

.contact-dialog h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.contact-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.contact-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.contact-close:hover { color: var(--ink); }

#contact-form .form-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

#contact-form .form-row input { flex: 1; }

#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-bottom-color: var(--ink);
}

#contact-form textarea {
  resize: vertical;
  min-height: 80px;
}

#contact-form select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b6560' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

.contact-submit {
  margin-top: 0.5rem;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.form-status-success {
  color: #2e7d32;
}

.form-status-error {
  color: var(--accent);
}

@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .tour-grid { grid-template-columns: 1fr; max-width: 300px; }

  nav .container { height: 60px; }

  nav .logo img {
    height: 44px;
    margin-top: -4px;
    margin-left: -6px;
  }

  nav .nav-links { display: none; }
  nav .hamburger { display: flex; }

  nav .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(245,240,232,0.98);
    border-bottom: 1px solid var(--rule);
    padding: 1rem 2rem;
    gap: 1rem;
  }

  nav .nav-links.open .nav-link,
  nav .nav-links.open .cta-nav { font-size: 0.8rem; }


  html { font-size: 16px; }
  .hero { padding: 7rem 0 4rem; }
  .hiw-hero,
  .page-hero,
  .courses-hero,
  .about-hero { padding: 7rem 0 3rem; }
  .about-agent-grid { grid-template-columns: 1fr; }
  .about-founder-card { flex-direction: column; text-align: center; }
  .about-founder-card .about-avatar { margin: 0 auto 1rem; }
  .phase-grid, .mode-grid { grid-template-columns: 1fr; }
  .tour-step { gap: 1rem; }
  .pricing-comparison { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .pi-grid { grid-template-columns: 1fr; }
  .not-list li { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; }
  .phase strong { margin-bottom: 0.2rem; }
  .unit-grid, .tool-grid, .project-examples, .rubric-grid { grid-template-columns: 1fr; }
  .cmap-major-grid { grid-template-columns: 1fr; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-card { padding: 1.2rem; }
  .cmap-header { padding: 1.2rem 1.5rem; }
  .cmap-courses { padding: 0 1.5rem; }
  .cmap-major-card { padding: 1.2rem; }
  .work-is-demo { grid-template-columns: 1fr; }
  .start-here h2 { font-size: 1.9rem; }
  .start-here-timeline { padding-left: 2.75rem; }
  .sh-tl-marker { left: -2.75rem; width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
  .start-here-timeline::before { left: 0.55rem; }
  .sh-card-title { font-size: 1.5rem; }
  .real-session-flow { grid-template-columns: 1fr; }
  .docs-steps { grid-template-columns: 1fr; }
  .learning-pace-grid { grid-template-columns: 1fr; }
  .docs-hub-links ul { gap: 0.8rem; font-size: 0.65rem; }
  .docs-hub-links { top: 60px; }
  #contact-form .form-row { flex-direction: column; gap: 0; }
}