/* =========================================================================
   elite.css — premium design layer for the HPT public website.
   Loaded AFTER style2.css so equal-specificity rules win the cascade.

   Direction (per the 2026-07 design review): "Apple meets Stanford meets
   Stripe." Lean into the navy, demote green to an accent, create real
   visual hierarchy with typography + whitespace instead of borders/boxes.

   Scope: global shell (buttons, hero, cards, nav CTA, footer) + a
   homepage-specific block namespaced under `.elite-home`. Interior pages
   inherit the shell uplift; their dense copy layouts are left intact.
   ========================================================================= */

:root {
  /* Navy scale — the signature teal-navy family, defined in the ROUND 2
     block further down (search "--navy-950: #142f42"). The original
     purple-navy scale (#1c244b et al.) that sat here was dead code since
     the 2026-07-10 recolor and was retired 2026-07-24 (brand-spec §2). */

  /* Green — signature accent, used sparingly (CTA / success / highlight). */
  --green: #8fae2f;
  --green-bright: #a8c63e;
  --green-deep: #6b7c3f;

  /* Neutrals */
  --ink: #16203f;          /* headings on light */
  --body-ink: #4a5169;     /* body text on light */
  --muted-ink: #6b7185;
  --warm-gray: #f6f6f2;    /* alternating light section */
  --cool-tint: #eef3f8;
  --line: #e7eaf0;

  /* Elevation + radius */
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 10px rgba(15, 24, 54, 0.06);
  --shadow-md: 0 14px 40px rgba(15, 24, 54, 0.10);
  --shadow-lg: 0 30px 70px rgba(9, 15, 40, 0.28);

  --maxw: 1180px;
}

/* -------------------------------------------------------------------------
   Typography — more contrast, more air.
   ------------------------------------------------------------------------- */
body {
  font-size: 16px;
  color: var(--body-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Lock horizontal panning on mobile: no page should ever scroll sideways.
   `clip` (not `hidden`) contains stray full-width children without creating a
   scroll container, so it never breaks position: sticky / fixed descendants. */
html, body { overflow-x: clip; max-width: 100%; }
.elite-home p { font-size: 1.0625rem; line-height: 1.75; color: var(--body-ink); }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 18px;
}
.eyebrow.on-dark { color: var(--green-bright); }

/* Section heads — larger, tighter, calmer subhead. */
.elite-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.elite-section-head .eyebrow { margin-bottom: 14px; }
.elite-section-head h1,
.elite-section-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.elite-section-head p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--muted-ink);
  margin: 18px auto 0;
}
.on-dark .elite-section-head h2, .elite-section-head.on-dark h2 { color: #fff; }
.on-dark .elite-section-head p, .elite-section-head.on-dark p { color: #b9c2d8; }

/* -------------------------------------------------------------------------
   Section rhythm — alternating backgrounds so nothing bleeds together.
   ------------------------------------------------------------------------- */
.sec-warm { background: var(--warm-gray); }
.sec-navy {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #cdd5e6;
}
.sec-pad { padding: 92px 0; }
@media (max-width: 768px) { .sec-pad { padding: 60px 0; } }

/* -------------------------------------------------------------------------
   Buttons — taller, softly rounded, subtle depth. Global uplift.
   ------------------------------------------------------------------------- */
.btn-elite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-align: center;
}
.btn-elite-primary {
  color: #16240a;
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%);
  box-shadow: 0 12px 26px rgba(143, 174, 47, 0.35);
}
.btn-elite-primary:hover {
  color: #16240a;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(143, 174, 47, 0.45);
}
.btn-elite-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}
.btn-elite-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.btn-elite-dark {
  color: #fff;
  background: var(--navy-800);
  box-shadow: var(--shadow-sm);
}
.btn-elite-dark:hover { color: #fff; background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Elevate the legacy .dark-btn everywhere without touching its markup. */
.dark-btn {
  padding: 14px 30px;
  font-size: 15px;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.dark-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Intro-section CTA (e.g. "Meet Our Tutors"): make it a block-level inline-flex
   so its left edge lines up with the prose above, and give it real breathing
   room from the paragraph it follows (it was an inline anchor hugging the text). */
.card-data-wrap .dark-btn { display: inline-flex; align-items: center; margin-top: 28px; }

/* -------------------------------------------------------------------------
   HERO — deep navy, elegant headline, glass registration card.
   Applies to hero_homepage + hero_with_form (shared .hero-section).
   ------------------------------------------------------------------------- */
.hero-section {
  background: linear-gradient(155deg, var(--navy-950) 0%, var(--navy-800) 52%, var(--navy-700) 100%);
  padding: 96px 0 104px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
/* Soft radial glow — subtle depth, very premium. */
.hero-section::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(168, 198, 62, 0.14) 0%, rgba(168, 198, 62, 0) 70%);
  pointer-events: none;
}
.hero-section::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -8%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(43, 86, 122, 0.5) 0%, rgba(43, 86, 122, 0) 70%);
  pointer-events: none;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-section .hero-content { padding-right: 40px; }
.hero-section .title,
.hero-section .hero-content .title {
  color: #fff;
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.hero-section .hero-content .description {
  color: #c3ccdf;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 540px;
}
.text-center .hero-content .description,
.hero-content.text-center .description { margin-left: auto; margin-right: auto; }

/* Home heroes (national + regional): the paragraph reads left-aligned on
   phones while the eyebrow/title stay centered (Victor 2026-09-16). Desktop
   is already left via text-lg-start, so this only changes <992px. */
.hero-section .hero-content--home .description { text-align: left; }

/* Stat chips */
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 32px; }
.hero-content.text-center .hero-stats,
.text-center .hero-stats { justify-content: center; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #eaf0fb;
  font-size: 0.9rem;
  font-weight: 600;
}
.hero-chip i { color: var(--green-bright); font-size: 0.85rem; }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero-content.text-center .hero-cta-row,
.text-center .hero-cta-row { justify-content: center; }

