/* ==========================================================================
   Untether — subpage design system
   Reuses the class vocabulary of the shared decoy pages, but recolored to the
   green/cream palette + Helvetica-headings/Georgia-body typography of the main
   index.html so every page reads as one site. Edit tokens here to reskin all
   subpages at once. (The main index.html has its own inline styles and is not
   affected by this file.)
   ========================================================================== */

:root {
  /* Dark-by-default, matching index.html. Light mode is html.theme-light.
     --ink-900 is TEXT, not a background. Dark bands use --band so they stay
     dark in both themes (same trick as index.html's --band). */
  color-scheme: dark;
  --ink-900: #efe9dc;
  --ink-700: #c2b8a4;
  --ink-500: #c2b8a4;
  --ink-300: #8e8574;
  --paper: #141210;
  --paper-2: #1c1914;
  --paper-3: #242018;
  --card: #1c1914;
  --line: #2c2820;
  --accent: #3d9a62;
  --accent-2: #2f7d4e;
  --accent-soft: rgba(61, 154, 98, 0.18);
  --accent-line: rgba(61, 154, 98, 0.35);
  --gold: #e0a53a;
  --gold-soft: #3a2f16;
  --gold-line: #5a4a22;
  --danger: #e0908a;
  --danger-soft: rgba(224, 144, 138, 0.12);
  --danger-line: #5a3030;
  --band: #0c0b09;
  --band-fg: #efe9dc;
  --band-muted: #9a917f;
  --row-hover: #242018;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --masthead-bg: rgba(20, 18, 16, 0.92);
  --serif: 'Helvetica Neue', Arial, sans-serif;
  --sans: Georgia, 'Times New Roman', serif;
  --ui: 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1120px;
}

html.theme-light {
  color-scheme: light;
  --ink-900: #1c1a15;
  --ink-700: #2b271d;
  --ink-500: #565043;
  --ink-300: #8a8271;
  --paper: #faf7f0;
  --paper-2: #f1ece0;
  --paper-3: #e7e0d0;
  --card: #ffffff;
  --line: #ddd5c4;
  --accent: #1f6f43;
  --accent-2: #2a8a55;
  --accent-soft: #e4efe7;
  --accent-line: #cfe0d5;
  --gold: #a9761a;
  --gold-soft: #f7e8c8;
  --gold-line: #e6d3a3;
  --danger: #8a2b2b;
  --danger-soft: #fbf0f0;
  --danger-line: #e3c4c4;
  --band: #1c1a15;
  --band-fg: #faf7f0;
  --band-muted: #b7ae99;
  --row-hover: #fcfbf8;
  --masthead-bg: rgba(250, 247, 240, 0.92);
  --shadow-sm: 0 1px 2px rgba(28, 26, 21, .06), 0 2px 8px rgba(28, 26, 21, .04);
  --shadow-md: 0 2px 6px rgba(28, 26, 21, .08), 0 12px 32px rgba(28, 26, 21, .07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4, h5 { font-family: var(--serif); color: var(--ink-900); line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.03rem; font-weight: 700; }
p { margin: 0 0 1.05em; }
a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
small { font-size: .82rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.eyebrow {
  font-family: var(--ui);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem;
}
.lede { font-size: 1.14rem; color: var(--ink-500); }
.muted { color: var(--ink-300); }
.mono { font-family: var(--mono); font-size: .88em; }

/* ---------- Top bar ---------- */
.topbar { background: var(--band); color: var(--band-muted); font-size: .78rem; letter-spacing: .02em; font-family: var(--ui); }
.topbar .wrap { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 7px 24px; flex-wrap: wrap; }
.topbar a { color: #f0e9d8; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-badges { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Masthead / nav ---------- */
.masthead { background: var(--masthead-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
/* nowrap until the mobile breakpoint — "Methodology" is the longest label and
   used to tip the CTA onto a second row near the shared 1120px content width. */
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 9px; display: grid; place-items: center;
  font-family: var(--ui); font-size: 1.15rem; font-weight: 800; color: #fff; background: var(--accent);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.16; min-width: 0; }
.brand-name { font-family: var(--ui); font-size: 1.05rem; color: var(--ink-900); font-weight: 800; letter-spacing: -.01em; }
.brand-sub { font-family: var(--ui); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-300); white-space: nowrap; }

.nav {
  display: flex; align-items: center; gap: 2px;
  flex-wrap: nowrap; flex: 1 1 auto; justify-content: flex-end;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--ui);
  padding: 8px 9px; border-radius: var(--radius);
  font-size: .84rem; font-weight: 500; color: var(--ink-500); text-decoration: none;
  white-space: nowrap; flex: 0 0 auto;
}
.nav a:hover { background: var(--paper-2); color: var(--ink-900); }
.nav a.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 500; }

/* Buttons must match index.html's inline rules exactly, or the masthead drifts
   between the home page and the subpages. Three things mattered:
   - no letter-spacing and no 1px border: those added 7px to the nav's width,
     which tipped "Request a pilot" onto a second line at widths where the home
     page kept it inline.
   - padding/font-size matched to index so the header is the same height.
   - .btn-primary's colour needs !important: `.nav a` (0,1,1) outranks
     `.btn-primary` (0,1,0), so without it the header button's white label lost
     to the nav link colour and rendered dark brown. */
.btn {
  display: inline-block; font-family: var(--ui);
  padding: 12px 22px; border-radius: 999px;
  font-size: .92rem; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary { background: var(--accent); color: #fff !important; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-2); color: #fff !important; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink-700) !important; background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-sm { padding: 7px 12px; font-size: .78rem; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1000px 420px at 12% -10%, rgba(31,111,67,.10), transparent 60%),
    radial-gradient(700px 340px at 88% 0%, rgba(217,147,31,.10), transparent 55%),
    var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 76px 0 66px;
}
.hero-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: 52px; align-items: center; }
.hero h1 { margin-bottom: .38em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 22px; }
.hero-trust { display: flex; gap: 26px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-300); font-family: var(--ui); }

.chalkcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-md); }
.chalkcard h4 { margin-top: 0; }
.formula-strip {
  font-family: var(--mono); font-size: .84rem; color: var(--ink-500);
  background: var(--paper-2); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin: 10px 0 0; overflow-x: auto; white-space: nowrap;
}

