/* Rank Predictor — self-contained styles for /rank-predictor.html.
   Mirrors the landing design tokens (orange/cream/ink) so the predictor
   feels native to the brand without depending on landing/styles.css. */

:root {
  --primary: #fc7f02;
  --primary-soft: #FFE9D2;
  --ink: #1E293B;
  --ink-soft: #475569;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --cream: #FFFDF5;
  --cream-2: #FAF4E2;
  --good: #34D399;
  --good-soft: #D1FAE5;
  --warn: #FBBF24;
  --warn-soft: #FEF3C7;
  --bad: #F472B6;
  --bad-soft: #FCE7F3;
  --adv: #fc7f02;
  --adv-soft: #FFE9D2;
  --mains: #3B82F6;
  --mains-soft: #DBEAFE;
  /* Subject palette — copied 1:1 from wireframes/Claude Design/Results
     (standalone).html. Used by .pill-phy / .pill-che / .pill-mat in the
     Pursuit Premium analysis lists so the subject tags pop the same
     way as the wireframe. */
  --phy: #3B82F6;       /* blue-500 */
  --phy-soft: #DBEAFE;  /* blue-100 */
  --phy-text: #1D4ED8;  /* blue-700 */
  --che: #10B981;       /* emerald-500 */
  --che-soft: #D1FAE5;  /* emerald-100 */
  --che-text: #047857;  /* emerald-700 */
  --mat: #F59E0B;       /* amber-500 */
  --mat-soft: #FEF3C7;  /* amber-100 */
  --mat-text: #B45309;  /* amber-700 */
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 3px 3px 0 0 var(--ink);
  --shadow-sm: 2px 2px 0 0 var(--ink);
  --transition: 140ms ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

.rp-body {
  min-height: 100vh;
  background-image:
    radial-gradient(circle, rgba(30, 41, 59, 0.06) 1.1px, transparent 1.3px),
    radial-gradient(circle at 12% -10%, rgba(252, 127, 2, 0.08), transparent 42%),
    radial-gradient(circle at 92% 4%, rgba(59, 130, 246, 0.06), transparent 40%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
  background-color: var(--cream);
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Header ─── */

.rp-header {
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 30;
}
.rp-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rp-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
}
.rp-logo .name { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.rp-logo .sub { font-weight: 800; font-size: 12px; color: var(--primary); }
/* Mirror the landing page's `.btn.btn-sm` look — orange pill so the CTA
   feels native to the brand. landing/styles.css and rank-predictor.css are
   separate files (the predictor is self-contained); the styling is
   duplicated rather than imported to keep both pages independently
   deployable. */
.rp-header .login-link {
  /* Now renders as a <button> so the in-page Waitlist modal opens
     instead of a cross-page nav to index.html#waitlist. The explicit
     properties below override every native button default. */
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}
.rp-header .login-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--ink);
}
.rp-header .login-link:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

/* Group of header-right actions (used on results page where we show both
   "Try another" and the signed-in chip). */
.rp-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Signed-in chip — compact "Signed in · +91 •••• 2210 [Sign out]" pill in
   the header, shown when Firebase Phone Auth has a current user. Uses a
   subtle green dot to convey "active session" without dominating the nav. */
.signed-in-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--slate-300);
  background: white;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
}
.signed-in-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px var(--good-soft);
  flex-shrink: 0;
}
.signed-in-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  font-size: 12px;
}
.signed-in-label {
  font-weight: 800;
  color: var(--slate-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}
.signed-in-name {
  font-weight: 800;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.02em;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signed-in-signout {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: white;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.signed-in-signout:hover { opacity: 0.85; transform: translate(-1px, -1px); }
.signed-in-signout:active { transform: translate(1px, 1px); }

/* Narrow viewports: hide the "Signed in" eyebrow + tighten everything to
   keep just the name + Sign-out visible. The first name alone usually
   fits 320px+ headers comfortably. */
@media (max-width: 520px) {
  .signed-in-label { display: none; }
  .signed-in-name { max-width: 12ch; font-size: 12px; }
  .rp-header-actions { gap: 8px; }
  .signed-in-chip { padding: 6px 6px 6px 10px; gap: 8px; }
}

/* Mobile: the results page header has 3-4 items (logo + "← Try another"
   + "Join Waitlist" + SignedInChip) which overflows on narrow screens.
   Hide the secondary "Try another" text on tight viewports — the logo
   itself links back home, and the predictor is one tap away via the
   footer. Tighten the rest so they fit on a 360px screen. */
@media (max-width: 520px) {
  .rp-header-inner {
    padding: 12px 14px;
    gap: 8px;
    /* Allow wrapping as a fallback if the items still don't fit, so
       nothing forces the page wider than the viewport. */
    flex-wrap: wrap;
  }
  .rp-header .nav-back-link { display: none; }
  .rp-header .login-link { padding: 8px 14px; font-size: 12px; }
  .signed-in-signout { padding: 4px 9px; font-size: 12px; }
}

/* Lock the page width on mobile so a wide header (or any wide child)
   can never push the body past the viewport. Belt-and-braces — the
   wrap above is the primary fix, this stops any future overflow from
   triggering horizontal scroll on the whole page. */
html, body { overflow-x: hidden; }

/* Back-link variant (used on results page for "← Try another"). Subtler than
   the CTA — text-only with hover underline. */
.rp-header .nav-back-link {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.rp-header .nav-back-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Main ─── */

.rp-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 720px) {
  .rp-main { padding: 56px 28px 96px; gap: 40px; }
}

/* ─── Typography ─── */

.eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 720px) { .h1 { font-size: 44px; } }
.h1-stack { display: flex; flex-direction: column; gap: 4px; }
.h1-stack .h1-accent { color: var(--primary); }
.h1-stack .h1-main { color: var(--ink); }
.lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
@media (min-width: 720px) { .lede { font-size: 17px; } }

/* ─── Pill button ─── */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: white;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-pill:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--ink); }
.btn-pill:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink); }
.btn-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-pill-primary { background: var(--primary); color: white; }

/* ─── Card ─── */

.card {
  background: white;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}
@media (min-width: 720px) { .card { padding: 28px; } }

.error-banner {
  border-color: var(--bad);
  background: var(--bad-soft);
  font-weight: 600;
}

/* ─── Hero ─── */

.rp-hero-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}

.hero-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* "About you" panel header — icon + eyebrow + title */
.hero-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--ink);
  background: var(--slate-100);
  color: var(--slate-600);
  box-shadow: 2px 2px 0 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.panel-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.panel-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
}

.hero-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .hero-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-field-wide { grid-column: 1 / -1; }
}

.hero-field { display: flex; flex-direction: column; gap: 6px; }
.hero-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.hero-label-meta {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-400);
  font-size: 12px;
  margin-left: 6px;
}

/* Custom dropdown — built as a button + popover so we control the menu's
   look. Native <select> open-state chrome is OS-controlled and can't be
   styled, so we avoid it entirely. */
