/**
 * Test Prep hub — styles unique to /test-prep/ (PlTestPrepPage).
 *
 * Loaded *after* test-landing.css so it shares the font + color tokens
 * but its own component classes (.esl-tp__*) don't collide with the
 * test-landing .esl-tl__* family.
 */

:root {
  --tp-deep: #1A1A1A;
  --tp-cream: #FFF8EE;
  --tp-cream-warm: #FFEAD3;
  --tp-cream-light: #FCE4CB;
  --tp-card: #FFFFFF;
  --tp-accent: #F77205;
  --tp-accent2: #F78B33;
  --tp-accent-soft: #F8BA7D;
  --tp-accent-dark: #C45400;
  --tp-muted: rgba(26,26,26,0.62);
  --tp-line: rgba(26,26,26,0.10);
}

.esl-tp {
  background: var(--tp-cream);
  color: var(--tp-deep);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.esl-tp__inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.esl-tp__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--tp-accent);
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── HERO ─────────────────────────────── */
.esl-tp__hero {
  position: relative;
  padding: 48px 0 70px;
  overflow: hidden;
}
.esl-tp__hero-blob-1, .esl-tp__hero-blob-2, .esl-tp__hero-blob-3 {
  position: absolute; border-radius: 50%; border: 2.5px solid var(--tp-deep);
}
.esl-tp__hero-blob-1 { top: 60px;  right: -100px; width: 280px; height: 280px; background: var(--tp-cream-light); }
.esl-tp__hero-blob-2 { top: 200px; right: 140px;  width: 100px; height: 100px; background: var(--tp-accent); }
.esl-tp__hero-blob-3 { top: 360px; right: 280px;  width: 42px;  height: 42px;  background: var(--tp-accent-dark); border-width: 2px; }

.esl-tp__crumbs {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--tp-muted);
  margin-bottom: 22px;
}
.esl-tp__crumbs a { color: var(--tp-muted); text-decoration: none; }
.esl-tp__crumb-active { color: var(--tp-accent); font-weight: 800; }

.esl-tp__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: flex-end;
}
@media (max-width: 1100px) {
  .esl-tp__hero-grid { grid-template-columns: 1fr; align-items: stretch; }
}

.esl-tp__h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -4px;
  margin: 0 0 24px;
  color: var(--tp-deep);
  text-wrap: balance;
}
.esl-tp__h1-pill {
  background: var(--tp-accent);
  color: var(--tp-cream);
  padding: 0 18px;
  border-radius: 18px;
  display: inline-block;
  transform: rotate(-1.5deg);
  border: 3px solid var(--tp-deep);
  box-shadow: 6px 6px 0 var(--tp-deep);
}
.esl-tp__hero-summary {
  font-size: 19px; line-height: 1.6;
  color: var(--tp-muted);
  margin: 0 0 30px;
  max-width: 620px;
}
.esl-tp__hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons */
.esl-tp__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800; font-size: 15px;
  border: 2.5px solid var(--tp-deep);
  box-shadow: 4px 4px 0 var(--tp-deep);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.esl-tp__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tp-deep); }
.esl-tp__btn--accent   { background: var(--tp-accent);  color: var(--tp-cream); }
.esl-tp__btn--accent2  { background: var(--tp-accent2); color: var(--tp-cream); }
.esl-tp__btn--card     { background: var(--tp-card);    color: var(--tp-deep); }
.esl-tp__btn--cream    { background: var(--tp-cream);   color: var(--tp-deep); }
.esl-tp__btn--card-sm  {
  background: var(--tp-card); color: var(--tp-deep);
  padding: 13px 20px; font-size: 14.5px; font-weight: 700;
}

