/* ============================================================
   Masters Touch Academy — global stylesheet
   Ported from the Claude Design prototype, where every value was
   an inline style. Tokens below are the full approved palette —
   do not introduce colors outside this set.
   Page-specific rules stay in a <style> block on the page.
   ============================================================ */

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:            #faf7f1;   /* page background, warm parchment */
  --surface:       #ffffff;
  --surface-warm:  #fffdf9;   /* cards */
  --surface-tint:  #f0ead9;   /* inset panels */
  --surface-sub:   #f5f2ea;

  /* Ink */
  --ink:           #1c1a16;
  --ink-2:         #332f27;
  --ink-3:         #3a352a;
  --muted:         #6b6558;
  --faint:         #7a7263;
  --fainter:       #a39c8a;

  /* Dark surfaces */
  --dark:          #1c1a16;
  --dark-2:        #2c2820;
  --dark-3:        #3a352a;
  --on-dark:       #c9c2b0;

  /* Borders */
  --border:        #e8e2d5;
  --border-strong: #ddd6c6;
  --border-dash:   #ddd4c0;

  /* Brand gold */
  --gold:          #e3c069;   /* light gold — badges, accents on dark */
  --gold-deep:     #8a6720;   /* link / action gold on light */
  --gold-ink:      #7d5d16;   /* gold text needing more contrast */

  /* Type */
  --ff-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ff-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --pill: 999px;
  --shadow-pop: 0 8px 28px rgba(28, 26, 22, 0.14);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.3);
  --gutter: 32px;
  --maxw: 1240px;
}

/* ── BASE ────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  /* Stop iOS inflating type when the phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Kill the rubber-band that reveals the browser chrome behind an installed
     app, and the grey flash Android paints over every tap. */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* Anything tappable opts out of the 300ms double-tap-zoom wait. */
a, button, summary, label, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

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

a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--ink); }

input, textarea, select, button { font-family: inherit; font-size: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── TYPE PRIMITIVES ─────────────────────────────────────── */
.display {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -0.8px;
  line-height: 1.1;
  text-wrap: balance;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow--on-dark { color: var(--gold); }

.lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.lede--on-dark { color: var(--on-dark); }

.prose { font-size: 15.5px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: 1000px; }

.section { padding-top: 84px; padding-bottom: 84px; }
.section--tight { padding-top: 56px; padding-bottom: 56px; }
.section--flush-top { padding-top: 0; }

.rule-top { border-top: 1px solid var(--border); }
.rule-bottom { border-bottom: 1px solid var(--border); }
.surface-warm { background: var(--surface-warm); }

/* Section header: title left, supporting copy right */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.sec-head__title { max-width: 640px; }
.sec-head__title .eyebrow { display: block; margin-bottom: 16px; }
.sec-head__title h2 { font-size: 48px; }
.sec-head__aside { font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 400px; text-wrap: pretty; }

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Content column + sidebar */
.grid--detail { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
.grid--aside { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--pill { border-radius: var(--pill); }
.btn--block { display: block; width: 100%; }
.btn--sm { font-size: 13.5px; padding: 11px 20px; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--gold-deep); color: #fff; }

.btn--gold { background: var(--gold); color: var(--ink); font-weight: 700; }
.btn--gold:hover { background: #fff; color: var(--ink); }

.btn--outline { border-color: var(--border); background: var(--surface-warm); color: var(--ink); }
.btn--outline:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn--ghost-light { border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

.textlink { font-size: 14px; font-weight: 600; color: var(--gold-deep); white-space: nowrap; }
.textlink:hover { color: var(--ink); }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--gold-deep);
}
.badge--ink { background: var(--ink); color: var(--gold); }
.badge--flag {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--r);
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; }

.meta { font-size: 12px; color: var(--faint); }

/* Checklist rows */
.ticks { display: flex; flex-direction: column; gap: 2px; }
.ticks li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; padding: 7px 0; list-style: none; }
.ticks li::before { content: "\2713"; color: var(--gold-deep); font-weight: 700; flex-shrink: 0; }
.ticks--on-dark li { color: var(--on-dark); }
.ticks--on-dark li::before { color: var(--gold); }

/* ── ANNOUNCEMENT BAR ────────────────────────────────────── */
.announce {
  background: var(--ink);
  color: var(--on-dark);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  text-align: center;
}
.announce__inner { padding: 9px 20px; }
.announce a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: #fff; }

/* ── HEADER ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter);
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__logo { flex-shrink: 1; min-width: 0; }
.site-header__logo img { width: 340px; max-width: 100%; height: auto; }

.site-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.site-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}
.site-nav__link:hover { color: var(--ink); }
/* Active state is driven by <body data-nav="…"> so the nav stays one file */
body[data-nav="courses"]     .site-nav__link[data-nav-key="courses"],
body[data-nav="instructors"] .site-nav__link[data-nav-key="instructors"],
body[data-nav="membership"]  .site-nav__link[data-nav-key="membership"],
body[data-nav="about"]       .site-nav__link[data-nav-key="about"],
body[data-nav="faq"]         .site-nav__link[data-nav-key="faq"],
body[data-nav="contact"]     .site-nav__link[data-nav-key="contact"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--gold-deep);
}

.site-header__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.site-header__signin { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.site-header__signin:hover { color: var(--ink); }
.site-header__actions .btn { font-size: 13.5px; padding: 11px 20px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-warm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
}
.burger span { width: 18px; height: 1.5px; background: var(--ink); display: block; }

/* ── MOBILE DRAWER ───────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 40px;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.drawer__title { font-family: var(--ff-display); font-size: 22px; color: var(--gold); }
.drawer__close {
  width: 44px; height: 44px;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font-family: var(--ff-display);
  font-size: 30px;
  color: #fff;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.drawer__nav a:hover { color: var(--gold); }
.drawer__foot { margin-top: auto; padding-top: 28px; }
.drawer__foot .btn { font-size: 16px; padding: 17px; border-radius: 14px; }
.drawer__signin { display: block; text-align: center; font-size: 14px; color: var(--on-dark); padding-top: 20px; }

body.is-locked { overflow: hidden; }

/* ── HERO ────────────────────────────────────────────────── */
/* Dark hero used by every interior page. The photo sits behind a gradient;
   with no photo present the gradient reads as a solid dark panel, which is
   the intended fallback until real photography lands. */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28,26,22,0.95) 0%, rgba(28,26,22,0.86) 52%, rgba(28,26,22,0.52) 100%);
}
.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--gutter);
  min-height: 440px;
  display: flex;
  align-items: center;
}
.hero__body { max-width: 680px; }
.hero__body .eyebrow { display: block; margin-bottom: 18px; }
.hero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -1.2px; margin-bottom: 22px; }
.hero .lede { max-width: 560px; margin-bottom: 34px; }