.custom-select { position: relative; width: 100%; }

.custom-select-trigger {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  background: white;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.custom-select-trigger:hover {
  box-shadow: 2px 2px 0 0 var(--ink);
  transform: translate(-1px, -1px);
}
.custom-select-trigger:focus-visible {
  outline: none;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.custom-select-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.custom-select-caret {
  font-size: 14px;
  color: var(--slate-500);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.custom-select-trigger[aria-expanded="true"] .custom-select-caret {
  transform: rotate(180deg);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 0 var(--ink);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
}
.custom-select-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}
.custom-select-item:hover { background: var(--cream-2); color: var(--ink); }
.custom-select-item.sel { background: var(--primary-soft); color: var(--primary); }
.custom-select-item.sel:hover { background: var(--primary-soft); }

.hero-gender-cluster {
  display: flex;
  gap: 8px;
}
.hero-gender-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--slate-300);
  background: white;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
}
.hero-gender-btn.sel {
  border-color: var(--ink);
  background: var(--primary-soft);
  color: var(--ink);
}
.radio-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--slate-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: white;
  transition: border-color var(--transition);
}
.hero-gender-btn.sel .radio-circle { border-color: var(--ink); }
.radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.hero-form-divider {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--slate-300) 0 6px, transparent 6px 12px);
}

.hero-exam-paths {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
@media (min-width: 720px) {
  .hero-exam-paths { flex-direction: row; }
}

.exam-path {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream-2);
}
.exam-path-locked { position: relative; }

.exam-path-head { display: flex; flex-direction: column; gap: 4px; }
.exam-badge {
  align-self: flex-start;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}
.exam-badge-adv { color: var(--adv); background: var(--adv-soft); border-color: var(--adv); }
.exam-badge-recommended { color: white; background: var(--primary); border-color: var(--primary); }
.exam-path-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  margin-top: 4px;
}
.exam-path-sub {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 600;
}

/* OR divider between the two paths */
.path-or {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  flex-shrink: 0;
}
.path-or span {
  position: relative;
  z-index: 1;
  background: white;
  padding: 4px 14px;
  border: 1.5px solid var(--slate-300);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.path-or::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 2px;
  background: var(--slate-200);
  z-index: 0;
}
@media (min-width: 720px) {
  .path-or { padding: 0 14px; }
  .path-or::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }
}

/* Locked upload dropzone (response sheets release 21st May) */
.upload-dropzone-wrap {
  position: relative;
  flex: 1;
  min-height: 120px;
}
.upload-dropzone-locked {
  background: white;
  border: 2px dashed var(--slate-300);
  border-radius: var(--radius);
  padding: 22px 12px;
  text-align: center;
  filter: blur(2.5px);
  pointer-events: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-icon {
  color: var(--primary);
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}
.upload-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.upload-meta {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}
.upload-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 245, 0.65);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}
.upload-lock-overlay .lock-icon { color: var(--primary); }
.lock-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.4;
}
.lock-text b { color: var(--ink); }
.lock-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.notify-link {
  margin-top: auto;
  align-self: center;
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.notify-link:hover { color: var(--ink); }

.hero-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  background: white;
}
.hero-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  color: var(--ink);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.hero-input::placeholder { color: var(--slate-400); font-weight: 600; }
/* Chrome / Safari paint a blue (or yellow) inset background on autofilled
   inputs that leaks past `background: transparent`. The 1000px inset
   box-shadow trick replaces that paint with the wrap's white. Without this
   the input visibly diverges from the surrounding pill once the browser
   marks it autofilled (or sometimes simply after typing). */
.hero-input:-webkit-autofill,
.hero-input:-webkit-autofill:hover,
.hero-input:-webkit-autofill:focus,
.hero-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.hero-input-suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-500);
  white-space: nowrap;
}

/* ─── Response-sheet URL inputs ────────────────────────────────────────
   Used by HeroInput and ResponseSheetUploader for the two per-paper
   digialm.com links. Unlike .hero-input-wrap (which wraps a styled
   number-style pill), these are standalone full-width url inputs sized
   so a typical 200-character digialm URL is comfortable to paste into.
*/
.rs-urls {
  display: block;
}
.rs-url-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  background: white;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  color: var(--ink);
  margin-top: 6px;
  /* URLs are long — let the input scroll horizontally rather than wrap. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-url-input::placeholder { color: var(--slate-400); font-weight: 500; }
.rs-url-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.rs-url-input:disabled {
  background: var(--slate-50, #f8fafc);
  color: var(--slate-500);
  cursor: not-allowed;
}
.rs-urls-help {
  margin-top: 10px;
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 500;
  text-align: center;
}
.rs-urls-help a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
}
.rs-urls-help a:hover { color: var(--ink); }

.hero-error-api {
  /* Post-submit API failure — sits just above the predict button so the
     user sees why their click didn't go through without scrolling. */
  margin-top: 6px;
  text-align: center;
}
.hero-error {
  color: var(--bad);
  font-size: 14px;
  margin: 0;
  padding: 10px 12px;
  background: var(--bad-soft);
  border: 1.5px solid var(--bad);
  border-radius: var(--radius);
  font-weight: 600;
}

.hero-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.hero-cta {
  width: 100%;
}
@media (min-width: 720px) { .hero-cta { width: auto; min-width: 320px; } }
.hero-fineprint {
  font-size: 12px;
  color: var(--slate-500);
  margin: 0;
  text-align: center;
}

/* ─── Section heads (results) ─── */

.section-in {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-head { display: flex; flex-direction: column; gap: 4px; }
.sec-head .num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.sec-head .title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sec-head .sub {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.5;
}

/* ─── Loader (horizontal stepper) ─── */

.loader-card { display: flex; flex-direction: column; gap: 18px; }

.loader-row {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.loader-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
  font-size: 12.5px;
  color: var(--slate-400);
  font-weight: 600;
  line-height: 1.3;
}
.loader-step .label {
  max-width: 14ch;
}
@media (min-width: 720px) {
  .loader-step { font-size: 13px; }
  .loader-step .label { max-width: 18ch; }
}

.loader-step .marker {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--slate-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--slate-500);
  border: 1.5px solid var(--slate-200);
}

/* Connecting line between markers — drawn on each step's right side. The
   last step's line is suppressed so we don't get a dangling tail. */
.loader-step::after {
  content: '';
  position: absolute;
  top: 16px; /* center of 32px marker */
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--slate-200);
  z-index: 1;
}
.loader-step:last-child::after { display: none; }

.loader-step.done { color: var(--slate-600); }
.loader-step.done .marker {
  background: var(--good-soft);
  border-color: var(--good);
  color: var(--good);
}
.loader-step.done::after { background: var(--good); }

.loader-step.active { color: var(--ink); }
.loader-step.active .marker {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  border-right-color: transparent;
  animation: rp-spin 700ms linear infinite;
}
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* ─── Rank prediction card ─── */

