/* ── tokens ─────────────────────────────────────────────── */
:root {
  --paper:      #EDF0F2;
  --surface:    #F7F9FA;
  --ink:        #14181C;
  --muted:      #5C6670;
  --rule:       #CBD3D8;
  --rule-soft:  #DCE3E7;
  --accent:     #BE3F27;
  --accent-ink: #FFFFFF;
  --good:       #1C6B61;

  --display: "Futura", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: Monaco, Menlo, "DejaVu Sans Mono", "Courier New", monospace;

  --step--1: clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.7rem, 1.7rem + 4.6vw, 5.6rem);

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #101418;
    --surface:    #171C21;
    --ink:        #E4E9EC;
    --muted:      #97A3AC;
    --rule:       #2A333A;
    --rule-soft:  #212930;
    --accent:     #E4674C;
    --accent-ink: #12171A;
    --good:       #56A79A;
  }
}
:root[data-theme="dark"] {
  --paper:      #101418;
  --surface:    #171C21;
  --ink:        #E4E9EC;
  --muted:      #97A3AC;
  --rule:       #2A333A;
  --rule-soft:  #212930;
  --accent:     #E4674C;
  --accent-ink: #12171A;
  --good:       #56A79A;
}

/* ── base ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.rule-top { border-top: 1px solid var(--rule); }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ── masthead ───────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--display);
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
}
.wordmark b { font-weight: 600; }
.wordmark span { font-weight: 300; }
.wordmark::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  background: var(--accent);
  border-radius: 50%;
  align-self: center;
  margin-right: 0.35rem;
  flex: none;
}

.masthead nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.2rem);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] { color: var(--ink); }

/* ── hero ───────────────────────────────────────────────── */
.hero { padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 5.5rem); }

.hero h1 {
  font-size: var(--step-4);
  font-weight: 300;
  max-width: 14ch;
}
.hero h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

.hero-lede {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 48ch;
}
.hero-lede strong { color: var(--ink); font-weight: 600; }

.actions {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9em 1.5em;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-outline:hover { border-color: var(--accent); filter: none; }

.btn-quiet {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2em;
}
.btn-quiet:hover { color: var(--ink); border-color: var(--accent); }

/* provenance strip */
.provenance {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.provenance b { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }

/* ── sections ───────────────────────────────────────────── */
.section-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.section-head h2 { font-size: var(--step-3); max-width: 18ch; }
.section-head p { color: var(--muted); max-width: 54ch; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.card {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: calc(var(--step-0) * 0.96); }
.card .tag {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── beliefs ────────────────────────────────────────────── */
.beliefs { background: var(--surface); }

.belief-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.belief { display: grid; gap: 0.8rem; align-content: start; }
.belief h3 {
  font-size: var(--step-2);
  font-weight: 400;
  max-width: 16ch;
}
.belief p { color: var(--muted); }
.belief::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
}

/* ── page hero (interior pages) ─────────────────────────── */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.page-hero h1 {
  font-size: var(--step-3);
  font-weight: 300;
  max-width: 20ch;
  margin-top: 0.9rem;
}
.page-hero h1 em { font-style: normal; font-weight: 600; color: var(--accent); }
.page-hero .hero-lede { max-width: 54ch; }

/* ── sessions (the mock interview sequence) ─────────────── */
.sessions {
  display: grid;
  border-top: 1px solid var(--rule);
}
.session {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.4rem clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 820px) {
  .session { grid-template-columns: 3.5rem 15rem minmax(0, 1fr) auto; align-items: center; }
}
.session-n {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--accent);
}
.session-title { display: grid; gap: 0.5rem; }
.session-title h3 { font-size: var(--step-1); }
.session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.session-meta .dur { color: var(--muted); }
.session-meta .free {
  color: var(--good);
  border: 1px solid currentColor;
  padding: 0.1em 0.55em;
}
.session p.desc {
  color: var(--muted);
  grid-column: 2 / -1;
  font-size: calc(var(--step-0) * 0.96);
}
@media (min-width: 820px) {
  .session p.desc { grid-column: 3; }
  .session .book { grid-column: 4; }
}
.session .book { grid-column: 2 / -1; justify-self: start; margin-top: 0.4rem; }
@media (min-width: 820px) {
  .session .book { justify-self: end; margin-top: 0; }
}

/* ── price band ─────────────────────────────────────────── */
.price-band {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border: 1px solid var(--accent);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.4rem;
  max-width: 46rem;
}
.price-band .amt {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-band .what { color: var(--ink); }
.price-band .label {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: auto;
}

/* ── booking ────────────────────────────────────────────── */
.booking { background: var(--surface); }
.booking-cta {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.booking-cta p { color: var(--muted); max-width: 52ch; }

/* ── close ──────────────────────────────────────────────── */
.close { border-top: 1px solid var(--rule); }
.close h2 { font-size: var(--step-3); max-width: 16ch; }
.close p { color: var(--muted); margin-top: 1.1rem; max-width: 50ch; }

footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--muted);
}
footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}