/* Hero stack card */
.esl-tp__hero-stack {
  background: var(--tp-card);
  border: 2.5px solid var(--tp-deep);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--tp-deep);
  padding: 22px 24px;
  transform: rotate(1deg);
}
@media (max-width: 1100px) { .esl-tp__hero-stack { transform: none; } }
.esl-tp__stack-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--tp-accent);
  font-weight: 800; letter-spacing: 1.2px;
  margin-bottom: 14px;
}
.esl-tp__stack-list { display: flex; flex-direction: column; gap: 10px; }
.esl-tp__stack-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px;
  border: 2px solid var(--tp-deep);
  box-shadow: 2px 2px 0 var(--tp-deep);
  text-decoration: none; color: var(--tp-deep);
}
.esl-tp__stack-row:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tp-deep); }
.esl-tp__stack-row--warm  { background: var(--tp-cream-warm); }
.esl-tp__stack-row--light { background: var(--tp-cream-light); }
.esl-tp__stack-glyph {
  border-radius: 9px; overflow: hidden;
  box-shadow: 1.5px 1.5px 0 var(--tp-deep);
  display: flex; flex: 0 0 36px;
}
.esl-tp__stack-meta { flex: 1; min-width: 0; }
.esl-tp__stack-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.4px; line-height: 1;
}
.esl-tp__stack-lessons {
  font-size: 11.5px; color: var(--tp-muted); margin-top: 2px;
}
.esl-tp__stack-arrow { color: var(--tp-deep); display: flex; flex: 0 0 auto; }

/* ── DECISION BAND ────────────────────── */
.esl-tp__decision {
  padding: 60px 0 100px;
  background: var(--tp-cream-warm);
  border-top: 2.5px solid var(--tp-deep);
  border-bottom: 2.5px solid var(--tp-deep);
}
.esl-tp__decision-head {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px;
  align-items: end; margin-bottom: 36px;
}
@media (max-width: 900px) {
  .esl-tp__decision-head { grid-template-columns: 1fr; gap: 18px; }
}
.esl-tp__h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 0.98; letter-spacing: -1.6px;
  margin: 0; font-weight: 800;
  text-wrap: balance;
}
.esl-tp__h2-em { color: var(--tp-accent); font-style: normal; }
.esl-tp__decision-sub {
  font-size: 16px; line-height: 1.6;
  color: var(--tp-muted);
  margin: 0; padding-bottom: 6px;
}

.esl-tp__decision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .esl-tp__decision-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .esl-tp__decision-grid { grid-template-columns: 1fr; } }

.esl-tp__decision-card {
  background: var(--tp-card);
  border-radius: 18px;
  border: 2.5px solid var(--tp-deep);
  box-shadow: 5px 5px 0 var(--tp-deep);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.esl-tp__decision-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 2px solid var(--tp-deep);
  box-shadow: 2px 2px 0 var(--tp-deep);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 14px;
}
.esl-tp__decision-goal {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.4px; line-height: 1.2;
}
.esl-tp__decision-chips {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.esl-tp__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--tp-cream-light);
  color: var(--tp-deep);
  border: 1.5px solid var(--tp-deep);
  border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.3px;
}
.esl-tp__chip--primary { background: var(--tp-accent); color: var(--tp-cream); }

/* ── SECTIONS ─────────────────────────── */
.esl-tp__sections-intro {
  padding: 80px 0 30px;
}
.esl-tp__sections-intro .esl-tp__h2 { max-width: 900px; font-size: clamp(40px, 5.5vw, 60px); letter-spacing: -1.8px; }

.esl-tp__section {
  border-top: 2.5px solid var(--tp-deep);
  padding: 90px 0;
}
.esl-tp__section--cream { background: var(--tp-cream); }
.esl-tp__section--warm  { background: var(--tp-cream-warm); }

.esl-tp__section-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px; align-items: center;
}
.esl-tp__section-grid.is-flipped { grid-template-columns: 1fr 1.3fr; }
.esl-tp__section-grid.is-flipped .esl-tp__section-text { order: 2; }
.esl-tp__section-grid.is-flipped .esl-tp__section-visual { order: 1; }
@media (max-width: 1000px) {
  .esl-tp__section-grid, .esl-tp__section-grid.is-flipped { grid-template-columns: 1fr; }
  .esl-tp__section-grid.is-flipped .esl-tp__section-text,
  .esl-tp__section-grid.is-flipped .esl-tp__section-visual { order: 0; }
}

