/* ============================================================
   Asbury AI Academy — "Harbor Morning / Work Order" design system
   ------------------------------------------------------------
   Direction: a working waterfront at first light. Cool fog paper,
   deep harbor pine ink, sea-glass green, one signal-buoy orange
   reserved for actions and urgency. Ticket rules, mono eyebrows,
   and tide-line texture instead of SaaS cards and glows.
   ============================================================ */

:root {
  /* --- Color --- */
  --harbor-950: #0a1f22;
  --harbor-900: #0e2a2e;
  --harbor-800: #14393e;
  --harbor-600: #1e4f55;
  --harbor-400: #3e7a82;

  --sea-700: #1f5f55;
  --sea-500: #2e7d6f;
  --sea-300: #7fb3a4;
  --sea-100: #d7e8e0;

  --fog-50: #f7f9f4;
  --fog-100: #f1f4ec;
  --fog-200: #e4e9dc;
  --fog-300: #cfd7c6;

  --ink: #101e1c;
  --ink-soft: #334441;
  --ink-faint: #64766f;

  --line: #c4cec2;
  --line-dark: #2a4a4f;

  --buoy-700: #b23a08;
  --buoy-600: #d9480f;
  --buoy-500: #e85a1c;
  --buoy-soft: #fbe3d3;

  --brass-600: #8a6d1b;
  --brass-soft: #f0e6c8;

  --paper-card: #fbfdf8;

  /* --- Type --- */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* --- Shape & rhythm --- */
  --radius-s: 4px;
  --radius-m: 8px;
  --maxw: 1180px;
  --maxw-read: 760px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Single-hair shadow only — no multi-layer stacks */
  --shadow-line: 0 1px 0 rgba(10, 31, 34, 0.18);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--fog-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--buoy-500); color: #fff; }

a { color: var(--sea-700); }
a:hover { color: var(--buoy-700); }

img, svg { display: block; max-width: 100%; }

/* ---------- Type scale ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h2.section-title {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea-700);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--buoy-600);
  flex: none;
}
.eyebrow.on-dark { color: var(--sea-300); }

.lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-read {
  max-width: var(--maxw-read);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section.block { padding-block: clamp(64px, 9vw, 120px); }

/* Perforation divider — the work-ticket rule */
.perf {
  border: 0;
  border-top: 2px dashed var(--line);
  margin: 0;
}
.perf-dark { border-top-color: var(--line-dark); }

/* ---------- Chrome: nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 249, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
}
.brandmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brandmark .mark {
  width: 34px;
  height: 34px;
  flex: none;
}
.brandmark .word { line-height: 1.1; }
.brandmark .word strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}
.brandmark .word span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink-soft);
  border-radius: var(--radius-s);
}
.nav-links a:hover { color: var(--ink); background: var(--fog-200); }
.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 9px 14px;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Buttons (squared — never pills) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  padding: 16px 26px;
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:active { transform: translateY(1px); }
.btn .arrow { font-family: var(--font-mono); font-weight: 500; transition: transform 160ms ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-buoy { background: var(--buoy-600); color: #fff; }
.btn-buoy:hover { background: var(--buoy-700); color: #fff; }

.btn-ghost { border-color: var(--harbor-600); color: var(--harbor-900); background: transparent; }
.btn-ghost:hover { background: var(--harbor-900); color: var(--fog-50); border-color: var(--harbor-900); }

.btn-fog { background: var(--fog-50); color: var(--harbor-900); border-color: var(--fog-50); }
.btn-fog:hover { background: #fff; color: var(--harbor-950); border-color: #fff; }

.btn-ghost-light { border-color: rgba(241, 244, 236, 0.55); color: var(--fog-50); background: transparent; }
.btn-ghost-light:hover { background: var(--fog-50); color: var(--harbor-900); border-color: var(--fog-50); }

.btn-sm { padding: 11px 18px; font-size: 14.5px; }

/* ============================================================
   HERO — one full-bleed composition.
   Budget: brand eyebrow, one headline, one sentence, one CTA
   group, one dominant visual. Nothing else above the fold.
   ============================================================ */
