/* MeeOpp tier-page register (Phase 1 overhaul). Scoped under .mo-tier so the
   legacy Webflow stylesheet keeps styling the shared header and footer. */
.mo-tier {
  --tier-cream: #F9F5EE;
  --tier-ink: #322F2C;
  --tier-red: #BB104E;
  --tier-ocean: #152859;
  --tier-mute: #6B6661;
  --tier-line: rgba(50, 47, 44, 0.12);
  --tier-yellow: #FFC700;
  --tier-pink: #D4185F; /* close cousin of --tier-red (#BB104E) so pink accents read as brand, not a stray neon hue */
  --tier-purple: #680C4E;
  --tier-orange: #F37400;
  --tier-green: #28C878;
  --tier-blue: #2298ED;
  font-family: 'Inter', 'Open Sans', sans-serif;
  background: var(--tier-cream);
  color: var(--tier-ink);
  line-height: 1.5;
}
.mo-tier * { box-sizing: border-box; }
/* The legacy Webflow export sets a global `p { padding-top: 117px }` and a
   global `a { display: flex }`; reset both inside the new register. */
.mo-tier p { padding-top: 0; }
.mo-tier a { display: inline; }
.mo-tier .tier-wrap { max-width: 1200px; margin: 0 auto; }
.mo-tier .tier-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--tier-red);
  font-weight: 500;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.mo-tier .tier-hero { padding: 88px 48px 72px; }
.mo-tier .tier-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 0.5px solid var(--tier-line);
  border-radius: 100px;
  font-size: 11px;
  margin-bottom: 32px;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255, 255, 255, 0.5);
}
.mo-tier .tier-status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  position: relative;
  background: var(--tier-red);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(187, 16, 78, 0.15);
}
.mo-tier .tier-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tier-red);
  animation: tier-status-pulse 2s ease-out infinite;
}
@keyframes tier-status-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-tier .tier-status-dot::after { animation: none; content: none; }
}
.mo-tier .tier-h1 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 64px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  max-width: 900px;
}
.mo-tier .tier-h1 .accent { color: var(--tier-red); font-style: italic; font-weight: 400; }
.mo-tier .tier-h1 .ocean { color: var(--tier-ocean); }
/* ui.js wraps each character of these words in a .ltr span (grouped by word
   in a .word span, since inline-block letters would otherwise allow a
   line-break between any two of them) so hovering can ripple a lift/zoom
   across the letters in sequence, staggered by each letter's index via --i.
   ui.js also plays this once automatically on scroll into view (adding
   .wave-play, then removing it once the ripple finishes), so it isn't
   gated to hover-only devices — the transition/delay setup below is
   unconditional for that reason; only the real :hover trigger stays inside
   @media (hover: hover), so a touch tap doesn't leave it "stuck" lifted. */
/* Add new accent phrases to this list (both selectors below) as needed. */
:is(.mo-tier .tier-h1 .accent, .mo-tier .tier-h1 .ocean, .wm-h1 .accent,
    .mo-tier .evidence-title em, .mo-tier .tier-closing-line em,
    body .wm-band-title em, .mo-tier .outcomes-title em) .word {
  display: inline-block;
  white-space: nowrap;
}
:is(.mo-tier .tier-h1 .accent, .mo-tier .tier-h1 .ocean, .wm-h1 .accent,
    .mo-tier .evidence-title em, .mo-tier .tier-closing-line em,
    body .wm-band-title em, .mo-tier .outcomes-title em) .ltr {
  display: inline-block;
  transition: transform 0.25s ease;
  transition-delay: calc(var(--i, 0) * 30ms);
}
:is(.mo-tier .tier-h1 .accent, .mo-tier .tier-h1 .ocean, .wm-h1 .accent,
    .mo-tier .evidence-title em, .mo-tier .tier-closing-line em,
    body .wm-band-title em, .mo-tier .outcomes-title em).wave-play .ltr {
  transform: translateY(-4px) scale(1.05);
}
@media (hover: hover) {
  :is(.mo-tier .tier-h1 .accent, .mo-tier .tier-h1 .ocean, .wm-h1 .accent,
      .mo-tier .evidence-title em, .mo-tier .tier-closing-line em,
      body .wm-band-title em, .mo-tier .outcomes-title em):hover .ltr {
    transform: translateY(-4px) scale(1.05);
  }
}
.mo-tier .tier-h2 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.mo-tier .tier-deck {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(50, 47, 44, 0.72);
  max-width: 620px;
  margin: 0 0 36px;
}
.mo-tier .tier-deck strong { color: var(--tier-ink); font-weight: 500; }
.mo-tier .tier-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mo-tier .tier-btn-primary {
  background: var(--tier-ink);
  color: var(--tier-cream);
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Every other button family on the site gives hover feedback (mo-default-button
   swaps color, wm-cta-secondary adds a shadow); these two had none. */
.mo-tier .tier-btn-primary:hover { opacity: 0.86; transform: translateY(-1px); }
.mo-tier .tier-btn-secondary {
  color: var(--tier-ink);
  font-size: 13px;
  padding: 14px 18px;
  background: transparent;
  /* --tier-line (0.5px, 12% opacity) is tuned as a subtle divider hairline,
     not a button stroke — a real actionable control needs more contrast to
     read as clickable, so this keeps 1px but bumps the opacity to match
     .wm-cta-secondary's stroke weight/opacity. */
  border: 1px solid rgba(50, 47, 44, 0.3);
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.mo-tier .tier-btn-secondary:hover { border-color: var(--tier-ink); background: rgba(50, 47, 44, 0.04); transform: translateY(-1px); }
html[data-theme="dark"] .mo-tier .tier-btn-secondary:hover { border-color: rgba(233, 227, 216, 0.72); background: rgba(233, 227, 216, 0.06); }
.mo-tier .tier-band {
  background: var(--tier-ocean);
  color: var(--tier-cream);
  padding: 80px 48px;
  position: relative;
  overflow: hidden;
}
.mo-tier .tier-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  /* animations.js updates --bg-zoom on scroll (same mechanism as
     .section-ocean below); the section's own overflow:hidden keeps the
     scaled-up grid from poking past its edges. */
  transform: scale(var(--bg-zoom, 1));
  will-change: transform;
}
.mo-tier .tier-band > .tier-wrap { position: relative; }
.mo-tier .tier-band-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 48px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.mo-tier .tier-band-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(249, 245, 238, 0.55);
}
.mo-tier .tier-band-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  max-width: 520px;
  text-align: right;
  line-height: 1.3;
  color: var(--tier-cream);
}
.mo-tier .tier-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
}
.mo-tier .tier-metric { background: #1b3067; padding: 32px 26px 34px; }
.mo-tier .tier-metric-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(249, 245, 238, 0.65);
  margin-bottom: 18px;
  letter-spacing: 0.1em;
  /* Reserves 2 lines' worth of height (33px, at this 11px/1.5 line-height)
     regardless of whether this particular label actually wraps to 1 line
     or 2 — otherwise the numeral below starts at a different height in
     every card whose label happens to wrap differently (e.g. "[03]
     INSTITUTIONS" at 2 lines next to "[04] COHORT" at 1), breaking the
     shared baseline between numerals in the same grid row. */
  min-height: 33px;
}
.mo-tier .tier-metric-num {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: clamp(54px, 5vw, 68px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
/* The ∞ glyph sits small and vertically centered in this serif font (it's
   not a lining figure like the digits), so at the shared font-size it reads
   noticeably smaller/lighter than "50+" beside it — but that's only a
   problem at narrow phone widths where the 2-column grid sits tight; past
   425px there's enough breathing room that the plain shared size already
   reads fine. Scaled via transform (not font-size) so the element's own
   layout box stays the same height as the numerals beside it — bumping
   font-size instead made this box taller than "50"'s, so despite both
   starting at the same top, this one's bottom edge ended up sitting well
   below "50"'s, breaking the shared baseline the two need to look aligned
   on. transform-origin anchors the scale to the bottom-left corner (the
   baseline) so it grows upward in place instead of shifting position. */
@media (max-width: 425px) {
  .mo-tier .tier-metric-num--symbol {
    display: inline-block;
    transform: scale(1.6);
    transform-origin: left bottom;
  }
}
.mo-tier .tier-metric-num span {
  font-size: 19px;
  color: rgba(249, 245, 238, 0.75);
  margin-left: 5px;
  font-weight: 400;
}
/* ui.js wraps the digits themselves in a span during the count-up (to lock
   their width); that's a span inside .tier-metric-num too, so without this
   override the rule above shrinks the number to the small suffix size. */
.mo-tier .tier-metric-num .tier-metric-count {
  font-size: inherit;
  color: inherit;
  margin-left: 0;
  font-weight: inherit;
}
.mo-tier .tier-metric-accent .tier-metric-num { color: #ff6d99; }
/* Text-led metric cards (a phrase, not a numeral) share the numeral's serif
   voice but at a size that fits a short phrase across 1-2 lines instead of
   overflowing the way the 54-68px numeral size would on running text. */
.mo-tier .tier-metric-headline {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}
.mo-tier .tier-metric-label {
  font-size: 14px;
  color: rgba(249, 245, 238, 0.92);
  margin-top: 14px;
  line-height: 1.5;
}
.mo-tier .tier-trust { padding: 40px 48px; border-top: 0.5px solid var(--tier-line); }
.mo-tier .tier-trust-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--tier-mute);
  margin-bottom: 18px;
}
.mo-tier .tier-trust-logos { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; }
.mo-tier .tier-trust-logo {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 20px;
  font-weight: 500;
}
.mo-tier .tier-trust-sep { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; color: var(--tier-line); }
html[data-theme="dark"] .mo-tier .tier-trust-sep { color: rgba(233, 227, 216, 0.28); }
.mo-tier .tier-trust-veil {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--tier-mute);
  margin-left: auto;
  letter-spacing: 0.04em;
}
.mo-tier .tier-closing {
  padding: 72px 48px;
  border-top: 0.5px solid var(--tier-line);
}
.mo-tier .tier-closing .tier-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.mo-tier .tier-closing-line {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 560px;
}
.mo-tier .tier-closing-line em { color: var(--tier-red); font-style: italic; font-weight: 400; }
@media (max-width: 980px) {
  .mo-tier .tier-hero { padding: 56px 24px 48px; }
  .mo-tier .tier-h1 { font-size: 42px; }
  .mo-tier .tier-band, .mo-tier .tier-trust, .mo-tier .tier-closing { padding-left: 24px; padding-right: 24px; }
  .mo-tier .tier-metrics { grid-template-columns: 1fr 1fr; }
  .mo-tier .tier-band-title { text-align: left; }
}

/* ===== Universities page ===== */

.mo-tier .uni-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.mo-tier .uni-visual { background: #fff; border-radius: 16px; padding: 28px; border: 0.5px solid rgba(0,0,0,0.08); }
.mo-tier .uni-hero-img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 16px; }
/* animations.js sets the initial inline clip-path and clears it once the
   card's own fade/lift finishes, wiping the illustration in left-to-right. */
@media (prefers-reduced-motion: no-preference) {
  .mo-tier .uni-hero-img { transition: clip-path 2.2s cubic-bezier(0.16, 1, 0.3, 1); }
}
.mo-tier .uni-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mo-tier .uni-stat { padding: 16px; background: var(--tier-cream); border-radius: 10px; }
.mo-tier .uni-stat-num { font-family: 'Cormorant Garamond','EB Garamond',serif; font-size: 34px; font-weight: 600; color: var(--tier-red); line-height: 1; display: flex; align-items: flex-end; min-height: 38px; }
.mo-tier .uni-stat-label { font-size: 11px; color: rgba(50,47,44,0.6); margin-top: 6px; line-height: 1.3; }
.mo-tier .uni-quote { padding: 16px; background: var(--tier-cream); border-radius: 10px; border-left: 2px solid var(--tier-red); }
.mo-tier .uni-quote-text { font-family: 'Cormorant Garamond','EB Garamond',serif; font-style: italic; font-size: 16px; line-height: 1.4; margin-bottom: 8px; }
.mo-tier .uni-quote-attr { font-size: 11px; color: rgba(50,47,44,0.6); }
.mo-tier .uni-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 48px 72px; max-width: 1200px; margin: 0 auto; }
.mo-tier .uni-path { background: #fff; border: 0.5px solid var(--tier-line); border-radius: 14px; padding: 28px; text-decoration: none; color: var(--tier-ink); display: block; }
.mo-tier .uni-path-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--tier-red); margin-bottom: 12px; }
.mo-tier .uni-path-title { font-family: 'Cormorant Garamond','EB Garamond',serif; font-size: 24px; font-weight: 500; margin-bottom: 8px; }
.mo-tier .uni-path-body { font-size: 14px; line-height: 1.55; color: rgba(50,47,44,0.72); }
@media (max-width: 980px) {
  .mo-tier .uni-hero-grid { grid-template-columns: 1fr; }
  .mo-tier .uni-paths { grid-template-columns: 1fr; padding: 0 24px 48px; }
}

/* Universities: product story (syllabus flow, tracking, dashboards, roadmap).
   Mock UI cards stay light in dark mode (screenshot convention, like .report-mock). */
.mo-tier .uni-section { padding: 72px 48px; }
.mo-tier .uni-mock { background: #fff; border-radius: 16px; border: 0.5px solid rgba(50, 47, 44, 0.12); box-shadow: 0 34px 70px -34px rgba(21, 40, 89, 0.5); overflow: hidden; color: #322F2C; margin: 0; }
.mo-tier .uni-mock-body { padding: 20px 22px 22px; }

/* Syllabus-to-course mock */
.mo-tier .syl-file { display: flex; align-items: center; gap: 10px; background: #f9f5ee; border: 0.5px dashed rgba(50, 47, 44, 0.3); border-radius: 10px; padding: 12px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #322F2C; }
.mo-tier .syl-file-ok { margin-left: auto; color: #1b7a4b; font-weight: 700; white-space: nowrap; }
.mo-tier .syl-rows { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mo-tier .syl-rows li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: rgba(50, 47, 44, 0.75); border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); padding-bottom: 8px; }
.mo-tier .syl-rows li b { color: #322F2C; font-weight: 500; text-align: right; }
.mo-tier .syl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mo-tier .syl-btn { background: var(--tier-ocean); color: #F9F5EE; font-size: 12px; padding: 9px 14px; border-radius: 6px; font-weight: 500; }
.mo-tier .syl-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--tier-mute); }

/* Submission-tracking gradebook mock */
.mo-tier .trk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mo-tier .trk-table th { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.75); font-weight: 500; text-align: left; padding: 0 6px 10px; }
.mo-tier .trk-table th.num, .mo-tier .trk-table td.num { text-align: center; }
.mo-tier .trk-table td { padding: 7px 6px; border-top: 0.5px solid rgba(50, 47, 44, 0.08); color: #322F2C; white-space: nowrap; }
.mo-tier .trk-avg { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.mo-tier .trk-chip { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; border: 1.5px solid; }
.mo-tier .trk-a { color: #1b7a4b; border-color: rgba(40, 200, 120, 0.55); background: rgba(40, 200, 120, 0.12); }
.mo-tier .trk-b { color: #8a6d00; border-color: rgba(181, 137, 0, 0.5); background: rgba(255, 199, 0, 0.14); }
.mo-tier .trk-c { color: #b45309; border-color: rgba(243, 116, 0, 0.5); background: rgba(243, 116, 0, 0.1); }
.mo-tier .trk-miss { color: var(--tier-red); border-color: rgba(187, 16, 78, 0.45); border-style: dashed; background: transparent; }
.mo-tier .trk-state { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; }
.mo-tier .trk-state i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.mo-tier .trk-on i { background: #28C878; }
.mo-tier .trk-late i { background: var(--tier-orange); }
.mo-tier .trk-missing i { background: var(--tier-red); }
.mo-tier .trk-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.mo-tier .trk-legend span { display: inline-flex; align-items: center; font-size: 11px; color: rgba(50, 47, 44, 0.75); }

/* Weekly class report mock (modeled on the product's report screen):
   submission donut, AI class feedback, per-question averages, falling-behind. */
.mo-tier .wkrep { background: #fff; border-radius: 16px; border: 0.5px solid rgba(50, 47, 44, 0.12); box-shadow: 0 34px 70px -34px rgba(21, 40, 89, 0.5); overflow: hidden; color: #322F2C; margin: 0; }
.mo-tier .wkrep-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 22px; background: #f9f5ee; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.mo-tier .wkrep-week { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; background: #322F2C; color: #F9F5EE; border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
.mo-tier .wkrep-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 21px; font-weight: 600; line-height: 1.1; }
.mo-tier .wkrep-meta { font-size: 11.5px; color: rgba(50, 47, 44, 0.75); margin-top: 2px; }
.mo-tier .wkrep-done { margin-left: auto; text-align: right; }
.mo-tier .wkrep-done-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #1b7a4b; }
.mo-tier .wkrep-done-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.75); margin-top: 3px; }
.mo-tier .wkrep-cols { display: grid; grid-template-columns: 168px 1fr; gap: 20px; padding: 18px 22px 14px; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); }
.mo-tier .wkrep-kicker { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.75); margin-bottom: 10px; }
.mo-tier .wkrep-donut { width: 96px; height: 96px; display: block; margin-bottom: 10px; }
.mo-tier .wkrep-donut .num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 24px; font-weight: 600; fill: #322F2C; }
.mo-tier .wkrep-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mo-tier .wkrep-sub li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(50, 47, 44, 0.75); }
.mo-tier .wkrep-sub li b { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #322F2C; }
.mo-tier .wkrep-sub i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mo-tier .wkrep-fb-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.82); }
.mo-tier .wkrep-fb-item + .wkrep-fb-item { margin-top: 10px; }
.mo-tier .wkrep-fb-tag { flex: none; min-width: 66px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.1em; padding: 3px 7px; border-radius: 4px; margin-top: 2px; }
.mo-tier .wkrep-tag-strength { background: rgba(40, 200, 120, 0.14); color: #1b7a4b; }
.mo-tier .wkrep-tag-gap { background: rgba(243, 116, 0, 0.12); color: #b45309; }
.mo-tier .wkrep-qs { padding: 14px 22px 6px; }
.mo-tier .wkrep-q { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); }
.mo-tier .wkrep-q:last-child { border-bottom: 0; }
.mo-tier .wkrep-q-text { font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.mo-tier .wkrep-q-find { font-size: 11.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.75); margin-top: 4px; }
.mo-tier .wkrep-q-find b { color: rgba(50, 47, 44, 0.8); font-weight: 600; }
.mo-tier .wkrep-q-avg { flex: none; text-align: center; min-width: 52px; }
.mo-tier .wkrep-q-avg-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 27px; font-weight: 700; line-height: 1; }
.mo-tier .wkrep-avg-low { color: var(--tier-red); }
.mo-tier .wkrep-avg-mid { color: #b45309; }
.mo-tier .wkrep-avg-high { color: #1b7a4b; }
.mo-tier .wkrep-q-avg-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(50, 47, 44, 0.45); margin-top: 4px; }
.mo-tier .wkrep-flag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 22px 14px; background: rgba(187, 16, 78, 0.06); border-left: 3px solid var(--tier-red); border-radius: 8px; padding: 11px 14px; font-size: 12px; color: rgba(50, 47, 44, 0.8); }
.mo-tier .wkrep-flag-name { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; background: #fff; border: 0.5px solid rgba(187, 16, 78, 0.3); color: var(--tier-red); border-radius: 100px; padding: 3px 10px; }
.mo-tier .wkrep-gen { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 22px 18px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.75); }
@media (max-width: 560px) {
  .mo-tier .wkrep-cols { grid-template-columns: 1fr; }
  .mo-tier .wkrep-done { margin-left: 0; text-align: left; }
}

/* Professor/student dashboard duo: mini UI fragments inside feature cards */
.mo-tier .uni-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mo-tier .uni-mini { background: #f9f5ee; border: 0.5px solid rgba(50, 47, 44, 0.1); border-radius: 12px; padding: 14px 16px; margin-top: 20px; color: #322F2C; }
.mo-tier .uni-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mo-tier .uni-todo li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); padding-bottom: 8px; }
.mo-tier .uni-todo li:last-child { border-bottom: 0; padding-bottom: 0; }
.mo-tier .uni-todo-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.mo-tier .uni-tag-do { background: rgba(187, 16, 78, 0.1); color: var(--tier-red); }
.mo-tier .uni-tag-new { background: rgba(21, 40, 89, 0.1); color: var(--tier-ocean); }
.mo-tier .uni-tag-ok { background: rgba(40, 200, 120, 0.14); color: #1b7a4b; }
.mo-tier .uni-spark { width: 100%; height: auto; display: block; }
.mo-tier .uni-spark text { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: rgba(50, 47, 44, 0.45); }
.mo-tier .uni-mini-caption { font-size: 11.5px; color: rgba(50, 47, 44, 0.75); margin-top: 10px; line-height: 1.45; }

/* Roadmap strip: red-highlighted doc items ship soon; label them honestly */
.mo-tier .uni-soon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mo-tier .uni-soon-card { border: 1px dashed rgba(50, 47, 44, 0.28); border-radius: 14px; padding: 22px 20px; }
.mo-tier .uni-soon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mo-tier .uni-soon-head .uni-soon-tag { margin-bottom: 0; }
.mo-tier .uni-soon-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(50, 47, 44, 0.06); color: var(--tier-mute); flex: none; }
.mo-tier .uni-soon-icon svg { width: 19px; height: 19px; }
.mo-tier .uni-soon-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #B45309; background: rgba(255, 199, 0, 0.18); border: 0.5px solid rgba(180, 83, 9, 0.35); border-radius: 4px; padding: 2px 7px; margin-bottom: 14px; }
.mo-tier .uni-soon-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 21px; font-weight: 500; line-height: 1.15; margin-bottom: 8px; }
.mo-tier .uni-soon-body { font-size: 13.5px; line-height: 1.55; color: rgba(50, 47, 44, 0.7); }
@media (max-width: 980px) {
  .mo-tier .uni-section { padding: 56px 24px; }
  .mo-tier .uni-soon-grid { grid-template-columns: 1fr 1fr; }
  .mo-tier .uni-duo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mo-tier .uni-soon-grid { grid-template-columns: 1fr; }
  .mo-tier .trk-table th.wk4, .mo-tier .trk-table td.wk4, .mo-tier .trk-table th.wk5, .mo-tier .trk-table td.wk5 { display: none; }
  /* Tighten cells so the remaining columns (incl. the LATEST status) fit the
     phone-width mock instead of the last column clipping off the right edge. */
  .mo-tier .trk-table { font-size: 11px; }
  .mo-tier .trk-table th, .mo-tier .trk-table td { padding-left: 3px; padding-right: 3px; }
  .mo-tier .trk-chip { width: 22px; height: 22px; font-size: 10px; }
}
html[data-theme="dark"] .mo-tier .uni-soon-card { border-color: rgba(233, 227, 216, 0.28); }
html[data-theme="dark"] .mo-tier .uni-soon-icon { background: rgba(233, 227, 216, 0.1); color: rgba(233, 227, 216, 0.65); }
html[data-theme="dark"] .mo-tier .uni-soon-title { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .uni-soon-body { color: rgba(233, 227, 216, 0.7); }

/* ===== Packs page ===== */

/* Two background layers: the original static yellow->cream gradient stays
   exactly as designed (never moves — its own background-position is always
   pinned to "0% 0%" below), and a soft warm-white glow blob drifts on top of
   it. The blob fades to fully *transparent* (not a matched color stop), so
   it blends with whatever's beneath it automatically at any drift position
   — no seam math needed the way the flat cream background required. */
.mo-tier .pack-hero {
  padding: 56px 48px 36px;
  text-align: center;
  background-image:
    radial-gradient(40% 40% at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--tier-yellow) 0%, var(--tier-cream) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 160% 160%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .mo-tier .pack-hero { animation: pack-hero-blob 12s ease-in-out infinite; }
}
@keyframes pack-hero-blob {
  0%, 100% { background-position: 30% 25%, 0% 0%; }
  25% { background-position: 70% 20%, 0% 0%; }
  50% { background-position: 65% 75%, 0% 0%; }
  75% { background-position: 25% 70%, 0% 0%; }
}
.mo-tier .pack-hero .tier-label { color: var(--tier-purple); }
.mo-tier .pack-hero .tier-h1 { margin-left: auto; margin-right: auto; max-width: 720px; font-size: 52px; }
.mo-tier .pack-hero .tier-deck { margin-left: auto; margin-right: auto; }
/* The gradient stays a light yellow->cream band even in dark mode (intentional,
   it's a promo band), so its own text keeps the dark ink color; only the tail
   of the gradient shifts toward the page background instead of glaring white. */
/* Dark mode mirrors the light hero (dark text on a light gold->cream wash) as
   light text on a dark warm->page wash. The old rule kept the gradient light at
   the top and painted every line with --tier-ink, so the deck — which sits low,
   over the near-black end of the gradient — dropped to ~1.4:1 contrast. */
/* #6B4F14 is a darkened version of this component's own #E0B34D gold accent
   (used for .tier-label below) — the previous #2A2412 was so desaturated it
   read as plain dark brown, with no visible gold/yellow identity at all. */
html[data-theme="dark"] .mo-tier .pack-hero {
  /* Mirrors the light-mode rule's structure (same glow shape, same gradient
     shape) but keeps the muted olive/brown gold (#59400F, a darkened version
     of this component's own --tier-yellow) rather than the bright light-mode
     yellow — full brightness read as glaring against the dark surface. The
     glow itself is dark (this site's standard dark surface color, #14130F)
     instead of white — a white blob read as a glaring highlight against the
     dark band; a dark glow reads as a shadow drifting over the gold instead,
     the mirror-image of light mode's white-on-yellow highlight. Text stays
     this site's normal dark-mode light color (no per-line override). */
  background-image:
    radial-gradient(40% 40% at 50% 50%, rgba(20, 19, 15, 0.9) 0%, rgba(20, 19, 15, 0.35) 40%, rgba(20, 19, 15, 0) 70%),
    linear-gradient(180deg, #59400F 0%, #14130F 100%);
  background-size: 160% 160%, 100% 100%;
}
.mo-tier .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 32px 48px 24px; max-width: 1200px; margin: 0 auto; }
.mo-tier .pack-card-stage { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tier-purple); margin-bottom: 6px; }
html[data-theme="dark"] .mo-tier .pack-card-stage { color: #d68fbe; }
.mo-tier .pack-card { background: #fff; border-radius: 14px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; text-decoration: none; color: var(--tier-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
/* Row-by-row fade/lift on scroll (animations.js groups cards into rows by
   their actual rendered position — the previous generic reveal staggered by
   sibling index modulo 4, which doesn't line up with this grid's 3 columns,
   so row 2's first card revealed at the same time as row 1's first card
   instead of after it). */
@media (prefers-reduced-motion: no-preference) {
  .mo-tier .pack-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mo-tier .pack-card.is-revealed { opacity: 1; transform: translateY(0); }
}
/* Placed after the reveal block on purpose: ".pack-card.is-revealed" and
   ".pack-card:hover" tie on specificity (three classes/pseudo-classes
   each), so whichever comes later in the file wins — with :hover first,
   is-revealed's transform silently overrode it once a card had settled in,
   leaving only the box-shadow visible on hover instead of the lift/zoom. */
.mo-tier .pack-card:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.18); }
html[data-theme="dark"] .mo-tier .pack-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .pack-card-cat,
html[data-theme="dark"] .mo-tier .pack-card-desc { color: rgba(233, 227, 216, 0.65); }
html[data-theme="dark"] .mo-tier .pack-card-title { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .pack-card-tag { border-left-color: rgba(233, 227, 216, 0.24); color: #55b8f5; }
.mo-tier .pack-card-img { min-height: 132px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond','EB Garamond',serif; font-size: 22px; font-weight: 600; color: #fff; text-align: center; padding: 16px; line-height: 1.2; }
.mo-tier .pack-img-ocean { background: var(--tier-ocean); }
.mo-tier .pack-img-blue { background: var(--tier-blue); }
.mo-tier .pack-img-purple { background: var(--tier-purple); }
.mo-tier .pack-img-orange { background: var(--tier-orange); }
.mo-tier .pack-img-green { background: var(--tier-green); }
.mo-tier .pack-img-pink { background: var(--tier-pink); }
.mo-tier .pack-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.mo-tier .pack-card-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(50,47,44,0.5); margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; }
.mo-tier .pack-card-title { font-family: 'Cormorant Garamond','EB Garamond',serif; font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.mo-tier .pack-card-desc { font-size: 13px; color: rgba(50,47,44,0.65); line-height: 1.45; margin-bottom: 16px; flex: 1; }
.mo-tier .pack-card-link { font-size: 12px; font-weight: 500; color: var(--tier-red); font-family: 'JetBrains Mono', monospace; }
.mo-tier .pack-note { text-align: center; font-size: 12px; color: var(--tier-mute); padding: 16px 48px 8px; }
/* Arrow-nudge: ui.js wraps the trailing "→" of these card/button labels in
   its own span so hovering the card/button nudges just the arrow right,
   independent of the rest of the label staying put. .tier-btn-primary's
   arrow already ships its own span (hand-authored in the page HTML, for its
   JetBrains Mono font-family override) with this class added directly. */
.arrow-nudge { display: inline-block; transition: transform 0.2s ease; }
.sc-hub-card:hover .arrow-nudge,
.wm-cta-secondary:hover .arrow-nudge,
.mo-tier .pack-card:hover .arrow-nudge,
.mo-tier .tier-btn-primary:hover .arrow-nudge {
  transform: translateX(4px);
}
.mo-tier .pack-all { text-align: center; padding: 28px 48px 72px; }
@media (max-width: 980px) {
  .mo-tier .pack-hero { padding: 48px 24px 36px; }
  .mo-tier .pack-hero .tier-h1 { font-size: 38px; }
  .mo-tier .pack-grid { padding: 32px 24px 16px; }
}
@media (max-width: 860px) { .mo-tier .pack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mo-tier .pack-grid { grid-template-columns: 1fr; } }

/* ===== Ocean footer (site-wide) ===== */
.of-footer {
  background: #0C1A3A;
  color: rgba(249, 245, 238, 0.7);
  padding: 56px 48px 28px;
  font-size: 13px;
  font-family: 'Inter', 'Open Sans', sans-serif;
  line-height: 1.5;
}
.of-footer a { text-decoration: none; }
.of-inner {
  max-width: 1200px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.of-brand-mark {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 28px;
  color: #F9F5EE;
  font-weight: 600;
  margin-bottom: 12px;
}
.of-tag {
  font-size: 13px;
  color: rgba(249, 245, 238, 0.65);
  line-height: 1.55;
  max-width: 280px;
  margin: 0 0 16px;
  padding-top: 0;
}
.of-social { display: flex; gap: 14px; align-items: center; }
.of-social-link { color: rgba(249, 245, 238, 0.6); }
.of-social-link:hover { color: #F9F5EE; }
.of-social-icon svg { width: 18px; height: 18px; display: block; }
.of-col-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(249, 245, 238, 0.45);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.of-links { display: flex; flex-direction: column; gap: 9px; }
.of-links a { color: rgba(249, 245, 238, 0.75); }
.of-links a:hover { color: #F9F5EE; }
.of-bottom {
  padding-top: 22px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(249, 245, 238, 0.4);
  letter-spacing: 0.04em;
}
@media (max-width: 980px) {
  .of-footer { padding: 40px 24px 24px; }
  .of-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .of-inner { grid-template-columns: 1fr; }
}

/* ===== Homepage ===== */
.mo-tier .home-hero { padding: 96px 48px 72px; }
.mo-tier .home-hero .tier-h1 { max-width: 1020px; font-size: 72px; }
.mo-tier .home-tertiary {
  margin-top: 26px;
  font-size: 12px;
  color: var(--tier-mute);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.mo-tier .home-tertiary a {
  color: var(--tier-mute);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(107, 102, 97, 0.4);
  padding-bottom: 1px;
}
.mo-tier .home-tertiary a:hover { color: var(--tier-ink); border-color: var(--tier-ink); }
.mo-tier .hero-research {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 22px;
  text-decoration: none;
  max-width: 440px;
}
.mo-tier .hero-research-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tier-red);
}
.mo-tier .hero-research-title {
  font-size: 15px;
  line-height: 1.4;
  color: var(--tier-ink);
  border-bottom: 0.5px solid var(--tier-line);
  padding-bottom: 7px;
  transition: border-color 0.2s ease;
}
.mo-tier .hero-research-arrow {
  font-family: 'JetBrains Mono', monospace;
  color: var(--tier-red);
  display: inline-block;
  transition: transform 0.2s ease;
}
.mo-tier .hero-research:hover .hero-research-title { border-color: var(--tier-ink); }
.mo-tier .hero-research:hover .hero-research-arrow { transform: translateX(4px); }
.mo-tier .home-trust {
  border-top: none;
  border-bottom: none;
  padding: 30px 48px;
  background: var(--tier-red);
}
.mo-tier .home-trust .tier-trust-label { color: rgba(255, 255, 255, 0.75); }
.mo-tier .home-trust .trust-mark { color: #ffffff; }
.mo-tier .home-trust .trust-sep { color: rgba(255, 255, 255, 0.5); }
.mo-tier .home-trust .tier-wrap {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.mo-tier .evidence-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 48px;
  gap: 48px;
  flex-wrap: wrap;
}
.mo-tier .evidence-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 620px;
  color: #F9F5EE;
  margin: 0;
}
.mo-tier .evidence-title em { color: rgba(248, 63, 127, 0.95); font-style: italic; font-weight: 400; }
.mo-tier .evidence-sub {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(249, 245, 238, 0.7);
  max-width: 360px;
  text-align: right;
}
.mo-tier .evidence-foot {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  gap: 32px;
  flex-wrap: wrap;
}
.mo-tier .evidence-foot-text {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: rgba(249, 245, 238, 0.85);
  max-width: 640px;
  line-height: 1.5;
}
.mo-tier .evidence-foot-cta {
  background: transparent;
  color: #F9F5EE;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 12px;
  border: 0.5px solid rgba(249, 245, 238, 0.4);
  text-decoration: none;
  white-space: nowrap;
}
.mo-tier .thesis { padding: 96px 48px 80px; }
.mo-tier .thesis-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 760px;
  margin: 0 0 56px;
}
.mo-tier .thesis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.mo-tier .thesis-col-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--tier-red);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.mo-tier .thesis-col-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.2;
}
.mo-tier .thesis-col-body { font-size: 15px; line-height: 1.65; color: rgba(50, 47, 44, 0.72); }
.mo-tier .thesis-col-body strong { color: var(--tier-ink); font-weight: 500; }
.mo-tier .tier-row { padding: 0 48px 88px; }
.mo-tier .tier-row-list {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--tier-line);
  border: 0.5px solid var(--tier-line);
}
.mo-tier .tier-row-item {
  background: var(--tier-cream);
  padding: 22px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tier-ink);
  transition: background 0.15s;
}
.mo-tier .tier-row-item:hover { background: #fff; }
.mo-tier .tier-row-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tier-mute);
  margin-bottom: 5px;
  text-transform: uppercase;
}
.mo-tier .tier-row-name {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 20px;
  font-weight: 500;
}
.mo-tier .tier-row-arrow { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--tier-mute); display: inline-block; transition: transform 0.2s ease; }
.mo-tier .tier-row-item:hover .tier-row-arrow,
.mo-tier .closing-path:hover .tier-row-arrow {
  transform: translateX(4px);
}
.mo-tier .home-closing { padding: 80px 48px; border-top: 0.5px solid var(--tier-line); }
.mo-tier .home-closing .tier-wrap {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 56px;
  align-items: center;
}
/* The closing line is the only content in the left column; at 32px it leaves
   the wide cell looking half-empty next to the path list. Enlarge it so the
   left side reads as a deliberate statement that balances the links. */
