/* ===========================================================================
   Harris Academia — shared design system
   ---------------------------------------------------------------------------
   Loaded LAST in every <head>, so it overrides the per-page <style> blocks
   those pages were originally built with.

   The palette is split deliberately. The logo is a white wordmark on a baked-in
   dark background — it is not transparent — so it can only ever sit on a dark
   surface. That is why the navigation rail is deep navy and the content beside
   it is light: the mark looks native in the rail, while everything a parent or
   student actually reads sits on paper-white.
   ========================================================================= */

:root {
  /* Content surfaces */
  --paper:        #f4f6f9;
  --card:         #ffffff;
  --card-sunk:    #f8fafc;
  --line:         #e3e8ef;
  --line-strong:  #cfd7e3;

  /* Ink */
  --ink:          #16202e;
  --ink-soft:     #44536a;
  --ink-mute:     #5f6e84;

  /* The blue is lifted from the star in the logo. */
  --brand:        #1f5fd0;
  --brand-deep:   #17489f;
  --brand-tint:   #e9f0fd;
  --brand-line:   #c3d7f7;

  /* Navigation rail */
  --rail:         #0b1322;
  --rail-2:       #111d33;
  --rail-line:    #22304a;
  --rail-ink:     #c8d4e6;
  --rail-ink-dim: #8095b3;

  --gold:         #b8860b;
  --good:         #15795a;
  --good-tint:    #e6f5ef;
  --warn:         #a35a00;
  --warn-tint:    #fdf1e3;
  --bad:          #b3261e;
  --bad-tint:     #fdeceb;

  --rail-w:       292px;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(16,32,58,.06), 0 6px 20px rgba(16,32,58,.06);
  --shadow-lift:  0 2px 6px rgba(16,32,58,.08), 0 14px 38px rgba(16,32,58,.11);

  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, serif;
}

/* --------------------------------------------------------------- base --- */

html { scroll-behavior: smooth; }

body.hx {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.hx *, body.hx *::before, body.hx *::after { box-sizing: border-box; }

body.hx h1, body.hx h2, body.hx h3, body.hx h4 {
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.22;
  margin: 0 0 .5em;
}
body.hx h1 { font-size: 2.35rem; }
body.hx h2 { font-size: 1.6rem; }
body.hx h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
body.hx p  { margin: 0 0 1.05em; }
body.hx a  { color: var(--brand); text-decoration: none; }
body.hx a:hover { text-decoration: underline; }
body.hx strong { font-weight: 650; color: var(--ink); }
body.hx small { font-size: .86rem; }
body.hx hr {
  border: 0; border-top: 1px solid var(--line); margin: 34px 0;
}
body.hx ::selection { background: var(--brand-tint); color: var(--ink); }

body.hx :focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- shell --- */

.hx-shell { display: block; }

.hx-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%);
  border-right: 1px solid #05090f;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 200;
}
.hx-rail::-webkit-scrollbar { width: 8px; }
.hx-rail::-webkit-scrollbar-thumb {
  background: #1e2c44; border-radius: 8px;
}

.hx-content {
  margin-left: var(--rail-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------- rail logo --- */

.hx-brand {
  display: block;
  padding: 22px 16px 16px;
  border-bottom: 1px solid var(--rail-line);
  line-height: 0;
}
.hx-brand:hover { text-decoration: none; }

/* The source logo carries a lot of empty margin around the wordmark, which is
   what made it read small, and its background is baked in so it can only sit on
   a dark surface. logo-mark.png is that file with its luminance turned into
   alpha and cropped to the mark: white on transparent, so it drops straight
   onto the rail at full width and can be tinted anywhere else. */
.hx-logo-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1242 / 300;
}
.hx-logo-box img {
  width: 100%;
  height: 100%;
  display: block;
}
.hx-logo-glow {
  position: absolute;
  left: 78%;
  top: 6%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #bfe0ff 35%, rgba(140,190,255,0) 75%);
  mix-blend-mode: screen;
  filter: blur(1.4px);
  pointer-events: none;
  animation: hxGlow 2.6s ease-in-out infinite;
}
@keyframes hxGlow {
  0%, 100% { opacity: .30; transform: translate(-50%,-50%) scale(.6); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.75); }
}
body.hx .hx-tagline {
  display: block;
  margin-top: 10px;
  color: var(--rail-ink-dim);
  font-size: .70rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}

/* ------------------------------------------------- rail feature (SGL) --- */

body.hx .hx-feature {
  margin: 16px 14px 6px;
  padding: 15px 15px 14px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(31,95,208,.34) 0%, rgba(31,95,208,0) 62%),
    #14203a;
  border: 1px solid #2b4a7d;
}
body.hx .hx-feature-kicker {
  color: #8fbaff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 5px;
}
body.hx .hx-feature h4 {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -.01em;
  line-height: 1.3;
}
body.hx .hx-feature p {
  color: #a9c0e0;
  font-size: .82rem;
  line-height: 1.5;
  margin: 0 0 11px;
}
body.hx .hx-feature .hx-btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------------- rail nav --- */

.hx-nav { padding: 10px 0 4px; flex: 1; }

body.hx .hx-nav-group {
  color: var(--rail-ink-dim);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 16px 20px 7px;
}