.hero {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(180deg, #eef3ea 0%, #dde7dd 40%, #c3d4cb 82%, #33565c 96%, var(--harbor-900) 100%);
  border-bottom: 1px solid var(--harbor-900);
}
.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 67px);
  min-height: calc(100dvh - 67px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(48px, 9vh, 110px) clamp(48px, 8vh, 96px);
}
.hero-copy { max-width: 720px; }
.hero .eyebrow { color: var(--harbor-800); }
.hero h1 {
  font-size: clamp(44px, 7.4vw, 96px);
  font-weight: 800;
  color: var(--harbor-950);
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--buoy-700);
  font-style: normal;
}
.hero-sub {
  margin: 22px 0 34px;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--harbor-800);
  max-width: 56ch;
  text-wrap: pretty;
}
/* The bridge line sits on the dark pier. A fog plate keeps the ink readable
   without moving the sentence (#52018). */
.hero-copy > .hero-sub:last-child {
  color: var(--harbor-950);
  background: #eef3ea;
  padding: 8px 12px;
  border-radius: 6px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Motion 1 — slow tide drift + gull bob (presence, not noise) */
@keyframes tide-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-26px); }
}
@keyframes gull-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes sun-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.tide-a { animation: tide-drift 14s ease-in-out infinite; }
.tide-b { animation: tide-drift 22s ease-in-out infinite reverse; }
.gull { animation: gull-bob 6s ease-in-out infinite; }
.sun-disc { animation: sun-breathe 9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .tide-a, .tide-b, .gull, .sun-disc { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Motion 2 — reveal on scroll (hierarchy) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(0.22, 0.61, 0.21, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

/* ---------- Promise ticker (single rule, not a stat strip) ---------- */
.promise-rule {
  background: var(--harbor-950);
  color: var(--fog-100);
  overflow: hidden;
}
.promise-rule p {
  margin: 0;
  padding-block: 15px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.promise-rule p::-webkit-scrollbar { display: none; }
.promise-rule .dot { color: var(--buoy-500); padding-inline: 14px; }

/* ---------- How it works: numbered ledger rows ---------- */
.steps { margin: 44px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(16px, 3vw, 36px);
  padding-block: 30px;
  border-top: 1px solid var(--ink);
}
.steps li:last-child { border-bottom: 1px solid var(--ink); }
.steps .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  color: var(--harbor-900);
}
.steps .num::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--buoy-600);
  margin-top: 10px;
}
.steps h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 8px; }
.steps p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.steps p + p { margin-top: 8px; }

/* ---------- Module index: work-order rows (real links) ---------- */
.path-diagram {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sea-500);
  background: var(--paper-card);
  border-radius: var(--radius-s);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  overflow-x: auto;
  white-space: nowrap;
}
.path-diagram strong { color: var(--harbor-900); font-weight: 500; }
.path-diagram .fork { color: var(--buoy-700); }
.path-diagram .lbl {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.module-index { margin-top: 26px; border-top: 2px solid var(--ink); }
.module-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: clamp(14px, 3vw, 32px);
  align-items: center;
  padding: 26px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
}
/* Motion 3 — row presence: ink rule sweep + arrow travel */
.module-row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--buoy-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
a.module-row:hover::after { transform: scaleX(1); }
.module-row .m-num {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.module-row .m-body h3 {
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 700;
  margin-bottom: 6px;
}
.module-row .m-body h3 .live-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--sea-500);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: 3px;
}
.module-row .m-body p { margin: 0; color: var(--ink-soft); font-size: 16px; max-width: 64ch; }
.module-row .m-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.module-row .m-go {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--harbor-800);
  transition: transform 200ms ease, color 200ms ease;
  padding-right: 10px;
}
a.module-row:hover .m-go { transform: translateX(8px); color: var(--buoy-700); }
.module-row.is-draft { opacity: 0.72; }
.module-row.is-draft .m-go { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.module-row .m-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 2px;
  color: var(--ink-soft);
  background: var(--paper-card);
}