.mo-tier .home-closing .tier-closing-line { font-size: 40px; max-width: 480px; }
.mo-tier .closing-paths {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--tier-line);
  border-top: 0.5px solid var(--tier-line);
  border-bottom: 0.5px solid var(--tier-line);
}
.mo-tier .closing-path {
  background: var(--tier-cream);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--tier-ink);
  transition: background 0.15s;
}
.mo-tier .closing-path:hover { background: #fff; }
.mo-tier .closing-path-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tier-mute);
  margin-bottom: 4px;
}
.mo-tier .closing-path-name {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 19px;
  font-weight: 500;
}
@media (max-width: 980px) {
  .mo-tier .home-hero { padding: 56px 24px 48px; }
  .mo-tier .home-hero .tier-h1 { font-size: 44px; }
  .mo-tier .home-trust { padding: 24px; }
  .mo-tier .evidence-sub { text-align: left; }
  .mo-tier .thesis { padding: 64px 24px 56px; }
  .mo-tier .thesis-grid { grid-template-columns: 1fr; gap: 32px; }
  .mo-tier .tier-row { padding: 0 24px 56px; }
  .mo-tier .tier-row-list { grid-template-columns: 1fr 1fr; }
  .mo-tier .home-closing { padding: 56px 24px; }
  .mo-tier .home-closing .tier-wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .mo-tier .tier-row-list { grid-template-columns: 1fr; }
}

/* ===== Homepage hero media (image to the right of the headline) ===== */
.mo-tier .home-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.mo-tier .home-hero-grid .tier-h1 { font-size: 60px; max-width: none; }
.mo-tier .home-hero-media { position: relative; }
.mo-tier .home-hero-img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; display: block;
  box-shadow: 0 30px 60px -30px rgba(21, 40, 89, 0.45);
}

/* ===== "Performance, made visible" report showcase ===== */
.mo-tier .report-showcase { padding: 88px 48px; }
.mo-tier .report-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; }
.mo-tier .report-copy .tier-h2 { margin-bottom: 16px; }
.mo-tier .report-points { list-style: none; margin: 6px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mo-tier .report-points li { position: relative; padding-left: 22px; font-size: 15px; color: rgba(50, 47, 44, 0.72); line-height: 1.5; }
.mo-tier .report-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tier-red); }
.mo-tier .report-points strong { color: var(--tier-ink); font-weight: 600; }
.mo-tier .report-disclaimer { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--tier-mute); }

.mo-tier .report-mock { background: #fff; border-radius: 16px; border: 0.5px solid rgba(50, 47, 44, 0.12); box-shadow: 0 34px 70px -34px rgba(21, 40, 89, 0.5); overflow: hidden; margin: 0; color: #322F2C; }
.mo-tier .report-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f2ede4; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.mo-tier .report-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(50, 47, 44, 0.2); }
.mo-tier .report-chrome-title { margin-left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.75); }
.mo-tier .report-body { padding: 22px 24px 24px; }
.mo-tier .report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.mo-tier .report-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 24px; font-weight: 600; line-height: 1.1; }
.mo-tier .report-meta { font-size: 12px; color: rgba(50, 47, 44, 0.75); margin-top: 2px; }
.mo-tier .report-badge { background: rgba(40, 200, 120, 0.15); color: #1b7a4b; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 100px; white-space: nowrap; }
.mo-tier .report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.mo-tier .report-kpi { background: #f9f5ee; border-radius: 10px; padding: 12px 8px; text-align: center; }
.mo-tier .report-kpi-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 22px; font-weight: 600; line-height: 1; }
.mo-tier .report-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(50, 47, 44, 0.75); margin-top: 5px; font-family: 'JetBrains Mono', monospace; }
.mo-tier .report-chart-wrap { margin-bottom: 20px; }
.mo-tier .report-chart-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(50, 47, 44, 0.75); font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; }
.mo-tier .report-chart { width: 100%; height: 120px; display: block; }
.mo-tier .report-skills { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.mo-tier .report-skill-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; color: rgba(50, 47, 44, 0.75); }
.mo-tier .report-bar { height: 8px; border-radius: 100px; background: rgba(50, 47, 44, 0.1); overflow: hidden; }
.mo-tier .report-bar > span { display: block; height: 100%; border-radius: 100px; background: var(--tier-ocean); }
.mo-tier .report-bar-watch > span { background: var(--tier-orange); }
.mo-tier .report-insight { background: var(--tier-ocean); color: var(--tier-cream); border-radius: 12px; padding: 14px 16px; }
.mo-tier .report-insight-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--tier-yellow); margin-bottom: 6px; }
.mo-tier .report-insight p { font-size: 13px; line-height: 1.5; color: rgba(249, 245, 238, 0.9); }

@media (max-width: 980px) {
  .mo-tier .home-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .mo-tier .home-hero-grid .tier-h1 { font-size: 44px; }
  .mo-tier .report-showcase { padding: 56px 24px; }
  .mo-tier .report-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 480px) {
  .mo-tier .report-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Dark theme: keep the report card a crisp light "screenshot"; adapt the copy. */
html[data-theme="dark"] .mo-tier .report-points li { color: rgba(233, 227, 216, 0.75); }
html[data-theme="dark"] .mo-tier .report-points strong { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .report-disclaimer { color: rgba(233, 227, 216, 0.72); }

/* ===== Placeholder badge (pending fact-check content) ===== */
.ph-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B45309;
  background: rgba(255, 199, 0, 0.18);
  border: 0.5px solid rgba(180, 83, 9, 0.35);
  border-radius: 4px;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 8px;
}

/* ===== Enterprise introduction form ===== */
.mo-tier .intro-hero { padding: 88px 48px 56px; max-width: 760px; margin: 0 auto; text-align: center; }
.mo-tier .intro-card {
  max-width: 560px;
  margin: 0 auto 96px;
  background: #fff;
  border: 0.5px solid var(--tier-line);
  border-radius: 14px;
  padding: 36px;
}
.mo-tier .intro-card .mo-contact-form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tier-mute);
  display: block;
  margin-bottom: 6px;
}
.mo-tier .intro-card .mo-contact-form-text-field {
  width: 100%;
  border: 0.5px solid var(--tier-line);
  border-radius: 6px;
  background: var(--tier-cream);
  padding: 12px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--tier-ink);
  margin-bottom: 18px;
}
.mo-tier .intro-card .mo-contact-form-field-wrapper { text-align: left; }
.mo-tier .intro-submit {
  width: 100%;
  background: var(--tier-ink);
  color: var(--tier-cream);
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.mo-tier .intro-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--tier-mute);
  margin-top: 16px;
  text-align: center;
}
/* Moved above the form so it's visible without scrolling; sits under the
   deck paragraph instead of under the submit button. */
.mo-tier .intro-note-top { margin-top: 20px; }
.mo-tier .w-form-done, .mo-tier .w-form-fail { display: none; }
.mo-tier .w-form-done {
  background: #fff;
  border: 0.5px solid var(--tier-line);
  border-radius: 14px;
  padding: 36px;
  max-width: 560px;
  margin: 0 auto 96px;
  text-align: center;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 22px;
}
.mo-tier .w-form-fail {
  color: var(--tier-red);
  max-width: 560px;
  margin: -80px auto 96px;
  text-align: center;
  font-size: 13px;
}

/* ===== Research page ===== */
.mo-tier .research-findings { padding: 0 48px 88px; }
.mo-tier .research-findings-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mo-tier .finding-card {
  background: #fff;
  border: 0.5px solid var(--tier-line);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.mo-tier .finding-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--tier-red);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.mo-tier .finding-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 10px;
}
/* Draw the eye to the headline figure, the way .tier-metric-num does in the
   "by the numbers" band above — enlarged and accent-coloured rather than
   sitting flush with the rest of the sentence. */
.mo-tier .finding-stat {
  font-size: 1.55em;
  font-weight: 700;
  color: var(--tier-red);
}
.mo-tier .finding-body { font-size: 13.5px; line-height: 1.55; color: rgba(50,47,44,0.7); flex: 1; margin-bottom: 16px; }
.mo-tier .finding-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--tier-mute);
  text-transform: uppercase;
}
@media (max-width: 980px) {
  .mo-tier .intro-hero { padding: 56px 24px 40px; }
  .mo-tier .research-findings { padding: 0 24px 56px; }
  .mo-tier .research-findings-grid { grid-template-columns: 1fr; }
}

/* ===== Skip-to-content link (a11y) ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #322F2C;
  color: #F9F5EE;
  padding: 10px 18px;
  border-radius: 0 0 6px 0;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ===== Warm register (Schools tier) ===== */
