/* Unschool -- marketing landing page.
   Ported directly from the app's "Threshold" design system (docs/DESIGN.md and
   the app prototype): warm paper ground, near-black ink, one restrained
   burnt-coral accent, Zodiak (display serif) + General Sans (body), the app's
   subject-card / spine / tick language, and the app phone chrome. The landing
   is the same product on a wider canvas -- not a separate marketing look. */

:root {
  /* Type -- from the app design system */
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;

  /* Option B -- "Editorial Rhythm" warm-ivory brand palette (approved landing
     palette; see docs and the ivory-options review). Warm ivory is the page
     canvas, a deeper parchment band alternates the subjects + final-CTA, one
     charcoal manifesto band carries ivory text, and burnt coral is a small
     accent only. Charcoal type/hairlines throughout. */
  --bg: #f4efe6;          /* warm ivory -- dominant page canvas */
  --surface: #fbf8f2;     /* soft ivory -- reading surface (phone, cards) */
  --surface-2: #ebe3d5;   /* parchment -- recessed panels, inputs */
  --card: #fbf8f2;        /* lifted card tone (soft ivory) */
  --ink: #2b2925;         /* charcoal ink */
  --ink-muted: #4a463f;
  --ink-faint: #7b7568;
  --line: #ddd4c4;        /* rule / hairlines (tinted charcoal) */
  --line-strong: #cabda8;
  --field: #ffffff;
  --accent: #2b2925;      /* ink by default -- chrome is calm charcoal, not coral */
  --accent-soft: #ebe3d5;
  --accent-ink: #4a463f;
  --brand: #b5533c;       /* burnt-coral -- brand mark + focus (small accents only) */
  --brand-ink: #9c4230;   /* AA-safe coral for text on ivory */
  --brand-soft: #f0dcd3;
  --bezel: #2b2925;       /* dark phone bezel ring */
  --ok: #3f7a34;
  --err: #b23b2e;

  /* Editorial-rhythm band tokens */
  --section-b-bg: #ebe3d5;    /* parchment alternating band (subjects) */
  --alt-bg: #ebe3d5;          /* parchment (final CTA band) */
  --alt-ink: #2b2925;         /* charcoal type on parchment */
  --alt-line: #dccfbb;        /* hairline on parchment */
  --manifesto-bg: #2b2925;    /* charcoal manifesto band */
  --manifesto-ink: #f4efe6;   /* ivory type on the charcoal band */

  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow: 0 1px 2px rgba(28, 26, 23, 0.05), 0 12px 30px rgba(28, 26, 23, 0.07);
  --shadow-lift: 0 2px 4px rgba(28, 26, 23, 0.06), 0 22px 48px rgba(28, 26, 23, 0.12);

  --radius: 44px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-full: 999px;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 1120px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.55rem);
  --text-2xl: clamp(1.65rem, 1.4rem + 1.2vw, 2.2rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 2.9rem);
}