.hx-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  color: var(--rail-ink);
  font-size: .92rem;
  border-left: 3px solid transparent;
  transition: background .13s, color .13s;
}
.hx-nav a:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
  text-decoration: none;
}
.hx-nav a.current {
  background: rgba(31,95,208,.17);
  border-left-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.hx-nav .hx-ico {
  width: 17px;
  flex: 0 0 17px;
  text-align: center;
  opacity: .78;
  font-size: .95em;
}

body.hx .hx-rail-foot {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--rail-line);
  color: var(--rail-ink-dim);
  font-size: .78rem;
  line-height: 1.6;
}
body.hx .hx-rail-foot a { color: var(--rail-ink); }
body.hx .hx-rail-foot a:hover { color: #fff; }
body.hx .hx-rail-foot .hx-phone {
  display: block;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 2px;
}

/* ------------------------------------------------------------ mobile --- */

.hx-topbar { display: none; }

@media (max-width: 900px) {
  .hx-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 190;
    padding: 9px 14px;
    background: var(--rail);
    border-bottom: 1px solid #05090f;
  }
  .hx-topbar .hx-logo-box { width: 186px; }
  .hx-burger {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rail-line);
    color: #fff;
    border-radius: var(--radius-sm);
    width: 40px; height: 38px;
    font-size: 1.15rem;
    cursor: pointer;
    line-height: 1;
  }
  .hx-burger:hover { background: rgba(255,255,255,.07); }

  .hx-rail {
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: min(86vw, var(--rail-w));
    box-shadow: 0 0 0 100vmax rgba(6,11,20,0);
  }
  body.hx-open .hx-rail { transform: none; box-shadow: 0 0 0 100vmax rgba(6,11,20,.55); }
  .hx-content { margin-left: 0; }
}

/* ------------------------------------------------------------- layout --- */

body.hx main {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 34px 64px;
  flex: 1;
}
body.hx main.hx-wide { max-width: 1240px; }
body.hx main.hx-narrow { max-width: 780px; }

body.hx .page-title,
body.hx h1.page-title {
  font-size: 2.4rem;
  text-align: left;
  color: var(--ink);
  letter-spacing: -.022em;
  margin-bottom: .18em;
}
body.hx .page-subtitle,
body.hx p.page-subtitle {
  text-align: left;
  color: var(--ink-mute);
  font-style: normal;
  font-size: 1.06rem;
  margin: 0 0 34px;
  max-width: 62ch;
}

/* Old pages centred their headings; centre only where asked for now. */
body.hx .hx-center { text-align: center; }
body.hx .hx-center .page-subtitle { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- cards --- */

body.hx section.block,
body.hx .hx-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 0 0 22px;
  box-shadow: var(--shadow);
}
body.hx section.block h2:first-child,
body.hx .hx-card h2:first-child,
body.hx .hx-card h3:first-child { margin-top: 0; }

body.hx .hx-card-quiet {
  background: var(--card-sunk);
  box-shadow: none;
}

/* --------------------------------------------------------------- hero --- */

body.hx .hx-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 36px 40px 34px;
  margin-bottom: 24px;
  color: #eaf1fb;
  background:
    radial-gradient(105% 130% at 88% 0%, rgba(52,120,235,.42) 0%, rgba(52,120,235,0) 58%),
    linear-gradient(158deg, #0d1729 0%, #142442 60%, #16294a 100%);
  border: 1px solid #1e304f;
}
body.hx .hx-hero h1 {
  color: #fff;
  font-size: 2.25rem;
  letter-spacing: -.026em;
  margin: 0 0 12px;
  max-width: 18ch;
}
body.hx .hx-hero p.hx-hero-sub {
  color: #b6c8e2;
  font-size: 1.02rem;
  line-height: 1.58;
  max-width: 58ch;
  margin: 0 0 22px;
}
.hx-kicker {
  display: inline-block;
  color: #8fbaff;
  background: rgba(31,95,208,.2);
  border: 1px solid rgba(96,152,246,.34);
  border-radius: 100px;
  padding: 5px 13px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.hx .hx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.hx .hx-hero-note {
  margin: 15px 0 0;
  color: #8fa5c4;
  font-size: .88rem;
}

/* ------------------------------------------------------------ buttons --- */

body.hx .hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  font-family: var(--ui);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, transform .07s, box-shadow .14s;
  box-shadow: 0 1px 2px rgba(16,32,58,.14);
}
body.hx .hx-btn:hover {
  background: var(--brand-deep);
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(31,95,208,.3);
}
body.hx .hx-btn:active { transform: translateY(1px); }
body.hx .hx-btn[disabled], body.hx .hx-btn:disabled {
  background: var(--line-strong);
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}
body.hx .hx-btn-lg { padding: 14px 26px; font-size: 1.02rem; }
body.hx .hx-btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: none;
}
body.hx .hx-btn-ghost:hover { background: rgba(255,255,255,.1); box-shadow: none; }
body.hx .hx-btn-quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: none;
}
body.hx .hx-btn-quiet:hover { background: var(--card-sunk); box-shadow: none; }

/* -------------------------------------------------------------- grids --- */

.hx-grid { display: grid; gap: 18px; }
.hx-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hx-grid-3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

body.hx .focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0 0 22px;
}
body.hx .focus-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
  display: flex;
  flex-direction: column;
}
body.hx .focus-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-line);
}
body.hx .focus-card h3 { margin: 0 0 10px; }
body.hx .focus-card ul {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.75;
}
body.hx .focus-card .learn-more {
  margin-top: auto;
  font-weight: 600;
  font-size: .93rem;
}