/* ---------- Honesty section (dark harbor) ---------- */
.honesty {
  background: var(--harbor-950);
  color: var(--fog-100);
  position: relative;
  overflow: clip;
}
.honesty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220'%3E%3Cg fill='none' stroke='%232a4a4f' stroke-width='1.2'%3E%3Cpath d='M-20 40 Q 120 10 260 40 T 560 40 T 860 40'/%3E%3Cpath d='M-20 90 Q 140 60 280 90 T 580 90 T 880 90'/%3E%3Cpath d='M-20 140 Q 100 110 260 140 T 560 140 T 860 140'/%3E%3Cpath d='M-20 190 Q 150 160 300 190 T 600 190 T 900 190'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  opacity: 0.7;
  pointer-events: none;
}
.honesty .wrap { position: relative; z-index: 1; }
.honesty h2 { color: var(--fog-50); }
.honesty .lede { color: #b9cdc4; }
.honesty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 48px;
}
.honesty-col h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line-dark);
  margin-bottom: 6px;
}
.honesty-col.teach h3 { color: var(--sea-300); border-bottom-color: var(--sea-500); }
.honesty-col.refuse h3 { color: var(--buoy-soft); border-bottom-color: var(--buoy-600); }
.honesty-col ul { list-style: none; margin: 0; padding: 0; }
.honesty-col li {
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 16px;
  position: relative;
}
.honesty-col.teach li::before { content: "→"; position: absolute; left: 2px; color: var(--sea-300); font-family: var(--font-mono); }
.honesty-col.refuse li::before { content: "×"; position: absolute; left: 4px; color: var(--buoy-500); font-family: var(--font-mono); font-size: 19px; line-height: 1.4; }

/* ---------- Founder note ---------- */
.founder { background: var(--fog-50); }
.founder-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.founder-seal {
  width: 100%;
  aspect-ratio: 1;
  background: var(--harbor-900);
  color: var(--fog-50);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.founder-seal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(241, 244, 236, 0.35);
  border-radius: 4px;
  pointer-events: none;
}
.founder-seal .initials {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
}
.founder-seal .locale {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea-300);
}
.founder blockquote {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.8vw, 29px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--harbor-900);
  text-wrap: pretty;
}
.founder .sig {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.founder .sig strong { color: var(--ink); }

/* ---------- Final CTA band ---------- */
.final-cta {
  background: var(--buoy-600);
  color: #fff;
}
.final-cta .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding-block: clamp(48px, 6vw, 72px);
}
.final-cta h2 { font-size: clamp(26px, 3.6vw, 42px); color: #fff; }
.final-cta p { margin: 12px 0 0; color: #ffe4d2; max-width: 52ch; }
.final-cta .btn-buoy { background: var(--harbor-950); }
.final-cta .btn-buoy:hover { background: #000; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--harbor-950);
  color: #9fb8b0;
  font-size: 15px;
}
.site-footer .wrap {
  padding-block: 56px 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea-300);
  margin: 0 0 16px;
}
.site-footer a { color: #d7e8e0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer .fine {
  border-top: 1px solid var(--line-dark);
  padding-block: 22px 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* ============================================================
   LESSON PAGES
   ============================================================ */
.lesson-hero {
  background: var(--harbor-950);
  color: var(--fog-100);
  position: relative;
  overflow: clip;
}
.lesson-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(10,31,34,0.55));
  pointer-events: none;
}
.lesson-hero .wrap-read { padding-block: clamp(48px, 7vw, 84px) clamp(56px, 8vw, 96px); position: relative; z-index: 1; }
.lesson-hero h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 800;
  color: #fff;
}
.lesson-hero .promise {
  margin: 18px 0 0;
  font-size: clamp(17px, 2.2vw, 21px);
  color: #b9cdc4;
  max-width: 58ch;
  text-wrap: pretty;
}
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sea-300);
}
.lesson-meta strong { color: #fff; font-weight: 500; }

.lesson-body { background: var(--fog-100); }
.lesson-body .wrap-read { padding-block: clamp(40px, 6vw, 72px); }

.ticket {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--harbor-800);
  border-radius: var(--radius-m);
  padding: clamp(22px, 3.4vw, 34px);
  margin-block: 34px;
  box-shadow: var(--shadow-line);
}
.ticket.buoy { border-top-color: var(--buoy-600); }
.ticket.sea { border-top-color: var(--sea-500); }
.ticket h2 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.ticket p, .ticket li { color: var(--ink-soft); }
.ticket > :last-child { margin-bottom: 0; }

