/* ============================================================
   GrammarBound — "Navy + Brass" re-skin overrides (scheme.css)
   Linked LAST, after tokens.css / style.css / catchment-showcase.css
   on every page. It (1) finalises the brand tokens, (2) de-pills the
   nav + section labels, (3) flattens the logo to the inline Spectral
   wordmark, and (4) recolours the chrome the global colour pass can't
   express as a single literal swap (gradients, Leaflet labels, badges).
   No gradients, no purple, no cyan remain.
   ============================================================ */

:root {
  /* The single accent. */
  --brass:        #C99B43;
  --brass-d:      #A6741F;
  --brass-ink:    #16244C;   /* text that sits ON brass */
  --brass-tint:   #F4EFE2;   /* warm parchment fill */
  --brass-line:   #E4D5A8;

  /* ── Brand token overrides ─────────────────────────────── */
  --gb-navy:        #060F3C;          /* slightly deeper, no blue-violet cast */
  --gb-indigo:      #1F3A8A;          /* deep BLUE (was purple-indigo) */
  --gb-indigo-50:   #F4EFE2;          /* warm tint (was #EEF2FF) */
  --gb-indigo-200:  #E4D5A8;          /* brass-tint border (was #C7D2FE) */
  --gb-cyan:        #C99B43;          /* accent → brass (was #22D3EE) */
  --gb-cyan-2:      #A6741F;          /* gradient end → brass-dark */
  --gb-cta-gradient: #C99B43;         /* FLATTENED to solid brass */

  /* ── Data palette (catchments) — no purple / no cyan ───── */
  --data-boys:      #2A4FA0;          /* blue */
  --data-girls:     #9C5570;          /* muted rose */
  --data-mixed:     #5E7245;          /* olive */
  --data-boys-fill:  rgba(42, 79, 160, 0.18);
  --data-girls-fill: rgba(156, 85, 112, 0.18);
  --data-mixed-fill: rgba(94, 114, 69, 0.18);
}

