/* ===========================================================================
   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;
  /* Headings sit a shade deeper than body text, so a page has a clear
     hierarchy before any size or weight is applied. */
  --ink-head:     #0b1b33;
  --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-wash:   #d4e4fb;   /* strong enough to read as a highlight */
  --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-head);
  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;
}
/* --brand-tint is nearly white and vanished against the page. Selection has
   to be obvious or it does not tell you anything. */
body.hx ::selection { background: #9ec5f8; color: #0b1b33; }

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

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

.hx-shell { display: block; }

/*
 * The rail scrolls in the MIDDLE only.
 *
 * It used to scroll as one piece, so reaching Sign in at the bottom pushed the
 * wordmark off the top and you lost both your place and the thing telling you
 * whose site you were on. The brand is pinned, the footer is pinned, and the
 * navigation between them takes whatever height is left.
 */
.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: hidden;
  overscroll-behavior: contain;
  z-index: 200;
  transition: width .18s ease;
}
.hx-rail > .hx-brand,
.hx-rail > .hx-rail-foot { flex: 0 0 auto; }
.hx-rail > .hx-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;          /* without this a flex child refuses to shrink */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hx-rail-scroll::-webkit-scrollbar { width: 8px; }
.hx-rail-scroll::-webkit-scrollbar-thumb { background: #1e2c44; border-radius: 8px; }

/* ---- collapsed ----
   Icons only, so the rail stops competing with the page for width on a laptop
   screen. The choice is remembered, because re-collapsing it on every page
   load would make it a toy rather than a setting. */
body.hx.hx-rail-collapsed { --rail-w: 72px; }
body.hx.hx-rail-collapsed .hx-rail-label,
body.hx.hx-rail-collapsed .hx-tagline,
body.hx.hx-rail-collapsed .hx-nav-group,
body.hx.hx-rail-collapsed .hx-feature,
body.hx.hx-rail-collapsed .hx-rail-foot a:not(.hx-phone) { display: none; }
body.hx.hx-rail-collapsed .hx-brand { justify-content: center; padding: 14px 0; }
body.hx.hx-rail-collapsed .hx-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
body.hx.hx-rail-collapsed .hx-ico { margin: 0; }

.hx-rail-toggle {
  position: absolute; top: 14px; right: 10px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rail-line); border-radius: 6px;
  color: var(--rail-ink-dim); cursor: pointer; font-size: 13px; line-height: 1;
  z-index: 2;
}
.hx-rail-toggle:hover { color: var(--rail-ink); border-color: var(--rail-ink-dim); }
body.hx.hx-rail-collapsed .hx-rail-toggle { right: 50%; transform: translateX(50%); top: 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;
}
/* The logo used to carry a pulsing point of light that animated forever. A
   thing that moves in the corner of every page is a thing the eye keeps
   returning to, and it was competing with the text for attention. Gone. */

/* ---- collapsed rail: the mark, not the wordmark ----
   At 72px the full wordmark is unreadable and clips. The square mark is the
   same H the browser tab shows, so collapsing changes the size of the brand
   rather than swapping it for a different one. */
body.hx .hx-brand-mark { display: none; width: 34px; height: 34px; border-radius: 7px; }
body.hx.hx-rail-collapsed .hx-logo-box { display: none; }
body.hx.hx-rail-collapsed .hx-brand-mark { display: block; }
body.hx.hx-rail-collapsed .hx-phone { display: none; }
body.hx.hx-rail-collapsed .hx-rail-foot { padding: 10px 0; text-align: center; }

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; }
/*
 * The ghost button defaults to something readable on a LIGHT surface.
 *
 * It used to be white text on a transparent background full stop, which works
 * on the dark hero it was written for and is invisible everywhere else — the
 * second button on a white card simply was not there. The white variant is now
 * scoped to the dark surfaces that need it.
 */