.lesson-body h2.ptitle {
  font-size: clamp(24px, 3.2vw, 33px);
  margin: 54px 0 16px;
  padding-top: 34px;
  border-top: 2px solid var(--ink);
}
.lesson-body p { color: var(--ink-soft); }
.lesson-body ol.steps-tight, .lesson-body ul.steps-tight { color: var(--ink-soft); padding-left: 22px; }
.lesson-body ol.steps-tight li, .lesson-body ul.steps-tight li { margin-bottom: 10px; }
.lesson-body ol.steps-tight li::marker { font-weight: 700; color: var(--harbor-800); }

.callout-no {
  background: var(--harbor-950);
  color: var(--fog-100);
  border-radius: var(--radius-m);
  padding: clamp(22px, 3.4vw, 34px);
  margin-block: 34px;
  border-left: 6px solid var(--buoy-600);
}
.callout-no h2 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--buoy-soft);
  margin-bottom: 12px;
}
.callout-no p { color: #c9dcd4; margin: 0; }
.callout-no p + p { margin-top: 10px; }

/* Interactive checklist */
.checklist { list-style: none; margin: 18px 0 0; padding: 0; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 4px;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
}
.checklist li:last-child { border-bottom: 0; }
.checklist input {
  appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 3px;
  border: 2px solid var(--harbor-600);
  border-radius: var(--radius-s);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.checklist input:checked { background: var(--sea-500); border-color: var(--sea-500); }
.checklist input:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.checklist input:focus-visible { outline: 3px solid var(--buoy-500); outline-offset: 2px; }
.checklist li.done span { text-decoration: line-through; color: var(--ink-faint); }
.check-progress {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea-700);
  margin-top: 14px;
}

/* 7-day log table */
.log-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--harbor-600) var(--fog-100);
}
.log-table-wrap::-webkit-scrollbar { height: 12px; }
.log-table-wrap::-webkit-scrollbar-thumb { background: var(--harbor-600); border-radius: 6px; }
table.log-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; background: #fff; }
.log-table th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  background: var(--harbor-900);
  color: var(--fog-100);
  white-space: nowrap;
}
.log-table td { padding: 14px; border-top: 1px solid var(--line); color: var(--ink-faint); vertical-align: top; }
.log-table td[contenteditable="true"] { color: var(--ink); background: #fffdf4; }
.log-table td[contenteditable="true"]:focus { outline: 2px solid var(--buoy-500); background: #fff; }

/* Prompt block + copy */
.prompt-block {
  background: var(--harbor-950);
  border-radius: var(--radius-m);
  margin-top: 18px;
  overflow: hidden;
}
.prompt-block header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sea-300);
}
.prompt-block pre {
  margin: 0;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: #e7f0ea;
  white-space: pre-wrap;
}
.copy-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--sea-500);
  color: #fff;
  border: 0;
  border-radius: var(--radius-s);
  padding: 8px 14px;
  cursor: pointer;
}
.copy-btn:hover { background: var(--sea-700); }
.copy-btn.copied { background: var(--buoy-600); }