/* Home hero — split layout with stats */
.hero-home { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-home::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,192,105,0.16), transparent 68%);
}
.hero-home__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  min-height: 600px;
}
.hero-home h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -1.5px;
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero-home h1 em { font-style: italic; color: var(--gold); }
.hero-home__sub { font-size: 17.5px; line-height: 1.65; color: var(--on-dark); max-width: 480px; margin-bottom: 38px; text-wrap: pretty; }
.hero-home .btn-row { margin-bottom: 44px; }

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(227, 192, 105, 0.4);
  border-radius: 20px;
  padding: 6px 14px;
  margin-bottom: 30px;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.pill-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.stat-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 26px;
}
.stat__value { font-family: var(--ff-display); font-size: 32px; color: var(--gold); line-height: 1; }
.stat__label { font-size: 12px; color: var(--on-dark); margin-top: 6px; letter-spacing: 0.4px; }

/* Hero image panel + floating "now enrolling" card */
.hero-home__media { position: relative; height: 520px; }
.hero-home__frame {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--dark-2) center/cover;
}
.enroll-card {
  position: absolute;
  bottom: -22px;
  left: -34px;
  background: var(--surface-warm);
  color: var(--ink);
  border-radius: 14px;
  padding: 18px 22px;
  width: 270px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.enroll-card__label {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.enroll-card__title { font-family: var(--ff-display); font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
.enroll-card__meta { font-size: 12.5px; color: var(--muted); }

/* ── CREDENTIAL STRIP ────────────────────────────────────── */
.credstrip { background: var(--surface-tint); border-bottom: 1px solid var(--border); }
.credstrip__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  justify-content: center;
}
.credstrip__label {
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  white-space: nowrap;
}
.credstrip__item { font-family: var(--ff-display); font-size: 20px; color: var(--muted); }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 28px;
}
.card--hover:hover { border-color: var(--gold); }
.card--flush { padding: 0; overflow: hidden; }

.icon-tile {
  width: 44px; height: 44px;
  border-radius: var(--r);
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.icon-tile svg { width: 20px; height: 20px; stroke: var(--gold-deep); }

.card__title { font-family: var(--ff-display); font-weight: 400; font-size: 23px; line-height: 1.25; margin-bottom: 10px; }
.card__body { font-size: 14.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

/* Course card */
.course-card {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.course-card:hover { border-color: var(--gold); color: inherit; }
.course-card__media {
  height: 160px;
  position: relative;
  background: var(--surface-tint) center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Branded fallback while real course photography is outstanding */
.course-card__media::after {
  content: attr(data-code);
  font-family: var(--ff-display);
  font-size: 34px;
  color: rgba(138, 103, 32, 0.28);
  letter-spacing: 2px;
}
.course-card__media.has-photo::after { content: none; }
.course-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.course-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.course-card h3 { font-family: var(--ff-display); font-weight: 400; font-size: 21px; line-height: 1.25; margin-bottom: 9px; }
.course-card__blurb { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 14px; flex: 1; text-wrap: pretty; }
.course-card__formats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.course-card__prices { border-top: 1px solid var(--surface-tint); padding-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.price-row__label { font-size: 12.5px; color: var(--muted); }
.price-row__value { font-size: 15.5px; font-weight: 700; }

/* Testimonial */
.quote-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px; background: var(--bg); }
.quote-card__text { font-family: var(--ff-display); font-size: 20px; line-height: 1.5; margin-bottom: 24px; text-wrap: pretty; }
.quote-card__who { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 20px; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.quote-card__name { font-size: 13.5px; font-weight: 600; }
.quote-card__role { font-size: 12px; color: var(--faint); }

/* ── DARK PANEL ──────────────────────────────────────────── */
.panel-dark {
  background: var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #fff;
}
.panel-dark__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-dark__body { padding: 56px 52px; }
.panel-dark__media { position: relative; min-height: 480px; background: var(--dark-2) center/cover; }
.panel-dark h2 { font-family: var(--ff-display); font-weight: 400; font-size: 42px; line-height: 1.12; letter-spacing: -0.6px; margin-bottom: 20px; }
.panel-dark .prose { color: var(--on-dark); max-width: 420px; margin-bottom: 32px; }

/* Upcoming class rows inside the dark panel */
.mini-class { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.mini-class__date { width: 52px; flex-shrink: 0; }
.mini-class__month { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; }
.mini-class__day { font-family: var(--ff-display); font-size: 26px; line-height: 1; }
.mini-class__title { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.mini-class__meta { font-size: 12.5px; color: var(--on-dark); }

/* ── FILTER TOOLBAR ──────────────────────────────────────── */
.toolbar { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.toolbar__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; }
.field--grow { flex: 1; min-width: 220px; }
.field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  background: var(--surface-warm);
  color: var(--ink);
  outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold-deep); }
.select { cursor: pointer; min-width: 150px; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.input-search { position: relative; }
.input-search .input { padding-left: 40px; }
.input-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: var(--fainter);
  pointer-events: none;
}
.toolbar__status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--faint); }

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 56px 32px;
  text-align: center;
  margin-bottom: 32px;
}
.empty-state h2 { font-family: var(--ff-display); font-weight: 400; font-size: 24px; margin-bottom: 10px; }
.empty-state p { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }

/* ── SCHEDULE ROWS ───────────────────────────────────────── */
.class-row {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 12px;
  display: flex;
  gap: 28px;
  align-items: center;
}
.class-row__date {
  width: 66px;
  flex-shrink: 0;
  text-align: center;
  border-right: 1px solid var(--surface-tint);
  padding-right: 24px;
}
.class-row__month { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); }
.class-row__day { font-family: var(--ff-display); font-size: 34px; line-height: 1.05; }
.class-row__main { flex: 1; min-width: 0; }
.class-row__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.class-row__title { font-family: var(--ff-display); font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
.class-row__note { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 5px; text-wrap: pretty; }
.class-row__loc { font-size: 12.5px; color: var(--faint); }
.class-row__cta { width: 170px; flex-shrink: 0; text-align: right; }
.class-row__price { font-size: 24px; font-weight: 700; margin-bottom: 2px; }
.class-row__seats { font-size: 11.5px; color: var(--faint); margin-bottom: 14px; }

/* ── COMING SOON ─────────────────────────────────────────── */
.soon-card { border: 1px dashed var(--border-dash); border-radius: 14px; padding: 24px 22px; background: var(--surface-warm); }
.soon-card__eta { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.soon-card__eta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c9b789; flex-shrink: 0; }
.soon-card__eta span { font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-deep); }
.soon-card h3 { font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 9px; }
.soon-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; text-wrap: pretty; }

/* ── COURSE DETAIL ───────────────────────────────────────── */
.detail-hero { background: var(--ink); color: #fff; }
.detail-hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 44px var(--gutter) 64px; }
.backlink { display: inline-block; font-size: 13px; color: var(--on-dark); margin-bottom: 32px; }
.backlink:hover { color: var(--gold); }
.detail-hero h1 { font-family: var(--ff-display); font-weight: 400; font-size: 52px; line-height: 1.06; letter-spacing: -1px; margin-bottom: 22px; text-wrap: balance; }
.detail-hero__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.badge--on-dark { background: rgba(227, 192, 105, 0.18); color: var(--gold); }
.detail-hero__desc { font-size: 17px; line-height: 1.7; color: var(--on-dark); max-width: 540px; margin-bottom: 24px; text-wrap: pretty; }

.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark);
  background: rgba(227, 192, 105, 0.10);
  border: 1px solid rgba(227, 192, 105, 0.32);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 8px;
  max-width: 540px;
}
.note strong { color: var(--gold); flex-shrink: 0; }