/* ------------------------------------------------------------ founder --- */
/* The old markup centred the heading across the full section while the letter
   sat in a column offset by the photo, so the title floated left of the text it
   belonged to. Grid ties them to the same column. */

body.hx .hx-founder { display: block; }
body.hx .founder-wrap {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  justify-content: start;
}
body.hx .founder-wrap img {
  width: 220px;
  height: auto;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
  grid-row: span 2;
}
body.hx .founder-wrap .founder-text {
  max-width: none;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.03rem;
  line-height: 1.78;
  color: var(--ink-soft);
}
body.hx .founder-head {
  grid-column: 2;
  /* No margin of its own: the heading inside already carries the section
     heading's bottom spacing, and stacking both left a gap once the byline
     that used to sit here was removed. */
  margin: 0;
}
body.hx .founder-head h2 { text-align: left; }
body.hx .signature {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink);
  text-align: left;
}

@media (max-width: 720px) {
  body.hx .founder-wrap { grid-template-columns: 1fr; }
  body.hx .founder-wrap img { grid-row: auto; width: 168px; }
  body.hx .founder-head { grid-column: 1; }
}

/* ------------------------------------------------------------- misc ---- */

body.hx .hx-note {
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  color: var(--ink-soft);
  font-size: .94rem;
  margin: 0 0 20px;
}
body.hx .hx-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.hx .hx-pill-good { background: var(--good-tint); color: var(--good); }
body.hx .hx-pill-warn { background: var(--warn-tint); color: var(--warn); }
body.hx .hx-pill-bad  { background: var(--bad-tint);  color: var(--bad); }
body.hx .hx-pill-info { background: var(--brand-tint); color: var(--brand-deep); }

body.hx footer,
body.hx .site-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  text-align: center;
  padding: 26px 20px 34px;
  font-size: .87rem;
  margin-top: auto;
}
body.hx footer a { color: var(--ink-soft); }

/* Old dark-theme leftovers that would otherwise punch holes in the new look. */
body.hx .site-topbar,
body.hx header.site-header,
body.hx nav.site-nav { display: none !important; }

@media (max-width: 620px) {
  body.hx main { padding: 26px 18px 48px; }
  body.hx h1, body.hx .page-title, body.hx h1.page-title { font-size: 1.85rem; }
  body.hx .hx-hero { padding: 26px 22px; }
  body.hx .hx-hero h1 { font-size: 1.8rem; }
}

@media print {
  .hx-rail, .hx-topbar { display: none !important; }
  .hx-content { margin-left: 0; }
}


/* =========================================================================
   Legacy page normalisation
   -------------------------------------------------------------------------
   Every page still carries the inlined <style> it was built with, written for
   a black background: pale grey body text, white headings, uppercase section
   titles, centred columns. On the new paper-white surface that text is nearly
   invisible, so those rules are neutralised here rather than deleted by hand
   from sixteen files.
   ========================================================================= */

body.hx section.block,
body.hx section.block p,
body.hx section.block li,
body.hx section.block td,
body.hx section.block th { color: var(--ink-soft); }

body.hx section.block p  { font-size: 1.02rem; line-height: 1.72; }
body.hx section.block ul { color: var(--ink-soft); font-size: 1rem; }
body.hx section.block ul li::marker { color: var(--brand); }

body.hx section.block h2,
body.hx section.block h3,
body.hx section.block h4 {
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.015em;
}
body.hx section.block h2 { font-size: 1.5rem; margin-bottom: .55em; }
body.hx section.block h3 { font-size: 1.12rem; margin-top: 1.4em; }

/* Long prose reads better ranged left than centred. */
body.hx .center-block h2,
body.hx .center-block h3,
body.hx .center-block p { text-align: left; }

/* Anything genuinely meant to sit centred opts back in. */
body.hx .hx-center h2,
body.hx .hx-center h3,
body.hx .hx-center p { text-align: center; }

body.hx .hx-lede {
  font-size: 1.14rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 66ch;
}

body.hx .hx-vision-close {
  color: var(--ink);
  font-size: 1.12rem;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
body.hx .hx-value h3 {
  font-size: 1.05rem;
  margin-bottom: .5em;
}
body.hx .hx-value h3::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
  margin-bottom: 12px;
}
body.hx .hx-value p {
  color: var(--ink-soft);
  font-size: .96rem;
  margin: 0;
}

/* Dark-theme text colours that survive outside section.block — the subject
   cards on the Self-Guided Learning page, the calendar, and similar. #dcdcdc
   and #e4e4e4 were chosen for a black page; on white they are barely there. */
body.hx .focus-card p,
body.hx .focus-card li,
body.hx .focus-card span { color: var(--ink-soft); }
body.hx .focus-card h3 { color: var(--ink); }

/* Old page buttons, restyled to match .hx-btn without touching sixteen files. */
body.hx a.button,
body.hx button.button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 20px; font-family: var(--ui); font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer; letter-spacing: .005em;
  box-shadow: 0 1px 2px rgba(16,32,58,.14);
  transition: background .14s, box-shadow .14s;
}
body.hx a.button:hover,
body.hx button.button:hover {
  background: var(--brand-deep); text-decoration: none;
  box-shadow: 0 3px 12px rgba(31,95,208,.3);
}
body.hx .focus-card a.button { margin-top: auto; align-self: flex-start; }