/* ---------- Sections ---------- */
section { padding: 66px 0; }
section.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.ink { background: var(--band); color: var(--band-muted); border: 0; }
section.ink h2, section.ink h3 { color: var(--band-fg); }
section.ink .eyebrow { color: var(--gold); }
section.ink a { color: #9fe0b8; }

.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-family: var(--mono);
  font-size: 1.02rem; margin-bottom: 14px; border: 1px solid var(--accent-line);
}

.tag {
  display: inline-block; font-family: var(--ui);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line);
}
.tag.green { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.tag.grey { background: var(--paper-3); color: var(--ink-500); border-color: var(--line); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 18px 12px; border-left: 1px solid rgba(255,255,255,.14); }
.stat:first-child { border-left: 0; }
.stat-num { font-family: var(--serif); font-size: 2.3rem; color: var(--band-fg); line-height: 1.1; }
.stat-lbl { font-family: var(--ui); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 620px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
thead th { font-family: var(--ui); background: var(--paper-2); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }

/* ---------- Syllabus / modules ---------- */
.module { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); margin-bottom: 16px; overflow: hidden; }
.module-head {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 18px 22px; background: var(--paper-2); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.module-head h3 { margin: 0; font-size: 1.06rem; }
.module-body { padding: 20px 22px; }
.module-body ul { margin: 0 0 1em; padding-left: 1.15em; }
.module-body li { margin-bottom: .38em; }
.objectives { font-size: .86rem; color: var(--ink-500); border-left: 3px solid var(--accent-soft); padding-left: 14px; }

/* ---------- People ---------- */
.tutor { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.avatar {
  width: 96px; height: 96px; border-radius: 50%; background: var(--paper-3);
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.9rem;
  color: var(--ink-500); border: 1px solid var(--line);
}
.credential-list { font-size: .84rem; color: var(--ink-500); margin: 0; padding-left: 1.05em; }

/* ---------- Testimonials ---------- */
.quote { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 24px; }
.quote blockquote { margin: 0 0 14px; font-family: var(--sans); font-size: 1.04rem; color: var(--ink-900); }
.quote cite { font-family: var(--ui); font-style: normal; font-size: .82rem; color: var(--ink-300); }
.stars { color: var(--gold); letter-spacing: .12em; font-size: .84rem; }

/* ---------- Pricing ---------- */
.plan { display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.price { font-family: var(--serif); font-size: 2.5rem; color: var(--ink-900); line-height: 1; margin: 8px 0 2px; }
.price span { font-family: var(--ui); font-size: .82rem; color: var(--ink-300); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; font-size: .88rem; flex: 1; }
.plan li { padding: 7px 0 7px 24px; border-bottom: 1px dashed var(--paper-3); position: relative; }
.plan li::before { content: "→"; position: absolute; left: 0; color: var(--accent-2); font-size: .82rem; }

/* ---------- FAQ ---------- */
details.faq { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 0; margin-bottom: 12px; }
details.faq summary {
  font-family: var(--ui);
  cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--ink-900);
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent-2); font-size: 1.2rem; }
details.faq[open] summary::after { content: "–"; }
details.faq .faq-body { padding: 0 20px 18px; font-size: .93rem; color: var(--ink-500); border-top: 1px solid var(--paper-3); padding-top: 14px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { font-family: var(--ui); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-700); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink-900);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent-2); }
.field .hint { font-size: .76rem; color: var(--ink-300); margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Misc ---------- */
.callout { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); padding: 20px 22px; font-size: .92rem; }
.callout.gold { background: var(--gold-soft); border-color: var(--gold-line); }
.crumbs { font-family: var(--ui); font-size: .78rem; color: var(--ink-300); padding: 16px 0 0; }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-head { padding: 46px 0 34px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px; font-size: .89rem; }
.kv dt { font-family: var(--ui); font-weight: 700; color: var(--ink-900); }
.kv dd { margin: 0; color: var(--ink-500); }