.rank-section { margin-top: 8px; }

.rank-card-v { display: flex; flex-direction: column; gap: 22px; }
.rank-headline { display: flex; flex-direction: column; gap: 4px; }
.rank-headline .label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.rank-headline .value {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 42px;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1.1;
}
.rank-headline .value .dash { color: var(--slate-400); margin: 0 4px; }
.rank-headline .sub {
  font-size: 13px;
  color: var(--slate-600);
  font-weight: 600;
}

.rank-ladder {
  display: flex;
  flex-direction: column;
}
.rung {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: stretch;
  min-height: 56px;
  color: var(--slate-400);
}
.rung-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rung-rail .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--slate-200);
  border: 2px solid var(--slate-300);
  flex-shrink: 0;
  margin-top: 4px;
}
.rung-rail .line {
  width: 2px;
  flex: 1;
  background: var(--slate-200);
  margin-top: 4px;
}
.rung.beat { color: var(--ink); }
.rung.beat .rung-rail .dot { background: var(--good); border-color: var(--good); }
.rung.inthis { color: var(--primary); }
.rung.inthis .rung-rail .dot { background: var(--primary); border-color: var(--ink); width: 16px; height: 16px; margin-left: -2px; }
.rung-content { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }
.rung-top { display: flex; align-items: baseline; gap: 8px; }
.rung-rank {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 16px;
}
.rung-meta {
  font-size: 13px;
  color: inherit;
  opacity: 0.75;
}
.rung-you {
  margin-top: 4px;
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--primary);
  color: white;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
}

.rank-milestone {
  background: var(--cream-2);
  border: 1.5px solid var(--slate-300);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
}
.milestone-label { color: var(--slate-500); font-weight: 600; margin-right: 6px; }

.rank-disclaimer {
  font-size: 12px;
  color: var(--slate-500);
  font-style: italic;
}

/* ─── Percentile prediction card ─── */

.pct-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pct-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .pct-row { grid-template-columns: 1fr 1fr; } }
.pct-block { display: flex; flex-direction: column; gap: 4px; }
.pct-block .label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.pct-block .value {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--mains);
  line-height: 1.1;
}
.pct-block .sub {
  font-size: 12px;
  color: var(--slate-600);
  font-weight: 600;
}

/* ─── College table ─── */

/* Institute filter — All / IITs / NITs+ (above the view controls) */
.institute-filter {
  display: inline-flex;
  background: var(--slate-100);
  padding: 4px;
  border-radius: 999px;
  border: 1.5px solid var(--slate-300);
  gap: 2px;
  align-self: flex-start;
}
.inst-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--slate-600);
  cursor: pointer;
  transition: all var(--transition);
}
.inst-pill:hover { color: var(--ink); }
.inst-pill.active {
  background: var(--ink);
  color: white;
}
.inst-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 12px;
  font-weight: 800;
  color: inherit;
}
.inst-pill.active .inst-count { background: rgba(255, 255, 255, 0.18); }

.college-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.college-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ctl-pill {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--slate-300);
  background: white;
  color: var(--slate-600);
  cursor: pointer;
  transition: all var(--transition);
}
.ctl-pill.active {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.branch-select {
  margin-left: auto;
  padding: 8px 14px;
  padding-right: 32px;
  border-radius: 999px;
  border: 2px solid var(--slate-300);
  background-color: white;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%231E293B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

/* Filter row — institute-filter pills (All / IITs / NITs+) + the inline
   Mains-context pill share the same row so the user always sees their
   Mains rank alongside the pool toggle. */
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-row .institute-filter { margin: 0; }
/* Mains-only variant — fires when both college pools are empty and the
   filter pills are hidden. The Mains pill then has the whole row to
   itself, so we stretch it edge-to-edge instead of leaving it tiny on
   the left. */
.filter-row--mains-only .mains-pill {
  flex: 1 1 100%;
  justify-content: space-between;
}
.filter-row--mains-only .mains-pill-edit { flex-basis: auto; }

/* Mains context pill — sits on the filter row once Mains is added.
   Clicking the pencil expands the same pill in-place to an editor with
   a rank input, state select, and ✓/✕ buttons — no roll-back to the
   full MainsRankInjector form. */
.mains-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--mains);
  background: var(--mains-soft);
  color: var(--mains);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}
.mains-pill:not(.mains-pill-edit):hover { background: var(--mains); color: white; }
.mains-pill-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.mains-pill-value { font-weight: 900; }
.mains-pill-state { font-weight: 700; opacity: 0.9; }

/* Inline-edit variant — same .mains-pill chrome but with form controls
   inside. Forced onto its own row in .filter-row (flex-basis: 100%) so
   the input/select/buttons get horizontal room instead of fighting the
   institute-filter pills for space, and pinned to the left edge with
   margin-right: auto so the pill stays content-sized at the start of
   the row rather than stretching across it. */
.mains-pill-edit {
  cursor: default;
  padding: 4px 4px 4px 8px;
  gap: 6px;
  background: #fff;
  flex-wrap: wrap;
  max-width: 100%;
  flex-basis: 100%;
  margin-right: auto;
  justify-content: flex-start;
}
.mains-edit-input {
  width: 120px;
  padding: 6px 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--mains);
  border-radius: 999px;
  outline: none;
}
.mains-edit-input::placeholder { color: var(--slate-400); font-weight: 500; }
.mains-edit-input:focus { border-color: var(--ink); }
.mains-edit-select {
  min-width: 140px;
}
.mains-edit-select .custom-select-trigger {
  padding: 5px 10px;
  font-size: 12px;
  border: 1.5px solid var(--mains);
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  color: var(--ink);
}
.mains-edit-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all var(--transition);
}
.mains-edit-save { background: var(--mains); color: #fff; border-color: var(--mains); }
.mains-edit-save:hover:not(:disabled) { filter: brightness(1.08); }
.mains-edit-save:disabled { opacity: 0.45; cursor: not-allowed; }
.mains-edit-cancel:hover { background: var(--ink); color: #fff; }

.college-table { padding: 0; overflow: hidden; }
.college-empty { padding: 24px; text-align: center; color: var(--slate-500); font-style: italic; }
/* CTA variant — used when even after Mains is added nothing matches.
   Adds a vertically-stacked headline + 'Practice on Kairos' button.
   Italic is dropped so the call-to-action reads as primary copy. */
.college-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-style: normal;
  color: var(--ink);
}
.college-empty-cta p {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.college-empty-btn {
  align-self: center;
  padding: 10px 22px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ct-head {
  display: grid;
  grid-template-columns: 2fr 1.4fr 2fr 1fr;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--ink);
  background: var(--cream-2);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.ct-head .grp { font-size: 12px; }
/* v2: JoSAA group header spans two sub-columns (Opening rank | Closing rank). */
.ct-head-v2 .ct-col-josaa { display: flex; flex-direction: column; gap: 4px; }
.ct-josaa-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate-500);
  font-weight: 700;
}
.ct-body { display: flex; flex-direction: column; }
.ct-row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 2fr 1fr;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--slate-100);
  align-items: center;
}
.ct-row:last-child { border-bottom: none; }