/* =========================================================================
   Legacy components
   -------------------------------------------------------------------------
   The app pages — booking calendar, placement, diagnostic, the course, admin,
   checkout — were each built self-contained against a black background. Their
   class families are consistent (cal-, pl-, gp-, lx-, adm-, pay-), so the
   whole set can be brought onto the light surface here rather than by rewriting
   six thousand lines of inlined CSS.

   Only colour, borders and surfaces are touched. Layout stays exactly as those
   pages built it.
   ========================================================================= */

/* ---- form controls, everywhere ---- */
body.hx input[type="text"],
body.hx input[type="email"],
body.hx input[type="tel"],
body.hx input[type="password"],
body.hx input[type="number"],
body.hx input[type="search"],
body.hx select,
body.hx textarea {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--ui);
  font-size: 1rem;
  padding: 10px 12px;
}
body.hx input::placeholder,
body.hx textarea::placeholder { color: var(--ink-mute); }
body.hx input:focus, body.hx select:focus, body.hx textarea:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand-tint);
  outline-offset: 0;
}
body.hx .field label,
body.hx label { color: var(--ink); font-weight: 600; font-size: .93rem; }
body.hx .radio-line { color: var(--ink-soft); font-weight: 400; }
body.hx .field-note, body.hx .hint { color: var(--ink-mute); }

/* ---- signature / contact / footer ---- */
body.hx .signature { color: var(--ink); }
body.hx .contact-line, body.hx .contact-line a { color: var(--ink); }
body.hx footer.site-footer { color: var(--ink-mute); background: transparent; }