.esl-tp__section-head {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 24px;
}
.esl-tp__section-glyph {
  border-radius: 18px;
  display: inline-block;
  box-shadow: 5px 5px 0 var(--tp-deep);
  line-height: 0;
}
.esl-tp__section-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 78px;
  letter-spacing: -2.8px;
  line-height: 1;
  color: var(--tp-deep);
}
.esl-tp__section-name--sm { font-size: 56px; letter-spacing: -1.8px; }
.esl-tp__section-longname {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--tp-muted);
  letter-spacing: 1.4px; font-weight: 800;
  text-transform: uppercase;
  margin-top: 8px; max-width: 480px;
}

.esl-tp__section-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--tp-card); color: var(--tp-deep);
  border: 2px solid var(--tp-deep);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--tp-deep);
  font-size: 13px; font-weight: 800;
  margin-bottom: 22px;
}
.esl-tp__section-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tp-accent-dark);
}

.esl-tp__section-summary {
  font-size: 17px; line-height: 1.6;
  color: var(--tp-muted);
  margin: 0 0 28px; max-width: 560px;
}

.esl-tp__section-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.esl-tp__section-stat {
  background: var(--tp-card); color: var(--tp-deep);
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--tp-deep);
  box-shadow: 2px 2px 0 var(--tp-deep);
  min-width: 118px;
}
.esl-tp__section-stat--first { background: var(--tp-accent); color: var(--tp-cream); }
.esl-tp__section-stat-k {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 18px;
  line-height: 1; margin-bottom: 3px;
}
.esl-tp__section-stat-v {
  font-size: 11px; opacity: 0.85; letter-spacing: 0.3px;
}

.esl-tp__section-coach {
  padding: 12px 16px;
  background: var(--tp-cream-light);
  border-radius: 12px;
  border: 2px solid var(--tp-deep);
  box-shadow: 2px 2px 0 var(--tp-deep);
  font-size: 13.5px; color: var(--tp-deep);
  margin-bottom: 28px; max-width: 560px;
}
.esl-tp__section-coach strong { color: var(--tp-accent); }

.esl-tp__section-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Score-scale card */
.esl-tp__score-card {
  border-radius: 24px;
  border: 2.5px solid var(--tp-deep);
  box-shadow: 6px 6px 0 var(--tp-deep);
  padding: 28px 30px;
  transform: rotate(-1deg);
  position: relative;
}
@media (max-width: 1000px) { .esl-tp__score-card { transform: none; } }
.esl-tp__score-corner {
  position: absolute; top: 18px; right: 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 38px;
  letter-spacing: -1px; line-height: 1;
  opacity: 0.55;
}
.esl-tp__score-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.4px;
  font-weight: 800; opacity: 0.85;
  margin-bottom: 18px;
}
.esl-tp__score-fmt {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 20px;
}
.esl-tp__score-fmt-cell {
  background: var(--tp-card); color: var(--tp-deep);
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--tp-deep);
  box-shadow: 2px 2px 0 var(--tp-deep);
}
.esl-tp__score-fmt-k {
  font-size: 10.5px; color: var(--tp-muted);
  font-weight: 800; letter-spacing: 1px;
  margin-bottom: 4px;
}
.esl-tp__score-fmt-v {
  font-size: 13px; font-weight: 700; line-height: 1.25;
}
.esl-tp__score-fmt-v--big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 22px;
  line-height: 1; letter-spacing: -0.6px;
}