.ct-col-college .name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}
.ct-col-college .meta {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 600;
  margin-top: 2px;
}
.ct-col-branch .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.3;
}
/* v2: split the JoSAA cell into Opening | Closing sub-columns. */
.ct-row .ct-col-josaa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.ct-or, .ct-cr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.ct-or b, .ct-cr b { font-weight: 800; color: var(--ink); }
/* Legacy classes kept for any old markup that still mounts during the
   transition window. */
.ct-cell { font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.ct-cell b { font-weight: 800; color: var(--ink); }
.ct-cell-meta { font-size: 12px; color: var(--slate-500); font-weight: 500; }

/* Exam-type tag — appears next to the rank number in combined ("All") view
   so users don't compare JEE Advanced AIR ranks with JEE Mains AIR ranks. */
.exam-tag {
  display: inline-flex;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  line-height: 1;
}
.exam-tag-advanced { color: var(--adv); background: var(--adv-soft); }
.exam-tag-mains { color: var(--mains); background: var(--mains-soft); }
.ct-empty { padding: 24px; color: var(--slate-500); font-style: italic; text-align: center; }

.ct-col-prob { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* Probability pill chrome matches the subject pills (.pill / .pill-phy etc.)
   from the wireframe — 2px ink border + 1.5px hard offset shadow + 900 weight
   uppercase. Colored variants live below. */
.prob-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 0 var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.prob-ok      { background: var(--good-soft); color: #166534; }
.prob-edge    { background: var(--warn-soft); color: #92400e; }
.prob-stretch { background: var(--slate-100); color: var(--slate-600); }
/* v2: 'New' tier — first-year seats with no historical data. Blue chrome. */
.prob-new     { background: var(--mains-soft); color: var(--mains); }
.prob-meta { font-size: 12px; color: var(--slate-400); font-weight: 600; }

.show-more-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.show-more {
  align-self: center;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px dashed var(--slate-300);
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--slate-600);
  cursor: pointer;
}
.show-more:hover { border-color: var(--ink); color: var(--ink); }

/* Mobile: collapse college table into stacked cards */
@media (max-width: 719px) {
  .ct-head { display: none; }
  .ct-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "college prob"
      "branch  branch"
      "josaa   josaa";
    row-gap: 6px;
    padding: 14px 16px;
  }
  .ct-col-college { grid-area: college; }
  .ct-col-prob { grid-area: prob; align-items: flex-end; }
  .ct-col-branch { grid-area: branch; }
  .ct-col-josaa {
    grid-area: josaa;
    /* Keep the OR/CR sub-columns on mobile but tighten labels via the
       sub-header (hidden by .ct-head being display:none above). Inline
       labels make the row read on its own. */
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 16px;
    align-items: baseline;
  }
  .ct-or::before { content: "OR "; color: var(--slate-500); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; }
  .ct-cr::before { content: "CR "; color: var(--slate-500); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; }
}

/* ─── Share card ───
   Light-background variant matching wireframes/rank predictor/Claude Design/
   Results (standalone).html: white surface, 2px ink border, 6px hard ORANGE
   offset shadow. WhatsApp + Copy buttons are .candy-btn instances. */

.share-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  background: var(--white, white);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 0 var(--primary, #FF6B35);
  color: var(--ink);
  margin-top: 22px;
}
@media (min-width: 640px) {
  .share-card {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
  }
}
.share-copy {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.share-copy b {
  color: var(--primary);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.share-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.candy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  transition: transform var(--transition), box-shadow var(--transition);
  background: white;
  color: var(--ink);
}
.candy-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--ink); }
/* WhatsApp official green is light — force the label + glyph to dark slate
   so the affordance reads cleanly. Matches wireframe. */
.candy-btn-wa,
.candy-btn-wa:hover {
  background: #25D366;
  color: var(--ink);
  border-color: var(--ink);
}
.candy-btn-wa:hover { background: #1FB857; }
.candy-btn-wa svg { color: var(--ink); fill: var(--ink); }
.candy-btn-wa:disabled { opacity: 0.7; cursor: progress; }
.share-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mains-spin 0.7s linear infinite;
  display: inline-block;
}
.share-status {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 10px;
  background: #FFFBEB;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.share-status-text { background: #FEE2E2; }
.share-status-shared { background: #DCFCE7; }
@media (min-width: 640px) {
  .share-card { flex-wrap: wrap; }
  .share-status { flex-basis: 100%; }
}
.candy-btn-ghost {
  background: white;
  color: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 639px) {
  .candy-btn { flex: 1; justify-content: center; }
}

/* ─── Waitlist CTA on results ─── */

.waitlist-card {
  background: linear-gradient(135deg, var(--primary-soft), var(--cream-2));
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.waitlist-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.waitlist-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ─── OTP modal ─── */

.sp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 0;
  animation: sp-fade 200ms ease;
}
@media (min-width: 720px) {
  .sp-backdrop { align-items: center; padding: 20px; }
}
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }

.sp-card {
  background: white;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
  padding: 24px;
  width: 100%;
  max-width: 440px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: sp-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 720px) {
  .sp-card { border-radius: var(--radius-lg); }
}
@keyframes sp-rise { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  /* Flex-centering the × glyph — relying on line-height alone leaves the
     mark sitting slightly above the optical center because the × character
     has asymmetric font metrics. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--slate-100);
  color: var(--slate-600);
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.sp-close:hover { background: var(--slate-200); }

.sp-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.sp-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.sp-sub {
  font-size: 13px;
  color: var(--slate-600);
  margin: 0;
  line-height: 1.4;
}
.sp-fineprint {
  font-size: 12px;
  color: var(--slate-500);
  margin: 0;
  line-height: 1.4;
  text-align: center;
}
.sp-err {
  color: var(--bad);
  background: var(--bad-soft);
  border: 1.5px solid var(--bad);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.sp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sp-field:last-of-type { margin-bottom: 0; }
.sp-field label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.sp-field input,
.sp-field select {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--slate-300);
  font-size: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  background: white;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition);
  width: 100%;
}
/* Restore the dropdown caret for <select> (appearance:none strips it). */
.sp-field select {
  background-image: 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='%231E293B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.sp-field input:focus,
.sp-field select:focus { border-color: var(--ink); }
.sp-field input:disabled,
.sp-field select:disabled { background: var(--slate-100); }
.sp-field input:-webkit-autofill,
.sp-field input:-webkit-autofill:hover,
.sp-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
}
/* The phone input lives inside .sp-phone-wrap which has its own border, so
   override the per-input border defined above when nested. */
.sp-phone-wrap input { border: none !important; }

.sp-phone-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--slate-300);
  border-radius: var(--radius);
  overflow: hidden;
}
.sp-phone-wrap:focus-within { border-color: var(--ink); }
.sp-phone-cc {
  padding: 12px 14px;
  background: var(--cream-2);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--slate-600);
  border-right: 1.5px solid var(--slate-300);
}
.sp-phone-wrap input {
  flex: 1;
  border: none !important;
  border-radius: 0;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.sp-linkbtn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 0;
}
.sp-linkbtn:disabled { color: var(--slate-400); cursor: not-allowed; }