/* Option B is a fixed brand palette. Its editorial rhythm is built from specific
   values -- ivory canvas, a parchment alternating band, and one charcoal manifesto
   band with ivory text -- that do not invert into an OS dark theme without losing
   that rhythm and the intended contrast. So the landing intentionally keeps the
   approved warm-ivory Option B palette in both light and dark OS modes (the same
   fixed-brand decision as the app's welcome cold open). Charcoal-on-ivory,
   ivory-on-charcoal, and AA-safe coral hold their contrast in either mode. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6, 1.5rem); }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
}
/* Hero eyebrow gets the coral accent over the ivory scrim (small-accent use). */
.hero .eyebrow { color: var(--brand-ink); }
.muted { color: var(--ink-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---- The "U" threshold mark (drawn to the app icon) ---- */
.mark .mark-u { fill: var(--ink); }
.mark .mark-bar { stroke: var(--brand); }

/* ---- Buttons + form (app button language) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; letter-spacing: 0.01em;
  padding: 14px 20px; border-radius: var(--radius-full); border: 1px solid transparent;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-lg { padding: 16px 26px; font-size: 16px; }

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

.signup { display: flex; gap: 0.75rem; flex-wrap: wrap; max-width: 460px; }
.signup input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 13px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--line-strong); background: var(--field); color: var(--ink);
  transition: var(--transition);
}
.signup input[type="email"]::placeholder { color: var(--ink-faint); }
.signup input[type="email"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.signup .btn { flex: 0 0 auto; }
.form-note { font-size: var(--text-sm); color: var(--ink-faint); margin-top: 0.75rem; }
.form-msg { font-size: var(--text-sm); margin-top: 0.75rem; min-height: 1.2em; }
.form-msg.ok { color: var(--brand-ink); font-weight: 600; }
.form-msg.err { color: var(--err); }

/* ---- Header + brand lockup (app hdr-brand) ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lockup { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.lockup .mark { height: 26px; width: auto; flex: 0 0 auto; }
.lockup .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; }

/* ---- Layout rhythm ---- */
:root { --space-6: 1.5rem; }
section { padding: 4.5rem 0; }
.section-head { max-width: 46ch; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--text-2xl); margin: 0.5rem 0; }
.section-head p { color: var(--ink-muted); font-size: var(--text-lg); line-height: 1.5; }
/* ---- Editorial rhythm: alternating parchment + one charcoal manifesto band ---- */
/* Parchment alternating band (subjects section, per Option B). */
#subjects { background: var(--section-b-bg); border-block: 1px solid var(--line); }

/* Shared parchment band base (final CTA). #why overrides this to the charcoal
   manifesto band below. */
.alt { background: var(--alt-bg); color: var(--alt-ink); border-block: 1px solid var(--alt-line); }
.alt .eyebrow { color: color-mix(in srgb, var(--alt-ink) 78%, transparent); }
.alt .section-head p, .alt .muted { color: color-mix(in srgb, var(--alt-ink) 80%, transparent); }

/* The one charcoal manifesto band, with ivory type. */
#why { background: var(--manifesto-bg); color: var(--manifesto-ink); border-block: 1px solid var(--alt-line); }
#why .eyebrow { color: color-mix(in srgb, var(--manifesto-ink) 78%, transparent); }
#why .manifesto p { color: color-mix(in srgb, var(--manifesto-ink) 82%, transparent); }

/* FAQ stays on the ivory canvas (rhythm: ivory hero -> parchment subjects ->
   charcoal manifesto -> ivory FAQ -> parchment final CTA). */
#faq { background: var(--bg); }

/* Final CTA sits on parchment; keep its ghost button + email field legible there. */
#get .btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--alt-ink) 40%, transparent); color: var(--alt-ink); }
#get .btn-ghost:hover { border-color: var(--alt-ink); }
#get .signup input[type="email"] { background: color-mix(in srgb, var(--field) 92%, transparent); }

/* ---- Hero (full-bleed video background + readability scrim) ---- */
/* The video is the whole hero, unobstructed; only the brand copy + CTA sit over
   it. A min-height keeps the footage a real hero band (no empty hole now that the
   phone mock is gone), with the copy vertically centred against it. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 4.5rem 0; min-height: min(82vh, 680px); display: flex; align-items: center; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 64% 38%;
}
/* Warm paper/charcoal wash: opaque on the left where the copy sits, fading to
   clear on the right so the reader in the footage stays visible. Adapts to
   light and dark via --bg, keeping AA text contrast in both modes. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 30%,
    color-mix(in srgb, var(--bg) 34%, transparent) 56%,
    transparent 78%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: 34rem; }
.hero h1 { font-size: var(--text-3xl); margin: 1.1rem 0 1.1rem; text-wrap: balance; }
.hero .lede { font-size: var(--text-lg); color: var(--ink-muted); max-width: 40ch; margin-bottom: 1.8rem; line-height: 1.5; }

/* ---- App phone chrome (ported from the app device shell), straight-on ---- */
.phone {
  position: relative;
  width: min(360px, 86vw);
  aspect-ratio: 390 / 844;
  max-height: calc(100dvh - 96px);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--line-strong), 0 0 0 12px var(--bezel), var(--shadow-lift);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.statusbar {
  flex: 0 0 40px; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 0 26px;
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em;
}
.statusbar .sb-icons { display: flex; gap: 6px; align-items: center; }
.statusbar svg { display: block; }

.hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 6px; flex: 0 0 auto; }
.hdr-onb { padding: 12px 20px 6px; }
.hdr-brand { display: flex; align-items: center; gap: 9px; }
.hdr-brand .mark { height: 22px; width: auto; }
.hdr-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--ink-muted); }

/* The subject list owns all the space below the header now that the onboarding
   step label and footer bar are gone: it grows to fill the device and scrolls,
   with a little bottom room so the last card clears the rounded bezel. */
.onb-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 20px; }
.onb-title { font-family: var(--font-display); font-weight: 560; font-size: 24px; line-height: 1.12; letter-spacing: -0.02em; margin: 6px 0 8px; text-wrap: balance; }
.onb-sub { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin-bottom: 18px; }