/* Tier picker */
.tier-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.tier-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.tier-btn small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 12px; margin-top: 6px; color: var(--ink-faint); }
.tier-btn[aria-pressed="true"] { border-color: var(--buoy-600); background: #fff7f1; color: var(--ink); }
.tier-panel {
  margin-top: 14px;
  border-left: 4px solid var(--buoy-600);
  background: #fff;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 22px;
  color: var(--ink-soft);
}
.tier-panel h3 { font-size: 19px; margin-bottom: 8px; color: var(--ink); }
.tier-panel p { margin: 0 0 8px; }
.tier-panel p:last-child { margin-bottom: 0; }

/* Prev / next + consult strip */
.lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-top: 56px;
}
.lesson-nav a {
  background: var(--paper-card);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
}
.lesson-nav a:hover { background: #fff; }
.lesson-nav a span {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.lesson-nav a strong { font-family: var(--font-display); font-size: 18px; color: var(--harbor-900); }
.lesson-nav a.next { text-align: right; }

.consult-strip {
  margin-top: 28px;
  background: var(--sea-100);
  border: 1px solid var(--sea-300);
  border-radius: var(--radius-m);
  padding: clamp(22px, 3.4vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.consult-strip p { margin: 6px 0 0; font-size: 15.5px; }
.consult-strip strong { font-family: var(--font-display); font-size: 20px; color: var(--harbor-900); }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea-300);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--sea-300); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* ---------- Two-track groups (operator vs terminal-agents) ---------- */
.track-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.track-group { margin-top: 54px; }
.track-group:first-of-type { margin-top: 40px; }
.track-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog-50);
  background: var(--harbor-900);
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-s);
  margin: 0 0 16px;
}
.track-label.ta { background: var(--sea-700); }
.track-group h3.track-title {
  font-size: clamp(24px, 3.2vw, 34px);
  margin-bottom: 10px;
}
.track-group .lede { font-size: 16.5px; }
.track-group .module-index { margin-top: 22px; }
.track-foot {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.module-row .m-num.ta-num { color: var(--sea-700); font-weight: 500; }

/* OS tab label inside prompt blocks (reuses .prompt-block/.copy-btn) */
.prompt-block header .os-tag {
  font-size: 11px;
  border: 1px solid var(--line-dark);
  padding: 2px 8px;
  border-radius: 2px;
  margin-left: 10px;
  letter-spacing: 0.06em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .honesty-grid { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-seal { max-width: 220px; }
  .final-cta .wrap { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .tier-picker { grid-template-columns: 1fr; }
  .consult-strip { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--fog-50);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 18px;
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 10px; font-size: 17px; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .site-nav .wrap { gap: 12px; }

  .hero-inner { min-height: calc(100svh - 67px); }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  /* Narrow crop centers the arcade behind the copy — simplify to open water */
  .hero-scene .shore-detail { display: none; }

  .module-row { grid-template-columns: 1fr auto; }
  .module-row .m-num { display: none; }
  .steps li { grid-template-columns: 1fr; gap: 10px; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav a.next { text-align: left; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}

@media print {
  .site-nav, .lesson-nav, .consult-strip, .site-footer, .copy-btn, .tier-picker, .os-picker, .start-here { display: none !important; }
  body { background: #fff; }
  .lesson-hero { background: #fff; color: #000; }
  .lesson-hero h1, .lesson-hero .promise, .lesson-meta, .lesson-meta strong, .step-position { color: #000; }
  .ticket, .prompt-block, .callout-no, .try-this, .emergency-brake { break-inside: avoid; }
}

/* ============================================================
   UI v2 — research-driven evolution (2026-09).
   Harbor Morning kept: same tokens, type trio, ledger rows,
   dark end cards. New: step position, step times, try-this,
   inline don't-do, emergency brake, undo pills, OS switcher,
   start-here triage, mobile type, readable Done, 44px copy.
   ============================================================ */

/* ---------- Step position + per-step time ---------- */
.step-position {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea-300);
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}
.step-kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea-700);
  margin: 54px 0 0;
  padding-top: 30px;
  border-top: 2px solid var(--ink);
}
.step-kicker + h2.ptitle {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
.step-time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 8px 0 0;
}
.step-time::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--sea-500);
  vertical-align: middle;
  margin-right: 10px;
}

/* ---------- Try-this callout (the pause-and-do) ---------- */
.try-this {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--sea-500);
  border-radius: var(--radius-m);
  padding: clamp(18px, 3vw, 26px);
  margin-block: 26px;
  box-shadow: var(--shadow-line);
}
.try-this > .try-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea-700);
  margin: 0 0 10px;
}
.try-this p { margin: 0; color: var(--ink); }
.try-this p + p { margin-top: 8px; }
.try-this .expect {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--fog-100);
  border: 1px dashed var(--line);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  margin-top: 12px;
}
.try-this .expect strong { color: var(--sea-700); font-weight: 500; }

