:root {
  --navy: #0F2942;
  --blue: #1D5DBF;
  --blue-dark: #164a99;
  --teal: #12B8A6;
  --coral: #FF6B57;
  --amber: #FFB020;
  --ink: #101828;
  --gray-900: #1D2939;
  --gray-700: #344054;
  --gray-500: #667085;
  --gray-300: #D0D5DD;
  --gray-200: #E4E7EC;
  --gray-100: #F2F4F7;
  --gray-50: #F9FAFB;
  --white: #FFFFFF;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 2px 8px rgba(16,24,40,0.05);
  --shadow-lg: 0 8px 24px rgba(16,24,40,0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--gray-50);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 880px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; color: var(--navy); line-height: 1.25; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
p { margin: 0 0 12px; color: var(--gray-700); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; color: var(--teal); margin-bottom: 8px; display: inline-block; }
.section { padding: 56px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.muted { color: var(--gray-500); }
.text-center { text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; }
.btn-primary { background: var(--coral); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #ff543d; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: var(--white); color: var(--navy); border: 1px solid var(--gray-300); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-outline-light { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.55); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--navy); }
.logo .logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo .accent { color: var(--coral); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--gray-700); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); border-color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--gray-300); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.compare-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--gray-100); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--navy); }
.compare-pill .count { background: var(--coral); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

@media (max-width: 860px) {
  .nav-links { position: fixed; top: 65px; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: flex-start; padding: 16px 24px; gap: 14px; border-bottom: 1px solid var(--gray-200); transform: translateY(-130%); transition: transform .2s ease; box-shadow: var(--shadow-md); }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: inline-flex; }
}

/* Injected by initHeader() so the auth buttons survive being pulled out of the
   header bar on narrow screens. Hidden until the phone breakpoint. */
.nav-links .mobile-auth { display: none; }

@media (max-width: 640px) {
  /* At phone widths the logo, compare pill, both auth buttons and the burger
     no longer fit on one row and force the whole page to scroll sideways.
     Drop the pill (Compare is still in the menu) and relocate the buttons. */
  .header-inner { gap: 12px; }
  .header-actions { gap: 8px; }
  .header-actions > .compare-pill,
  .header-actions > .btn { display: none; }
  .nav-links .mobile-auth {
    display: flex; gap: 10px; width: 100%;
    margin-top: 4px; padding-top: 14px;
    border-top: 1px solid var(--gray-200);
  }
  .nav-links .mobile-auth .btn { flex: 1; justify-content: center; }
}

/* Hero */
.hero { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%); color: var(--white); padding: 68px 0 76px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { color: var(--white); font-size: 40px; font-weight: 700; margin-bottom: 14px; }
.hero p.lead { color: rgba(255,255,255,0.82); font-size: 16px; max-width: 500px; }
.hero-stats { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.hero-stats div strong { font-size: 20px; font-weight: 600; display: block; color: var(--white); }
.hero-stats div span { font-size: 12.5px; color: rgba(255,255,255,0.65); }
.hero-art { display: flex; justify-content: center; }

.search-card { background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-lg); margin-top: 28px; }
.search-row { display: flex; gap: 10px; flex-wrap: wrap; }
.search-row input, .search-row select { flex: 1; min-width: 160px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--ink); background: var(--gray-50); }
.search-row input:focus, .search-row select:focus { outline: 2px solid var(--blue); background: var(--white); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
}

/* The hero illustration carries width="360". Below ~410px that fixed width
   becomes the grid track's minimum, pushing the whole hero wider than the
   viewport. Let it scale, and stop grid children from forcing a floor. */
.hero-art svg { max-width: 100%; height: auto; }
.hero-grid > * { min-width: 0; }

/* Cards */
.card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.card:hover { box-shadow: var(--shadow-md); }

.stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.stream-card { padding: 22px 16px; text-align: center; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); cursor: pointer; }
.stream-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.stream-icon { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--blue); font-size: 20px; font-weight: 700; }