/* ---- Subject cards / spines / ticks (the app's subject language) ---- */
.subj-list { display: flex; flex-direction: column; gap: 10px; }
.subj-card {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  padding: 14px 16px 14px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--card);
  font-family: var(--font-body); color: var(--ink);
  transition: border-color var(--transition), background var(--transition);
}
button.subj-card { cursor: pointer; }
.subj-card:hover { border-color: var(--line-strong); background: var(--surface); }
.subj-card.on {
  border-color: var(--sub-accent, var(--accent));
  background: color-mix(in srgb, var(--sub-accent, var(--accent)) 9%, var(--card));
}
.subj-spine { flex: 0 0 6px; align-self: stretch; min-height: 36px; border-radius: 3px; background: var(--sub-accent, var(--line-strong)); }
.subj-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.subj-name { font-family: var(--font-display); font-size: 17px; font-weight: 560; }
.subj-blurb { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
.subj-tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: transparent;
  transition: var(--transition);
}
.subj-tick.on { background: var(--sub-accent, var(--accent)); border-color: var(--sub-accent, var(--accent)); color: #fff; }


/* ---- "What you'll learn" intro: copy left, app phone mock right ---- */
.learn-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3.5rem; align-items: center;
}
.learn-copy { margin-bottom: 0; max-width: 34rem; }
/* Subordinate note, set off from the intro paragraph by roughly three lines of
   body text. Quiet and smaller than body; left-aligned with the copy column,
   no badge or decorative card. */
.learn-copy .learn-note { margin-top: clamp(2.75rem, 1.8rem + 3vw, 4.5rem); font-size: var(--text-sm); color: var(--ink-faint); }
.learn-visual { display: flex; justify-content: center; }
/* Phone mock reads as a static device; the subject list scrolls/crops inside the
   fixed device frame just like onboarding. The frame is shown at close to its full
   device height so most of the subject list is visible (a full phone, not a short
   crop), capped just under its natural aspect-ratio height so nothing is letterboxed. */
.learn-visual .phone { max-height: 780px; }

/* ---- Manifesto ---- */
.manifesto h2 { font-size: var(--text-2xl); max-width: 22ch; margin: 0.5rem auto; }
.manifesto p { max-width: 54ch; margin: 0 auto; color: var(--ink-muted); font-size: var(--text-lg); line-height: 1.55; }

/* ---- FAQ (flat Settings/Legal row language, not a glossy accordion) ---- */
.faq { max-width: 720px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 16px 2px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg); transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-muted); padding: 0 2px 18px; font-size: 14.5px; line-height: 1.6; }
.faq details p a { color: var(--brand-ink); border-bottom: 1px solid var(--line-strong); }
.faq details p a:hover { border-bottom-color: var(--brand); }

/* ---- Final CTA + newsletter (secondary) ---- */
.cta-final { text-align: center; }
.cta-final .cta-row { margin-top: 1.8rem; }
.cta-final h2 { font-size: var(--text-2xl); max-width: 22ch; margin-inline: auto; }
.newsletter-optin { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.newsletter-optin .signup { margin: 1rem auto 0; justify-content: center; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0; color: var(--ink-muted); font-size: var(--text-sm); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.site-footer a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-disclaimer { flex-basis: 100%; font-size: var(--text-xs); color: var(--ink-faint); max-width: 70ch; line-height: 1.5; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  /* Hero: copy stays left-anchored over the full-bleed footage; the scrim turns
     vertical (top-heavy) so the headline holds contrast on a portrait crop. */
  .hero { min-height: min(72vh, 560px); }
  .hero-bg { object-position: 70% 34%; }
  .hero-scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--bg) 72%, transparent) 40%,
      color-mix(in srgb, var(--bg) 62%, transparent) 100%);
  }
  /* "What you'll learn": text first, then the phone, both full width. */
  .learn-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .learn-copy { order: 1; max-width: none; }
  .learn-visual { order: 2; }
}
@media (max-width: 560px) {
  section { padding: 3.25rem 0; }
  .hero { padding-top: 2.5rem; }
  .signup .btn { flex: 1 1 100%; }
  /* Phone never wider than the viewport gutter; taller frame shows more of the
     list while staying within the viewport height (no overflow). */
  .learn-visual .phone { width: min(340px, 88vw); max-height: 680px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  /* No autoplaying motion for reduced-motion users: the poster still frame,
     paused by app.js, stands in for the loop. */
  .hero-bg { animation: none !important; }
}