/* ---------- Inline don't-do (beside the step it prevents) ---------- */
.dont-inline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff7f1;
  border: 1px solid var(--line);
  border-left: 6px solid var(--buoy-600);
  border-radius: var(--radius-m);
  padding: 14px 18px;
  margin-block: 20px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.dont-inline strong.stamp {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--buoy-600);
  border-radius: 2px;
  padding: 4px 9px;
  margin-top: 2px;
}
.dont-inline p { margin: 0; }

/* ---------- Emergency brake (stuck / panicked) ---------- */
.emergency-brake {
  background: #fffdf4;
  border: 1px solid var(--brass-600);
  border-top: 4px solid var(--brass-600);
  border-radius: var(--radius-m);
  padding: clamp(20px, 3.2vw, 30px);
  margin-block: 30px;
  box-shadow: var(--shadow-line);
}
.emergency-brake > h2,
.emergency-brake > h3 {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-600) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}
.emergency-brake ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.emergency-brake li { margin-bottom: 8px; }
.emergency-brake li:last-child { margin-bottom: 0; }
.emergency-brake code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--harbor-900);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ---------- Undo pill (reversibility next to the action) ---------- */
.undo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--harbor-800);
  background: var(--sea-100);
  border: 1px solid var(--sea-300);
  border-radius: 999px;
  padding: 8px 16px;
  margin-top: 12px;
}
.undo-pill code {
  background: var(--harbor-900);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

/* ---------- OS switcher (one persisted OS, one command path) ---------- */
.os-picker {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--sea-500);
  border-radius: var(--radius-m);
  padding: clamp(18px, 3vw, 26px);
  margin-block: 28px;
  box-shadow: var(--shadow-line);
}
.os-picker > p.os-q {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.os-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.os-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 10px;
  min-height: 56px;
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.os-btn small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; margin-top: 4px; color: var(--ink-faint); }
.os-btn[aria-pressed="true"] { border-color: var(--sea-500); background: #f2f8f5; color: var(--ink); }
.os-btn:hover { border-color: var(--sea-500); }
.os-note { font-size: 14px; color: var(--ink-faint); margin: 12px 0 0; }
html[data-os] [data-os]:not([data-os~="all"]) { display: none; }
html[data-os="mac"] [data-os~="mac"],
html[data-os="win"] [data-os~="win"],
html[data-os="wsl"] [data-os~="wsl"] { display: revert; }
html[data-os="mac"] tr[data-os~="mac"],
html[data-os="win"] tr[data-os~="win"],
html[data-os="wsl"] tr[data-os~="wsl"] { display: table-row; }
/* Unpicked state: show everything, nudge once */
.os-nudge {
  display: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--buoy-700);
  margin-top: 12px;
}
html:not([data-os]) .os-nudge { display: block; }