/* ── Global chrome ─────────────────────────────────────── */
header { border-bottom: 3px solid var(--brass) !important; }
.header-auth:hover { border-color: var(--brass) !important; }
/* Nav: editorial brass underline on hover/active (no pill fill) */
.nav-pill { position: relative; border-radius: 0 !important; }
.nav-pill:hover { background: transparent !important; color: #fff !important; }
.nav-pill.active { background: transparent !important; color: #fff !important; }
.nav-pill::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease;
}
.nav-pill:hover::after, .nav-pill.active::after { transform: scaleX(1); }

/* Footer links — were #93c5fd light blue; warm stone + brass hover */
.gb-footer-nav a { color: #C7BCA0 !important; }
.gb-footer-nav a:hover { color: var(--brass) !important; }
.map-footer a, .gb-footer-context a { color: #C7BCA0 !important; }
.map-footer a:hover, .gb-footer-context a:hover { color: var(--brass) !important; }

/* Generic primary button — brass with ink text */
.gb-btn-primary { background: var(--brass) !important; color: var(--brass-ink) !important; }
.gb-btn-primary:hover { background: var(--brass-d) !important; }
.gb-btn-primary:focus-visible { outline: 3px solid var(--brass) !important; }

/* ── The inline Spectral wordmark (replaces logo.svg / glyph.svg) ── */
.gb-wm {
  font-family: "Spectral", Georgia, serif; font-weight: 600;
  font-size: 25px; letter-spacing: -0.4px; color: #fff;
  display: inline-flex; align-items: center; white-space: nowrap;
  position: relative; isolation: isolate; line-height: 1;
}
.gb-wm .ital { font-style: italic; }
/* Trailing favicon mark — concentric arcs + petal, matches favicon.svg */
.gb-wm .gb-fav {
  width: 1.26em; height: 1.26em; flex: none;
  margin-left: 0.22em; overflow: visible;
  transform: translateY(-0.13em);
}
/* Light-surface variant — sign-in drawer, modals, light footers. */
.gb-wm--dark { color: #16244C; }
.gb-footer-logo .gb-wm { font-size: 20px; color: #fff; }
.nav-drawer .gb-wm { font-size: 21px; }
@media (max-width: 480px) {
  header .gb-wm { font-size: 21px; }
}

/* ── Headings: Spectral, matching the landing. Falls back to Georgia. ── */
.plans-hero h1, .tier-name,
.cs-title, .cs2-shape, .cs3-title, .cs3-card-head h3,
.sch-hero h1, .adm-hero h1, .features-hero h1,
.schools-hero h1, .account-hero h1, .legal-page h1 {
  font-family: "Spectral", Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.tier-name, .cs3-card-head h3 { font-weight: 600 !important; }
/* Heading emphasis comes from the typeface, not colour: italic, same ink. */
.cs-title em, .cs3-title em, .sch-hero h1 em, .adm-hero-em, .features-hero h1 em,
.plans-hero h1 em {
  font-style: italic !important; font-weight: 400 !important; color: inherit !important;
}

/* ── Plans: tiers, badges, business card ───────────────── */
.tier-card:hover { border-color: var(--brass-line) !important; }
.tier-card--featured {
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 4px rgba(201, 155, 67, 0.16), var(--shadow-card) !important;
}
.tier-card--featured:hover {
  box-shadow: 0 0 0 4px rgba(201, 155, 67, 0.24), var(--shadow-pop) !important;
}
.tier-card-badge {
  background: var(--brass) !important;
  color: var(--brass-ink) !important;
  box-shadow: 0 4px 12px rgba(166, 116, 31, 0.35) !important;
}
.tier-cta--solid { background: var(--brass) !important; color: var(--brass-ink) !important; }
.tier-cta--solid:hover { filter: none !important; background: var(--brass-d) !important; }
.tier-cta--secondary { color: var(--gb-indigo) !important; border-color: var(--brass-line) !important; }
.tier-cta--secondary:hover { background: var(--brass-tint) !important; border-color: var(--brass) !important; }
.tier-cta--ghost-light:hover { border-color: var(--brass) !important; }

/* default feature check → deep blue; business check → brass */
.tier-features li.feat::before {
  background-color: rgba(31, 58, 138, 0.12) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231F3A8A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.tier-card--business .tier-features li.feat::before {
  background-color: rgba(201, 155, 67, 0.20) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23C99B43' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.tier-features li .qual { color: var(--gb-indigo) !important; }
.tier-card--business .tier-features li .qual {
  color: var(--brass) !important;
  background: rgba(201, 155, 67, 0.16) !important;
}

/* Business card / banner: kill the cyan radial, use a brass glow on navy */
.tier-card--business,
.business-banner {
  background:
    radial-gradient(circle at top right, rgba(201, 155, 67, 0.16), transparent 58%),
    linear-gradient(160deg, #0B1A4E 0%, var(--gb-navy) 100%) !important;
}
.tier-card--business:hover,
.business-banner:hover { border-color: var(--brass) !important; }
.business-banner .bb-intro .tier-eyebrow,
.tier-card--business .tier-eyebrow { color: var(--brass) !important; }
.business-banner .bb-features li::before {
  background-color: rgba(201, 155, 67, 0.20) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23C99B43' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* Mobile price strip */
.price-strip .ps-col--featured { border-color: var(--brass) !important; box-shadow: 0 0 0 3px rgba(201,155,67,0.14) !important; }
.price-strip .ps-cta--solid { background: var(--brass) !important; color: var(--brass-ink) !important; }
.price-strip .ps-cta--secondary { color: var(--gb-indigo) !important; border-color: var(--brass-line) !important; }

/* ── Showcase sections (cs- / cs2- / cs3-) ─────────────── */
/* De-pill the section labels: no fill, no border, mono uppercase, square marker. */
.cs-badge, .cs3-badge, .features-more-head .badge {
  color: var(--brass-d) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}
.cs-badge-dot, .cs3-badge-dot, .features-more-head .badge span { background: var(--brass) !important; border-radius: 0 !important; }
.cs-title em, .cs3-title em { color: inherit !important; }
.cs-progress-bar > span { background: var(--brass) !important; }
.cs-autoplay.is-on .cs-autoplay-dot { background: #2A6F4A !important; }
.cs-map-cta { background: var(--brass) !important; color: var(--brass-ink) !important; }
.cs3-card-new {
  border: 1.5px solid var(--brass) !important;
  box-shadow: 0 14px 40px -24px rgba(10, 22, 82, 0.45) !important;
}
.cs3-card-eyebrow-brand { color: var(--brass-d) !important; }
/* Card eyebrows → mono labels with a square marker, matching the section label. */
.cs3-card-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500 !important; letter-spacing: 0.16em !important;
}
.cs3-card-eyebrow::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0; background: #94908A;
}
.cs3-card-eyebrow-brand::before { background: var(--brass) !important; }
.cs3-foot-cta {
  background: var(--brass-tint) !important;
  border-color: var(--brass-line) !important;
}
.cs3-cta { background: var(--brass) !important; color: var(--brass-ink) !important; }

/* Leaflet labels / markers used across the map pages */
.gb-label-outer, .gb-label-cranbrook { color: #4A5568 !important; border-color: #94A3B8 !important; }
.gb-label-outer span { color: #4A5568 !important; }
.gb-label-pp { color: var(--brass-d) !important; border-color: var(--brass) !important; }
.gb-label-pp span { color: var(--brass-d) !important; }
.gb-label-score-in { color: #9A3412 !important; border-color: #C2724E !important; }
.gb-person, .gb-person-in { background: #2A4FA0 !important; }

/* ── De-pill hero eyebrows + section badges site-wide ──────
   Same editorial treatment as the comparison section labels: no fill,
   no border, no radius, no padding — mono uppercase with a small SQUARE
   marker (not a rounded tinted chip). Dark-hero eyebrows keep their stone
   ink for legibility on navy; light-surface ones take brass-dark. */
.sch-hero .eyebrow, .adm-hero .eyebrow, .adm-hero-eyebrow,
.features-hero .badge, .plans-hero .badge,
.adm-eyebrow, .legal-eyebrow {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}
/* Light-surface labels → brass-dark ink. (.sch-hero is now a light hero too.) */
.sch-hero .eyebrow,
.features-hero .badge, .plans-hero .badge, .adm-eyebrow, .legal-eyebrow {
  color: var(--brass-d) !important;
}
/* Square the markers — existing dot spans … */
.eyebrow-dot, .adm-hero-eyebrow-dot, .legal-eyebrow-dot {
  border-radius: 0 !important; width: 6px !important; height: 6px !important;
  background: var(--brass) !important;
}
/* … and the pseudo-element dots on the plans / features badges. */
.features-hero .badge::before, .plans-hero .badge::before {
  border-radius: 0 !important; background: var(--brass) !important;
}
/* Section eyebrows ("01 · Start here") carry no marker span — give them a brass square. */
.adm-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
.adm-eyebrow::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--brass);
}

/* ── Features page (page-local classes) ────────────────── */
.features-cta .primary { background: var(--brass) !important; color: var(--brass-ink) !important; }
.features-cta .primary:hover { filter: none !important; background: var(--brass-d) !important; }
.feature-card.is-flagship {
  background: #0C1A4E !important;   /* flatten the indigo→cyan gradient to solid navy */
  border: 1px solid rgba(201,155,67,0.4) !important;
}
.feature-card.is-flagship .ic { background: rgba(201,155,67,0.18) !important; color: var(--brass) !important; }
.feature-card .ic { background: var(--brass-tint) !important; color: var(--gb-indigo) !important; }

/* ───────────────────────────────────────────────────────────────
   Brand pin bullets
   Replaces the brass square editorial marker with the favicon's
   sideways locator pin (concentric signal rings removed, point left
   to match the mark). A CSS mask paints the pin in whatever colour
   the cascade already gives each marker — brass, brass-dark, and the
   grey "older" card eyebrow all stay correct; only the shape changes.

   Covers every place that currently renders a brass square:
   section eyebrows, hero eyebrows, showcase + card eyebrows, the
   feature carousel eyebrow/kicker, the school-card eyebrow, the plans
   & features badges, and the legal-page eyebrow.
   ─────────────────────────────────────────────────────────────── */
:root {
  --gb-pin:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='4.5%2012.5%2012%207'%3E%3Cpath%20d='M13%2012.5A3.5%203.5%200%200%201%2013%2019.5Q11.4%2018.1%204.5%2016%2011.4%2013.9%2013%2012.5Z'%20fill='%23000'/%3E%3C/svg%3E");
}

.adm-eyebrow::before,
.adm-hero-eyebrow-dot, .legal-eyebrow-dot, .eyebrow-dot,
.cs-badge-dot, .cs3-badge-dot, .features-more-head .badge span,
.cs3-card-eyebrow::before,
.gbc-eyebrow::before, .gbc-kicker::before,
.lx-eyebrow::before, .landing-eyebrow::before,
.sc-eyebrow::before,
.features-hero .badge::before, .plans-hero .badge::before {
  width: 12px !important;
  height: 7.5px !important;
  border-radius: 0 !important;
  -webkit-mask: var(--gb-pin) center / contain no-repeat;
          mask: var(--gb-pin) center / contain no-repeat;
}