/* Region selector — subtle, tucked under the CTAs on the dark hero */
.hero-section .region-selector { margin-top: 24px; max-width: 360px; }
.hero-content.text-center .region-selector,
.text-center .hero-section .region-selector { margin-left: auto; margin-right: auto; }
.hero-section .region-selector p { color: #98a3bd !important; font-size: 0.85rem !important; }
.hero-section .region-selector select.form-control {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #eaf0fb !important;
  border-radius: 10px;
  height: 46px;
}
.hero-section .region-selector select.form-control option { color: #16203f; }

/* Legacy .dark-btn CTAs sitting on the navy hero (compact / lander heroes):
   promote to the green accent so they pop instead of navy-on-navy. The
   register-card submit button keeps its own higher-specificity style. */
.hero-section .dark-btn {
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%);
  color: #16240a;
  box-shadow: 0 12px 26px rgba(143, 174, 47, 0.3);
}
.hero-section .dark-btn:hover { color: #16240a; }

/* Breadcrumb + any stray copy stays legible on the navy hero. */
.hero-section .breadcrumb,
.hero-section .breadcrumb a,
.hero-section .breadcrumb-item,
.hero-section .breadcrumb-item a { color: #b9c2d8 !important; }
.hero-section .breadcrumb-item.active { color: #eaf0fb !important; }

/* Legacy "happy students" strip on dark hero */
.hero-section .happy-student { margin-top: 34px; align-items: center; }
.hero-section .happy-value .value,
.hero-section .rating .value { color: #fff; }
.hero-section .client-data-wrap { border-right: 1px solid rgba(255,255,255,0.18); }
.hero-section .client-data-wrap p,
.hero-section .rating p { color: #aeb8d0; }

/* Glass registration card */
.hero-section .register-form-wrap,
.register-form-wrap.glass-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.hero-section .register-form-wrap h5 {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  justify-content: center;
}
@media (min-width: 992px) { .hero-section .register-form-wrap h5 { justify-content: flex-start; } }
.hero-section .register-form-wrap h3 { color: var(--muted-ink); font-size: 1rem; margin-top: 6px; }
.hero-section .register-form-wrap .input-wrap label { color: var(--navy-700); font-weight: 600; }
.hero-section .register-form-control {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink) !important;
}
.hero-section input.form-control.register-form-control::placeholder { color: #9aa3b5 !important; }
.hero-section .register-form-wrap .submit-btn-wrap .dark-btn {
  width: 100%;
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%);
  color: #16240a;
  border-radius: 14px;
  padding: 16px 24px;
  box-shadow: 0 12px 26px rgba(143, 174, 47, 0.32);
}
.hero-section .register-form-wrap .submit-btn-wrap .dark-btn:hover { transform: translateY(-2px); }

/* CRO 3.7 — registration field validation (unscoped: the form renders both in
   the hero and in the bottom register-CTA band). */
.register-form-control.is-invalid {
  border-color: #e5484d !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12);
}
.reg-field-error {
  display: block;
  margin-top: 6px;
  color: #e5484d;
  font-size: 13px;
  font-weight: 500;
}
.reg-field-error[hidden] { display: none; }

/* -------------------------------------------------------------------------
   TRUST BAR — credibility strip directly under the hero.
   ------------------------------------------------------------------------- */
.trust-bar { background: #fff; border-bottom: 1px solid var(--line); }
.trust-bar .container { padding-top: 30px; padding-bottom: 30px; }
.trust-bar-title {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-bottom: 20px;
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 36px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.trust-item i { color: var(--green); font-size: 1.05rem; }

/* -------------------------------------------------------------------------
   FEATURE CARDS — "The HPT Difference": large icon, air, no box borders.
   ------------------------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 40px 34px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-600));
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 22px;
}
.feature-icon.green { background: linear-gradient(160deg, var(--green-deep), var(--green)); }
.feature-card h3 { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.feature-card p { font-size: 1.02rem; line-height: 1.65; color: var(--body-ink); margin: 0; }

/* -------------------------------------------------------------------------
   SUBJECT CARDS — icon + title + one line + Learn More.
   ------------------------------------------------------------------------- */
.subject-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .subject-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .subject-grid { grid-template-columns: 1fr; } }
.subject-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.subject-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d7e0cf; }
.subject-card .subject-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--color-accent-bg, #f5f8ee); color: var(--green-deep);
  font-size: 1.35rem; margin-bottom: 18px;
}
.subject-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.subject-card h3 a { color: var(--ink); }
.subject-card h3 a:hover { color: var(--green-deep); }
.subject-card p { font-size: 0.98rem; line-height: 1.6; color: var(--body-ink); margin: 0 0 16px; }
/* In-content links (2026-08-05, Victor): unclassed anchors inside
   paragraphs read as plain body text — make them visibly clickable
   everywhere. Same green-deep + weight as the per-component rules
   below, plus an underline for the affordance. Scoped to :not([class])
   so button-styled anchors (.btn-elite, .dark-btn, cards) are untouched. */
.elite-home p a:not([class]) { color: var(--green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.elite-home p a:not([class]):hover { color: var(--green); }
.subject-card p a { color: var(--green-deep); font-weight: 600; }
.subject-card .learn-more { display: inline-block; font-weight: 700; color: var(--green-deep); font-size: 0.95rem; }
.subject-card:hover .learn-more { color: var(--green); }

/* -------------------------------------------------------------------------
   EMOTIONAL QUOTE BAND.
   ------------------------------------------------------------------------- */
.quote-band { text-align: center; }
.quote-band .quote-mark { font-size: 3.5rem; line-height: 1; color: var(--green-bright); opacity: 0.6; font-weight: 800; }
.quote-band blockquote {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 900px;
  margin: 6px auto 20px;
}
.quote-band .quote-attr { color: #aab4cd; font-size: 1.02rem; font-weight: 500; }

/* -------------------------------------------------------------------------
   TESTIMONIALS — richer cards on navy ("Real Students. Real Results.")
   ------------------------------------------------------------------------- */
/* Navy ONLY for the dark carousel (homepage/regional). The standalone
   testimonials page uses .testimonials-wrap WITHOUT .dark-gradient and is
   intentionally light — don't force it dark. */
.testimonials-wrap.dark-gradient {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%) !important;
  padding: 92px 0;
}
.testimonial-card {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md) !important;
  padding: 30px 28px !important;
  min-height: 220px;
}
.testimonial-card .description { font-size: 1.02rem !important; line-height: 1.7 !important; color: #e6ebf6 !important; font-weight: 500; }
.testimonial-card h5 { font-size: 1.05rem; font-weight: 700; }
.testimonial-stars { font-size: 1rem !important; }

/* -------------------------------------------------------------------------
   HISTORY / IMAGE-BESIDE-COPY — round the image, add depth.
   ------------------------------------------------------------------------- */
.elite-home .card-img-wrap img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.elite-home .card-data-wrap h1,
.elite-home .card-data-wrap h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 20px;
}

/* -------------------------------------------------------------------------
   FAQ — more spacing, calmer accordion.
   ------------------------------------------------------------------------- */
.faq-accordion .accordion-item { margin-bottom: 14px; border-radius: var(--radius-sm) !important; overflow: hidden; border: 1px solid var(--line); }
.faq-accordion .accordion-button { padding: 22px 24px; font-size: 1.08rem; font-weight: 600; }
/* Even top/bottom padding in the answer box (was 4px top / 24px bottom, which
   read as cramped at the top). The open button's bottom padding is tightened so
   the question→answer gap doesn't balloon. */
.faq-accordion .accordion-button:not(.collapsed) { padding-bottom: 8px; }
.faq-accordion .accordion-body { padding: 18px 24px; font-size: 1.02rem; line-height: 1.7; }

/* -------------------------------------------------------------------------
   NAV — bright "Book Free Session" CTA beside Log in.
   ------------------------------------------------------------------------- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  color: #16240a !important;
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%);
  box-shadow: 0 8px 18px rgba(143, 174, 47, 0.3);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(143, 174, 47, 0.42); color: #16240a !important; }
.header-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1200px) {
  .header-actions { gap: 10px; margin-top: 8px; }
}

/* -------------------------------------------------------------------------
   FOOTER — logo lockup + mission line above the contact columns.
   ------------------------------------------------------------------------- */
.footer-brand { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-brand .footer-logo img { height: 46px; width: auto; }
.footer-brand .footer-logo span { color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.1; }
.footer-brand .footer-mission { color: #aab4cd; font-size: 1.05rem; line-height: 1.65; max-width: 560px; margin: 0; }

/* =========================================================================
   ROUND 2 (2026-07-10 review feedback):
   - Recolor all dark surfaces to the signature blue (#215065 / #183959,
     the login-button + footer gradient) instead of the navy-purple.
   - Fuse the top nav bar into the hero as one dark branded zone.
   - One-line nav; tutoring photo under the hero overlay; tighter chips.
   ========================================================================= */

:root {
  --navy-950: #142f42;  /* deepest — header + gradient start */
  --navy-900: #183959;  /* brand navy-blue */
  --navy-800: #1d4a60;
  --navy-700: #215065;  /* signature blue = login button / --color-secondery */
  --navy-600: #2b6580;
}

/* ---- Hero: signature-blue gradient over a photo-toned base.
   2026-08-25 perf: the tutoring photo (85KB webp) was the mobile LCP element
   on the paid landers but only 5-18% visible under these gradients; replaced
   with its average color (#908882) — same composite tone, zero bytes. ---- */
.hero-section {
  background:
    linear-gradient(150deg, rgba(20, 47, 66, 0.955) 0%, rgba(24, 57, 89, 0.90) 46%, rgba(33, 80, 101, 0.82) 100%)
    #908882;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Dark, integrated header (sitewide) ---- */
#header, .header { background: var(--navy-950); }
.header { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

/* Top-level nav items are <button class="nav-link nav-link-button"> */
header .nav-link-button { color: #e7edf7 !important; }
header .nav-link-button:hover,
.main-menu .nav > .nav-item:hover > .nav-link-button { color: #ffffff !important; }

/* Wordmark on dark */
.logo-wordmark-top { color: #ffffff; }
.logo-wordmark-bottom { color: var(--green-bright); }

/* Hamburger → light on the dark bar */
.toggle-menu span,
.home .toggle-menu span { background: #ffffff; }
.toggle-menu.active span { background: #ffffff; }

/* One-line nav (desktop only): stop Bootstrap .nav from wrapping, tighten
   spacing. Scoped >1024px so the mobile slide-in panel keeps stacking. */
@media (min-width: 1025px) {
  .nav-wrappers ul.nav { flex-wrap: nowrap; align-items: center; }
  .main-menu .nav-item .nav-link { padding: 24px 11px; }
}

/* Header actions: Log in becomes a compact outline; CTA stays green */
.header-actions { gap: 10px; }
.header-actions .login-btn.dark-btn {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: #ffffff;
  box-shadow: none;
  padding: 11px 18px;
}
.header-actions .login-btn.dark-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: none; }
.header-actions .login-btn.dark-btn img { filter: brightness(0) invert(1); opacity: 0.9; }

/* Submenu dropdowns stay light panels with dark text (unchanged look) */
.submenu-dropdown .nav-link { color: var(--color-light-primary); }

/* ---- Hero chips: slightly more compact so 3 hold one line ---- */
.hero-chip { padding: 8px 14px; font-size: 0.86rem; }

/* ---- About section rework (round 2): scannable highlights + balanced media ---- */
.about-elite .card-data-wrap h2 { margin-bottom: 22px; }
.about-elite .about-lead { font-size: 1.15rem; line-height: 1.7; color: var(--body-ink); }
.about-elite .about-close { margin-top: 8px; }

.about-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
  margin: 28px 0 26px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) { .about-highlights { grid-template-columns: 1fr; gap: 20px; } }
.about-hl { display: flex; gap: 14px; align-items: flex-start; }
.about-hl-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--cool-tint); color: var(--navy-700);
  font-size: 1.05rem;
}
.about-hl-icon.green { background: var(--color-accent-bg, #f5f8ee); color: var(--green-deep); }
.about-hl strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 3px; }
.about-hl p { font-size: 0.94rem !important; line-height: 1.55 !important; color: var(--body-ink); margin: 0 !important; }
.about-hl p a { color: var(--green-deep); font-weight: 600; }

/* Balanced media: taller image + floating stat badge */
.about-media { position: relative; }
.about-img-main {
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-height: 620px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about-stat-badge {
  position: absolute;
  left: -22px;
  bottom: 32px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-700));
  color: #fff;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 210px;
}
.about-stat-badge .about-stat-n { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--green-bright); }
.about-stat-badge .about-stat-l { display: block; font-size: 0.86rem; line-height: 1.35; color: #d3dcec; margin-top: 2px; }
@media (max-width: 991px) {
  .about-media { margin-top: 20px; }
  .about-img-main { min-height: 360px; max-height: 460px; }
  .about-stat-badge { left: 16px; }
}

/* ---- Mobile menu (<=1024px): panel is a white slide-in, so revert the
   dark-bar link/button colors to dark-on-white (the logo + hamburger stay
   on the dark header bar and keep their light treatment). ---- */
@media (max-width: 1024px) {
  header .nav-link-button { color: var(--color-light-primary) !important; }
  header .nav-link-button:hover,
  .main-menu .nav > .nav-item:hover > .nav-link-button { color: var(--color-primary) !important; }
  .header-actions .login-btn.dark-btn {
    background: var(--color-secondery);
    border: none;
    color: #fff;
    padding: 12px 20px;
  }
  .header-actions .login-btn.dark-btn img { filter: none; opacity: 1; }
}

/* Mobile menu stacking: the redesigned hero sets z-index on its container,
   which would otherwise paint over the slide-in panel. Lift the overlay
   above it and keep the logo + hamburger clickable on top to close. */
@media (max-width: 1024px) {
  .main-menu { z-index: 90; }
  /* Only the hamburger needs to sit above the open panel (to close it) —
     not the whole logo lockup, or the white wordmark paints on the panel. */
  .toggle-menu { position: relative; z-index: 100; }
}

/* Header stacking: the redesigned hero sets z-index:1 on its .container.
   The <header> also had z-index:1, and being earlier in the DOM it lost the
   tie — so the hero painted over the desktop dropdowns AND the mobile panel.
   Lift the whole header above the hero. */
.header { position: relative; z-index: 50; }

/* =========================================================================
   ROUND 3 (2026-07-10 review): 8.7 -> 9.7 polish.
   Bigger dramatic hero, background depth, floating form, richer cards +
   interactions, cinematic quote, aspiration sections, timeline story,
   skimmable testimonials, cleaner footer, stronger weight contrast.
   ========================================================================= */

/* ---- Typography: more weight contrast (headline 800 / body 400 / label 500).
   Soften the mid-weight (~600/700) noise the review flagged. ---- */
.elite-home p strong,
.about-lead strong,
.about-hl p strong { font-weight: 600; }
.hero-chip { font-weight: 500; }
.trust-item { font-weight: 500; }

/* ---- HERO: dramatic headline + layered depth ---- */
.hero-section {
  /* 2026-08-25 perf: photo layer replaced by its average color — see note above. */
  background:
    radial-gradient(1100px 560px at 74% 12%, rgba(70, 132, 164, 0.42) 0%, rgba(70, 132, 164, 0) 60%),
    radial-gradient(900px 720px at -5% 108%, rgba(8, 26, 40, 0.65) 0%, rgba(8, 26, 40, 0) 58%),
    linear-gradient(150deg, rgba(19, 44, 62, 0.955) 0%, rgba(24, 57, 89, 0.90) 46%, rgba(33, 80, 101, 0.80) 100%)
    #908882;
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  padding: 104px 0 112px;
  box-shadow: inset 0 -90px 120px -60px rgba(6, 18, 30, 0.55);
}
.hero-section .title,
.hero-section .hero-content .title {
  font-size: clamp(2.9rem, 5.6vw, 4.5rem);   /* up to ~72px */
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.hero-section .hero-content .description {
  font-size: 1.18rem;
  line-height: 1.55;
  max-width: 500px;                            /* forces ~2 lines */
  color: #c8d1e2;
  font-weight: 400;
}

/* Floating "settings panel" registration card */
.hero-section .register-form-wrap,
.register-form-wrap.glass-card {
  padding: 40px 38px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 40px 90px -20px rgba(6, 16, 38, 0.55), 0 8px 20px rgba(6, 16, 38, 0.18);
}
.hero-section .register-form-control {
  height: 54px;
  border-radius: 13px;
  border: 1px solid #eef1f6;
  background: #f8fafc;
  font-size: 1rem;
}
.hero-section .input-wrap label { font-size: 0.82rem; letter-spacing: 0.01em; }
.hero-section .register-form-wrap h5 { font-size: 1.7rem; }
.hero-section .register-form-wrap .submit-btn-wrap .dark-btn { height: 56px; font-size: 1.02rem; border-radius: 16px; }

/* ---- NAV: bigger logo, green reserved for the CTA only ---- */
.logo img { max-width: 78px; }
.logo-wordmark-top { font-size: 18px; }
.logo-wordmark-bottom { color: rgba(255, 255, 255, 0.62); }  /* was green — CTA is now the only green */

/* ---- TRUST BAR icons ---- */
.trust-item i { color: var(--green); font-size: 1rem; }

/* ---- DIFFERENCE cards: larger icons, more air, stronger lift ---- */
.feature-card { padding: 46px 38px; border-radius: var(--radius-lg); }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(15, 24, 54, 0.14); }
.feature-icon { width: 72px; height: 72px; font-size: 1.75rem; border-radius: 18px; margin-bottom: 26px; }
.feature-card h3 { font-size: 1.4rem; }

/* ---- SUBJECT cards: make them beg to be clicked ---- */
.subject-card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; }
.subject-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(15, 24, 54, 0.15); border-color: #cfe0b6; }
.subject-card .subject-icon { transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease; }
.subject-card:hover .subject-icon { background: linear-gradient(160deg, var(--green-deep), var(--green)); color: #fff; transform: scale(1.06); }
.subject-card .learn-more { transition: color 0.2s ease; }
.subject-card .learn-more .arw { display: inline-block; transition: transform 0.22s ease; }
.subject-card:hover .learn-more .arw { transform: translateX(6px); }

/* ---- QUOTE: cinematic, tall, breathing room ---- */
.quote-band { padding: 128px 0; }
.quote-band .quote-mark { font-size: 5rem; margin-bottom: -10px; }
.quote-band blockquote {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 1000px;
  margin: 10px auto 26px;
}
.quote-band .quote-attr { font-size: 1.08rem; letter-spacing: 0.02em; }

/* ---- MORE THAN BETTER GRADES ---- */
.more-than-title { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin-bottom: 16px; }
.more-than-lead { font-size: 1.12rem; line-height: 1.7; color: var(--body-ink); }
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px; }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }
.value-item { display: flex; gap: 13px; align-items: flex-start; }
.value-item > i { color: var(--green); font-size: 1.15rem; margin-top: 3px; }
.value-item strong { display: block; color: var(--ink); font-size: 1.08rem; font-weight: 700; }
.value-item span { color: var(--muted-ink); font-size: 0.96rem; }

/* ---- WHERE OUR STUDENTS GO ---- */
.schools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 860px) { .schools-grid { grid-template-columns: repeat(2, 1fr); } }
.school-name {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy-800);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.school-name:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d7e0cf; }

/* ---- STORY timeline ---- */
.story-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
  margin-top: 8px;
}
@media (max-width: 860px) { .story-timeline { grid-template-columns: 1fr; gap: 20px; } }
.story-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.story-step .story-year {
  display: inline-block;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 12px;
}
.story-step strong { display: block; font-size: 1.12rem; color: var(--ink); margin-bottom: 8px; font-weight: 700; }
.story-step p { font-size: 0.96rem !important; line-height: 1.55 !important; color: var(--body-ink); margin: 0 !important; }
.story-cta { text-align: center; margin-top: 44px; }

/* ---- TESTIMONIALS: skimmable, avatar, verified badge ---- */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-stars { color: #f5b301 !important; font-size: 1.05rem !important; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-quote {
  font-size: 1.14rem;
  line-height: 1.5;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--green-deep), var(--green));
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.testimonial-meta { display: flex; flex-direction: column; line-height: 1.3; }
.testimonial-name { color: #fff; font-weight: 700; font-size: 0.98rem; }
.testimonial-role { color: #aab4cd; font-size: 0.85rem; }
.testimonial-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 600;
  color: #cdd7e6;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 10px; border-radius: 999px;
}
.testimonial-badge i { color: #eaf0fb; }

/* ---- FAQ: a touch more breathing room ---- */
.faq-accordion .accordion-item { margin-bottom: 18px; }
.faq-accordion .accordion-button { padding: 24px 26px; }

/* ---- FOOTER: premium ending, less noise ---- */
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 40px; }
@media (max-width: 991px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.footer-brand .footer-mission { font-size: 0.98rem; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); transition: background 0.2s ease; }
.footer-social a:hover { background: rgba(255,255,255,0.18); }
.footer-social img { width: 16px; height: 16px; }
.footer-col h6 { color: #fff; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a { color: #aeb8d0; font-size: 0.96rem; transition: color 0.2s ease; }
.footer-col ul a:hover { color: #fff; }
.footer-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.footer-loc strong { display: block; color: #fff; font-size: 0.92rem; margin-bottom: 5px; font-weight: 600; }
.footer-loc a { display: block; color: #aeb8d0; font-size: 0.9rem; }
.footer-loc a:hover { color: #fff; }
.footer-loc .footer-loc-link { color: var(--green-bright); font-weight: 600; margin-top: 3px; }
.footer-hours { color: #97a2ba; font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; margin: 0; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-copy { color: #8f9ab4; font-size: 0.88rem; }
.footer-legal .policy-links { display: flex; gap: 22px; }
.footer-legal .policy-links a { color: #aeb8d0; font-size: 0.88rem; }
.footer-legal .policy-links a:hover { color: #fff; }

/* ---- Subtle consistent grading on content photos (cohesion) ---- */
.about-img-main, .elite-home .card-img-wrap img { filter: saturate(1.06) contrast(1.03); }

/* =========================================================================
   ROUND 4 (2026-07-10 review): final 10% polish -> ~9.6.
   ========================================================================= */

/* ---- HERO: bigger focal headline, more breathing room, more depth ---- */
.hero-section .title,
.hero-section .hero-content .title {
  font-size: clamp(3.1rem, 6vw, 4.9rem);   /* ~+9% */
  margin-bottom: 22px;
}
.hero-section .hero-content .description { margin-bottom: 30px; }
.hero-section .hero-stats { margin: 4px 0 34px; gap: 12px; }
.hero-section .hero-cta-row { margin-top: 6px; }
.hero-section .region-selector { margin-top: 30px; }
/* faint decorative rings + a touch more glow = Apple-style depth */
.hero-section::before {
  width: 720px; height: 720px; top: -22%; right: -12%;
  background:
    radial-gradient(circle, rgba(168,198,62,0.16) 0%, rgba(168,198,62,0) 70%),
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(255,255,255,0.04) 45%, transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(255,255,255,0.03) 63%, transparent 64%);
}
.hero-section::after { width: 640px; height: 640px; background: radial-gradient(circle, rgba(43,101,128,0.55) 0%, rgba(43,101,128,0) 70%); }

/* Form: roomier inputs */
.hero-section .register-form-control { height: 56px; padding: 0 16px; }
.hero-section .register-form-wrap .input-wrap { margin-bottom: 4px; }

/* ---- NAV: identical-height buttons, a touch bigger logo ---- */
.logo img { max-width: 82px; }
.header-actions .login-btn.dark-btn,
.header-actions .nav-cta {
  height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px !important;
  font-size: 14px;
  line-height: 1;
}
.header-actions .login-btn.dark-btn { padding: 0 20px; }

/* ---- TRUST BAR: bigger anchor icons, softer heading ---- */
.trust-bar-title { text-transform: none; letter-spacing: 0.005em; font-weight: 600; font-size: 1rem; color: var(--muted-ink); }
.trust-item i { font-size: 1.25rem; }
.trust-item { gap: 11px; }

/* ---- ABOUT image: more visual authority ---- */
.about-img-main { min-height: 600px; max-height: 700px; }
@media (max-width: 991px) { .about-img-main { min-height: 400px; max-height: 500px; } }
/* Landscape variant (regional-home reframe): honor the wide source instead of
   center-cropping it into the tall portrait box. (0,2,0) beats every plain
   .about-img-main min/max-height rule regardless of source order. */
.about-media .about-img-main--wide {
  min-height: 0;
  max-height: none;
  height: auto;
  aspect-ratio: 3 / 2;
}

/* ---- DIFFERENCE cards: rounder, softer translucent icon tiles ---- */
.feature-card { border-radius: 24px; }
.feature-icon { background: rgba(33, 80, 101, 0.10); color: var(--navy-700); }
.feature-icon.green { background: rgba(143, 174, 47, 0.15); color: var(--green-deep); }

/* ---- SUBJECT cards: animated green underline on the Learn More ---- */
.subject-card .learn-more { position: relative; padding-bottom: 3px; }
.subject-card .learn-more::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--green); transition: width 0.28s ease;
}
.subject-card:hover .learn-more::after { width: 100%; }

/* ---- MORE THAN BETTER GRADES: a little more air ---- */
.more-than-lead { line-height: 1.85; }
.value-grid { gap: 26px 32px; }
.value-item span { line-height: 1.55; display: block; margin-top: 2px; }

/* ---- QUOTE: bigger marks, attribution hugs the quote ---- */
.quote-band .quote-mark { font-size: 6.5rem; margin-bottom: -24px; opacity: 0.5; }
.quote-band blockquote { margin: 0 auto 14px; }
.quote-band .quote-attr { margin-top: 0; }

/* ---- FAQ: a touch more space ---- */
.faq-accordion .accordion-item { margin-bottom: 20px; }

/* ---- STORY: connected timeline (line + nodes), not four islands ---- */
.story-timeline { position: relative; padding-top: 0; }
.story-timeline::before {
  content: ""; position: absolute; top: 9px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, rgba(143,174,47,0.25), rgba(143,174,47,0.6), rgba(143,174,47,0.25));
  z-index: 0;
}
.story-step { position: relative; padding-top: 46px; z-index: 1; }
.story-node {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 5px var(--warm-gray), 0 0 0 6px rgba(143,174,47,0.35);
}
@media (max-width: 860px) {
  .story-timeline::before { display: none; }
  .story-step { padding-top: 24px; }
  .story-node { position: static; transform: none; margin-bottom: 14px; }
}

/* ---- WHY PARENTS (SEO rich content) ---- */
.why-parents-copy p { font-size: 1.06rem; line-height: 1.85; color: var(--body-ink); margin-bottom: 18px; }
.why-parents-copy a { color: var(--green-deep); font-weight: 600; }

/* ---- FINAL CTA band before the footer ---- */
.final-cta {
  background: linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  text-align: center;
  padding: 96px 0;
}
.final-cta h2 { color: #fff; font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.final-cta p { color: #c3ccdf; font-size: 1.18rem; line-height: 1.6; max-width: 620px; margin: 16px auto 32px; }
.final-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- FOOTER: brand on the left, nav columns spread across the rest ---- */
.footer-top { grid-template-columns: 1.3fr 3fr; gap: 60px; align-items: start; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.3fr; gap: 40px; }
@media (max-width: 991px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) { .footer-nav { grid-template-columns: 1fr; gap: 28px; } }
.footer-contact { display: flex; flex-direction: column; gap: 13px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 11px; color: #aeb8d0; font-size: 0.92rem; line-height: 1.4; }
.footer-contact li i { color: var(--green-bright); margin-top: 3px; width: 15px; text-align: center; flex: 0 0 auto; }
.footer-contact a { color: #aeb8d0; }
.footer-contact a:hover { color: #fff; }

/* =========================================================================
   ROUND 5 fix: hero content left-aligned on desktop.
   The hero-content div always has `text-center` (paired with `text-lg-start`
   for the mobile layout). text-align flips responsively, but flexbox
   justify-content / margin:auto do NOT — so chips, buttons, the subhead, and
   the region selector stayed centered on desktop. Scope centering to mobile.
   ========================================================================= */
@media (min-width: 992px) {
  /* Higher specificity than `.hero-content.text-center .hero-stats` (0,3,0)
     so the desktop left-alignment actually wins the cascade. */
  .hero-section .hero-content.text-lg-start .description { margin-left: 0; margin-right: 0; }
  .hero-section .hero-content.text-lg-start .hero-stats,
  .hero-section .hero-content.text-lg-start .hero-cta-row { justify-content: flex-start; }
  .hero-section .hero-content.text-lg-start .region-selector { margin-left: 0; margin-right: 0; }
}

/* =========================================================================
   ROUND 6: dissolve the standalone trust strip — make credibility the
   hero's closing movement (same blue, subtle divider). Relocate the
   location selector out of the hero into the first white section.
   ========================================================================= */

/* Hero trust row — full width, below the hero row, divider above */
.hero-trust {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hero-trust-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 18px;
  position: relative;
  color: #c8d1e2;
  font-size: 0.98rem;
  font-weight: 400;
  white-space: nowrap;
}
.hero-trust-item strong { color: #fff; font-weight: 700; }
.hero-trust-item i { color: var(--green-bright); font-size: 1.1rem; }
.hero-trust-item + .hero-trust-item::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 860px) {
  .hero-trust { justify-content: center; gap: 6px 0; margin-top: 40px; padding-top: 26px; }
  .hero-trust-item { flex: 0 0 100%; justify-content: flex-start; font-size: 0.95rem; }
  .hero-trust-item + .hero-trust-item::before { display: none; }
}

/* Relocated location selector — a quiet utility line atop the first section */
.local-office-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 40px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.local-office-label { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-ink); font-size: 1rem; font-weight: 500; }
.local-office-label i { color: var(--green-deep); }
.local-office-bar .select-wrap { min-width: 220px; }
.local-office-bar select.form-control {
  height: 46px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink) !important;
  font-weight: 600;
}

/* --- Metro band: map-anchored region picker (national homepage) ---------
   Replaces .local-office-bar (CSS kept above for easy rollback). Navy card
   with left copy + metro links, right stylized western-US map with pulsing
   clickable city dots (includes/map_western_us.html). */
.metro-sec {
  /* Own section between the navy hero and the white about section — a cool
     blue tint distinct from both (the token otherwise only used on chips). */
  background: linear-gradient(180deg, #e7eef8 0%, var(--cool-tint) 100%);
  padding: 72px 0;
}
.metro-band {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px 56px;
  align-items: center;
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-700) 62%, var(--navy-600) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 52px 56px;
}
.metro-band-copy h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 10px 0 14px;
}
.metro-band-copy h2 .accent { color: var(--green-bright); }
.metro-band-copy > p { color: #c8d1e2; font-size: 1.05rem; line-height: 1.65; margin: 0 0 26px; max-width: 460px; }
.metro-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.metro-links-online { grid-column: 1 / -1; }
.metro-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #eaf0fb;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.metro-links a i { color: var(--green-bright); font-size: 0.9em; }
.metro-links a .arw { margin-left: auto; color: var(--green-bright); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.metro-links a:hover {
  border-color: rgba(168, 198, 62, 0.55);
  background: rgba(168, 198, 62, 0.10);
  color: #fff;
}
.metro-links a:hover .arw { opacity: 1; transform: translateX(0); }

.metro-band-map { display: flex; justify-content: center; }
.metro-map { width: 100%; max-width: 400px; height: auto; overflow: visible; }
.metro-state {
  fill: rgba(255, 255, 255, 0.055);
  stroke: rgba(255, 255, 255, 0.20);
  stroke-width: 1;
  stroke-linejoin: round;
}
.metro-state--served { fill: rgba(168, 198, 62, 0.10); }
.metro-city { cursor: pointer; }
.metro-dot { fill: var(--green-bright); stroke: #fff; stroke-width: 1.4; }
.metro-dot-pulse {
  fill: none;
  stroke: var(--green-bright);
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: metroPulse 3.2s ease-out infinite;
}
@keyframes metroPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .metro-dot-pulse { animation: none; }
}
.metro-label {
  fill: #eaf0fb;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(13, 20, 48, 0.65);
  stroke-width: 3px;
  transition: fill 0.18s ease;
}
.metro-city:hover .metro-label { fill: var(--green-bright); }
.metro-city:hover .metro-dot { stroke: var(--green-bright); }

@media (max-width: 991px) {
  /* Copy first, reduced map after it (Sol 5.6 review 2026-09-16: the links
     are the product, the map is supporting decoration — never lead with it). */
  .metro-band { grid-template-columns: 1fr; padding: 40px 30px; }
  .metro-map { max-width: 340px; }
}
@media (max-width: 768px) {
  /* Phones: the band is a compact location ROUTER (~450px, was 1,091px).
     No map — it cost 1.3 screens of scroll before the heading/links even
     appeared. Links stay real rendered <a>s (SEO mesh) with >=48px targets. */
  .metro-sec { padding: 40px 0; }
  .metro-band { padding: 30px 22px; }
  .metro-band-map { display: none; }
  .metro-links a { min-height: 48px; }
}
@media (max-width: 560px) {
  .metro-links { grid-template-columns: 1fr; }
}

/* --- Metro mini: compact hero widget (national hero_with_form pages) ----
   Small map thumbnail + city chips on a translucent panel that blends into
   the navy hero. Reuses map_western_us.html; labels hidden, dots boosted
   so they stay visible at thumbnail size. */
.metro-mini {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  padding: 16px 20px;
  max-width: 470px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}
.metro-mini-map { flex: 0 0 118px; }
.metro-mini .metro-map { max-width: 118px; }
.metro-mini .metro-label { display: none; }
.metro-mini .metro-dot { r: 9px; stroke-width: 3px; }
.metro-mini .metro-dot-pulse { r: 11px; stroke-width: 4px; }
.metro-mini .metro-state { stroke-width: 2.5px; }
/* Extra specificity: hero/global `p` rules (dark ink, 17px) outrank a lone
   class inside .hero-content — pin the on-navy styling here. */
.metro-mini p.metro-mini-label { color: #c3cde0; font-size: 0.88rem; line-height: 1.45; margin: 0 0 10px; }
.metro-mini-links { display: flex; flex-wrap: wrap; gap: 8px; }
.metro-mini-links a {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #eaf0fb;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.metro-mini-links a:hover {
  border-color: rgba(168, 198, 62, 0.55);
  background: rgba(168, 198, 62, 0.12);
  color: #fff;
}
@media (max-width: 991px) {
  /* Hero text centers below lg — keep the widget centered with it. */
  .metro-mini { margin-left: auto; margin-right: auto; text-align: left; }
}
@media (max-width: 430px) {
  .metro-mini { flex-direction: column; gap: 14px; text-align: center; }
  .metro-mini-links { justify-content: center; }
}

/* =========================================================================
   ROUND 7: footer polish + CTA/footer separation (design review).
   ========================================================================= */

/* Final CTA: slightly LIGHTER blue than the footer so it reads as its own
   destination; more bottom room so it feels like the end of the experience. */
.final-cta {
  background: linear-gradient(150deg, #1f5480 0%, #295d91 52%, #2f6ea0 100%);
  padding: 100px 0 108px;
}
.final-cta p { color: #d3e0ef; }
.final-cta-trust { margin-top: 26px; font-size: 0.98rem; color: #cfe0f2 !important; font-weight: 500; }
.final-cta-trust i { color: var(--green-bright); }

/* Footer: darker than the CTA, and given ~25% more breathing room. */
#footer footer,
footer { background: linear-gradient(160deg, #14324a 0%, #1a4258 55%, #204d67 100%); padding-top: 84px; }
.footer-top { grid-template-columns: 1.35fr 3.1fr; gap: 72px; padding-bottom: 56px; }
.footer-nav { grid-template-columns: 0.85fr 0.85fr 1.5fr 1.2fr; gap: 40px; }
@media (max-width: 991px) {
  .footer-top { grid-template-columns: 1fr; gap: 44px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}
@media (max-width: 560px) { .footer-nav { grid-template-columns: 1fr; } }

/* Brand anchor: larger logo, roomier mission copy */
.footer-brand .footer-logo img { height: 54px; }
.footer-brand .footer-logo span { font-size: 1.28rem; }
.footer-brand .footer-mission { font-size: 1.02rem; line-height: 1.75; max-width: 340px; }

/* Social: +20%, lift + brighten on hover */
.footer-social { gap: 14px; margin-top: 24px; }
.footer-social a { width: 46px; height: 46px; border-radius: 12px; transition: background 0.2s ease, transform 0.2s ease; }
.footer-social a:hover { background: var(--green); transform: translateY(-2px); }
.footer-social img { width: 19px; height: 19px; }

/* Location cards: clean 2x2, city + phone + Visit Office */
.footer-loc-grid { grid-template-columns: 1fr 1fr; gap: 24px 22px; }
.footer-loc strong { font-size: 0.98rem; margin-bottom: 6px; font-weight: 600; }
.footer-loc a { font-size: 0.9rem; margin-bottom: 2px; }
.footer-loc .footer-loc-link { margin-top: 5px; font-weight: 600; }

/* Contact: premium labeled groups */
.footer-contact { display: flex; flex-direction: column; gap: 16px; }
.footer-contact-item { display: flex; flex-direction: column; gap: 3px; }
.footer-contact-item .c-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-bright); font-weight: 700; }
.footer-contact-item a, .footer-contact-item span:not(.c-label) { color: #cbd5e6; font-size: 0.94rem; line-height: 1.4; }
.footer-contact-item a:hover { color: #fff; }

/* Bottom bar: a true, breathing copyright bar */
.copyright { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 20px; }
.copyright .copyright-container { padding-top: 30px; padding-bottom: 30px; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-copy { color: #8fa0b8; font-size: 0.9rem; }
.footer-legal .policy-links { display: flex; gap: 26px; margin: 0; }
.footer-legal .policy-links a { color: #aeb8d0; font-size: 0.9rem; }
.footer-legal .policy-links a:hover { color: #fff; }

/* =========================================================================
   ROUND 8: footer rebuilt as THREE zones (Brand 36% / Nav 22% / Contact 42%).
   Wider container so nothing wraps; clear hierarchy; taller + more air;
   subtle divider so the CTA flows into the footer.
   ========================================================================= */

/* Wider footer + subtle divider from the (lighter) CTA above it */
#footer .footer-container { max-width: 1360px; }
#footer footer,
footer {
  background: linear-gradient(160deg, #14324a 0%, #1a4258 55%, #204d67 100%);
  padding: 88px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Three zones, intentionally unequal widths; generous gap */
.footer-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr 1.85fr;   /* ≈ 36% / 22% / 42% */
  gap: 64px;
  padding-bottom: 60px;
}
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .footer-zone-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Shared heading + link hierarchy: headings light, links muted→white */
.footer-zone h6 {
  color: #fff; font-size: 0.8rem; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 20px;
}
.footer-zone ul { display: flex; flex-direction: column; gap: 13px; }
.footer-zone ul a { color: #a6b1c9; font-size: 0.96rem; transition: color 0.2s ease; }
.footer-zone ul a:hover { color: #fff; }

/* Zone 1 — Brand */
.footer-zone-brand .footer-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-zone-brand .footer-logo img { height: 56px; width: auto; }
.footer-zone-brand .footer-logo span { color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.1; }
.footer-zone-brand .footer-mission { color: #9aa6be; font-size: 1.02rem; line-height: 1.8; max-width: 400px; margin: 0; }
.footer-zone-brand .footer-social { display: flex; gap: 14px; margin-top: 26px; }
.footer-zone-brand .footer-social a { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); transition: background 0.2s ease, transform 0.2s ease; }
.footer-zone-brand .footer-social a:hover { background: var(--green); transform: translateY(-2px); }
.footer-zone-brand .footer-social img { width: 19px; height: 19px; }

/* Zone 2 — Navigation (Explore + Company stacked) */
.footer-zone-nav { display: flex; flex-direction: column; gap: 34px; }

/* Zone 3 — Contact stacked ABOVE Offices, each using the full zone width so
   the email address never wraps. */
.footer-zone-contact { display: flex; flex-direction: column; gap: 32px; }
.footer-contact-block .footer-phone { display: block; color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.footer-contact-block .footer-phone:hover { color: var(--green-bright); }
.footer-contact-block .footer-email { display: block; color: #a6b1c9; font-size: 0.98rem; margin-bottom: 20px; white-space: nowrap; }
.footer-contact-block .footer-email:hover { color: #fff; }
.footer-contact-block .footer-info { display: inline-block; vertical-align: top; margin: 0 44px 0 0; color: #8f9ab4; font-size: 0.92rem; line-height: 1.5; }
.footer-contact-block .footer-info strong { display: block; color: #cbd5e6; font-weight: 600; margin-bottom: 2px; }

/* Offices — a clean two-column list of location links */
.footer-office-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 15px 52px; }
.footer-office-list a {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  color: #cbd5e6; font-size: 0.98rem; font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-office-list a i { color: var(--green-bright); font-size: 0.9rem; }
.footer-office-list a::after { content: "→"; margin-left: 4px; color: var(--green-bright); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.footer-office-list a:hover { color: #fff; }
.footer-office-list a:hover::after { opacity: 1; transform: translateX(0); }

/* Bottom bar — true breathing room */
.copyright { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 8px; }
.copyright .copyright-container { padding-top: 30px; padding-bottom: 30px; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-copy { color: #8290a8; font-size: 0.9rem; }
.footer-legal .policy-links { display: flex; gap: 26px; margin: 0; }
.footer-legal .policy-links a { color: #a6b1c9; font-size: 0.9rem; }
.footer-legal .policy-links a:hover { color: #fff; }

/* =========================================================================
   ROUND 9: region-aware footer NAP (local SEO). National = all four offices
   with full address + phone; regional = that office's NAP up front.
   ========================================================================= */

/* National: four offices as compact NAP cards (2-col). Addresses may wrap
   (fine); phone numbers do not. */
.footer-offices-nap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; }
@media (max-width: 620px) { .footer-offices-nap { grid-template-columns: 1fr; } }
.footer-office { display: flex; flex-direction: column; }
.footer-office-name { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 0.98rem; margin-bottom: 5px; transition: color 0.2s ease; }
.footer-office-name i { color: var(--green-bright); font-size: 0.82rem; }
.footer-office-name:hover { color: var(--green-bright); }
.footer-office-addr { color: #8f9ab4; font-size: 0.85rem; line-height: 1.5; margin-bottom: 4px; }
.footer-office-phone { color: #a6b1c9; font-size: 0.9rem; white-space: nowrap; }
.footer-office-phone:hover { color: #fff; }

/* Regional: the address line inside the contact block links to Maps */
.footer-contact-block .footer-info a { color: #8f9ab4; }
.footer-contact-block .footer-info a:hover { color: #fff; }

/* =========================================================================
   ROUND 10: regional home pages — same design language as national.
   ========================================================================= */

/* Difference cards: 4-up variant (regional why-choose cards) */
.feature-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .feature-grid--four { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } }
@media (max-width: 620px) { .feature-grid--four { grid-template-columns: 1fr; max-width: 460px; } }
.feature-grid--four .feature-card { padding: 32px 26px; }
.feature-grid--four .feature-icon { width: 60px; height: 60px; font-size: 1.45rem; margin-bottom: 20px; }
.feature-grid--four .feature-card h3 { font-size: 1.2rem; }
.feature-grid--four .feature-card p { font-size: 0.96rem; }

/* Subject-card heading stays ink even when it isn't a link (regional cards) */
.subject-card h3 { color: var(--ink); }

/* City chips (regional local-area section) */
.city-chip-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 920px; margin: 0 auto 46px; }
.city-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  color: var(--navy-800); font-weight: 600; font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.city-chip i { color: var(--green-deep); font-size: 0.82rem; }
.city-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #cfe0b6; color: var(--green-deep); }

/* Region office NAP card */
.office-card {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  max-width: 920px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 30px 34px; box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .office-card { grid-template-columns: 1fr; gap: 20px; } }
.office-card-item { display: flex; flex-direction: column; gap: 4px; }
.office-card-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; }
.office-card-item a { color: var(--ink); font-weight: 600; font-size: 0.98rem; line-height: 1.4; }
.office-card-item a:hover { color: var(--green-deep); }

/* =========================================================================
   ROUND 11: warm FAQ variant (regional contrast) + balanced hero titles.
   ========================================================================= */

/* Warm FAQ background — keeps tone consistent with the elite warm sections
   (the legacy default .faq-section is a cooler gray). */
.faq-section--warm { background: var(--warm-gray); }

/* Balance headline line breaks so long titles don't orphan words like
   "Diego, CA". Regional titles are sentence-length, so scale them a touch
   smaller than the punchy national headline. */
.hero-section .title { text-wrap: balance; }
.hero-section .title--regional { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }

/* =========================================================================
   ROUND 12: internal-page design language. One reusable left-aligned hero
   (hero_compact / .hero-internal) + global uplift of the shared body
   components every info/About page uses (.card-grid-wrappers image+text
   feature sections, .secton-header). Homepage stays centered; internal
   pages read editorial/left-aligned.
   ========================================================================= */

/* ---- Reusable internal hero: left-aligned, editorial ---- */
.hero-section.hero-compact { padding: 76px 0 64px; }
.hero-section.hero-compact.has-breadcrumb { padding-top: 40px; }
.hero-internal-inner { max-width: 780px; }
.hero-internal .title {
  text-align: left;
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero-internal .description {
  text-align: left;
  max-width: 660px;
  margin: 0 0 28px;
  color: #c8d1e2;
  font-size: 1.18rem;
  line-height: 1.6;
}
.hero-internal .hero-cta-row { justify-content: flex-start; }
.hero-internal-stat { margin: 22px 0 0; color: #aeb8d0; font-size: 0.98rem; }
.hero-internal-stat strong { color: #fff; }
/* Breadcrumb links already styled light on the navy hero (round-2). */

/* ---- Shared image+text feature sections (.card-grid-wrappers) ---- */
.card-grid-wrappers { padding: 84px 0; }
.card-grid-wrappers.mr-top, .card-grid-wrappers.mr-top-50 { margin-top: 0; }
.card-grid-wrappers.mr-bottom, .card-grid-wrappers.mr-bottom-50 { margin-bottom: 0; }
@media (max-width: 768px) { .card-grid-wrappers { padding: 56px 0; } }

/* Rounded, elevated imagery site-wide (info/About pages) */
.card-img-wrap img,
.card-img-wrap .img-fluid {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Editorial headings + body on internal pages */
.card-data-wrap h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ink);
  margin-bottom: 20px;
}
.card-data-wrap h3 { color: var(--ink); font-weight: 700; }
.card-grid-wrappers p, .card-data-wrap p { font-size: 1.05rem; line-height: 1.75; color: var(--body-ink); }
/* White-text variant for a card-data-wrap on a dark section (Excellent Tutors on
   .dark-gradient). Same size/spacing as the light sections; only recolors. */
.elite-home .card-data-wrap--on-dark h2 { color: #fff; }
.elite-home .card-data-wrap--on-dark p { color: #e6eaf2; }
/* Legal docs (terms/privacy/cookies): numbered section headers were <h6>
   (0.67em — smaller than the 1.05rem body). Now <h3>, sized as real section
   heads; the remaining <h6> (LLC name + effective date) stay small subtitles. */
.legal-doc h3 { font-size: 1.35rem; margin: 3.25rem 0 0.9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--navy-800); }
.legal-doc h3:first-of-type { margin-top: 2rem; padding-top: 0; border-top: none; }
.legal-doc h6 { font-size: 0.95rem; font-weight: 600; color: var(--muted-ink); margin: 1.25rem 0 2px; }
.legal-doc p { margin-bottom: 1rem; }
.legal-doc ul, .legal-doc ol { margin-bottom: 1rem; }
.legal-doc li { margin-bottom: 0.35rem; }

/* Section headers (centered block headings used across info pages) */
.secton-header h1,
.secton-header h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}
.secton-header p { font-size: 1.12rem; line-height: 1.65; color: var(--muted-ink); }

/* Alternating tone: make the legacy cool gray match the elite warm gray so
   info-page sections stay tonally consistent with home/regional. */
.sec-gray { background: var(--warm-gray); }

/* =========================================================================
   ROUND 13: Become a Tutor — process steps + checklist cards.
   ========================================================================= */

/* Numbered application-process timeline */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  position: relative; margin-top: 8px;
}
.process-grid::before {
  content: ""; position: absolute; top: 26px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, rgba(143,174,47,0.25), rgba(143,174,47,0.6), rgba(143,174,47,0.25));
  z-index: 0;
}
@media (max-width: 860px) { .process-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .process-grid::before { display: none; } }
@media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 32px 26px 26px; box-shadow: var(--shadow-sm); text-align: center;
}
.process-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-600));
  color: #fff; font-weight: 800; font-size: 1.3rem;
  margin-bottom: 18px; box-shadow: 0 0 0 6px var(--warm-gray);
}
.sec-white .process-num { box-shadow: 0 0 0 6px #fff; }
.process-step strong { display: block; color: var(--ink); font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; }
.process-step p { font-size: 0.96rem !important; line-height: 1.55 !important; color: var(--body-ink); margin: 0 !important; }
.process-step p a { color: var(--green-deep); font-weight: 600; }
.process-cta { text-align: center; margin-top: 44px; }

/* Checklist cards (requirements / recommended experience) */
.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 960px; margin: 0 auto; }
@media (max-width: 760px) { .checklist-grid { grid-template-columns: 1fr; } }
.checklist-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow-sm); }
.checklist-card h3 { display: flex; align-items: center; gap: 11px; font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.checklist-card h3 i { color: var(--green); font-size: 1.1rem; }
.checklist-card ul { display: flex; flex-direction: column; gap: 12px; }
.checklist-card li { position: relative; padding-left: 26px; color: var(--body-ink); font-size: 1rem; line-height: 1.5; }
.checklist-card li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }

/* =========================================================================
   ROUND 14: Founder page — portrait, pull-quote, letter.
   ========================================================================= */
.founder-portrait img {
  width: 100%; height: auto; /* height tracks the CLS width/height attrs */
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  filter: saturate(1.05) contrast(1.03);
}
.founder-quote {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; line-height: 1.34; letter-spacing: -0.015em;
  color: var(--ink); margin: 8px 0 20px; position: relative;
}
.founder-quote::before {
  content: "\201C"; display: block; font-size: 3.5rem; line-height: 0.8;
  color: var(--green-bright); margin-bottom: 6px;
}
.founder-quote-attr { color: var(--muted-ink); font-size: 1.02rem; margin: 0; }
.founder-quote-attr strong { color: var(--ink); }
/* Page H1 on the founder page (hero removed): a modest title above the pull
   quote, so the quote stays the emotional focal point. */
.founder-page-title {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.2; color: var(--ink); margin: 2px 0 14px;
}

.founder-letter { max-width: 720px; margin: 0 auto; }
.founder-letter h2 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; }
.founder-letter p { font-size: 1.1rem; line-height: 1.85; color: var(--body-ink); margin-bottom: 20px; }
.founder-signoff { color: var(--ink) !important; }
.founder-signoff strong { color: var(--ink); }

/* =========================================================================
   ROUND 15: Contact page — premium contact-method cards.
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-method {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 34px 28px; box-shadow: var(--shadow-sm); text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-method:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: 20px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-600));
  color: #fff; font-size: 1.5rem;
}
.contact-method:first-child .contact-icon { background: linear-gradient(160deg, var(--green-deep), var(--green)); }
.contact-method h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.contact-value { display: block; color: var(--navy-700); font-weight: 700; font-size: 1.02rem; line-height: 1.4; }
.contact-value--sm { font-size: 0.95rem; font-weight: 600; }
a.contact-value:hover { color: var(--green-deep); }
.contact-sub { display: block; color: var(--muted-ink); font-size: 0.88rem; margin-top: 8px; }
.contact-office-links { display: flex; flex-direction: column; gap: 7px; }
.contact-office-links a { color: var(--navy-700); font-weight: 600; font-size: 0.98rem; }
.contact-office-links a:hover { color: var(--green-deep); }

/* =========================================================================
   ROUND 16: Registration CTA — trust signals + editorial heading.
   ========================================================================= */
.register-cta-copy h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; }
.register-cta-copy > p { font-size: 1.08rem; line-height: 1.7; color: var(--body-ink); }
.register-cta-trust { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.register-cta-trust li { display: flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.register-cta-trust li i { color: var(--green); font-size: 1.05rem; }
.register-cta-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.register-cta-stars { color: #f5b301; letter-spacing: 2px; font-size: 1.05rem; }
.register-cta-rating span:last-child { color: var(--muted-ink); font-size: 0.96rem; font-weight: 500; }
.text-center .register-cta-trust li { justify-content: center; }
@media (min-width: 992px) { .register-cta-copy.text-lg-start .register-cta-trust li { justify-content: flex-start; } }

/* =========================================================================
   ROUND 17: Meet Tutors — elevated search card + premium tutor cards.
   ========================================================================= */

/* Search card (Zillow-style elevated white bar) */
.tutor-search-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 22px 24px; max-width: 980px; margin: 0 auto;
}
.tutor-search-form { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr auto; gap: 18px; align-items: end; }
@media (max-width: 820px) { .tutor-search-form { grid-template-columns: 1fr 1fr; } .tutor-search-submit { grid-column: 1 / -1; } }
@media (max-width: 520px) { .tutor-search-form { grid-template-columns: 1fr; } }
.tutor-search-field label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-ink); margin-bottom: 7px; }
.tutor-search-field .form-control { height: 50px; border-radius: 11px; border: 1px solid var(--line); background: #f8fafc; }
.tutor-search-field .btn-elite { height: 50px; }
.tutor-search-note { text-align: center; margin: 16px 0 44px; color: var(--muted-ink); font-size: 0.98rem; }
.tutor-search-note a { color: var(--green-deep); font-weight: 700; }

/* Results grid — two premium cards per row */
.tutor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .tutor-grid { grid-template-columns: 1fr; } }
.tutor-card-item { height: 100%; }
.tutor-grid > .text-center { grid-column: 1 / -1; }

/* Premium tutor card */
.tutor-card {
  display: flex; gap: 20px; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 22px; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tutor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tutor-card-photo { flex: 0 0 108px; }
.tutor-card-photo img { width: 108px; height: 128px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-sm); }
.tutor-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tutor-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tutor-card-name { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0; }
.tutor-card-rating { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.tutor-card-rating i { color: #f5b301; }
.tutor-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted-ink); font-size: 0.88rem; margin-bottom: 12px; }
.tutor-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tutor-card-meta i { color: var(--green-deep); }
.tutor-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tutor-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--cool-tint); color: var(--navy-700); }
.tutor-badge--online { background: var(--color-accent-bg, #f5f8ee); color: var(--green-deep); }
.tutor-card-subjects { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tutor-subject-chip { font-size: 0.76rem; font-weight: 600; color: var(--body-ink); background: #fff; border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; }
/* SAT/ACT test-prep certifications lead the chip row, emphasized in green. */
.tutor-subject-chip--test { color: var(--green-deep); background: var(--color-accent-bg, #f5f8ee); border-color: #dbe6bd; }
.tutor-card-bio { font-size: 0.92rem; line-height: 1.55; color: var(--body-ink); margin: 0 0 16px; }
.tutor-card-btn { margin-top: auto; align-self: flex-start; font-weight: 700; color: var(--green-deep); font-size: 0.95rem; }
.tutor-card-btn .arw { display: inline-block; transition: transform 0.2s ease; }
.tutor-card:hover .tutor-card-btn .arw { transform: translateX(5px); }
@media (max-width: 400px) { .tutor-card { flex-direction: column; } .tutor-card-photo, .tutor-card-photo img { width: 100%; } .tutor-card-photo img { height: 200px; } }

/* ---- Lite tutor card (conversion LPs) — vertical, 3-up ----
   The LPs show exactly 3 curated cards. A vertical "meet the team" card in an
   even 3-column row reads as intentional (vs the horizontal card in a 2-col grid
   that left an empty 4th cell — Sol 5.6). Photo is a uniform full-width crop so
   varied headshots frame consistently; the bio is line-clamped to 3 lines so it
   never trails off mid-sentence. Scoped to .tutor-card--lite, so the full SEO
   card is untouched. Applies to both the SAT and academic LPs. */
.tutor-grid:has(.tutor-card--lite) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .tutor-grid:has(.tutor-card--lite) { grid-template-columns: 1fr; } }
.tutor-card--lite { flex-direction: column; gap: 0; padding: 0; overflow: hidden; text-align: center; }
.tutor-card--lite .tutor-card-photo { flex: none; width: 100%; }
/* Square photo box (aspect-ratio 1:1, not a fixed landscape height) so the ~1:1
   tutor headshots show without cropping faces top/bottom (Victor 2026-09-06).
   height:auto keeps this rule winning over the <=400px `.tutor-card-photo img`
   fixed-height rule; object-fit:cover (from .tutor-card-photo img) still fills. */
.tutor-card--lite .tutor-card-photo img { width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 0; box-shadow: none; }
.tutor-card--lite .tutor-card-body { padding: 18px 20px 22px; align-items: center; }
.tutor-card--lite .tutor-card-top { justify-content: center; gap: 10px; margin-bottom: 10px; }
.tutor-card--lite .tutor-card-badges,
.tutor-card--lite .tutor-card-subjects { justify-content: center; margin-bottom: 12px; }
.tutor-card--lite .tutor-badge,
.tutor-card--lite .tutor-subject-chip { font-size: 0.8rem; }
.tutor-card--lite .tutor-card-bio {
  width: 100%; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* SAT card stat lines (tenure + students helped) that replace the generic bio. */
.tutor-card--lite .tutor-card-stats { display: flex; flex-direction: column; gap: 7px; align-items: center; width: 100%; margin-top: 2px; }
.tutor-card--lite .tutor-card-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--body-ink); }
.tutor-card--lite .tutor-card-stat i { color: var(--green-deep); font-size: 0.9rem; }

/* =========================================================================
   ROUND 18: signature registration CTA — sales panel + legible white form.
   The registration form's legacy fields were built for the dark teal box
   (light text on transparent) — invisible on the white card outside the hero.
   Fixed here for the .glass-card (light) context everywhere.
   ========================================================================= */

/* ---- Section: light-gray so the white form pops; vertically centered ---- */
/* Soft signature-blue band (2026-09) so the CTA reads as a distinct section
   from the warm-gray content above it, not a near-identical off-white. The
   white form card still pops on the light-blue. */
.register-cta-section { background: linear-gradient(180deg, #e7eef8 0%, var(--cool-tint) 100%); border-top: 1px solid #dbe4f1; padding: 88px 0; margin-top: 0; }
.register-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1120px; margin: 0 auto; }
/* Grid tracks default to min-width:auto, so wide funnel content (the consultation
   slot picker's day scroller / time grid) would blow the form column past the
   viewport. min-width:0 lets it shrink so the scroller scrolls in place instead
   (Victor 2026-09-20). The hero doesn't hit this — Bootstrap cols set an explicit
   width. */
.register-cta-panel, .register-cta-formwrap { min-width: 0; }
@media (max-width: 900px) { .register-cta-inner { grid-template-columns: 1fr; gap: 40px; } }

/* ---- Left sales panel ---- */
.register-cta-title { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 0 0 18px; }
.register-cta-title::after { content: ""; display: block; width: 60px; height: 4px; border-radius: 2px; background: var(--green); margin-top: 16px; }
.register-cta-lead { font-size: 1.12rem; line-height: 1.65; color: var(--body-ink); margin: 0 0 24px; }
.trust-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-sm); }
.trust-chip i { color: var(--green); font-size: 0.9rem; }
.register-cta-quote { margin: 0 0 24px; padding-left: 18px; border-left: 3px solid var(--green-bright); }
.register-cta-stars { color: #f5b301; letter-spacing: 2px; font-size: 0.95rem; }
.register-cta-quote p { font-size: 1.06rem; line-height: 1.5; color: var(--ink); font-weight: 500; font-style: italic; margin: 7px 0 8px; }
.register-cta-quote cite { color: var(--muted-ink); font-size: 0.92rem; font-style: normal; font-weight: 600; }
.register-cta-guarantee { display: flex; align-items: center; gap: 9px; color: var(--muted-ink); font-size: 0.95rem; margin: 0; }
.register-cta-guarantee i { color: var(--green-deep); }
/* Superscript asterisk on the score-gain chips (smaller + raised, not inline). */
.trust-chip .chip-star { font-size: 0.62em; }
/* Fine-print disclaimer under the score-gain chips (test-prep consultation CTA),
   sized to match the LP hero claim footnotes, left-aligned with the panel copy.
   Scoped under .register-cta-section (0,2,0) to beat the .elite-home p base rule. */
.register-cta-section .register-cta-disclaimer { margin: 26px 0 0; text-align: left; font-size: 0.72rem; line-height: 1.45; color: var(--muted-ink); }

/* Test-prep cross-sell callout (includes/testprep_callout.html), embedded at the
   bottom of the register-cta section on the shared online / in-person modality
   pages — routes SAT/ACT visitors to the consultation. */
.register-cta-testprep { margin-top: 44px; }
.testprep-callout {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-700));
  border-radius: var(--radius-lg); padding: 26px 30px;
  box-shadow: var(--shadow-md);
}
.testprep-callout-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  background: linear-gradient(160deg, var(--green-deep), var(--green));
  color: #fff; font-size: 1.3rem;
}
.testprep-callout-body { flex: 1 1 auto; }
.testprep-callout-body h3 { font-size: 1.3rem; color: #fff; margin: 0 0 4px; }
.elite-home .testprep-callout-body p { font-size: 1rem; line-height: 1.55; color: #d3dcec; margin: 0; }
.testprep-callout .testprep-callout-cta { flex: none; white-space: nowrap; }
@media (max-width: 720px) {
  .testprep-callout { flex-direction: column; text-align: center; gap: 16px; padding: 24px 20px; }
}

/* ---- The form card: white + big shadow, tighter, branded header ---- */
.register-cta-formwrap .register-form-wrap.glass-card { box-shadow: 0 30px 70px rgba(9, 15, 40, 0.16); padding: 32px 30px; }
.register-form-head { text-align: center; margin-bottom: 22px; }
.register-form-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(160deg, var(--green-deep), var(--green)); color: #fff; font-size: 1.3rem; margin-bottom: 14px; }
.register-form-head h5 { display: block; text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px; }
.register-form-head h3 { font-size: 0.98rem; font-weight: 400; color: var(--muted-ink); margin: 0; }
.register-form-note { text-align: center; font-size: 0.82rem; color: var(--muted-ink); margin: 12px 0 0; }
.register-form-note i { color: var(--green-deep); }
/* Self-service alt path (idea #011 signup funnel) — offered under the lead form
   so visitors know they can skip the callback and book their first session
   themselves right now. Divider rule sets it apart from the primary CTA. */
.register-form-selfserve { text-align: center; font-size: 0.86rem; color: var(--muted-ink); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.register-form-selfserve a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.register-form-selfserve a:hover { text-decoration: underline; }

/* ---- Field legibility on the white glass card (the reported bug) ---- */
.glass-card .register-form-control { background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; color: var(--ink) !important; }
.glass-card input.form-control.register-form-control::placeholder { color: #9aa3b5 !important; }
.glass-card .input-wrap label { color: var(--navy-700); font-weight: 600; }
.glass-card .submit-btn-wrap .dark-btn { width: 100%; background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%) !important; color: #16240a !important; border-radius: 14px; padding: 15px 24px; box-shadow: 0 12px 26px rgba(143, 174, 47, 0.3); }
.glass-card .submit-btn-wrap .dark-btn:hover { transform: translateY(-2px); }
/* Tighter fields in the register-cta context (form felt too tall) */
.register-cta-section .register-form-control { height: 46px; }
.register-cta-section .form-wrap .mb-4 { margin-bottom: 0.85rem !important; }
.register-cta-section .form-wrap .mb-3 { margin-bottom: 0.85rem !important; }

/* =========================================================================
   ROUND 19: Tutor profile — snapshot hero, trust cards, subject badges.
   ========================================================================= */
.tutor-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-ink); font-weight: 600; font-size: 0.95rem; margin-bottom: 26px; }
.tutor-back:hover { color: var(--green-deep); }

.tutor-profile-grid { display: grid; grid-template-columns: 360px 1fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .tutor-profile-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Sticky snapshot card */
.tutor-profile-side { position: sticky; top: 24px; }
@media (max-width: 900px) { .tutor-profile-side { position: static; } }
.tutor-snapshot { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-md); text-align: center; }
.tutor-snapshot-photo { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.tutor-snapshot-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; }
.tutor-snapshot-tagline { color: var(--green-deep); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; margin: 0 0 12px; }
.tutor-snapshot-rating { font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.tutor-snapshot-rating .stars { color: #f5b301; letter-spacing: 1px; }
.tutor-certified { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 700; color: var(--green-deep); background: var(--color-accent-bg, #f5f8ee); padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; }
.tutor-snapshot-facts { display: flex; flex-direction: column; gap: 11px; text-align: left; margin: 0 0 22px; }
.tutor-snapshot-facts li { display: flex; align-items: center; gap: 11px; color: var(--body-ink); font-size: 0.96rem; }
.tutor-snapshot-facts li i { color: var(--green-deep); width: 18px; text-align: center; }
.tutor-snapshot-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted-ink); font-size: 0.85rem; margin: 12px 0 0; }

/* Trust / stat cards */
.tutor-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 640px) { .tutor-stat-cards { grid-template-columns: 1fr 1fr; } }
.tutor-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sm); }
.tutor-stat-num { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.tutor-stat-label { display: block; font-size: 0.82rem; color: var(--muted-ink); margin-top: 6px; font-weight: 600; }

/* Sections */
.tutor-section { margin-bottom: 40px; }
.tutor-section h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; }
.tutor-section-sub { color: var(--muted-ink); margin: -8px 0 18px; }
.tutor-bio { font-size: 1.06rem; line-height: 1.8; color: var(--body-ink); }

/* Subject badges (LinkedIn-style pills) */
.tutor-subject-group { margin-bottom: 18px; }
.tutor-subject-group h4 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 10px; }
.tutor-subject-badges { display: flex; flex-wrap: wrap; gap: 9px; }
.tutor-subject-badge { font-size: 0.9rem; font-weight: 600; color: var(--navy-700); background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; }

/* Experience achievement card */
.tutor-experience-card { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); }
.tutor-experience-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(160deg, var(--green-deep), var(--green)); color: #fff; font-size: 1.4rem; }
.tutor-experience-card p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--body-ink); }

/* Availability calendar in a rounded card */
.tutor-calendar-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.tutor-calendar-card .fc { --fc-border-color: #eef1f6; }
.tutor-calendar-card .fc .fc-col-header-cell-cushion { color: var(--ink); font-weight: 700; text-decoration: none; padding: 8px; }
.tutor-calendar-card .fc .fc-timegrid-slot-label-cushion { color: var(--muted-ink); font-size: 0.82rem; }

/* =========================================================================
   ROUND 20: Tutoring-section components — proof band, payment icons,
   mode cards, "A Parent's Question" callout.
   ========================================================================= */

/* Proof / statistic band (big scannable numbers) */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 760px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
.proof-stat { text-align: center; padding: 12px; }
.proof-stat-num { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.on-dark .proof-stat-num, .sec-navy .proof-stat-num { color: #fff; }
.proof-stat-num.accent { color: var(--green-deep); }
.sec-navy .proof-stat-num.accent { color: var(--green-bright); }
.proof-stat-label { display: block; font-size: 0.95rem; color: var(--muted-ink); margin-top: 8px; font-weight: 600; }
.sec-navy .proof-stat-label { color: #b9c2d8; }

/* Payment-method icons row */
.payment-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 24px; align-items: center; }
.payment-icons i { font-size: 2.6rem; color: var(--navy-700); opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; }
.payment-icons i:hover { opacity: 1; transform: translateY(-2px); }

/* Mode / location cards (Home, Library, Coffee Shop, Campus, Online) */
.mode-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 900px) { .mode-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mode-grid { grid-template-columns: 1fr 1fr; } }
.mode-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 18px; text-align: center; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mode-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mode-card i { font-size: 1.7rem; color: var(--green-deep); margin-bottom: 14px; }
.mode-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.mode-card p { font-size: 0.9rem !important; line-height: 1.5 !important; color: var(--body-ink); margin: 0 !important; }

/* "A Parent's Question" callout */
.parent-q-section { padding: 56px 0; }
.parent-q { max-width: 760px; margin: 0 auto; text-align: center; background: var(--color-accent-bg, #f5f8ee); border: 1px solid #e6eed3; border-radius: var(--radius-lg); padding: 40px 44px; }
.parent-q-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 14px; }
.parent-q-question { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; line-height: 1.3; }
.parent-q-answer { font-size: 1.08rem; line-height: 1.7; color: var(--body-ink); margin: 0; }

/* Checklist as a two-column list (billing reassurance etc.) */
.reassure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; max-width: 820px; margin: 22px auto 0; }
@media (max-width: 640px) { .reassure-grid { grid-template-columns: 1fr; } }
.reassure-item { display: flex; align-items: flex-start; gap: 12px; }
.reassure-item i { color: var(--green); font-size: 1.15rem; margin-top: 2px; }
.reassure-item strong { display: block; color: var(--ink); font-size: 1.05rem; }
.reassure-item span { color: var(--muted-ink); font-size: 0.95rem; }

/* Process timeline — 5-step variant (line spans first→last node centers) */
.process-grid--5 { grid-template-columns: repeat(5, 1fr); }
.process-grid--5::before { left: 10%; right: 10%; }
@media (max-width: 980px) { .process-grid--5 { grid-template-columns: 1fr 1fr; } .process-grid--5::before { display: none; } }
@media (max-width: 520px) { .process-grid--5 { grid-template-columns: 1fr; } }

/* Process timeline — 3-step variant */
.process-grid--3 { grid-template-columns: repeat(3, 1fr); }
.process-grid--3::before { left: 16.66%; right: 16.66%; }
@media (max-width: 760px) { .process-grid--3 { grid-template-columns: 1fr; } .process-grid--3::before { display: none; } }

/* Payments — Affirm text badge + spacing */
.payment-affirm { font-weight: 800; font-size: 1.5rem; color: var(--navy-700); letter-spacing: -0.01em; opacity: 0.85; }

/* Locations — local-spots note */
.mode-local-note { max-width: 760px; margin: 28px auto 0; text-align: center; color: var(--muted-ink); font-size: 0.98rem; line-height: 1.6; }
.mode-local-note a { color: var(--green-deep); font-weight: 600; }

/* =========================================================================
   ROUND 21: subject + location page bits.
   ========================================================================= */
.subject-local-note { font-size: 0.95rem; color: var(--muted-ink); }
.topic-groups { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.topic-group h4 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 12px; }
/* Topic pills laid out in a responsive grid that fills the row width instead of
   crowding the left edge: 4 columns on wide screens, 2 on tablet, 1 on phone.
   Equal-fraction columns (minmax(0,1fr)) keep them evenly spread; a long pill
   wraps its text within its cell rather than overflowing. */
.topic-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: start; align-items: start; gap: 8px 20px; }
.topic-badges .tutor-subject-badge { justify-self: start; max-width: 100%; white-space: normal; }
@media (max-width: 991px) { .topic-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .topic-badges { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   ROUND 22: test-prep pricing cards.
   ========================================================================= */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } }
.pricing-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; border-top: 4px solid var(--line); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pricing-card--gold { border-top-color: #c9a84c; }
.pricing-card--silver { border-top-color: #9aa3af; }
.pricing-card--bronze { border-top-color: #cd7f32; }
.pricing-tier { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.pricing-card--gold .pricing-tier { color: #b28e2e; }
.pricing-card--silver .pricing-tier { color: #6b7280; }
.pricing-card--bronze .pricing-tier { color: #b5682a; }
.pricing-hours { display: block; font-size: 0.88rem; font-weight: 600; color: var(--muted-ink); margin: 4px 0 14px; }
.pricing-card p { font-size: 0.98rem !important; line-height: 1.6 !important; color: var(--body-ink); margin: 0 0 22px !important; flex: 1 1 auto; }
.pricing-card .btn-elite { width: 100%; }

/* =========================================================================
   ROUND 23: community pages — sponsor cards + workshop schedule.
   ========================================================================= */
.sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .sponsor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sponsor-grid { grid-template-columns: 1fr; } }
.sponsor-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sponsor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sponsor-img { height: 190px; background: #f4f6f9; }
.sponsor-img img { width: 100%; height: 100%; object-fit: cover; }
.sponsor-body { padding: 22px 24px; }
.sponsor-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sponsor-body p { font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--body-ink); margin: 0 !important; }
.sponsor-body p a { color: var(--green-deep); font-weight: 600; }

/* Workshop schedule card */
.workshop-schedule { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 32px; box-shadow: var(--shadow-sm); }
/* Single column (2026-08-05): rows now carry title + time range — two
   columns forced wrapping. */
.workshop-schedule ul { display: grid; grid-template-columns: 1fr; }
/* Row stacks the meta line over its action buttons (2026-09): "View Slides" /
   "Practice & Resources" moved from an inline &middot; trail into styled
   buttons UNDERNEATH the row, aligned beneath the title. */
.workshop-schedule li { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--body-ink); font-size: 1rem; }
.workshop-schedule .ws-main { display: flex; align-items: baseline; gap: 14px; }
.workshop-schedule .ws-date { flex: 0 0 62px; font-weight: 700; color: var(--green-deep); font-size: 0.9rem; }
.workshop-schedule .ws-title { flex: 1 1 auto; }
/* Times right-aligned in a uniform column regardless of title length. */
.workshop-schedule .ws-time { margin-left: auto; padding-left: 14px; color: #5a6b7a; font-size: 0.9rem; white-space: nowrap; }
.workshop-schedule li.is-past { color: #7a8594; }
.workshop-schedule .ws-status { flex: 0 0 auto; font-size: 0.8rem; color: #7a8594; }
/* Action buttons aligned under the title (62px date + 14px gap). */
.workshop-schedule .ws-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 76px; }
.workshop-schedule .ws-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-size: 0.875rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
.workshop-schedule .ws-btn i { font-size: 0.9em; }
.workshop-schedule .ws-btn--primary { background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%); color: #fff; box-shadow: var(--shadow-sm); }
.workshop-schedule .ws-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.workshop-schedule .ws-btn--ghost { background: #fff; color: var(--navy-700); border: 1.5px solid var(--navy-700); }
.workshop-schedule .ws-btn--ghost:hover { background: var(--cool-tint); transform: translateY(-2px); color: var(--navy-700); }
/* Mobile (2026-09-07): the single-row .ws-main crammed date + title + time +
   status across one line, so the time range and "Completed" status ran off the
   right edge (clipped). Restructure into a compact meta line (date, time,
   status) with the title full-width beneath it, and trim the card's side
   padding for more room. */
@media (max-width: 640px) {
  .workshop-schedule { padding: 16px 20px; }
  .workshop-schedule .ws-main { flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; }
  .workshop-schedule .ws-date { flex: 0 0 auto; order: 1; }
  .workshop-schedule .ws-time { order: 2; margin-left: 0; padding-left: 0; }
  .workshop-schedule .ws-status { order: 3; margin-left: auto; }
  .workshop-schedule .ws-title { order: 4; flex: 1 1 100%; }
  .workshop-schedule .ws-actions { padding-left: 0; }
}

/* Inline slide-deck viewer (/workshops/<id>/slides/) — the reveal.js deck
   embedded in an iframe so visitors keep the site header/footer instead of
   navigating off to the raw S3 URL. */
.deck-viewer { padding: 44px 0 64px; }
.deck-viewer-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.deck-viewer-head h1 { margin: 6px 0 0; font-size: 1.85rem; }
.deck-viewer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* 4:3 to match the reveal.js deck (width 1280 / height 960 in
   shared/deck-chrome.js) so it fills the frame with no side letterboxing.
   Width is capped so the 4:3 height never overflows the viewport; centered. */
.deck-frame { position: relative; width: min(100%, calc((100vh - 190px) * 4 / 3)); margin: 0 auto; aspect-ratio: 4 / 3; background: #0e1524; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.deck-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.deck-viewer-foot { margin-top: 22px; }
.deck-viewer-foot a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.deck-viewer-foot a:hover { text-decoration: underline; }
/* Reuse the schedule button styling in the viewer header. */
.deck-viewer .ws-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-size: 0.875rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
.deck-viewer .ws-btn i { font-size: 0.9em; }
.deck-viewer .ws-btn--ghost { background: #fff; color: var(--navy-700); border: 1.5px solid var(--navy-700); }
.deck-viewer .ws-btn--ghost:hover { background: var(--cool-tint); transform: translateY(-2px); color: var(--navy-700); }
@media (max-width: 640px) { .deck-frame { aspect-ratio: 4 / 3; } .deck-viewer-head h1 { font-size: 1.4rem; } }

/* =========================================================================
   MOBILE NAV POLISH (2026-07-11): visible close affordance + dropdown carets.
   ========================================================================= */

/* 1) Dropdown affordance — every top-level nav trigger (About / Tutoring /
   Test Prep / Subjects / Locations / Community) is a <button> that opens a
   submenu, but read as a plain link. Add a chevron so it's clearly a menu. */
header .nav-link-button {
  display: inline-flex;
  align-items: center;
}
header .nav-link-button::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.75;
}
/* Rotate the chevron up when its submenu is open (mobile accordion state). */
@media (max-width: 1024px) {
  .main-menu .nav > .nav-item.active > .nav-link-button::after {
    transform: translateY(1px) rotate(-135deg);
  }
}

/* 2) Close affordance — when the mobile panel is open the hamburger becomes
   an X, but elite.css painted it white and the open panel is white → an
   invisible X. Make the X dark so it reads as a close button on the panel. */
@media (max-width: 1024px) {
  .toggle-menu.active span { background: #16203f !important; }
}

/* =========================================================================
   BLOG (rounds 24) — index grid + article reading experience.
   The blog functions differently from marketing pages (post cards, a
   reading column, category filtering) but wears the same design language:
   navy hero, elite cards, warm/white section rhythm, green as accent only.
   ========================================================================= */

/* --- Category filter pills (index) --- */
.blog-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.blog-pill {
  display: inline-block;
  padding: 9px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--body-ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.blog-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #cbd4e6; color: var(--ink); }
.blog-pill.active {
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* --- Post grid + card --- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-media--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef3f8 0%, #e3ecdf 100%);
}
.blog-card-media--placeholder i { font-size: 2.4rem; color: var(--green-deep); opacity: 0.7; }
.blog-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 24px 22px; }
.blog-card-cat {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 10px;
}
.blog-card h3 {
  font-size: 1.18rem; line-height: 1.35; color: var(--ink); margin: 0 0 10px;
  font-weight: 700;
}
.blog-card p { font-size: 0.95rem; line-height: 1.6; color: var(--body-ink); margin: 0 0 18px; }
.blog-card-meta {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--muted-ink);
}

/* --- Pagination --- */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; }
.blog-pagination .page-status { color: var(--muted-ink); font-size: 0.92rem; }

/* --- Article header (detail) — navy hero, article metadata not a CTA --- */
.blog-article-hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  padding: 30px 0 54px;
}
.blog-article-hero .hero-breadcrumb { margin-bottom: 22px; }
.blog-article-hero .breadcrumb-item,
.blog-article-hero .breadcrumb-item a { color: #b9c2d8 !important; }
.blog-article-hero .breadcrumb-item.active { color: #eaf0fb !important; }
.blog-article-inner { max-width: 820px; margin: 0 auto; }
.blog-article-cat {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-bright); display: block; margin-bottom: 14px;
}
.blog-article-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.85rem); line-height: 1.15; font-weight: 800;
  color: #fff; margin: 0 0 18px;
}
.blog-article-meta { color: #aeb8d0; font-size: 0.98rem; }
.blog-article-meta a { color: #eaf0fb; text-decoration: underline; }

/* Featured image sits fully BELOW the navy hero with a clear gap. (It
   previously lifted -40px over the seam like other pages' cards, but with
   rounded corners against the navy it read as an overlap bug — Victor
   2026-07-21.) */
.blog-feature-wrap { max-width: 900px; margin: 40px auto 0; padding: 0 16px; }
/* Symmetry: the gap below the image must match the 40px above it. Only when
   an image precedes the body — image-less posts keep the normal .sec-pad
   rhythm off the hero. (3-class specificity beats .sec-pad's media queries.) */
.blog-feature-wrap + .sec-white.sec-pad { padding-top: 40px; }
.blog-feature-wrap img {
  width: 100%; max-height: 460px; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}

/* --- Article body typography (overrides the basic style2 .blog-content) --- */
.blog-article { max-width: 720px; margin: 0 auto; }
.blog-article.blog-content { font-size: 1.08rem; line-height: 1.8; color: var(--body-ink); }
.blog-article.blog-content h2 {
  font-size: 1.7rem; line-height: 1.25; color: var(--ink); font-weight: 800;
  margin: 44px 0 16px;
}
.blog-article.blog-content h3 {
  font-size: 1.28rem; line-height: 1.3; color: var(--ink); font-weight: 700;
  margin: 32px 0 12px;
}
.blog-article.blog-content p { margin: 0 0 20px; }
.blog-article.blog-content ul, .blog-article.blog-content ol { margin: 0 0 20px; padding-left: 26px; }
.blog-article.blog-content li { margin-bottom: 8px; }
.blog-article.blog-content strong { color: var(--ink); }
.blog-article.blog-content a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; }
.blog-article.blog-content a:hover { color: var(--navy-800); }
.blog-article.blog-content blockquote {
  margin: 28px 0; padding: 6px 0 6px 26px;
  border-left: 4px solid var(--green); color: var(--ink);
  font-size: 1.18rem; line-height: 1.6; font-style: italic;
}
.blog-article.blog-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 26px 0; }
.blog-article.blog-content hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }
/* The AI drafter closes with an italic CTA paragraph after an <hr>. */
.blog-article.blog-content hr + p, .blog-article.blog-content > p > em {
  color: var(--muted-ink);
}

/* --- Form-free CTA band (blog keeps readers reading — no registration form) --- */
.blog-cta {
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-600) 100%);
  border-radius: var(--radius-lg);
  padding: 46px 40px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.blog-cta h2 { color: #fff; font-size: 1.7rem; font-weight: 800; margin: 0 0 12px; }
.blog-cta p { color: #d7dced; font-size: 1.05rem; line-height: 1.6; margin: 0 auto 26px; max-width: 560px; }
.blog-cta p a { color: #fff; font-weight: 700; }
.blog-cta .btn-elite-primary { box-shadow: 0 12px 26px rgba(143, 174, 47, 0.35); }

/* =========================================================================
   GET-THE-APP BAND — decorative iOS download section + reusable badge.
   ========================================================================= */
.app-band {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(70, 132, 164, 0.45) 0%, rgba(70, 132, 164, 0) 60%),
    linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  padding: 84px 0;
  overflow: hidden;
}
.app-band-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.app-band-copy h2 {
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 10px 0 16px;
}
.app-band-copy > p {
  color: #c8d1e2;
  font-size: 1.12rem;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 0 22px;
}
.app-band-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
}
.app-band-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #eaf0fb;
  font-size: 1.02rem;
  font-weight: 500;
}
.app-band-features li i {
  color: var(--green-bright);
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

/* Phone mockup: dark bezel + rounded screen + floating shadow */
.app-band-visual { display: flex; justify-content: center; }
.app-phone {
  width: 100%;
  max-width: 268px;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(160deg, #0d1f33, #17324e);
  box-shadow: 0 40px 90px -20px rgba(6, 16, 38, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.app-phone img {
  display: block;
  width: 100%;
  /* imgs carry width/height CLS attributes; without this the attribute
     height wins over the fluid width and stretches the screenshot. */
  height: auto;
  border-radius: 32px;
}

/* CTA row (badge + learn-more link) */
.app-band-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.app-band-learnmore { color: #eaf0fb; font-weight: 600; font-size: 1rem; }
.app-band-learnmore:hover { color: #fff; }
.app-band-learnmore .arw { display: inline-block; transition: transform 0.2s ease; }
.app-band-learnmore:hover .arw { transform: translateX(4px); }

/* Official store badges (shared — App Store + Google Play) */
.app-store-badge, .google-play-badge { display: inline-block; line-height: 0; transition: transform 0.16s ease, opacity 0.16s ease; }
.app-store-badge:hover, .google-play-badge:hover { transform: translateY(-2px); opacity: 0.9; }
.app-store-badge img, .google-play-badge img { display: block; height: 52px; width: auto; }
.app-band-badge img { height: 54px; }
.footer-app-badge { margin-top: 20px; }
.footer-app-badge img { height: 44px; }
/* Footer stacks the two badges vertically at the same left edge. */
.footer-app-badge + .footer-app-badge { margin-top: 12px; }

/* ---- Dedicated /mobile-app/ page ---- */
.app-hero { padding: 72px 0; }
.app-hero-title {
  color: #fff;
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 10px 0 16px;
}
/* Second headline line in brand green — mirrors the app social card. */
.app-hero-title .accent { color: var(--green-bright); }
.app-cta-center { text-align: center; max-width: 560px; margin: 0 auto; }
.app-cta-badges { justify-content: center; }
.app-cta-center h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.app-cta-center > p { color: #c8d1e2; font-size: 1.12rem; line-height: 1.6; margin: 0 auto 22px; max-width: 460px; }
.app-cta-center .app-store-badge { margin: 0 auto; }
.app-cta-note { font-size: 0.95rem; color: #9fb0c8; margin-top: 22px; }
.app-cta-note a { color: var(--green-bright); font-weight: 600; }

/* Screenshot gallery */
.app-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
  max-width: 900px;
  margin: 0 auto;
}
.app-shot { margin: 0; text-align: center; }
.app-shot .app-phone { max-width: 240px; margin: 0 auto 16px; }
.app-shot figcaption { color: var(--muted-ink); font-size: 0.98rem; font-weight: 600; }

@media (max-width: 900px) {
  .app-band-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; max-width: 460px; }
  .app-band-copy > p { margin-left: auto; margin-right: auto; }
  .app-band-features { display: inline-grid; text-align: left; }
  .app-band-cta { justify-content: center; }
  .app-band-visual { order: -1; }
  .app-phone { max-width: 232px; }
  .app-shots { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; max-width: 480px; }
}
@media (max-width: 768px) {
  .app-band { padding: 44px 0; }
  .app-hero { padding: 44px 0; }
  .app-band-badge img { height: 50px; }
}
@media (max-width: 480px) {
  .app-shots { grid-template-columns: 1fr; max-width: 260px; }
}

/* =========================================================================
   ROUND 9 — MOBILE DENSITY & REORDER (2026-07 consultant pass).
   The homepage measured ~33,400px tall on a 390px phone (~40 screens). This
   ONE block tightens the mobile experience toward ~20–22k px (−35%) WITHOUT a
   redesign: desktop is left essentially as-is (a couple of global button/logo
   tweaks aside). All content, section headings, region links, and the FAQ +
   its JSON-LD are preserved → SEO-neutral. Punch-list: docs/mobile-refinement-punchlist.md.
   ========================================================================= */
@media (max-width: 768px) {
  /* ---- Part A: shared density (highest leverage — carries every page) ---- */
  .sec-pad { padding: 38px 0; }                        /* A1 (was 60px mobile) */
  .card-grid-wrappers { padding: 36px 0; }             /* A2 (was 56px mobile) */
  .feature-card { padding: 24px 22px; }                /* A3 (was 46px 38px) */
  .feature-icon { width: 56px; height: 56px; font-size: 1.45rem; margin-bottom: 16px; }
  .feature-card h3 { font-size: 1.24rem; margin-bottom: 9px; }
  .feature-grid { gap: 18px; }
  .feature-grid--four .feature-card { padding: 22px 20px; }  /* A4 */
  .checklist-card { padding: 24px 22px; }              /* A5 */
  .register-form-wrap.glass-card { padding: 22px 20px; }     /* A6 */
  .register-form-wrap h5 { font-size: 1.45rem !important; }

  /* A7 — modern, comfortable buttons; the primary hero + final CTAs go
     full-width so they read as strong tap targets. */
  .dark-btn { padding: 12px 26px; }
  .btn-elite { padding: 13px 26px; }
  .hero-cta-row .btn-elite,
  .final-cta-row .btn-elite { flex: 1 1 100%; justify-content: center; }

  /* A8 — trim the hero form fields + submit */
  .hero-section .register-form-control { height: 50px; }
  .hero-section .register-form-wrap .submit-btn-wrap .dark-btn { height: 50px; }

  /* A9/A10 — smaller logo + tighter header so more hero sits above the fold */
  .logo img { max-width: 68px; }
  .header-actions { gap: 8px; margin-top: 6px; }

  /* A11/A12 — calmer line-height + readable measure on body copy */
  .hero-section .hero-content .description { line-height: 1.5; }
  .about-elite .about-lead,
  .why-parents-copy p,
  .subject-card p,
  .feature-card p,
  .more-than-lead,
  .final-cta p { line-height: 1.55; }
  .about-elite .card-data-wrap p,
  .why-parents-copy p,
  .elite-section-head p { max-width: 34em; margin-left: auto; margin-right: auto; }

  /* A13 — headings sit closer to their content */
  .elite-section-head { margin-bottom: 26px; }
  .elite-section-head .eyebrow { margin-bottom: 9px; }
  .elite-home .card-data-wrap h2,
  .more-than-title { margin-bottom: 12px; }

  /* ---- Part B: hero ---- */
  .hero-section { padding: 44px 0 40px; }              /* B1 (was 104/112) */
  .hero-section .hero-content { padding-right: 0; }
  .hero-section::before { width: 320px; height: 320px; }   /* B2 — cap the glows */
  .hero-section::after { width: 300px; height: 300px; }
  .hero-cta-row { margin-top: 18px; }                  /* B3 — buttons hug the copy */
  .hero-trust { margin-top: 30px; padding-top: 22px; }

  /* ---- Part C: section-specific compaction ---- */
  /* C2 — "Serving families nationwide" collapses to a tight utility row
     (region links preserved for the SEO mesh; just less air). */
  .local-office-bar { padding-bottom: 22px; margin-bottom: 26px; gap: 8px 12px; }
  .local-office-label { font-size: 0.92rem; }

  /* C3 — subject cards shorter so they flow under one another */
  .subject-card { padding: 22px 20px; }
  .subject-card .subject-icon { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 12px; }
  .subject-card p { margin-bottom: 12px; }
  .subject-grid { gap: 16px; }

  /* C4 — universities: tighter grid, intentional (not empty) */
  .schools-grid { gap: 12px; }

  /* about media: less reserved height on phones */
  .about-media { margin-top: 16px; }
  .about-img-main { min-height: 260px; max-height: 320px; }

}

/* ---------------------------------------------------------------------------
   Review-platform brand tiles (testimonials page "Reviews On Other Websites").
   Vector marks in brand colors replace the old low-res JPG logos; the tile
   keeps the 180px image-wrap column the flex card layout expects. */
.review-brand-tile {
  width: 150px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.review-brand-tile img { width: 66px; height: 66px; }
/* KSL keeps its original logo image, which is itself a rounded light
   card — let it fill the tile edge-to-edge. */
.review-brand-tile--ksl { overflow: hidden; }
.review-brand-tile--ksl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575px) {
  .review-col .box-wrap { flex-direction: column; text-align: center; gap: 18px; }
  .review-col .box-wrap .image-wrap { margin-right: 0; }
}

/* ---- Mobile menu buttons (<=1024px): slimmer pills inside the 320px
   slide-in panel. With the 16px row inset (style2 mobile block) the
   desktop 20-22px paddings crowded the panel's right edge. Lives at the
   END of the file so the unscoped identical-height block above can't
   re-override the padding. ---- */
@media (max-width: 1024px) {
  .header-actions .login-btn.dark-btn { padding: 0 15px; }
  .header-actions .nav-cta { padding: 0 16px; }
}

/* =========================================================================
   ROUND 22: Subject-page above-the-fold TRUST STRIP.
   A compact horizontal row of 4 icon+label proof points, placed directly
   under the hero on subject pages so ad visitors see proof in the first
   screen. Signature-blue accents, mobile-first: wraps to a 2×2 grid on
   narrow screens (the majority of ad traffic).
   ========================================================================= */
.subject-trust-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.subject-trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px 8px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.subject-trust-item {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 14px;
  text-align: left;
}
.subject-trust-item + .subject-trust-item {
  border-left: 1px solid var(--line);
}
.subject-trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cool-tint);
  color: var(--navy-700);
  font-size: 1.05rem;
}
.subject-trust-label {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
}
/* Tablet: keep single row but tighten. */
@media (max-width: 860px) {
  .subject-trust-item { padding: 6px 8px; gap: 10px; }
  .subject-trust-label { font-size: 0.9rem; }
  .subject-trust-icon { width: 36px; height: 36px; font-size: 0.95rem; }
}
/* Mobile: 2×2 grid — the dominant ad-traffic layout. */
@media (max-width: 620px) {
  .subject-trust-strip .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .subject-trust-item {
    justify-content: flex-start;
    padding: 4px 4px;
    gap: 10px;
  }
  .subject-trust-item + .subject-trust-item { border-left: none; }
  .subject-trust-label { font-size: 0.88rem; }
}

/* =========================================================================
   PAID-TRAFFIC LANDING PAGES (/lp/ namespace, base_landing.html).
   Conversion-first, nav-stripped shell + the 2-step micro-form + sticky
   mobile bar. All rules are scoped to .lp-* classes so nothing here can
   affect the SEO site. Reuses the shared design tokens (navy scale, green
   accent, radii, shadows) so the LP stays on-brand.
   docs/paid-landing-pages-plan.md "Version B".
   ========================================================================= */

/* ---- Slim logo-only header (the logo is the only escape hatch) ---- */
.lp-header { background: var(--navy-950); padding: 14px 0; }
.lp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lp-logo img { width: 52px; height: 52px; }
.lp-logo-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.lp-logo-wordmark b { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lp-logo-wordmark span { color: rgba(255, 255, 255, 0.62); font-size: 15px; }
.lp-header-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.lp-header-phone i { color: var(--green-bright); }
.lp-header-phone:hover { color: var(--green-bright); }

/* ---- Hero tweaks (outcome-led, form on the right) ---- */
.lp-hero { padding-top: 68px; padding-bottom: 84px; }
/* ---- Optional hero photo (includes/lp_hero_bg.html + lp_hero_band.html) ----
   DESKTOP: a real <img> (.lp-hero-bg) + a dark navy scrim (.lp-hero-scrim) sit
   BEHIND the .container (z-index:1 already) as a full-bleed background. The scrim
   keeps white text + the light form card readable over the photo.
   MOBILE (<=991px): the full-bleed image is too cropped/too zoomed behind the
   stacked copy (Sol 5.6 2026-08-29), so we HIDE it and show the photo as an
   in-flow 4:3 band (.lp-hero-band) instead — the whole scene stays legible.
   Only active when the section carries the .lp-hero--image modifier. */
/* The photo replaces the decorative radial glows on the text-only hero. */
.lp-hero--image::before, .lp-hero--image::after { display: none; }
.lp-hero--image .lp-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; z-index: 0;
}
.lp-hero--image .lp-hero-scrim {
  position: absolute; inset: 0; z-index: 0;
  /* Darker on the left (behind the copy) fading right so the photo shows through
     in the center, with a gentle bottom floor so the lighter bullet text clears
     contrast. Tuned so white headline stays crisp AND the photo reads as warmth. */
  background:
    linear-gradient(100deg, rgba(20,47,66,0.90) 0%, rgba(20,47,66,0.78) 38%, rgba(20,47,66,0.42) 100%),
    linear-gradient(0deg, rgba(20,47,66,0.38) 0%, rgba(20,47,66,0.04) 48%);
}
/* Mobile hero band — hidden on desktop; shown (and full-bleed hidden) on mobile.
   height:auto shows the whole photo at its natural ratio (no crop), so one rule
   works for any source aspect (SAT 4:3, academic 3:2). The width/height attrs on
   the <img> reserve the right space, so no CLS. */
.lp-hero-band { display: none; }
@media (max-width: 991px) {
  .lp-hero--image .lp-hero-bg,
  .lp-hero--image .lp-hero-scrim { display: none; }
  .lp-hero-band {
    display: block; width: 100%; height: auto;
    border-radius: 14px; margin: 4px 0 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  }
}
.lp-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green-bright); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.lp-hero .hero-content .title { max-width: 620px; }
/* Desktop (>=992px) the hero goes TWO columns, so the headline lives in a ~half-
   width column. The base hero title size (clamp up to 3.6rem) is tuned for a
   full-width homepage hero and overflows here — a long headline breaks to 2-3
   words per line. Cap it so long titles wrap gracefully in the narrow column
   (Victor 2026-08-31). Below 992px the hero is single-column and the base size
   is fine; <=767px has its own smaller rule. */
@media (min-width: 992px) {
  .lp-hero .hero-content .title { font-size: 2.35rem; line-height: 1.13; }
}
/* Offer pill promoted right under the headline (Victor 2026-08-28, CRO reviews).
   flex-wrap + each phrase in a nowrap .lp-offer-txt so it wraps as clean units
   (not mid-phrase) on narrow screens (Sol 5.6 2026-08-29). */
.lp-hero .hero-content .lp-hero-offer { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 8px; background: rgba(168,198,62,0.16); color: var(--green-bright); font-weight: 800; font-size: 1.02rem; line-height: 1.25; padding: 8px 15px; border-radius: 999px; margin: 2px 0 14px; }
.lp-hero .hero-content .lp-hero-offer .lp-offer-txt { white-space: nowrap; }
.lp-hero .hero-content .lp-hero-offer .lp-offer-plus { opacity: 0.75; font-weight: 700; }
/* Trust signal at the form CTA + a stronger glow on the primary CTA. */
/* Trust strip now sits BELOW the form (compact, centered) so it reassures
   without burying the first question (Sol 5.6 2026-09-03). */
.lp-page .lp-form-trust { color: var(--muted-ink); font-size: 0.82rem; font-weight: 500; text-align: center; margin: 16px 0 0; }
.lp-page .lp-form-trust i { color: #f5a623; }
/* On wide browsers the trust line reads awkwardly ("...2018" wraps alone), so
   push the whole "Serving San Diego since 2018" onto its own line there; mobile
   keeps it inline with the middot separator. */
@media (min-width: 992px) {
  .lp-page .lp-form-trust .lp-trust-sep { display: none; }
  .lp-page .lp-form-trust .lp-trust-since { display: block; }
}
.lp-page .btn-elite-primary { box-shadow: 0 8px 24px rgba(126,169,49,0.34); }
.lp-hero-bullets { list-style: none; padding: 0; margin: 6px 0 18px; text-align: left; display: inline-block; }
.lp-hero-bullets li { color: #d3dcec; font-size: 1.04rem; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 10px; }
.lp-hero-bullets li i { color: var(--green-bright); margin-top: 4px; }
.lp-hero-bullets strong { color: #fff; }
/* Specificity note: .elite-home p (line ~57) sets color:var(--body-ink) at
   0,1,1 and beats a single-class .lp-hero-* selector, painting these dark on
   the navy hero. Scope to .lp-hero .hero-content (0,3,0) so they win. */
.lp-hero .hero-content .lp-hero-call { color: #eef2f8; font-size: 1.05rem; font-weight: 500; margin-top: 6px; }
.lp-hero .hero-content .lp-hero-call a { color: var(--green-bright); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.lp-claim-star { color: var(--green-bright); font-weight: 700; }
.lp-hero .hero-content .lp-hero-footnote { color: #ccd5e4; font-size: 0.7rem; line-height: 1.5; font-weight: 400; margin-top: 16px; max-width: 560px; }
@media (max-width: 991px) { .lp-hero .hero-content .lp-hero-footnote { margin-left: auto; margin-right: auto; } }

/* ---- 2-step micro-form card ---- */
.lp-form-card {
  background: #fff;
  padding: 32px 30px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 40px 90px -20px rgba(6, 16, 38, 0.55), 0 8px 20px rgba(6, 16, 38, 0.18);
  border-top: 4px solid var(--green);  /* lime accent: the form is the CTA (Sol 5.6) */
}
/* Mobile: the form is relocated into the hero copy (above the photo). The slot is
   empty on desktop (form stays in its column) -> collapse it; on mobile give the
   moved form breathing room. */
.lp-hero-form-slot:empty { display: none; }
/* Mobile: 20px below the form to match the 20px gap above it (the band's bottom
   margin), so the form sits evenly between the image and the bullets (Victor
   2026-09-06). Top stays 16px — it collapses with the band's 20px bottom to 20px. */
@media (max-width: 991px) { .lp-hero-form-slot { margin: 16px 0 20px; } }
/* Hide the progress bar on the first (who) screen — nothing to progress yet, and
   it competes with the CTA (Sol 5.6). data-screen is set by the form JS. */
#top-registration-form[data-screen="who"] .lp-progress { display: none; }
/* Compact head so the per-step question below leads (Sol 5.6 2026-09-03): small
   badge + a small context title, no subtitle, tight bottom margin. */
.lp-form-head { text-align: center; margin-bottom: 12px; }
.lp-form-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(33, 80, 101, 0.10); color: var(--navy-700); font-size: 1.05rem; margin-bottom: 8px; }
.lp-form-title { color: var(--ink); font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.lp-form-head .lp-form-title { font-size: 1.18rem; margin: 0; }
.lp-form-sub { color: var(--muted-ink); font-size: 0.98rem; margin: 0; }
.lp-form-error { color: #c0392b; font-weight: 600; margin-bottom: 12px; text-align: center; }

/* These are <p> elements — scope to .lp-page (0,2,0) so they beat .elite-home p
   (0,1,1), else the step labels/help render at 17px dark body-ink. */
/* The per-step question is the dominant element of the form card — it must read
   as the thing to answer, not a muted caption (Sol 5.6 + Victor 2026-09-03). */
.lp-page .lp-step-label { color: var(--ink); font-size: 1.35rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 14px; }
/* Direct instruction under a question (who-step). Negative top margin tightens
   the gap to the question; only present on screens that add it. */
.lp-page .lp-step-hint { color: var(--muted-ink); font-size: 0.92rem; font-weight: 500; margin: -9px 0 16px; }
.lp-need-chip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; background: rgba(143, 174, 47, 0.12); border: 2px solid var(--green); color: var(--navy-800); font-weight: 700; font-size: 1.1rem; }
.lp-need-chip i { color: var(--green-deep); }
.lp-page .lp-step-help { color: var(--body-ink); font-size: 0.98rem; margin: 14px 0 20px; }
.lp-page .lp-step-reassure { color: var(--muted-ink); font-size: 0.9rem; text-align: center; margin-top: 12px; }
.lp-step-reassure i { color: var(--green-deep); }
/* Full-width block button. Use flex centering (not block + height/line-height,
   which left the label sitting low) so the text is centered vertically +
   horizontally regardless of padding/descenders (Victor 2026-09-01). */
.lp-btn-block { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; height: 56px; line-height: 1; font-size: 1.05rem; border-radius: 15px; }
.lp-back { background: none; border: none; color: var(--muted-ink); font-weight: 600; font-size: 0.92rem; padding: 0; margin-bottom: 12px; cursor: pointer; }
.lp-back:hover { color: var(--navy-700); }
.lp-back[hidden] { display: none; }

/* ---- Multi-step academic form (chips / mode / zip / progress) ---- */
/* Progress indicator */
.lp-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lp-page .lp-progress-text { color: var(--muted-ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; flex: 0 0 auto; }
.lp-progress-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.lp-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-bright) 0%, var(--green) 100%); transition: width 0.25s ease; }

/* Step 1 — category chips */
.lp-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Every branching button (who / area / subject) shares one look: a right chevron
   (signals "advances to the next screen") + the same lime hover/selected highlight
   (Victor 2026-09-04). Group headers aren't .lp-chip, so they stay plain. */
.lp-chip {
  position: relative;
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 14px 30px 14px 15px; border-radius: 13px; border: 1.5px solid #e6eaf1;
  background: #f8fafc; color: var(--navy-800); font-weight: 700; font-size: 0.98rem;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lp-chip i { color: var(--green-deep); font-size: 1.05rem; flex: 0 0 auto; }
.lp-chip::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2.5px solid var(--green-deep); border-bottom: 2.5px solid var(--green-deep);
  transform: translateY(-60%) rotate(-45deg); opacity: 0.5;
}
.lp-chip:hover, .lp-chip:active {
  border-color: var(--green); background: rgba(143, 174, 47, 0.10);
  box-shadow: 0 6px 16px rgba(126, 169, 49, 0.18);
}
.lp-chip.is-selected {
  border-color: var(--green); background: rgba(143, 174, 47, 0.14);
  box-shadow: 0 0 0 3px rgba(143, 174, 47, 0.16);
}
/* The who-step is THE call to action — "Start here" eyebrow + stacked full-width
   buttons with a centered label (Sol 5.6 + Victor 2026-09-04). It inherits the
   shared chevron + highlight above. */
.lp-page .lp-start-here {
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem;
  font-weight: 800; color: var(--green-deep); margin: 0 0 5px;
}
.lp-page [data-lp-screen="who"] .lp-chip-grid { grid-template-columns: 1fr; }
.lp-page [data-lp-screen="who"] .lp-chip {
  justify-content: center; text-align: center;
  gap: 9px; padding: 18px 34px; border-width: 2px; font-size: 1.05rem;
}
.lp-chip--other { grid-column: 1 / -1; }
.lp-other-wrap { margin-top: 14px; }
.lp-other-wrap[hidden] { display: none; }
.lp-other-wrap label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--navy-700); margin-bottom: 6px; }
.lp-other-wrap input {
  width: 100%; height: 54px; border-radius: 13px; border: 1px solid #eef1f6;
  background: #f8fafc; font-size: 1rem; padding: 0 16px; color: var(--ink); margin-bottom: 12px;
}
.lp-other-wrap input:focus { outline: none; border-color: var(--color-secondery); box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); background: #fff; }

/* Area-screen fast lane: a prominent search-any-subject field above the browse
   buttons (hybrid intake — type OR tap, UX research 2026-08-30). */
.lp-area-search { position: relative; }
.lp-area-search .lp-area-search-icon {
  position: absolute; left: 15px; top: 16px; color: var(--muted-ink); font-size: 0.95rem; pointer-events: none;
}
.lp-area-search input {
  width: 100%; height: 50px; border-radius: 13px; border: 1.5px solid #e6eaf1;
  background: #f8fafc; font-size: 1rem; padding: 0 16px 0 40px; color: var(--ink);
}
.lp-area-search input:focus { outline: none; border-color: var(--color-secondery); box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); background: #fff; }
.lp-area-search .lp-type-results { margin-top: 6px; }
/* "or browse by area" divider between the search field and the area buttons. */
.lp-or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted-ink); font-size: 0.8rem; font-weight: 600; }
.lp-or-divider::before, .lp-or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Group header inside a class grid (e.g. Science: High School / College) — spans
   both columns above that level's classes. */
.lp-chip-group-head {
  grid-column: 1 / -1; margin: 6px 0 2px; color: var(--muted-ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.lp-chip-group-head:first-child { margin-top: 0; }

/* Subject sub-flow typeahead ("don't see it? type your class") — the branching
   intake escape hatch, mirrors the Meet-Our-Tutors subject search. */
.lp-subject-type { margin-top: 16px; position: relative; }
.lp-subject-type[hidden] { display: none; }
.lp-subject-type label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--navy-700); margin-bottom: 6px; }
.lp-subject-type input {
  width: 100%; height: 50px; border-radius: 13px; border: 1px solid #eef1f6;
  background: #f8fafc; font-size: 1rem; padding: 0 16px; color: var(--ink);
}
.lp-subject-type input:focus { outline: none; border-color: var(--color-secondery); box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); background: #fff; }
.lp-type-results { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.lp-type-results[hidden] { display: none; }
.lp-type-option {
  display: block; width: 100%; text-align: left; padding: 11px 15px; border: 0;
  background: #fff; font-size: 0.95rem; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.lp-type-option:last-child { border-bottom: 0; }
.lp-type-option:hover, .lp-type-option:focus { background: var(--color-accent-bg, #f5f8ee); color: var(--green-deep); }

/* Step 2 — mode buttons */
.lp-mode-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.lp-mode {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 10px; border-radius: 14px; border: 1.5px solid #e6eaf1; background: #f8fafc;
  color: var(--navy-800); font-weight: 700; font-size: 0.95rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lp-mode i { color: var(--green-deep); font-size: 1.4rem; }
.lp-mode:hover { border-color: var(--green); background: #fff; }
.lp-mode.is-selected { border-color: var(--green); background: rgba(143, 174, 47, 0.12); box-shadow: 0 0 0 3px rgba(143, 174, 47, 0.14); }

.lp-step[hidden] { display: none; }

.lp-field { margin-bottom: 16px; }
/* Two fields side by side in one row (e.g. first + last name) — stays 2-up even
   on phones so the micro-form doesn't grow a row. */
.lp-field-row { display: flex; gap: 14px; align-items: stretch; }
.lp-field-row > .lp-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* Bottom-align the inputs so a label that wraps to two lines (e.g. "Current
   SAT/PSAT score" next to the one-line "Target SAT score") doesn't leave the two
   boxes at different heights — the shorter label's input drops to match. */
.lp-field-row > .lp-field > input { margin-top: auto; }
@media (max-width: 380px) { .lp-field-row { gap: 9px; } }
.lp-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--navy-700); margin-bottom: 6px; }
/* Muted "(optional)" tag next to a field label (consultation details step). */
.lp-label-optional { color: var(--muted-ink); font-weight: 400; font-size: 0.92em; }
.lp-field input {
  width: 100%; height: 54px; border-radius: 13px; border: 1px solid #eef1f6;
  background: #f8fafc; font-size: 1rem; padding: 0 16px; color: var(--ink);
}
.lp-field input:focus { outline: none; border-color: var(--color-secondery); box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); background: #fff; }
.lp-field input.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }
.lp-field-error { display: block; color: #c0392b; font-size: 0.82rem; margin-top: 6px; }
/* Positive confirmation under a field (e.g. resolved ZIP -> "San Diego, CA"). */
.lp-field-ok { display: block; color: #2e7d32; font-size: 0.82rem; font-weight: 600; margin-top: 6px; }
.lp-field-ok[hidden] { display: none; }
/* Dropdown styled to match the text inputs (grade level picker). */
.lp-field .lp-select {
  width: 100%; height: 54px; border-radius: 13px; border: 1px solid #eef1f6;
  background: #f8fafc; font-size: 1rem; padding: 0 14px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23557' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.lp-field .lp-select:focus { outline: none; border-color: var(--color-secondery); box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); background-color: #fff; }
/* Hint line under a field (e.g. leave current score blank). */
.lp-page .lp-field-hint { font-size: 0.85rem; color: var(--muted-ink); margin: -8px 0 12px; }
.lp-field-error[hidden] { display: none; }
/* <p> element — scope to .lp-page so it beats .elite-home p (0,1,1) and stays
   0.9rem fine print, not 17px body copy. */
.lp-page .lp-form-note { color: var(--body-ink); font-size: 0.9rem; font-weight: 500; line-height: 1.45; margin: 12px 0 0; text-align: center; }
.lp-form-mark { color: var(--green-deep); font-weight: 700; }
/* TCPA consent checkbox — adjacent to the submit button, fine-print label. */
.lp-page .lp-consent { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; text-align: left; cursor: pointer; }
.lp-page .lp-consent input { margin: 3px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
.lp-page .lp-consent span { font-size: 0.72rem; line-height: 1.4; color: var(--muted-ink); }
/* Program pricing — total + per-hour PRIMARY, financing SECONDARY (Victor
   2026-08-28: financing is a benefit, not the headline price). */
.lp-program-price { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 12px; }
/* Total price leads (bold, large); per-hour is a small secondary value signal. */
.lp-price-row { display: flex; align-items: baseline; gap: 10px; }
.lp-price-row .lp-price-mode { font-size: 0.9rem; color: var(--body-ink); min-width: 66px; }
.lp-price-row .lp-price-amount { font-size: 1.4rem; font-weight: 800; color: var(--green-deep); letter-spacing: -0.01em; }
.lp-price-row .lp-price-per { font-size: 0.8rem; color: var(--muted-ink); margin-left: auto; }

/* Single-price treatment for the NATIONAL pricing pages (Sol 5.6 2026-09-17):
   only the online rate exists there, so the price centers large in the card
   with a quiet "Online rate" pill; regional pages keep the two-row layout.
   The pill reuses the financing tint but smaller/lighter so it reads as
   pricing metadata, never competing with Best Value / Most Popular. */
.lp-price-solo { display: block; text-align: center; margin: 22px 0 10px; }
/* Pill sits ABOVE the amount (Victor 2026-09-17: inline it pushed the price
   off-center; the price is the dominant element and centers on its own line). */
.lp-price-solo .online-rate-pill { display: inline-block; margin-bottom: 9px; }
.lp-price-solo .lp-price-amount { display: block; font-size: 2.5rem; font-weight: 800; color: var(--green-deep); letter-spacing: -0.02em; line-height: 1; }
.lp-price-solo .lp-price-per { display: block; font-size: 0.88rem; color: var(--muted-ink); margin-top: 4px; }
.lp-price-solo .lp-price-hr { display: block; font-size: 0.95rem; font-weight: 600; color: var(--body-ink); margin-top: 6px; }
.online-rate-pill { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; padding: 3px 10px; border-radius: 999px; background: rgba(143, 174, 47, 0.10); border: 1px solid rgba(143, 174, 47, 0.32); color: var(--green-deep); white-space: nowrap; }
/* .elite-home scope so the note wins the .elite-home p (0,1,1) color rule. */
.elite-home .lp-programs-note { font-size: 0.88rem; color: var(--muted-ink); text-align: center; max-width: 640px; margin: 20px auto 0; }
/* Financing gets its own tinted, bolder row so it reads as a real payment option,
   not fine print (Sol 5.6 + Victor 2026-09-01). Monthly figures are on the ONLINE
   totals; the "on the online program" sub keeps that clear + accurate (Sol). */
.lp-finance { display: flex; flex-direction: column; gap: 1px; background: rgba(143,174,47,0.10); border: 1px solid rgba(143,174,47,0.28); border-radius: 10px; padding: 8px 12px; margin: 0 0 16px; }
.lp-finance .lp-finance-amt { font-size: 0.98rem; color: var(--green-deep); font-weight: 600; }
.lp-finance .lp-finance-amt strong { font-weight: 800; }
.lp-finance .lp-finance-sub { font-size: 0.74rem; color: var(--muted-ink); }
.lp-program-price .lp-price-note { font-size: 0.78rem; color: var(--muted-ink); }
.lp-price-star { color: var(--green-deep); font-weight: 700; }
/* One CTA below all three cards (they all book the same free consultation, so
   per-card buttons were repetitive — consultant 2026-09-01). */
.lp-programs-cta { text-align: center; margin-top: 34px; }
.lp-programs-cta .lp-programs-help { margin-top: 0; margin-bottom: 16px; }
/* .lp-page scope beats .elite-home p (0,1,1) so this renders as fine print. */
.lp-page .lp-programs-bonus { color: var(--green-deep); font-size: 0.92rem; font-weight: 600; line-height: 1.5; max-width: 640px; margin: 22px auto 0; text-align: center; }
.lp-page .lp-programs-bonus i { margin-right: 6px; }
.lp-page .lp-programs-bonus .lp-programs-bonus-note { color: var(--muted-ink); font-weight: 500; font-size: 0.85rem; }
.lp-page .lp-programs-finance { font-size: 0.7rem; color: var(--muted-ink); line-height: 1.5; max-width: 660px; margin: 14px auto 0; text-align: center; }
/* Stack the * claim note + ** consent note tightly at the bottom of the hero. */
.lp-hero .hero-content .lp-hero-footnote + .lp-hero-footnote { margin-top: 8px; }

/* ---- Proof strip ---- */
.lp-proof { padding: 44px 0; }
.lp-proof-cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.lp-proof-note { color: var(--muted-ink); font-weight: 600; font-size: 0.95rem; }
/* Compact pricing line under the proof CTA (surfaced up front per Sol/Victor). */
.lp-proof-pricing { max-width: 680px; margin: 14px auto 0; text-align: center; color: var(--muted-ink); font-size: 0.92rem; line-height: 1.5; }
.lp-proof-pricing strong { color: var(--body-ink); font-weight: 700; white-space: nowrap; }
/* Utility: keep a short token (e.g. "1-on-1") from breaking across lines. */
.lp-nowrap { white-space: nowrap; }

/* ---- Big single testimonial band (reuses quote-band spacing) ---- */
.lp-hero-quote { padding: 60px 0; text-align: center; }
.lp-hero-quote .quote-mark { font-size: 4rem; color: var(--green-bright); line-height: 0.5; opacity: 0.8; }
.lp-hero-quote blockquote { color: #fff; font-size: clamp(1.15rem, 2.1vw, 1.6rem); font-weight: 600; line-height: 1.38; max-width: 820px; margin: 18px auto 14px; letter-spacing: -0.01em; }
.lp-hero-quote .quote-attr { color: #c3ccdf; font-size: 1rem; font-weight: 500; }

/* ---- Mid-page CTA spacing ---- */
.lp-mid-cta, .lp-results-more { text-align: center; margin-top: 34px; }
.lp-page .lp-programs-help { text-align: center; color: var(--body-ink); font-size: 1.05rem; margin-top: 28px; }
.lp-programs-help strong { color: var(--navy-800); }

/* ---- Real-results cards (3 curated) ---- */
.lp-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-result-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); margin: 0; }
.lp-result-stars { color: #f5a623; font-size: 1.05rem; letter-spacing: 2px; }
.lp-result-card p { color: var(--body-ink); font-size: 1.02rem; line-height: 1.6; margin: 12px 0 16px; }
.lp-result-card cite { color: var(--ink); font-weight: 700; font-style: normal; font-size: 0.95rem; }

/* ---- Why Our Method Works (compact 4-up, NOT tall cards) ---- */
.lp-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* Contained cards, matching the How-It-Works process-steps (Victor 2026-09-01):
   white card on the warm section so each method point reads as its own tile. */
.lp-method-item {
  text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 28px 22px 24px; box-shadow: var(--shadow-sm);
}
.lp-method-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(143, 174, 47, 0.14); color: var(--green-deep); font-size: 1.2rem; margin-bottom: 12px; }
.lp-method-item strong { display: block; color: var(--ink); font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.lp-page .lp-method-item p { color: var(--body-ink); font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* ---- Programs grid (Bronze / Silver-featured / Gold) ---- */
.lp-programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.lp-programs-grid .pricing-card { display: flex; flex-direction: column; }
.lp-programs-grid .pricing-card .btn-elite { margin-top: auto; }
.lp-program-best { color: var(--body-ink); font-size: 0.98rem; line-height: 1.55; margin: 10px 0 20px; }
.lp-program-featured { position: relative; border: 2px solid var(--green); box-shadow: 0 22px 50px rgba(15, 24, 54, 0.14); transform: translateY(-6px); }
.lp-program-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%); color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* Two-card variant (academic LP): center the pair instead of left-shoving it in
   a 3-col grid, group amount + "per hour" as one right-aligned unit, and drop the
   description to a clearly-secondary weight (Sol 5.6 CRO/UI pass 2026-09-02). */
.lp-programs-grid--pair { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; max-width: 768px; margin-left: auto; margin-right: auto; }
.lp-programs-grid--pair .lp-price-row { align-items: baseline; }
.lp-programs-grid--pair .lp-price-unit { display: inline-flex; align-items: baseline; gap: 6px; margin-left: auto; white-space: nowrap; }
.lp-programs-grid--pair .lp-price-unit .lp-price-per { margin-left: 0; }
.lp-programs-grid--pair .lp-program-best { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted-ink); }

/* Pricing-page callouts (Victor 2026-09-15). */
/* Spacing for the test-prep cross-link (navy card, reuses .testprep-callout).
   max-width matches .pricing-map so the two stacked cards align edge-to-edge. */
.pricing-crosslink { max-width: 900px; margin: 32px auto 0; }
/* A touch more room above the program cards so the "Most Popular" badge clears
   the section subtitle. */
.programs-roomy .lp-programs-grid { margin-top: 22px; }

/* The national in-person "map" card: a navy panel with a dotted-map texture and
   four clickable metro tiles that link to each region's pricing page. */
.pricing-map { position: relative; overflow: hidden; max-width: 900px; margin: 26px auto 0; padding: 30px 30px 28px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--navy-800), var(--navy-700)); box-shadow: var(--shadow-md); }
.pricing-map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.4px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; }
.pricing-map-head { position: relative; text-align: center; margin-bottom: 22px; }
.pricing-map-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-bright); margin-bottom: 8px; }
.elite-home .pricing-map-head h3 { color: #fff; font-size: 1.4rem; margin: 0 0 6px; }
.elite-home .pricing-map-head p { color: #d3dcec; font-size: 0.98rem; line-height: 1.55; margin: 0; max-width: 560px; margin-left: auto; margin-right: auto; }
.pricing-map-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pricing-map-metro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.pricing-map-metro:hover { transform: translateY(-4px); background: rgba(146, 183, 43, 0.14); border-color: var(--green); }
.pricing-map-pin { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, var(--green-deep), var(--green)); color: #fff; font-size: 1.05rem; margin-bottom: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.pricing-map-city { color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.pricing-map-state { color: #9fb0c8; font-size: 0.8rem; margin-top: 2px; }
.pricing-map-cta { margin-top: 10px; color: var(--green-bright); font-size: 0.8rem; font-weight: 600; }
.pricing-map-cta i { font-size: 0.7rem; margin-left: 3px; transition: transform 0.15s ease; }
.pricing-map-metro:hover .pricing-map-cta i { transform: translateX(3px); }
@media (max-width: 640px) { .pricing-map-grid { grid-template-columns: repeat(2, 1fr); } .pricing-map { padding: 24px 20px; } }

/* ---- LP confirmation (branded lp_thankyou) ---- */
.lp-thanks { padding: 72px 0 96px; background: var(--surface, #fff); }
.lp-thanks-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.lp-thanks-check { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 999px; background: rgba(146, 183, 43, 0.14); color: var(--green); font-size: 2.4rem; margin-bottom: 22px; }
.lp-page .lp-thanks-title { font-size: 2.3rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }
.lp-page .lp-thanks-lead { font-size: 1.12rem; line-height: 1.6; color: var(--body-ink); margin: 0 auto 30px; max-width: 540px; }
.lp-page .lp-thanks-lead strong { color: var(--navy-800); }
.lp-thanks-primary { max-width: 460px; margin: 0 auto 22px; }
.lp-thanks-primary .btn-elite { width: 100%; font-size: 1.08rem; padding: 16px 24px; }
.lp-page .lp-thanks-primary-note { font-size: 0.9rem; line-height: 1.5; color: var(--muted-ink); margin: 12px 0 0; }
.lp-page .lp-thanks-assist { font-size: 0.96rem; line-height: 1.55; color: var(--muted-ink); margin: 8px auto 0; max-width: 460px; }
.lp-thanks-assist a { color: var(--green-deep); font-weight: 700; }
@media (max-width: 600px) {
  .lp-thanks { padding: 48px 0 64px; }
  .lp-page .lp-thanks-title { font-size: 1.9rem; }
  .lp-page .lp-thanks-lead { font-size: 1.04rem; }
}

/* ---- Minimal footer ---- */
.lp-footer { background: var(--navy-950); padding: 34px 0; text-align: center; }
.lp-footer-trust { color: #c3ccdf; font-size: 0.95rem; margin: 0 0 10px; }
.lp-footer-links { margin: 0 0 8px; }
.lp-footer-links a { color: #fff; text-decoration: none; font-weight: 600; }
.lp-footer-links a:hover { color: var(--green-bright); }
.lp-footer .lp-dot { color: rgba(255, 255, 255, 0.35); margin: 0 8px; }
.lp-footer-copy { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin: 0; }

/* ---- Sticky mobile bottom bar (mobile only) ---- */
.lp-sticky-bar { display: none; }
@media (max-width: 767px) {
  /* Persistent utility bar — kept slim (~20-25% shorter than a panel), Victor
     2026-08-28: it's always-on infrastructure, not a section. */
  .lp-sticky-bar {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 9px;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 1300;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    background: rgba(20, 47, 66, 0.98);
    box-shadow: 0 -6px 24px rgba(6, 16, 38, 0.35);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  /* Retract the sticky bar once the closing CTA is on screen (consultant
     2026-09-01): at the very bottom it competes with the final CTA. JS toggles
     this class via an IntersectionObserver on .final-cta. */
  .lp-sticky-bar--hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }
  .lp-sticky-call, .lp-sticky-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; border-radius: 12px; font-weight: 700; font-size: 0.98rem; text-decoration: none;
  }
  .lp-sticky-call { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .lp-sticky-cta { background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 100%); color: #fff; }
  /* Lift the page bottom + the chat widget above the slimmer sticky bar. */
  .lp-body { padding-bottom: 58px; }
  /* Hide the site's default mobile call FAB on landing pages (sticky bar covers it). */
  .lp-body .mobile-call-fab { display: none !important; }
}

/* ---- Landing responsive ---- */
@media (max-width: 991px) {
  .lp-results-grid { grid-template-columns: 1fr; }
  .lp-programs-grid { grid-template-columns: 1fr; }
  .lp-program-featured { transform: none; }
  .lp-hero .hero-content { text-align: center; }
  .lp-hero-bullets { text-align: left; }
  /* "Why our method works" collapses to a 2-up on tablet, 1-up on phone. */
  .lp-method-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .lp-header-phone span { display: none; }
  .lp-form-card { padding: 26px 20px; }
  .lp-method-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Mobile: stack in the natural 12 -> 24 -> 48 ladder (DOM order); the featured
     24h card sits in the middle where "recommended" reads best (consultant
     2026-09-01, superseding the earlier 24-first order). */
  .lp-programs-grid { display: flex; flex-direction: column; }
  /* Top margin so the "Most Popular" badge (top:-14px) clears the card above it. */
  .lp-program-featured { margin-top: 22px; }
}

/* ==== MOBILE VERTICAL COMPRESSION (paid traffic is a mobile surface) ====
   Cut ~20-30% vertical throughout so the page scans fast. The sticky CTA is
   always visible, so in-page CTAs need not all be full-height. Victor
   2026-08-28. Scoped to .lp-page so nothing here leaks to other pages. */
@media (max-width: 767px) {
  /* Hero: tighter top/bottom, smaller body copy, disclaimers pushed lower +
     smaller so they read as disclaimers, not hierarchy. */
  .lp-hero { padding-top: 40px; padding-bottom: 48px; }
  .lp-hero-eyebrow { margin-bottom: 10px; }
  /* Tighter headline so it doesn't eat the first fold (Sol 5.6 2026-08-29). */
  .lp-hero .hero-content .title { font-size: 2.15rem; line-height: 1.08; }
  /* Smaller offer pill so it reads as one tidy unit, not cramped/mid-phrase. */
  .lp-hero .hero-content .lp-hero-offer { font-size: 0.9rem; padding: 7px 14px; margin-bottom: 12px; }
  /* LEFT-align the body on mobile (description / bullets / call). Centered
     multi-line text made each line start at a different left edge (the longest
     line furthest left) — reads ragged (Victor 2026-08-31). Eyebrow, headline,
     and offer pill stay centered. */
  .lp-page .lp-hero .hero-content .description { font-size: 1rem; margin-bottom: 14px !important; text-align: left; }
  .lp-hero-bullets { display: block; margin: 4px 0 14px; }
  .lp-hero-bullets li { font-size: 0.98rem; margin-bottom: 6px; }
  .lp-hero .hero-content .lp-hero-call { text-align: left; }
  .lp-hero .hero-content .lp-hero-footnote { font-size: 0.66rem; margin-top: 12px; text-align: left; }
  /* Sections: trim the generous vertical rhythm. */
  .lp-page .sec-pad { padding-top: 44px; padding-bottom: 44px; }
  .lp-proof { padding: 30px 0; }
  .lp-proof-cta { margin-top: 20px; }
  .lp-hero-quote { padding: 40px 0; }
  .lp-hero-quote blockquote { font-size: 1.05rem; margin: 12px auto 10px; }
  .lp-mid-cta, .lp-results-more { margin-top: 24px; }
  .lp-page .lp-programs-help { margin-top: 20px; font-size: 1rem; }
  /* Result + program cards: tighter padding + spacing. */
  .lp-result-card { padding: 22px 20px; }
  .lp-result-card p { margin: 10px 0 12px; font-size: 0.98rem; }
  .lp-programs-grid .pricing-card { padding: 24px 22px; }
  .lp-program-best { margin: 10px 0 16px; font-size: 0.95rem; }
  /* Mid/section CTA buttons don't need to be giant (sticky bar covers it). */
  .lp-mid-cta .btn-elite, .lp-proof-cta .btn-elite { height: 50px; line-height: 30px; }
}

/* =================================================================== */
/* Consultation booking + manage flow (idea #078, spec §2 / §6.5 / §6.8).
   Reuses the .lp-page LP design layer above (.lp-form-card, .lp-field,
   .lp-chip, .lp-mode, .lp-btn-block, .lp-progress). Only the pieces unique
   to the scheduling flow live here. <p> rules are scoped to .lp-page so they
   beat .elite-home p (0,1,1) — see the note near .lp-form-note.            */
/* =================================================================== */

/* Center the hero band on these single-column pages (no side form). */
.lp-consult-hero { padding-top: 56px; padding-bottom: 56px; }
.lp-consult-hero .hero-content .title { margin-left: auto; margin-right: auto; }
.lp-page .lp-consult-hero .hero-content .description { color: #d3dcec; font-size: 1.08rem; max-width: 620px; margin-left: auto; margin-right: auto; }
.lp-consult-hero .hero-content .description a { color: var(--green-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lp-consult-hero .hero-content .description strong { color: #fff; }

.lp-consult-card { max-width: 560px; margin: 0 auto; }
.lp-consult-choice { justify-content: center; text-align: center; }
.lp-page .lp-consult-optional { color: var(--muted-ink); font-weight: 400; }

/* Intake medium toggle: two columns (phone / zoom), not three. */
.lp-consult-medium { grid-template-columns: 1fr 1fr; }
/* On its own dedicated step, stack the two modes as roomy full-width rows so the
   single choice reads clearly (Victor 2026-09-01). */
.lp-consult-medium--stack { grid-template-columns: 1fr; gap: 12px; }
.lp-consult-medium--stack .lp-mode {
  flex-direction: row; justify-content: flex-start; gap: 14px; padding: 18px 20px; font-size: 1.05rem;
}
.lp-consult-medium--stack .lp-mode i { font-size: 1.35rem; }
/* Auto-advance note under the verify step (shown once both are confirmed). */
.lp-verify-autonote { text-align: center; color: var(--green-deep); font-weight: 700; margin-top: 12px; }

/* Slot picker ---------------------------------------------------------- */
.lp-page .lp-consult-loading { color: var(--muted-ink); font-size: 0.98rem; text-align: center; padding: 22px 0; }
.lp-consult-loading i { color: var(--green-deep); margin-right: 6px; }
.lp-page .lp-consult-times-label { margin-top: 22px; }

/* Horizontal day chips (scroll on mobile). */
.lp-day-nav { display: flex; align-items: center; gap: 8px; }
.lp-day-nav .lp-day-scroller { flex: 1 1 auto; min-width: 0; }
/* Prev/next arrows — desktop only (mobile uses native touch scroll). */
.lp-day-arrow {
  display: none; flex: 0 0 auto; width: 34px; height: 44px; align-self: flex-start;
  margin-top: 2px; border: 1px solid #e6eaf1; border-radius: 10px; background: #f8fafc;
  background-repeat: no-repeat; background-position: center; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lp-day-arrow:hover { border-color: var(--green); background-color: #fff; }
.lp-day-arrow--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath fill='none' stroke='%23214255' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 3 L3 8 L7 13'/%3E%3C/svg%3E"); }
.lp-day-arrow--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath fill='none' stroke='%23214255' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 3 L7 8 L3 13'/%3E%3C/svg%3E"); }
@media (min-width: 992px) {
  .lp-day-arrow { display: block; }
  .lp-day-arrow.is-hidden { display: none; }
}
.lp-day-scroller {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.lp-day-chip {
  flex: 0 0 auto; min-width: 116px; text-align: center;
  padding: 12px 14px; border-radius: 13px; border: 1.5px solid #e6eaf1;
  background: #f8fafc; color: var(--navy-800); font-weight: 700; font-size: 0.9rem;
  line-height: 1.25; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lp-day-chip:hover { border-color: var(--green); background: #fff; }
.lp-day-chip.is-selected { border-color: var(--green); background: rgba(143, 174, 47, 0.12); box-shadow: 0 0 0 3px rgba(143, 174, 47, 0.14); }

/* Time-slot grid. */
.lp-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-time-chip {
  padding: 12px 8px; border-radius: 12px; border: 1.5px solid #e6eaf1;
  background: #f8fafc; color: var(--navy-800); font-weight: 700; font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lp-time-chip:hover { border-color: var(--green); background: #fff; }
.lp-time-chip.is-selected { border-color: var(--green); background: rgba(143, 174, 47, 0.12); box-shadow: 0 0 0 3px rgba(143, 174, 47, 0.14); }

/* Picked-slot summary pill (verify + reschedule-confirm). */
.lp-page .lp-consult-picked {
  display: flex; align-items: center; gap: 9px;
  background: rgba(33, 80, 101, 0.07); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 15px; margin: 0 0 18px;
  color: var(--navy-800); font-weight: 700; font-size: 0.98rem;
}
.lp-consult-picked i { color: var(--green-deep); }
/* Plain variant (mode step): no card, centered, reads as "already done" not a
   button (Victor 2026-09-02). */
.lp-page .lp-consult-picked--plain {
  background: none; border: none; border-radius: 0; padding: 0;
  justify-content: center; margin: 0 0 4px;
}
/* Subtle divider between morning and afternoon/evening time slots. */
.lp-time-divider { grid-column: 1 / -1; height: 1px; background: #e6eaf1; margin: 5px 2px; }
/* Timezone note under the "Pick a Time" heading. */
.lp-page .lp-tz-note { font-size: 0.9rem; color: var(--muted-ink); margin-top: 2px; }

/* Verify (OTP) blocks --------------------------------------------------- */
.lp-verify-block {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px;
  margin-bottom: 14px; background: #fbfcfe;
}
.lp-verify-block.is-verified { background: rgba(143, 174, 47, 0.07); border-color: rgba(143, 174, 47, 0.4); }
.lp-verify-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lp-verify-label { color: var(--navy-800); font-weight: 700; font-size: 0.95rem; }
.lp-verify-label i { color: var(--green-deep); margin-right: 4px; }
.lp-verify-status { font-size: 0.85rem; font-weight: 700; color: var(--muted-ink); white-space: nowrap; }
.lp-verify-status.is-verified { color: var(--green-deep); }
.lp-verify-status.is-verified i { margin-right: 4px; }
/* Input + Verify button as ONE joined control (Victor 2026-09-01): the button was
   overflowing off the right on phones because the input (flex:1 with no min-width:0)
   refused to shrink below its intrinsic ~20-char width. min-width:0 lets it shrink;
   a shared border + zero gap + zero radius on the seam makes them read as one unit. */
.lp-verify-row {
  display: flex; align-items: stretch; margin-bottom: 8px;
  border: 1px solid #eef1f6; border-radius: 12px; overflow: hidden; background: #fff;
}
.lp-verify-row[hidden] { display: none; }
.lp-verify-row:focus-within { border-color: var(--color-secondery); box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); }
.lp-verify-row input {
  flex: 1 1 auto; min-width: 0; height: 46px; border: none; border-radius: 0;
  background: #fff; font-size: 1.05rem; letter-spacing: 0.14em; padding: 0 14px; color: var(--ink);
}
.lp-verify-row input:focus { outline: none; box-shadow: none; }
.lp-verify-row .lp-verify-confirm {
  flex: 0 0 auto; height: 46px; padding: 0 20px; border-radius: 0;
  /* No translateY lift here — on mobile the sticky :hover would leave the button
     looking detached after a tap. */
}
.lp-verify-row .lp-verify-confirm:hover { transform: none; box-shadow: none; }
.lp-verify-send {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--green-deep); font-weight: 700; font-size: 0.88rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.lp-verify-send:hover { color: var(--navy-800); }
.lp-verify-send[hidden] { display: none; }
.lp-verify-send[disabled] { color: var(--muted-ink); text-decoration: none; cursor: default; }
.lp-verify-send-primary { margin-top: 4px; }
/* .btn-elite sets display:inline-flex, which beats the UA [hidden] rule — force
   it so hiding the primary "Text me a code" button after sending actually works. */
.lp-verify-send-primary[hidden] { display: none; }

/* --- Booking flow polish (Sol 5.6 pass, 2026-09-01) --- */
/* Progress bar + explicit "Step X of 4" label. */
.lp-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lp-progress-row .lp-progress { flex: 1 1 auto; margin-bottom: 0; }
.lp-page .lp-progress-label { color: var(--muted-ink); font-size: 0.82rem; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }

/* Collapse the hero to a slim branded bar after step 1. */
.lp-consult-hero.is-compact { padding-top: 20px; padding-bottom: 20px; }

/* "We'll hold this time" reassurance under the picked slot. */
.lp-page .lp-consult-hold { margin: 6px 0 18px; color: var(--green-deep); font-weight: 600; text-align: center; }
/* Per-step Continue button (date/time + mode confirmation). */
.lp-step-continue { margin-top: 14px; }

/* Verify: the sent-confirmation line. */
.lp-page .lp-verify-sent { color: var(--body-ink); font-weight: 600; margin: 4px 0 10px; }
.lp-page .lp-verify-sent[hidden] { display: none; }

/* "Haven't taken the SAT yet" checkbox row. */
.lp-consult-check { display: flex; align-items: center; gap: 10px; margin: -2px 0 18px; cursor: pointer; font-size: 0.95rem; color: var(--body-ink); }
.lp-consult-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }

/* Larger, easier tap targets + readable helper text on mobile. */
.lp-day-chip { min-height: 46px; font-size: 0.95rem; }
.lp-time-chip { min-height: 46px; font-size: 1rem; }
.lp-consult-card .lp-form-sub { font-size: 1rem; }
.lp-consult-card .lp-step-help { font-size: 1rem; }

/* Review list (S4 confirm) --------------------------------------------- */
.lp-review-list { list-style: none; padding: 0; margin: 0 0 18px; }
.lp-review-list li {
  display: grid; grid-template-columns: 30px 84px 1fr; align-items: center; gap: 6px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.lp-review-list li:last-child { border-bottom: 0; }
.lp-review-ico { color: var(--green-deep); font-size: 0.95rem; }
.lp-review-k { color: var(--muted-ink); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.lp-review-v { color: var(--navy-800); font-weight: 700; font-size: 0.98rem; }

/* Thank-you / done ----------------------------------------------------- */
.lp-consult-done { text-align: center; }
.lp-consult-done-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(143, 174, 47, 0.14); color: var(--green-deep);
  font-size: 2rem; margin-bottom: 14px;
}
.lp-consult-done-icon.is-neutral { background: rgba(33, 80, 101, 0.09); color: var(--navy-700); }
.lp-page .lp-consult-done-when { color: var(--navy-800); font-weight: 800; font-size: 1.25rem; margin: 4px 0 10px; }
.lp-consult-done-detail {
  display: block; text-align: left; word-break: break-word;
  background: rgba(33, 80, 101, 0.07); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; margin: 0 auto 14px; max-width: 440px;
  color: var(--navy-800); font-weight: 600; font-size: 0.96rem;
}
.lp-consult-done-detail i { color: var(--green-deep); margin-right: 8px; }
.lp-consult-done-detail a { color: var(--green-deep); text-decoration: underline; word-break: break-all; }
.lp-consult-done-sub { display: block; margin-top: 6px; font-weight: 500; font-size: 0.85rem; color: var(--muted-ink); }
.lp-page .lp-consult-done-note { text-align: center; max-width: 440px; margin: 0 auto 22px; }
.lp-consult-done .lp-btn-block { max-width: 360px; margin: 0 auto; }
.lp-consult-done-manage {
  display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.9rem;
  color: var(--muted-ink); text-decoration: underline;
}

/* Browse-first funnel (spec §0b / D10) ------------------------------------ */
.lp-consult-tests .lp-chip { justify-content: center; }
/* Commit-step OTP block, revealed after "Text me a code". */
.lp-verify-after { margin-top: 14px; }
.lp-verify-after .lp-verify-sent { margin: 0 0 10px; font-weight: 600; color: var(--navy-800); }
/* Timezone control above the slot grid (spec §0b, Victor 2026-09-20). */
.lp-consult-tz {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin: 0 0 12px; font-size: 0.85rem; color: var(--muted-ink);
}
.lp-consult-tz-label strong { color: var(--navy-800); }
.lp-consult-tz-change {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--green-deep); font-weight: 700; font-size: 0.85rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.lp-consult-tz-change:hover { color: var(--green); }
.lp-consult-tz-menu {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 0 0 14px; padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(33, 80, 101, 0.04);
}
/* The class's display:grid would otherwise override the [hidden] attribute, so
   the menu must stay collapsed until "Change" is clicked (Victor 2026-09-20). */
.lp-consult-tz-menu[hidden] { display: none; }
.lp-consult-tz-opt {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 9px 10px; font-size: 0.85rem; font-weight: 600; color: var(--navy-800);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.lp-consult-tz-opt:hover { border-color: var(--green); background: #f6faec; }
/* Anti-spam explainer above the "Text me a code" button (Victor 2026-09-20). */
.lp-consult-spamnote {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 4px 0 12px; color: var(--muted-ink);
  font-size: 0.85rem; line-height: 1.45; text-align: left;
}
.lp-consult-spamnote i { color: var(--green-deep); margin-top: 2px; flex: 0 0 auto; }
/* Soft-landing link below the funnel (spec D10.5). */
.lp-consult-softlink { margin: 14px 0 0; text-align: center; font-size: 0.92rem; }
.lp-consult-softlink a.lp-consult-soft-cta { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.lp-consult-softlink a.lp-consult-soft-cta:hover { text-decoration: underline; }

/* Post-booking account card (idea #078 ext) ---------------------------- */
.lp-account-wrap {
  margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line);
  max-width: 440px; margin-left: auto; margin-right: auto; text-align: left;
}
.lp-account-card { text-align: left; }
/* Compact left-aligned header: small icon inline beside the heading (was a
   large centered stack that ate vertical space — Sol 5.6, Victor 2026-09-03). */
.lp-account-head {
  display: flex; align-items: center; gap: 11px;
  text-align: left; margin-bottom: 12px;
}
.lp-account-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(33, 80, 101, 0.09); color: var(--navy-700);
  font-size: 0.98rem; margin: 0;
}
.lp-account-head .lp-form-title { font-size: 1.22rem; line-height: 1.2; margin: 0; }
/* Benefit list: scannable, left-aligned, tighter than the old paragraph.
   Checks = account benefits; arrow = the optional self-serve next step. */
.lp-account-benefits {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.lp-account-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; line-height: 1.4; color: var(--navy-700);
}
.lp-account-benefits li i {
  color: var(--green-deep); font-size: 0.95rem; margin-top: 3px; flex-shrink: 0;
}
.lp-account-benefits .lp-benefit-next { color: var(--muted-ink); }
.lp-account-benefits .lp-benefit-next i { color: var(--navy-700); }
.lp-account-google { margin: 0 auto 4px; }
.lp-account-google-btn { display: flex; justify-content: center; min-height: 44px; }
/* "or" divider with a rule on each side (was a floating centered word). */
.lp-account-or {
  display: flex; align-items: center; gap: 12px;
  margin: 13px 0; color: var(--muted-ink); font-size: 0.85rem;
}
.lp-account-or::before, .lp-account-or::after {
  content: ""; height: 1px; flex: 1; background: var(--line);
}
/* "Continue with email" — outline button that mirrors the Google button:
   same max width (GSI caps at 400px) + centered, icon pinned far-left with the
   label centered in the remaining space (like Google's logo_alignment:left). */
.lp-account-email-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 400px; margin: 0 auto;
  min-height: 44px; padding: 10px 40px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--navy-700); font-size: 0.98rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.lp-account-email-btn:hover { background: rgba(33, 80, 101, 0.05); border-color: var(--navy-700); }
.lp-account-email-btn i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 1.05rem; color: var(--muted-ink);
}
/* "Use Google instead" — quiet back link under the password fields. */
.lp-account-back {
  display: block; width: 100%; text-align: center; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--muted-ink); font-size: 0.85rem;
}
.lp-account-back:hover { color: var(--navy-700); text-decoration: underline; }
.lp-account-verify .lp-btn-block, .lp-account-setpw .lp-btn-block { margin-top: 4px; }
.lp-account-code-row { margin-top: 12px; }
.lp-account-verified-note {
  color: var(--green-deep); font-weight: 700; font-size: 0.95rem; margin: 4px 0 12px;
}
.lp-account-verified-note i { margin-right: 6px; }
.lp-account-msg { margin-top: 8px; font-size: 0.9rem; color: #b91c1c; }
.lp-account-signin {
  text-align: center; margin-top: 16px; font-size: 0.9rem; color: var(--muted-ink);
}
.lp-account-signin a { color: var(--green-deep); text-decoration: underline; }

/* Straight-to-Customer finish-setup fields (who-for + student + zip + password) */
.lp-account-q { display: block; font-weight: 700; color: var(--navy-800); margin-bottom: 8px; }
.lp-account-loginnote { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted-ink); }
.lp-account-fields { margin: 4px 0 16px; text-align: left; }
.lp-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.lp-who {
  border: 1.5px solid var(--line); background: #fbfcfa; border-radius: 10px;
  padding: 12px 10px; font-weight: 600; color: var(--navy-800); cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.lp-who:hover { border-color: var(--green); background: #fff; }
/* Selected state made more obvious (Sol 5.6 2026-09-13): a clear light-green fill
   + a solid green-deep outline + heavier text, so the default "My child" choice
   reads as chosen at a glance. */
.lp-who.is-selected {
  border-color: var(--green-deep); background: #eef5db;
  color: var(--navy-800); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--green-deep);
}
.lp-student-fields { margin-bottom: 4px; }

/* Password field: lock icon (left) + show/hide eye toggle (right), both inside
   the input. These are public-site classes — the /app login uses its own
   (login-input-wrap); don't reuse those here, they aren't in elite.css. */
.lp-pw-wrap { position: relative; }
.lp-pw-wrap input { width: 100%; padding-left: 40px; padding-right: 46px; }
.lp-pw-lock {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted-ink); font-size: 0.95rem; pointer-events: none;
}
.lp-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted-ink); line-height: 1;
  /* >=44px tap target for accessibility, even though the eye glyph is small. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}
.lp-pw-toggle:hover { color: var(--navy-700); }

/* Manage-page actions -------------------------------------------------- */
.lp-consult-actions { margin-top: 6px; }
.lp-consult-cancel-link, .lp-consult-keep-link {
  display: block; width: 100%; text-align: center; margin-top: 14px;
  background: none; border: none; cursor: pointer;
  color: var(--muted-ink); font-weight: 600; font-size: 0.92rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.lp-consult-cancel-link:hover, .lp-consult-keep-link:hover { color: #c0392b; }
.lp-consult-keep-link:hover { color: var(--navy-800); }
.lp-page .lp-consult-locked { text-align: center; }
.lp-consult-reschedule-confirm { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 575px) {
  .lp-consult-card { padding: 24px 18px; }
  .lp-time-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-consult-hero { padding-top: 40px; padding-bottom: 40px; }
  .lp-review-list li { grid-template-columns: 26px 72px 1fr; }
}

/* ===== LP instant-booking results page + expandable booking cards =====
   (docs/lp-instant-booking-spec.md N3 rebuild). The cards are .tutor-card--lite,
   so they inherit the LP card look + the 3-col grid; these rules add the
   Book/More-info actions and the expand-in-place detail. */
.lp-results-hero { padding: 40px 0 52px; }
.lp-results-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
/* Scoped under .lp-page (0,2,0) to beat .elite-home p (0,1,1) — these sit on the
   DARK hero and must stay light (the LP-principles specificity trap). */
.lp-page .lp-results-sub { color: #d3dcec; font-size: 1.05rem; line-height: 1.5; margin-top: 10px; }
.lp-page .lp-results-sub strong { color: var(--green-bright); }
.lp-page .lp-results-restart { margin-top: 14px; }
.lp-page .lp-results-restart a { color: #cdd6e6; font-size: 0.92rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(205, 214, 230, 0.4); padding-bottom: 1px; }
.lp-page .lp-results-restart a:hover { color: #fff; border-bottom-color: #fff; }
.lp-results-grid { margin-top: 8px; }
.lp-results-more[hidden] { display: none; }
.lp-results-morewrap { text-align: center; margin-top: 24px; }
.lp-page .lp-results-help { text-align: center; color: #aeb9cf; font-size: 0.95rem; margin-top: 22px; }
.lp-page .lp-results-help a { color: var(--green-bright); font-weight: 700; }
/* No-match card: a white card on the navy hero so the message + CTA read as one
   deliberate block, not loose floating text (Victor 2026-09-08). Dark text on
   white; the phone link is brand-navy. The green-link rule is scoped to <p> links
   ONLY so it can't paint the Start-over BUTTON green-on-green (the old bug). */
.lp-page .lp-results-empty {
  max-width: 480px; margin: 6px auto 0; padding: 34px 30px 32px;
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg);
  text-align: center; color: var(--body-ink);
}
.lp-page .lp-results-empty p { color: var(--body-ink); max-width: none; margin: 0 auto; line-height: 1.6; }
.lp-page .lp-results-empty p a { color: var(--navy-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lp-results-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--cool-tint); color: var(--navy-700); font-size: 1.35rem; margin-bottom: 15px; }
.lp-results-empty-title { font-size: 1.32rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; line-height: 1.25; }
.lp-page .lp-results-empty .btn-elite { margin-top: 22px; color: #16240a; }

/* Hidden extra results, revealed 6-at-a-time by "See more". !important beats
   .tutor-card's own display, which would otherwise win over a plain [hidden]. */
.tutor-card.lp-card-hidden { display: none !important; }
/* Card actions + expandable detail (extends .tutor-card--lite). Both actions are
   full-width .btn-elite so Book (primary) + More info (secondary) match in size. */
.tutor-card--booking .tutor-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; width: 100%; }
.tutor-card--booking .tutor-card-actions .btn-elite { width: 100%; }
.tutor-card--booking .tutor-card-actions .btn-elite-secondary i { font-size: 0.72rem; }
/* Secondary button — outline via inset shadow (no border, so height matches the
   primary exactly). Teal = the "tap me / navigate" action color. */
.btn-elite-secondary { color: var(--color-secondery); background: #fff; box-shadow: inset 0 0 0 2px var(--color-secondery); }
.btn-elite-secondary:hover { color: var(--color-secondery); transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--color-secondery), 0 10px 22px rgba(33, 80, 101, 0.16); }
.tutor-card-more { width: 100%; text-align: left; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f6; }
.tutor-card-more[hidden] { display: none; }
.tutor-card-bio-full { font-size: 0.92rem; line-height: 1.5; color: var(--body-ink); white-space: pre-wrap; margin: 0; }
/* A REAL bio reads as a quote from the tutor; the generic fallback stays plain
   (Victor 2026-09-08). Typographic quotes via ::before/::after so the stored bio
   text is untouched. Upright (no italic) per Victor. */
.tutor-card-bio-full--quoted::before { content: "\201C"; }
.tutor-card-bio-full--quoted::after { content: "\201D"; }
.tutor-card-more-subjects { margin-top: 10px; }
.tutor-card-more-catgroup { margin-top: 9px; }
.tutor-card-more-catgroup:first-child { margin-top: 0; }
.tutor-card-more-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tutor-card-more-label { display: block; width: 100%; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-ink); font-weight: 700; margin-bottom: 2px; }
.tutor-subject-chip--sm { font-size: 0.72rem; padding: 2px 7px; }
.tutor-card--booking.is-expanded { box-shadow: 0 12px 30px rgba(33, 80, 101, 0.14); }

/* Gradient-initials avatar for pic-less tutors on the LP (Victor 2026-09-08) —
   the state-of-the-art "no photo yet" placeholder (Linear/Vercel/Notion): the
   person's initials on an on-brand navy→teal gradient disc. Honest (nobody reads
   it as a photo), personal (their real initials), premium. Four deterministic
   brand-family tints so a wall of pic-less cards isn't monochrome. A soft radial
   highlight (top-left) gives the flat gradient depth. */
.tutor-card-avatar { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tutor-card-avatar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 55%); pointer-events: none; }
.tutor-card-avatar-initials { position: relative; z-index: 1; font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 700; letter-spacing: 0.04em; color: #fff; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.16); }
.tutor-card-avatar--v0 { background: linear-gradient(145deg, #2d6378 0%, #1c4356 100%); }
.tutor-card-avatar--v1 { background: linear-gradient(145deg, #327a86 0%, #215065 100%); }
.tutor-card-avatar--v2 { background: linear-gradient(145deg, #3f7f9c 0%, #274f6b 100%); }
.tutor-card-avatar--v3 { background: linear-gradient(145deg, #5c8a6d 0%, #235063 100%); }

/* ===== LP instant-booking overlay (modal) — docs/lp-instant-booking-spec.md ===== */
.lp-book-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lp-book-modal[hidden] { display: none; }
.lp-book-backdrop { position: absolute; inset: 0; background: rgba(11, 22, 34, 0.6); }
.lp-book-panel { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 20px; padding: 26px 24px 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.lp-book-x { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--muted-ink); cursor: pointer; padding: 4px 8px; }
.lp-book-title { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.lp-book-sub { font-size: 0.92rem; color: var(--muted-ink); line-height: 1.45; margin: 0 0 16px; }
.lp-book-back { background: none; border: none; color: var(--color-secondery); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 0 0 10px; }
.lp-book-choices { display: flex; gap: 10px; }
.lp-book-choice { flex: 1; padding: 18px 10px; border: 2px solid #e7ebf1; border-radius: 14px; background: #fff; font-weight: 700; color: var(--color-secondery); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.95rem; }
.lp-book-choice i { font-size: 1.3rem; }
.lp-book-choice:hover { border-color: var(--color-secondery); }
.lp-book-locs { display: flex; flex-direction: column; gap: 8px; }
.lp-book-loc { text-align: left; padding: 12px 14px; border: 1.5px solid #e7ebf1; border-radius: 12px; background: #fff; cursor: pointer; font-weight: 600; color: var(--ink); }
.lp-book-loc:hover { border-color: var(--color-secondery); }
.lp-book-loc-city { color: var(--muted-ink); font-weight: 500; }
.lp-book-loc-mi { float: right; color: var(--green-deep); font-size: 0.82rem; font-weight: 700; }
/* Airline/Calendly-style time picker (Victor 2026-09-08): swipe a horizontal day
   strip, then that day's times list vertically, grouped by part of day — so a
   tutor with lots of openings never floods the screen. */
/* Day strip flanked by prev/next arrows so DESKTOP (no swipe) can navigate days
   too; arrows step the selected day + recenter it (Victor 2026-09-08). */
.lp-book-daynav { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.lp-book-dayarrow { flex: 0 0 auto; width: 30px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e7ebf1; border-radius: 10px; background: #fff; color: var(--color-secondery); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease; }
.lp-book-dayarrow:hover { border-color: var(--color-secondery); background: var(--cool-tint); }
.lp-book-dayarrow:disabled { opacity: 0.32; cursor: default; border-color: #e7ebf1; background: #fff; }
.lp-book-daystrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; min-width: 0; flex: 1 1 auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.lp-book-daychip { flex: 0 0 auto; min-width: 72px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 12px; border: 1.5px solid #e7ebf1; border-radius: 13px; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.lp-book-daychip .wk { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-ink); font-weight: 700; }
.lp-book-daychip .md { font-size: 0.98rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.lp-book-daychip:hover { border-color: var(--color-secondery); }
.lp-book-daychip.is-on { border-color: var(--color-secondery); background: var(--cool-tint); box-shadow: inset 0 0 0 1px var(--color-secondery); }
.lp-book-daychip.is-on .wk { color: var(--color-secondery); }
.lp-book-times { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; padding-right: 2px; }
.lp-book-timegroup-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-ink); font-weight: 700; margin: 8px 2px 0; }
.lp-book-timegroup-label:first-child { margin-top: 0; }
.lp-book-time { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 1.5px solid #e7ebf1; border-radius: 12px; background: #fff; font-size: 0.98rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.lp-book-time .arw { color: var(--green-deep); font-weight: 700; opacity: 0; transition: opacity 0.15s ease; }
.lp-book-time:hover { border-color: var(--color-secondery); background: var(--cool-tint); }
.lp-book-time:hover .arw { opacity: 1; }
.lp-book-form { display: flex; flex-direction: column; gap: 10px; }
.lp-book-row { display: flex; gap: 8px; }
/* Text inputs only — the :not([type=checkbox]) is load-bearing: the consent
   checkbox also carries data-f, and without this it got sized as a full input. */
.lp-book-form input[data-f]:not([type="checkbox"]), .lp-book-code { width: 100%; height: 48px; border: 1px solid #e0e5ee; border-radius: 12px; padding: 0 14px; font-size: 1rem; background: #f8fafc; color: var(--ink); }
.lp-book-form input[data-f]:not([type="checkbox"]):focus, .lp-book-code:focus { outline: none; border-color: var(--color-secondery); background: #fff; box-shadow: 0 0 0 3px rgba(33, 80, 101, 0.12); }
/* The verify step renders the code input + button straight into the modal body
   (no .lp-book-form flex gap), so give the standalone input breathing room. */
.lp-book-code { margin-bottom: 14px; text-align: center; letter-spacing: 0.3em; font-size: 1.3rem; }
.lp-book-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--muted-ink); line-height: 1.4; }
.lp-book-consent input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; }
.lp-book-consent span { flex: 1 1 auto; min-width: 0; }
.lp-book-err { color: #c0392b; font-size: 0.85rem; }
.lp-book-err[hidden] { display: none; }
.lp-book-cta { width: 100%; margin-top: 4px; }
.lp-book-loading { color: var(--muted-ink); padding: 20px 0; text-align: center; }
.lp-book-done { text-align: center; }
.lp-book-done-emoji { font-size: 2.2rem; }
.lp-book-foot { text-align: center; color: var(--muted-ink); font-size: 0.8rem; margin: 14px 0 0; }
.lp-book-foot i { color: var(--green-deep); }

/* SEO funnel Phase 1 (docs/seo-instant-booking-spec.md): the "prefer to talk"
   line under the hero funnel form on SD subject pages. The subject hero is navy
   (--navy-950 gradient), so mirror .lp-hero-call's light-on-navy treatment.
   SCOPED under .hero-section (0,2,0) on purpose — a bare .hero-callback-note
   (0,1,0) loses to `.elite-home p` (0,1,1) and renders dark --body-ink on navy
   (invisible); the descendant scope beats it. */
.hero-section .hero-callback-note { margin: 0.85rem 0 0; font-size: 0.9rem; text-align: center; color: #eef2f8; }
.hero-section .hero-callback-note a { color: #cfe86b; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* SEO subject page: "What We Cover" as topic-group cards (Sol 5.6 redesign
   2026-09-10) — plain text-link lists, not a pill cloud. Responsive card grid;
   desktop always-expanded (CSS force-open), mobile collapsible <details>. All
   links stay in the server-rendered HTML (crawlable) even when collapsed. */
.topic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; max-width: 1120px; margin: 0 auto; }
.topic-card { border: 1px solid var(--line, #e6eaf1); border-radius: 14px; background: var(--warm-gray, #f8fafc); padding: 18px 20px; }
.topic-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--body-ink); cursor: pointer; list-style: none; }
.topic-card-head::-webkit-details-marker { display: none; }
.topic-card-caret { color: var(--muted-ink); font-size: 0.85rem; transition: transform 0.2s ease; }
details.topic-card[open] .topic-card-caret { transform: rotate(180deg); }
.topic-card-links { columns: 2; column-gap: 18px; margin-top: 14px; }
.topic-card-links > * { display: block; break-inside: avoid; padding: 5px 0; font-size: 0.9rem; line-height: 1.35; color: var(--muted-ink); }
.topic-card-links a.topic-link--guide { color: #1e3a8a; text-decoration: none; }
.topic-card-links a.topic-link--guide:hover { color: #2563eb; text-decoration: underline; }
@media (min-width: 768px) {
  /* Desktop: cards always expanded; the summary is a plain heading, not a toggle. */
  .topic-card > .topic-card-links { display: block !important; }
  .topic-card-caret { display: none; }
  .topic-card-head { cursor: default; }
}
@media (max-width: 767px) { .topic-card-links { columns: 1; } }

/* SEO subject page: "Nearby" as a compact location directory (Sol 5.6 redesign)
   — one bordered card, pin + intro on the left, plain city text links (multi-col)
   on the right; replaces the centered pin-chip cloud. */
.location-directory { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 28px; align-items: start; border: 1px solid var(--line, #e6eaf1); border-radius: 16px; background: #fff; padding: 28px 32px; max-width: 1080px; margin: 0 auto; }
.location-dir-intro h2 { font-size: 1.4rem; margin: 10px 0 6px; }
.location-dir-intro p { color: var(--muted-ink); font-size: 0.95rem; margin: 0; }
.location-dir-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--warm-gray, #f1f5f9); color: var(--green-deep); font-size: 1.2rem; }
.location-dir-links { columns: 3; column-gap: 20px; }
.location-dir-links a { display: block; break-inside: avoid; padding: 6px 0; font-size: 0.92rem; color: var(--body-ink); text-decoration: none; }
.location-dir-links a:hover { color: var(--green-deep); text-decoration: underline; }
@media (max-width: 767px) {
  .location-directory { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .location-dir-links { columns: 2; }
}

/* Local contact card (Sol 5.6 redesign 2026-09-11): local contact details on the
   left + an inset, light-green social-proof panel on the right that lets a
   prospective visitor READ our Google reviews. Mirrors the .location-directory
   card language (border, radius, shadow, icon tiles). */
.contact-card {
  display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: stretch;
  border: 1px solid var(--line, #e7eaf0); border-radius: var(--radius-md, 16px);
  background: #fff; padding: 32px 34px; max-width: 1080px; margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.contact-card--solo { grid-template-columns: 1fr; max-width: 720px; }
.contact-card-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.contact-card-head-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: var(--warm-gray, #f6f6f2); color: var(--green-deep); font-size: 1.2rem;
}
.contact-card-head h2 { font-size: 1.4rem; margin: 8px 0 6px; }
.contact-card-head p { color: var(--muted-ink); font-size: 0.95rem; margin: 0; }
.contact-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.contact-detail { display: flex; gap: 12px; align-items: flex-start; }
.contact-detail--wide { grid-column: 1 / -1; }
.contact-detail-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  background: #f5f8ee; color: var(--green-deep); font-size: 0.95rem;
}
.contact-detail-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-detail-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; }
.contact-detail-body a, .contact-detail-body span:not(.contact-detail-label) { color: var(--ink); font-weight: 600; font-size: 0.98rem; line-height: 1.4; word-break: break-word; }
.contact-detail-body a { text-decoration: none; }
.contact-detail-body a:hover { color: var(--green-deep); }
.contact-detail-body a[target="_blank"] { color: var(--green-deep); font-size: 0.9rem; margin-top: 2px; }

.contact-card-reviews {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #f2f6e8; border-radius: var(--radius-sm, 12px); padding: 24px;
}
.contact-card--solo .contact-card-reviews { margin-top: 26px; }
.contact-reviews-stars { color: #e5a500; font-size: 1.05rem; letter-spacing: 2px; margin: 6px 0 10px; }
.contact-reviews-rating { color: var(--ink); font-weight: 700; font-size: 1.15rem; margin: 0; }
.contact-reviews-count { color: var(--muted-ink); font-size: 0.85rem; margin: 2px 0 0; }
.contact-reviews-body { color: var(--body-ink); font-size: 0.95rem; line-height: 1.55; margin: 12px 0 14px; }
.contact-reviews-link { color: var(--green-deep); font-weight: 700; font-size: 0.95rem; text-decoration: none; margin-top: auto; }
.contact-reviews-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .contact-card { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .contact-card-details { grid-template-columns: 1fr; gap: 16px; }
}

/* Content-freshness stamp under the FAQ (idea #088 GEO). Subtle, muted, matches
   the "Updated <Month Year>" a page also exposes as dateModified in schema. */
.faq-updated { margin: 22px 0 0; text-align: center; font-size: 0.82rem; color: var(--muted-ink); }

/* TCPA consent checkbox on the consultation registration form (test-prep pages),
   mirroring the paid LP's .lp-consent. Small, left-aligned, checkbox top-aligned. */
.reg-consent { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 6px; font-size: 0.8rem; line-height: 1.45; color: var(--muted-ink); cursor: pointer; text-align: left; }
.reg-consent input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* First + last name on ONE row in the consultation form. Explicit flexbox because
   these inputs are children of the <form>, not a Bootstrap .row (see the template
   note), so col-* would stack. */
.reg-name-row { display: flex; gap: 12px; }
.reg-name-row .input-wrap { flex: 1 1 0; min-width: 0; }

/* Test picker (registration-for-test-prep consultation form) — step 1: choose
   SAT/ACT/PSAT, which reveals the rest of the form. Buttons mirror the who-for
   toggle: light-green filled + green-deep outline when selected. */
.reg-test-picker-label { font-weight: 700; color: var(--navy-800); margin: 0 0 10px; font-size: 0.98rem; }
.reg-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reg-test-btn {
  border: 1.5px solid var(--line); background: #fbfcfa; border-radius: 11px;
  padding: 14px 8px; font-weight: 700; color: var(--navy-800); cursor: pointer;
  font-size: 1rem; transition: border-color .12s, background .12s, box-shadow .12s;
}
.reg-test-btn:hover { border-color: var(--green); background: #fff; }
.reg-test-btn.is-selected { border-color: var(--green-deep); background: #eef5db; box-shadow: inset 0 0 0 1px var(--green-deep); }

/* Compact consultation form (test-prep) — tighter than the default lead form so it
   matches the paid LP's density: shorter inputs, smaller head, less row spacing. */
.register-form-wrap.reg-form--compact .register-form-head { margin-bottom: 12px; }
.register-form-wrap.reg-form--compact .register-form-head h5 { font-size: 1.4rem; }
.hero-section .register-form-wrap.reg-form--compact .register-form-control { height: 48px; }
.register-form-wrap.reg-form--compact .form-wrap [class*="col-"] { margin-bottom: 12px !important; }
.register-form-wrap.reg-form--compact .form-wrap .input-wrap { margin-bottom: 0; }

/* Claim footnote in the navy hero (the "300+ points*" disclaimer on the SAT/ACT
   consultation pages). Muted light so it reads as fine print on the dark hero. */
.hero-section .hero-content .hero-claim-footnote { margin: 12px 0 0; font-size: 0.72rem; line-height: 1.45; color: #9fb0c9; }
.hero-section .hero-content .hero-claim-footnote .claim-star { color: var(--green-bright); font-weight: 700; }

/* Test-prep consultation pages (base.html → .elite-home, NOT .lp-page) reuse the
   paid LP's trust line, offer-pill spans, and programs bonus/finance/method copy.
   Several of those LP rules are .lp-page-scoped, so mirror the handful needed on
   .elite-home + add the SEO-hero offer-span styling (Victor 2026-09-12). */
/* Scoped under .register-form-head so it beats `.elite-home p` (0,1,1) — a bare
   .reg-form-trust (0,1,0) loses and renders at the 1.06rem body size. */
.register-form-head .reg-form-trust { color: var(--muted-ink); font-size: 0.82rem; font-weight: 500; text-align: center; margin: 14px 0 0; line-height: 1.4; }
.register-form-head .reg-form-trust i { color: #f5a623; margin-right: 4px; }
.hero-section .hero-content .lp-hero-offer .lp-offer-txt { white-space: nowrap; }
.hero-section .hero-content .lp-hero-offer .lp-offer-plus { opacity: 0.8; font-weight: 700; }
.elite-home .lp-programs-bonus { color: var(--green-deep); font-size: 0.92rem; font-weight: 600; line-height: 1.5; max-width: 640px; margin: 22px auto 0; text-align: center; }
.elite-home .lp-programs-bonus i { margin-right: 6px; }
.elite-home .lp-programs-bonus .lp-programs-bonus-note { color: var(--muted-ink); font-weight: 500; font-size: 0.85rem; }
.elite-home .lp-programs-finance { font-size: 0.7rem; color: var(--muted-ink); line-height: 1.5; max-width: 660px; margin: 14px auto 0; text-align: center; }
.elite-home .lp-method-item p { color: var(--body-ink); font-size: 0.95rem; line-height: 1.5; margin: 0; }
.elite-home .lp-programs-help { text-align: center; color: var(--body-ink); font-size: 1.05rem; }

/* Regional-home: the contact card sits below the cities directory in one section. */
.home-contact-card { margin-top: 28px; }
/* Subject topic-cards folded under the featured subject cards (one Subjects section). */
.home-subject-topics { margin-top: 44px; }

/* Regional-home "One-on-One Tutoring in <Region>" section (Sol 5.6 restructure):
   three scannable link blocks + proof callout + a collapsible for the long tail. */
.home-about-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.home-about-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 26px; box-shadow: var(--shadow-sm); }
.home-about-block h3 { font-size: 1.2rem; color: var(--ink); margin: 14px 0 8px; }
.elite-home .home-about-block > p { color: var(--body-ink); font-size: 0.97rem; line-height: 1.55; margin: 0 0 14px; }
.home-about-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.home-about-links a { color: var(--green-deep); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.home-about-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-about-proof { margin: 32px 0 0; text-align: center; color: var(--muted-ink); font-size: 0.95rem; }
.home-about-proof i { color: #e5a500; margin-right: 4px; }
.home-about-cta { margin: 30px 0 0; text-align: center; }
@media (max-width: 900px) { .home-about-blocks { grid-template-columns: 1fr; } }

/* ---- Our Philosophy section (regional home; Victor + Sol 2026-09-13) ----
   Image-led two-column: image left / copy right on desktop, copy-first on mobile
   (Bootstrap order utilities). Paragraph + callout rules are scoped under
   .philosophy-elite (>= 0,2,1) to beat the .elite-home p base rule (0,1,1). */
.philosophy-elite .philosophy-img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.philosophy-body h2 { margin: 6px 0 18px; }
.elite-home .philosophy-body p.philosophy-p { color: var(--body-ink); font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; }
.philosophy-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--cool-tint);
  border-left: 4px solid var(--green-deep);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 24px 0 22px;
}
.philosophy-callout-icon { flex: none; color: var(--green-deep); font-size: 1.25rem; margin-top: 2px; }
.elite-home .philosophy-callout p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.philosophy-cta { margin: 0; }
@media (max-width: 991px) {
  .philosophy-elite .philosophy-media-col { margin-top: 26px; }
  .philosophy-elite .philosophy-img { min-height: 260px; max-height: 340px; }
}

/* Funnel-home hero title: LP-sized, not the huge homepage H1 (which wrapped to a
   word or two per line beside the form). Placed last so it beats the base
   `.hero-section .hero-content .title` (same 0,3,0 specificity) — Victor 2026-09-12. */
.hero-section .hero-content .title--funnel { font-size: clamp(2rem, 3.2vw, 2.65rem); line-height: 1.14; }

/* SEO subject page intro: more breathing room between paragraphs (Victor
   2026-09-10). Scoped .elite-home .card-data-wrap (0,2,1) to beat the base
   .card-data-wrap p rule. */
.elite-home .card-data-wrap p { margin-bottom: 1.35rem; }
.elite-home .card-data-wrap p:last-of-type { margin-bottom: 0; }

/* "First hour free" offer pill on the SEO subject hero (Victor 2026-09-11). The
   .lp-hero-offer base rule is .lp-hero-scoped, so mirror it for .hero-section
   heroes (subject pages). Left-aligns on desktop (hero-content is text-lg-start),
   centers on mobile — same as the eyebrow/bullets around it. */
.hero-section .hero-content .lp-hero-offer { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; background: rgba(168,198,62,0.16); color: var(--green-bright); font-weight: 800; font-size: 1.02rem; line-height: 1.25; padding: 8px 15px; border-radius: 999px; margin: 2px 0 14px; }
.hero-section .hero-content .lp-hero-offer i { color: var(--green-bright); }

/* Instant-booking "You're Booked!" confirmation details box (Victor 2026-09-11). */
.lp-book-details { text-align: left; margin: 16px 0 4px; border: 1px solid var(--line, #e6eaf1); border-radius: 12px; overflow: hidden; background: var(--warm-gray, #f8fafc); }
.lp-book-detail { display: flex; gap: 12px; padding: 10px 14px; }
.lp-book-detail + .lp-book-detail { border-top: 1px solid var(--line, #e6eaf1); }
.lp-book-detail-label { flex: 0 0 76px; color: var(--muted-ink); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 3px; }
.lp-book-detail-value { flex: 1 1 auto; min-width: 0; color: var(--body-ink); font-weight: 600; font-size: 0.95rem; word-break: break-word; }
.lp-book-detail-value a { color: var(--green-deep); text-decoration: underline; }
.lp-book-detail-sub { display: block; color: var(--muted-ink); font-weight: 500; font-size: 0.85rem; margin-top: 2px; }
.lp-book-details-note { font-size: 0.85rem; margin-top: 12px; }

/* Desktop header click-to-call (CRO, Victor 2026-09-19): the mobile sticky FAB
   covers phones; this puts a persistent Call link in the desktop top bar for the
   "I just want to talk" visitor. Hidden below xl so it doesn't duplicate the FAB
   in the mobile drawer. The visible text uses {{ phone }} exact format so DNI
   call-tracking still swaps it. */
/* Bright lime that stands out on the navy header/hero (Victor 2026-09-20) —
   the palette greens (--green-deep etc.) are olive-dark and read muddy here. */
.header-phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; white-space: nowrap; margin-right: 1rem; color: #a3e635; }
.header-phone i { font-size: 0.9em; }
.header-phone:hover { text-decoration: underline; }
@media (max-width: 1199.98px) { .header-phone { display: none; } }

/* Soft "guidance first" path (Victor 2026-09-19): the quiet homepage link, the
   optional-field hint, and the "Tell us about your student" page + thank-you. */
.hero-section .hero-soft-link,
.lp-hero .hero-soft-link { margin: 0.35rem 0 0; font-size: 0.95rem; text-align: center; }
/* The anchor carries .hero-soft-cta on purpose: the unclassed-link rule
   `.elite-home p a:not([class])` (0,2,2) forces links to a dark --green-deep, so
   the class both dodges :not([class]) AND lifts specificity to (0,3,1) to win.
   Covers hero_homepage (#register-form), hero_with_form (.lp-page), and the paid
   LP heroes (.lp-hero) — all navy, so the on-navy lime applies. */
.hero-section .hero-soft-link a.hero-soft-cta,
.lp-hero .hero-soft-link a.hero-soft-cta { color: #a3e635; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* The consultation funnel's soft-landing link sits on the same navy heroes, so
   brighten it to the same on-navy lime there (Victor 2026-09-20). It stays
   green-deep on the light "Your Journey Starts Here" band (default rule above). */
.hero-section .lp-consult-softlink a.lp-consult-soft-cta,
.lp-hero .lp-consult-softlink a.lp-consult-soft-cta { color: #a3e635; }
/* Same soft link in the "Your Journey Starts Here" band (register_cta), whose
   background is light blue (#e7eef8 -> --cool-tint): the on-navy lime would clash,
   so this variant uses the section's green accent for contrast + cohesion. Class
   again dodges the .elite-home p a:not([class]) dark-link rule. */
.register-cta-softlink { text-align: center; margin: 14px 0 0; font-size: 0.95rem; }
.register-cta-section .register-cta-softlink a.register-cta-soft-cta { color: var(--green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.register-cta-section .register-cta-softlink a.register-cta-soft-cta:hover { color: var(--green); }
.reg-optional { color: var(--muted-ink); font-weight: 500; font-size: 0.85em; }
.tell-us-chat-nudge { text-align: center; margin: 18px 0 0; font-size: 0.92rem; color: var(--muted-ink); }
.tell-us-chat-btn { background: none; border: none; padding: 0; color: var(--green-deep); font-weight: 700; text-decoration: underline; cursor: pointer; font: inherit; }
.thankyou-check { display: inline-block; font-size: 3rem; color: var(--green-deep); margin-bottom: 0.5rem; }

/* Soft-inquiry confirmation "success" screen (redesign per Sol 5.6,
   Victor 2026-09-21): a tinted section + centered white panel so the confirmation
   owns the page above the standard footer. */
.confirm-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 480px; padding: 72px 24px 88px; background: var(--cool-tint);
}
.confirm-panel {
  width: 100%; max-width: 680px; margin: 0 auto; padding: 48px 56px;
  text-align: center; background: #fff; border: 1px solid rgba(35, 63, 45, 0.10);
  border-radius: 20px; box-shadow: 0 16px 40px rgba(24, 50, 38, 0.08);
}
.confirm-icon {
  display: grid; place-items: center; width: 68px; height: 68px;
  margin: 0 auto 24px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(143, 174, 47, 0.12);
}
/* Checkmark drawn in CSS (no font dependency — the bare fa-check glyph isn't in
   our subset; Victor 2026-09-21). Right+bottom borders rotated 45deg form the tick. */
.confirm-icon::after {
  content: ""; width: 15px; height: 26px;
  border-right: 4px solid #fff; border-bottom: 4px solid #fff;
  border-radius: 1px; transform: rotate(45deg); margin-top: -6px;
}
.confirm-title {
  margin: 0 0 14px; color: var(--navy-950);
  font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em;
}
.confirm-message {
  max-width: 600px; margin: 0 auto; color: var(--muted-ink);
  font-size: 1.06rem; line-height: 1.65;
}
.confirm-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px;
}
.confirm-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 700;
  color: var(--green-deep); background: #fff; border: 1.5px solid var(--green);
  text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.confirm-btn-secondary:hover { background: #f6faec; border-color: var(--green-deep); }
.confirm-help { margin: 24px 0 0; color: var(--muted-ink); font-size: 0.94rem; }
.confirm-help-link {
  border: none; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .confirm-page { min-height: auto; padding: 44px 16px 52px; }
  .confirm-panel { padding: 36px 20px 40px; border-radius: 16px; }
  .confirm-icon { width: 60px; height: 60px; margin-bottom: 22px; }
  .confirm-title { font-size: 2rem; }
  .confirm-actions { flex-direction: column; gap: 12px; margin-top: 26px; }
  .confirm-actions .btn-elite, .confirm-actions .confirm-btn-secondary { width: 100%; }
}

/* "Tell us about your student" page: a light heading (no hero) straight into the
   form (Victor 2026-09-20). */
.tell-us-intro { margin-bottom: 26px; }
.tell-us-title { font-size: 2.1rem; font-weight: 800; color: var(--navy-950); margin: 0 0 10px; line-height: 1.15; }
.tell-us-intro-lead { color: var(--muted-ink); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* "Other ways to connect" band below the form (Sol 5.6 design, Victor 2026-09-20):
   its own full-width navy section of translucent glass tiles with lime icon
   badges, clearly secondary to the form. */
.tell-connect { background: var(--navy-950); color: #fff; padding: 64px 24px; }
.tell-connect__inner { width: min(1120px, 100%); margin: 0 auto; }
.tell-connect__header { max-width: 620px; margin: 0 auto 32px; text-align: center; }
.tell-connect__header h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; }
.tell-connect__header p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 1rem; line-height: 1.6; }
.tell-connect__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tell-connect-card { display: flex; align-items: flex-start; gap: 18px; min-width: 0; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; background: rgba(255, 255, 255, 0.07); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14); color: #fff; text-align: left; text-decoration: none; cursor: pointer; font: inherit; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tell-connect-card--btn { width: 100%; appearance: none; }
.tell-connect-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.11); border-color: rgba(163, 230, 53, 0.5); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.2); }
.tell-connect-card__icon { display: inline-flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(163, 230, 53, 0.34); border-radius: 50%; background: rgba(163, 230, 53, 0.12); color: #a3e635; font-size: 1.1rem; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.tell-connect-card:hover .tell-connect-card__icon { background: #a3e635; color: #16240a; transform: scale(1.05); }
.tell-connect-card__body { display: flex; min-width: 0; flex-direction: column; }
.tell-connect-card__title { display: block; margin: 2px 0 6px; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.tell-connect-card__desc { display: block; color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; line-height: 1.5; }
.tell-connect-card__link { display: block; margin-top: 10px; color: #a3e635; font-weight: 700; font-size: 0.92rem; }
@media (max-width: 760px) { .tell-connect { padding: 44px 20px; } .tell-connect__grid { grid-template-columns: 1fr; gap: 18px; } }