/* Legacy headings adopt the brand serif site-wide. */
body .v2-h1, body .v2-h2, body .v2-h3,
body .mo-h1, body .mo-h2, body .mo-h3,
body .card-heading, body .heading-48,
body .heading-49, body .heading-50 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Warm hero (mockup schools register: cream + organic blobs) */
.wm-hero {
  position: relative;
  overflow: hidden;
  background: #F9F5EE;
  padding: 72px 48px 56px;
}
.wm-hero-inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; }
.wm-blob { position: absolute; border-radius: 50%; z-index: 0; }
.wm-blob-yellow { top: -60px; right: -80px; width: 320px; height: 320px; background: #FFC700; opacity: 0.9; }
.wm-blob-pink { bottom: -100px; left: -60px; width: 240px; height: 240px; background: #F83F7F; opacity: 0.75; }
.wm-blob-green { top: 240px; right: 180px; width: 96px; height: 96px; border-radius: 50% 50% 50% 0; background: #28C878; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .wm-blob-yellow { animation: wm-float-a 10s ease-in-out infinite; }
  .wm-blob-pink { animation: wm-float-b 12s ease-in-out infinite; }
  .wm-blob-green { animation: wm-float-c 8s ease-in-out infinite; }
}
@keyframes wm-float-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, -7px); }
}
.wm-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #BB104E;
  margin-bottom: 16px;
  font-weight: 600;
  font-family: 'Inter', 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wm-eyebrow-dot { width: 8px; height: 8px; background: #28C878; border-radius: 50%; flex: none; }
.wm-h1 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 52px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 720px;
  color: #322F2C;
}
.wm-h1 .accent { color: #BB104E; font-style: italic; }
.wm-deck {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(50, 47, 44, 0.75);
  margin: 0 0 28px;
  max-width: 560px;
  padding-top: 0;
}
.wm-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* body sets line-height:28px (a fixed px value, not a ratio), which
   inherits literally to any descendant that doesn't reset it — unlike
   .mo-tier's line-height:1.5 (a unitless ratio that recalculates per
   element's own font-size). These wm-* buttons live outside .mo-tier, so
   without their own line-height they inflate to 28px regardless of their
   13px font, making them visibly taller than their .tier-btn-* counterparts
   despite near-identical padding. */
.wm-cta-primary {
  background: #BB104E;
  color: #F9F5EE;
  padding: 13px 24px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
  font-family: 'Inter', 'Open Sans', sans-serif;
  display: inline-block;
}
.wm-cta-secondary {
  background: transparent;
  color: #322F2C;
  padding: 13px 24px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
  font-family: 'Inter', 'Open Sans', sans-serif;
  border: 1.5px solid rgba(50, 47, 44, 0.3);
  display: inline-block;
  transition: box-shadow 0.2s, border-color 0.2s;
}
/* Interaction states pulled directly from the design system Figma file
   (node 7556:24924): AD Dust Red scale red-6/5/7/2, gray-1 for text.
   color: #FFFFFF is repeated on every state (not just the base rule)
   because meeopp.css has global a:hover/a:active rules that set a dark
   text color — those beat the plain (non-pseudo-class) base rule on
   specificity, so without an explicit override here the text would go
   dark on hover/press despite this class's own base color being white. */
.wm-cta-primary { color: #FFFFFF; transition: background-color 0.15s ease, box-shadow 0.2s ease; }
.wm-cta-primary:hover { background: #C94071; color: #FFFFFF; box-shadow: 0 4px 14px rgba(187, 16, 78, 0.3); }
.wm-cta-primary:focus-visible {
  background: #C94071;
  color: #FFFFFF;
  outline: none;
  box-shadow: 0 0 0 3px #EAB5C8;
}
.wm-cta-primary:active { background: #AA0F47; color: #FFFFFF; box-shadow: none; }
.wm-cta-primary[disabled],
.wm-cta-primary.is-disabled {
  background: #EAB5C8;
  color: #FFFFFF;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.wm-cta-secondary:hover { box-shadow: 0 4px 14px rgba(50, 47, 44, 0.12); border-color: rgba(50, 47, 44, 0.75); }
.wm-logos { padding: 32px 48px; border-top: 0.5px solid rgba(50,47,44,0.1); background: #fff; }
.wm-logos-inner { max-width: 1140px; margin: 0 auto; }
.wm-logos-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--tier-mute);
  margin-bottom: 20px;
}
.wm-logos-row { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.wm-logos-row img { height: 56px; width: auto; opacity: 0.85; }
@media (max-width: 980px) {
  .wm-hero { padding: 48px 24px 40px; }
  .wm-h1 { font-size: 36px; }
  .wm-logos { padding: 28px 24px; }
  .wm-logos-row { gap: 28px; }
  .wm-logos-row img { height: 40px; }
}
@media (max-width: 700px) {
  /* The floating green accent lands behind hero copy at phone widths. */
  body .wm-blob-green { display: none; }
}

/* ===== Standard end-of-page CTA band (replaces the legacy mo-blue-cta) =====
   Scoped `body .wm-band` so it wins on legacy pages that have no body class. */
body .wm-band { background: #F9F5EE; padding: clamp(40px, 6vw, 72px) 24px; }
body .wm-band-card {
  max-width: 1140px;
  margin: 0 auto;
  background: #152859;
  border-radius: 18px;
  padding: clamp(44px, 6vw, 68px) clamp(24px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
body .wm-band-card::before {
  content: '';
  position: absolute;
  right: -110px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #BB104E;
  opacity: 0.4;
  pointer-events: none;
}
body .wm-band-card::after {
  content: '';
  position: absolute;
  left: -80px;
  bottom: -120px;
  width: 220px;
  height: 220px;
  border-radius: 50% 50% 50% 0;
  background: #28C878;
  opacity: 0.18;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  body .wm-band-card::before { animation: wm-float-a 9s ease-in-out infinite; }
  body .wm-band-card::after { animation: wm-float-b 11s ease-in-out infinite; }
}
/* Drifts noticeably on both axes (the previous version moved just 7-8px, so
   close to this circle's own clipped edge — it's positioned off-canvas,
   right:-110px/top:-110px, clipped by the card's overflow:hidden — that the
   motion read as the circle growing/shrinking in place rather than
   actually moving). Irregular keyframe stops and non-mirrored paths between
   the two circles (rather than simply moving opposite each other in
   lockstep) so the pair reads as loosely organic rather than a single
   synchronized back-and-forth. */
@keyframes wm-float-a {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-30px, 20px); }
  50% { transform: translate(-12px, 34px); }
  75% { transform: translate(-38px, 10px); }
}
@keyframes wm-float-b {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(24px, -26px); }
  55% { transform: translate(36px, -8px); }
  80% { transform: translate(10px, -30px); }
}
body .wm-band-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(249, 245, 238, 0.65);
  margin-bottom: 18px;
  position: relative;
}
body .wm-band-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: clamp(30px, 4vw, 42px);
  color: #ffffff;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  position: relative;
}
body .wm-band-title em { color: #ff6d99; font-style: italic; font-weight: 500; }
body .wm-band-deck {
  color: rgba(249, 245, 238, 0.88);
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 0; /* legacy global p { padding-top: 117px } */
  position: relative;
}
body .wm-band-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
body .wm-band-actions .wm-cta-secondary { color: #F9F5EE; border-color: rgba(249, 245, 238, 0.35); }
body .wm-band-actions .wm-cta-secondary:hover { border-color: rgba(249, 245, 238, 0.6); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }

/* ===== Keyboard focus + reduced motion (site-wide) ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #BB104E;
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Images carry width/height attributes (CLS); keep aspect when CSS narrows them. */
img { height: auto; }

/* Neutralize a legacy global `img { position: relative; top: -17px }` reset in
   meeopp.css that pushed images 17px off their layout box. Only images without
   a more specific rule were affected (e.g. the schools trust-strip logos);
   absolutely-positioned and .image-NN images keep their own top (higher
   specificity), so this is a safe, targeted correction. */
img { top: 0; }

/* ===== Inline icons (Lucide pathway icons, Simple Icons socials) ===== */
.mo-tier .tier-row-icon {
  display: flex;
  align-items: center;
  color: var(--tier-red);
  flex: none;
}
.mo-tier .tier-row-item { justify-content: flex-start; gap: 16px; }
.mo-tier .tier-row-item .tier-row-arrow { margin-left: auto; }
.mo-tier .closing-path { justify-content: flex-start; gap: 16px; }
.mo-tier .closing-path .tier-row-arrow { margin-left: auto; }
.mo-tier .uni-path-icon {
  display: inline-flex;
  color: var(--tier-red);
  margin-bottom: 12px;
}
.of-social-icon svg { display: block; }

/* ===== Refinements: mobile nav panel in the brand register ===== */
@media (max-width: 991px) {
  body .mo-header-navbar .mo-header-nav-menu-parent {
    background-color: #F9F5EE;
    border-bottom: 0.5px solid rgba(50, 47, 44, 0.15);
    box-shadow: 0 28px 44px -28px rgba(0, 0, 0, 0.3);
    padding-left: 0;
    padding-right: 0;
  }
  html[data-theme="dark"] .mo-header-navbar .mo-header-nav-menu-parent {
    background-color: #201E18;
    border-bottom-color: rgba(233, 227, 216, 0.14);
  }
  /* meeopp.css overrides the open-state "X" to dark ink for the light
     overlay; dark mode's overlay is dark, so white (Webflow's original
     default) is correct there and needs restoring over that override. */
  html[data-theme="dark"] .mo-header-nav-menu-toggle.w--open { color: #fff; }
  html[data-theme="dark"] .mo-header-navbar .mo-header-nav-menu > .mo-nav-menu-link { color: #E9E3D8; }
  body .mo-header-navbar .mo-header-nav-menu {
    align-items: stretch;
    grid-row-gap: 0;
    padding: 6px 0 18px;
  }
  body .mo-header-navbar .mo-header-nav-menu > .mo-nav-menu-link {
    color: #322F2C;
    width: 100%;
    padding: 13px 24px;
    font-size: 15px;
    border-bottom: 0.5px solid rgba(50, 47, 44, 0.08);
  }
  body .mo-header-navbar .mo-header-nav-menu > .mo-nav-menu-link:hover,
  body .mo-header-navbar .mo-header-nav-menu > .mo-nav-menu-link.w--current {
    color: #BB104E;
  }
  body .mo-header-navbar .moheader-nav-dropdown {
    width: 100%;
    border-bottom: 0.5px solid rgba(50, 47, 44, 0.08);
  }
  body .mo-header-navbar .mo-header-nav-dd-toggle {
    color: #322F2C;
    width: 100%;
    padding: 13px 24px;
  }
  body .mo-header-navbar .mo-header-nav-dd-toggle:hover,
  body .mo-header-navbar .mo-header-nav-dd-toggle.w--open {
    color: #BB104E;
  }
  body .mo-header-navbar .mo-header-nav-dd-text {
    color: inherit;
    font-size: 15px;
  }
  body .mo-header-navbar .mo-header-nav-dd-list.w--open {
    background-color: rgba(50, 47, 44, 0.03);
    align-items: stretch;
    padding: 4px 0 10px;
  }
  body .mo-header-navbar .mo-nav-drop-down-link {
    color: rgba(50, 47, 44, 0.72);
    width: 100%;
    padding: 9px 24px 9px 42px;
    font-size: 14px;
  }
  body .mo-header-navbar .mo-nav-drop-down-link:hover,
  body .mo-header-navbar .mo-nav-drop-down-link.w--current {
    color: #BB104E;
  }
  body .mo-header-navbar .mo-header-buttons.mo-mobile {
    width: 100%;
    padding: 16px 24px 2px;
  }
}

/* Footer bottom bar: neutralize legacy .current-year styling */
.of-bottom .current-year {
  color: rgba(249, 245, 238, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: left;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Site convention: unused blocks are hidden, never deleted. */
.hide-for-now { display: none !important; }

/* ===== Warm content layer: normalize legacy v2/v3 sections ===== */
body .v2-section,
body .v3-section {
  padding-top: clamp(32px, 4.5vw, 56px);
  padding-bottom: clamp(32px, 4.5vw, 56px);
}
/* Body copy: readable size and tone. Display-size stat blocks are exempt. */
body .v2-section [class*="text-block-"]:not(.text-block-19):not(.text-block-24):not(.text-block-26):not(.text-block-31):not(.text-block-32):not(.text-block-34):not(.text-block-36):not(.text-block-37):not(.text-block-38):not(.text-block-39),
body .v3-section [class*="text-block-"]:not(.text-block-19):not(.text-block-24):not(.text-block-26):not(.text-block-31):not(.text-block-32):not(.text-block-34):not(.text-block-36):not(.text-block-37):not(.text-block-38):not(.text-block-39) {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(50, 47, 44, 0.78);
}
/* Stat-band numerals adopt the brand serif. */
body .text-block-19,
body .text-block-36,
body .text-block-39 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ===== Standard quote card (site-wide) =====
   One visual system for every quotation: white card, hairline border,
   oversized red serif opening mark, serif italic body, mono attribution. */
body .v2-testimonial,
body .v3-testimonials {
  background: #fff;
  border: 0.5px solid rgba(50, 47, 44, 0.12);
  border-radius: 14px;
  padding: 26px 30px 22px;
  box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.18);
}
body .v2-testimonial img[src*="quotation"],
body .v3-testimonials img[src*="quotation"] {
  display: none;
}
body .v2-testimonial .v2-testimonial-content::before {
  content: "\201C";
  display: block;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 54px;
  line-height: 0.55;
  color: #BB104E;
  margin: 10px 0 12px;
}
body .v2-testimonial .v2-testimonial-content {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: #322F2C;
}
body .v2-testimonial .v2-testimonia-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--tier-mute);
  margin-top: 14px;
}
/* Universities stat-card quote joins the same system. */
.mo-tier .uni-quote {
  background: #fff;
  border: 0.5px solid rgba(50, 47, 44, 0.12);
  border-left: 0.5px solid rgba(50, 47, 44, 0.12);
  border-radius: 14px;
  padding: 22px 24px 18px;
}
.mo-tier .uni-quote-text::before {
  content: "\201C";
  display: block;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 44px;
  line-height: 0.55;
  color: #BB104E;
  margin: 8px 0 10px;
}
.mo-tier .uni-quote-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
/* Homepage evidence quote: dark variant of the same mark. */
.mo-tier .evidence-foot-text::before {
  content: "\201C";
  display: block;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 44px;
  line-height: 0.55;
  color: #F83F7F;
  margin: 8px 0 10px;
}

/* ===== Sentence case for legacy headings =====
   Webflow forced Title Case via text-transform on heading combos, which reads
   as shouty and breaks sentences that continue across heading elements.
   The source copy is properly cased, so let it through. */
body .v2-h2.capitalize,
body .v2-h3.capitalize,
body .v2-h1.color-322f2c.capitalize,
body .v2-h1-full-width.color-322f2c.capitalize,
body .card-heading.no-margin.capitalize,
body .heading-49.capitalize,
body .heading-50.capitalize,
body .mo-h1,
body .mo-h2,
body .mo-h4,
body .text-block-24._322f2c.center.custom,
body .text-block-24._322f2c.center._70,
body .text-block-33,
body .text-block-35 {
  text-transform: none;
}

/* ===== Solid ocean stat bands (mandarin, secondary students) =====
   Replace the photographic backgrounds with the brand ocean + blueprint grid
   so the white copy stays readable. */
body .v2-section.v2-bg-img-8,
body .v2-section.v2-bg-f9f5ee.v2-bg-img-8,
body .v2-section.v2-bg-img-10 {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-color: #152859;
  background-position: 0 0;
  background-repeat: repeat;
}
body .v2-bg-img-8 .v2-h2.white,
body .v2-bg-img-10 .v2-h2.white {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-weight: 500;
}
body .v2-bg-img-8 .text-span-38 { color: #FFC700; }
/* Quote attributions inside the ocean band need light text. */
body .v2-bg-img-8 .v2-testimonia-name.purple { color: var(--tier-mute); }
/* Dead slider chevrons (the carousel JS is gone; quotes render stacked). */
body .div-block-184 { display: none; }
body .v2-bg-img-8 .div-block-183 { display: grid; gap: 18px; padding: 12px 0 8px; }

/* ===== Curriculum cards (curricula-we-support) ===== */
body .card {
  background: #fff;
  border: 0.5px solid rgba(50, 47, 44, 0.12);
  border-radius: 14px;
  padding: 32px 34px;
  box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.18);
}
body .card-heading {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 18px;
  margin-bottom: 10px;
}
body .card-content {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(50, 47, 44, 0.78);
}
body .card-offers-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #BB104E;
  margin: 20px 0 8px;
}
body .card-list {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(50, 47, 44, 0.85);
  margin-bottom: 6px;
}
body .card .image-145 { height: 44px; width: auto; object-fit: contain; object-position: left; }

/* ===== Stat callout (large single-number sections) ===== */
body .wm-stat {
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
}
body .wm-stat-num {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: clamp(72px, 9vw, 118px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #BB104E;
  flex: none;
}
body .wm-stat-copy { max-width: 560px; }
body .wm-stat-text {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  color: #322F2C;
  margin: 0 0 10px;
}
body .wm-stat-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--tier-mute);
  line-height: 1.6;
}
body .wm-stat-star { font-size: 0.4em; color: var(--tier-mute); font-weight: 400; vertical-align: super; }
/* The stat block replaced a pie-chart graphic; kill its leftover backdrop
   and the negative offset that pulled the quote card over the footnote. */
body .div-block-188 { background-image: none; min-height: 0; }
body .div-block-190 { margin-top: 40px; margin-bottom: 40px; }

/* ===== Legal documents (/privacy, /terms) ===== */
.legal-doc { max-width: 780px; margin: 0 auto; padding: 64px 24px 96px; }
.legal-doc h1 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 10px;
}
.legal-doc h2, .legal-doc h3, .legal-doc h4 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  margin: 34px 0 10px;
  line-height: 1.25;
}
.legal-doc p, .legal-doc li {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(50, 47, 44, 0.82);
  margin: 0 0 14px;
  padding-top: 0;
}
.legal-doc ul, .legal-doc ol { padding-left: 26px; margin: 0 0 16px; }
.legal-doc a { color: #BB104E; text-decoration: underline; }
.legal-doc strong { color: #322F2C; }
.legal-doc .legal-divider {
  border: none;
  border-top: 0.5px solid rgba(50, 47, 44, 0.2);
  margin: 56px 0;
}
.legal-doc table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.legal-doc td, .legal-doc th {
  border: 0.5px solid rgba(50, 47, 44, 0.25);
  padding: 8px 10px;
  font-size: 14px;
  vertical-align: top;
}
/* Anchor jumps must clear the sticky navbar. */
.legal-doc :where(h1, h2, h3, h4)[id] { scroll-margin-top: 96px; }
/* Live-doc structure: .tos wrapper, .meta date line, .toc contents, .disclaimer. */
.legal-doc .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--tier-mute);
  margin: 0 0 28px;
}
.legal-doc .meta strong { color: var(--tier-mute); }
.legal-doc .toc {
  border: 0.5px solid rgba(50, 47, 44, 0.14);
  border-radius: 12px;
  background: rgba(50, 47, 44, 0.02);
  padding: 22px 26px 24px;
  margin: 0 0 40px;
}
.legal-doc .toc h2, .legal-doc .toc h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #BB104E;
  margin: 0 0 14px;
  font-weight: 600;
}
.legal-doc .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 40px; }
.legal-doc .toc li { margin: 0 0 8px; font-size: 14px; line-height: 1.5; break-inside: avoid; }
.legal-doc .toc a { color: #322F2C; text-decoration: none; }
.legal-doc .toc a:hover { color: #BB104E; text-decoration: underline; }
.legal-doc .disclaimer {
  font-size: 13.5px;
  font-style: italic;
  color: var(--tier-mute);
  border-top: 0.5px solid rgba(50, 47, 44, 0.14);
  margin-top: 40px;
  padding-top: 20px;
}
@media (max-width: 640px) {
  .legal-doc .toc ol { columns: 1; }
}

/* ===== Header utilities: language switcher + dark-mode toggle ===== */
.mo-utils { display: flex; align-items: center; gap: 8px; }
.mo-util-icon { width: 18px; height: 18px; display: block; }
.mo-lang { position: relative; }
.mo-lang-toggle,
.mo-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(50, 47, 44, 0.18);
  border-radius: 8px;
  color: #322F2C;
  cursor: pointer;
  padding: 7px 12px;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mo-theme-toggle { padding: 7px; }
.mo-lang-toggle:hover,
.mo-theme-toggle:hover { border-color: #BB104E; color: #BB104E; }
.mo-lang-toggle:focus-visible,
.mo-theme-toggle:focus-visible {
  outline: none;
  border-color: #BB104E;
  box-shadow: 0 0 0 2px rgba(187, 16, 78, 0.35);
}
.mo-lang-current { font-weight: 600; letter-spacing: 0.02em; }
.mo-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  background: #fff;
  border: 0.5px solid rgba(50, 47, 44, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
  padding: 6px;
  display: none;
  z-index: 120;
}
.mo-lang[data-open="true"] .mo-lang-menu { display: block; }
.mo-lang-opt {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 14px;
  color: #322F2C;
  text-decoration: none;
}
.mo-lang-opt:hover { background: rgba(187, 16, 78, 0.08); color: #BB104E; }
.mo-lang-opt[aria-current="true"] { color: #BB104E; font-weight: 600; }
.mo-icon-sun { display: none; }
html[data-theme="dark"] .mo-icon-moon { display: none; }
html[data-theme="dark"] .mo-icon-sun { display: block; }
@media (max-width: 991px) {
  /* Keep the utilities visible in the top bar even when the nav collapses. */
  .mo-utils { margin-left: auto; margin-right: 6px; }
  .mo-lang-toggle, .mo-theme-toggle { padding: 6px 9px; }
  .mo-lang-menu { right: 0; }
}

/* ===== Header nav typography (brand font, lighter weight, balanced) =====
   The legacy nav used Roobert 700, which read heavy and off-brand. */
body .mo-header-nav-menu { column-gap: 30px; font-weight: 500; }
body .mo-nav-menu-link,
body .mo-header-nav-dd-text {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: #322F2C;
}
body .mo-header-nav-dd-text { line-height: 1.2; }
body .mo-header-buttons { column-gap: 12px; align-items: center; }

/* ===== Unify the "About Us" nav dropdown with the language-switcher dropdown =====
   The legacy Webflow dropdown had its own hard black border/square corners,
   visibly out of step with .mo-lang-menu (rounded, soft border, soft shadow). */
@media (min-width: 992px) {
  body .mo-header-navbar .mo-header-nav-dd-list.w--open {
    background-color: #fff;
    border: 0.5px solid rgba(50, 47, 44, 0.14);
    border-radius: 12px;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
    padding: 6px;
  }
  body .mo-header-navbar .mo-nav-drop-down-link {
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-weight: 500;
  }
  body .mo-header-navbar .mo-nav-drop-down-link:hover { background: rgba(187, 16, 78, 0.08); }
  /* Dark: the desktop rule above hard-codes a white panel (specificity 0,3,1),
     which outranks the generic dark .mo-header-nav-dd-list override and left the
     "About Us" flyout a glaring white box with near-invisible cream links.
     Mirror its selector so the dark surface actually wins. */
  html[data-theme="dark"] body .mo-header-navbar .mo-header-nav-dd-list.w--open {
    background-color: #201E18;
    border-color: rgba(233, 227, 216, 0.14);
  }
}

/* ===== Partner institutions marquee (homepage) ===== */
.trust-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track {
  display: flex;
  width: max-content;
  gap: 72px;
  align-items: center;
  animation: trust-scroll 34s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-mark {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: rgba(50, 47, 44, 0.72);
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.trust-statement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
}
.trust-sep {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 24px;
  line-height: 1;
  color: rgba(50, 47, 44, 0.32);
}
/* Institution logos: transparent, centered, uniform height. */
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
/* Neutralize the global legacy `img { position: relative; top: -17px }`
   reset (meeopp.css) that was pushing these logos up out of their row. */
.trust-logo { height: 54px; width: auto; display: block; flex: none; position: static; top: auto; }
.trust-chip-name {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 21px;
  font-weight: 500;
  color: rgba(50, 47, 44, 0.82);
  white-space: nowrap;
  line-height: 1;
}
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 20px 40px; }
}

/* ===== Evidence quote attribution (homepage ocean band) ===== */
.mo-tier .evidence-foot { flex-wrap: wrap; gap: 20px 40px; }
.mo-tier .evidence-foot-who {
  flex: 1 1 480px;
  min-width: 280px;
}
.mo-tier .evidence-foot-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: #FFC700; background: transparent; border: 1.5px solid rgba(255, 199, 0, 0.5);
}
.mo-tier .evidence-foot-attr {
  display: flex; align-items: center; gap: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(249, 245, 238, 0.6);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Separate the two cream sections (approach vs closing) =====
   The closing CTA-routing band gets a clean white surface so it no longer
   melts into the cream approach section above it. */
.home-closing { background: #FFFFFF; }

/* ===== Dark theme =====
   The site hard-codes a warm-paper palette across two registers, so dark mode
   remaps the load-bearing surfaces (page, header, cards, sections, text)
   rather than every rule. Ocean/red/footer are already dark and carry over. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body,
html[data-theme="dark"] .mo-body,
html[data-theme="dark"] .mo-page-wrapper,
html[data-theme="dark"] .mo-tier,
html[data-theme="dark"] .mo-main {
  background-color: #14130F;
  color: #E9E3D8;
}
/* Brand-register default ink text. */
html[data-theme="dark"] .mo-tier,
html[data-theme="dark"] .mo-tier p,
html[data-theme="dark"] .tier-h1,
html[data-theme="dark"] .tier-lead,
html[data-theme="dark"] .tier-h2,
html[data-theme="dark"] .home-hero,
html[data-theme="dark"] .section-label { color: #E9E3D8; }
/* Ocean-inked heading spans and bold deck text hard-code light-surface
   colors; lift them for the dark ground. */
html[data-theme="dark"] .mo-tier .tier-h1 .ocean { color: #8fa7e8; }
html[data-theme="dark"] .mo-tier .tier-deck strong { color: #E9E3D8; }
/* Hero "read the research" link: the title hard-codes ink and its underline
   uses the ink line colour, so both vanished on the dark ground. */
html[data-theme="dark"] .mo-tier .hero-research-title { color: #E9E3D8; border-bottom-color: rgba(233, 227, 216, 0.24); }
html[data-theme="dark"] .mo-tier .hero-research:hover .hero-research-title { border-bottom-color: rgba(233, 227, 216, 0.6); }
/* Status pill: a translucent-white chip reads as a glaring light-grey pill on
   dark; use the same faint light tint the trust band uses. */
html[data-theme="dark"] .mo-tier .tier-status { background: rgba(233, 227, 216, 0.06); border-color: rgba(233, 227, 216, 0.16); }
/* Cream / white section surfaces -> deep warm ink. */
html[data-theme="dark"] .wm-hero,
html[data-theme="dark"] .wm-band,
html[data-theme="dark"] .mo-section,
html[data-theme="dark"] .v2-section,
html[data-theme="dark"] .v3-section,
html[data-theme="dark"] .v2-bg-f9f5ee,
html[data-theme="dark"] .bg-f9f5ee,
html[data-theme="dark"] .tier-hero,
html[data-theme="dark"] .tier-trust,
html[data-theme="dark"] .tier-closing,
html[data-theme="dark"] .uni-hero,
html[data-theme="dark"] .wm-logos,
html[data-theme="dark"] .section-101,
html[data-theme="dark"] .spacer-86 {
  background-color: #14130F;
}
/* Elevated cards. */
html[data-theme="dark"] .card,
html[data-theme="dark"] body .v2-testimonial,
html[data-theme="dark"] body .v3-testimonials,
html[data-theme="dark"] .mo-tier .uni-quote,
html[data-theme="dark"] .uni-visual,
html[data-theme="dark"] .legal-doc .toc,
html[data-theme="dark"] .mo-lang-menu {
  background-color: #201E18;
  border-color: rgba(233, 227, 216, 0.14);
  box-shadow: none;
}
/* Header bar. */
html[data-theme="dark"] .mo-header-navbar { background-color: rgba(20, 19, 15, 0.82); }
/* Solid (no blur) once the mobile menu opens — see runtime.css's light-mode
   version of this same override for why. Matches the menu panel's own dark
   background (#201E18, set below) rather than the site's other dark
   surface color (#14130F, used elsewhere e.g. dropdown lists), so the
   topbar and panel read as one seamless surface, same as light mode. */
@media (max-width: 991px) {
  html[data-theme="dark"] .mo-header-navbar.is-menu-open {
    background-color: #201E18;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
html[data-theme="dark"] .mo-nav-menu-link,
html[data-theme="dark"] .mo-header-nav-dd-text,
html[data-theme="dark"] .mo-header-nav-dd-text { color: #E9E3D8; }
html[data-theme="dark"] .mo-nav-drop-down-link { color: #E9E3D8; }
/* The dropdown-toggle arrow (a Webflow icon-font glyph) inherits color from
   this element; it had no dark override so it stayed ink-on-ink and vanished. */
html[data-theme="dark"] .mo-header-nav-dd-toggle { color: #E9E3D8; }
/* Selected-page highlight: restore it over the plain-link dark color above,
   which otherwise wins on specificity and hides which page is current. */
html[data-theme="dark"] .mo-nav-menu-link.w--current,
html[data-theme="dark"] .mo-nav-menu-link:hover,
html[data-theme="dark"] .mo-nav-drop-down-link.w--current,
html[data-theme="dark"] .mo-nav-drop-down-link:hover { color: #ff6d99; }
/* Only the hover dropdown submenus get the dark surface on desktop; the
   inline nav container must stay transparent (no gray box). The mobile
   expanded panel is darkened inside the mobile media query below. */
html[data-theme="dark"] .mo-header-nav-dd-list { background-color: #201E18; }
/* runtime.css's :hover/:focus-within reveal (>= 992px) now hardcodes its own
   light-mode background/border to stay consistent whether or not
   site-runtime.js's .w--open class is also present (see its comment) — its
   selector is more specific than the rule above, so it needs its own
   dark-mode override here rather than relying on that one. */
html[data-theme="dark"] .moheader-nav-dropdown:hover > .mo-header-nav-dd-list,
html[data-theme="dark"] .moheader-nav-dropdown:focus-within > .mo-header-nav-dd-list {
  background-color: #201E18;
  border-color: rgba(233, 227, 216, 0.14);
}
/* Utility controls. */
html[data-theme="dark"] .mo-lang-toggle,
html[data-theme="dark"] .mo-theme-toggle { color: #E9E3D8; border-color: rgba(233, 227, 216, 0.24); }
html[data-theme="dark"] .mo-lang-opt { color: #E9E3D8; }
/* Headings and body copy that hard-code ink. Broad but scoped to content
   sections so every legacy text-block/heading becomes readable; .white and
   .red keep their intent (they sit on dark image bands or are accents). */
html[data-theme="dark"] :is(.v2-section, .v3-section, .mo-section, .wm-hero, .mo-tier, .legal-doc)
  :is(h1, h2, h3, h4):not(.white):not(.red):not([class*="red"]),
html[data-theme="dark"] :is(.v2-h1, .v2-h2, .v2-h3, .v2-h4):not(.white):not(.red),
html[data-theme="dark"] .card-heading,
html[data-theme="dark"] .wm-h1,
html[data-theme="dark"] .wm-stat-text,
html[data-theme="dark"] .mo-h1,
html[data-theme="dark"] .mo-h2,
html[data-theme="dark"] .mo-h4,
html[data-theme="dark"] .legal-doc,
html[data-theme="dark"] .legal-doc h1,
html[data-theme="dark"] .legal-doc h2,
html[data-theme="dark"] .legal-doc h3,
html[data-theme="dark"] .legal-doc h4 { color: #F1ECE3; }
html[data-theme="dark"] :is(.v2-section, .v3-section, .mo-section, .wm-hero)
  :is(p, li, .v2-body-text, .card-content, .card-list, [class*="text-block"], [class*="paragraph"]):not(.white),
html[data-theme="dark"] .wm-deck,
html[data-theme="dark"] .card-content,
html[data-theme="dark"] .card-list,
html[data-theme="dark"] .legal-doc p,
html[data-theme="dark"] .legal-doc li { color: rgba(233, 227, 216, 0.82); }
/* The legacy body-copy rule chains ~12 :not()s (huge specificity); mirror it
   exactly with the dark prefix so the override actually wins. */
html[data-theme="dark"] body .v2-section [class*="text-block-"]:not(.text-block-19):not(.text-block-24):not(.text-block-26):not(.text-block-31):not(.text-block-32):not(.text-block-34):not(.text-block-36):not(.text-block-37):not(.text-block-38):not(.text-block-39),
html[data-theme="dark"] body .v3-section [class*="text-block-"]:not(.text-block-19):not(.text-block-24):not(.text-block-26):not(.text-block-31):not(.text-block-32):not(.text-block-34):not(.text-block-36):not(.text-block-37):not(.text-block-38):not(.text-block-39) {
  color: rgba(233, 227, 216, 0.82);
}
/* Legacy display text-blocks (serif headings / stat numerals). */
html[data-theme="dark"] :is(.v2-section, .v3-section) :is(.text-block-19, .text-block-24, .text-block-26, .text-block-31, .text-block-32, .text-block-34, .text-block-36, .text-block-37, .text-block-38, .text-block-39):not(.red) { color: #F1ECE3; }
/* Quote cards: dark surface needs light quote + attribution. */
html[data-theme="dark"] body .v2-testimonial .v2-testimonial-content,
html[data-theme="dark"] body .v3-testimonials .v2-testimonial-content { color: #ECE7DE; }
html[data-theme="dark"] body .v2-testimonial .v2-testimonia-name { color: #B8B1A6; }
html[data-theme="dark"] .legal-doc strong { color: #F1ECE3; }
html[data-theme="dark"] .legal-doc .toc a,
html[data-theme="dark"] .legal-doc .meta,
html[data-theme="dark"] .legal-doc .meta strong { color: #C9C2B6; }
html[data-theme="dark"] .legal-doc td,
html[data-theme="dark"] .legal-doc th { border-color: rgba(233, 227, 216, 0.2); }
/* Default (Login) buttons. */
html[data-theme="dark"] .mo-default-button.transparent { color: #E9E3D8; border-color: rgba(233, 227, 216, 0.3); }
/* Buttons that used ink-on-cream now need light treatment. */
html[data-theme="dark"] .tier-btn-primary { background: #F1ECE3; color: #14130F; }
html[data-theme="dark"] .tier-btn-secondary,
html[data-theme="dark"] .wm-cta-secondary,
html[data-theme="dark"] .mo-default-button {
  color: #E9E3D8;
  background: transparent;
  border-color: rgba(233, 227, 216, 0.28);
}
/* Partner-institutions strip is a deliberate red brand divider in both themes. */
html[data-theme="dark"] .home-trust { background-color: var(--tier-red); }
/* Closing band: a hair lighter than the page so it still separates in dark. */
html[data-theme="dark"] .home-closing { background-color: #1C1B15; }
/* Closing "ways in" rows: cream cards with ink text glared on the dark band.
   Remap to an elevated dark surface; the 1px gaps between rows come from the
   container background, so lift that to a light hairline too. */
html[data-theme="dark"] .mo-tier .closing-paths { background: rgba(233, 227, 216, 0.12); border-color: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .mo-tier .closing-path { background: #24231C; color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .closing-path:hover { background: #2B291F; }
/* The closing line's <em> hard-codes ink-red, overriding the pink lift applied
   to the line itself, so it fell under AA on the dark band. */
html[data-theme="dark"] .mo-tier .tier-closing-line em { color: #ff6d99; }
html[data-theme="dark"] .mo-tier .closing-path-label { color: rgba(233, 227, 216, 0.6); }
html[data-theme="dark"] .mo-tier .closing-path .tier-row-arrow { color: rgba(233, 227, 216, 0.6); }
/* Audience tier row ("For Enterprise/Universities/Schools/Packs"): same cream
   cards + ink text that glared on the dark page. Match other elevated cards. */
html[data-theme="dark"] .mo-tier .tier-row-list { background: rgba(233, 227, 216, 0.12); border-color: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .mo-tier .tier-row-item { background: #201E18; color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .tier-row-item:hover { background: #262419; }
html[data-theme="dark"] .mo-tier .tier-row-kicker { color: rgba(233, 227, 216, 0.6); }
html[data-theme="dark"] .mo-tier .tier-row-item .tier-row-arrow { color: rgba(233, 227, 216, 0.6); }
html[data-theme="dark"] .trust-mark,
html[data-theme="dark"] .trust-chip-name { color: rgba(233, 227, 216, 0.82); }
html[data-theme="dark"] .trust-sep { color: rgba(233, 227, 216, 0.38); }
/* .thesis sits directly on the dark page background (no card), but its body
   copy hard-codes ink and isn't a p/li/heading the broad rules above catch —
   it read as near-black text on a near-black page. */
html[data-theme="dark"] .mo-tier .thesis-col-body { color: rgba(233, 227, 216, 0.72); }
/* White cards that aren't in the enumerated set above (job openings, etc.). */
html[data-theme="dark"] .job-opening-card {
  background-color: #201E18;
  border: 0.5px solid rgba(233, 227, 216, 0.12);
}
/* Contact form fields: white boxes read as glare on a dark page. */
html[data-theme="dark"] .mo-contact-form-text-field,
html[data-theme="dark"] .mo-contact-form-textarea-field,
html[data-theme="dark"] .mo-cf-select-field,
html[data-theme="dark"] select.w-select {
  background-color: #201E18;
  color: #E9E3D8;
  border-color: rgba(233, 227, 216, 0.22);
}
html[data-theme="dark"] .mo-contact-form-text-field::placeholder,
html[data-theme="dark"] .mo-contact-form-textarea-field::placeholder { color: rgba(233, 227, 216, 0.4); }
html[data-theme="dark"] .mo-contact-form-label,
html[data-theme="dark"] .mo-contact-form-tabs-title,
html[data-theme="dark"] .mo-contact-form-radio-button-wrapper,
html[data-theme="dark"] .mo-contact-form-checkbox-field ~ * { color: #C9C2B6; }
html[data-theme="dark"] .mo-contact-form-tab-links { color: #E9E3D8; border-color: rgba(233, 227, 216, 0.22); }
/* Cookie banner picks up the card surface. */
html[data-theme="dark"] .consent-banner,
html[data-theme="dark"] .mo-consent { background-color: #201E18; color: #E9E3D8; border-top-color: rgba(233, 227, 216, 0.16); }
/* Buttons previously matched the broad [class*="consent"] rule above and lost
   their pink/outline styling, making "Accept all" blend into the banner. */
html[data-theme="dark"] .mo-consent-accept { background-color: #c8155a; color: #ffffff; }
html[data-theme="dark"] .mo-consent-accept:hover { background-color: #d81b60; }
html[data-theme="dark"] .mo-consent-decline { background-color: transparent; color: #E9E3D8; border-color: rgba(233, 227, 216, 0.3); }
html[data-theme="dark"] .mo-consent-decline:hover { border-color: #E9E3D8; }
html[data-theme="dark"] .mo-consent-link { color: #ff5c92; }
/* Dark-mode sweep: white/cream cards that had no override and glared on the
   dark ground. Each mirrors the light rule's specificity so it actually wins. */
/* /universities — the two "paths" cards. */
html[data-theme="dark"] .mo-tier .uni-path { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .uni-path-title { color: #F1ECE3; }
html[data-theme="dark"] .mo-tier .uni-path-body { color: rgba(233, 227, 216, 0.72); }
/* /universities — hero stat tiles and the "illustrative view" mini cards sit on
   the page background (cream, so they blend in light); on dark they glared as
   light tiles. Remap to elevated dark surfaces with light text/dividers. */
html[data-theme="dark"] .mo-tier .uni-stat { background: #201E18; }
html[data-theme="dark"] .mo-tier .uni-mini { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .uni-todo li { border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .mo-tier .uni-spark text { fill: rgba(233, 227, 216, 0.5); }
html[data-theme="dark"] .mo-tier .uni-mini-caption { color: rgba(233, 227, 216, 0.6); }
/* The mini-card status pills used ink-dark ocean/red/green text tuned for the
   cream card; on the dark card the ocean pill was all but invisible (1.2:1).
   Lift each hue and its tint to the dark-mode accents used elsewhere. */
html[data-theme="dark"] .mo-tier .uni-tag-do { background: rgba(255, 109, 153, 0.14); color: #ff6d99; }
html[data-theme="dark"] .mo-tier .uni-tag-new { background: rgba(143, 167, 232, 0.16); color: #8fa7e8; }
html[data-theme="dark"] .mo-tier .uni-tag-ok { background: rgba(66, 215, 143, 0.16); color: #42d78f; }
/* /research — "selected findings" cards. */
html[data-theme="dark"] .mo-tier .finding-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .finding-title { color: #F1ECE3; }
html[data-theme="dark"] .mo-tier .finding-body { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .finding-status { color: rgba(233, 227, 216, 0.72); }
/* /enterprise/introduction — the request form panel, its fields and submit. */
html[data-theme="dark"] .mo-tier .intro-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .intro-card .mo-contact-form-text-field { background: #14130F; color: #E9E3D8; border-color: rgba(233, 227, 216, 0.24); }
html[data-theme="dark"] .mo-tier .intro-card .mo-contact-form-text-field::placeholder { color: rgba(233, 227, 216, 0.4); }
html[data-theme="dark"] .mo-tier .intro-card .mo-contact-form-label { color: rgba(233, 227, 216, 0.65); }
html[data-theme="dark"] .mo-tier .intro-submit { background: #F1ECE3; color: #14130F; }
html[data-theme="dark"] .mo-tier .w-form-done { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #F1ECE3; }
/* /curricula-we-support — "find your school's system" cards. */
html[data-theme="dark"] .mo-tier .cw-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .cw-card-name { color: #F1ECE3; }
html[data-theme="dark"] .mo-tier .cw-card-desc,
html[data-theme="dark"] .mo-tier .cw-card-notes li { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .cw-card-notes { border-top-color: rgba(233, 227, 216, 0.2); }

/* ===== /schools hub + curricula (legacy register: not scoped under .mo-tier) ===== */
.sc-band-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #BB104E; margin-bottom: 14px; }
.sc-lead { font-size: 17px; line-height: 1.6; color: rgba(50, 47, 44, 0.72); max-width: none; margin: 0 0 28px; padding-top: 0; }
.sc-xingfu { font-size: 1.35em; font-weight: 700; }
.sc-curric { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sc-curric-card { background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.14); border-radius: 14px; padding: 18px 20px; }
.sc-curric-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #BB104E; margin-bottom: 8px; }
.sc-curric-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; font-weight: 600; color: #152859; margin-bottom: 5px; }
.sc-curric-desc { font-size: 13px; line-height: 1.5; color: rgba(50, 47, 44, 0.75); padding-top: 0; }
.sc-curric-soon { background: transparent; border-style: dashed; }
.sc-curric-soon .sc-curric-kicker, .sc-curric-soon .sc-curric-name { color: var(--tier-mute); }
@media (max-width: 560px) { .sc-curric { grid-template-columns: 1fr; } }
.sc-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.sc-hub-card { display: block; background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 14px; padding: 22px; text-decoration: none; color: #322F2C; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sc-hub-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.18); }
.sc-hub-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 21px; font-weight: 600; margin-bottom: 6px; color: #152859; }
.sc-hub-desc { font-size: 14px; line-height: 1.5; color: rgba(50, 47, 44, 0.75); padding-top: 0; }
@media (max-width: 900px) { .sc-hub { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sc-hub { grid-template-columns: 1fr; } }
html[data-theme="dark"] .sc-curric-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .sc-curric-name { color: #9db4e8; }
html[data-theme="dark"] .sc-curric-desc { color: rgba(233, 227, 216, 0.65); }
html[data-theme="dark"] .sc-curric-soon { background: transparent; }
html[data-theme="dark"] .sc-curric-soon .sc-curric-name, html[data-theme="dark"] .sc-curric-soon .sc-curric-kicker { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .sc-hub-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .sc-hub-desc { color: rgba(233, 227, 216, 0.65); }
html[data-theme="dark"] .sc-hub-title { color: #9db4e8; }
html[data-theme="dark"] .sc-lead { color: rgba(233, 227, 216, 0.72); }

/* ===== /packs card tag (audience language pill) ===== */
.mo-tier .pack-card-tag { display: inline-block; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(50, 47, 44, 0.22); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--tier-blue); }

/* ===== Feature cards (THE APPROACH on home; packs explainer sections) ===== */
.mo-tier .feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mo-tier .feature-card { position: relative; overflow: hidden; background: #fff; border: 0.5px solid var(--tier-line); border-radius: 16px; padding: 32px 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mo-tier .feature-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(21, 40, 89, 0.35); }
.mo-tier .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; transition: height 0.2s ease; }
.mo-tier .feature-card:hover::before { height: 6px; }
.mo-tier .feature-a::before { background: var(--tier-red); }
.mo-tier .feature-b::before { background: var(--tier-ocean); }
.mo-tier .feature-c::before { background: var(--tier-green); }
.mo-tier .feature-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.mo-tier .feature-icon svg { width: 24px; height: 24px; }
.mo-tier .feature-a .feature-icon { background: rgba(187, 16, 78, 0.10); color: var(--tier-red); }
.mo-tier .feature-b .feature-icon { background: rgba(21, 40, 89, 0.10); color: var(--tier-ocean); }
.mo-tier .feature-c .feature-icon { background: rgba(40, 200, 120, 0.14); color: #1b7a4b; }
.mo-tier .feature-key { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--tier-red); margin-bottom: 10px; }
.mo-tier .feature-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 24px; font-weight: 500; line-height: 1.15; margin-bottom: 10px; }
/* Chinese glyphs have no Cormorant coverage and fall back to a mismatched
   system face; pin a serif CJK stack and optically size/align them so the
   mixed-script title reads as one line. */
.mo-tier .feature-cjk { font-family: 'Noto Serif TC', 'Noto Serif SC', 'Source Han Serif TC', 'Songti SC', 'Songti TC', 'PingFang TC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', serif; font-size: 0.82em; font-weight: 500; letter-spacing: 0.01em; vertical-align: 0.02em; }
.mo-tier .feature-body { font-size: 15px; line-height: 1.65; color: rgba(50, 47, 44, 0.72); }
.mo-tier .feature-body strong { color: var(--tier-ink); font-weight: 500; }
@media (max-width: 900px) { .mo-tier .feature-cards { grid-template-columns: 1fr; } }
html[data-theme="dark"] .mo-tier .feature-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .feature-title { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .feature-body { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .feature-body strong { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .feature-c .feature-icon { color: #42d78f; }

/* ===== Step flow (packs "How a pack works"): distinct from feature cards ===== */
.mo-tier .step-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.mo-tier .step { position: relative; padding-top: 18px; border-top: 2px solid var(--tier-line); }
.mo-tier .step::before { content: ''; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--tier-red); }
.mo-tier .step-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 52px; font-weight: 600; line-height: 1; color: rgba(187, 16, 78, 0.22); margin-bottom: 10px; }
.mo-tier .step-key { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--tier-red); margin-bottom: 8px; }
.mo-tier .step-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 23px; font-weight: 500; line-height: 1.15; margin-bottom: 8px; }
.mo-tier .step-body { font-size: 15px; line-height: 1.65; color: rgba(50, 47, 44, 0.72); }
@media (max-width: 900px) { .mo-tier .step-flow { grid-template-columns: 1fr; gap: 28px; } }
html[data-theme="dark"] .mo-tier .step-title { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .step-body { color: rgba(233, 227, 216, 0.72); }
/* The divider line above each step is ink at 12% opacity; on the near-black
   page that reads as an almost-invisible dark hairline instead of a subtle
   one, so lighten it in dark mode rather than just making it dark-on-dark. */
html[data-theme="dark"] .mo-tier .step { border-top-color: rgba(233, 227, 216, 0.16); }
/* Scroll-triggered "runner": the grey border-top divider stays put as the
   track, and a ::after line at the same position scales in from the left on
   top of it, filling with light red as it goes; the ::before dot travels
   left-to-right in lockstep (same duration/easing, no delay) so it reads as
   the dot dragging the red fill behind it, over the grey line. JS
   (animations.js) adds .is-revealed per step, staggered, once .step-flow
   scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .mo-tier .step::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(187, 16, 78, 0.35);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mo-tier .step.is-revealed::after { transform: scaleX(1); }
  .mo-tier .step::before {
    /* left (not transform) so the percentage resolves against the step's
       own width — transform's percentages resolve against the dot's own
       8px box, which would only ever move it 8px regardless of step width. */
    left: 0;
    transition: left 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mo-tier .step.is-revealed::before { left: calc(100% - 8px); }
}

/* ===== Outcomes band ("Real results, backed by data") ===== */
.mo-tier .outcomes-band { background: var(--tier-ink); color: var(--tier-cream); padding: 72px 48px; }
.mo-tier .outcomes-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.mo-tier .outcomes-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tier-yellow); margin-bottom: 14px; }
.mo-tier .outcomes-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 40px; font-weight: 500; line-height: 1.1; margin: 0; color: var(--tier-cream); }
.mo-tier .outcomes-title em { font-style: italic; color: var(--tier-pink); font-weight: 400; }
.mo-tier .outcomes-sub { font-size: 14px; line-height: 1.6; color: rgba(249, 245, 238, 0.65); max-width: 360px; }
.mo-tier .outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mo-tier .outcome { border: 1px solid rgba(249, 245, 238, 0.12); border-radius: 16px; padding: 28px 22px; transition: background 0.2s ease, transform 0.2s ease; }
.mo-tier .outcome:hover { background: rgba(249, 245, 238, 0.05); transform: translateY(-2px); }
.mo-tier .outcome-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--tier-yellow); margin-bottom: 10px; }
.mo-tier .outcome-label { font-size: 13.5px; line-height: 1.5; color: rgba(249, 245, 238, 0.7); }
@media (max-width: 900px) { .mo-tier .outcomes-band { padding: 48px 24px; } .mo-tier .outcomes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mo-tier .outcomes-grid { grid-template-columns: 1fr; } }

/* ===== Richer pack card content (tagline + feature list) ===== */
.mo-tier .pack-card-tagline { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-style: italic; font-size: 16px; color: var(--tier-red); margin-bottom: 14px; }
.mo-tier .pack-card-features { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mo-tier .pack-card-features li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.45; color: rgba(50, 47, 44, 0.72); }
.mo-tier .pack-card-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--tier-green); font-weight: 700; }
.mo-tier .pack-card-link { margin-top: auto; }
html[data-theme="dark"] .mo-tier .pack-card-features li { color: rgba(233, 227, 216, 0.72); }

/* ===== Schools: logo marquee ===== */
.wm-logos-marquee { position: relative; overflow: hidden; margin-top: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); }
.wm-logos-track { display: flex; width: max-content; align-items: center; gap: 64px; animation: wm-logos-scroll 34s linear infinite; }
.wm-logos-marquee:hover .wm-logos-track { animation-play-state: paused; }
.wm-logos-track img { height: 56px; width: auto; opacity: 0.85; flex: none; position: static; top: auto; }
@keyframes wm-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) { .wm-logos-track img { height: 40px; } .wm-logos-track { gap: 40px; } }
@media (prefers-reduced-motion: reduce) { .wm-logos-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 24px 48px; } }

/* ===== Schools: curricula card icons + per-category accents ===== */
.sc-curric-card { border-left: 3px solid rgba(50, 47, 44, 0.14); }
.sc-curric-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: rgba(50, 47, 44, 0.06); color: var(--tier-mute); }
.sc-curric-icon svg { width: 18px; height: 18px; }
.sc-cat-national { border-left-color: #2298ED; }
.sc-cat-national .sc-curric-icon { background: rgba(34, 152, 237, 0.12); color: #2298ED; }
.sc-cat-national .sc-curric-kicker { color: #2298ED; }
.sc-cat-local { border-left-color: #1b9e5f; }
.sc-cat-local .sc-curric-icon { background: rgba(40, 200, 120, 0.15); color: #1b7a4b; }
.sc-cat-local .sc-curric-kicker { color: #1b7a4b; }
.sc-cat-exam { border-left-color: #BB104E; }
.sc-cat-exam .sc-curric-icon { background: rgba(187, 16, 78, 0.10); color: #BB104E; }
.sc-cat-exam .sc-curric-kicker { color: #BB104E; }
.sc-cat-lang { border-left-color: #680C4E; }
.sc-cat-lang .sc-curric-icon { background: rgba(104, 12, 78, 0.12); color: #680C4E; }
.sc-cat-lang .sc-curric-kicker { color: #680C4E; }
.sc-curric-soon { border-left-style: dashed; border-left-color: rgba(50, 47, 44, 0.3); }
.sc-curric-soon .sc-curric-icon { background: rgba(50, 47, 44, 0.05); color: var(--tier-mute); }
html[data-theme="dark"] .sc-curric-icon { background: rgba(233, 227, 216, 0.08); }
html[data-theme="dark"] .sc-cat-lang .sc-curric-icon { color: #c58bb0; }
html[data-theme="dark"] .sc-cat-lang .sc-curric-kicker { color: #c58bb0; }

/* ===== Schools: curricula grouped lanes ===== */
.sc-lanes { display: flex; flex-direction: column; gap: 16px; }
.sc-lane { display: grid; grid-template-columns: 180px 1fr; background: #fff; border-radius: 14px; border: 0.5px solid rgba(50, 47, 44, 0.14); overflow: hidden; }
.sc-lane-label { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; border-right: 1px solid rgba(50, 47, 44, 0.10); gap: 6px; }
.sc-lane-label-text { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.sc-lane-items { display: flex; flex-wrap: wrap; padding: 12px; gap: 10px; align-items: stretch; }
.sc-lane-items--single .sc-lane-item { max-width: none; flex: 1; }
.sc-lane-item { flex: 1 1 200px; max-width: 280px; padding: 14px 18px; border-radius: 10px; background: #F9F5EE; border: 0.5px solid rgba(50, 47, 44, 0.10); }
.sc-lane-item-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 18px; font-weight: 600; color: #152859; margin-bottom: 3px; }
.sc-lane-item-desc { font-size: 12.5px; line-height: 1.45; color: rgba(50, 47, 44, 0.75); padding-top: 0; }
.sc-lane--national .sc-lane-label-text { color: #2298ED; }
.sc-lane--national .sc-curric-icon { background: rgba(34, 152, 237, 0.12); color: #2298ED; }
.sc-lane--local .sc-lane-label-text { color: #1b7a4b; }
.sc-lane--local .sc-curric-icon { background: rgba(40, 200, 120, 0.15); color: #1b7a4b; }
.sc-lane--exam .sc-lane-label-text { color: #BB104E; }
.sc-lane--exam .sc-curric-icon { background: rgba(187, 16, 78, 0.10); color: #BB104E; }
.sc-lane--lang .sc-lane-label-text { color: #680C4E; }
.sc-lane--lang .sc-curric-icon { background: rgba(104, 12, 78, 0.12); color: #680C4E; }
.sc-lane--soon { border-style: dashed; border-color: rgba(50, 47, 44, 0.25); background: transparent; }
.sc-lane--soon .sc-lane-label-text { color: var(--tier-mute); }
.sc-lane--soon .sc-curric-icon { background: rgba(50, 47, 44, 0.05); color: var(--tier-mute); }
.sc-lane--soon .sc-lane-item { border-style: dashed; background: transparent; }
.sc-lane--soon .sc-lane-item-name { color: var(--tier-mute); }
@media (max-width: 640px) {
  .sc-lane { grid-template-columns: 1fr; }
  .sc-lane-label { border-right: none; border-bottom: 1px solid rgba(50, 47, 44, 0.10); padding: 14px 18px; flex-direction: row; align-items: center; gap: 10px; }
  .sc-lane-item { max-width: none; }
}
html[data-theme="dark"] .sc-lane { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .sc-lane-label { border-right-color: rgba(233, 227, 216, 0.10); }
html[data-theme="dark"] .sc-lane-item { background: #161410; border-color: rgba(233, 227, 216, 0.10); }
html[data-theme="dark"] .sc-lane-item-name { color: #9db4e8; }
html[data-theme="dark"] .sc-lane-item-desc { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .sc-lane--soon { background: transparent; border-color: rgba(233, 227, 216, 0.18); }
html[data-theme="dark"] .sc-lane--soon .sc-lane-item { background: transparent; }
html[data-theme="dark"] .sc-lane--soon .sc-lane-item-name { color: rgba(233, 227, 216, 0.45); }
html[data-theme="dark"] .sc-lane--soon .sc-lane-label-text { color: rgba(233, 227, 216, 0.45); }
html[data-theme="dark"] .sc-lane--lang .sc-lane-label-text { color: #c58bb0; }
html[data-theme="dark"] .sc-lane--lang .sc-curric-icon { color: #c58bb0; }
@media (max-width: 640px) { html[data-theme="dark"] .sc-lane-label { border-bottom-color: rgba(233, 227, 216, 0.10); } }

/* ===== Schools: feature cards (bottom-half sections) ===== */
.sc-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sc-feature { display: flex; gap: 16px; padding: 20px; background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 12px; align-items: flex-start; }
.sc-feature-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(21, 40, 89, 0.08); color: #152859; }
.sc-feature-icon svg { width: 18px; height: 18px; }
.sc-feature-title { font-size: 14px; font-weight: 600; color: #322F2C; margin-bottom: 3px; }
.sc-feature-desc { font-size: 13.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.75); padding-top: 0; }
html[data-theme="dark"] .sc-feature { background: #201E18; border-color: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .sc-feature-icon { background: rgba(157, 180, 232, 0.14); color: #9db4e8; }
html[data-theme="dark"] .sc-feature-title { color: #E9E3D8; }
html[data-theme="dark"] .sc-feature-desc { color: rgba(233, 227, 216, 0.65); }

/* Compact variant (for split layouts) */
.sc-features-compact { display: flex; flex-direction: column; gap: 12px; }
.sc-features-compact .sc-feature { padding: 14px 16px; align-items: center; }
.sc-features-compact .sc-feature-icon { width: 34px; height: 34px; border-radius: 9px; }
.sc-features-compact .sc-feature-icon svg { width: 16px; height: 16px; }
.sc-features-compact .sc-feature-title { font-size: 13.5px; margin-bottom: 1px; }
.sc-features-compact .sc-feature-desc { font-size: 12.5px; }

/* ===== Schools: testimonial cards ===== */
.sc-testimonial { margin-top: 32px; padding: 26px 30px 22px; background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 14px; box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.18); }
.sc-testimonial-quote::before { content: "\201C"; display: block; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 44px; line-height: 0.55; color: #BB104E; margin: 8px 0 10px; }
.sc-testimonial-quote { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 16.5px; line-height: 1.55; color: #322F2C; font-style: italic; margin-bottom: 12px; padding-top: 0; }
.sc-testimonial-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--tier-mute); padding-top: 0; }
.sc-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 24px; }
.sc-testimonial-grid .sc-testimonial { margin-top: 0; }
.sc-testimonial--wide { grid-column: 1 / -1; }
html[data-theme="dark"] .sc-testimonial { background: #201E18; border-color: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .sc-testimonial-quote { color: #E9E3D8; }
html[data-theme="dark"] .sc-testimonial-name { color: rgba(233, 227, 216, 0.72); }

/* ===== Schools: split layout (text + visual) ===== */
.sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.sc-split--reverse .sc-split-content { order: 2; }
.sc-split--reverse .sc-split-visual { order: 1; }
@media (max-width: 768px) {
  .sc-split { grid-template-columns: 1fr; gap: 28px; }
  .sc-split--reverse .sc-split-content, .sc-split--reverse .sc-split-visual { order: unset; }
}
/* Scroll-triggered slide-in, direction matching which column an element
   renders in. Generic utility classes (not scoped to .sc-split-visual) so
   any two-column layout's visual side can reuse them — animations.js adds
   .slide-from-left/.slide-from-right based on actual DOM/grid position
   (which side the element's grid column ends up on), then .is-revealed
   once it scrolls into view. Used by .sc-split-visual (schools split
   sections) and .uni-mock (enterprise/universities report-grid mockups). */
@media (prefers-reduced-motion: no-preference) {
  .slide-from-left,
  .slide-from-right {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .slide-from-right { transform: translateX(48px); }
  .slide-from-left { transform: translateX(-48px); }
  .slide-from-left.is-revealed,
  .slide-from-right.is-revealed {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Schools: dark-background section variants ===== */
.sc-bg-ocean { background: #152859 !important; }
.sc-bg-ocean .sc-band-label { color: rgba(249, 245, 238, 0.55); }
.sc-bg-ocean .v2-h2, .sc-bg-ocean .heading-48 { color: #F9F5EE; }
.sc-bg-ocean .sc-lead { color: rgba(249, 245, 238, 0.72); }
.sc-bg-ocean .sc-feature { background: rgba(249, 245, 238, 0.08); border-color: rgba(249, 245, 238, 0.12); }
.sc-bg-ocean .sc-feature-icon { background: rgba(249, 245, 238, 0.12); color: rgba(249, 245, 238, 0.8); }
.sc-bg-ocean .sc-feature-title { color: #F9F5EE; }
.sc-bg-ocean .sc-feature-desc { color: rgba(249, 245, 238, 0.65); }
.sc-bg-ocean .sc-testimonial { background: rgba(249, 245, 238, 0.06); border-color: rgba(249, 245, 238, 0.12); }
.sc-bg-ocean .sc-testimonial-quote::before { color: #ff6d99; }
.sc-bg-ocean .sc-testimonial-quote { color: rgba(249, 245, 238, 0.92); }
.sc-bg-ocean .sc-testimonial-name { color: rgba(249, 245, 238, 0.55); }
html[data-theme="dark"] .sc-bg-ocean { background: #101d3e !important; }

.sc-bg-charcoal { background: #2C2925 !important; }
.sc-bg-charcoal .sc-band-label { color: rgba(249, 245, 238, 0.45); }
.sc-bg-charcoal .v2-h2, .sc-bg-charcoal .heading-48 { color: #F9F5EE; }
.sc-bg-charcoal .sc-lead { color: rgba(249, 245, 238, 0.68); }
.sc-bg-charcoal .sc-feature { background: rgba(249, 245, 238, 0.06); border-color: rgba(249, 245, 238, 0.10); }
.sc-bg-charcoal .sc-feature-icon { background: rgba(249, 245, 238, 0.10); color: rgba(249, 245, 238, 0.75); }
.sc-bg-charcoal .sc-feature-title { color: #F9F5EE; }
.sc-bg-charcoal .sc-feature-desc { color: rgba(249, 245, 238, 0.60); }
.sc-bg-charcoal .sess-ph { background: linear-gradient(135deg, #1a1815, #111); border-color: rgba(249, 245, 238, 0.10); }
html[data-theme="dark"] .sc-bg-charcoal { background: #1e1b16 !important; }

/* ===== Schools: hub card icons ===== */
.sc-hub-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: rgba(21, 40, 89, 0.08); color: #152859; }
.sc-hub-icon svg { width: 22px; height: 22px; }
html[data-theme="dark"] .sc-hub-icon { background: rgba(157, 180, 232, 0.14); color: #9db4e8; }

/* ===== Class dashboard (universities): distinct from the single-student report ===== */
.mo-tier .clsrep { background: #fff; border-radius: 16px; border: 0.5px solid rgba(50, 47, 44, 0.12); box-shadow: 0 34px 70px -34px rgba(21, 40, 89, 0.5); overflow: hidden; color: #322F2C; margin: 0; }
.mo-tier .clsrep-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; background: var(--tier-ocean); color: var(--tier-cream); }
.mo-tier .clsrep-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: rgba(249, 245, 238, 0.6); margin-bottom: 8px; }
.mo-tier .clsrep-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 23px; font-weight: 600; line-height: 1.1; }
.mo-tier .clsrep-meta { font-size: 12px; color: rgba(249, 245, 238, 0.7); margin-top: 3px; }
.mo-tier .clsrep-avg { text-align: center; flex: none; }
.mo-tier .clsrep-avg-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 34px; font-weight: 600; line-height: 1; color: var(--tier-yellow); }
.mo-tier .clsrep-avg-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(249, 245, 238, 0.7); margin-top: 5px; }
.mo-tier .clsrep-block { padding: 18px 24px 4px; }
.mo-tier .clsrep-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.75); margin-bottom: 12px; }
/* Student heatmap: one cell per student */
/* Class grade line chart (weeks x-axis, 0–100 y-axis, avg line + quartile band) */
.mo-tier .clsrep-line { width: 100%; height: auto; display: block; }
.mo-tier .clsrep-line text { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: rgba(50, 47, 44, 0.45); }
.mo-tier .clsrep-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.mo-tier .clsrep-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(50, 47, 44, 0.75); }
.mo-tier .clsrep-legend .ln-avg { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--tier-ocean); }
.mo-tier .clsrep-legend .ln-band { display: inline-block; width: 16px; height: 11px; border-radius: 3px; background: rgba(21, 40, 89, 0.15); }
.mo-tier .clsrep-stuck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mo-tier .clsrep-stuck li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(50, 47, 44, 0.75); border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); padding-bottom: 8px; }
.mo-tier .clsrep-pct { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #1b7a4b; }
.mo-tier .clsrep-pct.warn { color: var(--tier-orange); }
.mo-tier .clsrep-insight { margin: 14px 24px 22px; background: #f2ede4; border-left: 3px solid var(--tier-ocean); border-radius: 8px; padding: 14px 16px; }
.mo-tier .clsrep-insight-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--tier-ocean); margin-bottom: 6px; }
.mo-tier .clsrep-insight p { font-size: 13px; line-height: 1.5; color: rgba(50, 47, 44, 0.8); }

/* ===== /schools activity showcase (legacy register: not under .mo-tier) ===== */
.act-flow { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 920px; margin: 8px auto 0; }
.act-card { width: 100%; background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 16px; box-shadow: 0 30px 60px -34px rgba(21, 40, 89, 0.4); overflow: hidden; margin: 0; }
.act-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f2ede4; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.act-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(50, 47, 44, 0.2); flex: none; }
.act-chrome-title { margin-left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.75); }
.act-step, .act-score { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.act-step { color: rgba(50, 47, 44, 0.75); }
.act-score { color: #1b7a4b; font-weight: 600; }
.act-body { padding: 22px 24px; }
.act-body-split { display: grid; grid-template-columns: 1fr 1fr; }
.act-passage { padding: 22px 24px; border-right: 0.5px solid rgba(50, 47, 44, 0.1); }
.act-question { padding: 22px 24px; background: #faf7f1; }
.act-passage-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.act-passage p { font-size: 14px; line-height: 1.6; color: rgba(50, 47, 44, 0.8); padding-top: 0; }
.act-q-label, .act-resp-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: #BB104E; margin-bottom: 8px; }
.act-q-text { font-size: 15px; font-weight: 500; line-height: 1.45; margin-bottom: 14px; color: #322F2C; }
.act-input { border: 1px solid rgba(50, 47, 44, 0.2); border-radius: 10px; background: #fff; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.85); min-height: 82px; }
.act-submit { display: inline-block; margin-top: 12px; background: #BB104E; color: #fff; border: none; border-radius: 100px; padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: 'Inter', 'Open Sans', sans-serif; cursor: default; }
.act-arrow { color: rgba(50, 47, 44, 0.3); }
.act-arrow svg { width: 26px; height: 26px; display: block; }
.act-resp { background: #faf7f1; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.act-resp p { font-size: 14px; line-height: 1.55; color: rgba(50, 47, 44, 0.8); font-style: italic; padding-top: 0; }
.act-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.act-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 5px 11px; border-radius: 100px; }
.act-tag.ok { background: rgba(40, 200, 120, 0.15); color: #1b7a4b; }
.act-tag.watch { background: rgba(243, 116, 0, 0.15); color: #b35600; }
.act-feedback { background: #152859; color: #F9F5EE; border-radius: 12px; padding: 16px 18px; }
.act-fb-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: #FFC700; margin-bottom: 8px; }
.act-feedback p { font-size: 13px; line-height: 1.55; color: rgba(249, 245, 238, 0.9); padding-top: 0; }
.act-feedback p + p { margin-top: 8px; }
.act-feedback strong { color: #fff; font-weight: 600; }
.act-note { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--tier-mute); margin-top: 16px; }
@media (max-width: 640px) {
  .act-body-split { grid-template-columns: 1fr; }
  .act-passage { border-right: none; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
}
html[data-theme="dark"] .act-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .act-chrome { background: #2a2820; border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .act-chrome-title { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .act-passage { border-right-color: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .act-question, html[data-theme="dark"] .act-resp { background: #26241d; }
html[data-theme="dark"] .act-passage-title { color: #E9E3D8; }
html[data-theme="dark"] .act-passage p, html[data-theme="dark"] .act-q-text, html[data-theme="dark"] .act-resp p { color: rgba(233, 227, 216, 0.8); }
html[data-theme="dark"] .act-input { background: #1a1813; border-color: rgba(233, 227, 216, 0.2); color: rgba(233, 227, 216, 0.85); }
@media (max-width: 640px) { html[data-theme="dark"] .act-passage { border-bottom-color: rgba(233, 227, 216, 0.12); } }

/* ===== /schools 1-on-1 sessions (legacy register) ===== */
.sess-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sess-ph { aspect-ratio: 4 / 3; border-radius: 16px; background: linear-gradient(135deg, #152859, #0e1c40); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(249, 245, 238, 0.5); border: 0.5px solid rgba(50, 47, 44, 0.12); }
.sess-ph svg { width: 46px; height: 46px; }
.sess-ph-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.sess-photo { display: block; width: 100%; height: auto; aspect-ratio: 2480 / 1278; object-fit: cover; border-radius: 16px; border: 0.5px solid rgba(50, 47, 44, 0.12); box-shadow: 0 34px 70px -34px rgba(21, 40, 89, 0.5); }
html[data-theme="dark"] .sess-photo { border-color: rgba(233, 227, 216, 0.14); }
.sess-points { list-style: none; margin: 6px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sess-points li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: rgba(50, 47, 44, 0.72); padding-top: 0; }
.sess-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #BB104E; }
.sess-points strong { color: #322F2C; font-weight: 600; }
@media (max-width: 860px) { .sess-grid { grid-template-columns: 1fr; gap: 28px; } }
html[data-theme="dark"] .sess-points li { color: rgba(233, 227, 216, 0.75); }
html[data-theme="dark"] .sess-points strong { color: #E9E3D8; }

/* Schools · "Designed around your school's outcomes" — curriculum/outcomes setup mock */
.bf-mock { background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 16px; box-shadow: 0 34px 70px -34px rgba(21, 40, 89, 0.5); overflow: hidden; color: #322F2C; margin: 0; }
.bf-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f2ede4; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.bf-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(50, 47, 44, 0.2); flex: none; }
.bf-chrome-title { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.75); }
.bf-chrome-school { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; background: #322F2C; color: #F9F5EE; border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
.bf-body { padding: 18px 20px 20px; }
.bf-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); }
.bf-row-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.55); }
.bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-chip { font-size: 12px; line-height: 1; padding: 6px 11px; border-radius: 100px; background: #faf7f1; border: 0.5px solid rgba(50, 47, 44, 0.16); color: rgba(50, 47, 44, 0.72); }
.bf-chip--on { background: rgba(21, 40, 89, 0.09); border-color: rgba(21, 40, 89, 0.28); color: #152859; font-weight: 600; }
.bf-map { margin-top: 16px; }
.bf-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bf-map-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.55); }
.bf-map-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #1b7a4b; }
.bf-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bf-outcome { display: flex; align-items: center; gap: 11px; }
.bf-check { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #1b7a4b; color: #fff; display: flex; align-items: center; justify-content: center; }
.bf-check svg { width: 12px; height: 12px; }
.bf-check--pending { background: transparent; color: #b45309; border: 1.5px solid rgba(180, 83, 9, 0.5); }
.bf-outcome-name { flex: 1; font-size: 13px; line-height: 1.35; color: rgba(50, 47, 44, 0.85); }
.bf-outcome--pending .bf-outcome-name { color: rgba(50, 47, 44, 0.55); }
.bf-outcome-tag { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; }
.bf-tag-on { background: rgba(27, 122, 75, 0.12); color: #1b7a4b; }
.bf-tag-pending { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.bf-foot { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 0.5px solid rgba(50, 47, 44, 0.08); font-size: 12px; line-height: 1.4; color: rgba(50, 47, 44, 0.7); }
.bf-foot-icon { flex: none; color: #BB104E; }
.bf-foot-icon svg { width: 16px; height: 16px; display: block; }
@media (max-width: 460px) { .bf-row { grid-template-columns: 1fr; gap: 6px; } }
html[data-theme="dark"] .bf-mock { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .bf-chrome { background: #2a2820; border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .bf-chrome-title { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .bf-row { border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .bf-chip { background: #26241d; border-color: rgba(233, 227, 216, 0.16); color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .bf-chip--on { background: rgba(157, 180, 232, 0.16); border-color: rgba(157, 180, 232, 0.4); color: #9db4e8; }
html[data-theme="dark"] .bf-outcome-name { color: rgba(233, 227, 216, 0.85); }
html[data-theme="dark"] .bf-outcome--pending .bf-outcome-name { color: rgba(233, 227, 216, 0.5); }
html[data-theme="dark"] .bf-foot { border-top-color: rgba(233, 227, 216, 0.1); color: rgba(233, 227, 216, 0.62); }

/* Schools · "Formative assessment, built in" — live class skill-mastery heatmap mock */
.fa-mock { background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 16px; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.55); overflow: hidden; color: #322F2C; margin: 0; }
.fa-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f2ede4; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.fa-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(50, 47, 44, 0.2); flex: none; }
.fa-chrome-title { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.75); }
.fa-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #1b7a4b; }
.fa-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #1b7a4b; box-shadow: 0 0 0 3px rgba(27, 122, 75, 0.18); }
.fa-body { padding: 18px 20px 18px; }
.fa-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.fa-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(50, 47, 44, 0.68); }
.fa-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.fa-sw--low { background: #DE8C7E; }
.fa-sw--mid { background: #E9B65C; }
.fa-sw--hi { background: #5FB088; }
.fa-grid { display: flex; flex-direction: column; gap: 7px; }
.fa-grow { display: grid; grid-template-columns: 92px 1fr 40px; gap: 12px; align-items: center; }
.fa-grow--head { margin-bottom: 1px; }
.fa-grow--head .fa-skill, .fa-now-key { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(50, 47, 44, 0.45); }
.fa-now-key { text-align: center; }
.fa-weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fa-weeks i { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-style: normal; text-align: center; color: rgba(50, 47, 44, 0.4); }
.fa-skill { font-size: 12.5px; font-weight: 500; color: rgba(50, 47, 44, 0.85); }
.fa-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fa-c { height: 18px; border-radius: 4px; display: block; }
.fa-c--low { background: #DE8C7E; }
.fa-c--mid { background: #E9B65C; }
.fa-c--hi { background: #5FB088; }
.fa-now { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; text-align: center; }
.fa-now--low { color: #c0392b; }
.fa-now--mid { color: #b45309; }
.fa-now--hi { color: #1b7a4b; }
.fa-flag { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; background: rgba(187, 16, 78, 0.07); border-left: 3px solid #BB104E; border-radius: 8px; padding: 11px 13px; font-size: 12px; line-height: 1.45; color: rgba(50, 47, 44, 0.82); }
.fa-flag-icon { flex: none; color: #BB104E; margin-top: 1px; }
.fa-flag-icon svg { width: 15px; height: 15px; display: block; }
.fa-flag strong { color: #BB104E; font-weight: 600; }
.fa-updated { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.45); margin-top: 12px; }
@media (max-width: 460px) { .fa-grow { grid-template-columns: 74px 1fr 34px; gap: 8px; } .fa-cells, .fa-weeks { gap: 4px; } }
html[data-theme="dark"] .fa-mock { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .fa-chrome { background: #2a2820; border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .fa-chrome-title { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .fa-leg { color: rgba(233, 227, 216, 0.68); }
html[data-theme="dark"] .fa-skill { color: rgba(233, 227, 216, 0.85); }
html[data-theme="dark"] .fa-now--low { color: #e8897b; }
html[data-theme="dark"] .fa-now--mid { color: #e9b65c; }
html[data-theme="dark"] .fa-now--hi { color: #6fc79a; }
html[data-theme="dark"] .fa-flag { background: rgba(187, 16, 78, 0.14); color: rgba(233, 227, 216, 0.82); }
html[data-theme="dark"] .fa-flag strong { color: #ff6d99; }
:is(.sc-bg-charcoal, .sc-bg-ocean, .sc-bg-red) .act-note { color: rgba(249, 245, 238, 0.5); }

/* ===== /teachers page (legacy register: not scoped under .mo-tier) ===== */
.tc-band-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #BB104E; margin-bottom: 14px; }

/* Compact stat band: replaces four separate full-bleed banners with one scan. */
.tc-stats-band { background: #152859; padding: 48px 48px 52px; }
.tc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.14); border: 0.5px solid rgba(255, 255, 255, 0.14); max-width: 1140px; margin: 0 auto; }
.tc-stat { background: #152859; padding: 26px 20px 28px; text-align: center; }
.tc-stat-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: clamp(36px, 4vw, 48px); font-weight: 600; line-height: 1; color: #fff; }
.tc-stat-num span { font-size: 15px; color: rgba(249, 245, 238, 0.75); margin-left: 3px; font-weight: 400; }
.tc-stat-accent .tc-stat-num { color: #ff6d99; }
.tc-stat-label { font-size: 12.5px; color: rgba(249, 245, 238, 0.85); margin-top: 10px; line-height: 1.4; }
@media (max-width: 860px) { .tc-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tc-stats-band { padding: 36px 24px 40px; } .tc-stats { grid-template-columns: 1fr; } }

/* Value bullets: four scannable cards instead of paragraph sections. */
.tc-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tc-feature { position: relative; overflow: hidden; background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 16px; padding: 26px 22px; }
.tc-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.tc-feature-a::before { background: #BB104E; }
.tc-feature-b::before { background: #152859; }
.tc-feature-c::before { background: #28C878; }
.tc-feature-d::before { background: #F37400; }
.tc-feature-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tc-feature-icon svg { width: 21px; height: 21px; }
.tc-feature-a .tc-feature-icon { background: rgba(187, 16, 78, 0.1); color: #BB104E; }
.tc-feature-b .tc-feature-icon { background: rgba(21, 40, 89, 0.1); color: #152859; }
.tc-feature-c .tc-feature-icon { background: rgba(40, 200, 120, 0.14); color: #1b7a4b; }
.tc-feature-d .tc-feature-icon { background: rgba(243, 116, 0, 0.12); color: #b35600; }
.tc-feature-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 19px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; color: #322F2C; }
.tc-feature-body { font-size: 13.5px; line-height: 1.55; color: rgba(50, 47, 44, 0.75); }
@media (max-width: 980px) { .tc-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tc-features { grid-template-columns: 1fr; } }

/* How it works: three short steps instead of prose. */
.tc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.tc-step { position: relative; padding-top: 16px; border-top: 2px solid rgba(50, 47, 44, 0.12); }
.tc-step::before { content: ''; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #BB104E; }
.tc-step-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 44px; font-weight: 600; line-height: 1; color: rgba(187, 16, 78, 0.22); margin-bottom: 8px; }
.tc-step-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; font-weight: 500; line-height: 1.2; margin-bottom: 8px; color: #322F2C; }
.tc-step-body { font-size: 14px; line-height: 1.6; color: rgba(50, 47, 44, 0.7); }
@media (max-width: 860px) { .tc-steps { grid-template-columns: 1fr; gap: 26px; } }

/* Testimonial grid: a curated few, not eleven stacked blocks. */
.tc-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1020px; margin: 0 auto; }
.tc-quote { background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 16px; padding: 24px 26px; }
.tc-quote-mark { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 40px; line-height: 1; color: #FFC700; margin-bottom: 4px; }
.tc-quote-text { font-size: 14.5px; line-height: 1.6; color: rgba(50, 47, 44, 0.85); margin-bottom: 14px; }
.tc-quote-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--tier-mute); line-height: 1.5; }
.tc-quote-featured { grid-column: 1 / -1; background: #152859; }
.tc-quote-featured .tc-quote-mark { color: #FFC700; }
.tc-quote-featured .tc-quote-text { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 22px; font-style: italic; font-weight: 500; color: #F9F5EE; line-height: 1.4; }
.tc-quote-featured .tc-quote-name { color: rgba(249, 245, 238, 0.7); }
@media (max-width: 760px) { .tc-quotes { grid-template-columns: 1fr; } .tc-quote-featured .tc-quote-text { font-size: 19px; } }

/* ===== /teachers dashboard mockup =====
   Purpose-built for this page: browser chrome + tabs, live stat tiles, a
   skill-mastery breakdown, a student roster with status, and an activity
   feed. Distinct from the other product mockups on the site (act-* on
   /schools, wkrep/report-* on /universities) — this one is a class-level
   teacher view, not a single-student or single-exercise view. */
.tc-dash { max-width: 920px; margin: 0 auto; background: #fff; border-radius: 18px; border: 0.5px solid rgba(50, 47, 44, 0.12); box-shadow: 0 40px 80px -36px rgba(21, 40, 89, 0.45); overflow: hidden; }
.tc-dash-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #eef1f7; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.tc-dash-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tc-dash-dot.r { background: #ff5f57; }
.tc-dash-dot.y { background: #febc2e; }
.tc-dash-dot.g { background: #28c840; }
.tc-dash-url { margin-left: 8px; flex: 1; background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 100px; padding: 5px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(50, 47, 44, 0.75); text-align: center; }
.tc-dash-live { margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #1b7a4b; white-space: nowrap; }
.tc-dash-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #28c840; }
.tc-dash-tabs { display: flex; padding: 0 20px; background: #fff; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); overflow-x: auto; }
.tc-dash-tab { padding: 11px 0; margin-right: 24px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: rgba(50, 47, 44, 0.45); border-bottom: 2px solid transparent; white-space: nowrap; }
.tc-dash-tab.active { color: #152859; border-bottom-color: #BB104E; font-weight: 600; }
.tc-dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 4px; flex-wrap: wrap; }
.tc-dash-class { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 21px; font-weight: 600; color: #152859; }
.tc-dash-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.05em; color: rgba(50, 47, 44, 0.75); margin-top: 4px; text-transform: uppercase; }
.tc-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 24px; }
.tc-dash-stat { background: #f7f5f0; border-radius: 12px; padding: 13px 14px 11px; }
.tc-dash-stat-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 25px; font-weight: 600; color: #322F2C; line-height: 1; }
.tc-dash-stat-delta { font-size: 10.5px; font-weight: 600; margin-left: 4px; }
.tc-dash-stat-delta.up { color: #1b7a4b; }
.tc-dash-stat-delta.warn { color: #b35600; }
.tc-dash-stat-label { font-size: 10px; color: rgba(50, 47, 44, 0.75); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.04em; font-family: 'JetBrains Mono', monospace; }
.tc-dash-section { padding: 6px 24px 16px; }
.tc-dash-section-title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(50, 47, 44, 0.75); margin-bottom: 12px; }
.tc-dash-skills { display: flex; flex-direction: column; gap: 9px; }
.tc-skill-row { display: grid; grid-template-columns: 118px 1fr 36px; align-items: center; gap: 10px; }
.tc-skill-name { font-size: 12px; color: #322F2C; }
.tc-skill-bar { height: 7px; border-radius: 100px; background: rgba(50, 47, 44, 0.08); overflow: hidden; }
.tc-skill-fill { height: 100%; border-radius: 100px; background: #152859; }
.tc-skill-fill.warn { background: #F37400; }
.tc-skill-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: rgba(50, 47, 44, 0.75); }
.tc-dash-grid2 { display: grid; grid-template-columns: 1.15fr 0.85fr; border-top: 0.5px solid rgba(50, 47, 44, 0.08); }
.tc-roster { list-style: none; margin: 0; padding: 16px 24px; display: flex; flex-direction: column; gap: 1px; }
.tc-roster li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.06); }
.tc-roster li:last-child { border-bottom: none; }
.tc-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: #fff; flex: none; }
.tc-roster-name { font-size: 12px; color: #322F2C; font-weight: 500; flex: none; width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-roster-bar { flex: 1; height: 6px; border-radius: 100px; background: rgba(50, 47, 44, 0.08); overflow: hidden; }
.tc-roster-fill { height: 100%; border-radius: 100px; }
.tc-roster-pct { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(50, 47, 44, 0.75); width: 28px; text-align: right; flex: none; }
.tc-roster-status { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tc-roster-status.ok { background: #28c878; }
.tc-roster-status.warn { background: #F37400; }
.tc-feed { list-style: none; margin: 0; padding: 16px 24px; background: #f7f5f0; display: flex; flex-direction: column; gap: 13px; border-left: 0.5px solid rgba(50, 47, 44, 0.08); }
.tc-feed li { display: flex; gap: 9px; font-size: 11.5px; line-height: 1.4; color: rgba(50, 47, 44, 0.75); }
.tc-feed-dot { width: 6px; height: 6px; border-radius: 50%; background: #BB104E; margin-top: 5px; flex: none; }
.tc-feed time { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(50, 47, 44, 0.45); margin-top: 2px; }
.tc-dash-insight { margin: 0 24px 20px; background: #fff4e8; border-left: 3px solid #F37400; border-radius: 8px; padding: 13px 16px; }
.tc-dash-insight-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #b35600; margin-bottom: 6px; }
.tc-dash-insight-body { font-size: 12.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.85); }
.tc-dash-note { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--tier-mute); margin-top: 16px; }
@media (max-width: 760px) {
  .tc-dash-stats { grid-template-columns: 1fr 1fr; }
  .tc-dash-grid2 { grid-template-columns: 1fr; }
  .tc-feed { border-left: none; border-top: 0.5px solid rgba(50, 47, 44, 0.08); }
  .tc-skill-row { grid-template-columns: 92px 1fr 34px; }
}
html[data-theme="dark"] .tc-stat { background: #152859; }
html[data-theme="dark"] .tc-feature { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .tc-feature-title { color: #E9E3D8; }
html[data-theme="dark"] .tc-feature-body { color: rgba(233, 227, 216, 0.68); }
html[data-theme="dark"] .tc-step { border-top-color: rgba(233, 227, 216, 0.16); }
html[data-theme="dark"] .tc-step-title { color: #E9E3D8; }
html[data-theme="dark"] .tc-step-body { color: rgba(233, 227, 216, 0.7); }
html[data-theme="dark"] .tc-quote { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .tc-quote-text { color: rgba(233, 227, 216, 0.85); }
html[data-theme="dark"] .tc-quote-name { color: rgba(233, 227, 216, 0.72); }

/* ===== Unified quote / testimonial card (site-wide, both registers) =====
   Global classes (NOT scoped to .mo-tier) so they work on legacy and brand
   pages alike; the --tier-* tokens live under .mo-tier and aren't in scope here,
   so the palette is hard-coded with an explicit html[data-theme="dark"] layer,
   exactly like .tc-quote / .sc-testimonial. Uses <blockquote>/<span> (never <p>
   or <a>) to dodge the legacy global landmines p{padding-top:117px} / a{display:flex}.
   Markup:
     <div class="mo-quotes">                              grid wrapper
       <figure class="mo-quote mo-quote--feature">        optional spotlight (ocean, full width)
         <span class="mo-quote-role">Principal</span>     bare role only
         <blockquote class="mo-quote-text">&hellip;</blockquote>
         <figcaption class="mo-quote-foot">
           <span class="mo-quote-avatar">NO</span>        monogram initials, OR <img> for a real photo
           <span class="mo-quote-who">
             <span class="mo-quote-name">Neill O.</span>
             <span class="mo-quote-meta">Principal, Kowloon Junior School</span>
           </span>
         </figcaption>
       </figure>
       <figure class="mo-quote"> &hellip; </figure>
     </div> */
/* Flexbox with a centered wrap so partial last rows center their orphans
   instead of stranding blank columns: 2-quote pages center as a pair, and the
   4th card on 4-quote pages centers under the row above (a CSS grid would
   left-align it). Cards cap at 360px to keep their width consistent. */
.mo-quotes { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1120px; margin: 0 auto; }
.mo-quote { flex: 1 1 300px; max-width: 360px; position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; gap: 15px; text-align: left; background: #FFFCF6; border: 0.5px solid rgba(50, 47, 44, 0.12); border-radius: 16px; padding: 28px 30px 22px; box-shadow: 0 1px 0 rgba(50, 47, 44, 0.05); transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.5, 1), box-shadow 0.22s ease, border-color 0.22s ease; }
.mo-quote > * { position: relative; z-index: 1; }
.mo-quote blockquote, .mo-quote figure, .mo-quote figcaption { margin: 0; }
.mo-quote::before { content: "\201C"; position: absolute; z-index: 0; top: 2px; left: 20px; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-weight: 600; font-style: italic; font-size: 118px; line-height: 1; color: #BB104E; opacity: 0.10; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.mo-quote:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgba(30, 20, 10, 0.45); border-color: rgba(187, 16, 78, 0.4); }
.mo-quote:hover::before { opacity: 0.16; transform: translateY(-2px); }
.mo-quote-role { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: #BB104E; }
.mo-quote-text { margin: 0; padding: 0; border: 0; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 19.5px; line-height: 1.44; color: #322F2C; flex: 1 0 auto; }
.mo-quote-foot { display: flex; align-items: center; gap: 13px; margin-top: 0; padding-top: 15px; text-align: left; border-top: 0.5px solid rgba(50, 47, 44, 0.12); }
.mo-quote-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; background: rgba(187, 16, 78, 0.10); color: #BB104E; text-transform: uppercase; }
.mo-quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-quote-who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.mo-quote-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; color: #322F2C; line-height: 1.3; }
.mo-quote-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.02em; color: var(--tier-mute); line-height: 1.4; }
/* Feature / spotlight: ocean ground, full width; a committed dark surface in both themes */
.mo-quote--feature { flex: 1 1 100%; max-width: 100%; background: #152859; border-color: transparent; padding: clamp(30px, 4vw, 50px); }
.mo-quote--feature::before { content: none; }
.mo-quote--feature::after { content: "\201D"; position: absolute; z-index: 0; top: 0.02em; right: 0.1em; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-weight: 600; font-style: italic; font-size: clamp(180px, 26vw, 300px); line-height: 0.7; color: #FFC700; opacity: 0.18; pointer-events: none; }
.mo-quote--feature .mo-quote-role { color: #FFC700; }
.mo-quote--feature .mo-quote-text { font-size: clamp(22px, 2.9vw, 31px); line-height: 1.34; color: #F4F0E8; max-width: 40ch; }
.mo-quote--feature .mo-quote-foot { position: relative; border-top: none; padding-top: 26px; margin-top: 4px; }
.mo-quote--feature .mo-quote-foot::before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 2px; background: #FFC700; border-radius: 2px; }
.mo-quote--feature .mo-quote-avatar { background: transparent; border: 1.5px solid rgba(255, 199, 0, 0.55); color: #FFC700; }
.mo-quote--feature .mo-quote-name { color: #F9F5EE; }
.mo-quote--feature .mo-quote-meta { color: rgba(249, 245, 238, 0.68); }
/* full-width plain card (a single long testimonial without the ocean treatment) */
.mo-quote--wide { grid-column: 1 / -1; }
/* Dark theme (site data-theme toggle) */
html[data-theme="dark"] .mo-quote { background: #201E18; border-color: rgba(233, 227, 216, 0.14); box-shadow: none; }
html[data-theme="dark"] .mo-quote::before { color: #ff6d99; }
html[data-theme="dark"] .mo-quote:hover { box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.7); border-color: rgba(255, 109, 153, 0.4); }
html[data-theme="dark"] .mo-quote-role { color: #ff6d99; }
html[data-theme="dark"] .mo-quote-text { color: #E9E3D8; }
html[data-theme="dark"] .mo-quote-foot { border-top-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-quote-avatar { background: rgba(255, 109, 153, 0.14); color: #ff6d99; }
html[data-theme="dark"] .mo-quote-name { color: #E9E3D8; }
html[data-theme="dark"] .mo-quote-meta { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-quote--feature { background: #152859; border-color: transparent; }
html[data-theme="dark"] .mo-quote--feature .mo-quote-avatar { background: transparent; color: #FFC700; }
@media (prefers-reduced-motion: reduce) { .mo-quote { transition: none; } .mo-quote:hover { transform: none; } }
@media (max-width: 600px) { .mo-quote--feature .mo-quote-text { max-width: none; } }

html[data-theme="dark"] .tc-dash { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .tc-dash-chrome { background: #2a2820; border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .tc-dash-url { background: #201E18; border-color: rgba(233, 227, 216, 0.16); color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .tc-dash-tabs { background: #201E18; border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .tc-dash-tab { color: rgba(233, 227, 216, 0.45); }
html[data-theme="dark"] .tc-dash-tab.active { color: #E9E3D8; }
html[data-theme="dark"] .tc-dash-class { color: #9db4e8; }
html[data-theme="dark"] .tc-dash-meta { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .tc-dash-stat { background: #26241d; }
html[data-theme="dark"] .tc-dash-stat-num { color: #E9E3D8; }
html[data-theme="dark"] .tc-dash-stat-label { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .tc-dash-section-title { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .tc-skill-name { color: rgba(233, 227, 216, 0.8); }
html[data-theme="dark"] .tc-skill-bar { background: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .tc-skill-fill { background: #9db4e8; }
html[data-theme="dark"] .tc-skill-pct { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .tc-dash-grid2 { border-top-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .tc-roster li { border-bottom-color: rgba(233, 227, 216, 0.08); }
html[data-theme="dark"] .tc-roster-name { color: #E9E3D8; }
html[data-theme="dark"] .tc-roster-bar { background: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .tc-roster-pct { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .tc-feed { background: #26241d; border-left-color: rgba(233, 227, 216, 0.08); }
html[data-theme="dark"] .tc-feed li { color: rgba(233, 227, 216, 0.75); }
html[data-theme="dark"] .tc-feed time { color: rgba(233, 227, 216, 0.45); }
html[data-theme="dark"] .tc-dash-insight { background: rgba(243, 116, 0, 0.1); }
html[data-theme="dark"] .tc-dash-insight-body { color: rgba(233, 227, 216, 0.85); }
@media (max-width: 760px) { html[data-theme="dark"] .tc-feed { border-top-color: rgba(233, 227, 216, 0.1); } }

/* ===== Site sweep: section surface utilities =====
   One or two dark anchors per page (never adjacent) + quiet white<->cream
   alternation, so long runs of #F9F5EE stop blending together without the
   page turning into stripes. The sc-bg-* classes are register-agnostic:
   they recolor whatever legacy v2/v3 text lands inside them. */

/* Generic text recolor inside any dark band (extends the schools-only rules
   above to arbitrary legacy content: headings, text-blocks, kickers). */
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red)
  :is(h1, h2, h3, h4, .v2-h2, .v2-h3, [class*="heading-4"], [class*="heading-5"], .wm-stat-text):not(.red) {
  color: #F9F5EE;
}
/* The legacy body-copy rule chains ~12 :not()s; !important is the honest way
   for a terminal surface utility to win over it. */
body :is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) [class*="text-block-"] { color: rgba(249, 245, 238, 0.82) !important; }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) :is(p, li) { color: rgba(249, 245, 238, 0.78); }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) [class*="text-span-"] { color: #FFC700; }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) :is(.tc-band-label, .sc-band-label) { color: #ff6d99; }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) .wm-stat-num { color: #FFC700; }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) .wm-stat-foot { color: rgba(249, 245, 238, 0.55); }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) .tc-dash-note { color: rgba(249, 245, 238, 0.55); }
/* Quote cards inside dark bands keep their white "card" reading. */
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) :is(.v2-testimonial, .v3-testimonials) :is(p, li, .v2-testimonial-content) { color: #322F2C; }
body :is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) :is(.v2-testimonial, .v3-testimonials) [class*="text-block-"] { color: rgba(50, 47, 44, 0.82) !important; }
:is(.sc-bg-ocean, .sc-bg-charcoal, .sc-bg-red) :is(.v2-testimonial, .v3-testimonials) .v2-testimonia-name { color: var(--tier-mute); }

/* Brand-red statement band (parents "dedicated" section, sparing use). */
body .sc-bg-red { background: #BB104E !important; }
html[data-theme="dark"] body .sc-bg-red { background: #8c0f3e !important; }

/* Quiet white surface to break long cream runs (subtle, not a stripe). */
body .sc-bg-white { background: #FFFFFF !important; }
html[data-theme="dark"] body .sc-bg-white { background: #1C1B15 !important; }
/* White cards sitting on the white surface keep separating via a cream fill. */
body .sc-bg-white :is(.v2-testimonial, .v3-testimonials, .card) { background: #F9F5EE; }
html[data-theme="dark"] body .sc-bg-white :is(.v2-testimonial, .v3-testimonials, .card) { background: #201E18; }

/* ===== Brand register (.mo-tier) section variants ===== */
.mo-tier .section-ocean { position: relative; overflow: hidden; background: var(--tier-ocean); }
.mo-tier .section-ocean::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  /* animations.js updates --bg-zoom on scroll; the section's own
     overflow:hidden keeps the scaled-up grid from poking past its edges. */
  transform: scale(var(--bg-zoom, 1));
  will-change: transform;
}
.mo-tier .section-ocean > .tier-wrap { position: relative; }
.mo-tier .section-ocean .tier-h2 { color: #F9F5EE; }
.mo-tier .section-ocean .tier-label { color: #ff6d99; }
.mo-tier .section-ocean p { color: rgba(249, 245, 238, 0.78); }
.mo-tier .section-ocean .report-points li { color: rgba(249, 245, 238, 0.78); }
.mo-tier .section-ocean .report-points strong { color: #ffffff; }
.mo-tier .section-ocean .report-disclaimer { color: rgba(249, 245, 238, 0.55); }
html[data-theme="dark"] .mo-tier .section-ocean { background: #101d3e; }

.mo-tier .section-charcoal { background: #2C2925; }
.mo-tier .section-charcoal .tier-h2 { color: #F9F5EE; }
.mo-tier .section-charcoal .tier-label { color: #ff6d99; }
.mo-tier .section-charcoal .tier-deck { color: rgba(249, 245, 238, 0.72); }
.mo-tier .section-charcoal .uni-soon-card { border-color: rgba(249, 245, 238, 0.3); }
.mo-tier .section-charcoal .uni-soon-title { color: #F9F5EE; }
.mo-tier .section-charcoal .uni-soon-body { color: rgba(249, 245, 238, 0.65); }
.mo-tier .section-charcoal .uni-soon-icon { background: rgba(249, 245, 238, 0.1); color: rgba(249, 245, 238, 0.7); }
html[data-theme="dark"] .mo-tier .section-charcoal { background: #1e1b16; }

/* ===== Card depth upgrades (flat white icon+text boxes) ===== */
/* Schools hub cards: colored top accent cycling brand hues. */
.sc-hub-card { position: relative; overflow: hidden; }
.sc-hub-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #152859; transition: height 0.2s ease; }
.sc-hub-card:hover::before { height: 6px; }
.sc-hub .sc-hub-card:nth-child(3n+1)::before { background: #BB104E; }
.sc-hub .sc-hub-card:nth-child(3n+2)::before { background: #152859; }
.sc-hub .sc-hub-card:nth-child(3n)::before { background: #28C878; }

/* Research finding cards: accent + lift, matching the site's feature cards. */
.mo-tier .finding-card { position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mo-tier .finding-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tier-red); }
.mo-tier .research-findings-grid .finding-card:nth-child(2)::before { background: var(--tier-ocean); }
.mo-tier .research-findings-grid .finding-card:nth-child(3)::before { background: var(--tier-green); }
.mo-tier .finding-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -20px rgba(21, 40, 89, 0.3); }

/* Join-us job cards: hairline border, red accent, hover lift. */
body .job-opening-card {
  border: 0.5px solid rgba(50, 47, 44, 0.12);
  border-left: 3px solid #BB104E;
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body .job-opening-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.16); }
html[data-theme="dark"] body .job-opening-card { border-left-color: #BB104E; }

/* Curricula cards: top accent cycling brand hues + hover lift. */
body .card { position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
body .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #152859; }
body .card:nth-child(3n+1)::before { background: #BB104E; }
body .card:nth-child(3n)::before { background: #28C878; }
body .card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.24); }

/* Secondary students value cards (markup carries .ss-card; give them the
   same system as .tc-feature: accent top bar + tinted icon chip + lift). */
body .ss-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 0.5px solid rgba(50, 47, 44, 0.12);
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body .ss-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(21, 40, 89, 0.3); }
body .ss-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #152859; }
body .ss-features .ss-card:nth-child(4n+1)::before { background: #BB104E; }
body .ss-features .ss-card:nth-child(4n+2)::before { background: #152859; }
body .ss-features .ss-card:nth-child(4n+3)::before { background: #28C878; }
body .ss-features .ss-card:nth-child(4n)::before { background: #F37400; }
html[data-theme="dark"] body .ss-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }

/* ===== Condensed /mandarin + /join-us (verbosity rework) ===== */
/* Footnote line inside the ocean stats band. */
.tc-stats-band .tc-stats-note {
  max-width: 1140px;
  margin: 14px auto 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(249, 245, 238, 0.55);
}
/* Curricula chip row (/mandarin). */
.md-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.md-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #152859;
  background: #F9F5EE;
  border: 0.5px solid rgba(50, 47, 44, 0.18);
  border-radius: 100px;
  padding: 8px 16px;
  text-decoration: none;
}
a.md-chip-link { color: #BB104E; border-color: rgba(187, 16, 78, 0.35); }
a.md-chip-link:hover { background: rgba(187, 16, 78, 0.08); }
html[data-theme="dark"] .md-chip { background: #201E18; color: #9db4e8; border-color: rgba(233, 227, 216, 0.2); }
html[data-theme="dark"] a.md-chip-link { color: #ff6d99; }

/* Content-library band (mandarin) — task-count breakdown on a dark section. */
.md-lib-lede { font-family: 'Inter', 'Open Sans', sans-serif; font-size: 16px; line-height: 1.6; color: rgba(249, 245, 238, 0.8); max-width: 640px; margin: 0; padding-top: 0; }
.md-lib-lede strong { color: #F9F5EE; font-weight: 600; }
.md-lib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.md-lib-card { background: rgba(249, 245, 238, 0.06); border: 0.5px solid rgba(249, 245, 238, 0.14); border-radius: 14px; padding: 24px 20px; }
.md-lib-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255, 109, 153, 0.14); color: #ff6d99; margin-bottom: 16px; }
.md-lib-icon svg { width: 20px; height: 20px; }
.md-lib-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: #F9F5EE; }
.md-lib-label { font-family: 'Inter', 'Open Sans', sans-serif; font-size: 13px; color: rgba(249, 245, 238, 0.7); margin-top: 6px; }
@media (max-width: 900px) { .md-lib-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .md-lib-grid { grid-template-columns: 1fr; } }
/* One-line job cards (/join-us). */
.jb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .jb-grid { grid-template-columns: 1fr; } }
.jb-dept {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #BB104E;
  margin-bottom: 8px;
}
.jb-role {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #322F2C;
  margin: 0 0 6px;
}
.jb-line { font-size: 14px; line-height: 1.55; color: rgba(50, 47, 44, 0.75); margin: 0; padding-top: 0; }
html[data-theme="dark"] .jb-role { color: #E9E3D8; }
html[data-theme="dark"] .jb-line { color: rgba(233, 227, 216, 0.65); }
/* Shared section deck (intro paragraph under a band-label + heading, light
   sections). Replaces per-page use of the legacy text-block-24 class. */
.sc-deck {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(50, 47, 44, 0.7);
  max-width: 640px;
  margin: 0 auto 28px;
  padding-top: 0; /* legacy global p { padding-top: 117px } */
  text-align: center;
}
/* legacy global a { display: flex } breaks inline links outside .mo-tier */
.sc-deck a { display: inline; color: #BB104E; text-decoration: none; font-weight: 600; }
.sc-deck a:hover { text-decoration: underline; }
.sc-deck a strong { font-weight: 600; }
html[data-theme="dark"] .sc-deck { color: rgba(233, 227, 216, 0.7); }
html[data-theme="dark"] .sc-deck a { color: #ff6d99; }

/* ===== /schools rework: compact curricula board (single viewport) ===== */
.sc-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sc-tile { background: #fff; border: 0.5px solid rgba(50, 47, 44, 0.12); border-left: 3px solid rgba(50, 47, 44, 0.2); border-radius: 12px; padding: 14px 16px; }
.sc-tile-kicker { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tier-mute); margin-bottom: 5px; }
.sc-tile-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 19px; font-weight: 600; color: #152859; line-height: 1.1; }
.sc-tile--national { border-left-color: #2298ED; } .sc-tile--national .sc-tile-kicker { color: #2298ED; }
.sc-tile--local { border-left-color: #1b9e5f; } .sc-tile--local .sc-tile-kicker { color: #1b7a4b; }
.sc-tile--exam { border-left-color: #BB104E; } .sc-tile--exam .sc-tile-kicker { color: #BB104E; }
.sc-tile--lang { border-left-color: #680C4E; } .sc-tile--lang .sc-tile-kicker { color: #680C4E; }
.sc-tile--soon { border-style: dashed; background: transparent; }
.sc-tile--soon .sc-tile-name { color: var(--tier-mute); }
.sc-tiles-foot { margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
/* Row-by-row slide-in on scroll (animations.js groups tiles into rows by
   their actual rendered position, since the grid's column count is
   responsive — 5/3/2 — so a fixed nth-child row assumption would break at
   narrower widths). */
@media (prefers-reduced-motion: no-preference) {
  .sc-tile {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .sc-tile.is-revealed { opacity: 1; transform: translateY(0); }
}
/* Scope the text-link treatment away from the wm-cta-secondary pill, whose
   padding-bottom/border-bottom it was overriding into a squished, underlined
   button. The only link here is the pill, but keep the rule for any future
   plain link. */
.sc-tiles-foot a:not(.wm-cta-secondary) { color: #BB104E; text-decoration: none; border-bottom: 0.5px solid rgba(187, 16, 78, 0.4); padding-bottom: 1px; }
@media (max-width: 980px) { .sc-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sc-tiles { grid-template-columns: 1fr 1fr; } }
html[data-theme="dark"] .sc-tile { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .sc-tile--national { border-left-color: #2298ED; }
html[data-theme="dark"] .sc-tile--local { border-left-color: #1b9e5f; }
html[data-theme="dark"] .sc-tile--exam { border-left-color: #BB104E; }
html[data-theme="dark"] .sc-tile--lang { border-left-color: #c58bb0; }
html[data-theme="dark"] .sc-tile--soon { background: transparent; }
html[data-theme="dark"] .sc-tile-name { color: #9db4e8; }
html[data-theme="dark"] .sc-tile--lang .sc-tile-kicker { color: #c58bb0; }

/* ===== /schools rework: boxless evidence row on the ocean band ===== */
.sc-evrow { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.sc-ev { padding: 6px 28px 6px 0; }
.sc-ev + .sc-ev { border-left: 0.5px solid rgba(249, 245, 238, 0.2); padding-left: 28px; }
.sc-ev-icon { color: #FFC700; margin-bottom: 12px; }
.sc-ev-icon svg { width: 22px; height: 22px; display: block; }
.sc-ev-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 23px; font-weight: 600; color: #F9F5EE; margin-bottom: 6px; line-height: 1.15; }
.sc-ev-desc { font-size: 14px; line-height: 1.55; color: rgba(249, 245, 238, 0.68); }
@media (max-width: 760px) {
  .sc-evrow { grid-template-columns: 1fr; }
  .sc-ev { padding: 16px 0; }
  .sc-ev + .sc-ev { border-left: none; border-top: 0.5px solid rgba(249, 245, 238, 0.2); padding-left: 0; }
}
.sc-pullquote { margin-top: 44px; border-left: 3px solid #ff6d99; padding: 4px 0 4px 24px; max-width: 860px; }
.sc-pullquote-text { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.5; color: rgba(249, 245, 238, 0.92); }
.sc-pullquote-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: rgba(249, 245, 238, 0.55); margin-top: 12px; }

/* ===== /schools rework: numbered steps + quote split ===== */
.sc-numlist { display: flex; flex-direction: column; }
.sc-numitem { display: flex; gap: 20px; padding: 18px 0; }
.sc-numitem + .sc-numitem { border-top: 0.5px solid rgba(50, 47, 44, 0.12); }
.sc-numitem-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 42px; font-weight: 600; line-height: 0.9; color: rgba(187, 16, 78, 0.3); flex: none; width: 46px; }
.sc-numitem-title { font-size: 15.5px; font-weight: 600; color: #322F2C; margin-bottom: 4px; }
.sc-numitem-desc { font-size: 14px; line-height: 1.55; color: rgba(50, 47, 44, 0.75); }
.sc-split--center { align-items: center; }
html[data-theme="dark"] .sc-numitem + .sc-numitem { border-top-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .sc-numitem-title { color: #E9E3D8; }
html[data-theme="dark"] .sc-numitem-desc { color: rgba(233, 227, 216, 0.68); }

/* ===== /schools rework: red hub band label contrast ===== */
.sc-bg-red .sc-band-label, .sc-bg-red .tc-band-label { color: rgba(249, 245, 238, 0.75); }

/* ===== Parents page (brand-register conversion) ===== */
/* Generic white section surface; dark treatment mirrors .home-closing. */
.mo-tier .section-white { background: #FFFFFF; }
html[data-theme="dark"] .mo-tier .section-white { background: #1C1B15; }

/* Hero mock: parent-facing weekly progress card. Stays light in dark mode
   (screenshot convention, like .uni-mock/.wkrep), so colors are hard-coded. */
.mo-tier .par-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 0.5px solid rgba(50, 47, 44, 0.1); }
.mo-tier .par-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--tier-ocean); color: #F9F5EE; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; flex: none; }
.mo-tier .par-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.1; color: #322F2C; }
.mo-tier .par-meta { font-size: 11.5px; color: rgba(50, 47, 44, 0.75); margin-top: 2px; }
.mo-tier .par-head .wkrep-week { margin-left: auto; }
.mo-tier .par-skills { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); }
.mo-tier .par-skill { display: flex; align-items: center; gap: 12px; }
.mo-tier .par-skill-name { flex: none; width: 68px; font-size: 12px; color: rgba(50, 47, 44, 0.75); }
.mo-tier .par-skill-track { flex: 1; height: 7px; border-radius: 100px; background: rgba(50, 47, 44, 0.08); overflow: hidden; }
.mo-tier .par-skill-track i { display: block; height: 100%; border-radius: 100px; }
.mo-tier .par-fill-green { background: var(--tier-green); }
.mo-tier .par-fill-yellow { background: var(--tier-yellow); }
.mo-tier .par-fill-orange { background: var(--tier-orange); }
.mo-tier .par-skill b { flex: none; width: 26px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: #322F2C; }
.mo-tier .par-fb { padding: 14px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); }
.mo-tier .par-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 13px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.05em; color: rgba(50, 47, 44, 0.75); }
.mo-tier .par-foot span { display: inline-flex; align-items: center; gap: 7px; }
.mo-tier .par-streak-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tier-red); box-shadow: 0 0 0 3px rgba(187, 16, 78, 0.15); }

/* Trust cards inside the ocean band (surface matches .tier-metric). */
.mo-tier .par-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.mo-tier .par-trust-card { background: #1b3067; border: 0.5px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 26px 24px 24px; }
.mo-tier .par-trust-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(249, 245, 238, 0.1); color: #ff6d99; margin-bottom: 16px; }
.mo-tier .par-trust-icon svg { width: 20px; height: 20px; }
.mo-tier .par-trust-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 22px; font-weight: 500; color: #F9F5EE; margin-bottom: 8px; }
.mo-tier .par-trust-card p { font-size: 14px; line-height: 1.6; margin: 0; }
html[data-theme="dark"] .mo-tier .par-trust-card { background: #16264d; }

/* Engagement split: artwork beside copy. */
.mo-tier .par-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.mo-tier .par-split-media img { width: 100%; height: auto; border-radius: 16px; }

/* Quote wall. Legacy .v2-testimonial caps itself at 50% width; fill the cell. */
.mo-tier .par-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mo-tier .par-quotes .v2-testimonial { max-width: 100%; }

@media (max-width: 980px) {
  .mo-tier .par-split { grid-template-columns: 1fr; gap: 36px; }
  .mo-tier .par-trust-grid { grid-template-columns: 1fr; }
  .mo-tier .par-quotes { grid-template-columns: 1fr; }
}

/* ===== Student pages (brand-register conversion) ===== */
/* Four-up feature grid shared by both student pages. */
.mo-tier .feature-cards-4 { grid-template-columns: repeat(4, 1fr); }
.mo-tier .feature-d::before { background: var(--tier-yellow); }
@media (max-width: 1100px) { .mo-tier .feature-cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mo-tier .feature-cards-4 { grid-template-columns: 1fr; } }

/* Icon artwork inside feature cards (primary page's Fun/Immersive/... icons). */
.mo-tier .feature-img { width: 38px; height: auto; display: block; margin-bottom: 14px; position: static; top: auto; }

/* Primary hero: transparent character artwork, no card frame. */
.mo-tier .stu-hero-art img { width: 100%; height: auto; display: block; }

/* Revision-queue list inside the secondary hero mock. */
.mo-tier .stu-queue { padding: 14px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); }
.mo-tier .stu-queue .uni-todo li { color: #322F2C; }

/* Stat callout on the ocean surface: yellow numeral, cream copy. */
.mo-tier .section-ocean .wm-stat-num { color: var(--tier-yellow); }
.mo-tier .section-ocean .wm-stat-text { color: #F9F5EE; }
.mo-tier .section-ocean .wm-stat-foot,
.mo-tier .section-ocean .wm-stat-star { color: rgba(249, 245, 238, 0.6); }

/* Generic two-column quote grid (same rules as .par-quotes). */
.mo-tier .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mo-tier .quote-grid .v2-testimonial { max-width: 100%; }
@media (max-width: 980px) { .mo-tier .quote-grid { grid-template-columns: 1fr; } }

/* ===== Contact page (brand-register conversion) ===== */
.mo-tier .ct-page { padding: 72px 48px 96px; }
.mo-tier .ct-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; }
/* The form is much taller than the intro rail, which otherwise leaves the whole
   lower-left of the page blank. Pin the rail so it stays in view as the form
   scrolls (the navbar is sticky at top:0, ~72px tall). */
.mo-tier .ct-rail { position: sticky; top: 96px; align-self: start; }

/* Audience router cards. */
.mo-tier .ct-auds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mo-tier .ct-aud { text-align: left; background: #fff; border: 0.5px solid var(--tier-line); border-radius: 12px; padding: 16px 16px 14px; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; gap: 5px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.mo-tier .ct-aud:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(21, 40, 89, 0.4); }
.mo-tier .ct-aud.is-active { border-color: var(--tier-red); box-shadow: inset 0 0 0 1px var(--tier-red); }
.mo-tier .ct-aud-kicker { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: var(--tier-red); }
.mo-tier .ct-aud-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 19px; font-weight: 600; line-height: 1.15; color: var(--tier-ink); }
.mo-tier .ct-aud-body { font-size: 12.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.75); }
.mo-tier .ct-minor { margin: 16px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tier-mute); }
.mo-tier .ct-minor-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--tier-ocean); text-decoration: underline; }

/* What-happens-next steps. */
.mo-tier .ct-steps { margin-top: 36px; border-top: 0.5px solid var(--tier-line); padding-top: 26px; }
.mo-tier .ct-steps ol { list-style: none; counter-reset: ct; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mo-tier .ct-steps li { counter-increment: ct; position: relative; padding-left: 36px; font-size: 14px; line-height: 1.55; color: rgba(50, 47, 44, 0.72); }
.mo-tier .ct-steps li::before { content: counter(ct, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--tier-red); }
.mo-tier .ct-steps strong { color: var(--tier-ink); font-weight: 600; }

/* Form card: restyles the legacy mo-contact-form-* controls (markup kept
   verbatim for contact-form.js / site-runtime.js) to the brand system. */
.mo-tier .ct-form-card { background: #fff; border: 0.5px solid var(--tier-line); border-radius: 16px; padding: 28px 30px 30px; box-shadow: 0 24px 60px -40px rgba(21, 40, 89, 0.45); }
.mo-tier .ct-form-card .mo-contact-form-tabs-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tier-mute); margin-bottom: 10px; }
.mo-tier .ct-form-card .mo-contact-form-tabs { display: flex; gap: 4px; margin-bottom: 22px; border: 0.5px solid var(--tier-line); border-radius: 8px; padding: 4px; background: var(--tier-cream); }
.mo-tier .ct-form-card .mo-contact-form-tab-links { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--tier-ink); text-decoration: none; background: transparent; }
.mo-tier .ct-form-card .mo-contact-form-tab-links.w--current { background: var(--tier-ink); color: var(--tier-cream); }
.mo-tier .ct-form-card .mo-contact-form-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tier-mute); display: block; margin-bottom: 6px; }
.mo-tier .ct-form-card .mo-contact-form-text-field,
.mo-tier .ct-form-card .mo-cf-select-field,
.mo-tier .ct-form-card .mo-contact-form-textarea-field { width: 100%; border: 0.5px solid var(--tier-line); border-radius: 6px; background: var(--tier-cream); padding: 11px 13px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.2; color: var(--tier-ink); margin-bottom: 16px; }
.mo-tier .ct-form-card .mo-contact-form-text-field,
.mo-tier .ct-form-card .mo-cf-select-field { height: 44px; }
.mo-tier .ct-form-card .mo-contact-form-textarea-field { height: auto; min-height: 110px; resize: none; padding-bottom: 20px; }
/* ui.js wraps each textarea in this and appends a custom resize handle: the
   native corner resizer is only a few CSS pixels and effectively untappable
   on touch, so we drive resizing ourselves from a much larger target. */
.mo-tier .ct-form-card .mo-textarea-resize-wrap { position: relative; margin-bottom: 16px; }
.mo-tier .ct-form-card .mo-textarea-resize-wrap .mo-contact-form-textarea-field { margin-bottom: 0; }
.mo-tier .ct-form-card .mo-textarea-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 6px;
  color: var(--tier-mute);
  cursor: ns-resize;
  touch-action: none;
}
.mo-tier .ct-form-card .mo-textarea-resize-handle svg { width: 12px; height: 12px; display: block; }
.mo-tier .ct-form-card .mo-textarea-resize-handle:hover { color: var(--tier-red); }
/* Native select rendering doesn't honor line-height for vertical centering;
   take over the arrow so the text box is fully CSS-controlled. */
.mo-tier .ct-form-card .mo-cf-select-field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23322F2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
html[data-theme="dark"] .mo-tier .ct-form-card .mo-cf-select-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9E3D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Bump form controls to 16px on phones so iOS Safari doesn't auto-zoom the
   viewport when a field gains focus (these brand-register forms otherwise
   render at 14px). Covers the contact form and the enterprise intro form. */
@media (max-width: 600px) {
  .mo-tier .ct-form-card .mo-contact-form-text-field,
  .mo-tier .ct-form-card .mo-cf-select-field,
  .mo-tier .ct-form-card .mo-contact-form-textarea-field,
  .mo-tier .intro-card .mo-contact-form-text-field { font-size: 16px; }
}
/* Legacy .dropdownwrapper draws its own box around selects; flatten it. */
.mo-tier .ct-form-card .dropdownwrapper { border: none; border-radius: 0; padding: 0; background: transparent; }
.mo-tier .ct-form-card .mo-contact-form-fields-wrapper.twocolumns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* A lone field in a two-column row (e.g. School Name, the "interested in"
   checkboxes) should span the full row instead of sitting in one half with
   the other left blank. On mobile the grid is already a single column, so
   this has no effect there. */
.mo-tier .ct-form-card .mo-contact-form-fields-wrapper.twocolumns > .mo-contact-form-field-wrapper:only-child { grid-column: 1 / -1; }
.mo-tier .ct-form-card .mo-contact-form-radio-button-wrapper { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 16px; }
.mo-tier .ct-form-card .mo-cf-checkbox-label,
.mo-tier .ct-form-card .w-form-label { font-size: 13.5px; }
.mo-tier .ct-form-card .mo-contact-form-submit-button { width: 100%; background: var(--tier-red); color: #fff; padding: 14px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: 'Inter', sans-serif; transition: opacity 0.2s ease; }
.mo-tier .ct-form-card .mo-contact-form-submit-button:hover { opacity: 0.88; }
/* The generic .mo-tier success/fail hider is for the intro page; here the
   blocks live inside the card and Webflow toggles them. */
.mo-tier .ct-form-card .w-form-done { display: none; background: transparent; border: none; margin: 0; padding: 24px 0 0; text-align: center; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; }
.mo-tier .ct-form-card .w-form-fail { display: none; color: var(--tier-red); margin: 12px 0 0; text-align: center; font-size: 13px; }

/* Dark theme. */
html[data-theme="dark"] .mo-tier .ct-aud,
html[data-theme="dark"] .mo-tier .ct-form-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .ct-aud-title { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .ct-aud-body { color: rgba(233, 227, 216, 0.65); }
html[data-theme="dark"] .mo-tier .ct-steps li { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .ct-steps strong { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .ct-minor-link { color: #55b8f5; }
html[data-theme="dark"] .mo-tier .ct-form-card .mo-contact-form-tabs { background: #14130F; border-color: rgba(233, 227, 216, 0.18); }
html[data-theme="dark"] .mo-tier .ct-form-card .mo-contact-form-tab-links { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .ct-form-card .mo-contact-form-tab-links.w--current { background: #E9E3D8; color: #14130F; }
html[data-theme="dark"] .mo-tier .ct-form-card .mo-contact-form-text-field,
html[data-theme="dark"] .mo-tier .ct-form-card .mo-cf-select-field,
html[data-theme="dark"] .mo-tier .ct-form-card .mo-contact-form-textarea-field { background: #14130F; border-color: rgba(233, 227, 216, 0.18); color: #E9E3D8; }

@media (max-width: 1100px) {
  .mo-tier .ct-grid { grid-template-columns: 1fr; gap: 40px; }
  /* The rail only needs to stick while it sits beside the taller form in the
     two-column desktop layout; once the grid stacks to one column there's
     nothing for it to scroll past, and the sticky offset just adds a gap. */
  .mo-tier .ct-rail { position: static; }
}
@media (max-width: 980px) {
  .mo-tier .ct-page { padding: 48px 24px 64px; }
}
@media (max-width: 640px) {
  .mo-tier .ct-page { padding-top: 24px; }
  .mo-tier .ct-auds { grid-template-columns: 1fr; }
  .mo-tier .ct-form-card { padding: 22px 18px 24px; }
  .mo-tier .ct-form-card .mo-contact-form-fields-wrapper.twocolumns { grid-template-columns: 1fr; }
}

/* ===== Who-we-are page (brand-register conversion) ===== */
/* Name lockup: the Mee/Opp wordplay as a designed moment. */
.mo-tier .ww-name-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.mo-tier .ww-name-card { background: var(--tier-cream); border: 0.5px solid var(--tier-line); border-radius: 16px; padding: 44px 36px 36px; text-align: center; }
.mo-tier .ww-name-word { display: flex; justify-content: center; align-items: flex-start; }
.mo-tier .ww-name-word span { display: flex; flex-direction: column; align-items: center; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: clamp(56px, 6vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.mo-tier .ww-mee { color: var(--tier-red); }
.mo-tier .ww-opp { color: var(--tier-ocean); }
.mo-tier .ww-name-word i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 11px; letter-spacing: 0.08em; color: var(--tier-mute); margin-top: 14px; border-top: 0.5px solid var(--tier-line); padding-top: 10px; }
/* animations.js sets the pre-slide inline opacity/transform and toggles
   .is-bounced on .ww-mee/.ww-opp once the card scrolls into view (Mee from
   the left, Opp from the right), before sequencing the flip-line reveal
   below. */
.mo-tier .ww-mee.is-bounced {
  animation: ww-slide-in-left 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mo-tier .ww-opp.is-bounced {
  animation: ww-slide-in-right 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ww-slide-in-left {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes ww-slide-in-right {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}
.mo-tier .ww-name-eq { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tier-mute); margin-top: 22px; perspective: 400px; }
/* animations.js wraps "opportunities for me" (everything but the leading
   "= ") in this span and toggles .is-flipped once it scrolls into view, so
   it rotates into place hinged through its own vertical center. */
.mo-tier .ww-name-eq .flip-line {
  display: inline-block;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s ease;
}
.mo-tier .ww-name-eq.is-flipped .flip-line {
  transform: rotateX(0deg);
  opacity: 1;
}
html[data-theme="dark"] .mo-tier .ww-name-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .ww-mee { color: #ff6d99; }
html[data-theme="dark"] .mo-tier .ww-opp { color: #55b8f5; }

/* Driving-force quote on the ocean band. */
.mo-tier .ww-drive-quote { max-width: 720px; margin-top: 28px; border-left: 2px solid #ff6d99; padding-left: 24px; }
.mo-tier .ww-drive-text { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-style: italic; font-size: 21px; line-height: 1.55; margin: 0 0 12px; }
.mo-tier .ww-drive-attr { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: rgba(249, 245, 238, 0.6); }

/* Team wall: masonry columns mixing quote cards and real team photos. */
.mo-tier .ww-wall { columns: 3; column-gap: 20px; margin-top: 8px; }
.mo-tier .ww-wall > * { break-inside: avoid; margin: 0 0 20px; }
.mo-tier .ww-card { max-width: 100%; }
.mo-tier .ww-card .v2-testimonial-content { font-size: 16.5px; }
.mo-tier .ww-attr { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mo-tier .ww-attr img { width: 36px; height: 36px; border-radius: 50%; position: static; top: auto; }
.mo-tier .ww-attr span { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.05em; color: var(--tier-mute); }
.mo-tier .ww-photo { border-radius: 14px; overflow: hidden; border: 0.5px solid var(--tier-line); }
.mo-tier .ww-photo img { width: 100%; height: auto; display: block; position: static; top: auto; }

@media (max-width: 1100px) { .mo-tier .ww-wall { columns: 2; } }
@media (max-width: 980px) { .mo-tier .ww-name-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px) { .mo-tier .ww-wall { columns: 1; } }

/* ===== Curricula page (brand-register conversion) ===== */
/* Family group: label column beside compact curriculum cards. */
.mo-tier .cw-family { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 36px 0; border-top: 0.5px solid var(--tier-line); }
.mo-tier .cw-family:first-of-type { border-top: none; padding-top: 28px; }
.mo-tier .cw-family-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: var(--tier-red); margin-bottom: 10px; }
.mo-tier .cw-family-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 26px; font-weight: 600; line-height: 1.15; }
.mo-tier .cw-family-note { font-size: 13px; line-height: 1.55; color: rgba(50, 47, 44, 0.75); margin: 12px 0 0; }
.mo-tier .cw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mo-tier .cw-card { background: var(--tier-cream); border: 0.5px solid var(--tier-line); border-radius: 12px; padding: 22px 20px; }
.mo-tier .cw-card-wide { grid-column: 1 / -1; }
.mo-tier .cw-card-kicker { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: var(--tier-mute); margin-bottom: 10px; }
.mo-tier .cw-card-name { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0 0 8px; }
.mo-tier .cw-card-desc { font-size: 13.5px; line-height: 1.6; color: rgba(50, 47, 44, 0.7); margin: 0; }
.mo-tier .cw-card-notes { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 0.5px dashed rgba(50, 47, 44, 0.2); display: flex; flex-direction: column; gap: 6px; }
.mo-tier .cw-card-notes li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.7); }
.mo-tier .cw-card-notes li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--tier-red); }

/* Shared-offer band items. */
.mo-tier .cw-engine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.mo-tier .cw-engine-item { background: #1b3067; border: 0.5px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 24px 22px; }
.mo-tier .cw-engine-num { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; color: #ff6d99; margin-bottom: 12px; }
.mo-tier .cw-engine-title { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 21px; font-weight: 500; color: #F9F5EE; margin-bottom: 8px; }
.mo-tier .cw-engine-item p { font-size: 13.5px; line-height: 1.6; margin: 0; }
html[data-theme="dark"] .mo-tier .cw-engine-item { background: #16264d; }
/* The engine grid is 4-up on desktop; stack it on smaller screens so cards
   don't overflow and clip (03/04 were cut off at 390px). */
@media (max-width: 767px) { .mo-tier .cw-engine { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px) { .mo-tier .cw-engine { grid-template-columns: 1fr; } }

/* Normalized third-party logo strip. */
.mo-tier .cw-logos { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.mo-tier .cw-logos img { height: 38px; width: auto; display: block; position: static; top: auto; }
/* Third-party marks stay legible in dark mode on a soft light chip. */
html[data-theme="dark"] .mo-tier .cw-logos img { background: #E9E3D8; border-radius: 8px; padding: 5px 8px; height: 44px; }

@media (max-width: 1100px) { .mo-tier .cw-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) {
  .mo-tier .cw-family { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
}
@media (max-width: 640px) { .mo-tier .cw-cards { grid-template-columns: 1fr; } }


/* ===== Join-us: perks board + team photo strip ===== */
/* Replaces the mismatched clip-art perk icons and the montage background
   (with baked-in template shapes). Page is warm register, not .mo-tier. */
/* Flexbox (not a 4-col grid) so the 7th card doesn't leave a dangling empty
   cell — the trailing row centers its orphans. Cards cap at ~4-up width. */
body .jn-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
body .jn-perk { flex: 1 1 240px; max-width: 280px; background: #F9F5EE; border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
body .jn-perk-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(187, 16, 78, 0.08); color: #BB104E; flex: none; }
body .jn-perk:nth-child(3n+2) .jn-perk-icon { background: rgba(21, 40, 89, 0.08); color: #152859; }
body .jn-perk:nth-child(3n) .jn-perk-icon { background: rgba(40, 200, 120, 0.14); color: #1b7a4b; }
body .jn-perk-icon svg { width: 19px; height: 19px; }
/* Playful "dance" wiggle: ui.js plays this once automatically when the
   perks row scrolls into view (staggered per card), then replays it on
   hover — .is-dancing is removed and re-added (with a forced reflow) each
   time so the same animation can retrigger from its start instead of just
   continuing to no-op once already applied. */
@media (prefers-reduced-motion: no-preference) {
  body .jn-perk-icon.is-dancing { animation: jn-icon-dance 0.6s ease; }
}
@keyframes jn-icon-dance {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-14deg) scale(1.08); }
  40% { transform: rotate(11deg) scale(1.08); }
  60% { transform: rotate(-8deg) scale(1.04); }
  80% { transform: rotate(5deg) scale(1.02); }
}
body .jn-perk-title { font-size: 14px; font-weight: 600; color: #322F2C; line-height: 1.4; padding-top: 0; }
html[data-theme="dark"] body .jn-perk { background: #201E18; }
html[data-theme="dark"] body .jn-perk-title { color: #E9E3D8; }

/* Packs: section heading above the generated grid, so the catalogue reads
   as its own section rather than a tail of "How a pack works". */
.mo-tier .pack-catalogue-head { padding: 40px 48px 0; }
.mo-tier .pack-catalogue-head .tier-wrap { max-width: 1200px; }
.mo-tier .pack-catalogue-head .thesis-title { margin-bottom: 0; }
@media (max-width: 980px) { .mo-tier .pack-catalogue-head { padding: 32px 24px 0; } }

/* ===== Homepage hero animation =====
   Replaces the stock hero photo: the logo mark connects the five audiences
   into a network, evidence pulses travel the edges, and a learning curve
   sweeps in beneath. Plays once on load (~4s), then only the pulses idle.
   Inline SVG in src/pages/index.html; the centre mark reuses the real logo
   paths verbatim. */
.mo-tier .hero-anim {
  width: 100%; height: auto; display: block;
  --mm-accent: #BB104E;
  --mm-bar: rgba(21, 40, 89, 0.30);
  --mm-gold: #FFC700;
  --mm-grid: rgba(50, 47, 44, 0.10);
  --mm-ink: #322F2C;
  --mm-mute: #6B6661;
}
html[data-theme="dark"] .mo-tier .hero-anim {
  --mm-accent: #ff6d99;
  --mm-bar: rgba(143, 167, 232, 0.30);
  --mm-grid: rgba(233, 227, 216, 0.12);
  --mm-ink: #E9E3D8;
  --mm-mute: rgba(233, 227, 216, 0.6);
}
.mo-tier .hero-anim .mm-lead { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; fill: var(--mm-ink); }
.mo-tier .hero-anim .mm-word { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 29px; fill: var(--mm-accent); }
.mo-tier .hero-anim .mm-grid { stroke: var(--mm-grid); stroke-width: 1; stroke-dasharray: 2 6; }
.mo-tier .hero-anim .mm-base { stroke: var(--mm-grid); stroke-width: 1.2; }
.mo-tier .hero-anim .mm-target { stroke: var(--mm-gold); stroke-width: 1.6; stroke-dasharray: 5 4; }
.mo-tier .hero-anim .mm-tlabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; fill: var(--mm-mute); }
.mo-tier .hero-anim .mm-bar { fill: var(--mm-bar); }
.mo-tier .hero-anim .mm-bar-accent { fill: var(--mm-accent); }
.mo-tier .hero-anim .mm-delta { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; fill: var(--mm-ink); }
.mo-tier .hero-anim .mm-xlabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; fill: var(--mm-mute); }
.mo-tier .hero-anim .mm-trend { fill: none; stroke: var(--mm-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.mo-tier .hero-anim .mm-node { fill: var(--mm-accent); }
.mo-tier .hero-anim .mm-cross-dot { fill: var(--mm-gold); }
.mo-tier .hero-anim .mm-cross-ring { fill: none; stroke: var(--mm-gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

@keyframes mm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mm-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mm-flip { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes mm-rest { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mm-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mm-pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.8); opacity: 0; } }

/* Bars grow from the baseline in sequence; the word above cycles the audiences
   and settles on "learner"; the +38% pops once the accent bar clears target.
   No JS — same reduced-motion / dark-theme handling as the rest of the register. */
.mo-tier .hero-anim .mm-bar { transform-box: fill-box; transform-origin: bottom; animation: mm-grow 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.mo-tier .hero-anim .mm-b1 { animation-delay: 0.07s; }
.mo-tier .hero-anim .mm-b2 { animation-delay: 0.22s; }
.mo-tier .hero-anim .mm-b3 { animation-delay: 0.38s; }
.mo-tier .hero-anim .mm-b4 { animation-delay: 0.53s; }
.mo-tier .hero-anim .mm-b5 { animation-delay: 0.69s; }
.mo-tier .hero-anim .mm-b6 { animation-delay: 0.85s; }
.mo-tier .hero-anim .mm-delta { opacity: 1; animation: mm-pop 0.65s cubic-bezier(0.34, 1.4, 0.5, 1) 1.55s both; }
.mo-tier .hero-anim .mm-word { opacity: 0; }
.mo-tier .hero-anim .mm-w1 { animation: mm-flip 1.6s ease 0.5s both; }
.mo-tier .hero-anim .mm-w2 { animation: mm-flip 1.6s ease 1.8s both; }
.mo-tier .hero-anim .mm-w3 { animation: mm-flip 1.6s ease 3.1s both; }
.mo-tier .hero-anim .mm-w4 { opacity: 1; animation: mm-rest 0.72s ease 4.4s both; }
/* Trendline draws across the bar tops after they finish growing; measurement
   nodes pop in behind the line, and a gold ring pulses where the accent bar
   clears the target. */
.mo-tier .hero-anim .mm-trend { animation: mm-draw 1s cubic-bezier(0.4, 0, 0.2, 1) 1s both; }
.mo-tier .hero-anim .mm-node { opacity: 1; animation: mm-pop 0.4s ease both; }
.mo-tier .hero-anim .mm-n1 { animation-delay: 1.1s; }
.mo-tier .hero-anim .mm-n2 { animation-delay: 1.28s; }
.mo-tier .hero-anim .mm-n3 { animation-delay: 1.46s; }
.mo-tier .hero-anim .mm-n4 { animation-delay: 1.64s; }
.mo-tier .hero-anim .mm-n5 { animation-delay: 1.82s; }
.mo-tier .hero-anim .mm-n6 { animation-delay: 2s; }
.mo-tier .hero-anim .mm-cross-dot { opacity: 1; animation: mm-pop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 1.5s both; }
.mo-tier .hero-anim .mm-cross-ring { animation: mm-pulse 1.1s ease-out 1.5s 2 forwards; }
.mo-tier .hero-anim .mm-xlabel { opacity: 1; animation: mm-pop 0.4s ease both; }
.mo-tier .hero-anim .mm-x1 { animation-delay: 0.2s; }
.mo-tier .hero-anim .mm-x2 { animation-delay: 0.32s; }
.mo-tier .hero-anim .mm-x3 { animation-delay: 0.44s; }
.mo-tier .hero-anim .mm-x4 { animation-delay: 0.56s; }
.mo-tier .hero-anim .mm-x5 { animation-delay: 0.68s; }
.mo-tier .hero-anim .mm-x6 { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .mo-tier .hero-anim * { animation: none !important; }
  .mo-tier .hero-anim .mm-w1, .mo-tier .hero-anim .mm-w2, .mo-tier .hero-anim .mm-w3 { opacity: 0 !important; }
  .mo-tier .hero-anim .mm-w4 { opacity: 1 !important; }
}

/* ===== Enterprise page (two product lines: service standards + deliberation) ===== */
/* Hero anchor jumps must clear the sticky navbar. */
.mo-tier #service-standards, .mo-tier #deliberation { scroll-margin-top: 96px; }

/* Universities page: A/B path cards jump to the faculty / institutional sections. */
.mo-tier #uni-faculty, .mo-tier #uni-institutional { scroll-margin-top: 96px; }

/* Micro-session mock: scenario prompt, response chip, rubric levels, footer.
   Mock cards stay light in dark mode (screenshot convention, like .uni-mock),
   so colors inside mocks are literal, not theme vars. */
.mo-tier .ent-scenario { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 18px; font-style: italic; line-height: 1.4; color: #322F2C; background: #f9f5ee; border-left: 2px solid var(--tier-ocean); border-radius: 8px; padding: 12px 16px; }
.mo-tier .ent-response { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--tier-mute); }
.mo-tier .ent-response-ok { color: #1b7a4b; font-weight: 700; }
.mo-tier .ent-rubric { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mo-tier .ent-rub-row { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #322F2C; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); padding-bottom: 7px; }
.mo-tier .ent-rub-name { flex: 1; }
.mo-tier .ent-dots { display: inline-flex; gap: 5px; }
.mo-tier .ent-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(50, 47, 44, 0.25); }
.mo-tier .ent-dots i.on { background: var(--tier-ocean); border-color: var(--tier-ocean); }
.mo-tier .ent-rub-lvl { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; min-width: 30px; text-align: right; color: #322F2C; }
.mo-tier .ent-rub-gap .ent-dots i.on { background: var(--tier-red); border-color: var(--tier-red); }
.mo-tier .ent-rub-gap .ent-rub-lvl { color: var(--tier-red); }
.mo-tier .ent-mock-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em; color: rgba(50, 47, 44, 0.75); }

/* Manager portal mock: department completion bars + traffic-light team table. */
.mo-tier .ent-bars { display: flex; flex-direction: column; gap: 9px; }
.mo-tier .ent-bar-row { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #322F2C; }
.mo-tier .ent-bar-name { flex: none; width: 118px; }
.mo-tier .ent-bar { flex: 1; height: 8px; border-radius: 100px; background: rgba(50, 47, 44, 0.08); overflow: hidden; }
.mo-tier .ent-bar i { display: block; height: 100%; border-radius: 100px; background: var(--tier-ocean); }
.mo-tier .ent-bar i.low { background: var(--tier-orange); }
.mo-tier .ent-bar-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; min-width: 34px; text-align: right; }
.mo-tier .ent-lights { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #322F2C; }
.mo-tier .ent-lights th { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(50, 47, 44, 0.75); font-weight: 500; text-align: left; padding: 0 6px 8px; }
.mo-tier .ent-lights td { padding: 7px 6px; border-top: 0.5px solid rgba(50, 47, 44, 0.08); }
.mo-tier .ent-lights i, .mo-tier .ent-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.mo-tier .ent-lights i.lg, .mo-tier .ent-key.lg { background: #28C878; }
.mo-tier .ent-lights i.la, .mo-tier .ent-key.la { background: #FFC700; }
.mo-tier .ent-lights i.lr, .mo-tier .ent-key.lr { background: #BB104E; }

/* "Designed to measure" cards: deliberately number-free (no publishable
   metrics exist; copy states designed outcomes only — see FACT-CHECK.md). */
.mo-tier .ent-measures-head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tier-mute); margin: 22px 0 10px; }
.mo-tier .ent-measures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mo-tier .ent-measure { border: 0.5px solid var(--tier-line); border-radius: 10px; padding: 12px 14px; background: rgba(255, 255, 255, 0.5); }
.mo-tier .ent-measure-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--tier-red); margin-bottom: 6px; }
.mo-tier .ent-measure-body { font-size: 12.5px; line-height: 1.5; color: rgba(50, 47, 44, 0.72); }
.mo-tier .ent-note { font-size: 12.5px; color: var(--tier-mute); margin: 12px 0 16px; line-height: 1.5; }
.mo-tier .ent-measures-ocean .ent-measure { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.mo-tier .ent-measures-ocean .ent-measure-key { color: #ff6d99; }
.mo-tier .ent-measures-ocean .ent-measure-body { color: rgba(249, 245, 238, 0.78); }

/* Deliberation: six-step participant flow strip (ocean band). */
.mo-tier .ent-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; color: rgba(249, 245, 238, 0.9); }
.mo-tier .ent-flow > span[role="listitem"] { border: 0.5px solid rgba(255, 255, 255, 0.25); border-radius: 100px; padding: 7px 13px; background: rgba(255, 255, 255, 0.05); white-space: nowrap; }
.mo-tier .ent-flow-sep { color: rgba(249, 245, 238, 0.45); }

/* Deliberation session mock: proposal, tradeoff chips, speaking queue + timer. */
.mo-tier .ent-trade { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; color: rgba(50, 47, 44, 0.75); }
.mo-tier .ent-trade span { border: 0.5px solid rgba(50, 47, 44, 0.18); border-radius: 4px; padding: 3px 8px; background: #f9f5ee; }
.mo-tier .ent-speaker { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #322F2C; }
.mo-tier .ent-speaker-name { flex: none; font-weight: 600; }
.mo-tier .ent-speaker-name em { font-style: normal; font-weight: 400; color: #1b7a4b; }
.mo-tier .ent-timer { flex: 1; height: 8px; border-radius: 100px; background: rgba(50, 47, 44, 0.08); overflow: hidden; }
.mo-tier .ent-timer i { display: block; height: 100%; border-radius: 100px; background: #28C878; }
.mo-tier .ent-speaker-time { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(50, 47, 44, 0.75); white-space: nowrap; }
.mo-tier .ent-queue { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; color: rgba(50, 47, 44, 0.75); }
.mo-tier .ent-queue-name { border: 0.5px solid rgba(50, 47, 44, 0.2); border-radius: 100px; padding: 3px 10px; color: #322F2C; }
.mo-tier .ent-req { margin-left: auto; background: var(--tier-ocean); color: #F9F5EE; border-radius: 6px; padding: 7px 12px; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }

/* Stakeholder report mock: qualitative pre -> post movement by theme. */
.mo-tier .ent-shift-row { display: grid; grid-template-columns: 130px 1fr 18px 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 0.5px solid rgba(50, 47, 44, 0.08); font-size: 12px; color: #322F2C; }
.mo-tier .ent-shift-row:last-of-type { border-bottom: 0; }
.mo-tier .ent-shift-theme { font-weight: 600; font-size: 12.5px; }
.mo-tier .ent-pre { color: rgba(50, 47, 44, 0.75); }
.mo-tier .ent-post { color: #1b7a4b; font-weight: 500; }
.mo-tier .ent-shift-arrow { text-align: center; color: rgba(50, 47, 44, 0.4); }

/* Stanford trademark attribution line (ocean band). */
.mo-tier .ent-tm { margin-top: 28px; font-size: 11.5px; line-height: 1.55; max-width: 720px; }

@media (max-width: 560px) {
  .mo-tier .ent-shift-row { grid-template-columns: 1fr 18px 1fr; }
  .mo-tier .ent-shift-theme { grid-column: 1 / -1; padding-bottom: 2px; }
  .mo-tier .ent-bar-name { width: 92px; }
}

/* Dark theme: measure cards on cream sections adopt the elevated-card surface;
   the ocean-band variant keeps its translucent-on-ocean styling. */
html[data-theme="dark"] .mo-tier .ent-measures:not(.ent-measures-ocean) .ent-measure { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .ent-measures:not(.ent-measures-ocean) .ent-measure-key { color: #ff6d99; }
html[data-theme="dark"] .mo-tier .ent-measures:not(.ent-measures-ocean) .ent-measure-body { color: rgba(233, 227, 216, 0.72); }

/* ===== Enterprise section rhythm (charcoal chapter + white buffers) ===== */
/* Charcoal chapter opener (product 01): light copy for the showcase pattern. */
.mo-tier .section-charcoal .report-points li { color: rgba(249, 245, 238, 0.75); }
.mo-tier .section-charcoal .report-points strong { color: #ffffff; }
.mo-tier .section-charcoal .report-disclaimer { color: rgba(249, 245, 238, 0.5); }

/* White buffer sections: a step brighter than the cream page so long light
   runs still alternate. Dark mode lifts them slightly off the page ink. */
.mo-tier .section-white { background: #ffffff; border-top: 0.5px solid var(--tier-line); border-bottom: 0.5px solid var(--tier-line); }
html[data-theme="dark"] .mo-tier .section-white { background: #1B1916; border-color: rgba(233, 227, 216, 0.08); }

/* Product index: two numbered cards under the hero that make the two-product
   structure explicit. Top accents match each chapter band (charcoal / ocean). */
.mo-tier .ent-idx-strip { padding: 0 48px 72px; max-width: 1200px; margin: 0 auto; }
.mo-tier .ent-idx { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.mo-tier .ent-idx-card { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 0.5px solid var(--tier-line); border-radius: 14px; padding: 26px 24px; text-decoration: none; color: var(--tier-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mo-tier .ent-idx-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.mo-tier .ent-idx-01::before { background: #2C2925; }
.mo-tier .ent-idx-02::before { background: var(--tier-ocean); }
.mo-tier .ent-idx-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(21, 40, 89, 0.3); }
.mo-tier .ent-idx-num { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 44px; font-weight: 600; line-height: 1; color: rgba(50, 47, 44, 0.25); }
.mo-tier .ent-idx-title { display: block; font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.mo-tier .ent-idx-desc { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(50, 47, 44, 0.7); }
.mo-tier .ent-idx-arrow { margin-left: auto; align-self: center; font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--tier-red); display: inline-block; transition: transform 0.2s ease; }
.mo-tier .ent-idx-card:hover .ent-idx-arrow { transform: translateY(4px); }
@media (max-width: 860px) {
  .mo-tier .ent-idx { grid-template-columns: 1fr; }
  .mo-tier .ent-idx-strip { padding: 0 24px 48px; }
}
html[data-theme="dark"] .mo-tier .ent-idx-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .ent-idx-num { color: rgba(233, 227, 216, 0.3); }
html[data-theme="dark"] .mo-tier .ent-idx-desc { color: rgba(233, 227, 216, 0.7); }
html[data-theme="dark"] .mo-tier .ent-idx-01::before { background: rgba(233, 227, 216, 0.55); }
html[data-theme="dark"] .mo-tier .ent-idx-02::before { background: #8fa7e8; }

/* ===== Accessibility: WCAG AA text contrast (axe-verified) =====
   Muted labels, mono eyebrows and mockup accents sat under 4.5:1 (3:1 for
   large text). This layer forces AA-passing colours; it is scoped by theme and
   uses !important only to win over the legacy stylesheet and deep component
   selectors. Hues are preserved — only lightness is adjusted. */

/* --- Dark theme: lighten --- */
/* Red mono eyebrows / accents on near-black -> the lifted pink already used
   elsewhere for red-on-dark. */
html[data-theme="dark"] :is(.tier-label, .sc-band-label, .tc-band-label,
  .wm-eyebrow, .hero-research-eyebrow, .accent, .tier-closing-line,
  .feature-key, .sc-tile-kicker, .ct-aud-kicker, .act-q-label, .act-resp-label,
  .uni-path-kicker, .step-key, .pack-card-tagline, .pack-card-link,
  .thesis-col-key, .finding-kicker, .finding-stat, .uni-stat-num) { color: #ff6d99 !important; }
/* The packs "how a pack works" step numeral is a faint red ghost on cream;
   keep it a ghost on dark by lifting the hue rather than leaving it near-black. */
html[data-theme="dark"] .mo-tier .step-num { color: rgba(255, 109, 153, 0.32); }
/* Muted ink labels/secondary copy on dark surfaces. */
html[data-theme="dark"] :is(.home-tertiary, .mo-contact-form-label,
  .ent-measures-head, .tier-trust-veil, .tier-trust-label, .wm-logos-label,
  .act-note, .ct-minor, .report-disclaimer, .tc-dash-tab, .tc-dash-meta,
  .tc-dash-section-title, .tc-dash-stat-label, .tc-roster-pct, .uni-path-body,
  .uni-stat-label, .meta) { color: #a39d94 !important; }
html[data-theme="dark"] :is(.mo-quote-who .mo-quote-meta,
  .mo-quote-who .mo-quote-name) { color: #a39d94 !important; }
/* Green accents on dark. */
html[data-theme="dark"] :is(.act-tag, .act-score, .tc-dash-live,
  .tc-dash-stat-delta) { color: #3fae6f !important; }
/* Blue kicker on dark. */
html[data-theme="dark"] .sc-tile--national .sc-tile-kicker { color: #5aa8e8 !important; }
/* Amber "coming soon" tag sits on an amber-tinted chip; lift the text. */
:is(html[data-theme="dark"] .uni-soon-tag, .section-charcoal .uni-soon-tag, .sc-bg-charcoal .uni-soon-tag, .section-ocean .uni-soon-tag, .sc-bg-ocean .uni-soon-tag) { color: #f0bf5c !important; }
/* Quote-card avatar initials on dark. */
html[data-theme="dark"] .mo-quote .mo-quote-avatar { color: #ffa9c4 !important; }

/* --- Light theme / theme-independent: darken --- */
:is(.uni-stat-label, .meta, .mo-quote-who .mo-quote-name,
  .mo-quote-who .mo-quote-meta, .tc-dash-tab, .tc-dash-meta,
  .tc-dash-section-title) { color: #63605b !important; }
.mo-tier .uni-path-body { color: #63605b !important; }
/* Amber status tags / badges. */
:is(.watch, .wkrep-tag-gap, .tier-status.ph-badge, .ph-badge) { color: #8f4400 !important; }
/* Light-theme red kicker on cream. */
html:not([data-theme="dark"]) .mo-tier .uni-path-kicker { color: #bb104e !important; }
/* Quote-card avatar initials on light. */
html:not([data-theme="dark"]) .mo-quote .mo-quote-avatar { color: #b03a63 !important; }
/* Gold avatar on the ocean feature quote. */
.mo-quote--feature .mo-quote-avatar { color: #d0a93c !important; }
/* Avatar initials on bright accent circles read better as dark ink than white. */
.tc-avatar { color: #14130f !important; }
/* Footer (ocean). */
.of-col-title { color: #9198a8 !important; }
:is(.of-bottom, .of-bottom .current-year) { color: #8a91a3 !important; }

/* =====================================================================
   Product mockups — dark-mode adaptation
   ---------------------------------------------------------------------
   The single-student report card (/, reused on /parents,
   /secondary-school-students, /universities), the universities syllabus /
   gradebook / weekly-report mocks, the parents & secondary weekly cards, and
   the enterprise manager-portal + index cards all shipped hard-coded light
   surfaces, so they glowed white on the dark ground. Flip their card /
   chrome / inner-tile surfaces, ink text, and hairline borders to the
   warm-ink dark tokens already used by the .tc-dash and .act-* mocks. Accent
   colours (ocean, red, green, amber, status dots, chart lines) carry over.

   The enterprise Service-Standards mock sits on a permanently-dark charcoal
   section and the Deliberation mock on a permanently-dark ocean section —
   those are a deliberate light-on-dark spotlight in BOTH themes, so the
   charcoal card and its chrome are re-asserted light at the very end.
   ===================================================================== */

/* --- card shells + browser chrome --- */
html[data-theme="dark"] .mo-tier .report-mock,
html[data-theme="dark"] .mo-tier .wkrep,
html[data-theme="dark"] .mo-tier .uni-mock { background: #201E18; border-color: rgba(233, 227, 216, 0.14); color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .report-chrome { background: #2a2820; border-bottom-color: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .mo-tier .report-chrome-title { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .report-dot { background: rgba(233, 227, 216, 0.2); }
html[data-theme="dark"] .mo-tier .wkrep-head { background: #26241d; border-bottom-color: rgba(233, 227, 216, 0.1); }

/* --- ink (strong) text --- */
html[data-theme="dark"] .mo-tier .report-name,
html[data-theme="dark"] .mo-tier .report-kpi-num,
html[data-theme="dark"] .mo-tier .wkrep-title,
html[data-theme="dark"] .mo-tier .wkrep-sub li b,
html[data-theme="dark"] .mo-tier .wkrep-q-text,
html[data-theme="dark"] .mo-tier .wkrep-q-find b,
html[data-theme="dark"] .mo-tier .syl-rows li b,
html[data-theme="dark"] .mo-tier .trk-table td,
html[data-theme="dark"] .mo-tier .par-name,
html[data-theme="dark"] .mo-tier .par-skill b { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .wkrep-donut .num { fill: #E9E3D8; }

/* --- muted text --- */
html[data-theme="dark"] .mo-tier .report-meta,
html[data-theme="dark"] .mo-tier .report-kpi-label,
html[data-theme="dark"] .mo-tier .report-chart-title,
html[data-theme="dark"] .mo-tier .report-skill-top,
html[data-theme="dark"] .mo-tier .wkrep-meta,
html[data-theme="dark"] .mo-tier .wkrep-done-label,
html[data-theme="dark"] .mo-tier .wkrep-kicker,
html[data-theme="dark"] .mo-tier .wkrep-sub li,
html[data-theme="dark"] .mo-tier .wkrep-q-find,
html[data-theme="dark"] .mo-tier .wkrep-gen,
html[data-theme="dark"] .mo-tier .wkrep-q-avg-label,
html[data-theme="dark"] .mo-tier .syl-rows li,
html[data-theme="dark"] .mo-tier .syl-time,
html[data-theme="dark"] .mo-tier .trk-table th,
html[data-theme="dark"] .mo-tier .trk-legend span,
html[data-theme="dark"] .mo-tier .uni-mini-caption,
html[data-theme="dark"] .mo-tier .uni-stat-label,
html[data-theme="dark"] .mo-tier .par-meta,
html[data-theme="dark"] .mo-tier .par-skill-name,
html[data-theme="dark"] .mo-tier .par-foot { color: rgba(233, 227, 216, 0.72); }

/* --- cream inner tiles --- */
html[data-theme="dark"] .mo-tier .report-kpi,
html[data-theme="dark"] .mo-tier .uni-stat { background: #26241d; }
html[data-theme="dark"] .mo-tier .uni-mini { background: #26241d; border-color: rgba(233, 227, 216, 0.12); color: #E9E3D8; }

/* --- bars / tracks / gridlines / dividers --- */
html[data-theme="dark"] .mo-tier .report-bar,
html[data-theme="dark"] .mo-tier .par-skill-track { background: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .mo-tier .report-chart line { stroke: rgba(233, 227, 216, 0.12); }
html[data-theme="dark"] .mo-tier .uni-spark text { fill: rgba(233, 227, 216, 0.45); }
html[data-theme="dark"] .mo-tier .syl-rows li,
html[data-theme="dark"] .mo-tier .wkrep-cols,
html[data-theme="dark"] .mo-tier .wkrep-q,
html[data-theme="dark"] .mo-tier .uni-todo li,
html[data-theme="dark"] .mo-tier .trk-table td,
html[data-theme="dark"] .mo-tier .par-head,
html[data-theme="dark"] .mo-tier .par-skills,
html[data-theme="dark"] .mo-tier .par-fb { border-color: rgba(233, 227, 216, 0.1); }

/* --- small badges that were dark-on-light --- */
html[data-theme="dark"] .mo-tier .wkrep-week { background: #E9E3D8; color: #14130F; }
html[data-theme="dark"] .mo-tier .wkrep-flag-name { background: #201E18; }
html[data-theme="dark"] .mo-tier .syl-file { background: #26241d; border-color: rgba(233, 227, 216, 0.28); color: #E9E3D8; }

/* --- enterprise: manager-portal (cream section) + index cards --- */
html[data-theme="dark"] .mo-tier .ent-idx-card { background: #201E18; }
html[data-theme="dark"] .mo-tier .ent-idx-01::before { background: #6b6459; }
html[data-theme="dark"] .mo-tier .ent-idx-title { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .ent-idx-desc { color: rgba(233, 227, 216, 0.7); }
html[data-theme="dark"] .mo-tier .ent-idx-num { color: rgba(233, 227, 216, 0.28); }
html[data-theme="dark"] .mo-tier .ent-bar { background: rgba(233, 227, 216, 0.1); }
html[data-theme="dark"] .mo-tier .ent-bar-row,
html[data-theme="dark"] .mo-tier .ent-lights { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .ent-lights th,
html[data-theme="dark"] .mo-tier .ent-mock-foot { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .ent-lights td { border-top-color: rgba(233, 227, 216, 0.1); }

/* --- re-assert spotlight mocks on permanently-dark enterprise sections --- */
html[data-theme="dark"] .mo-tier .section-charcoal .uni-mock,
html[data-theme="dark"] .mo-tier .section-ocean .uni-mock { background: #fff; border-color: rgba(50, 47, 44, 0.12); color: #322F2C; }
html[data-theme="dark"] .mo-tier .section-charcoal .report-chrome { background: #f2ede4; border-bottom-color: rgba(50, 47, 44, 0.1); }
html[data-theme="dark"] .mo-tier .section-charcoal .report-chrome-title { color: rgba(50, 47, 44, 0.75); }
html[data-theme="dark"] .mo-tier .section-charcoal .report-dot { background: rgba(50, 47, 44, 0.2); }

/* The universities weekly-report (.wkrep) is a light spotlight card on the
   permanently-dark ocean section, so keep it light in dark mode too. (It DOES
   flip dark on /parents and /secondary-school-students, where it sits on the
   hero — a cream surface that goes dark — hence the global flip above.) */
html[data-theme="dark"] .mo-tier .section-ocean .wkrep { background: #fff; border-color: rgba(50, 47, 44, 0.12); color: #322F2C; }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-head { background: #f9f5ee; border-bottom-color: rgba(50, 47, 44, 0.1); }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-title,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-sub li b,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-q-text,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-q-find b { color: #322F2C; }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-donut .num { fill: #322F2C; }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-meta,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-done-label,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-kicker,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-sub li,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-q-find,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-gen,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-q-avg-label { color: rgba(50, 47, 44, 0.75); }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-cols,
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-q { border-color: rgba(50, 47, 44, 0.08); }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-week { background: #322F2C; color: #F9F5EE; }
html[data-theme="dark"] .mo-tier .section-ocean .wkrep-flag-name { background: #fff; }

/* =====================================================================
   Homepage redesign — "evidence infrastructure" register
   Hero + middle sections rebuilt in the brand register. The kept
   PARTNER INSTITUTIONS strip (.home-trust) and closing (.home-closing)
   are unchanged; nav + footer are shared chrome.
   ===================================================================== */

/* ---- Hero (centered) ---- */
.mo-tier .home-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mo-tier .home-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tier-red);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.mo-tier .home-hero-eyebrow::before,
.mo-tier .home-hero-eyebrow::after { content: ""; width: 24px; height: 1px; background: rgba(187, 16, 78, 0.4); }
.mo-tier .home-hero-h1 { max-width: 900px; margin: 0 auto 24px; font-size: clamp(40px, 8vw, 74px); }
.mo-tier .home-hero-sub { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: rgba(50, 47, 44, 0.72); max-width: 560px; margin: 0 auto; }
.mo-tier .home-hero-support { font-size: 16px; line-height: 1.6; color: var(--tier-ocean); max-width: 520px; margin: 18px auto 0; animation: home-cap-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.35s; }
@keyframes home-cap-in { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mo-tier .home-hero-support { animation: none; } }
.mo-tier .home-hero-cta { justify-content: center; margin-top: 34px; }
.mo-tier .home-hero-weave { width: 100%; max-width: 720px; margin: 56px auto 0; }
.mo-tier .home-hero-weave svg { display: block; width: 100%; height: auto; }

/* ===== Hero motif: two messy streams aligning into one ====================
   Two scattered rows of nodes (one red, one ocean) drift into a single shared
   line — disparate, conflicting signals aligning into one clear, verifiable
   picture. Autoplay loop; reduced-motion rests in the aligned state. */
.mo-tier .ha { overflow: visible; }
.mo-tier .ha-dot {
  transform-box: fill-box; transform-origin: center;
  animation: ha-align 7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.mo-tier .ha-red { fill: var(--tier-red); }
.mo-tier .ha-ocean { fill: #2a4a86; }
@keyframes ha-align {
  0%   { transform: translate(var(--mx, 0), var(--my, 0)); opacity: 0.45; }
  38%  { transform: translate(0, 0); opacity: 1; }
  76%  { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--mx, 0), var(--my, 0)); opacity: 0.45; }
}
.mo-tier .ha-line { stroke: var(--tier-red); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: ha-connect 7s ease infinite; }
.mo-tier .ha-glow { stroke: var(--tier-red); stroke-width: 11; stroke-linecap: round; opacity: 0; filter: blur(6px); animation: ha-connect-glow 7s ease infinite; }
@keyframes ha-connect { 0%, 24% { opacity: 0; } 42%, 74% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ha-connect-glow { 0%, 24% { opacity: 0; } 42%, 74% { opacity: 0.5; } 92%, 100% { opacity: 0; } }
/* Stream labels name the two scattered inputs, then fade as they align. */
.mo-tier .ha-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; animation: ha-labelfade 7s ease infinite; }
.mo-tier .ha-label-red { fill: var(--tier-red); }
.mo-tier .ha-label-ocean { fill: #2a4a86; }
@keyframes ha-labelfade { 0%, 30% { opacity: 0.85; } 42%, 74% { opacity: 0; } 90%, 100% { opacity: 0.85; } }
html[data-theme="dark"] .mo-tier .ha-label-ocean { fill: #7f9cd8; }

/* ===== "Evidence creates shared understanding" visual =====================
   Two people, an assumption that resolves, an evidence bridge that draws in,
   and a shared-understanding core. Revealed on scroll via .is-in (JS adds
   .js-heart to arm the start state; without JS the resolved state shows). */
.mo-tier .hh-person { fill: none; stroke: var(--tier-ocean); stroke-width: 2; }
.mo-tier .hh-person circle { fill: none; stroke: var(--tier-ocean); stroke-width: 2; }
.mo-tier .hh-thread { fill: none; stroke: var(--tier-red); stroke-width: 2.4; stroke-opacity: 0.9; stroke-linecap: round; }
.mo-tier .hh-thread-mid { stroke-width: 1.6; stroke-opacity: 0.5; }
.mo-tier .hh-core { fill: var(--tier-red); }
.mo-tier .hh-halo { fill: none; stroke: var(--tier-red); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.mo-tier .hh-signal { fill: var(--tier-red); opacity: 0; }
.mo-tier .hh-signal-a { offset-path: path("M66 112 Q 150 150 216 156"); }
.mo-tier .hh-signal-b { offset-path: path("M394 112 Q 310 150 244 156"); }
.mo-tier .hh-assume { opacity: 0; }

/* Shared keyframes for the heart visual (thread draw-in, halo pulse, signal
   travel). Defined here because the hero motif that used to host them was
   replaced by the aligning-streams animation. */
@keyframes hw-draw { to { stroke-dashoffset: 0; } }
@keyframes hw-pulse { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes hw-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* Looping "alive" bits run whenever motion is allowed (independent of reveal). */
@media (prefers-reduced-motion: no-preference) {
  .mo-tier .hh-halo { animation: hw-pulse 3s ease-out infinite; animation-delay: 2s; }
  .mo-tier .hh-halo-2 { animation-delay: 3.5s; }
  .mo-tier .hh-signal { animation: hw-travel 3.4s linear infinite; }
  .mo-tier .hh-signal-a { animation-delay: 2s; }
  .mo-tier .hh-signal-b { animation-delay: 3s; }
}

/* Armed start state (JS present) — hide the pieces that animate on reveal. */
.mo-tier .home-heart-visual.js-heart .hh-person { opacity: 0; transform: translateY(10px); transform-box: fill-box; transform-origin: center; }
.mo-tier .home-heart-visual.js-heart .hh-thread { stroke-dashoffset: 1; stroke-dasharray: 1; }
.mo-tier .home-heart-visual.js-heart .hh-core,
.mo-tier .home-heart-visual.js-heart .hh-label { opacity: 0; }

/* Reveal (in view) — play the intro sequence. */
.mo-tier .home-heart-visual.js-heart.is-in .hh-person { animation: hh-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--d, 0s); }
.mo-tier .home-heart-visual.js-heart.is-in .hh-assume { animation: hh-assume 1.4s ease forwards; animation-delay: 0.3s; }
.mo-tier .home-heart-visual.js-heart.is-in .hh-thread { animation: hw-draw 1s ease forwards; animation-delay: var(--d, 0s); }
.mo-tier .home-heart-visual.js-heart.is-in .hh-core { animation: hh-bloom 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.7s; }
.mo-tier .home-heart-visual.js-heart.is-in .hh-label { animation: hh-fade 0.8s ease forwards; animation-delay: 2s; }
@keyframes hh-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes hh-assume { 0% { opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hh-bloom { 0% { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: scale(1); } }
@keyframes hh-fade { to { opacity: 1; } }

/* No-motion / no-JS: everything resolved and static. */
@media (prefers-reduced-motion: reduce) {
  .mo-tier .ha-dot { animation: none; transform: none; opacity: 1; }
  .mo-tier .ha-line { animation: none; opacity: 1; }
  .mo-tier .ha-glow { animation: none; opacity: 0.4; }
  .mo-tier .ha-label { animation: none; opacity: 0; }
  .mo-tier .wy-needle { animation: none; transform: rotate(-10deg); }
  .mo-tier .wy-q { animation: none; }
  .mo-tier .hh-assume { display: none; }
}

/* ---- "Why better evidence matters" (light, 3 cards) ---- */
.mo-tier .home-why { padding: 118px 48px 108px; }
.mo-tier .home-why-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.mo-tier .home-why-head { max-width: 560px; }
.mo-tier .home-why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }

/* Uncertainty gauge — a decision needle wavering between options, never
   settling: "decisions made without enough clarity." Autoplay; rests mid on
   reduced-motion. */
.mo-tier .home-why-visual { display: flex; justify-content: center; }
.mo-tier .home-why-visual svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.mo-tier .wy-arc { fill: none; stroke: rgba(50, 47, 44, 0.16); stroke-width: 2; stroke-linecap: round; }
.mo-tier .wy-opt { fill: rgba(50, 47, 44, 0.22); }
.mo-tier .wy-needle { stroke: var(--tier-red); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 160px 190px; animation: wy-waver 4.6s ease-in-out infinite; }
.mo-tier .wy-pivot { fill: var(--tier-red); }
.mo-tier .wy-q { fill: rgba(50, 47, 44, 0.32); font-family: 'JetBrains Mono', monospace; animation: wy-qpulse 3s ease-in-out infinite; }
@keyframes wy-waver {
  0% { transform: rotate(-54deg); } 20% { transform: rotate(42deg); }
  42% { transform: rotate(-26deg); } 63% { transform: rotate(50deg); }
  84% { transform: rotate(-46deg); } 100% { transform: rotate(-54deg); }
}
@keyframes wy-qpulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.6; } }
html[data-theme="dark"] .mo-tier .wy-arc { stroke: rgba(233, 227, 216, 0.24); }
html[data-theme="dark"] .mo-tier .wy-opt { fill: rgba(233, 227, 216, 0.28); }
html[data-theme="dark"] .mo-tier .wy-q { fill: rgba(233, 227, 216, 0.4); }
.mo-tier .home-why-card {
  background: #fff; border: 0.5px solid var(--tier-line); border-radius: 18px; padding: 32px 28px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mo-tier .home-why-card:hover { transform: translateY(-3px); border-color: rgba(187, 16, 78, 0.28); box-shadow: 0 18px 40px -26px rgba(50, 47, 44, 0.22); }
.mo-tier .home-why-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(187, 16, 78, 0.09); color: var(--tier-red);
}
.mo-tier .home-why-card h3 { font-family: 'Inter', 'Open Sans', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--tier-ink); }
.mo-tier .home-why-card p { font-size: 14.5px; line-height: 1.6; color: rgba(50, 47, 44, 0.72); margin: 0; }

/* ---- "Glass-box infrastructure" (permanently dark via .section-charcoal) ---- */
.mo-tier .home-glass { padding: 120px 48px 120px; }
.mo-tier .home-glass-head { max-width: 620px; margin: 0 auto; text-align: center; }
.mo-tier .home-flow { max-width: 460px; margin: 60px auto 0; display: flex; flex-direction: column; align-items: center; }
.mo-tier .home-flow-node {
  width: 100%; padding: 24px 28px; border-radius: 16px; text-align: center;
  background: rgba(249, 245, 238, 0.06); border: 0.5px solid rgba(249, 245, 238, 0.12);
}
.mo-tier .home-flow-tag { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #ff6d99; margin-bottom: 8px; }
.mo-tier .home-flow-title { display: block; font-size: 18px; font-weight: 600; color: #F9F5EE; margin-bottom: 6px; }
.mo-tier .home-flow-desc { display: block; font-size: 14px; line-height: 1.55; color: rgba(249, 245, 238, 0.66); }
.mo-tier .home-flow-connector { width: 1px; height: 42px; position: relative; background: linear-gradient(#bb104e, transparent); }
.mo-tier .home-flow-connector::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #bb104e; box-shadow: 0 0 10px 2px rgba(187, 16, 78, 0.7);
}

/* ---- "Evidence creates shared understanding" (light) + audience cards ---- */
.mo-tier .home-heart { padding: 118px 48px 108px; }
.mo-tier .home-heart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mo-tier .home-heart-visual { display: flex; justify-content: center; }
.mo-tier .home-heart-visual svg { width: 100%; max-width: 440px; height: auto; }
.mo-tier .home-aud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 80px; }
.mo-tier .home-aud-card {
  position: relative; display: block; padding: 26px 22px; border-radius: 16px;
  background: #fff; border: 0.5px solid var(--tier-line); text-decoration: none; color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mo-tier .home-aud-card:hover { transform: translateY(-3px); border-color: rgba(187, 16, 78, 0.35); box-shadow: 0 18px 40px -26px rgba(50, 47, 44, 0.22); }
.mo-tier .home-aud-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(187, 16, 78, 0.09); color: var(--tier-red); margin-bottom: 16px; transition: background 0.2s ease; }
.mo-tier .home-aud-card:hover .home-aud-icon { background: rgba(187, 16, 78, 0.15); }
.mo-tier .home-aud-card h3 { font-family: 'Inter', 'Open Sans', sans-serif; font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--tier-ink); }
.mo-tier .home-aud-card p { font-size: 13.5px; line-height: 1.55; color: rgba(50, 47, 44, 0.72); margin: 0; }
.mo-tier .home-aud-card .tier-row-arrow { position: absolute; top: 24px; right: 20px; transition: transform 0.2s ease, color 0.2s ease; }
.mo-tier .home-aud-card:hover .tier-row-arrow { transform: translateX(3px); color: var(--tier-red); }

/* ---- "One way of thinking" (personas) ---- */
.mo-tier .home-personas { padding: 118px 48px 108px; }
.mo-tier .home-personas-head { max-width: 600px; margin: 0 auto; text-align: center; }
.mo-tier .home-personas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 60px; }
.mo-tier .home-persona-card {
  background: #fff; border: 0.5px solid var(--tier-line); border-radius: 18px; padding: 32px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mo-tier .home-persona-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(50, 47, 44, 0.22); }
.mo-tier .home-persona-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(187, 16, 78, 0.09); color: var(--tier-red); margin-bottom: 18px; }
.mo-tier .home-persona-icon svg { width: 24px; height: 24px; }
/* Softer role label (not monospace / not all-caps) to ease the tech feel. */
.mo-tier .home-persona-role { display: block; font-family: 'Inter', 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tier-red); margin-bottom: 12px; }
.mo-tier .home-persona-q { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 21px; font-style: italic; line-height: 1.3; color: var(--tier-ink); margin-bottom: 12px; }
.mo-tier .home-persona-desc { font-size: 14px; line-height: 1.6; color: rgba(50, 47, 44, 0.72); margin: 0; }

/* ---- "Why MeeOpp" (light, subtle tint) ---- */
.mo-tier .home-whyus { padding: 108px 48px 118px; background: #F2ECE1; }
/* Evidence -> connection -> performance, shown as a connected sequence. */
.mo-tier .home-whyus-flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.mo-tier .home-whyus-card {
  position: relative; overflow: hidden; flex: 1 1 0; max-width: 320px;
  background: #fff; border: 0.5px solid var(--tier-line); border-radius: 18px;
  padding: 38px 28px 32px; text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mo-tier .home-whyus-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, var(--tier-red)); }
.mo-tier .home-whyus-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(50, 47, 44, 0.24); }
.mo-tier .home-whyus-glyph {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent, var(--tier-red));
  background: rgba(50, 47, 44, 0.05);
  background: color-mix(in srgb, var(--accent, #BB104E) 13%, transparent);
}
.mo-tier .home-whyus-card h3 { font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-size: 25px; font-weight: 500; margin: 0 0 10px; color: var(--tier-ink); }
.mo-tier .home-whyus-card p { font-size: 14.5px; line-height: 1.6; color: rgba(50, 47, 44, 0.72); margin: 0; }
.mo-tier .home-whyus-arrow { flex: 0 0 auto; align-self: center; font-family: 'JetBrains Mono', monospace; font-size: 20px; color: var(--tier-mute); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .mo-tier .home-why-cards { grid-template-columns: 1fr; }
  .mo-tier .home-why-top { grid-template-columns: 1fr; gap: 36px; }
  .mo-tier .home-why-head { max-width: none; }
  .mo-tier .home-why-visual { order: -1; }
  .mo-tier .home-why-visual svg { max-width: 240px; }
  .mo-tier .home-heart-grid { grid-template-columns: 1fr; gap: 40px; }
  .mo-tier .home-aud,
  .mo-tier .home-personas-grid { grid-template-columns: 1fr 1fr; }
  .mo-tier .home-whyus-flow { flex-direction: column; align-items: center; }
  .mo-tier .home-whyus-card { max-width: 460px; width: 100%; }
  .mo-tier .home-whyus-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .mo-tier .home-aud,
  .mo-tier .home-personas-grid { grid-template-columns: 1fr; }
  .mo-tier .home-hero,
  .mo-tier .home-why,
  .mo-tier .home-glass,
  .mo-tier .home-heart,
  .mo-tier .home-personas,
  .mo-tier .home-whyus { padding-left: 24px; padding-right: 24px; }
}

/* ---- Dark theme: flip light card surfaces + hero/heart ink ---- */
html[data-theme="dark"] .mo-tier .home-why-card,
html[data-theme="dark"] .mo-tier .home-persona-card,
html[data-theme="dark"] .mo-tier .home-aud-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .home-why-card h3,
html[data-theme="dark"] .mo-tier .home-aud-card h3,
html[data-theme="dark"] .mo-tier .home-persona-q,
html[data-theme="dark"] .mo-tier .home-whyus-card h3 { color: #E9E3D8; }
html[data-theme="dark"] .mo-tier .home-why-card p,
html[data-theme="dark"] .mo-tier .home-aud-card p,
html[data-theme="dark"] .mo-tier .home-persona-desc,
html[data-theme="dark"] .mo-tier .home-whyus-card p,
html[data-theme="dark"] .mo-tier .home-hero-sub { color: rgba(233, 227, 216, 0.72); }
html[data-theme="dark"] .mo-tier .home-whyus-card { background: #201E18; border-color: rgba(233, 227, 216, 0.14); }
html[data-theme="dark"] .mo-tier .home-hero-support { color: #7f9cd8; }
html[data-theme="dark"] .mo-tier .home-whyus { background: transparent; }
/* Hero network + heart visual on the dark ground: lift the ink nodes/people
   and the (briefly shown) assumption marks to warm light so they don't vanish;
   the red / ocean threads and the red hub carry over unchanged. */
html[data-theme="dark"] .mo-tier .ha-ocean { fill: #7f9cd8; }
html[data-theme="dark"] .mo-tier .hh-person,
html[data-theme="dark"] .mo-tier .hh-person circle { stroke: #7f9cd8; }
html[data-theme="dark"] .mo-tier .hh-assume path { stroke: rgba(233, 227, 216, 0.4); }
html[data-theme="dark"] .mo-tier .hh-assume text { fill: rgba(233, 227, 216, 0.5); }

/* ---- Glass-box flow: staggered scroll reveal (nodes rise, connectors grow) ---- */
.mo-tier .home-flow-node { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.mo-tier .home-flow-connector { transition: transform 0.5s ease; }
.mo-tier .home-flow.js-flow .home-flow-node { opacity: 0; transform: translateY(18px); }
.mo-tier .home-flow.js-flow .home-flow-connector { transform: scaleY(0); transform-origin: top; }
.mo-tier .home-flow.js-flow.is-in .home-flow-node { opacity: 1; transform: none; }
.mo-tier .home-flow.js-flow.is-in .home-flow-connector { transform: scaleY(1); }
.mo-tier .home-flow.js-flow.is-in .home-flow-node:nth-child(1) { transition-delay: 0s; }
.mo-tier .home-flow.js-flow.is-in .home-flow-connector:nth-child(2) { transition-delay: 0.15s; }
.mo-tier .home-flow.js-flow.is-in .home-flow-node:nth-child(3) { transition-delay: 0.3s; }
.mo-tier .home-flow.js-flow.is-in .home-flow-connector:nth-child(4) { transition-delay: 0.45s; }
.mo-tier .home-flow.js-flow.is-in .home-flow-node:nth-child(5) { transition-delay: 0.6s; }

/* ---- "One way of thinking" on the ocean band ---- */
/* Solid raised panels (not a faint wash) so text sits above the section's
   grid pattern and reads clearly; brighter pink role + copy on the navy. */
.mo-tier .home-personas.section-ocean .home-persona-card { background: #1c2f5c; border-color: rgba(249, 245, 238, 0.16); }
.mo-tier .home-personas.section-ocean .home-persona-card:hover { box-shadow: 0 24px 46px -26px rgba(0, 0, 0, 0.6); border-color: rgba(249, 245, 238, 0.34); }
/* Ease off the tech-y grid on this section — swap it for a soft top glow. */
.mo-tier .home-personas.section-ocean::before { background-image: radial-gradient(ellipse 80% 70% at 50% -10%, rgba(255, 255, 255, 0.07), transparent 70%); background-size: auto; }
.mo-tier .home-personas.section-ocean .home-persona-icon { background: rgba(255, 199, 0, 0.16); color: var(--tier-yellow); }
.mo-tier .home-personas.section-ocean .home-persona-role { color: #ffa9c4; }
.mo-tier .home-personas.section-ocean .home-persona-q { color: #F9F5EE; }
.mo-tier .home-personas.section-ocean .home-persona-desc { color: rgba(249, 245, 238, 0.82); }

/* ---- Smooth in-page anchor scrolling (e.g. hero "See how it works" -> #how),
        with room under the sticky header. ---- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.mo-tier #how { scroll-margin-top: 88px; }

/* =====================================================================
   Login temporarily hidden pre-launch.
   Hides the header Login button (desktop + mobile) and the footer Login
   link across every page. The /login page itself is kept (noindex, and
   not in the sitemap) but is now unlinked — reachable only by direct URL.
   Remove this block to restore login.
   ===================================================================== */
.mo-header-buttons { display: none !important; }
.of-footer a[href="/login"] { display: none !important; }

/* =====================================================================
   Mobile layer — phones and small tablets.

   Everything below is a small-screen adaptation of components defined
   earlier in this file. It lives at the end so it wins over the per-
   component media queries above without needing extra specificity.
   Layout and type only: no colour work here, so the dark-theme rules
   further up still apply unchanged.

   Each block cites the symptom it fixes, measured in a headless browser
   at 320/390/768px (see `npm run smoke`, which now asserts these).
   ===================================================================== */

/* ---- 1. Grid tracks that could not shrink -------------------------------
   A `1fr` track never goes below its content's min-content width, so a
   long word (26px serif "longitudinal") or a fixed-size child pushed
   these grids wider than the viewport and the section's `overflow:hidden`
   silently cut the right-hand column off. `minmax(0, 1fr)` lets the track
   shrink; the wrapping rules then break the long words instead. ---- */
.mo-tier .tier-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mo-tier .ent-measures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-tier .uni-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-tier .report-grid,
.mo-tier .uni-hero-grid { min-width: 0; }
/* Grid *items* default to `min-width: auto`, so even a single-column grid
   takes its track width from the widest unshrinkable descendant and can end
   up wider than its own container on a narrow viewport. These are the grids
   whose children carry product mocks and cards big enough to do that. */
.mo-tier :is(.uni-hero-grid, .ww-name-grid, .report-grid, .tier-metrics,
  .uni-stat-row, .ent-measures) > * { min-width: 0; }
/* `auto-fill, minmax(300px, 1fr)` cannot go below 300px, so the track runs
   past the container once the available width drops under ~324px. `min()`
   lets the last track collapse to the container instead. */
.sc-features { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.mo-tier .tier-metric,
.mo-tier .ent-measure,
.mo-tier .uni-stat,
.mo-tier .uni-visual,
.mo-tier .report-copy { min-width: 0; }
.mo-tier .tier-metric-key,
.mo-tier .tier-metric-headline,
.mo-tier .tier-metric-label,
.mo-tier .ent-measure-body,
.mo-tier .uni-stat-label { overflow-wrap: break-word; }

@media (max-width: 980px) {
  .mo-tier .tier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two 26px-serif metric cards still overflowed a tablet viewport, so the
   phone/tablet band gets one card per row. */
@media (max-width: 860px) {
  .mo-tier .tier-metrics { grid-template-columns: minmax(0, 1fr); }
  .mo-tier .tier-metric { padding: 26px 22px 28px; }
  .mo-tier .tier-metric-key { margin-bottom: 12px; min-height: 0; }
  .mo-tier .tier-metric-headline { font-size: 24px; }
}

/* `.ent-measure-body` was running 10-14 words through a 77px column
   (~8 characters a line) inside the three-up measures grid. */
@media (max-width: 620px) {
  .mo-tier .ent-measures { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mo-tier .ent-measure { padding: 12px 14px; }
  .mo-tier .ent-measure-key { margin-bottom: 3px; }
}

/* ---- 2. Hero/visual card on /universities and /who-we-are --------------
   The illustration plus 28px of padding set a ~350px min-content floor on
   the single-column hero grid, overflowing 320px viewports. ---- */
@media (max-width: 480px) {
  .mo-tier .uni-visual { padding: 16px; }
  .mo-tier .uni-hero-img { margin-bottom: 12px; }
}

/* Three ~88px stat tiles wrapped "years of longitudinal outcomes data"
   over five lines. One tile per row, figure and label side by side. */
@media (max-width: 480px) {
  .mo-tier .uni-stat-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mo-tier .uni-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 12px 14px; }
  .mo-tier .uni-stat-num { min-height: 0; line-height: 1.05; }
  .mo-tier .uni-stat-label { margin-top: 0; }
}

/* ---- 3. Marquees under `prefers-reduced-motion` -----------------------
   Both logo tracks are `width: max-content` and scroll horizontally. The
   reduced-motion rules stop the animation and set `flex-wrap: wrap`, but
   max-content never wraps, so every logo past the first stayed parked
   outside the clipped viewport with nothing left to move it in. ---- */
@media (prefers-reduced-motion: reduce) {
  .wm-logos-track,
  .trust-track { width: auto; max-width: 100%; }
  /* Each track lists its logos twice so the scroll loops seamlessly; the
     second pass is already marked aria-hidden. Once the track wraps into a
     static grid instead of scrolling, that pass just reads as duplicates. */
  .wm-logos-track > [aria-hidden="true"],
  .trust-track > [aria-hidden="true"] { display: none; }
}

/* ---- 4. Decorative hero blobs on phones -------------------------------
   At 320-390px the 320px yellow blob sat over the H1 and the pink one
   under the CTA row, dropping button contrast. Smaller and further out. */
@media (max-width: 700px) {
  body .wm-blob-yellow { width: 190px; height: 190px; top: -74px; right: -66px; opacity: 0.72; }
  body .wm-blob-pink { width: 160px; height: 160px; bottom: -86px; left: -66px; opacity: 0.5; }
}

/* ---- 5. Homepage trust statement -------------------------------------
   "Financial market infrastructure" is `white-space: nowrap` (it must not
   break mid-phrase in the marquee) but the same class is reused in the
   stacked statement, where it overflowed a 320px viewport. */
@media (max-width: 520px) {
  .mo-tier .trust-statement { gap: 6px 14px; }
  .mo-tier .trust-statement .trust-mark { white-space: normal; font-size: 20px; }
  .mo-tier .trust-statement .trust-sep { font-size: 20px; }
}

/* ---- 6. Browser-chrome mock on /teachers ------------------------------
   The URL pill (`flex: 1`) plus the "Live" badge and tab row overflowed
   the dashboard card at 320px. */
.tc-dash-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) {
  .tc-dash-chrome { padding: 10px 12px; gap: 5px; }
  .tc-dash-url { margin-left: 6px; padding: 5px 10px; }
  .tc-dash-live { margin-left: 6px; }
  .tc-dash-tabs { padding: 0 14px; }
  .tc-dash-tab { margin-right: 18px; }
}

/* ---- 7. Touch targets ------------------------------------------------
   Measured at 390px: footer social icons were 18x18, footer links 20px
   tall, and the header language/theme buttons 32px tall — all under the
   44px touch minimum. The negative margins keep the visual rhythm while
   growing the hit area. ---- */
@media (max-width: 991px) {
  .mo-lang-toggle,
  .mo-theme-toggle { min-height: 40px; }
}
@media (max-width: 767px) {
  .of-social { gap: 4px; }
  .of-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -13px -13px -13px 0;
  }
  .of-links { gap: 0; }
  .of-links a { display: block; padding: 10px 0; }
  .of-inner { margin-bottom: 28px; }
  .mo-tier .ct-minor-link { display: inline-block; padding: 8px 0; }
}

/* ---- 8. Type floors --------------------------------------------------
   Two tiers, because these pages carry two kinds of small text.

   Page content — eyebrows, section labels, card kickers and categories,
   form labels, footer — ran as small as 9px, well under comfortable
   reading size on a phone. Floor: 11.5px.

   Labels inside the illustrative product mocks are deliberately dense;
   they stand in for a desktop dashboard, and pushing them to 11.5px
   would reflow the mocks. Floor: 10.5px — legible without redesigning
   the panel.

   Every selector below only ever raises a size. Where the base rule is
   `.mo-tier .x` or `.a .b`, the floor is written at matching specificity
   so it wins on source order rather than by escalating with !important. */
@media (max-width: 640px) {
  /* -- content tier: 11.5px -- */
  .mo-tier :is(.tier-label, .tier-band-label, .tier-trust-label, .tier-trust-veil,
    .feature-key, .step-key, .outcomes-label, .closing-path-label,
    .home-hero-eyebrow, .thesis-col-key, .finding-kicker, .uni-path-kicker,
    .cw-card-kicker, .jb-dept, .pack-card-stage, .pack-card-cat, .pack-card-tag,
    .ct-aud-kicker, .ct-minor, .intro-note, .uni-stat-label, .uni-quote-attr,
    .ent-measures-head, .report-disclaimer, .ent-tm),
  :is(.wm-eyebrow, .wm-band-eyebrow, .wm-logos-label, .wm-stat-foot,
    .sc-band-label, .sc-tile-kicker, .tc-band-label, .tc-stats-note,
    .mo-quote-meta, .mo-quote-role, .ww-drive-attr, .of-col-title,
    .of-bottom, .of-bottom .current-year) {
    font-size: 11.5px;
  }

  .mo-tier .ct-form-card .mo-contact-form-label,
  .mo-tier .intro-card .mo-contact-form-label { font-size: 11.5px; }

  /* -- product-mock tier: 10.5px --
     Split by the specificity of the rule each one has to beat. */
  :is(.act-q-label, .act-resp-label, .act-fb-key, .act-note, .tc-dash-live,
    .tc-dash-stat-label, .tc-dash-insight-key, .tc-dash-note, .fa-now-key,
    .bf-outcome-tag, .bf-chrome-school, .bf-row-key, .bf-map-title) {
    font-size: 10.5px;
  }
  .mo-tier :is(.wkrep-kicker, .wkrep-week, .wkrep-done-label, .wkrep-q-avg-label,
    .wkrep-fb-tag, .syl-time, .uni-todo-tag, .uni-soon-tag, .ent-measure-key,
    .trk-state) {
    font-size: 10.5px;
  }
  .fa-grow--head .fa-skill,
  .fa-body .fa-updated,
  .mo-tier .ent-lights th,
  .mo-tier .trk-table th { font-size: 10.5px; }

  /* Unclassed spans that carry mock metadata. */
  .mo-tier :is(.ent-mock-foot, .ent-trade, .ent-queue, .wkrep-gen) span,
  .mo-tier .wkrep-fb-tag[class*="wkrep-tag-"] { font-size: 10.5px; }

  /* Stragglers with their own base rules: `.ent-response` sets the size its
     child spans inherit; the rest are declared unscoped or on a descendant
     selector. The SVG label carries a `font-size="10"` presentation
     attribute, which any CSS declaration outranks. */
  .mo-tier .ent-response { font-size: 10.5px; }
  .mo-tier .home-flow-tag,
  .jb-dept,
  .tc-feed time,
  .mo-tier .home-heart-visual .hh-label { font-size: 10.5px; }
}

/* ---- 9. Gradebook mock table on /universities -------------------------
   `td { white-space: nowrap }` keeps the week columns tidy on desktop, but
   "Late · doc attached" then set a 141px floor on the status column and
   pushed the table past a 320px viewport even with W4/W5 already hidden.
   Below 480px the status text is allowed to wrap instead. ---- */
@media (max-width: 480px) {
  .mo-tier .trk-table td,
  .mo-tier .trk-state { white-space: normal; }
}

/* ---- 10. Syllabus-import row on /universities -------------------------
   `.syl-file-ok` ("✓ Uploaded") is `nowrap` and pushed right by
   `margin-left: auto`, so a long filename beside it ran past the card
   edge. The row wraps instead below 480px. ---- */
@media (max-width: 480px) {
  .mo-tier .syl-file { flex-wrap: wrap; gap: 6px 10px; }
  .mo-tier .syl-file-ok { margin-left: 0; }
}

/* ---- 11. Attainment table on /enterprise ------------------------------
   `.ent-lights` is a four-column table whose header cells ("VIP arrival",
   "Breakfast") set the column floor, putting it 13px past a 320px card.
   Only the narrowest phones need the cell padding squeezed; at 360px and
   up the default 6px still fits and keeps the labels visually separated. */
@media (max-width: 340px) {
  .mo-tier .ent-lights th,
  .mo-tier .ent-lights td { padding-left: 3px; padding-right: 3px; }
  .mo-tier .ent-lights th { letter-spacing: 0.06em; }
}