.esl-tp__score-scale {
  background: var(--tp-card); color: var(--tp-deep);
  padding: 18px 18px 20px;
  border-radius: 14px;
  border: 2px solid var(--tp-deep);
  box-shadow: 2px 2px 0 var(--tp-deep);
}
.esl-tp__score-scale-head {
  display: flex; justify-content: space-between;
  margin-bottom: 10px; align-items: baseline;
}
.esl-tp__score-scale-k {
  font-size: 10.5px; color: var(--tp-muted);
  font-weight: 800; letter-spacing: 1px;
}
.esl-tp__score-scale-v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 18px;
  color: var(--tp-accent); letter-spacing: -0.4px;
}
.esl-tp__score-bar {
  height: 18px; border-radius: 99px;
  border: 2px solid var(--tp-deep);
  overflow: hidden;
  background: linear-gradient(90deg, var(--tp-cream-light) 0%, var(--tp-accent-soft) 33%, var(--tp-accent2) 66%, var(--tp-accent) 100%);
  display: flex; align-items: center; justify-content: flex-end;
}
.esl-tp__score-bar--sat {
  background: linear-gradient(90deg, var(--tp-cream-light) 0%, var(--tp-cream-light) 30%, var(--tp-accent-soft) 50%, var(--tp-accent) 75%, var(--tp-accent) 100%);
}
.esl-tp__score-bar-marker {
  margin-right: 25%;
  width: 14px; height: 24px;
  margin-top: -3px; margin-bottom: -3px;
  background: var(--tp-deep);
  border-radius: 3px;
}
.esl-tp__score-scale-sub {
  font-size: 11.5px; color: var(--tp-muted);
  margin-top: 8px; letter-spacing: 0.3px;
}

.esl-tp__score-skills {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.esl-tp__score-skill-head {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; margin-bottom: 3px;
}
.esl-tp__score-skill-val {
  font-family: 'JetBrains Mono', monospace;
  color: var(--tp-accent);
}
.esl-tp__score-mini-bar {
  height: 8px; background: var(--tp-cream-light);
  border-radius: 99px;
  border: 1.5px solid var(--tp-deep);
  overflow: hidden;
}
.esl-tp__score-mini-fill {
  height: 100%;
  border-right: 1.5px solid var(--tp-deep);
}

/* ── FINAL CTA ───────────────────────── */
.esl-tp__final {
  padding: 70px 0 90px;
  border-top: 2.5px solid var(--tp-deep);
}
.esl-tp__final-card {
  background: var(--tp-accent); color: var(--tp-cream);
  border-radius: 24px;
  border: 2.5px solid var(--tp-deep);
  box-shadow: 6px 6px 0 var(--tp-deep);
  padding: 48px 50px;
  position: relative;
  overflow: hidden;
}
.esl-tp__final-blob-1, .esl-tp__final-blob-2 {
  position: absolute; border-radius: 50%;
  border: 3px solid var(--tp-deep);
}
.esl-tp__final-blob-1 { top: -80px; right: -40px; width: 240px; height: 240px; background: var(--tp-cream-warm); }
.esl-tp__final-blob-2 { bottom: -100px; right: 140px; width: 170px; height: 170px; background: var(--tp-accent-soft); }
.esl-tp__final-inner { position: relative; max-width: 720px; }
.esl-tp__final-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 1.4px;
  font-weight: 800; margin-bottom: 14px;
  opacity: 0.9;
}
.esl-tp__final-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 0.98; letter-spacing: -1.6px;
  margin: 0 0 16px;
  text-wrap: balance;
}
.esl-tp__final-pill {
  background: var(--tp-cream);
  color: var(--tp-accent);
  padding: 0 14px;
  border-radius: 14px;
  display: inline-block;
  transform: rotate(-1.5deg);
  border: 3px solid var(--tp-deep);
  box-shadow: 5px 5px 0 var(--tp-deep);
}
.esl-tp__final-body {
  font-size: 16px; opacity: 0.95;
  margin: 0 0 26px; max-width: 460px;
}
.esl-tp__final-ctas { display: flex; gap: 12px; flex-wrap: wrap; }