/* Inter loads via a preconnected <link> in every page's <head> (faster than
   a render-blocking @import here). */

:root {
  /* Brand */
  --ink: #10213f;
  --navy: #102b61;
  --blue: #1769e0;
  --blue-dark: #0f57c2;
  --cyan: #19b8ce;
  --green: #4fa81f;      /* nudged darker so white text on the green half of
                            gradients clears WCAG AA */
  --green-dark: #3f8a18;
  --gold: #f4a51c;
  --coral: #f76b5c;
  --muted: #55637d;      /* darkened from #63708a to meet 4.5:1 on white */
  --line: #dfe7f2;
  --soft: #f5f8fc;
  --white: #ffffff;

  /* Semantic status (were referenced via var() but never defined) */
  --success: #2e7d32;
  --warning: #e65100;
  --danger:  #c62828;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Radius scale */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation scale (consistent, not ad-hoc) */
  --shadow-sm: 0 1px 2px rgba(16, 43, 97, .06), 0 1px 3px rgba(16, 43, 97, .08);
  --shadow-md: 0 8px 24px rgba(16, 43, 97, .08);
  --shadow-lg: 0 18px 50px rgba(16, 43, 97, .16);
  --shadow: var(--shadow-lg); /* back-compat alias */

  /* Motion + focus */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);  /* premium "settle" for scroll reveals */
  --dur: 200ms;
  --reveal-dur: 720ms;
  --ring: 0 0 0 3px rgba(23, 105, 224, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at top left, rgba(25,184,206,.1), transparent 26rem),
    radial-gradient(circle at 90% 20%, rgba(88,185,38,.08), transparent 24rem),
    #ffffff;
  /* `overflow-x: hidden` here would make <body> a scroll container, which
     silently breaks `position: sticky` for every descendant (the sticky
     filter sidebar on search-colleges.php in particular). `clip` suppresses
     horizontal overflow the same way without establishing a scroll port. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.7; }

/* Numeric data (stats, prices, counts) uses tabular figures so columns and
   changing values don't shift width. */
.metric strong, .stat strong, .stat-card strong, .college-stat-row strong,
.hero-metrics strong, .badge, .pagination .btn { font-variant-numeric: tabular-nums; }