.sp-cta {
  width: 100%;
  margin-top: 4px;
}
/* Waitlist modal has no fine-print row below the CTA, so the 4px of
   .sp-cta sits the button uncomfortably close to the input. Bump to
   give the phone field + button visible breathing room. */
.waitlist-modal-cta { margin-top: 16px; }

/* Followup modal "Skip for now" — link-styled secondary action under the
   primary CTA. */
.sp-followup-skip {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 0;
  padding: 6px 12px;
  color: var(--slate-500);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-followup-skip:hover { color: var(--ink); }

/* Recaptcha container — visually hidden but reachable. Required for invisible
   reCAPTCHA mounting; setting display: none can prevent Firebase from
   initializing the verifier. */
#kairos-recaptcha-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: -1;
}

/* ─── Footer ─── */

.rp-footer {
  border-top: 2px solid var(--ink);
  padding: 24px 16px;
  background: var(--cream);
  margin-top: 40px;
}
.rp-footer .inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--slate-500);
}
@media (min-width: 720px) {
  .rp-footer .inner { flex-direction: row; justify-content: space-between; align-items: center; }
}
.rp-footer a,
.rp-footer .footer-link-btn {
  color: var(--ink);
  font-weight: 700;
  margin-left: 16px;
}
/* Reset native button chrome so .footer-link-btn renders as a plain link
   (it triggers the in-page waitlist modal instead of cross-page nav). */
.rp-footer .footer-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.rp-footer a:hover,
.rp-footer .footer-link-btn:hover { color: var(--primary); }

.results-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 720px) {
  .results-wrap { gap: 40px; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESULTS PAGE — landing/results.html
   ════════════════════════════════════════════════════════════════════════ */

.rp-main-results {
  max-width: 920px;
  gap: 24px;
}
@media (min-width: 720px) {
  .rp-main-results { gap: 32px; }
}

.results-loading {
  text-align: center;
  color: var(--slate-500);
  font-weight: 600;
  padding: 32px;
}

/* ─── Page hero ─── */

.results-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
}
.results-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0;
}
.results-h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 720px) { .results-h1 { font-size: 52px; } }
.results-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* ─── Rank + Colleges unified section ─── */

.rc-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rc-hero { display: flex; flex-direction: column; gap: 8px; }

/* Hero row layout — rank block on the left, compact Mains-injector card
   on the right. Drops to a single column on narrow viewports so the rank
   stays the dominant visual. */
.rc-hero-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rc-hero-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.rc-hero-right { width: 100%; }
@media (min-width: 880px) {
  .rc-hero-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .rc-hero-right {
    width: auto;
    flex: 0 0 auto;
    max-width: 440px;
    min-width: 360px;
  }
}

/* ─── Tier badge ──────────────────────────────────────────────────────
   Two-part pill under the predicted rank value. Left half (coloured)
   carries the tier name + check icon, right half (white) carries the
   contextual label from the backend ("Old IITs, mid-tier branches" etc.).
   Color is driven by the rank bucket — see getTier() in
   results-components.jsx. */
.tier-badge {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 2px 2px 0 var(--ink);
  margin-top: 2px;
  font-family: 'Outfit', sans-serif;
  max-width: 100%;
}
.tier-pill-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-right: 2px solid var(--ink);
  white-space: nowrap;
}
.tier-pill-left .tier-icon { display: inline-flex; }
.tier-pill-right {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tier-1 .tier-pill-left { background: #86efac; }   /* green — top + old IITs */
.tier-2 .tier-pill-left { background: #fde68a; }   /* amber — all IITs */
.tier-3 .tier-pill-left { background: #fdba74; }   /* orange — marginal */
.tier-nit .tier-pill-left { background: #bfdbfe; } /* blue — NIT zone */

.rc-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.rc-rank-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.rc-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.rc-value .dash { color: var(--primary); }
.rc-context {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
@media (min-width: 720px) { .rc-value { font-size: 34px; } }

/* Category rank — secondary headline shown only for non-OPEN students.
   Visually distinct (cream pill) so it reads as "this is the actionable
   number for your category", not as a duplicate of the AIR above. */
.rc-category-rank {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rc-category-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.rc-category-label b {
  font-weight: 900;
  color: var(--ink);
}
.rc-category-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.rc-category-value .dash { color: var(--primary); }
.rc-category-note {
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.4;
  margin-top: 2px;
}

/* Caption under the landmark bar — only rendered for non-OPEN students to
   reconcile "AIR benchmarks" with "your category rank determines access". */
.rc-bar-caption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--slate-500);
  font-style: italic;
  text-align: center;
  line-height: 1.4;
}
.rc-bar-caption b { color: var(--ink); font-style: normal; font-weight: 800; }

/* Horizontal landmark bar */
.rc-bar { margin-top: 4px; }
.rc-track {
  position: relative;
  height: 4px;
  background: var(--slate-200);
  border-radius: 2px;
  margin: 14px 0 14px;
}
.rc-track-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--primary);
  border: 2px solid white;
  box-shadow: 0 0 0 1.5px var(--ink);
  transform: translate(-50%, -50%);
}
.rc-bar-cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.rc-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.rc-bar-col .num {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--slate-500);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.rc-bar-col .lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.3;
  white-space: nowrap;
}
.rc-bar-col.is-you .num { color: var(--primary); font-weight: 800; }
.rc-bar-col.is-you .lbl { color: var(--ink); font-weight: 700; }
.rc-range-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  white-space: nowrap;
  margin-top: 3px;
}

/* Divider line with centered text */
.rc-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 2px;
}
.rc-divider .line {
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}
.rc-divider .text {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .rc-divider .text { font-size: 12px; white-space: normal; text-align: center; }
}