/* ---------- Start-here triage (landing) ---------- */
.start-here {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--buoy-600);
  border-radius: var(--radius-m);
  padding: clamp(24px, 4vw, 40px);
  margin-top: 36px;
  box-shadow: var(--shadow-line);
}
.start-here h3 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin: 0 0 8px;
}
.start-here > p { color: var(--ink-soft); margin: 0 0 6px; max-width: 62ch; }
.triage-q { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.triage-q p.q {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.triage-q p.q .qnum {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-right: 10px;
}
.triage-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.triage-opt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  min-height: 48px;
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.triage-opt[aria-pressed="true"] { border-color: var(--harbor-800); background: var(--harbor-900); color: #fff; }
.triage-opt:hover { border-color: var(--harbor-800); }
.triage-result {
  margin-top: 22px;
  border-left: 6px solid var(--sea-500);
  background: #f2f8f5;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 18px 22px;
  color: var(--ink-soft);
}
.triage-result strong { color: var(--harbor-900); }
.triage-result[hidden] { display: none; }
/* Four doors after the triage */
.door-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.door {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--harbor-800);
  border-radius: var(--radius-s);
  padding: 18px 18px 20px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.door:hover { border-color: var(--harbor-800); transform: translateY(-2px); }
.door.first { border-top-color: var(--buoy-600); }
.door .door-k {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.door h4 { font-family: var(--font-display); font-size: 18px; margin: 8px 0 6px; color: var(--harbor-900); }
.door p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.door .go { font-family: var(--font-mono); font-size: 13px; color: var(--buoy-700); display: block; margin-top: 12px; }
.track-label.cb { background: var(--buoy-700); }
.track-label.pf { background: var(--harbor-600); }
.track-label.la { background: var(--sea-500); }
.track-label.ca { background: var(--buoy-600); }
.module-row .m-num.cb-num { color: var(--buoy-700); font-weight: 500; }
.module-row .m-num.pf-num { color: var(--harbor-600); font-weight: 500; }
.module-row .m-num.la-num { color: var(--sea-500); font-weight: 500; }
.module-row .m-num.ca-num { color: var(--buoy-600); font-weight: 500; }

/* ---------- Checklist: readable Done, no guilt strikethrough ---------- */
.checklist li.done span { text-decoration: none; color: var(--ink); }
.checklist li.done span::after {
  content: "Done";
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea-700);
  background: var(--sea-100);
  border: 1px solid var(--sea-300);
  border-radius: 2px;
  padding: 2px 8px;
  margin-left: 10px;
  white-space: nowrap;
}

/* ---------- Copy button: 44px target, word confirmation ---------- */
.copy-btn { min-height: 44px; min-width: 76px; padding: 10px 16px; }
.copy-btn:focus-visible { outline: 3px solid var(--buoy-500); outline-offset: 2px; }
.prompt-block header { min-height: 56px; }

/* ---------- Optional depth in disclosures ---------- */
.lesson-body details.opt {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper-card);
  margin-block: 20px;
  padding: 0;
}
.lesson-body details.opt summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--harbor-900);
  list-style-position: inside;
}
.lesson-body details.opt summary::marker { color: var(--sea-700); }
.lesson-body details.opt .opt-body { padding: 0 20px 20px; color: var(--ink-soft); }
.lesson-body details.opt .opt-body > :first-child { margin-top: 0; }

/* ---------- Lesson body type: hold readable size on small screens ---------- */
.lesson-body { font-size: 18px; }
.lesson-body p, .lesson-body li { text-wrap: pretty; }

/* ---------- Worked example figure ---------- */
.worked-example {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  margin-block: 20px;
  overflow: hidden;
}
.worked-example > figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sea-700);
  background: var(--sea-100);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}
.worked-example .wx-body { padding: 16px; color: var(--ink-soft); font-size: 16px; }
.worked-example .wx-body > :first-child { margin-top: 0; }
.worked-example .wx-body > :last-child { margin-bottom: 0; }

/* ---------- Mobile worksheet: PDF first, stacked example ---------- */
.ws-mobile { display: none; }
@media (max-width: 720px) {
  .lesson-body { font-size: 18px; }
  .ws-preview-table { display: none; }
  .ws-mobile {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    margin-top: 16px;
  }
  .ws-mobile > p.ws-cap {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sea-700);
    background: var(--sea-100);
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
  }
  .ws-mobile dl { margin: 0; padding: 6px 16px 14px; }
  .ws-mobile dt {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 12px;
  }
  .ws-mobile dd { margin: 4px 0 0; color: var(--ink); font-size: 16px; }
  .os-options { grid-template-columns: 1fr; }
  .door-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .door-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .door-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Footer: eight columns for six tracks ---------- */
.site-footer .wrap:first-child { grid-template-columns: 1.2fr repeat(7, 1fr); }
@media (max-width: 1100px) {
  .site-footer .wrap:first-child { grid-template-columns: 1fr 1fr 1fr; }
}
/* Same selector as the 1100px rule so it wins over that 3-column track
   below 720px. The earlier `.site-footer .wrap` 1-column rule loses
   on specificity and let the third column overflow at 393px (#52018). */
@media (max-width: 720px) {
  .site-footer .wrap:first-child { grid-template-columns: 1fr; }
}

/* ---------- Lesson nav on lesson pages: no header consult CTA ---------- */
body.lesson-page .nav-cta { display: none; }
body.lesson-page .site-nav .wrap { gap: 20px; }