.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px; font-size: .88rem; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: .3em; }

/* ---------- Footer ---------- */
.footer { background: var(--band); color: var(--band-muted); padding: 56px 0 26px; font-size: .86rem; font-family: var(--ui); }
.footer h5 { color: var(--band-fg); font-family: var(--ui); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; font-weight: 700; }
.footer a { color: var(--band-muted); text-decoration: none; display: block; padding: 4px 0; }
.footer a:hover { color: var(--band-fg); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .78rem; color: var(--band-muted);
}
.footer-bottom a { display: inline; }
.accred { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.accred span { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; padding: 4px 8px; color: var(--band-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .g4, .g3, .g2, .footer-grid, .stat-row, .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
}
/* header wraps at the SAME breakpoint as index.html so the nav is identical site-wide */
@media (max-width: 900px) {
  .masthead .wrap { flex-wrap: wrap; }
  .nav { flex-wrap: wrap; overflow-x: visible; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  .tutor { grid-template-columns: 1fr; }
  section { padding: 46px 0; }
}

/* ---------- Intake submission states ---------- */
.intake-error { background: var(--danger-soft); border: 1px solid var(--danger-line); border-left: 3px solid var(--danger); border-radius: var(--radius); color: var(--danger); padding: 11px 14px; margin-bottom: 16px; font-size: .86rem; }
.intake-confirm { outline: none; }
.intake-confirm-mark { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 18px; }
.intake-confirm h3 { margin-top: 0; }
.intake-confirm h4 { margin-top: 26px; }
.intake-confirm-kv { grid-template-columns: 190px 1fr; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0 0; }
.intake-confirm-kv dd { color: var(--ink-900); }
.intake-steps { font-size: .92rem; padding-left: 1.15em; margin: 0 0 1.1em; }
.intake-steps li { margin-bottom: .55em; }
@media (max-width: 620px) { .intake-confirm-kv { grid-template-columns: 1fr; } }


/* ---------- Theme toggle (bottom-right, shared with index.html) ---------- */
.theme-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper-2);
  color: var(--ink-900); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 22px; height: 22px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.theme-light .theme-toggle .icon-sun { display: block; }
html.theme-light .theme-toggle .icon-moon { display: none; }