/* Accessibility: a single, consistent keyboard focus ring across every
   interactive element (there were none before). Mouse users don't see it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(23, 105, 224, .18); }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Scroll reveal ----------------------------------------------------------
   Content rises gently into view as it scrolls in. Progressive enhancement:
   initReveal() in assets/js/main.js adds `.has-reveal` and tags only below-the-
   fold elements, and only when motion is allowed and IntersectionObserver
   exists — so with JS off (or reduced motion on) everything is simply visible,
   and above-the-fold content never flashes. */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
}
.has-reveal [data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* The sticky header lifts off the page with a soft shadow once scrolled. */
.site-header { transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(16, 43, 97, .07);
  background: rgba(255, 255, 255, .86);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px clamp(18px, 4vw, 64px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand img { width: 190px; height: 62px; object-fit: contain; object-position: left center; }
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  position: relative;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  color: #1c2f52;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.main-nav a:hover, .main-nav a.active { color: var(--blue); background: #eef5ff; }
/* Active-page underline accent for clearer "you are here" signalling. */
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}
.main-nav .nav-cta { color: #fff; background: linear-gradient(135deg, var(--blue), var(--green)); }
.main-nav .nav-cta:hover { color: #fff; background: linear-gradient(135deg, var(--blue-dark), var(--green-dark)); }
.main-nav .nav-cta.active::after { display: none; }
.nav-toggle { cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.nav-toggle:hover { border-color: var(--blue); }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; border-radius: 8px; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--ink); }

.page { min-height: 100vh; }
.container { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.section { padding: clamp(54px, 8vw, 92px) 0; }
.section.alt { background: var(--soft); }

/* Closing call-to-action band. Replaces a stack of inline styles with one
   consistent, premium-feeling section. */
.cta-band {
  background: radial-gradient(120% 150% at 50% -30%, #1c3f74 0%, #0a1a35 62%);
  color: #fff;
  text-align: center;
}
.cta-band .container { max-width: 720px; }
.cta-band .eyebrow { color: #8ad9ff; }
.cta-band h2 { color: #fff; margin: 0 0 8px; }
.cta-band p { color: rgba(255,255,255,.85); font-size: 18px; line-height: 1.6; margin: 0 auto 26px; max-width: 54ch; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn.secondary {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}
.cta-band .btn.secondary:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 30px;
}
.section-heading p { max-width: 420px; margin: 0; }
.eyebrow { color: var(--blue); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
h1, h2, h3 { color: var(--ink); line-height: 1.08; margin: 0; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(40px, 7vw, 78px); max-width: 920px; letter-spacing: -.03em; }
h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 14px; }
h3 { font-size: 21px; letter-spacing: -.01em; }
.lead { font-size: clamp(17px, 2vw, 21px); max-width: 68ch; line-height: 1.6; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--green)); box-shadow: var(--shadow-md); }
.btn.primary:hover { box-shadow: var(--shadow-lg); filter: brightness(1.04); }
.btn.secondary { color: var(--navy); background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn.dark { color: #fff; background: var(--ink); }
.btn.dark:hover { filter: brightness(1.12); }
.btn.small { min-height: 40px; padding: 0 15px; font-size: 14px; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-loading {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
  pointer-events: none;
}

.hero { position: relative; min-height: 640px; color: #fff; isolation: isolate; }
/* The slides run a `kenburns` zoom to scale(1.11), which pushes them ~70px past
   the viewport on each side and made the whole page scroll sideways. Clip at the
   slider — the element that owns the slides — so the hero itself stays free to
   let content overflow if it ever needs to. */
.hero-slider { position: absolute; inset: 0; overflow: hidden; }
.slide { position: absolute; inset: 0; }
.slide {
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1000ms var(--ease-out);
}
.slide.active { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4,13,32,.78), rgba(7,18,45,.48) 52%, rgba(7,18,45,.3));
}
.hero-content { position: relative; z-index: 2; padding-top: 80px; padding-bottom: clamp(48px, 8vw, 76px); }
.hero h1, .hero p { color: #fff; }
.hero-copy-panel {
  width: min(840px, 100%);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(4,13,32,.76);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.hero-copy-panel .eyebrow { color: #9fe6ff; }
.hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; max-width: 900px; }
.metric { padding: 20px; border: 1px solid rgba(255,255,255,.24); background: rgba(4,13,32,.58); border-radius: 16px; backdrop-filter: blur(12px); }
.metric strong { display: block; font-size: 28px; }
.metric span { color: rgba(255,255,255,.82); font-size: 13px; }

.grid-3, .grid-4, .two-col { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-col { grid-template-columns: 1.05fr .95fr; align-items: center; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
/* Transition on the base selector so the lift animates on both enter AND exit
   (previously it only eased in). */
.card,
.showcase-card,
.service-card,
.journey-node {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover,
.showcase-card:hover,
.service-card:hover,
.journey-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(16,43,97,.14);
}
.icon-box {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  margin-bottom: 18px;
}
.feature-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.feature-list li { display: flex; gap: 10px; color: #33415f; }
.feature-list li::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; margin-top: 8px; border-radius: 50%; background: var(--green); }

.image-panel { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.image-panel img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }

.intro-section {
  position: relative;
}

/* ============================================
   Featured Colleges Grid
   ============================================ */
.colleges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.college-card {
    overflow: hidden;
    padding: 0;
    transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.college-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.college-image-wrap {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.college-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.college-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(4, 13, 32, 0.88));
    color: #fff;
}

.college-image-overlay span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #b8f7d0;
    margin-bottom: 4px;
}

.college-image-overlay strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.college-body {
    padding: 16px;
}

.college-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.college-stats .stat {
    background: var(--soft);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

.college-stats .stat span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.college-stats .stat strong {
    display: block;
    font-size: 14px;
}

.college-actions .btn {
    width: 100%;
    justify-content: center;
}

/* ============================================
   Responsive - Featured Colleges
   ============================================ */
@media (max-width: 980px) {
    .colleges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .colleges-grid {
        grid-template-columns: 1fr;
    }
    
    .college-image-wrap {
        height: 132px;
    }

    .college-image-overlay strong {
        font-size: 15px;
    }
    
    .college-stats {
        gap: 8px;
    }
}
.admit-snapshot {
  position: relative;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(23,105,224,.1), rgba(88,185,38,.14)),
    #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.admit-snapshot::after {
  content: "US  UK  SG";
  position: absolute;
  right: 26px;
  top: -16px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.snapshot-visual {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 390px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(160deg, #eaf4ff, #f7fff1 64%, #fff7e7);
}
.snapshot-visual img {
  width: min(82%, 290px);
  max-height: 360px;
  object-fit: contain;
  object-position: bottom center;
}
.snapshot-score {
  position: absolute;
  left: 16px;
  top: 16px;
  min-width: 128px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 32px rgba(16,43,97,.14);
}
.snapshot-score span,
.match-row span,
.next-action { color: var(--muted); font-size: 13px; }
.snapshot-score strong {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 34px;
}
.snapshot-panel {
  padding: 22px;
  border-radius: 8px;
  background: #07152e;
  color: #fff;
}
.snapshot-panel h3 { color: #fff; margin: 10px 0 20px; font-size: 30px; }
.snapshot-panel .eyebrow { color: #8ad9ff; }
.match-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.match-row strong { color: #fff; }
.next-action {
  margin-top: 22px;
  padding: 14px;
  border-radius: 8px;
  color: #10213f;
  background: #f7d96f;
  font-weight: 800;
}

.student-pulse {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(16,43,97,.94), rgba(6,27,42,.88));
}
.student-pulse h2,
.student-pulse p,
.student-pulse .eyebrow { color: #fff; }
.pulse-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 30px;
  align-items: center;
}
.pulse-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pulse-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.pulse-card.wide { grid-column: 1 / -1; }
.pulse-card.urgent { background: rgba(247,107,92,.22); }
.pulse-card span,
.pulse-card small {
  display: block;
  color: #cfe1ff;
  font-size: 13px;
}
.pulse-card strong {
  display: block;
  margin: 10px 0;
  color: #fff;
  font-size: clamp(21px, 3vw, 32px);
  line-height: 1.1;
}

.experience-section {
  background:
    linear-gradient(180deg, #f5f8fc 0%, #eef7ff 100%);
}
.feature-showcase {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  gap: 18px;
}
.showcase-card {
  min-height: 250px;
  padding: 26px;
  border-radius: 8px;
  border: 1px solid rgba(23,105,224,.14);
  background: #fff;
  box-shadow: 0 16px 40px rgba(16,43,97,.09);
}
.showcase-card.is-large {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 520px;
  color: #fff;
  /* A photograph, not an infographic: the previous image was a "Top 10
     Universities" chart whose own headings and logos collided with this card's
     text. The gradient is weighted to the lower half so the copy always sits on
     a dark ground, and the focal point favours the building over the foreground. */
  background:
    linear-gradient(180deg, rgba(8,23,54,.15) 0%, rgba(8,23,54,.52) 42%, rgba(8,23,54,.95) 100%);
}
.showcase-card span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  font-weight: 900;
}
.showcase-card h3 { font-size: 25px; margin-bottom: 10px; }
.showcase-card.is-large h3,
.showcase-card.is-large p,
.showcase-card.is-large a { color: #fff; }
.showcase-card a {
  width: fit-content;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
  font-weight: 900;
}

.journey-section {
  background:
    linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
}
.journey-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.journey-map::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green), var(--gold), var(--coral), var(--cyan));
}
.journey-node {
  position: relative;
  z-index: 1;
  min-height: 255px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 42px rgba(16,43,97,.08);
}
.journey-node span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 58px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-weight: 900;
  box-shadow: 0 0 0 8px #eef5ff;
}
.journey-node:nth-child(2) span { background: var(--green); box-shadow: 0 0 0 8px #eefbe9; }
.journey-node:nth-child(3) span { background: var(--gold); box-shadow: 0 0 0 8px #fff5dc; }
.journey-node:nth-child(4) span { background: var(--coral); box-shadow: 0 0 0 8px #fff0ee; }
.journey-node:nth-child(5) span { background: var(--cyan); box-shadow: 0 0 0 8px #e7fbff; }
.journey-node.featured {
  color: #fff;
  background: linear-gradient(145deg, #102b61, #1769e0);
}
.journey-node.featured h3,
.journey-node.featured p { color: #fff; }

.country-card { position: relative; min-height: 320px; overflow: hidden; padding: 0; color: #fff; }
.country-card img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.country-card div { position: absolute; inset: auto 0 0; padding: 24px; background: linear-gradient(transparent, rgba(4,16,40,.88)); }
.country-card h3, .country-card p { color: #fff; }
.country-card div span {
  display: inline-block;
  margin-bottom: 10px;
  color: #b8f7d0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.impact-band {
  color: #fff;
  background:
    linear-gradient(120deg, rgba(7,21,46,.95), rgba(16,43,97,.9));
}
.impact-band h2,
.impact-band p,
.impact-band .eyebrow { color: #fff; }
.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 30px;
  align-items: center;
}
.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.impact-stats div {
  min-height: 185px;
  padding: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.impact-stats strong {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 26px;
}
.impact-stats span { color: #dbe7ff; line-height: 1.6; }

.page-hero { padding: 82px 0 48px; background: linear-gradient(135deg, #eef7ff, #f8fff3); border-bottom: 1px solid var(--line); }
.page-hero.compact { padding-bottom: 36px; }

.services-hero,
.about-hero,
.search-hero {
  position: relative;
  overflow: hidden;
}
.services-hero {
  background:
    linear-gradient(135deg, rgba(238,247,255,.96), rgba(248,255,243,.92));
}
.search-hero {
  background:
    radial-gradient(46rem 30rem at 88% -20%, rgba(25,184,206,.28), transparent 60%),
    radial-gradient(40rem 26rem at -12% 130%, rgba(79,168,31,.22), transparent 60%),
    linear-gradient(135deg, #081736, #10306b 58%, #0c3350);
}
.search-hero h1,
.search-hero p,
.search-hero .eyebrow { color: #fff; }
.search-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.search-hero-tags span {
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 900;
}
.service-hero-panel {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.service-hero-panel div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
}
.service-hero-panel span { color: var(--muted); font-size: 13px; font-weight: 800; }
.service-hero-panel strong { color: var(--ink); text-align: right; }

.service-suite {
  display: grid;
  grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.service-card {
  min-height: 240px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(16,43,97,.08);
}
.service-card.primary-service {
  grid-row: span 2;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(7,21,46,.18), rgba(7,21,46,.94)),
    url("../assets/study-singapore-indian-students.jpg") center/cover;
}
.service-card span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  font-weight: 900;
}
.service-card.primary-service h3,
.service-card.primary-service p,
.service-card.primary-service li { color: #fff; }
.service-card ul {
  margin: 20px 0 0;
  padding-left: 18px;
  line-height: 1.9;
}
/* Contextual status note inside a service card (moved off inline styles). */
.service-note {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.service-note.warn { background: #fff3e0; color: #e65100; }
.service-note.ok   { background: #e8f5e9; color: #2e7d32; }

/* On-brand tuition bar chart (replaces a static JPG that clashed with the site).
   Single series = magnitude, so one brand hue with direct value labels and a
   recessive baseline; the fill uses the site's signature blue->green accent. */
.tuition-chart {
  margin: 0;
  padding: 26px 24px 20px;
  background: linear-gradient(180deg, #fff, var(--soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.tuition-chart-head { display: grid; gap: 3px; margin-bottom: 30px; }
.tuition-chart-head strong { font-size: 18px; color: var(--ink); line-height: 1.3; }
.tuition-chart-sub { font-size: 12.5px; color: var(--muted); }
.tuition-plot {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 260px;
  border-bottom: 2px solid var(--line);
}
.tuition-col { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.tuition-fill {
  position: relative;
  width: min(46px, 76%);
  border-radius: 6px 6px 0 0;
  background: var(--blue);
  box-shadow: 0 8px 16px -8px rgba(23, 105, 224, .55);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tuition-col:hover .tuition-fill { filter: brightness(1.07); transform: translateY(-2px); }
.tuition-val {
  position: absolute;
  top: -21px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.tuition-axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 10px; }
.tuition-axis span { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.25; }

@media (max-width: 620px) {
  .tuition-plot { height: 200px; }
  .tuition-val { font-size: 10.5px; top: -18px; }
  .tuition-axis span { font-size: 10px; }
}
.services-strip {
  padding: 34px 0;
  color: #fff;
  background: #07152e;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.strip-grid div {
  padding: 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
}
.strip-grid strong { display: block; color: #fff; font-size: 24px; }
.strip-grid span { color: #cfe1ff; line-height: 1.6; }

.search-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: start; }
.filters {
  position: sticky;
  top: 92px;
  /* The filter list is taller than most viewports. Cap it to the space below
     the sticky header and let it scroll internally, otherwise the lower
     filters and the Apply/Reset buttons get pinned off-screen and can't be
     reached. */
  max-height: calc(100vh - 92px - 24px);
  overflow-y: auto;
  /* Keep the page from scrolling once the panel hits its own end. */
  overscroll-behavior: contain;
  /* Firefox / newer Safari standard scrollbar (kept visible, not overlay). */
  scrollbar-color: rgba(16,43,97,.32) rgba(16,43,97,.06);
}
/* Persistent, visible scrollbar so it's obvious the panel scrolls (macOS
   overlay scrollbars auto-hide, which made the lower filters look unreachable). */
.filters::-webkit-scrollbar { width: 9px; }
.filters::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.filters::-webkit-scrollbar-thumb {
  background: rgba(16,43,97,.24);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.filters::-webkit-scrollbar-thumb:hover { background: rgba(16,43,97,.42); background-clip: padding-box; }
/* The sticky panel scrolls internally, so keep the primary actions reachable
   without hunting for the bottom of the list. */
.filters .filter-actions {
  position: sticky;
  bottom: -1px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, rgba(245,249,255,0), #f5f9ff 22%);
}
.pro-filters {
  border: 1px solid rgba(23,105,224,.18);
  background: linear-gradient(180deg, #fff, #f5f9ff);
}
.filter-grid { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #33415f; font-weight: 800; font-size: 13px; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: #5f6a80; }
input:hover, select:hover, textarea:hover { border-color: #c2d0e6; }
/* Soft brand focus ring on fields (complements the global outline). */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--ring);
}
select { cursor: pointer; }
label { cursor: default; }

/* --- Password field with reveal toggle ------------------------------------ */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 64px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.password-toggle:hover { background: #eef5ff; }
.password-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Any author `display` declaration outranks the browser's built-in
   `[hidden] { display: none }`, so an element toggled via el.hidden stays
   visible. This reset keeps the attribute authoritative site-wide. */
[hidden] { display: none !important; }

.caps-warning {
  display: block;
  margin-top: 4px;
  color: #ef6c00;
  font-size: 12px;
  font-weight: 600;
}

/* --- Inline field validation ---------------------------------------------- */
.field-error {
  display: block;
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #e57373;
  background: #fffafa;
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198,40,40,.15);
}
/* --- College search bar (above results) ----------------------------------- */
.college-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid rgba(23,105,224,.18);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.college-search-icon { display: inline-flex; color: var(--blue); }
.college-search input[type="search"] {
  min-height: 46px;
  border: none;
  box-shadow: none;
  font-size: 15px;
  padding-left: 0;
}
.college-search input[type="search"]:focus { outline: none; box-shadow: none; }
.college-search .btn { white-space: nowrap; }
.search-echo { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.search-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: #eef5ff;
  border: 1px solid rgba(23,105,224,.18);
  font-size: 13px;
  line-height: 1.5;
}
.search-note .icon { flex: none; margin-top: 2px; color: var(--blue); }

/* --- Card heights -----------------------------------------------------------
   Every card in a row is the same size. `align-items: stretch` (the grid
   default) does that; the risk is dead space inside a sparse card, so the
   content blocks below are capped to keep the variance small and the action row
   is pinned to the foot so the buttons still line up. */
/* `grid-auto-rows: 1fr` makes every row the same height as the tallest, so all
   boxes on the page match rather than only matching their row neighbour. */
.college-results { align-items: stretch; grid-auto-rows: 1fr; }
.match-grid { align-items: stretch; grid-auto-rows: 1fr; }

/* Equal-height cards need the body to fill the card and the actions to sit at
   its foot, otherwise the buttons float mid-card. */
.college-card .college-body { justify-content: flex-start; }
.match-card, .college-card { height: 100%; }

/* Three buttons (Website / Details / Save) at a 120px floor overflowed the
   ~360px card and wrapped Save onto its own row. */
.college-card .college-actions .btn,
.match-card .college-actions .btn { min-width: 0; padding-inline: 14px; }
/* Length is capped server-side (item count + character budget), so no clamp is
   needed here. The clamp that was here rendered the overflow OUTSIDE the tinted
   box and sliced the last line in half. */
.majors-more { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.college-card .college-body > .badge-row {
  max-height: 60px;          /* about two rows of badges */
  overflow: hidden;
}
.search-echo strong { color: var(--ink); }

@media (max-width: 620px) {
  .college-search { grid-template-columns: auto minmax(0, 1fr); }
  .college-search .btn { grid-column: 1 / -1; }
}

/* --- Modal ------------------------------------------------------------------ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 13, 32, .55);
}
.modal {
  width: min(100%, 460px);
  padding: 28px;
  border-radius: var(--radius-lg, 14px);
  background: #fff;
  box-shadow: 0 30px 70px rgba(4, 16, 40, .3);
}
.modal h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }
.modal p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-actions .btn { flex: 1 1 auto; min-width: 140px; }

/* --- Profile / results view switching -------------------------------------- */
/* One column: the form and the list are alternate destinations, not a sidebar
   and a body. Only the active panel renders. */
.profile-layout { display: block; }
.view-panel { outline: none; }
.profile-layout[data-view="results"] .view-profile { display: none; }
.profile-layout[data-view="profile"] .view-results { display: none; }

/* Matches .profile-form's width so the back link and the card share an edge --
   left loose it stretched the full container and stranded the label far to the
   right of the form. */
.panel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 16px;
}
.panel-nav-step { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* Entry point into the profile form, shown above the results. */
.profile-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  margin-bottom: 22px;
  border: 1px solid rgba(23,105,224,.2);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff, #f5f9ff);
}
.profile-cta.is-empty { border-color: rgba(88,185,38,.4); background: linear-gradient(180deg, #fff, #f3fbef); }
.profile-cta-text { display: grid; gap: 4px; min-width: 0; }
.profile-cta-text strong { font-size: 16px; }
.profile-cta-text span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.profile-cta .profile-progress-bar { margin-top: 6px; max-width: 340px; }
.profile-cta .btn { flex: none; }

.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.btn.ghost:hover { border-color: #c2d0e6; color: var(--ink); }

@media (max-width: 620px) {
  .profile-cta { flex-direction: column; align-items: flex-start; }
}

/* --- Student profile form -------------------------------------------------- */
.profile-form { max-width: 900px; margin-inline: auto; }
.profile-form { padding: 26px; display: grid; gap: 4px; }
.profile-form-head { margin-bottom: 6px; }
.profile-form-head h2 { margin: 2px 0 12px; }

.profile-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #e6eefb;
  overflow: hidden;
}
.profile-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue, #1769e0), #58b926);
  transition: width var(--dur, .25s) var(--ease, ease);
}
.profile-progress p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; }
.profile-progress strong { color: var(--ink); }

.profile-note {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 8px;
  background: #eef5ff;
  border: 1px solid rgba(23,105,224,.18);
  font-size: 13px;
  line-height: 1.55;
}
.profile-note a { color: var(--blue); font-weight: 700; text-decoration: underline; }

.profile-section { border: 0; padding: 0; margin: 0 0 22px; }
.profile-section > legend {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue, #1769e0);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.section-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 12px;
  align-items: start;
}
.field-grid > label { display: grid; gap: 6px; align-content: start; }
.field-grid .span-2 { grid-column: 1 / -1; }
/* A trailing odd field left a dead half-row. Span it and cap the control so it
   reads as deliberate rather than stretched. */
.field-grid > label:last-child:nth-child(odd) { grid-column: 1 / -1; }
.field-grid > label:last-child:nth-child(odd) input,
.field-grid > label:last-child:nth-child(odd) select { max-width: 50%; }
.field-grid .hint {
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 0;
}
/* Inline errors and hints must not shift the control above them. */
.field-grid .field-error { margin-top: 0; }

.checkbox-set { border: 0; padding: 0; margin: 14px 0 4px; }
.checkbox-set > legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: #33415f; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;          /* uniform rows regardless of label length */
  padding: 8px 11px;
  line-height: 1.3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--dur, .2s) var(--ease, ease), background var(--dur, .2s) var(--ease, ease);
}
.checkbox-item:hover { border-color: #c2d0e6; background: #fafcff; }
.checkbox-item input { width: 16px; height: 16px; min-height: 0; flex: none; }
.checkbox-item:has(input:checked) { border-color: var(--blue, #1769e0); background: #eef5ff; }

/* Deliberately NOT sticky. A sticky-bottom bar pinned itself to the viewport
   the moment the (very tall) form entered view, so the Save button floated on
   top of the form's own heading before you had scrolled into any fields. */
.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* --- Profile step wizard ---------------------------------------------------
   Progressive enhancement: the markup renders as an ordinary long form. When
   initProfileWizard() (assets/js/main.js) runs it adds .is-wizard to the form,
   which switches on the one-section-at-a-time behaviour and the step nav below.
   With JS off none of this applies and every section stays visible. */

.wizard-steps { margin: 4px 0 14px; }

/* The row of numbered circles, joined by a track that runs through their
   centres. left/right insets = half a column (100%/6/2) so the line starts at
   the first circle's centre and ends at the last. */
.wizard-dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}
.wizard-track {
  position: absolute;
  top: 19px;                 /* half of the 38px circle */
  left: 8.3333%;
  right: 8.3333%;
  height: 3px;
  border-radius: 999px;
  background: #e0e8f5;
  overflow: hidden;
}
.wizard-track-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue, #1769e0), #58b926);
  transition: width var(--dur, .3s) var(--ease, ease);
}
.wizard-dot {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  position: relative;        /* sit above the track */
  z-index: 1;
  text-align: center;
}
.wizard-dot .dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d8e2f2;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  transition: background var(--dur, .25s) var(--ease, ease),
              border-color var(--dur, .25s) var(--ease, ease),
              color var(--dur, .25s) var(--ease, ease),
              transform var(--dur, .25s) var(--ease, ease);
}
.wizard-dot em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
}
/* Completed and current steps fill with the brand accent. */
.wizard-dot.is-filled .dot,
.wizard-dot.is-current .dot {
  background: var(--blue, #1769e0);
  border-color: var(--blue, #1769e0);
  color: #fff;
}
.wizard-dot.is-current .dot { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(23,105,224,.15); }
.wizard-dot.is-current em,
.wizard-dot.is-filled em { color: var(--ink); }

.wizard-caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.wizard-caption [data-wizard-title] { color: var(--ink); }

/* Step footer nav (Back / Next). */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Only one section at a time once enhanced, and the popup-card treatment. */
.profile-form.is-wizard .profile-section:not(.is-active) { display: none; }
.profile-form.is-wizard .profile-section { margin-bottom: 6px; }
.profile-form.is-wizard {
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(15,40,90,.35), 0 2px 10px rgba(15,40,90,.06);
}
/* A soft scrim behind the elevated card so the form reads as a focused popup. */
.profile-layout[data-view="profile"].is-wizard-popup {
  background: radial-gradient(120% 80% at 50% 0, rgba(23,105,224,.06), transparent 60%);
  border-radius: 20px;
  padding: 8px 0 4px;
}
.profile-section.is-active { animation: wizardStepIn var(--dur, .28s) var(--ease, ease); }
@keyframes wizardStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .profile-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .field-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .profile-form { padding: 18px; }
  /* Labels crowd on narrow screens; the numbers + caption still carry it. */
  .wizard-dot em { display: none; }
  .wizard-dot .dot { width: 34px; height: 34px; font-size: 13px; }
  .wizard-track { top: 17px; }
}

/* --- Recommendation gate ---------------------------------------------------- */
.recommend-gate { padding: 44px 32px; text-align: center; display: grid; justify-items: center; gap: 4px; }
.gate-icon { color: var(--blue); opacity: .55; }
.recommend-gate h2 { margin: 10px 0 4px; font-size: 23px; line-height: 1.25; max-width: 22ch; }
.recommend-gate p { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.65; }
.gate-need { margin-top: 12px !important; color: var(--ink); }
.gate-note { margin-top: 16px !important; font-size: 12.5px; color: var(--muted); max-width: 48ch; }

/* Worked example shown on the gate: the argument for filling in the profile is
   the output itself, so it is rendered rather than described. */
.gate-preview { margin-top: 26px; width: min(100%, 420px); display: grid; gap: 8px; justify-items: stretch; }
.gate-preview-label,
.gate-preview-foot { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gate-preview-foot { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; }
.gate-preview-card {
  text-align: left; padding: 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--soft);
}
.gate-preview-card strong { display: block; margin: 3px 0 10px; font-size: 15px; }
.gate-preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 9px 0; border-block: 1px solid var(--line); }
.gate-preview-metrics span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gate-preview-metrics b { font-size: 14px; }
.gate-preview-card ul { margin: 10px 0 0; padding-left: 17px; display: grid; gap: 3px; }
.gate-preview-card li { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* --- Results summary strip ------------------------------------------------- */
.results-summary { margin-bottom: 26px; }
.summary-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 12px;
}
.summary-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.summary-tile .bucket-dot { grid-row: 1 / span 2; }
.summary-tile strong { font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.summary-tile .summary-label {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.results-note { margin: 0; font-size: 13.5px; }

@media (max-width: 560px) {
  .summary-tiles { grid-template-columns: 1fr; }
}

/* --- Matching engine results ---------------------------------------------- */
.match-bucket { margin-bottom: 34px; }
.match-bucket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.match-bucket-head h3 { display: flex; align-items: center; gap: 9px; font-size: 20px; margin: 0; }
.match-bucket-head > span { color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: right; }
.match-bucket-head small { display: block; color: var(--muted); font-size: 11.5px; }
.match-bucket-blurb { margin: 8px 0 14px; font-size: 13.5px; }
.bucket-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.bucket-reach  { background: #e8734a; }
.bucket-match  { background: var(--blue, #1769e0); }
.bucket-safety { background: #58b926; }

.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

/* Flex column, not grid: it lets the action row be pushed to the bottom with
   `margin-top:auto`. With `align-content:start` a wrapped college name shifted
   everything below it down ~23px, so the Details buttons in a row sat at
   different heights (5 of 24 names wrap). */
.match-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Reserve two lines so one- and two-line names still align their metrics. */
.match-card h4 {
  margin: 4px 0 0;
  font-size: 16.5px;
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
}
.match-card .college-actions {
  margin-top: auto;       /* pin to the card foot regardless of body length */
  padding-top: 4px;
  border-top: 0;
  gap: 8px;
}
/* Result-card actions sit inline. The container inherits a column direction, so
   the default `align-items: stretch` was what made the gradient Details button
   span the full card and read as a banner -- `flex: 0 0 auto` had no effect on
   width because it governs the main (vertical) axis there. */
.match-card .college-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.match-card .college-actions .btn { flex: 0 0 auto; width: auto; }

.match-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.match-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.match-metrics strong { display: block; font-size: 16px; margin-top: 3px; line-height: 1.2; }
.match-reasons { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.match-reasons li { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* How much evidence stands behind the admit-chance figure. */
.confidence {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  justify-self: start;
}
.conf-high   { background: #e8f5e9; color: #2e7d32; }
.conf-medium { background: #eef5ff; color: #1565c0; }
.conf-low    { background: #fff8e1; color: #ef6c00; }

.match-cautions { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.match-cautions li { color: #ef6c00; font-size: 12.5px; line-height: 1.5; }

.results-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
/* Alias search: "did you mean" bar + matched-alias chip (search-colleges.php) */
.alias-bar { border: 1px solid var(--line, #e6e8ee); border-left: 3px solid var(--blue, #2f6df6); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--card, #fff); }
.alias-lead { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.alias-cands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.alias-cand { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line, #e6e8ee); border-radius: 999px; font-size: 0.88rem; text-decoration: none; color: inherit; background: var(--bg, #f7f8fb); }
.alias-cand:hover, .alias-cand:focus-visible { border-color: var(--blue, #2f6df6); }
.alias-cand .alias-where { color: var(--muted, #6b7280); }
.alias-cand .alias-where::before { content: "·"; margin: 0 4px 0 2px; }
/* Typeahead under the college search inputs (js/college-typeahead.js) */
.ta-box { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--card, #fff); border: 1px solid var(--line, #e6e8ee); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); overflow: hidden; text-align: left; }
.ta-note { padding: 8px 12px; font-size: 0.8rem; color: var(--muted, #6b7280); border-bottom: 1px solid var(--line, #e6e8ee); }
.ta-item { display: flex; gap: 10px; align-items: center; padding: 9px 12px; text-decoration: none; color: inherit; }
.ta-item:hover, .ta-item.is-active { background: var(--bg, #f3f4f6); }
.ta-flag { font-size: 1.05rem; line-height: 1; }
.ta-main { display: flex; flex-direction: column; min-width: 0; }
.ta-name { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-sub { font-size: 0.78rem; color: var(--muted, #6b7280); }
.college-matched { display: inline-block; margin-top: 4px; font-size: 0.74rem; color: var(--muted, #6b7280); background: var(--bg, #f3f4f6); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* Pagination + empty state — moved off inline styles onto classes so the markup
   stays clean and the two read as one consistent system. */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.pagination .ellipsis {
  min-width: 22px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}
.results-empty {
  text-align: center;
  padding: 64px 24px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.results-empty .empty-icon { color: var(--blue); opacity: .5; }
.results-empty h3 { margin-top: 6px; }
.results-empty p { color: var(--muted); max-width: 42ch; }
.results-empty .btn { margin-top: 8px; }
.college-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
/* Flex column so the action row can be pinned to the card foot -- otherwise a
   two-line college name or a longer majors list leaves the Website/Details
   buttons at different heights across a row. */
.college-card { overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: 0; }
.college-card .college-body { flex: 1; display: flex; flex-direction: column; gap: 14px; }
/* Buttons sit side by side. The container inherits a column direction, so the
   default `align-items: stretch` stacked Website above Details and made each
   span the full card. */
.college-card .college-actions {
  margin-top: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.college-card .college-actions .btn { flex: 0 0 auto; width: auto; }

/* Card header: let the name take the room and keep badges from wrapping into
   tall single-character pills. */
.college-card header { align-items: flex-start; gap: 12px; }
.college-card header > div:first-child { min-width: 0; flex: 1; }
/* Scoped to the HEADER badge row only. Applied to every .badge-row it also
   squeezed the body row (SAT / ACT / Fee / Graduation) into a narrow column,
   stacking each badge on its own line. */
.college-card header .badge-row { justify-content: flex-end; max-width: 46%; }
.college-card .college-body > .badge-row { max-width: none; justify-content: flex-start; }
/* `height` (not `min-height`) -- an earlier block in this file sets
   .college-image-wrap { height: 180px }, and min-height does not override it,
   which left a gap of dead space below the shortened image. */
.college-image-wrap {
  position: relative;
  height: 132px;
  min-height: 132px;
  overflow: hidden;
}
.college-image-wrap img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}
.college-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,13,32,.08), rgba(4,13,32,.82));
}
.college-image-overlay {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 16px;
  bottom: 12px;
  color: #fff;
}
.college-image-overlay span {
  display: block;
  margin-bottom: 4px;
  color: #b8f7d0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
}
/* Sized for the compact 132px header: the old clamp() topped out at 44px and
   pushed long names out of the banner entirely. */
.college-image-overlay strong {
  display: block;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.2;
}
.college-body {
  display: grid;
  gap: 16px;
  padding: 24px;
}
.college-card header { display: flex; justify-content: space-between; gap: 18px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { padding: 6px 9px; background: #eef5ff; color: var(--blue); border-radius: 999px; font-size: 12px; font-weight: 800; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--soft); border-radius: 8px; padding: 12px; }
.stat span { display: block; color: var(--muted); font-size: 12px; }
.stat strong { font-size: 16px; }
.college-stat-row .stat {
  border: 1px solid #e4edf8;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}
/* Result cards carry exactly three stats -- acceptance, tuition, and student
   faculty ratio -- so lay them out 3-across. Scoped to the results list so the
   full-width college-detail page is unaffected. */
.college-results .college-stat-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.college-results .college-stat-row .stat { padding: 10px; }
.college-results .college-stat-row .stat span { font-size: 11px; }
.college-results .college-stat-row .stat strong { font-size: 15px; }
.college-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.college-detail-grid div {
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #cdddf0;
}
.college-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.college-detail-grid strong { display: block; margin-top: 4px; }
.college-majors {
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  background: #fffaf0;
  border: 1px solid #ffe2a2;
}
.college-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.about-hero {
  background:
    linear-gradient(135deg, rgba(238,247,255,.96), rgba(255,250,240,.92)),
    url("../assets/undergraduate-singapore.jpg") center/cover;
}
.about-collage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 440px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, #eaf4ff, #f8fff3);
  box-shadow: var(--shadow);
}
.about-collage img {
  width: min(70%, 310px);
  object-fit: contain;
}
.about-collage div {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(7,21,46,.88);
}
.about-collage strong,
.about-collage span { display: block; color: #fff; }
.about-collage strong { font-size: 24px; }
.about-collage span { color: #dbe7ff; margin-top: 6px; line-height: 1.5; }
.belief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.belief-grid article {
  min-height: 280px;
  padding: 28px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #102b61, #1769e0);
  box-shadow: var(--shadow);
}
.belief-grid article:nth-child(2) { background: linear-gradient(145deg, #0f6b75, #19b8ce); }
.belief-grid article:nth-child(3) { background: linear-gradient(145deg, #327616, #58b926); }
.belief-grid span { color: rgba(255,255,255,.76); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.belief-grid h3,
.belief-grid p { color: #fff; }
.about-story {
  background:
    linear-gradient(135deg, rgba(7,21,46,.94), rgba(16,43,97,.82));
}
.about-story h2,
.about-story p,
.about-story .eyebrow { color: #fff; }

/* About-page metric grids — moved off inline styles onto classes. */
.about-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.about-metrics div {
  background: rgba(255,255,255,.1);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}
.about-metrics strong { display: block; font-size: 24px; color: #fff; }
.about-metrics span { color: rgba(255,255,255,.7); font-size: 12px; }

.country-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.country-stats div {
  text-align: center;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.country-stats .flag { display: block; font-size: 24px; }
.country-stats strong { display: block; font-size: 14px; margin-top: 4px; }
.country-stats .label { font-size: 11px; color: var(--muted); }

@media (max-width: 620px) {
  .country-stats { grid-template-columns: repeat(2, 1fr); }
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.story-points {
  display: grid;
  gap: 14px;
}
.story-points div {
  padding: 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.story-points strong,
.story-points span { display: block; color: #fff; }
.story-points strong { font-size: 24px; }
.story-points span { color: #dbe7ff; margin-top: 6px; line-height: 1.6; }

.auth-shell { min-height: calc(100vh - 86px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { position: relative; background: #0b1530; }
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(16,43,97,.88), rgba(88,185,38,.38)); }
.auth-copy { position: relative; z-index: 1; height: 100%; padding: 64px; display: flex; flex-direction: column; justify-content: end; }
.auth-copy h1, .auth-copy p { color: #fff; }
.auth-form-wrap { display: grid; place-items: center; padding: 38px 18px; }
.auth-card { width: min(460px, 100%); }
.form-row { display: grid; gap: 14px; margin: 22px 0; }
.form-help { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.form-help label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }

/* Auth-form helpers — moved off inline styles onto reusable classes. */
.auth-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.auth-note a { color: var(--blue); font-weight: 600; }
.form-consent { margin: 16px 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.form-consent a { color: var(--blue); font-weight: 600; }
.input-hint { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; line-height: 1.4; }
.form-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin: 12px 0 4px;
  font-weight: 600;
  font-size: 13px;
}
.form-opt input { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.form-opt small { display: block; font-weight: 500; color: var(--muted); }

.site-footer { background: #07152e; color: #dbe7ff; padding: 56px clamp(18px, 4vw, 64px) 24px; }
.site-footer p, .site-footer a { color: #b9c8e3; }
/* Five .footer-col children — the old 4-column template wrapped the Contact
   column under the brand at every width above 980px. */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; }
.footer-container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-brand img { width: 190px; height: 70px; object-fit: contain; object-position: left center; filter: brightness(1.15); }
.site-footer h3 { color: #fff; margin-bottom: 14px; }
.site-footer a { display: block; margin: 10px 0; transition: color var(--dur) var(--ease); }
.site-footer li a:hover, .footer-brand:hover { color: #fff; }
.footer-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.footer-social a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.16); margin-top: 34px; padding-top: 22px; color: #9eb0ce; font-size: 14px; }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 84px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .grid-3, .grid-4, .journey, .footer-grid, .search-layout, .auth-shell, .admit-snapshot, .feature-showcase, .impact-grid, .impact-stats, .pulse-grid, .pulse-board, .journey-map, .service-suite, .strip-grid, .college-detail-grid, .belief-grid, .story-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading p { max-width: 760px; margin-top: 12px; }
  .showcase-card.is-large { min-height: 420px; }
  .journey-map::before { display: none; }
  .journey-node { min-height: auto; }
  .journey-node span { margin-bottom: 22px; }
  .hero-metrics, .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { position: static; max-height: none; overflow-y: visible; }
  .auth-art { min-height: 420px; }
}

@media (max-width: 620px) {
  .brand img { width: 148px; height: 52px; }
  .site-header { padding-inline: 14px; }
  .hero { min-height: 720px; }
  .hero-copy-panel { padding: 20px; }
  .hero-metrics, .stat-row, .college-detail-grid { grid-template-columns: 1fr; }
  .college-results { grid-template-columns: 1fr; }
  .college-card header, .results-top, .footer-bottom, .form-help { flex-direction: column; align-items: flex-start; }
  .college-image-wrap img { height: 132px; }
  .college-body { padding: 18px; }
  .auth-copy { padding: 36px 24px; }
  .container { width: min(100% - 28px, 1180px); }
}

/* ============================================================================
   AESTHETIC POLISH v2  (2026-08)
   Self-contained visual refinement layer. To REVERT the "improve the look"
   pass, delete everything from this banner to the end of the file (or restore
   the backup). Nothing above depends on these rules.
   ============================================================================ */

/* --- Softer, more premium surfaces ------------------------------------------ */
.card, .service-card, .journey-node, .metric, .pulse-card, .stat-card, .auth-card {
  border-radius: var(--radius-lg);
}
.card, .service-card, .journey-node {
  border-color: rgba(16, 43, 97, .08);
  box-shadow: 0 1px 2px rgba(16,43,97,.04), 0 10px 30px rgba(16,43,97,.07);
}
.card:hover, .service-card:hover, .journey-node:hover {
  box-shadow: 0 4px 10px rgba(16,43,97,.06), 0 26px 56px rgba(16,43,97,.15);
}

/* --- Image reveal on hover (colleges, countries, editorial images) ---------- */
.college-image-wrap img, .country-card img, .image-panel img {
  transition: transform .55s var(--ease);
  will-change: transform;
}
.college-card:hover .college-image-wrap img,
.country-card:hover img,
.image-panel:hover img { transform: scale(1.055); }
.image-panel { transition: box-shadow var(--dur) var(--ease); }
.image-panel:hover { box-shadow: 0 28px 64px rgba(16,43,97,.20); }
.country-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.country-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(16,43,97,.18); }
.country-card div { background: linear-gradient(transparent, rgba(4,16,40,.5) 45%, rgba(4,16,40,.92)); }

/* --- Designed eyebrow: small leading accent rule ---------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}

/* --- Section headings: a touch more air ------------------------------------- */
.section-heading { margin-bottom: 38px; }

/* --- Buttons: refined depth + crisper label --------------------------------- */
.btn { letter-spacing: .01em; }
.btn.primary {
  background-image: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 6px 16px rgba(23,105,224,.28), 0 2px 4px rgba(16,43,97,.12);
}
.btn.primary:hover {
  box-shadow: 0 12px 28px rgba(23,105,224,.36), 0 4px 8px rgba(16,43,97,.14);
}
.btn.secondary { box-shadow: 0 1px 2px rgba(16,43,97,.06); }

/* --- Icon tiles: soft brand glow -------------------------------------------- */
.icon-box {
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(23,105,224,.28);
}

/* --- Sticky header: subtle depth + hairline accent -------------------------- */
.site-header { box-shadow: 0 1px 0 rgba(16,43,97,.04); }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(23,105,224,.35), rgba(79,168,31,.35), transparent);
  opacity: .7;
}

/* --- Hero panel + metrics: richer glass ------------------------------------- */
.hero-copy-panel {
  border-radius: var(--radius-lg);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.14);
  animation: heroRise .6s var(--ease) both;
}
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.metric {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.metric::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}
.metric:hover { transform: translateY(-3px); background: rgba(4,13,32,.72); }
.metric strong { color: #fff; }

/* --- Badges / pills: crisper ------------------------------------------------- */
.badge {
  background: #eef5ff;
  border: 1px solid rgba(23,105,224,.16);
  color: var(--blue-dark);
  font-weight: 700;
  letter-spacing: .01em;
}

/* --- Feature list: check marker instead of a plain dot ---------------------- */
.feature-list li { align-items: flex-start; }
.feature-list li::before {
  content: "";
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
    linear-gradient(135deg, var(--green), var(--cyan));
}

/* --- Page hero (interior pages): a little more dimension -------------------- */
/* Only the light-text heroes (about/services use dark text on a light bg).
   The search hero uses WHITE text on a dark image, so it is excluded here and
   re-asserted dark below. */
.page-hero:not(.search-hero) {
  background:
    radial-gradient(60rem 30rem at 100% -10%, rgba(23,105,224,.08), transparent 60%),
    radial-gradient(50rem 26rem at 0% 120%, rgba(79,168,31,.08), transparent 60%),
    linear-gradient(135deg, #eef7ff, #f8fff3);
}
/* Keep the dark search-hero winning over the light .page-hero rule above.
   The old stock-infographic background image is gone — text now sits on a
   crafted brand gradient with a faint dot grid, so nothing competes with the
   headline. */
.page-hero.search-hero {
  position: relative;
  background:
    radial-gradient(46rem 30rem at 88% -20%, rgba(25,184,206,.28), transparent 60%),
    radial-gradient(40rem 26rem at -12% 130%, rgba(79,168,31,.22), transparent 60%),
    linear-gradient(135deg, #081736, #10306b 58%, #0c3350);
  overflow: hidden;
}
.page-hero.search-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 35%, #000 85%);
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 85%);
  pointer-events: none;
}
.page-hero.search-hero .container { position: relative; }
.search-hero-tags a {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  color: #fff; font-weight: 600; font-size: 14px;
  background: rgba(255,255,255,.08);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.search-hero-tags a:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}

/* results toolbar (sort) */
.results-toolbar {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end; margin: 14px 0 4px;
}
.results-toolbar label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.results-toolbar select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; font: 600 14px/1.2 var(--font-sans); color: var(--ink);
}

.site-footer { position: relative; }

/* --- Brand-tinted scrollbar (desktop) --------------------------------------- */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #c3d3ee transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: #c3d3ee; border-radius: 999px; border: 2px solid #fff; }
  *::-webkit-scrollbar-thumb:hover { background: #a9bfe4; }
}

/* ============================================================================
   ICON SYSTEM + UX REFINEMENTS  (2026-08)
   ============================================================================ */

/* --- Universal icon alignment ----------------------------------------------
   One rule for every inline SVG icon: never shrink, never distort, and sit on
   the text's optical centre. Fixes the icons that previously floated above the
   baseline in buttons, alerts, lists, and footer contact rows. */
.icon,
.btn svg,
.alert svg,
.footer-contact svg,
.contact-info-icon svg {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.145em;   /* optical centre for 16px icons on 1.5 line-height */
  width: 1em;
  height: 1em;
}
.icon { width: 16px; height: 16px; }
.btn .icon, .btn svg { width: 16px; height: 16px; vertical-align: 0; }
/* Buttons are already flex+centred, so icons need no baseline nudge there. */

/* --- Alerts: icon and text on one aligned row -------------------------------
   Alerts were plain blocks, so the leading icon sat above the first line. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.alert svg { margin-top: .12em; }
.alert a { text-decoration: underline; font-weight: 600; }

/* Colour + box variants, so pages stop re-declaring alert styling inline.
   `.alert.alert-danger` is a single icon+text row; `.alert-danger` on its own is
   a plain block (heading + list + link stack), used by the signup error box. */
.alert, .alert-danger, .alert-success {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-danger  { background: #ffebee; color: #c62828; border-color: #ffcdd2; }
.alert-success { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.alert-danger a, .alert-danger li { color: #c62828; }
.alert-danger ul { margin: 8px 0 0; padding-left: 26px; }
.alert-danger strong { display: flex; align-items: center; gap: 6px; }
.alert-cta { margin: 10px 0 0; }

/* --- Footer contact rows: icon vertically centred with its label ------------ */
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.footer-contact svg { opacity: .8; }

/* --- Contact info cards ----------------------------------------------------- */
.contact-info-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-info-card:hover { border-color: rgba(23,105,224,.3); box-shadow: var(--shadow-md); }
.contact-info-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  color: var(--blue);
  background: #eef5ff;
}
.contact-info-card strong { display: block; margin-bottom: 3px; font-size: 14px; }
.contact-info-card p { margin: 0; font-size: 14px; }
.contact-info-card a { color: var(--blue); font-weight: 600; }
.contact-info-card a:hover { text-decoration: underline; }

/* --- Eyebrow accent rule shouldn't apply to flag/plain eyebrows ------------- */
.college-detail-info .eyebrow::before { display: none; }

/* --- Skip link: keyboard users can jump past the nav (WCAG 2.4.1) ---------- */
/* Visible to screen readers only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

/* --- Anchor targets clear the sticky header -------------------------------- */
:target, [id] { scroll-margin-top: 96px; }

/* --- Comfortable touch targets in nav + footer ----------------------------- */
@media (max-width: 980px) {
  .main-nav a { min-height: 46px; display: flex; align-items: center; }
  .footer-col li a { padding: 4px 0; }
}

/* --- Selects: custom chevron so they read as dropdowns --------------------- */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355637d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* --- Toasts: readable, accessible, and above everything -------------------- */
.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: grid; gap: 10px; }

/* --- Empty/marker polish ---------------------------------------------------- */
.major-tag, .badge { line-height: 1.4; }

/* --- Reduced-motion users get no hover translation ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .service-card:hover, .journey-node:hover,
  .country-card:hover, .btn:hover, .metric:hover { transform: none; }
  .college-card:hover .college-image-wrap img,
  .country-card:hover img, .image-panel:hover img { transform: none; }
}

/* --- Form labels: keep the required marker on the same line as the text -----
   `label` was display:grid, so the "*" span became its own grid row and
   dropped below the label text. Block layout lets the text and marker flow
   inline while the field still sits on its own line. */
.form-row label,
label:has(> input),
label:has(> select),
label:has(> textarea) {
  display: block;
}
label > input,
label > select,
label > textarea {
  margin-top: 7px;
}
label > span[style*="coral"] { margin-left: 2px; font-weight: 700; }

/* Checkbox / inline labels stay side-by-side and comfortably tappable. */
label.inline,
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
label.inline > input[type="checkbox"],
.form-check input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; margin-top: 1px; flex: 0 0 18px; cursor: pointer;
}

/* --- Results header: heading left, actions top-right (wrap cleanly) -------- */
.results-top { align-items: flex-start; margin-bottom: 8px; }
.results-top .btn { white-space: nowrap; flex: 0 0 auto; }
.results-sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 72ch; }

/* --- Sort control (Search Colleges results header) ------------------------- */
.results-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.sort-control { display: inline-flex; align-items: center; gap: 8px; }
.sort-control label {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); white-space: nowrap;
}
.sort-control select {
    appearance: none; -webkit-appearance: none;
    padding: 9px 34px 9px 14px; border-radius: 12px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--ink, #10213f);
    border: 1px solid rgba(16,43,97,.16);
    background: rgba(255,255,255,.72)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355637d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
        no-repeat right 13px center;
    -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px -12px rgba(16,43,97,.3);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sort-control select:hover { border-color: rgba(16,43,97,.32); }
.sort-control select:focus-visible { outline: none; border-color: var(--primary,#1769e0); box-shadow: 0 0 0 3px rgba(23,105,224,.18); }
@media (max-width: 640px) {
    .results-top-actions { width: 100%; justify-content: space-between; }
    .sort-control { flex: 1 1 auto; }
    .sort-control select { width: 100%; }
}

/* --- College card meta line: no accent rule (it crowds the small caps) ----- */
.college-card .eyebrow::before,
.badge-row .eyebrow::before { display: none; }
.college-card .eyebrow { display: block; }

/* --- Card action buttons sit in a neat row --------------------------------- */
.college-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
/* `flex: 1 1 auto` made a lone button grow to the full card width, so a single
   "Visit Website" rendered as a full-bleed gradient banner. Buttons now size to
   their content; min-width just keeps a comfortable tap target. */
.college-actions .btn { flex: 0 1 auto; width: auto; min-width: 120px; }

/* --- Standalone onboarding page (college-matches.php?view=profile) ----------
   A focused full-page flow: just the logo and an exit around the step wizard,
   no site nav or marketing hero. */
.onboarding-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(23,105,224,.10), transparent 60%),
    linear-gradient(180deg, #f4f8ff 0%, #f3fbef 100%);
}
.onboarding-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 4vw, 40px);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(23,105,224,.10);
}
.onboarding-logo { display: inline-flex; align-items: center; }
.onboarding-logo img { height: 42px; width: auto; display: block; }
.onboarding-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur, .2s) var(--ease, ease), color var(--dur, .2s) var(--ease, ease);
}
.onboarding-exit:hover { border-color: #c2d0e6; color: var(--ink); }
.onboarding-exit span { font-size: 16px; line-height: 1; }

.onboarding-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(20px, 4.5vh, 52px) clamp(16px, 4vw, 44px) 64px;
}
.onboarding-card-wrap { width: 100%; max-width: 1360px; }
/* This card is the whole page, so it earns real presence: a wide, generously
   padded sheet with a bigger heading and roomier fields than the inline form. */
.onboarding-main .profile-form {
  margin: 0;
  max-width: none;
  padding: clamp(30px, 3.6vw, 60px) clamp(28px, 3.8vw, 64px);
}
.onboarding-main .profile-form-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
}
.onboarding-main .profile-section { margin-bottom: 30px; }
.onboarding-main .profile-section > legend { font-size: 18px; }
.onboarding-main .section-hint { font-size: 14px; }
.onboarding-main .wizard-steps { margin: 10px 0 26px; }
/* Bigger, easier-to-hit fields on the dedicated screen. */
.onboarding-main .field-grid { gap: 20px 18px; }
.onboarding-main .field-grid > label { font-size: 15px; gap: 8px; }
.onboarding-main .profile-form input,
.onboarding-main .profile-form select,
.onboarding-main .profile-form textarea {
  font-size: 16px;
  padding: 13px 15px;
}
.onboarding-main .checkbox-item { min-height: 48px; font-size: 14px; }

@media (max-width: 620px) {
  .onboarding-logo img { height: 34px; }
  .onboarding-main { padding-left: 12px; padding-right: 12px; }
  .onboarding-main .profile-form { padding: 22px 18px; }
}

/* ============================================
   Compact college search results
   Smaller banner, tighter card, 3-across grid
   (scoped to .college-results so the homepage
   featured-college cards keep their size)
   ============================================ */
.college-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1240px) { .college-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .college-results { grid-template-columns: 1fr; } }

.college-results .college-image-wrap { height: 84px; min-height: 84px; }
.college-results .college-image-wrap img { height: 84px; }
.college-results .college-image-overlay { left: 12px; right: 12px; bottom: 8px; }
.college-results .college-image-overlay span { font-size: 9.5px; margin-bottom: 1px; }
.college-results .college-image-overlay strong { font-size: 13.5px; line-height: 1.25; }

.college-results .college-body { padding: 12px; gap: 10px; }
.college-results .college-body header h3 { font-size: 14.5px; line-height: 1.3; margin: 0; }
.college-results .college-body .eyebrow { font-size: 9.5px; }
.college-results .badge { font-size: 10px; padding: 3px 8px; }

.college-results .college-stat-row { gap: 8px; margin-bottom: 10px; }
.college-results .college-stat-row .stat { padding: 6px 4px; border-radius: 6px; }
.college-results .college-stat-row .stat span { font-size: 9px; letter-spacing: .03em; }
.college-results .college-stat-row .stat strong { font-size: 12.5px; }

.college-results .college-majors {
  font-size: 11.5px; line-height: 1.5; margin: 8px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.college-results .college-actions { gap: 8px; margin-top: 10px; }
.college-results .college-actions .btn {
  padding: 7px 10px; font-size: 12px;
}
.college-results .college-actions .btn .icon { width: 13px; height: 13px; }

/* ============================================
   Uniform, shorter search-result cards
   The banner already names the college, so the
   body drops the duplicate title, clamps every
   variable-height block to one row, and pins
   the action buttons to the bottom so all
   cards in a row finish at the same height.
   ============================================ */
.college-results .college-card { display: flex; flex-direction: column; }
.college-results .college-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; }

/* duplicate of the banner title — hide it, keep the type eyebrow + badges */
.college-results .college-body header { align-items: center; gap: 10px; }
.college-results .college-body header h3 { display: none; }
.college-results .college-body header .badge-row {
  justify-content: flex-end; max-width: none; max-height: 24px; overflow: hidden;
}

/* one-line clamps for every stretchy block */
.college-results .college-majors {
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.college-results .college-body > .badge-row { max-height: 26px; overflow: hidden; }

/* stats always 3 tidy columns */
.college-results .college-stat-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 0;
}
.college-results .college-stat-row .stat strong {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* banner name: tidy 2-line cap */
.college-results .college-image-overlay strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* buttons pinned to the card floor */
.college-results .college-actions { margin-top: auto; }

/* ============================================
   Logo color-sync with the sticky header
   The logo PNG is now transparent, so it takes
   the bar's own color in every state. Over the
   dark hero (header not yet scrolled) a soft
   white glow keeps the wordmark legible; on the
   white scrolled bar the glow is removed.
   ============================================ */
.brand img {
  transition: filter var(--dur) var(--ease);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.85)) drop-shadow(0 0 3px rgba(255,255,255,.9));
}
.site-header.is-scrolled .brand img { filter: none; }

/* ============================================
   WOW LAYER — premium motion & micro-interaction
   Every effect is disabled under
   prefers-reduced-motion and on touch devices
   where hover doesn't exist.
   ============================================ */
html { scroll-behavior: smooth; }

/* --- scroll progress bar --- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, #1769e0, #4fa81f);
  box-shadow: 0 0 14px rgba(23,105,224,.5);
  pointer-events: none;
}

/* --- animated nav underline --- */
.main-nav a { position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 3px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #1769e0, #4fa81f);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }

/* --- buttons: press, lift, light sweep --- */
.btn { transition: transform .16s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); }
.btn:active { transform: scale(.965); }
.btn.primary, .nav-cta {
  position: relative; overflow: hidden;
}
.btn.primary:hover, .nav-cta:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 12px 26px -8px rgba(23,105,224,.5);
  filter: saturate(1.12);
}
.btn.primary::after, .nav-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%);
}
.btn.primary:hover::after, .nav-cta:hover::after {
  transform: translateX(130%);
  transition: transform .65s ease;
}

/* (The pointer-tracking card tilt and cursor glow were removed. Cards keep
   their plain :hover lift + shadow rules above.) */

/* --- hero slider: slow cinematic zoom on the active slide --- */
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11) translateY(-1.6%); }
}
.hero-slider .slide { will-change: transform, opacity; }
.hero-slider .slide.active { animation: kenburns 9.5s ease-out forwards; }

/* --- count-up metrics get a settle pop --- */
@keyframes metricPop {
  0% { transform: scale(1); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.metric strong.counted { animation: metricPop .45s var(--ease); display: inline-block; }

/* --- everything off for reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #scrollProgress { display: none; }
  .hero-slider .slide.active { animation: none; }
  .btn.primary::after, .nav-cta::after { display: none; }
  .metric strong.counted { animation: none; }
}

/* ============================================
   Checkbox / radio sizing — global safety net
   The base `input, select, textarea` rule sets
   width:100% and min-height:44px, which is right
   for text fields but blows up checkboxes that
   lack their own sizing rule (the login page's
   "Remember me" box rendered ~44px tall next to
   a 16px one). Normalising every checkbox and
   radio here keeps them consistent site-wide and
   stops the bug recurring on new markup.
   ============================================ */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  border-radius: 4px;
  accent-color: var(--blue, #1769e0);
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
/* keep the label text vertically centred against the smaller box */
.form-help label { align-items: center; }

/* --- college detail: back-to-results link ------------------------------- */
.detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 18px; font-size: 14px; font-weight: 600;
  color: var(--blue, #1769e0); text-decoration: none;
}
.detail-back:hover { text-decoration: underline; }
.detail-back svg { flex: none; }

/* --- match cards (computed list) ---------------------------------------- */
.match-card .match-basis {
  display: inline-block; background: #eaf5ee; color: #1a7f37; font-size: 11.5px;
  font-weight: 700; padding: 3px 10px; border-radius: 999px; margin: 10px 0 8px;
}
.match-reasons { margin: 0 0 14px 18px; padding: 0; font-size: 13px; color: #4a5568; line-height: 1.7; }
.bucket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 34px; }
.bucket-head h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.bucket-count { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.bucket-blurb { color: var(--muted); font-size: 14px; margin: 4px 0 16px; }

/* --- matches gate: shown until onboarding is complete -------------------- */
.gate-card { max-width: 620px; margin: 40px auto; padding: 36px 40px; text-align: left; }
.gate-card h2 { font-size: 24px; margin: 10px 0 12px; }
.gate-card > p { color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.gate-progress { margin-bottom: 20px; }
.gate-progress-top { display: flex; justify-content: space-between; font-size: 13px;
  font-weight: 600; color: #33415f; margin-bottom: 6px; }
.gate-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.gate-steps li { display: flex; align-items: center; gap: 12px; font-weight: 600;
  font-size: 14.5px; color: #33415f; }
.gate-steps small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.gate-steps .step-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  border: 2px solid #cfd8e8; color: #fff; }
.gate-steps .step-done .step-mark { background: #1a7f37; border-color: #1a7f37; }
.gate-steps .step-todo { color: var(--muted); }

/* --- shortlist ("save this college") ------------------------------------ */
.save-toggle { display: inline-flex; align-items: center; gap: 6px; }
.save-toggle.is-saved { border-color: #e05a67; color: #d3384a; background: #fff5f6; }
.saved-strip { margin-bottom: 10px; }
.saved-strip .bucket-head h2 { font-size: 20px; color: #d3384a; }

/* --- dashboard (dashboard.html) ------------------------------------------
   The signed-in home. One next step, real numbers, no dead tiles.
   Everything is namespaced dash-/journey- so nothing here leaks into the
   marketing pages. Entrance: dashboard.js adds .dash-in to #dashRoot one
   frame after render; the pieces below rise in with a small stagger (and
   the global prefers-reduced-motion rule collapses all of it to instant). */
.dash-hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(circle at 12% 0%, rgba(25,184,206,.10), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(79,168,31,.08), transparent 26rem),
    linear-gradient(135deg, #eef7ff, #f8fff3);
  border-bottom: 1px solid var(--line);
}
.dash-hero h1 { margin: 10px 0 12px; font-size: clamp(28px, 4vw, 40px); }
.dash-hero .lead { max-width: 560px; margin-bottom: 22px; }
.dash-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* journey: account → profile → matches → shortlist */
.journey {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.journey-step {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.75); backdrop-filter: blur(3px);
}
/* a step is a flex row whether or not it links anywhere */
.journey-step,
.journey-step > a {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none; border-radius: var(--radius);
}
.journey-step > a { flex: 1; padding: 13px 16px; min-width: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.journey-step > a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.journey-step > .journey-mark { margin-left: 16px; }
.journey-step > .journey-mark + .journey-text { padding: 13px 16px 13px 0; }
.journey-mark {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  border: 2px solid #cfd8e8; color: var(--muted); background: #fff;
}
.journey-step.is-done .journey-mark { background: var(--green); border-color: var(--green); color: #fff; }
.journey-step.is-now { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.journey-step.is-now .journey-mark { border-color: var(--blue); color: var(--blue); }
.journey-text { min-width: 0; }
.journey-text strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.3; }
.journey-text small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.journey-step.is-todo { opacity: .72; }

/* stat tiles */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 6px; }
.dash-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.dash-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c6d6ef; }
.dash-stat-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.dash-stat-value {
  font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.1;
  min-height: 44px; display: flex; align-items: center;
  font-variant-numeric: tabular-nums;
}
.dash-stat-value em { font-style: normal; }
.dash-stat-sub { font-size: 13px; color: var(--muted); line-height: 1.45; }
.dash-locked { font-size: 16px; font-weight: 700; color: var(--muted); }
.dash-dots { color: var(--muted); }

/* Reach / Match / Safety mini counts inside a tile */
.dash-counts { display: flex; gap: 14px; font-size: 19px; }
.dash-counts span { display: inline-flex; align-items: center; gap: 6px; }
.dash-counts .bucket-dot { width: 9px; height: 9px; }

/* profile completion ring */
.dash-ring { position: relative; width: 64px; height: 64px; display: inline-block; }
.dash-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.dash-ring circle {
  fill: none; stroke: #e6edf7; stroke-width: 3.6;
  stroke-dasharray: 100; stroke-linecap: round;
}
.dash-ring .dash-ring-fill {
  stroke: var(--blue);
  stroke-dashoffset: calc(100 - var(--p, 0));
  animation: dash-ring-sweep 900ms var(--ease-out);
}
@keyframes dash-ring-sweep { from { stroke-dashoffset: 100; } }
.dash-ring em {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 16px; font-weight: 800;
}
.dash-ring em::after { content: "%"; font-size: 10px; font-weight: 700; margin-top: -6px; }

/* quick actions */
.dash-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.dash-action {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.dash-action:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c6d6ef; }
.dash-action-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #eef4fd; color: var(--blue);
}
.dash-action-icon svg { width: 20px; height: 20px; }
.dash-action-text { min-width: 0; }
.dash-action-text strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.dash-action-text small { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.dash-action-arrow {
  margin-left: auto; align-self: center; color: var(--muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dash-action:hover .dash-action-arrow { transform: translateX(4px); color: var(--blue); }

/* entrance: rise in with a small stagger once #dashRoot gets .dash-in */
#dashRoot .dash-hero-text,
#dashRoot .journey-step,
#dashRoot .dash-stat,
#dashRoot .dash-action {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#dashRoot.dash-in .dash-hero-text,
#dashRoot.dash-in .journey-step,
#dashRoot.dash-in .dash-stat,
#dashRoot.dash-in .dash-action { opacity: 1; transform: none; }
#dashRoot.dash-in .journey-step:nth-child(2) { transition-delay: 60ms; }
#dashRoot.dash-in .journey-step:nth-child(3) { transition-delay: 120ms; }
#dashRoot.dash-in .journey-step:nth-child(4) { transition-delay: 180ms; }
#dashRoot.dash-in .dash-stat:nth-child(2)   { transition-delay: 70ms; }
#dashRoot.dash-in .dash-stat:nth-child(3)   { transition-delay: 140ms; }
#dashRoot.dash-in .dash-stat:nth-child(4)   { transition-delay: 210ms; }
#dashRoot.dash-in .dash-action:nth-child(n+2) { transition-delay: 80ms; }
#dashRoot.dash-in .dash-action:nth-child(n+4) { transition-delay: 160ms; }
/* hover transforms must not fight the entrance transition once it's done */
#dashRoot.dash-in .dash-stat:hover,
#dashRoot.dash-in .dash-action:hover { transform: translateY(-3px); }

@media (max-width: 980px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .dash-hero { padding: 40px 0 30px; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-actions { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr 1fr; }
  .dash-stat-value { font-size: 24px; min-height: 38px; }
}

/* loaded in a hidden tab (or reduced motion): skip the entrance entirely */
#dashRoot.dash-no-anim .dash-hero-text,
#dashRoot.dash-no-anim .journey-step,
#dashRoot.dash-no-anim .dash-stat,
#dashRoot.dash-no-anim .dash-action {
  transition-duration: 0s; transition-delay: 0s; animation: none;
}
#dashRoot.dash-no-anim .dash-ring .dash-ring-fill { animation: none; }

/* --- account settings (account.html) ------------------------------------ */
.account-wrap { max-width: 640px; }
.account-wrap h1 { margin: 10px 0 6px; }
.account-email { color: var(--muted); margin-bottom: 26px; }
.account-card { padding: 26px 30px; margin-bottom: 18px; }
.account-card h2 { font-size: 20px; margin: 0 0 4px; }
.account-card > p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.form-feedback { font-size: 14px; font-weight: 600; margin: 10px 0 0; }
.form-feedback.is-ok { color: var(--success); }
.form-feedback.is-err { color: var(--danger); }
.account-back { margin-top: 22px; }
.account-back a { color: var(--blue); font-weight: 600; }

/* --- dashboard gradient hover ---------------------------------------------
   Hovering any dashboard card lights up an animated brand-gradient ring
   (blue → cyan → green, slowly flowing). Drawn by a masked pseudo-element so
   the card's content and layout are untouched; the static grey border hides
   while the ring is visible. The global prefers-reduced-motion rule already
   collapses the flow animation to a static ring. */
.dash-stat, .dash-action, .journey-step { position: relative; }
.dash-stat::after, .dash-action::after, .journey-step::after {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius-lg);
  padding: 2px; pointer-events: none;
  background: linear-gradient(120deg,
    var(--blue), var(--cyan), var(--green), var(--cyan), var(--blue));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity 200ms var(--ease);
  animation: dash-gradient-flow 2.8s linear infinite;
  animation-play-state: paused;
}
.journey-step::after { border-radius: var(--radius); }
.dash-stat:hover, .dash-action:hover { border-color: transparent; }
.journey-step:has(> a):hover { border-color: transparent; }
.dash-stat:hover::after, .dash-action:hover::after,
.dash-stat:focus-visible::after, .dash-action:focus-visible::after,
.journey-step:has(> a):hover::after {
  opacity: 1; animation-play-state: running;
}
@keyframes dash-gradient-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* hero buttons: the brand gradient itself glides on hover */
.dash-hero .btn.primary {
  background-image: linear-gradient(120deg, var(--blue), var(--green), var(--cyan), var(--blue));
  background-size: 280% auto;
  background-position: 0% 50%;
  transition: background-position 700ms var(--ease-out), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.dash-hero .btn.primary:hover { background-position: 90% 50%; }

/* --- signed-in-only nav items --------------------------------------------
   The Dashboard link is static HTML in every page's nav (never injected).
   An inline <head> script sets html.signed-in before first paint, so the
   link is visible exactly when a session exists — with no flash and no
   dependence on any external script loading or cache state. */
html:not(.signed-in) .main-nav .nav-dashboard { display: none; }

/* active filter chips above the results */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.active-filters:empty { margin: 0; }
.active-filters-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid #c9d9f2; border-radius: 999px;
  background: #eef4fd; color: var(--navy); font: 600 13px/1 var(--font-sans);
  cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-chip span[aria-hidden] { font-size: 15px; line-height: 1; color: var(--blue); }
.filter-chip:hover { background: #e0ebfb; border-color: var(--blue); }
.filter-chip-clear { background: transparent; border-color: var(--line); color: var(--muted); text-decoration: none; }

/* mobile: the 10-field filter sidebar collapses behind a counted toggle */
.filters-toggle { display: none; }
@media (max-width: 980px) {
  .filters-toggle { display: block; width: 100%; margin-bottom: 12px; }
  .search-layout .pro-filters { display: none; }
  body.filters-open .search-layout .pro-filters { display: block; }
}

/* --- crafted homepage hero -------------------------------------------------
   Replaces the rotating stock-photo slider: the headline sits on a deep brand
   gradient with a faint dot grid, and the right column shows the product — a
   student's live Reach/Match/Safety plan — instead of a photograph. */
.hero.hero-crafted {
  min-height: 0;
  background:
    radial-gradient(50rem 32rem at 90% -25%, rgba(25,184,206,.30), transparent 60%),
    radial-gradient(44rem 28rem at -14% 135%, rgba(79,168,31,.24), transparent 60%),
    linear-gradient(135deg, #081736, #10306b 58%, #0c3350);
  overflow: hidden;
}
.hero.hero-crafted::after { content: none; }        /* photo-darkening overlay */
.hero.hero-crafted::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 30%, #000 85%);
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 85%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero-crafted .hero-copy { max-width: 620px; }
.hero-crafted .hero-copy .eyebrow { color: #9fe6ff; }
.hero-crafted h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; margin: 12px 0 16px; }
.hero-crafted .lead { color: rgba(255,255,255,.86); max-width: 54ch; }

.hero-card {
  background: rgba(255,255,255,.97);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: 0 30px 70px rgba(3,10,26,.45);
  transform: rotate(1.2deg);
  transition: transform 400ms var(--ease-out);
}
.hero-card:hover { transform: rotate(0deg) translateY(-4px); }
.hero-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero-fit {
  font-size: 12px; font-weight: 700; color: var(--green-dark);
  background: var(--good-soft, #e8f3e9); background: #e8f3e9;
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.hero-fit strong { font-size: 13px; }
.hero-card h3 { margin: 10px 0 12px; font-size: 18px; }
.hero-band {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px; font-size: 14px;
}
.hero-band span { color: var(--muted); }
.hero-band strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.hero-next {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius);
  background: #eef4fd; color: var(--navy); font-size: 13px; font-weight: 600;
}
.hero-crafted .hero-metrics { margin-top: clamp(34px, 5vw, 52px); max-width: none; }
.hero-crafted .metric {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 14px 16px;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-proof { max-width: 460px; }
  .hero-card { transform: none; }
}

/* Dimming a whole card via opacity dropped its subtext below WCAG AA.
   Mute todo steps with explicit, still-passing colors instead. */
.journey-step.is-todo { opacity: 1; background: rgba(255,255,255,.55); }
.journey-step.is-todo .journey-text strong { color: var(--muted); }
.journey-step.is-todo .journey-mark { border-color: #dbe3f0; }

/* Reach/Match/Safety counts must wrap on narrow phones, not overflow. */
@media (max-width: 620px) {
  .dash-stats .dash-stat:nth-child(2) { grid-column: 1 / -1; }
  .dash-counts { flex-wrap: wrap; gap: 10px 14px; font-size: 17px; }
}

/* Signed-in visitors briefly saw the signed-out nav (static "Login" /
   "Create Account") until auth.js rewrote it. The pre-paint html.signed-in
   class hides both until the rewrite marks them (data-auth-link / title). */
html.signed-in .main-nav a[href="login.html"]:not([data-auth-link]) { visibility: hidden; }
html.signed-in .main-nav .nav-cta:not([title]) { visibility: hidden; }

/* --- signup OTP verification step ---------------------------------------- */
.otp-demo-note {
  border: 1px solid #f0d48a; background: #fdf6e0; color: #6b5416;
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 13.5px; line-height: 1.6; margin: 14px 0 18px;
}
.otp-demo-note code {
  background: #fff; border: 1px solid #eadaa8; border-radius: 6px;
  padding: 2px 8px; font: 700 15px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 2px;
}
.otp-input {
  font-variant-numeric: tabular-nums; letter-spacing: 6px; font-weight: 700;
}
#otpStep h2 { margin-bottom: 6px; }
#otpStep > p { color: var(--muted); }
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font: 600 14px/1.4 var(--font-sans);
}
.btn-link:hover { text-decoration: underline; }
.btn-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* ============================================
   WHY ADMITREE — comparison rows (home page)
   Three columns on desktop (topic | typical | AdmiTree); the two cells stack
   under the topic on narrow screens so the pairing stays readable.
   ============================================ */
.compare-section .section-heading { margin-bottom: 30px; }
.cmp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmp-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cmp-topic {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.01em;
}
.cmp-topic i { color: var(--blue); font-size: 15px; flex: 0 0 auto; }
.cmp-cell { display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius); padding: 14px 16px; }
.cmp-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.cmp-cell p { margin: 0; font-size: 14px; line-height: 1.6; }
/* Muted, receding treatment for the status quo. */
.cmp-them { background: var(--soft); border: 1px solid var(--line); }
.cmp-them .cmp-label { color: var(--muted); }
.cmp-them p { color: var(--muted); }
/* Brand tint for the AdmiTree side so the eye lands there. */
.cmp-us { background: linear-gradient(150deg, rgba(23,105,224,.07), rgba(79,168,31,.07)); border: 1px solid rgba(23,105,224,.22); }
.cmp-us .cmp-label { color: var(--blue); }
.cmp-us p { color: var(--ink); }
.cmp-us em { font-style: italic; }
.cmp-foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; padding: 15px 18px;
  background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-lg);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.cmp-foot i { color: var(--blue); margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 900px) {
  .cmp-row { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .cmp-topic { font-size: 16px; }
}

/* ============================================
   DU CUT-OFF PAGES (public, indexable)
   ============================================ */
.du-seo h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink); }
.du-seo-lede { max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; }
.du-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 14px; color: var(--muted); }
.du-crumbs a { color: var(--blue); text-decoration: none; font-weight: 600; }
.du-crumbs a:hover { text-decoration: underline; }
.du-back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .18s ease, color .18s ease; }
.du-back-link:hover { border-color: var(--blue); color: var(--blue); }
.du-back-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.du-courselist li { color: var(--ink); font-weight: 600; }
.du-req { margin: 0 0 20px; font-size: 14px; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 15px; }
.du-h2 { font-size: 22px; letter-spacing: -.01em; margin: 34px 0 6px; color: var(--ink); }
.du-sub { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.du-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.du-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 26px; }
.du-stats div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 17px; }
.du-stats span { display: block; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.du-stats small { font-size: 12.5px; color: var(--muted); }

/* Wide tables scroll inside their own box rather than the page. */
.du-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.du-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.du-table caption { text-align: left; padding: 14px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.du-table th, .du-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.du-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--soft); }
.du-table tbody th { font-weight: 700; color: var(--ink); }
.du-table tbody th a { color: var(--blue); text-decoration: none; }
.du-table tbody th a:hover { text-decoration: underline; }
.du-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.du-table tbody tr:last-child th, .du-table tbody tr:last-child td { border-bottom: 0; }

.du-collegegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.du-collegecard { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.du-collegecard:hover { border-color: var(--blue); transform: translateY(-2px); }
.du-collegecard strong { color: var(--ink); font-size: 15px; letter-spacing: -.01em; }
.du-collegecard span { color: var(--muted); font-size: 12.5px; }

.du-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.du-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.du-list a { color: var(--blue); text-decoration: none; }
.du-list a:hover { text-decoration: underline; }
.du-list span { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.du-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; padding: 22px 24px; border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(23,105,224,.08), rgba(79,168,31,.08)); border: 1px solid rgba(23,105,224,.2); }
.du-cta h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.du-cta p { margin: 0; font-size: 14px; color: var(--muted); max-width: 560px; }

/* Error pages (404 / 403 / 500) */
.err-wrap { max-width: 620px; margin: 0 auto; text-align: center; padding: 30px 0 10px; }
.err-code { display: block; font-size: clamp(56px, 12vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
            color: var(--ink); margin-bottom: 6px; }
.err-wrap h1 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.err-wrap > p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.err-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.err-links { font-size: 13.5px; color: var(--muted); margin: 0; }
.err-links a { color: var(--blue); text-decoration: none; }
.err-links a:hover { text-decoration: underline; }

/* ---- "Why AdmiTree": proof band + exclusive feature cards ---- */
.compare-section .section-heading h2 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.035em; line-height: 1.05; }

/* Big numbers, stated once, with the qualifier underneath. */
.why-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
             margin: 0 0 26px; background: var(--line); border: 1px solid var(--line);
             border-radius: var(--radius-lg); overflow: hidden; }
.why-stat { display: flex; flex-direction: column; gap: 2px; padding: 20px 20px 18px; background: var(--white); }
.why-stat b { font-size: clamp(30px, 4.4vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
              color: var(--ink); font-variant-numeric: tabular-nums; }
.why-stat span { font-size: 14px; font-weight: 700; color: var(--ink); }
.why-stat em { display: block; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.why-stat-free b { color: var(--leaf-text, #2f6e0e); }

.why-kicker { margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

.why-features { list-style: none; margin: 0 0 22px; padding: 0; display: grid;
                grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.why-features li { display: flex; flex-direction: column; gap: 7px; padding: 20px;
                   background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
                   border-top: 4px solid var(--blue); }
.why-tag { align-self: flex-start; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
           letter-spacing: .09em; color: var(--blue); background: rgba(23,105,224,.1);
           border-radius: 999px; padding: 4px 10px; }
.why-tag-free { color: var(--green-dark); background: rgba(79,168,31,.13); }
.why-features li:last-child { border-top-color: var(--green); }
.why-features h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.025em;
                   color: var(--ink); text-wrap: balance; line-height: 1.2; }
.why-features p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.why-features strong { color: var(--ink); font-weight: 700; }

.cmp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmp-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cmp-topic {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.01em;
}
.cmp-topic i { color: var(--blue); font-size: 15px; flex: 0 0 auto; }
.cmp-cell { display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius); padding: 14px 16px; }
.cmp-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.cmp-cell p { margin: 0; font-size: 14px; line-height: 1.6; }
/* Muted, receding treatment for the status quo. */
.cmp-them { background: var(--soft); border: 1px solid var(--line); }
.cmp-them .cmp-label { color: var(--muted); }
.cmp-them p { color: var(--muted); }
/* Brand tint for the AdmiTree side so the eye lands there. */
.cmp-us { background: linear-gradient(150deg, rgba(23,105,224,.07), rgba(79,168,31,.07)); border: 1px solid rgba(23,105,224,.22); }
.cmp-us .cmp-label { color: var(--blue); }
.cmp-us p { color: var(--ink); }
.cmp-us em { font-style: italic; }
.cmp-foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; padding: 15px 18px;
  background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-lg);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.cmp-foot i { color: var(--blue); margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 900px) {
  .cmp-row { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .cmp-topic { font-size: 16px; }
}

/* ============================================
   DU CUT-OFF PAGES (public, indexable)
   ============================================ */
.du-seo h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink); }
.du-seo-lede { max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; }
.du-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 14px; color: var(--muted); }
.du-crumbs a { color: var(--blue); text-decoration: none; font-weight: 600; }
.du-crumbs a:hover { text-decoration: underline; }
.du-req { margin: 0 0 20px; font-size: 14px; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 15px; }
.du-h2 { font-size: 22px; letter-spacing: -.01em; margin: 34px 0 6px; color: var(--ink); }
.du-sub { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.du-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.du-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 26px; }
.du-stats div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 17px; }
.du-stats span { display: block; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.du-stats small { font-size: 12.5px; color: var(--muted); }

/* Wide tables scroll inside their own box rather than the page. */
.du-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.du-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.du-table caption { text-align: left; padding: 14px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.du-table th, .du-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.du-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--soft); }
.du-table tbody th { font-weight: 700; color: var(--ink); }
.du-table tbody th a { color: var(--blue); text-decoration: none; }
.du-table tbody th a:hover { text-decoration: underline; }
.du-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.du-table tbody tr:last-child th, .du-table tbody tr:last-child td { border-bottom: 0; }

.du-collegegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.du-collegecard { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.du-collegecard:hover { border-color: var(--blue); transform: translateY(-2px); }
.du-collegecard strong { color: var(--ink); font-size: 15px; letter-spacing: -.01em; }
.du-collegecard span { color: var(--muted); font-size: 12.5px; }

.du-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.du-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.du-list a { color: var(--blue); text-decoration: none; }
.du-list a:hover { text-decoration: underline; }
.du-list span { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.du-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; padding: 22px 24px; border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(23,105,224,.08), rgba(79,168,31,.08)); border: 1px solid rgba(23,105,224,.2); }
.du-cta h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.du-cta p { margin: 0; font-size: 14px; color: var(--muted); max-width: 560px; }

/* Error pages (404 / 403 / 500) */
.err-wrap { max-width: 620px; margin: 0 auto; text-align: center; padding: 30px 0 10px; }
.err-code { display: block; font-size: clamp(56px, 12vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.04em;
            color: var(--ink); margin-bottom: 6px; }
.err-wrap h1 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.err-wrap > p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.err-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.err-links { font-size: 13.5px; color: var(--muted); margin: 0; }
.err-links a { color: var(--blue); text-decoration: none; }
.err-links a:hover { text-decoration: underline; }

/* Three headline strengths at the top of the "why AdmiTree" comparison */

/* ---- Why AdmiTree: compact glance table (replaces the long prose comparison) ---- */
.why-heading p { font-size: 16px; }
.why-stat-lead em { color: var(--blue); font-weight: 700; }
.why-features p { font-size: 15px; line-height: 1.5; color: var(--ink); }
.cmp-glance { border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); background: var(--white); overflow: hidden; }
.cmp-g-head, .cmp-g-row { display: grid; grid-template-columns: 200px 1fr 1.25fr; gap: 16px; align-items: center; padding: 13px 20px; }
.cmp-g-head { background: var(--soft); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cmp-g-head .cmp-g-us { color: var(--blue); }
.cmp-g-row { border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.cmp-g-row .cmp-g-us { color: var(--ink); font-weight: 600; }
.cmp-g-topic { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.cmp-g-topic i { color: var(--blue); font-size: 14px; }
@media (max-width: 760px) {
  .cmp-g-head { display: none; }
  .cmp-g-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .cmp-g-row span[role="cell"]:not(.cmp-g-us)::before { content: "Usual: "; font-weight: 700; color: var(--muted); }
  .cmp-g-row .cmp-g-us::before { content: "AdmiTree: "; color: var(--blue); }
}
/* Why AdmiTree feature cards: compact */
.why-features li { padding: 16px 18px; gap: 6px; }
.why-features h3 { font-size: 17px; }
.why-features p { font-size: 14px; line-height: 1.45; }
.why-features { margin-bottom: 18px; }