body.hx .hx-btn-ghost {
  background: transparent;
  border-color: var(--brand-line);
  color: var(--brand-deep);
  box-shadow: none;
}
body.hx .hx-btn-ghost:hover { background: var(--brand-tint); color: var(--brand-deep); }

/* On a dark surface, the other way round. */
body.hx .hx-hero .hx-btn-ghost,
body.hx .hx-rail .hx-btn-ghost,
body.hx .xm-room .hx-btn-ghost {
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
body.hx .hx-hero .hx-btn-ghost:hover,
body.hx .hx-rail .hx-btn-ghost:hover,
body.hx .xm-room .hx-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
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; }

/* =========================================================================
   No backdrop wordmark
   -------------------------------------------------------------------------
   There used to be a large HARRIS ACADEMIA mark fixed behind the content. It
   read through the gutters and the gaps between cards, and on a light page
   that is not branding — it is a second thing competing with the sentence
   somebody is trying to read. The rail already says whose site this is on
   every screen.

   .hx-content keeps its stacking context: cards and sticky headers were
   written expecting it.
   ========================================================================= */

body.hx .hx-content { position: relative; z-index: 1; }
}

@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; }

/* ============================================ the three courses, and below ==
 *
 * The subscriptions come first on the home page and the explanation of what
 * self-guided learning is sits underneath them. Somebody who already knows
 * they want the ACT should reach a button without reading a page about how
 * the teaching works; somebody who does not know what "self-guided" means
 * finds that immediately after.
 */

body.hx .hx-section-head {
  font-size: 1.5rem; margin: 6px 0 4px; letter-spacing: -0.01em;
  /* Offsets the sticky header so an in-page jump does not hide the heading. */
  scroll-margin-top: 84px;
}
body.hx .hx-section-sub {
  margin: 0 0 20px; max-width: 62ch; color: var(--ink-soft); font-size: 1rem;
}

/* The price, stated on the card rather than a click away. A course whose cost
 * is only discoverable on the checkout page reads as something to be wary of. */
body.hx .hx-price {
  margin: 0 0 2px; font-size: 1.45rem; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em;
}
body.hx .hx-price span {
  font-size: .8rem; font-weight: 600; color: var(--ink-mute); letter-spacing: 0;
}

/* SAT and ACT are two subscriptions in one card, so the free routes into each
 * move to a line of their own rather than competing with two buy buttons. */
body.hx .hx-path-aside {
  margin: 10px 0 0; font-size: .85rem; color: var(--ink-mute);
}

body.hx .hx-sgl { margin: 34px 0 10px; }

/* The grade bands, spelled out. "K-12" does not answer the question a parent
 * is actually asking, which is whether their child's year is covered. */
body.hx .hx-grades {
  display: grid; gap: 16px; margin: 0 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
body.hx .hx-grade-col {
  background: var(--card-sunk); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
body.hx .hx-grade-col h4 {
  margin: 0 0 8px; font-size: .95rem; color: var(--brand-deep);
}
body.hx .hx-grade-col p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
body.hx .hx-grade-note {
  margin-top: 8px !important; font-size: .82rem !important; color: var(--ink-mute) !important;
}

body.hx .hx-sgl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }

/* =========================================================================
   Marketing shell — the top bar, and the sections that hang off it
   -------------------------------------------------------------------------
   The rail is navigation for somebody already inside a course. A visitor who
   has just arrived needs one line saying what is here and one button to
   start, which is what this is. One row, nothing else — the note was that the
   bar takes attention away from the content.
   ========================================================================= */

body.hx.hx-marketing .hx-content { margin-left: 0; }

body.hx .mk-bar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 22px;
  height: 58px; padding: 0 22px;
  background: rgba(10,16,28,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid #16233a;
}
body.hx .mk-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff; font-weight: 700; letter-spacing: -.01em;
}
body.hx .mk-mark { width: 26px; height: 26px; border-radius: 6px; display: block; }
body.hx .mk-brand-name { font-size: 1rem; }