/* Flat college table — strip card chrome inside .colleges-flat wrapper */
.colleges-flat .college-table {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  overflow: hidden;
}
.colleges-flat .ct-head {
  background: transparent;
  border-bottom: 1.5px solid var(--slate-200);
  padding: 10px 16px;
}
.colleges-flat .ct-body { background: transparent; }
.colleges-flat .ct-row { padding: 12px 16px; border-bottom: none; }
.colleges-flat .ct-row:nth-child(odd) { background: white; }
.colleges-flat .ct-row:nth-child(even) { background: #f7f4ea; }
.colleges-flat .ct-row:hover { background: #ece6d0; }
.colleges-flat .college-empty {
  border: 1.5px dashed var(--slate-300);
  background: transparent;
  font-size: 13px;
}
/* Hide the section-head inside the flat wrapper since the rc-divider above
   already serves as the header. */
.colleges-flat .section-in > .sec-head { display: none; }

/* WhatIf headline replacing "Your fastest path to a higher score" in the
   Pursuit Premium card. Same .title chrome as the static header, with a
   muted-weight college suffix so the rank improvement reads as the
   primary claim. */
.sec-head .whatif-title { display: inline; }
.whatif-title-college {
  font-weight: 700;
  color: var(--ink-soft);
}

/* ─── Mains Rank Injector — compact (lives in rc-hero-right) ─── */

.mains-injector-compact {
  /* Override the legacy column/row layout from .mains-injector-card so the
     compact form gets its own two-row design. */
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 4px 4px 0 var(--primary);
  margin: 0;
}
.mains-compact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mains-injector-compact .mains-injector-title {
  font-size: 16px;
  margin: 0;
}
.mains-injector-compact .mains-injector-eyebrow {
  align-self: auto;
  padding: 3px 8px;
  font-size: 12px;
  flex-shrink: 0;
}
.mains-compact-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.mains-input-compact {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px !important;
  font-size: 13px !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 10px !important;
  background: #fff;
  font-weight: 600;
  color: var(--ink);
}
.mains-input-compact::placeholder { color: var(--slate-400); font-weight: 500; }
.mains-compact-select {
  flex: 1 1 auto;
  min-width: 0;
}
.mains-compact-select .custom-select-trigger {
  padding: 9px 12px;
  font-size: 13px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  font-weight: 600;
  background: #fff;
}
.mains-submit-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--primary);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  transition: transform 0.08s ease;
}
.mains-submit-arrow:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 var(--ink); }
.mains-submit-arrow:disabled { opacity: 0.5; cursor: not-allowed; }
.mains-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mains-spin 0.7s linear infinite;
}
@keyframes mains-spin { to { transform: rotate(360deg); } }
.mains-error-compact { font-size: 12px; margin: 4px 2px 0; color: #b91c1c; }

/* ─── Mains Rank Injector (legacy full-width — kept for any consumer
       that still mounts the non-compact form) ─── */

.mains-injector-section { margin-top: 6px; }

.mains-injector-card {
  background: white;
  border: 2px dashed var(--primary);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 720px) {
  .mains-injector-card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
  }
}

.mains-injector-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.mains-injector-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
}
.mains-injector-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 4px 0 0;
}
@media (min-width: 720px) { .mains-injector-title { font-size: 19px; } }
.mains-injector-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

.mains-injector-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative; /* so CustomSelect's absolute menu anchors here cleanly */
  z-index: 1;
}
@media (min-width: 720px) {
  .mains-injector-form {
    min-width: 320px;
    max-width: 360px;
  }
}

.mains-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mains-input-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.mains-input {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  background: white;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--transition);
  letter-spacing: 0.01em;
}
.mains-input::placeholder { color: var(--slate-400); font-weight: 600; }
.mains-input:focus { box-shadow: 2px 2px 0 0 var(--ink); }
.mains-input:-webkit-autofill,
.mains-input:-webkit-autofill:hover,
.mains-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
}

.mains-submit {
  width: 100%;
  padding: 11px 18px;
  font-size: 13px;
}

.mains-error {
  color: var(--bad);
  font-size: 12.5px;
  margin: 0;
  font-weight: 600;
}

/* Domicile chip shown next to the Mains rank on the non-IIT section header */
.rc-domicile-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mains-soft);
  color: var(--mains);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--mains);
}

/* Edit button on the rc-rank-line for the non-IIT section */
.rc-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1.5px solid var(--slate-300);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--slate-600);
  cursor: pointer;
  transition: all var(--transition);
}
.rc-edit-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ─── What-if nudge ─── */
/* v2: compact horizontal card per the README — text left, button right.
   Smaller padding, single row on desktop, stacks on mobile. */

.whatif-card {
  margin-top: 6px;
  padding: 14px 18px;
  background: var(--primary-soft);
  border: 2px solid var(--ink);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.whatif-card-row {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
@media (max-width: 559px) {
  .whatif-card-row { flex-direction: column; align-items: stretch; gap: 12px; }
}
.whatif-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.whatif-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.whatif-college {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.whatif-college .name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ink);
}
.whatif-college .becomes-accessible {
  font-size: 12.5px;
  color: var(--slate-600);
  font-weight: 600;
}
.whatif-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.whatif-bar .track {
  position: relative;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}
.whatif-bar .track-shift {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--good) 0%, var(--good) 50%, rgba(0,0,0,0.15) 100%);
  border-radius: 2px;
}
.whatif-bar .track-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 2px solid white;
}
.whatif-bar .track-dot.current { background: var(--slate-400); box-shadow: 0 0 0 1.5px var(--slate-400); }
.whatif-bar .track-dot.improved {
  background: var(--good);
  box-shadow: 0 0 0 1.5px var(--ink);
  z-index: 2;
}
.whatif-caption {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--slate-600);
}
.whatif-caption .arrow { color: var(--good); padding: 0 2px; }
.whatif-caption .improved-rank { color: var(--good); font-weight: 900; }
.whatif-cta-btn {
  align-self: center;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: white;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  white-space: nowrap;
}
.whatif-cta-compact {
  /* Right-anchored in the horizontal layout — no auto-margin, smaller. */
  align-self: center;
  margin-top: 0;
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 13px;
  box-shadow: 3px 3px 0 0 var(--ink);
}
@media (max-width: 559px) {
  .whatif-cta-compact { width: 100%; }
}
.whatif-cta-btn:hover {
  background: var(--primary);
  color: white;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.whatif-cta-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

/* ─── Premium zone + Upload gate overlay ─── */
/* Ported 1:1 from wireframes/rank predictor/Claude Design/Results
   (standalone).html so the populated analysis matches the design.
   The negative margins make the cream slab bleed past the rp-main
   horizontal padding (16px mobile / 28px desktop) right to the
   viewport edge, and past the bottom edge into the footer space —
   visual "drop into Pursuit Premium" moment that the wireframe uses
   to mark the boundary between the free results and the analysis. */

.premium-zone-wrap { position: relative; }
/* When gated, make sure the wrapper is at least as tall as the upload
   gate card needs — otherwise the absolutely-positioned overlay (which
   sizes to the wrapper) is shorter than the card and the card visually
   extends past the wrapper into the footer below. 640px covers the URL-
   input variant of the card on desktop; the card's own max-height
   handles overflow on viewports shorter than that. */
.premium-zone-wrap.is-gated { min-height: 640px; }
.premium-zone-wrap.is-gated .premium-zone {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}
.premium-zone-wrap.is-gated .premium-zone * {
  pointer-events: none !important;
}

.premium-zone {
  position: relative;
  margin-top: 0;
  margin-left: -28px;
  margin-right: -28px;
  margin-bottom: -48px;
  padding: 32px 28px 48px;
  border-top: 2px solid var(--primary);
  /* Inline (vs --cream-2) because landing's --cream-2 is a warmer
     yellow used in cards across the page; the wireframe specifically
     uses a more neutral grey-cream for the premium slab so it reads
     as a different surface. */
  background: #F6F4EF;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 719px) {
  .premium-zone {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.premium-zone-top { display: flex; align-items: center; gap: 10px; }
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--primary);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.premium-badge svg { flex-shrink: 0; }

/* Two-column "Where you lost / Rank improver topics" grid (wireframe) */
.ti-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 760px) {
  .ti-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.ti-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ti-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
}
.ti-head-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.ti-head-total {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.ti-total-lost { color: var(--bad); }
.ti-total-gain { color: var(--good); }
.ti-rows {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ti-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--slate-200);
}
.ti-row:last-of-type { border-bottom: none; }
/* Compact subject pill (9px) is intentional here — the lost-marks /
   improver section lives on results.html which is `noindex` (per-user,
   sessionStorage-driven) so Lighthouse's "legible font sizes" SEO audit
   doesn't reach it. Keeping the tight pill for visual consistency with
   the wireframe. */
.ti-row .pill { font-size: 9px; padding: 3px 6px; }
.ti-row-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ti-row-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ti-val-lost { color: var(--bad); }
.ti-val-gain { color: var(--good); }
.ti-empty {
  padding: 16px 4px;
  font-size: 12.5px;
  color: var(--slate-500);
  line-height: 1.45;
}

/* Teaser fade — overlays the bottom of the ti-rows so the list looks
   cut off, hinting "there's more if you join the waitlist". Wireframe
   uses this on the improver column when locked; we use it on both
   columns whenever the populated panel renders, since v1 only shows
   the top 5 anyway. */
.ti-list .ti-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  /* Matches the premium-zone background so the fade-to-bg looks
     seamless. */
  background: linear-gradient(180deg,
    rgba(246, 244, 239, 0) 0%,
    #F6F4EF 85%
  );
}