/* ---- booking calendar ---- */
body.hx .cal-nav-btn,
body.hx .cal-today-btn {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
body.hx .cal-nav-btn:hover, body.hx .cal-today-btn:hover { background: var(--card-sunk); }
body.hx .cal-title { color: var(--ink); }
body.hx .cal-title .cal-year { color: var(--ink-mute); }
body.hx .cal-table { background: var(--card); }
body.hx .cal-table thead th { color: var(--ink-soft); background: var(--card-sunk); }
body.hx .cal-table td, body.hx .cal-day-cell { border-color: var(--line); }
body.hx .date-num { color: var(--ink); }
body.hx .date-num.today { color: var(--brand-deep); font-weight: 700; }
body.hx .cal-day-cell.other-month { opacity: .4; }
body.hx .cal-day-cell.closed, body.hx .cal-day-cell.past { opacity: .45; }
body.hx .cal-day-cell:not(.closed):not(.past):hover { background: var(--brand-tint); }

/* ---- reading placement (pl-) ---- */
body.hx .pl-prompt { color: var(--ink) !important; }
body.hx .pl-passage { background: var(--card-sunk); color: var(--ink); border-color: var(--line); }
body.hx .pl-option {
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
body.hx .pl-option:hover { border-color: var(--brand-line); background: var(--card-sunk); }
body.hx .pl-option[aria-pressed="true"] {
  color: var(--ink); background: var(--brand-tint); border-color: var(--brand);
}
body.hx .pl-option[aria-pressed="true"] .pl-letter { color: var(--brand-deep); }
body.hx .pl-ladder li.current .pl-rung-name,
body.hx .pl-ladder li.current .pl-rung-tag { color: var(--brand-deep); }
body.hx .pl-result-level { color: var(--ink); }
body.hx .pl-result-sub { color: var(--ink-mute) !important; }

/* ---- grade picker / diagnostic (gp-) ---- */
body.hx .gp-grade {
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
body.hx .gp-grade:hover { border-color: var(--brand-line); }
body.hx .gp-grade[aria-pressed="true"] {
  color: var(--ink); background: var(--brand-tint); border-color: var(--brand);
}
body.hx .gp-grade[aria-pressed="true"] .gp-grade-sub { color: var(--ink-soft); }
body.hx .gp-grade-sub { color: var(--ink-mute); }
body.hx .gp-domain-name, body.hx .gp-path h3 { color: var(--ink); }
body.hx .gp-tag { color: var(--ink-mute); }
body.hx .gp-rung { color: var(--ink-soft); }
body.hx .gp-rung.current { color: var(--brand-deep); font-weight: 700; }

/* ---- the course (lx-) ---- */
body.hx .lx-btn {
  color: var(--ink); background: var(--card); border: 1px solid var(--line-strong);
}
body.hx .lx-btn:hover { background: var(--card-sunk); }
body.hx .lx-btn-primary, body.hx .lx-btn.lx-primary {
  background: var(--brand); color: #fff; border-color: transparent;
}
body.hx .lx-btn-primary:hover, body.hx .lx-btn.lx-primary:hover { background: var(--brand-deep); }
body.hx .lx-answer {
  color: var(--ink); background: var(--card); border: 1px solid var(--line-strong);
}
body.hx .lx-stat b, body.hx .lx-domain-name, body.hx .lx-price,
body.hx .lx-khan h3, body.hx .lx-gate h3, body.hx .lx-video-title { color: var(--ink) !important; }
body.hx .lx-pill { color: var(--ink-mute); }
body.hx .lx-includes li, body.hx .lx-method { color: var(--ink-soft); }
body.hx .lx-step { color: var(--ink-mute); }
body.hx .lx-step.active { color: var(--brand-deep); font-weight: 700; }
body.hx .lx-tab { color: var(--ink-soft); }
body.hx .lx-tab[aria-pressed="true"] { color: var(--ink); }

/* ---- admin (adm-) ---- */
body.hx .adm-gate input { color: var(--ink); background: var(--card); }
body.hx .adm-btn { color: var(--ink); background: var(--card); border-color: var(--line-strong); }
body.hx .adm-stat .adm-stat-value { color: var(--ink); }
body.hx .adm-table td, body.hx .adm-table th { color: var(--ink-soft); border-color: var(--line); }
body.hx .adm-table .adm-ref, body.hx .adm-table .adm-amount { color: var(--ink); }
body.hx .adm-badge { color: var(--ink-mute); }

/* ---- checkout (pay-, method-) ---- */
body.hx .pay-total, body.hx .pay-total strong, body.hx .pay-sub,
body.hx .pay-warn strong { color: var(--ink) !important; }
body.hx .pay-total-note { color: var(--ink-mute); }
body.hx .method-option {
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
body.hx .method-option:hover { border-color: var(--brand-line); }
body.hx .method-option[aria-pressed="true"] {
  color: var(--ink); background: var(--brand-tint); border-color: var(--brand);
}
body.hx .method-option[aria-pressed="true"] .method-blurb { color: var(--ink-soft); }
body.hx .method-blurb { color: var(--ink-mute); }

/* ---- any remaining dark panel surface ---- */
body.hx .panel, body.hx .card, body.hx .box {
  background: var(--card); color: var(--ink); border-color: var(--line);
}

/* ---- legacy dark SURFACES ------------------------------------------------
   Fixing the text colour alone left dark panels with dark text on them. These
   are the same component families, brought onto light surfaces. Semantic tints
   (an open slot, a booked slot, a warning) keep their meaning but move to the
   light equivalents so the colour still reads at a glance. */

body.hx .focus-card { background: var(--card); }
body.hx button.button:disabled,
body.hx a.button.disabled {
  background: var(--line-strong); color: #fff; cursor: not-allowed; box-shadow: none;
}

/* calendar */
body.hx .cal-nav-btn, body.hx .cal-today-btn { background: var(--card); }
body.hx .cal-nav-btn:hover, body.hx .cal-today-btn:hover { background: var(--card-sunk); }
body.hx .cal-day-cell { background: var(--card); }
body.hx .cal-day-cell.available:hover { background: var(--brand-tint); }
body.hx .cal-table thead th { background: var(--card-sunk); }
body.hx .cal-table .time-label { background: var(--card-sunk); color: var(--ink-soft); }
body.hx .cal-table .slot.open { background: var(--good-tint); color: var(--good); }
body.hx .cal-table .slot.open:hover { background: #d3ede1; }
body.hx .cal-table .slot.booked { background: var(--bad-tint); color: var(--bad); }
body.hx .swatch.open { background: var(--good-tint); border: 1px solid var(--good); }
body.hx .swatch.booked { background: var(--bad-tint); border: 1px solid var(--bad); }

/* reading placement */
body.hx .pl-progress-track, body.hx .gp-bar, body.hx .lx-bar-track { background: var(--line); }
body.hx .pl-passage { background: var(--card-sunk); }
body.hx .pl-option { background: var(--card); }
body.hx .pl-option:hover { background: var(--card-sunk); }
body.hx .pl-option[aria-pressed="true"] { background: var(--brand-tint); }
body.hx .pl-ladder li.current { background: var(--brand-tint); }

/* diagnostic */
body.hx .gp-grade { background: var(--card); }
body.hx .gp-grade:hover { background: var(--card-sunk); }
body.hx .gp-grade[aria-pressed="true"] { background: var(--brand-tint); }
body.hx .gp-notice { background: var(--warn-tint); color: var(--warn); border-color: #f0d9b8; }
body.hx .gp-path { background: var(--card); border-color: var(--line); }
body.hx .gp-path.recommended { background: var(--good-tint); border-color: var(--good); }
body.hx .gp-rung { background: var(--card-sunk); }
body.hx .gp-rung.current { background: var(--brand-tint); }

/* the course */
body.hx .lx-btn { background: var(--card); }
body.hx .lx-btn:hover { background: var(--card-sunk); }
body.hx .lx-banner { background: var(--warn-tint); color: var(--warn); border-color: #f0d9b8; }
body.hx .lx-banner.good { background: var(--good-tint); color: var(--good); border-color: #bfe3d3; }
body.hx .lx-answer { background: var(--card); }
body.hx .lx-stat, body.hx .lx-plan, body.hx .lx-step { background: var(--card-sunk); }
body.hx .lx-step.active { background: var(--brand-tint); }
body.hx .lx-method { background: var(--card); }
body.hx .lx-method:hover { background: var(--card-sunk); }

/* admin */
body.hx .adm-gate input { background: var(--card); }
body.hx .adm-btn { background: var(--card); }
body.hx .adm-btn:hover:not(:disabled) { background: var(--card-sunk); }
body.hx .adm-btn.confirm:hover:not(:disabled) { background: var(--good-tint); color: var(--good); }
body.hx .adm-btn.danger:hover:not(:disabled) { background: var(--bad-tint); color: var(--bad); }
body.hx .adm-stat { background: var(--card-sunk); }

/* checkout */
body.hx .method-option { background: var(--card); }
body.hx .method-option:hover { background: var(--card-sunk); }
body.hx .method-option[aria-pressed="true"] { background: var(--brand-tint); }
body.hx .pay-warn { background: var(--warn-tint); color: var(--warn); border-color: #f0d9b8; }

/* Any remaining hairline borders drawn for a black page. */
body.hx .cal-table, body.hx .cal-table td, body.hx .cal-table th,
body.hx .cal-day-cell, body.hx .pl-option, body.hx .gp-grade,
body.hx .lx-answer, body.hx .adm-table td, body.hx .adm-table th,
body.hx .method-option { border-color: var(--line); }

/* ---- semantic accents ---------------------------------------------------
   The status colours were picked to glow on black — neon green for an open
   slot, pale pink for a booked one, amber for a warning. Every one of them
   disappears on white. They map cleanly onto the light palette, and keeping the
   same meanings means nothing has to be relearned. */

body.hx .cal-slot-count,
body.hx .cal-table .slot.open,
body.hx .cal-table .slot.open:hover,
body.hx #success-msg,
body.hx #lx-note,
body.hx #adm-flash,
body.hx .lx-problem.right .lx-answer,
body.hx .lx-correction,
body.hx .adm-btn.confirm,
body.hx #confirmation-block h2 { color: var(--good); }

body.hx .cal-slot-count.full,
body.hx .cal-table .slot.booked,
body.hx #error-msg,
body.hx #pl-error,
body.hx #lx-error,
body.hx #adm-error,
body.hx .cal-message.error,
body.hx .gp-clock.critical,
body.hx .pl-clock.critical,
body.hx .lx-assess-clock.critical,
body.hx .gp-domain.needs_work .gp-tag,
body.hx .lx-problem.wrong .lx-answer,
body.hx .lx-mark.wrong,
body.hx .adm-btn.danger,
body.hx .adm-badge.urgent { color: var(--bad); }

body.hx .gp-clock.low,
body.hx .pl-clock.low,
body.hx .lx-assess-clock.low,
body.hx .gp-domain.developing .gp-tag,
body.hx .lx-domain.working .lx-pill,
body.hx .adm-stat.warn .adm-stat-value,
body.hx .adm-badge.manual,
body.hx .cal-table .slot.held,
body.hx .lx-gate .lx-req li::before { color: var(--warn); }

body.hx .gp-domain.developing .gp-bar span,
body.hx .lx-domain.working .lx-bar-track span { background-color: var(--warn); }
body.hx .gp-domain.needs_work .gp-bar span { background-color: var(--bad); }

/* Today's date: a filled badge, in the brand blue rather than an alarm red. */
body.hx .date-num.today {
  background-color: var(--brand);
  color: #fff;
  border-radius: 100px;
  padding: 1px 8px;
}

/* Muted helper text (#aaa / #999) that was legible on black and is not on white. */
body.hx .cal-legend,
body.hx .cal-legend span,
body.hx .cal-hint,
body.hx .muted,
body.hx .note-line { color: var(--ink-mute); }

/* ---- the course: subject tabs, step ribbon, lesson note ---- */
body.hx .lx-tab {
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
body.hx .lx-tab:hover { background: var(--card-sunk); border-color: var(--brand-line); }
body.hx .lx-tab[aria-pressed="true"] {
  background: var(--brand-tint);
  color: var(--ink);
  border-color: var(--brand);
  font-weight: 600;
}
body.hx .lx-tab span, body.hx .lx-tab small, body.hx .lx-tab em { color: var(--ink-mute); }
body.hx .lx-tab[aria-pressed="true"] span,
body.hx .lx-tab[aria-pressed="true"] small,
body.hx .lx-tab[aria-pressed="true"] em { color: var(--ink-soft); }

body.hx .lx-step b, body.hx .lx-step-label { color: var(--ink-mute); }
body.hx .lx-step.active b, body.hx .lx-step.active .lx-step-label { color: var(--brand-deep); }
body.hx .lx-lesson-note, body.hx #lx-lesson-note { color: var(--ink-soft); }

/* The video frame keeps its own dark chrome — that is YouTube's, and correct. */
body.hx .lx-frame-wrap { background: #0a0a0a; border-radius: var(--radius-sm); overflow: hidden; }

/* ---- the fourteen !important colours ------------------------------------
   A handful of legacy rules set colour with !important, which no amount of
   specificity beats. Matching them here is the only way to bring them over
   short of editing each page. Each keeps its original intent — body copy,
   muted note, or warning — in the light palette. */

body.hx .pl-prompt,
body.hx .pay-total,
body.hx .lx-video-title { color: var(--ink) !important; }

body.hx .pl-result-sub,
body.hx .gp-price,
body.hx .pay-note,
body.hx .lx-lesson-note,
body.hx .lx-video-more,
body.hx .lx-khan p { color: var(--ink-soft) !important; }

body.hx .gp-notice,
body.hx .lx-banner,
body.hx .pay-gate-hint,
body.hx .pay-warn { color: var(--warn) !important; }

body.hx .lx-banner.good { color: var(--good) !important; }

/* =========================================================================
   Backdrop wordmark
   -------------------------------------------------------------------------
   A large HARRIS ACADEMIA mark fixed behind the content, so the site says
   whose it is no matter how far down the page a visitor has scrolled.

   It is painted as a MASK rather than an image: logo-mark.png is white on
   transparent, which would be invisible on a light page, so the mark's alpha
   is used to cut a shape out of a tinted layer instead. That also means the
   colour follows the palette rather than being fixed in the file.

   Kept faint on purpose — it must never compete with the text over it — and
   pointer-events are off so it can never intercept a click.
   ========================================================================= */

body.hx::before {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--rail-w);
  z-index: 0;
  pointer-events: none;
  background: var(--brand);
  opacity: .2;
  -webkit-mask-image: url("logo-mark.png");
          mask-image: url("logo-mark.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center 46%;
          mask-position: center 46%;
  -webkit-mask-size: min(86%, 960px) auto;
          mask-size: min(86%, 960px) auto;
}

/* Content sits above the mark. The rail is already above it via its own
   z-index, and cards keep their own opaque surfaces, so the mark reads through
   the gutters and the space between sections. */
body.hx .hx-content { position: relative; z-index: 1; }

@media (max-width: 900px) {
  body.hx::before {
    inset: 0;
    -webkit-mask-size: min(88%, 560px) auto;
            mask-size: min(88%, 560px) auto;
    opacity: .14;
  }
}

/* A browser without mask support would show a solid tinted block over the whole
   page, which is far worse than no watermark at all. */
@supports not ((-webkit-mask-image: url("logo-mark.png")) or (mask-image: url("logo-mark.png"))) {
  body.hx::before { display: none; }
}

@media print { body.hx::before { display: none; } }

/* The content column nearly fills the space beside the rail, so an opaque card
   would hide the backdrop entirely. Letting the large surfaces sit at 92% lets
   the wordmark ghost through as the page scrolls, while staying far too faint
   to affect the legibility of anything printed on them. Controls stay fully
   opaque — a translucent input or button reads as disabled. */
body.hx section.block,
body.hx .hx-card,
body.hx .focus-card,
body.hx .rd-q,
body.hx .rd-passage,
body.hx .rd-bar {
  background-color: rgba(255, 255, 255, .8);
}

/* ---- multiple-choice questions (worksheets and graduation assessments) ---- */

body.hx .lx-mc {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
body.hx .lx-mc:last-child { border-bottom: 0; }
body.hx .lx-mc .lx-prompt {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  white-space: pre-wrap;
}
body.hx .lx-mc .lx-num { color: var(--ink-mute); font-weight: 600; }

body.hx .lx-options {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
body.hx .lx-option {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
body.hx .lx-option:hover { border-color: var(--brand-line); background: var(--card-sunk); }
body.hx .lx-option.picked { border-color: var(--brand); background: var(--brand-tint); }
body.hx .lx-option.locked { cursor: default; }
body.hx .lx-option input { margin: 0; flex: 0 0 auto; align-self: center; }
body.hx .lx-option-letter {
  font-weight: 700;
  font-size: .8rem;
  color: var(--ink-mute);
  flex: 0 0 auto;
  min-width: 12px;
}
body.hx .lx-option-text { color: var(--ink); }
body.hx .lx-option-tag {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.hx .lx-option.is-right {
  border-color: var(--good);
  background: var(--good-tint);
}
body.hx .lx-option.is-right .lx-option-tag,
body.hx .lx-option.is-right .lx-option-letter { color: var(--good); }
body.hx .lx-option.is-yours {
  border-color: var(--bad);
  background: var(--bad-tint);
}
body.hx .lx-option.is-yours .lx-option-tag,
body.hx .lx-option.is-yours .lx-option-letter { color: var(--bad); }

/* The old free-text answer box has no place on a choice question. */
body.hx .lx-mc .lx-answer { display: none; }

/* ---- graded review: every option coloured, with its reasoning -------------
   Only applied to `.reviewed` questions, which exist solely after a sheet has
   been submitted — while a student is still answering, options stay neutral so
   nothing hints at the answer. */

body.hx .lx-mc.reviewed .lx-options {
  grid-template-columns: 1fr;          /* full width: the reasons need room */
}
body.hx .lx-option-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
}
body.hx .lx-option-why {
  margin: 6px 0 0 22px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

body.hx .lx-option.is-right {
  border-color: var(--good);
  background: var(--good-tint);
}
body.hx .lx-option.is-right .lx-option-letter,
body.hx .lx-option.is-right .lx-option-tag { color: var(--good); }
body.hx .lx-option.is-right .lx-option-text { font-weight: 650; }

body.hx .lx-option.is-wrong {
  border-color: #f0c4c1;
  background: var(--bad-tint);
}
body.hx .lx-option.is-wrong .lx-option-letter,
body.hx .lx-option.is-wrong .lx-option-tag { color: var(--bad); }

/* The one the student actually picked is called out more strongly than the
   other wrong answers, so they can find their own mistake at a glance. */
body.hx .lx-option.is-wrong.is-yours {
  border-color: var(--bad);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .08);
}
body.hx .lx-option.is-right.is-yours {
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(21, 121, 90, .10);
}

/* ---- results over time ---------------------------------------------------
   The chart is hand-drawn SVG — no charting library, so nothing external has
   to load and the page stays self-contained. */

body.hx .lx-chart-wrap { overflow-x: auto; }
body.hx .lx-chart-svg {
  display: block;
  width: 100%;
  min-width: 460px;
  height: auto;
  overflow: visible;
}
body.hx .lx-grid { stroke: var(--line); stroke-width: 1; }
body.hx .lx-axis-label {
  fill: var(--ink-mute);
  font-family: var(--ui);
  font-size: 11px;
}
body.hx .lx-passline {
  stroke: var(--warn);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: .75;
}
body.hx .lx-passlabel {
  fill: var(--warn);
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.hx .lx-area { fill: var(--brand); opacity: .07; }
body.hx .lx-line-raw {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.4;
  opacity: .3;
  stroke-linejoin: round;
}
body.hx .lx-line-trend {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
body.hx .lx-dot { stroke: var(--card); stroke-width: 2; }
body.hx .lx-dot.pass { fill: var(--good); }
body.hx .lx-dot.fail { fill: var(--bad); }

body.hx .lx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 16px;
  font-size: .87rem;
  color: var(--ink-soft);
}
body.hx .lx-key { display: inline-flex; align-items: center; gap: 7px; }
body.hx .lx-key-swatch {
  width: 16px; height: 3px; border-radius: 2px; display: inline-block;
}
body.hx .lx-key-swatch.lx-key-trend { background: var(--brand); height: 3px; }
body.hx .lx-key-swatch.lx-key-raw { background: var(--brand); opacity: .3; }
body.hx .lx-key-swatch.lx-key-pass {
  background: repeating-linear-gradient(90deg, var(--warn) 0 5px, transparent 5px 9px);
}
body.hx .lx-key-verdict {
  margin-left: auto;
  font-weight: 650;
  padding: 3px 11px;
  border-radius: 100px;
}
body.hx .lx-key-verdict.up { background: var(--good-tint); color: var(--good); }
body.hx .lx-key-verdict.down { background: var(--warn-tint); color: var(--warn); }
body.hx .lx-key-verdict.flat { background: var(--card-sunk); color: var(--ink-mute); }
body.hx #lx-chart-block.lx-empty .lx-chart-wrap,
body.hx #lx-chart-block.lx-empty .lx-legend { display: none; }

/* ---- what to review ---- */

body.hx .lx-review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
body.hx .lx-review-item {
  background: var(--card-sunk);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 15px 17px;
}
body.hx .lx-review-item:first-child { border-left-color: var(--bad); }
body.hx .lx-review-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
body.hx .lx-review-name { font-weight: 650; color: var(--ink); }
body.hx .lx-review-score {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink-soft);
}
body.hx .lx-review-reason { margin: 0 0 11px; font-size: .92rem; color: var(--ink-soft); }
body.hx .lx-btn-small { padding: 7px 14px; font-size: .88rem; }

/* ---- Advanced Checkout card fields ---------------------------------------
   The inputs are PayPal-owned iframes, so they cannot be styled with CSS from
   here — their typography is passed to the SDK instead. What is styled here is
   the box each iframe sits in, so the fields look native to the page. */

body.hx .card-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 20px;
  color: var(--ink-mute);
  font-size: .87rem;
}
body.hx .card-divider::before,
body.hx .card-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
body.hx .card-form { display: block; }
body.hx .card-label {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
body.hx .card-field {
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-bottom: 15px;
  padding: 0 2px;
  transition: border-color .13s, box-shadow .13s;
}
body.hx .card-field.pp-card-field-focus,
body.hx .card-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
body.hx .card-field.pp-card-field-invalid { border-color: var(--bad); }
body.hx .card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.hx #card-submit { width: 100%; justify-content: center; margin-top: 4px; }
body.hx #card-submit[disabled] { background: var(--line-strong); cursor: not-allowed; }
body.hx .card-secure {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--ink-mute);
  text-align: center;
}

/* ============================================== the three self-guided paths ==
 *
 * Three separate courses sold side by side on the home page. They are coloured
 * differently on purpose: a parent looking for Algebra I, a high-schooler
 * looking for the ACT and a pre-med looking for the MCAT should each be able to
 * tell at a glance which one is theirs — and, just as importantly, that the
 * other two are not the same product.
 */
body.hx .hx-paths {
  margin-bottom: 26px;
  /* Narrower than hx-grid-2's 280px so three fit across before wrapping. */
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

body.hx .hx-path { border-top: 4px solid var(--line); position: relative; }
body.hx .hx-path h3 { margin: 2px 0 8px; font-size: 1.3rem; }
body.hx .hx-path-kicker {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin: 0;
}
body.hx .hx-path-list { margin: 14px 0 18px; padding-left: 18px; }
body.hx .hx-path-list li { font-size: .92rem; color: var(--ink-soft); margin-bottom: 5px; }
body.hx .hx-path-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* K-12: the site's own blue. */
body.hx .hx-path-k12 { border-top-color: var(--brand); }
body.hx .hx-path-k12 .hx-path-kicker { color: var(--brand-deep); }

/* MCAT: a distinct teal, so the two courses never read as one product. */
body.hx .hx-path-mcat { border-top-color: #0f8a7e; }
body.hx .hx-path-mcat .hx-path-kicker { color: #0b6b61; }
body.hx .hx-path-mcat .hx-btn { background: #0f8a7e; border-color: #0f8a7e; }
body.hx .hx-path-mcat .hx-btn:hover { background: #0b6b61; border-color: #0b6b61; }
body.hx .hx-path-mcat .hx-btn-ghost {
  background: transparent; color: #0b6b61; border-color: #0f8a7e;
}
body.hx .hx-path-mcat .hx-btn-ghost:hover { background: #e6f4f2; color: #0b6b61; }

/* SAT & ACT: amber, chosen because it is the one hue on this page that cannot
   be mistaken for either the blue or the teal at a glance. */
body.hx .hx-path-tests { border-top-color: #c2690c; }
body.hx .hx-path-tests .hx-path-kicker { color: #8a4708; }
body.hx .hx-path-tests .hx-btn { background: #a8560a; border-color: #a8560a; }
body.hx .hx-path-tests .hx-btn:hover { background: #8a4708; border-color: #8a4708; }
body.hx .hx-path-tests .hx-btn-ghost {
  background: transparent; color: #8a4708; border-color: #c2690c;
}
body.hx .hx-path-tests .hx-btn-ghost:hover { background: #fdf0e3; color: #8a4708; }