body.hx .mk-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
body.hx .mk-drop { position: relative; }
body.hx .mk-drop-btn {
  background: none; border: 0; cursor: pointer;
  color: #c7d3e6; font: inherit; font-size: .93rem; font-weight: 600;
  padding: 8px 12px; border-radius: 8px;
}
body.hx .mk-drop-btn:hover { color: #fff; background: #16233a; }
body.hx .mk-caret { font-size: .7em; opacity: .7; }
body.hx .mk-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 248px; padding: 7px;
  background: #0f1a2d; border: 1px solid #1e2c46; border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
body.hx .mk-drop.open .mk-menu { display: block; }
body.hx .mk-menu a {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: #c7d3e6; text-decoration: none; font-size: .92rem;
}
.mk-menu a:hover { background: #17253d; color: #fff; }

/* The one button on the bar. It is the sign-in. */
body.hx .mk-cta {
  margin-left: auto;
  display: inline-flex; align-items: center;
  background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 650; font-size: .92rem;
  padding: 9px 18px; border-radius: 999px;
}
body.hx .mk-cta:hover { background: #2f6fe0; }
body.hx .mk-burger { display: none; }

/* Scoped under body.hx like the rules above, or those would win on specificity
   and the phone menu would sit permanently open with no burger to close it. */
@media (max-width: 820px) {
  body.hx .mk-nav {
    display: none; position: absolute; top: 58px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px;
    background: #0f1a2d; border-bottom: 1px solid #1e2c46;
  }
  body.hx .mk-bar.open .mk-nav { display: flex; }
  body.hx .mk-drop-btn { text-align: left; width: 100%; }
  body.hx .mk-menu { position: static; display: block; border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 10px; }
  body.hx .mk-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-left: 8px;
    background: none; border: 1px solid #27374f; border-radius: 8px;
    color: #c7d3e6; font-size: 18px; cursor: pointer;
  }
  body.hx .mk-cta { margin-left: auto; padding: 8px 13px; white-space: nowrap; font-size: .86rem; }
  /* On a phone the mark alone identifies the site; the words were wrapping the
     bar onto two lines, which is the opposite of keeping it out of the way. */
  body.hx .mk-brand-name { display: none; }
  body.hx .mk-bar { gap: 10px; padding: 0 12px; }
}
@media (max-width: 400px) {
  body.hx .mk-cta { padding: 8px 11px; font-size: .82rem; }
}

/* ---- tabbed sections ----------------------------------------------------
   The note was that a row of cards with nothing attached under it reads as
   empty, and that topics shown flat are confusing. A tab strip joined to the
   panel below it fixes both: one row of choices, one panel that belongs to
   the chosen one. */
body.hx .mk-tabs { margin: 0 0 30px; }
body.hx .mk-tablist {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: -1px;
}
body.hx .mk-tab {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 11px 18px; font: inherit; font-size: .95rem; font-weight: 650;
  color: var(--ink-mute);
}
body.hx .mk-tab:hover { color: var(--ink-head); background: var(--card-sunk); }
body.hx .mk-tab[aria-selected="true"] {
  color: var(--ink-head);
  background: var(--card);
  border-color: var(--line);
  /* Sits over the panel's top edge, so the two read as one object. */
  position: relative; z-index: 1;
}
body.hx .mk-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 26px 26px 22px;
}
body.hx .mk-panel[hidden] { display: none; }
body.hx .mk-panel h3 { margin-top: 0; }

/* =========================================================================
   Hero visual, floating shapes, and the stats strip
   -------------------------------------------------------------------------
   The brief was that a test-prep site reads as bland. The answer is NOT the
   thing that was removed earlier — a point of light pulsing forever in the
   corner, which competed with the words. These shapes drift slowly, sit
   BEHIND the content at low contrast, and stop entirely for anyone who has
   asked their system to reduce motion.

   The product mockup is markup rather than a screenshot: it stays sharp at
   any size, weighs nothing, and cannot go stale when the real UI changes.
   ========================================================================= */

body.hx .hx-hero { position: relative; overflow: hidden; }

body.hx .hero-shapes {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
body.hx .hero-shapes i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(120,170,255,.30), rgba(120,170,255,0) 70%);
  animation: heroDrift 18s ease-in-out infinite;
}
body.hx .hero-shapes i:nth-child(1) { width: 320px; height: 320px; right: -60px;  top: -80px; }
body.hx .hero-shapes i:nth-child(2) { width: 220px; height: 220px; right: 180px;  bottom: -90px; animation-delay: -6s; }
body.hx .hero-shapes i:nth-child(3) { width: 140px; height: 140px; left: 44%;     top: 58%;  animation-delay: -12s; }
/* A ring rather than a blob, so the group does not read as three of one thing. */
body.hx .hero-shapes i:nth-child(4) {
  width: 180px; height: 180px; right: 42%; top: -40px;
  background: none; border: 1px solid rgba(150,195,255,.18); animation-delay: -9s;
}
@keyframes heroDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, 18px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.hx .hero-shapes i { animation: none; }
}