/* Subject pill colors */
/* Subject pills — pasted 1:1 from the wireframe so the tags pop with
   the same bordered candy look as the design (was a flat pill before). */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 0 var(--ink);
}
.pill-phy { background: var(--phy-soft); color: var(--phy-text); }
.pill-che { background: var(--che-soft); color: var(--che-text); }
.pill-mat { background: var(--mat-soft); color: var(--mat-text); }

/* Upload Gate overlay — sticky-positioned card over the blurred zone */
.upload-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 18px 24px;
  z-index: 5;
  pointer-events: none;
  /* No `overflow: hidden` here — it would clip the card's orange offset
     shadow. We bound the card via the wrapper min-height + sticky. */
}
.upload-gate-card {
  pointer-events: auto;
  position: sticky;
  top: 88px;
  /* Don't allow the card to outgrow the viewport (with breathing room
     above for the sticky offset + a little below for shadow). On a short
     gated zone this is what stops the card from overshooting the footer. */
  max-height: calc(100vh - 120px);
  overflow: auto;
  max-width: 460px;
  width: 100%;
  background: white;
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 0 var(--primary);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upload-gate-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.upload-gate-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.upload-gate-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 720px) { .upload-gate-title { font-size: 22px; } }
.upload-gate-bullets {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-gate-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.upload-gate-bullets .bullet-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  border: 1.5px solid var(--ink);
}
/* Confirmation badge — shown in place of a CTA because OTP-verified users
   are already auto-enrolled to the waitlist by lead-capture.js. */
.upload-gate-confirm {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--good-soft);
  color: var(--good);
  border: 1.5px solid var(--good);
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.3;
}
.upload-gate-confirm svg { flex-shrink: 0; }
.upload-gate-fineprint {
  font-size: 12px;
  color: var(--slate-500);
  margin: 4px 0 0;
  text-align: center;
}
.upload-gate-fineprint b { color: var(--ink); font-weight: 800; }

@media (max-width: 719px) {
  .upload-gate-overlay { padding: 28px 12px 18px; }
  .upload-gate-card { top: 76px; padding: 22px 20px 18px; border-radius: 16px; }
  .premium-zone { padding: 22px 16px 28px; }
}

/* Button spinner — used by the response-sheet uploader's CTA while the
   analyze call is in flight. Keep generic so other inFlight buttons can
   reuse `<svg class="btn-spinner">`. */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block;
  vertical-align: -3px;
  animation: btn-spin 0.9s linear infinite;
  transform-origin: 50% 50%;
}
.btn-pill.is-busy { cursor: progress; opacity: 0.85; }
.btn-pill.is-busy .btn-spinner { margin-right: 8px; }

/* ─── Response-sheet uploader (replaces UploadGate when signed in) ──── */
.upload-dropzone {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  background: var(--cream);
  border: 2px dashed var(--slate-300);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upload-dropzone:hover { border-color: var(--ink); background: white; }
.upload-dropzone.has-file { border-style: solid; border-color: var(--ink); background: white; }
.upload-dropzone.is-busy { cursor: progress; opacity: 0.7; }
.dropzone-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--slate-700);
  text-align: left;
}
.dropzone-cta svg { color: var(--ink); flex: 0 0 auto; }
.dropzone-cta-primary {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.dropzone-cta-secondary { font-size: 12.5px; color: var(--slate-500); margin-top: 2px; }
.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.file-pill svg { flex: 0 0 auto; }
.file-pill-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.file-pill-size { color: var(--slate-500); font-weight: 600; font-size: 12px; }
.file-pill-clear {
  background: none; border: none; cursor: pointer; color: var(--slate-500);
  font-size: 16px; padding: 0 4px; line-height: 1;
}
.file-pill-clear:hover { color: var(--bad); }

/* ─── Populated analysis panel ──────────────────────────────────────── */
.premium-zone-wrap.has-analysis { /* no blur, no overlay */ }
.premium-zone-wrap.has-analysis .premium-zone {
  filter: none; pointer-events: auto;
}
.parse-confidence-tag {
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Mains-added confirmation banner ────────────────────────────────
   Renders ABOVE the college table for ~6s after a successful Mains-rank
   refire, then auto-dismisses. Pairs with the smooth-scroll-to-table
   in results-app.jsx — without both, the form vanishes silently and
   the table content changes without any signal to the user. */
@keyframes mains-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mains-added-banner {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--good-soft);
  border: 1.5px solid var(--good);
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
  animation: mains-banner-in 220ms cubic-bezier(.16,.84,.3,1) both;
}
.mains-added-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--good);
  color: white;
  border-radius: 999px;
}
.mains-added-text b { font-weight: 800; }
.mains-added-meta { color: var(--slate-600); font-weight: 600; }
.mains-added-hint { color: var(--slate-600); }
.mains-added-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--slate-500);
  font-size: 18px; line-height: 1;
  padding: 0 4px;
}
.mains-added-dismiss:hover { color: var(--ink); }