.college-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.college-card { overflow: hidden; display: flex; flex-direction: column; }
.college-thumb { height: 120px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; text-align: center; padding: 10px; }
.college-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); letter-spacing: .01em; }
.badge-blue { background: var(--gray-100); color: var(--gray-700); }
.badge-teal { background: var(--gray-100); color: var(--gray-700); }
.badge-coral { background: var(--gray-100); color: var(--gray-700); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--navy); font-size: 13px; }
.rating .star { color: var(--amber); }
.college-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--gray-500); }
.college-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--gray-100); gap: 10px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-700); cursor: pointer; }

/* Filters sidebar */
.layout-with-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: flex-start; }
.filter-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; position: sticky; top: 88px; }
.filter-group { margin-bottom: 20px; }
.filter-group h4 { margin-bottom: 10px; font-size: 14px; }
.filter-option { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-700); padding: 5px 0; cursor: pointer; }
.filter-option input { accent-color: var(--blue); }
.filter-more-toggle { background: none; border: none; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 0; }
@media (max-width: 900px) {
  .layout-with-sidebar { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
}

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); overflow-x: auto; margin-bottom: 24px; }
.tab-btn { padding: 12px 18px; font-weight: 600; font-size: 14px; color: var(--gray-500); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tab-btn.active { color: var(--blue); border-color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Tables */
table.data-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; }
table.data-table th, table.data-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
table.data-table th { background: var(--gray-100); color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Forms */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--gray-300); font-size: 14px; font-family: inherit; background: var(--white); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.form-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 24px; box-shadow: var(--shadow-sm); }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--teal), var(--blue)); color: #fff; border-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); }

/* Footer */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.75); padding: 48px 0 24px; margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 24px; margin-bottom: 32px; }
.footer-grid h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.footer-grid a { display: block; font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 9px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* Toast / modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,0.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 16px; padding: 28px; max-width: 400px; width: 100%; position: relative; box-shadow: var(--shadow-lg); }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--gray-500); }
.tab-switch { display: flex; gap: 8px; background: var(--gray-100); padding: 4px; border-radius: 999px; margin-bottom: 20px; }
.tab-switch button { flex: 1; border: none; background: none; padding: 8px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--gray-500); }
.tab-switch button.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.toast { position: fixed; bottom: 24px; right: 24px; background: var(--navy); color: #fff; padding: 14px 20px; border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 200; font-size: 14px; font-weight: 600; transform: translateY(150%); transition: transform .25s ease; }
.toast.show { transform: translateY(0); }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
.breadcrumb a { color: var(--blue); }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.pagination button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--gray-300); background: #fff; cursor: pointer; font-weight: 600; color: var(--gray-700); }
.pagination button.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Accordion (FAQ) */
.accordion-item { border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.accordion-head { padding: 16px 18px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion-body { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height .2s ease, padding .2s ease; }
.accordion-item.open .accordion-body { padding: 0 18px 16px; max-height: 300px; }
.accordion-item.open .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* Utility */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stat-tile { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; text-align: center; }
.stat-tile strong { display: block; font-size: 26px; color: var(--navy); }
.stat-tile span { font-size: 13px; color: var(--gray-500); }

/* Counselling status badges — Official vs Awaited must read differently at a
   glance, so these two override the flat grey .badge default. */
.badge-official { background: #E3F5F1; color: #0B7A6B; }
.badge-awaited { background: #FFF3DC; color: #8A5A00; }

/* Live counselling status strip */
.status-strip { display: flex; align-items: flex-start; gap: 14px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.status-strip .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--teal); margin-top: 7px; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(18,184,166,0.25); }
.status-strip .dot.idle { background: var(--gray-500); box-shadow: 0 0 0 4px rgba(102,112,133,0.2); }
.status-strip h4 { color: #fff; margin: 0 0 4px; font-size: 17px; }
.status-strip p { color: rgba(255,255,255,0.75); margin: 0; font-size: 13px; }

/* Legal pages (privacy / terms / disclaimer) */
.legal-body { max-width: 780px; }
.legal-body h2 { font-size: 20px; margin: 28px 0 8px; }
.legal-body p, .legal-body li { font-size: 15px; color: var(--gray-700); line-height: 1.65; }
.legal-body ul { padding-left: 20px; margin: 0 0 12px; }
.legal-body li { margin-bottom: 6px; }