/* The hero becomes two columns once there is room for the mockup beside it. */
body.hx .hx-hero > * { position: relative; z-index: 1; }
@media (min-width: 1040px) {
  body.hx .hx-hero.has-shot {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px; align-items: center;
  }
  body.hx .hx-hero.has-shot .hero-copy { grid-column: 1; }
  body.hx .hx-hero.has-shot .hero-shot { grid-column: 2; }
}
body.hx .hero-shot { display: none; }
@media (min-width: 1040px) { body.hx .hero-shot { display: block; } }

/* ---- the mockup ---- */
body.hx .shot {
  background: #0d1526; border: 1px solid #22304a; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  overflow: hidden; transform: rotate(-1.1deg);
}
body.hx .shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: #0a1120; border-bottom: 1px solid #1b2941;
}
body.hx .shot-bar b { width: 9px; height: 9px; border-radius: 50%; background: #2a3a56; display: block; }
body.hx .shot-body { display: grid; grid-template-columns: 92px 1fr; min-height: 236px; }
body.hx .shot-side { background: #0a1120; border-right: 1px solid #1b2941; padding: 12px 10px; }
body.hx .shot-side span {
  display: block; height: 7px; border-radius: 4px; background: #1c2c46; margin-bottom: 9px;
}
body.hx .shot-side span.on { background: var(--brand); width: 72%; }
body.hx .shot-main { padding: 16px 16px 18px; }
body.hx .shot-main h4 { color: #e7eefb; font-size: .82rem; margin: 0 0 12px; font-weight: 650; }
body.hx .shot-row { margin-bottom: 13px; }
body.hx .shot-row p {
  margin: 0 0 6px; color: #90a4c4; font-size: .64rem; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700;
}
body.hx .shot-track { height: 7px; border-radius: 99px; background: #16233a; overflow: hidden; }
body.hx .shot-track i { display: block; height: 100%; background: var(--brand); }
body.hx .shot-track.good i { background: #1f9d74; }
body.hx .shot-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
body.hx .shot-tiles span {
  height: 34px; border-radius: 7px; background: #111e33; border: 1px solid #1d2c47;
}
body.hx .shot-tiles span:first-child { background: #16294a; border-color: #2a4166; }

/* ---- stats strip ---- */
body.hx .hx-stats {
  display: grid; gap: 1px; margin: 0 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
body.hx .hx-stats div { background: var(--card); padding: 18px 20px; }
body.hx .hx-stats strong {
  display: block; font-size: 1.65rem; font-weight: 800; color: var(--ink-head);
  letter-spacing: -.02em; line-height: 1.1;
}
body.hx .hx-stats span { font-size: .84rem; color: var(--ink-mute); }