/* ─── Compact scoreboard card ─────────────────────────────────────────
   Single horizontal card showing total/360 + per-subject chip + counts.
   Sits ABOVE the Pursuit Premium block; this is the "Here's what you
   scored" surface. Much tighter than the wireframe's MarksBreakdown
   (which is per-subject bars) because per-subject magnitudes are
   already in the chips — no bar needed. */
.scoreboard-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 18px 28px;
  align-items: center;
  padding: 18px 22px;
  overflow: hidden; /* clip the brand bar's negative margins to the card */
}
@media (max-width: 559px) {
  .scoreboard-card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'brand total'
      'brand right';
    padding: 16px 18px;
  }
  .scoreboard-brand-bar { grid-area: brand; }
  .scoreboard-total { grid-area: total; }
  .scoreboard-right { grid-area: right; }
}
.scoreboard-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Project-wide rule: never 1px borders. The vertical rule that splits
     the total from the subject + outcome breakdown is 2px. */
  border-right: 2px solid var(--slate-200);
  padding-right: 24px;
}
@media (max-width: 559px) {
  .scoreboard-total {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--slate-200);
  }
}
/* Full-height orange bar on the LEFT edge of the scoreboard card.
   Brands the surface as 'Kairos Rank Predictor' without competing for
   space with the score or the breakdown. Negative margins bleed it to
   the card's outer edges so it pins flush to the card border (the card
   has overflow: hidden which clips anything past the border-radius). */
.scoreboard-brand-bar {
  align-self: stretch;
  margin: -18px 0 -18px -22px;
  padding: 12px 14px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 110px;
}
@media (max-width: 559px) {
  .scoreboard-brand-bar { margin: -16px 0 -16px -18px; max-width: 90px; }
}
.scoreboard-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.scoreboard-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.scoreboard-denom {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--slate-400);
  letter-spacing: 0;
  margin-left: 2px;
}
.scoreboard-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
/* Subject row + counts row — left-aligned with a balanced (not stretched,
   not bunched) gap. ~36px reads as 'evenly placed' without space-between's
   awkward edge-padding. */
.scoreboard-subjects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
}
/* Split subject pill: coloured left half carries the subject code,
   white right half carries the score, separated by a 2px vertical
   ink divider that matches the outer border thickness. The whole
   pill sits inside a 2px ink border (currentColor inherits each
   subject's text colour so the border tints to subject hue). */
.scoreboard-subject-pill {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: transparent !important; /* override .pill solid bg */
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  line-height: 1;
}
.scoreboard-subject-pill .sub-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-right: 2px solid var(--ink);
}
.scoreboard-subject-pill .sub-mks {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -0.01em;
}
/* Subject tint only on the left half; .pill-mat etc. set both bg and
   text colour on the whole pill normally, so we re-scope to the tag. */
.pill-mat.scoreboard-subject-pill .sub-tag { background: var(--mat-soft); color: var(--mat-text); }
.pill-phy.scoreboard-subject-pill .sub-tag { background: var(--phy-soft); color: var(--phy-text); }
.pill-che.scoreboard-subject-pill .sub-tag { background: var(--che-soft); color: var(--che-text); }

.scoreboard-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--slate-600);
}
.sb-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sb-count b {
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
}
.sb-dot { font-size: 12px; line-height: 1; }
.sb-count-ok      .sb-dot { color: var(--good, #16a34a); }
.sb-count-partial .sb-dot { color: var(--warn, #d97706); }
.sb-count-bad     .sb-dot { color: var(--bad,  #dc2626); }
.sb-count-skip    .sb-dot { color: var(--slate-400, #9ca3af); }

/* ─── Unlock CTA — "Join Waitlist" ──────────────────────────────────── */
.unlock-cta {
  margin-top: 18px;
  padding: 22px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 18px;
  align-items: center;
  box-shadow: 4px 4px 0 0 var(--ink);
}
.unlock-ico {
  width: 48px; height: 48px;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.unlock-copy h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 17px;
  margin: 0 0 4px 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.unlock-copy p {
  font-size: 13px;
  color: var(--slate-600);
  margin: 0;
  line-height: 1.45;
}
.unlock-btn { flex: 0 0 auto; }
@media (max-width: 600px) {
  .unlock-cta {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "ico copy"
      "btn btn";
    row-gap: 14px;
  }
  .unlock-ico  { grid-area: ico; }
  .unlock-copy { grid-area: copy; }
  .unlock-btn  { grid-area: btn; width: 100%; justify-content: center; }
}

/* ─── PremiumZone — minimal Case-1 layout ────────────────────────────
   Replaces the old blurred-preview-with-overlay pattern. One zone,
   one heading, the response-sheet form, one note line. */
.premium-zone-simple .premium-zone { padding: 22px 24px; }
.premium-zone-note {
  margin: 12px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  color: var(--slate-500);
  text-align: center;
}

/* Response-sheet uploader (also used by UploadGate's locked variant) —
   inline card, not an overlay. The old .upload-gate-overlay positioned
   fixed/absolute over a blur; now it's a flat block in the parent zone. */
.rs-uploader { margin-top: 14px; }
.rs-uploader-card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upload-gate-locked-note {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  text-align: center;
  line-height: 1.5;
}

/* Compact bottom CTA — single pill, no card, no description, no icon,
   no ink shadow. The button stands alone on the page background. The
   !important overrides defeat the base .unlock-cta rule (white bg +
   primary border + 4px ink offset shadow) which we don't want here. */
.unlock-cta-compact {
  margin-top: 18px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
}
.unlock-cta-compact .unlock-btn {
  padding: 12px 28px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

/* ─── Case 2 (analysed) — flat layout, no card chrome ────────────────
   The premium-zone wrapper sets its own bg; drop the inner card so the
   two lists sit directly on the page background. */
.premium-zone-flat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0 0;
}
.premium-zone-flat .section-in-flat { padding: 0; }
.premium-zone-flat .ti-list-flat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ─── Case 1 (no analysis) — blurred preview behind a compact upload card */
.premium-zone-flat.is-preview {
  position: relative;
}
.premium-zone-flat.is-preview > .sec-head {
  margin-bottom: 14px;
}
.premium-preview {
  position: relative;
  min-height: 380px;
}
.premium-preview-bg {
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.premium-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Compact centered upload card — smaller than the page-wide variant. */
.rs-uploader-card-compact {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: 4px 4px 0 var(--primary);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rs-uploader-heading {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}
.rs-uploader-inner { display: flex; flex-direction: column; gap: 10px; }
.rs-uploader-note {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: var(--slate-500);
  text-align: center;
}

/* Empty college-list (no-Mains case) without card chrome — text only,
   sitting on the page background like the rest of the no-card list. */
.college-empty-flat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 24px 8px;
  text-align: center;
  color: var(--slate-500);
  font-style: italic;
}