.instructor-line { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.instructor-line__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--dark-3);
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 16px;
  color: var(--gold);
  flex-shrink: 0;
  overflow: hidden;
}
.instructor-line__name { font-size: 14px; font-weight: 600; }
.instructor-line__role { font-size: 12.5px; color: var(--on-dark); }

.buybox {
  background: var(--surface-warm);
  color: var(--ink);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.buybox__media { height: 150px; border-radius: var(--r); overflow: hidden; margin-bottom: 22px; background: var(--surface-tint) center/cover; }
.buybox__prices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.buybox__prices .price-row__value { font-size: 22px; }
.buybox__prices .price-row__label { font-size: 13px; }
.buybox__note { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.buybox .btn { display: block; width: 100%; font-size: 14.5px; padding: 14px; border-radius: 10px; margin-bottom: 10px; }
.buybox__second { border: 1px solid var(--gold); color: var(--gold-deep); background: none; }
.buybox__second:hover { background: var(--surface-tint); color: var(--gold-deep); }
.buybox .ticks { margin-top: 22px; }
.buybox .ticks li { font-size: 13.5px; color: var(--ink-2); }

.module-row {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 10px;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.module-row__num { font-family: var(--ff-display); font-size: 20px; color: var(--gold); flex-shrink: 0; width: 28px; }
.module-row__title { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }

.side-title { font-family: var(--ff-display); font-size: 26px; margin-bottom: 18px; }
.audience-box { background: var(--surface-tint); border-radius: 14px; padding: 24px; margin-bottom: 32px; }
.audience-box div { font-size: 14px; color: var(--ink-2); line-height: 1.6; padding: 8px 0; border-bottom: 1px solid rgba(168, 127, 44, 0.15); }
.audience-box div:last-child { border-bottom: 0; }

.next-date { background: var(--surface-warm); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.next-date__when { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.next-date__where { font-family: var(--ff-display); font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
.next-date__note { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* ── INSTRUCTORS ─────────────────────────────────────────── */
.tom-panel {
  background: linear-gradient(120deg, var(--ink), var(--dark-2));
  border-radius: var(--r-xl);
  padding: 40px;
  color: #fff;
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.tom-panel::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,192,105,0.20), transparent 70%);
}
.tom-panel__portrait {
  width: 200px; height: 250px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark-3);
  position: relative;
  z-index: 1;
}
.tom-panel__portrait img { width: 100%; height: 100%; object-fit: cover; }
.tom-panel__body { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.tom-panel__label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.tom-panel h2 { font-family: var(--ff-display); font-weight: 400; font-size: 38px; margin-bottom: 10px; }
.tom-panel p { font-size: 15px; color: var(--on-dark); line-height: 1.75; max-width: 620px; margin-bottom: 24px; text-wrap: pretty; }
.tom-panel .stat-row { border-top: 0; padding-top: 0; gap: 32px; }
.tom-panel .stat__value { font-size: 28px; }
.tom-panel .stat__label { font-size: 11.5px; }

.cred-card { background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 28px; }
.cred-card__group { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cred-card__group::before { content: ""; width: 9px; height: 9px; background: var(--gold); flex-shrink: 0; }
.cred-card__group span { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-ink); }
.cred-card li { display: flex; gap: 11px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; padding: 6px 0; list-style: none; }
.cred-card li::before { content: "\2022"; color: var(--gold-deep); font-weight: 700; flex-shrink: 0; }

.pkg {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 14px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
}
.pkg--featured { border-color: var(--gold); }
.pkg__main { flex: 1; min-width: 240px; }
.pkg h3 { font-family: var(--ff-display); font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.pkg__blurb { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; text-wrap: pretty; }
.pkg__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.pkg__features li { font-size: 13.5px; padding: 0; }
.pkg__buy { width: 170px; flex-shrink: 0; }
.pkg__price { font-size: 28px; font-weight: 700; margin-bottom: 2px; }
.pkg__duration { font-size: 11.5px; color: var(--faint); margin-bottom: 16px; }
.pkg__buy .btn { display: block; width: 100%; font-size: 13.5px; padding: 12px; }

.callout-row {
  border-top: 1px solid var(--border);
  padding-top: 44px;
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.callout-row__flag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--surface-tint);
  padding: 7px 14px;
  border-radius: 14px;
  white-space: nowrap;
}
.callout-row p { font-size: 15px; color: var(--muted); line-height: 1.7; flex: 1; min-width: 240px; text-wrap: pretty; }

.split-cta {
  border-top: 1px solid var(--border);
  padding-top: 44px;
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.split-cta__title { font-family: var(--ff-display); font-size: 30px; margin-bottom: 10px; }
.split-cta p { font-size: 15px; color: var(--muted); line-height: 1.7; }

/* ── PRICING ─────────────────────────────────────────────── */
.persona { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 26px; background: var(--surface-warm); display: flex; flex-direction: column; gap: 10px; }
.persona__who { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-deep); }
.persona__need { font-size: 16px; line-height: 1.65; color: var(--ink-2); flex: 1; text-wrap: pretty; }
.persona__plan { font-size: 14px; font-weight: 600; border-top: 1px solid var(--surface-tint); padding-top: 12px; }
.persona__plan span { color: var(--gold-deep); }

.billing-toggle { text-align: center; }
.billing-toggle__switch { display: inline-flex; background: var(--surface-tint); border-radius: 24px; padding: 4px; margin-bottom: 12px; }
.billing-toggle__switch button {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 20px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.billing-toggle__switch button[aria-pressed="true"] { background: var(--surface-warm); color: var(--ink); }
.billing-toggle__note { font-size: 13px; color: var(--faint); margin-bottom: 44px; }

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tier {
  background: var(--surface-warm);
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 34px 30px;
  position: relative;
}
.tier--highlight { background: var(--ink); color: #fff; border-color: var(--ink); }
.tier h3 { font-family: var(--ff-display); font-weight: 400; font-size: 28px; margin-bottom: 8px; }
.tier__pitch { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; min-height: 44px; text-wrap: pretty; }
.tier--highlight .tier__pitch { color: var(--on-dark); }
.tier__price { font-size: 46px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.05; }
.tier__period { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tier--highlight .tier__period { color: var(--on-dark); }
.tier__save { font-size: 12.5px; font-weight: 600; color: var(--gold-deep); min-height: 20px; margin: 6px 0 22px; }
.tier--highlight .tier__save { color: var(--gold); }
.tier .btn { display: block; width: 100%; font-size: 14.5px; font-weight: 700; padding: 14px; border-radius: 10px; margin-bottom: 12px; }
.tier__subcta { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 24px; }
.tier--highlight .tier__subcta { color: var(--on-dark); }
.tier__featlabel { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.tier--highlight .tier__featlabel { color: var(--on-dark); }
.tier .ticks li::before { color: var(--gold); }
.tier--highlight .ticks li { color: #fff; }

/* Value math panel */
.math-panel { background: var(--ink); border-radius: var(--r-xl); padding: 44px 42px; color: #fff; }
.math-panel h2 { font-family: var(--ff-display); font-weight: 400; font-size: 42px; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 16px; }
.math-panel .prose { color: var(--on-dark); }
.math-box { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-lg); padding: 26px; }
.math-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
.math-row__label { font-size: 14px; color: var(--on-dark); }
.math-row__value { font-size: 16px; font-weight: 700; white-space: nowrap; }
.math-row--keep .math-row__label, .math-row--keep .math-row__value { color: var(--gold); }
.math-box__foot { font-size: 12.5px; color: var(--on-dark); line-height: 1.6; margin-top: 16px; }

/* Comparison table */
.compare { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.compare table { width: 100%; border-collapse: collapse; }
.compare thead th { background: var(--ink); color: #fff; padding: 18px 16px; text-align: center; border-left: 1px solid rgba(255,255,255,0.1); font-weight: 400; }
.compare thead th:first-child {
  text-align: left;
  padding: 18px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--on-dark);
  border-left: 0;
}
.compare__plan { font-family: var(--ff-display); font-size: 19px; }
.compare__plan--gold { color: var(--gold); }
.compare__price { font-size: 11.5px; color: var(--on-dark); margin-top: 3px; }
.compare tbody th[scope="rowgroup"] {
  background: var(--surface-tint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: left;
  padding: 14px 22px;
}
.compare tbody td, .compare tbody th[scope="row"] { border-top: 1px solid var(--border); background: var(--surface-warm); }
.compare tbody th[scope="row"] { padding: 15px 22px; font-size: 14.5px; font-weight: 400; color: var(--ink-2); line-height: 1.5; text-align: left; }
.compare tbody td { padding: 15px 16px; text-align: center; border-left: 1px solid var(--border); font-size: 14px; }
.compare .yes { color: var(--gold-deep); font-weight: 700; }
.compare .no { color: var(--faint); }
.compare__scroll { overflow-x: auto; }

.guarantee { border-top: 2px solid var(--gold); padding-top: 20px; }
.guarantee h3 { font-family: var(--ff-display); font-weight: 400; font-size: 22px; margin-bottom: 10px; line-height: 1.3; }
.guarantee p { font-size: 14.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

.qa-item { border-top: 1px solid var(--border); padding: 24px 0; }
.qa-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.qa-item p { font-size: 15.5px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }

.team-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; }
.team-box div { font-size: 14.5px; color: var(--ink-2); padding: 10px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.team-box .btn { margin-top: 22px; }

/* ── ABOUT ───────────────────────────────────────────────── */
.story__lead { font-size: 18px; line-height: 1.75; color: var(--ink-2); margin-bottom: 20px; text-wrap: pretty; }
.story__media { height: 460px; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-tint) center/cover; }

.pullquote {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.pullquote__who { display: flex; align-items: center; gap: 16px; }
.pullquote__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-tint); }
.pullquote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pullquote__name { font-size: 15px; font-weight: 600; }
.pullquote__role { font-size: 13px; color: var(--faint); }
.pullquote__text { font-family: var(--ff-display); font-size: 42px; line-height: 1.4; letter-spacing: -0.3px; text-wrap: pretty; }

.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--border); }
.timeline__cell { background: var(--surface-warm); padding: 28px 26px; }
.timeline__key { font-family: var(--ff-display); font-size: 34px; color: var(--gold); line-height: 1; margin-bottom: 14px; }
.timeline__text { font-size: 15px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }

.principle__num { font-family: var(--ff-display); font-size: 22px; color: var(--gold); margin-bottom: 16px; }
.principle h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; }
.principle p { font-size: 15.5px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }

.figures { background: var(--ink); color: #fff; }
.figures__inner { max-width: var(--maxw); margin: 0 auto; padding: 80px var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.figure__value { font-family: var(--ff-display); font-size: 46px; color: var(--gold); line-height: 1; margin-bottom: 12px; }
.figure__label { font-size: 13.5px; color: var(--on-dark); line-height: 1.6; }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact-block { padding: 22px 0; border-top: 1px solid var(--border); }
.contact-block__label { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.contact-block__value { font-size: 17px; margin-bottom: 4px; }
.contact-block__note { font-size: 13.5px; color: var(--faint); }

.form-card { background: var(--surface-warm); border: 1px solid var(--border); border-radius: 18px; padding: 36px; }
.form-card h2 { font-family: var(--ff-display); font-weight: 400; font-size: 26px; margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.form-row { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.form-card .input, .form-card .textarea { background: var(--bg); border-radius: 9px; font-size: 14px; }
.form-card .btn { width: 100%; padding: 15px; border-radius: 10px; margin-top: 8px; }
.form-note { font-size: 12px; color: var(--faint); margin-top: 14px; text-align: center; }

/* Radio pills. The <input> is visually hidden but still focusable and still
   submits, so the control keeps native keyboard and form semantics. */
.topic-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.topic-picks label { cursor: pointer; }
.topic-picks input { position: absolute; opacity: 0; width: 0; height: 0; }
.topic-picks span {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 18px;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.topic-picks span:hover { border-color: var(--gold); }
.topic-picks input:checked + span { background: var(--surface-tint); border-color: var(--gold); color: var(--gold-deep); }
.topic-picks input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Honeypot — hidden from humans, catches bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success { text-align: center; padding: 60px 0; }
.form-success__mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  font-size: 24px;
  color: var(--gold-deep);
}
.form-success h2 { font-family: var(--ff-display); font-weight: 400; font-size: 28px; margin-bottom: 10px; }
.form-success p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ── FAQ ACCORDION ───────────────────────────────────────── */
.faq-item { border-top: 1px solid var(--border); }
.faq-item__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 26px 0;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  color: inherit;
}
.faq-item__q h2 { font-size: 20px; font-weight: 500; line-height: 1.4; max-width: 720px; }
.faq-item__q[aria-expanded="true"] h2 { font-weight: 600; }
.faq-item__sign { font-size: 22px; color: var(--gold-deep); flex-shrink: 0; line-height: 1; transition: transform .2s ease; }
.faq-item__q[aria-expanded="true"] .faq-item__sign { transform: rotate(45deg); }
.faq-item__a { font-size: 16px; line-height: 1.75; color: var(--muted); padding-bottom: 26px; max-width: 720px; text-wrap: pretty; }
.faq-item__a[hidden] { display: none; }

.faq-tail { border-top: 1px solid var(--border); padding-top: 44px; text-align: center; }
.faq-tail__title { font-family: var(--ff-display); font-size: 30px; margin-bottom: 22px; }

/* ── LOGIN ───────────────────────────────────────────────── */
.login { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); min-height: 640px; }
.login__brand { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.login__brand-inner { position: relative; padding: 56px 48px; display: flex; flex-direction: column; height: 100%; min-height: 560px; }
.login__brand h2 { font-family: var(--ff-display); font-size: 48px; line-height: 1.1; letter-spacing: -0.8px; margin-bottom: 20px; max-width: 420px; text-wrap: balance; }
.login__brand p { font-size: 16px; line-height: 1.7; color: var(--on-dark); max-width: 400px; margin-bottom: 40px; text-wrap: pretty; }
.login__perks { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px; }
.login__form { background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 56px var(--gutter); }
.login__form-inner { width: 100%; max-width: 400px; }
.login__form-inner > img { width: 220px; margin-bottom: 36px; }
.login__form h1 { font-family: var(--ff-display); font-weight: 400; font-size: 38px; line-height: 1.1; margin-bottom: 10px; }
.login__sub { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 32px; }

/* Signup: the three-step handoff under the create-account button. */
.signup-steps { list-style: none; margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid var(--border); display: grid; gap: 18px; }
.signup-steps li { display: flex; gap: 14px; align-items: flex-start; }
.signup-steps__n { flex: 0 0 26px; height: 26px; border-radius: var(--pill); background: var(--surface-tint); color: var(--gold-ink); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.signup-steps strong { display: block; font-size: 15px; line-height: 1.4; margin-bottom: 3px; }
.signup-steps span:not(.signup-steps__n) { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.notice {
  border: 1px solid var(--gold);
  background: var(--surface-tint);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 28px;
}
.notice h2 { font-family: var(--ff-display); font-weight: 400; font-size: 22px; margin-bottom: 8px; }
.notice p { font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--on-dark); }
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px var(--gutter) 36px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 44px;
}
.site-footer__brand img { width: 300px; margin-bottom: 20px; }
.site-footer__brand p { font-size: 14px; line-height: 1.7; max-width: 300px; text-wrap: pretty; }
.site-footer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.site-footer__col a { display: block; font-size: 14px; padding: 6px 0; color: var(--on-dark); }
.site-footer__col a:hover { color: #fff; }
.site-footer__legal { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 36px; }
.site-footer__legal-inner {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.site-footer__legal-links { display: flex; gap: 24px; }
.site-footer__legal a { color: var(--on-dark); }
.site-footer__legal a:hover { color: #fff; }

/* ── MOBILE TAB BAR ──────────────────────────────────────── */
.tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px 10px;
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 6px;
  min-height: 56px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.tabbar__dot { width: 16px; height: 2px; border-radius: 2px; background: transparent; }
body[data-nav="home"]        .tabbar a[data-nav-key="home"],
body[data-nav="courses"]     .tabbar a[data-nav-key="courses"],
body[data-nav="membership"]  .tabbar a[data-nav-key="membership"],
body[data-nav="instructors"] .tabbar a[data-nav-key="instructors"],
body[data-nav="contact"]     .tabbar a[data-nav-key="contact"] { color: var(--ink); font-weight: 600; }
body[data-nav="home"]        .tabbar a[data-nav-key="home"] .tabbar__dot,
body[data-nav="courses"]     .tabbar a[data-nav-key="courses"] .tabbar__dot,
body[data-nav="membership"]  .tabbar a[data-nav-key="membership"] .tabbar__dot,
body[data-nav="instructors"] .tabbar a[data-nav-key="instructors"] .tabbar__dot,
body[data-nav="contact"]     .tabbar a[data-nav-key="contact"] .tabbar__dot { background: var(--gold); }

/* ============================================================
   RESPONSIVE
   The prototype switched on window.innerWidth at ~1120 (compact)
   and ~820 (mobile). Those are the two breakpoints below.
   ============================================================ */

@media (max-width: 1120px) {
  .site-nav, .site-header__actions { display: none; }
  .burger { display: flex; }
  .tabbar { display: grid; }
  body { padding-bottom: 76px; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-home__inner { min-height: 0; }
}

@media (max-width: 820px) {
  :root { --gutter: 20px; }

  /* Leave room for the burger rather than letting the logo dominate. */
  .site-header__inner { gap: 12px; }
  .site-header__logo img { width: 240px; }
  .site-footer__brand img { width: 100%; max-width: 280px; }

  .grid--2, .grid--3, .grid--4,
  .grid--detail, .grid--aside,
  .panel-dark__split, .tiers, .timeline,
  .pullquote, .form-grid, .pkg__features, .login {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--4, .figures__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--detail, .grid--aside, .pullquote { gap: 36px; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .section { padding-top: 56px; padding-bottom: 56px; }

  /* The two-column hero was never stacked, so on a phone the copy column was
     ~166px wide and the opening paragraph ran three words to the line. */
  .hero-home__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 56px var(--gutter);
    gap: 40px;
  }
  /* Fluid rather than fixed: one value covered every screen from a 320px phone
     to an 820px tablet, so display type that suited the tablet ran to six
     words-per-line on a phone. Each clamp keeps the old size as its ceiling,
     so tablets render exactly as before and only phones scale down. */
  .hero-home h1 { font-size: clamp(28px, 7.4vw, 42px); }
  .hero-home__media { height: 300px; }
  .enroll-card { left: 0; bottom: -16px; width: 240px; }
  .hero__inner { min-height: 380px; }
  .hero h1, .detail-hero h1 { font-size: clamp(26px, 6.2vw, 34px); }
  .sec-head__title h2, .math-panel h2, .login__brand h2 { font-size: clamp(24px, 5.4vw, 30px); }
  .panel-dark h2, .tom-panel h2, .pullquote__text { font-size: clamp(23px, 5vw, 28px); }
  .panel-dark__body { padding: 36px 26px; }
  .panel-dark__media { min-height: 260px; }
  .story__media { height: 260px; }
  .tom-panel { padding: 26px; }
  .tom-panel__portrait { width: 100%; height: 300px; }
  .figure__value { font-size: clamp(28px, 6vw, 34px); }
  .tier__price { font-size: clamp(34px, 7vw, 46px); }

  /* Stack the schedule row */
  .class-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .class-row__date { width: auto; text-align: left; border-right: 0; border-bottom: 1px solid var(--surface-tint); padding: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
  .class-row__cta { width: auto; text-align: left; }

  .pkg__buy { width: 100%; }
  .site-footer__legal-inner { flex-direction: column; gap: 12px; }

  /* Comparison table keeps its own horizontal scroll rather than
     squeezing five columns into a phone. */
  .compare table { min-width: 640px; }
}

/* ============================================================
   APP SHELL
   The site installs to a home screen (see manifest.php) and is used
   one-handed on a phone far more than it is browsed on a desktop, so
   the rules below treat the phone as the primary case.
   ============================================================ */

/* ── Safe areas ──────────────────────────────────────────── */
/* Notches, rounded corners, and the iOS home indicator. viewport-fit=cover in
   the <meta> is what makes env() report anything; without it every value here
   resolves to 0 and nothing moves. Each max() keeps the original padding as
   its floor, so nothing changes on hardware without insets. */
.announce__inner {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.site-header__inner {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.tabbar {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
}

@media (max-width: 1120px) {
  /* Clear the tab bar *and* the home indicator, or the last line of the
     footer sits under both. */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* 44px is the smallest reliably tappable target. Footer and drawer links
     were 35px — fine with a cursor, a coin-toss with a thumb. */
  .site-footer__col a,
  .site-footer__legal-inner a,
  .drawer__signin,
  .drawer__nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Standalone links ("View all", "See the schedule") are targets in their own
     right, unlike links inside a sentence, which WCAG 2.5.8 exempts and which
     cannot grow without breaking the line box around them. */
  .textlink, .site-header__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The monthly/yearly switch is the one control on the pricing page, at 34px. */
  .billing-toggle__switch button { min-height: 44px; padding-left: 18px; padding-right: 18px; }

  /* The announcement's link is 14px of text in a one-line bar. Rather than
     inflate the bar, extend the target past the text with a pseudo-element —
     the whole strip is about that one class anyway. */
  .announce__inner { position: relative; }
  .announce a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* iOS Safari zooms the viewport whenever a focused field is under 16px, and
     leaves the user to pinch back out. Every field on the site inherited the
     14-15px body size, so this fired on every tap into the contact form. */
  /* .form-card .input/.textarea pins 14px further up, so the class selectors
     have to be named here to outrank it. */
  input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  select,
  textarea,
  .form-card .input,
  .form-card .textarea {
    font-size: 16px;
  }
  input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  select {
    min-height: 46px;
  }

  /* A phone has no hover, so pressed-state feedback is the only feedback
     there is. */
  .btn:active, .tabbar a:active, .course-card:active, .class-row:active {
    transform: scale(0.985);
  }
  .tabbar a:active { opacity: 0.6; }

  /* Horizontal scrollers get momentum and lose their scrollbar. */
  .compare { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .compare::-webkit-scrollbar { display: none; }

  /* The drawer scrolls on its own instead of dragging the page behind it. */
  .drawer { overscroll-behavior: contain; }

  /* Auto-hiding header. The class is added by site.js, so with JS off the
     header keeps its existing always-visible behaviour. */
  .site-header--auto { transition: transform 0.24s ease; will-change: transform; }
  .site-header--auto.site-header--hidden { transform: translateY(-100%); }
}

/* ── Phone ───────────────────────────────────────────────── */
/* Nothing below 820px existed before this, so a 375px phone was rendering
   tablet layout. */
@media (max-width: 560px) {
  :root { --gutter: 16px; }

  /* The first screen should show more than a headline. The home hero ran the
     full viewport height before any content appeared. */
  .hero-home__inner { padding: 36px var(--gutter); gap: 28px; }
  .hero-home .btn-row { margin-bottom: 28px; }
  .hero-home__media { height: 210px; }
  .hero__inner { min-height: 250px; }
  .detail-hero__inner { min-height: 0; }
  .section { padding-top: 40px; padding-bottom: 40px; }

  /* A glance, not a paragraph — it was wrapping to two lines. */
  .announce { font-size: 11.5px; letter-spacing: 0.2px; }
  .announce__inner { padding-top: 7px; padding-bottom: 7px; }

  .site-header__inner { min-height: 58px; padding-top: 8px; padding-bottom: 8px; }
  .site-header__logo img { width: 186px; }

  /* Two columns of statistics is one column too many at this width. */
  .grid--4, .figures__inner { grid-template-columns: minmax(0, 1fr); }

  /* Stacked, full-width actions: thumb reach beats visual tidiness, and it
     stops a two-button row splitting unevenly across the fold. */
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-row .btn { width: 100%; justify-content: center; }

  /* Freed from the desktop hero's absolute corner. */
  .enroll-card { position: static; width: 100%; margin-top: 16px; }
}

/* ── Installed (standalone) ──────────────────────────────── */
/* Launched from the home screen there is no browser chrome, so whatever sits
   at the top of the page has to clear the status bar itself. The announcement
   bar is conditional (inc/data.php may have no upcoming class), so the inset
   goes on both candidates and the sibling rule takes it back off the header
   whenever the announcement is there to absorb it. */
@media (display-mode: standalone) {
  .announce__inner { padding-top: calc(7px + env(safe-area-inset-top, 0px)); }
  .site-header__inner { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .announce + .site-header .site-header__inner { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
  .site-header, .announce, .tabbar, .drawer, .site-footer, .btn, .skip-link { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .hero, .detail-hero, .panel-dark, .figures { background: #fff !important; color: #000 !important; }
}