/* ============================================================
   course-finder.css  — Doclenk Course & University Finder
   Theme  : Black & White  |  Font: Roboto
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=Roboto+Slab:wght@600;700&display=swap');

/* ── ROOT VARIABLES ─────────────────────────────────────────── */
:root {
  --ink:          #0a0a0a;
  --ink-mid:      #1a1a1a;
  --ink-soft:     #4a4a4a;
  --ink-faint:    #7a7a7a;

  --surface:      #ffffff;
  --surface-2:    #f5f5f5;
  --surface-3:    #ececec;

  --border:       #d4d4d4;
  --border-strong:#a0a0a0;

  --accent:       #000000;
  --accent-2:     #1a1a1a;
  --accent-light: #f0f0f0;
  --accent-mid:   #333333;

  --teal:         #1a1a1a;
  --teal-light:   #f0f0f0;

  --gold:         #3a3a3a;
  --gold-light:   #f5f5f5;

  --danger:       #c0392b;
  --danger-light: #fdf2f1;

  --warn:         #7a5200;
  --warn-light:   #fdf8f0;

  --success:      #1a6b3a;
  --success-light:#f0f8f3;

  --r:   12px;
  --rs:  8px;
  --rl:  16px;

  --sh:    0 2px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  --sh-sm: 0 1px 4px rgba(0,0,0,.07);
  --sh-lg: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
}

/* ── RESET ──────────────────────────────────────────────────── */




/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  background:   var(--surface);
  border-bottom:1px solid var(--border);
  padding:      4rem 2rem 3.5rem;
  text-align:   center;
  position:     relative;
  overflow:     hidden;
  padding-top: 120px;
}
.hero::before {
  content:       '';
  position:      absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:    repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    var(--surface-3) 39px,
    var(--surface-3) 40px
  );
  opacity:       0.4;
    z-index: 100;
  pointer-events:none;
}
.hero::after { display: none; }

.hero-eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--surface-3);
  color:         var(--ink-soft);
  border:        1px solid var(--border);
  font-size:     11px;
  font-weight:   700;
  padding:       5px 14px;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  letter-spacing:.06em;
  z-index: 100;
  text-transform:uppercase;
}
.hero h1 {
   font-family: 'Roboto', sans-serif;
  font-size:    clamp(26px, 4.5vw, 46px);
  font-weight:  700;
  color:        var(--ink);
  letter-spacing:-1px;
  line-height:  1.15;
  margin-bottom:1rem;

  max-width:    640px;
  margin-left:  auto;
  margin-right: auto;
   position: relative;
  z-index: 1000;
}
.hero h1 em {
  font-style:   normal;
  position:     relative;
  z-index:      1000;
}
.hero p {
  color:        var(--ink-soft);
  font-size:    15px;
  font-weight:  400;
  max-width:    520px;
  margin:       0 auto 2.25rem;
  line-height:  1.7;
     position: relative;
  z-index: 1000;
}
.hero-stats {
  display:      flex;
  justify-content:center;
  background:   var(--surface);
  border:       1.5px solid var(--border);
  border-radius:12px;
  max-width:    520px;
  margin:       0 auto;
  overflow:     hidden;
  box-shadow:   var(--sh-sm);
     position: relative;
  z-index: 1000;
}
.hero-stat {
  flex:        1;
  min-width:   100px;
  padding:     16px 12px;
  border-right:1px solid var(--border);
  text-align:  center;
}
.hero-stat:last-child { border-right: none; }
.hero-stat .num {
  font-family: 'Roboto', sans-serif;
  font-size:   22px;
  font-weight: 700;
  color:       var(--ink);
  display:     block;
  line-height: 1;
}
.hero-stat .lbl {
  font-size:     11px;
  color:         var(--ink-faint);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:    4px;
  display:       block;
  font-weight:   500;
}

/* ── STEPPER WRAP ───────────────────────────────────────────── */
.stepper-wrap {
  max-width: 860px;
  margin:    0 auto;
  padding:   2.5rem 1.5rem;
}

/* ── PROGRESS BAR ───────────────────────────────────────────── */
.progress-wrap   { margin-bottom: 1.75rem; }
.progress-bar    {
  height:        3px;
  background:    var(--surface-3);
  border-radius: 3px;
  overflow:      hidden;
}
.progress-fill {
  height:        100%;
  background:    var(--ink);
  border-radius: 3px;
  transition:    width .5s cubic-bezier(.4,0,.2,1);
}
.progress-label {
  display:        flex;
  justify-content:space-between;
  font-size:      11.5px;
  color:          var(--ink-faint);
  margin-top:     6px;
  font-weight:    500;
}

/* ── STEP NAV ───────────────────────────────────────────────── */
.step-nav.locked { pointer-events: none; user-select: none; }
.step-nav {
  display:       flex;
  align-items:   center;
  gap:           4px;
  margin-bottom: 2.25rem;
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: 50px;
  padding:       5px;
  width:         fit-content;
  margin-left:   auto;
  margin-right:  auto;
  box-shadow:    var(--sh-sm);
}
.step-btn {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     8px 18px;
  border-radius:40px;
  border:      none;
  background:  transparent;
  cursor:      pointer;
  font-family: 'Roboto', sans-serif;
  font-size:   13px;
  font-weight: 500;
  color:       var(--ink-soft);
  transition:  all .2s;
  white-space: nowrap;
}
.step-btn .snum {
  width:       22px;
  height:      22px;
  border-radius:50%;
  background:  var(--surface-3);
  color:       var(--ink-soft);
  font-size:   11px;
  font-weight: 700;
  display:     flex;
  align-items: center;
  justify-content:center;
  transition:  all .2s;
  flex-shrink: 0;
}
.step-btn.active {
  background:  var(--ink);
  color:       #fff;
  font-weight: 600;
  box-shadow:  0 2px 8px rgba(0,0,0,.25);
}
.step-btn.active .snum {
  background: rgba(255,255,255,.2);
  color:      #fff;
}
.step-btn.done { color: var(--success); }
.step-btn.done .snum {
  background: var(--success-light);
  color:      var(--success);
}

/* ── FORM CARD ──────────────────────────────────────────────── */
.form-card {
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: var(--rl);
  padding:       2.5rem;
  box-shadow:    var(--sh);
}
.section-head {
  margin-bottom: 2rem;
  padding-bottom:1.5rem;
  border-bottom: 1px solid var(--border);
}
.section-head h2 {
  font-family: 'Roboto', sans-serif;
  font-size:    22px;
  font-weight:  700;
  color:        var(--ink);
  letter-spacing:-0.3px;
  margin-bottom:.4rem;
}
.section-head p {
  color:      var(--ink-soft);
  font-size:  14px;
  line-height:1.6;
  font-weight:400;
}

/* ── FORM GRID ──────────────────────────────────────────────── */
.form-grid           { display: grid; grid-template-columns: 1fr 1fr;    gap: 1.25rem; }
.form-grid.cols3     { grid-template-columns: 1fr 1fr 1fr; }
.field               { display: flex; flex-direction: column; gap: 6px; }

label {
  font-size:    12.5px;
  font-weight:  600;
  color:        var(--ink-mid);
  letter-spacing:.01em;
}
label .req { color: var(--danger); margin-left: 2px; }

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
select,
textarea {
  font-family: 'Roboto', sans-serif;
  font-size:   13.5px;
  color:       var(--ink);
  background:  var(--surface);
  border:      1.5px solid var(--border);
  border-radius:var(--rs);
  padding:     10px 13px;
  width:       100%;
  outline:     none;
  transition:  border-color .15s, box-shadow .15s, background .15s;
  appearance:  none;
  -webkit-appearance:none;
  font-weight: 400;
}
select {
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position:right 12px center;
  padding-right:      36px;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--ink);
  box-shadow:  0 0 0 3px rgba(0,0,0,.08);
  background:  #fafafa;
}
input::placeholder, textarea::placeholder {
  color:      var(--ink-faint);
  font-weight:400;
}
textarea {
  resize:     vertical;
  min-height: 90px;
}
.sub-section {
  margin-top:  2rem;
  padding-top: 2rem;
  border-top:  1px solid var(--border);
}
.sub-section-label {
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:         var(--ink-faint);
  margin-bottom: 1rem;
}
.location-note {
  font-size:  12px;
  color:      var(--ink-faint);
  margin-top: 5px;
  font-weight:400;
}

/* ── DOB CALENDAR ───────────────────────────────────────────── */
#dob { display: none; }
.dob-wrap     { position: relative; }
.dob-trigger  {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  gap:            10px;
  width:          100%;
  padding:        10px 13px;
  background:     var(--surface);
  border:         1.5px solid var(--border);
  border-radius:  var(--rs);
  font-family:    'Roboto', sans-serif;
  font-size:      13.5px;
  color:          var(--ink);
  cursor:         pointer;
  transition:     border-color .15s, box-shadow .15s;
  text-align:     left;
}
.dob-trigger:hover { border-color: var(--border-strong); }
.dob-trigger.open  {
  border-color:var(--ink);
  box-shadow:  0 0 0 3px rgba(0,0,0,.08);
  background:  #fafafa;
}
.dob-text       { flex: 1; font-weight: 400; }
.dob-text.empty { color: var(--ink-faint); }

.dob-popup {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  z-index:       300;
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow:    var(--sh-lg);
  width:         290px;
  overflow:      hidden;
}
.dob-popup.open { display: block; animation: drop .16s ease; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cal-header {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  padding:        12px 14px 10px;
  border-bottom:  1px solid var(--border);
  gap:            6px;
}
.cal-nav {
  width:        28px;
  height:       28px;
  border:       1.5px solid var(--border);
  border-radius:6px;
  background:   var(--surface);
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content:center;
  color:        var(--ink-soft);
  flex-shrink:  0;
  transition:   all .12s;
}
.cal-nav:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-3); }
.cal-selects {
  display:        flex;
  align-items:    center;
  gap:            6px;
  flex:           1;
  justify-content:center;
}
.cal-sel {
  font-family:  'Roboto', sans-serif;
  font-size:    12.5px;
  font-weight:  600;
  color:        var(--ink);
  background:   var(--surface-2);
  border:       1.5px solid var(--border);
  border-radius:6px;
  padding:      4px 8px;
  cursor:       pointer;
  appearance:   none;
  outline:      none;
  transition:   border-color .12s;
}
.cal-sel:focus { border-color: var(--ink); }
#calMonthSel   { min-width: 100px; }
#calYearSel    { min-width: 64px; }

.cal-dow {
  display:  grid;
  grid-template-columns: repeat(7,1fr);
  padding:  8px 10px 4px;
  gap:      2px;
}
.cal-dow span {
  text-align:    center;
  font-size:     10px;
  font-weight:   700;
  letter-spacing:.05em;
  color:         var(--ink-faint);
  text-transform:uppercase;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  padding: 2px 10px 10px;
  gap:     2px;
}
.cal-day {
  aspect-ratio:   1;
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      12.5px;
  color:          var(--ink);
  border-radius:  6px;
  cursor:         pointer;
  transition:     background .1s, color .1s;
  border:         none;
  background:     transparent;
  font-family:    'Roboto', sans-serif;
  font-weight:    400;
}
.cal-day:hover:not(.empty):not(.sel) { background: var(--surface-3); }
.cal-day.today  { font-weight: 700; }
.cal-day.sel    { background: var(--ink); color: #fff; font-weight: 600; }
.cal-day.empty  { cursor: default; pointer-events: none; }

/* ── SCORE GRID ─────────────────────────────────────────────── */
.score-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(148px,1fr)); gap: 1rem; }
.score-item {
  background:    var(--surface-2);
  border:        1.5px solid var(--border);
  border-radius: var(--rs);
  padding:       14px;
  transition:    border-color .15s;
}
.score-item:focus-within { border-color: var(--ink); background: #fafafa; }
.score-item label {
  font-size:     11px;
  color:         var(--ink-soft);
  display:       block;
  margin-bottom: 6px;
  font-weight:   700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.score-item input {
  font-size:   20px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  border:      none;
  background:  transparent;
  padding:     0;
  color:       var(--ink);
  width:       100%;
}
.score-item input:focus { box-shadow: none; border: none; background: transparent; }

/* ── CHIPS ──────────────────────────────────────────────────── */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     7px 15px;
  border-radius:40px;
  border:      1.5px solid var(--border);
  background:  var(--surface);
  font-size:   13px;
  font-weight: 500;
  color:       var(--ink-mid);
  cursor:      pointer;
  transition:  all .15s;
  user-select: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-3); }
.chip.selected {
  background:  var(--ink);
  border-color:var(--ink);
  color:       #fff;
  font-weight: 600;
}
.chip input { display: none; }

/* ── TAG INPUT ──────────────────────────────────────────────── */
.tag-wrap {
  border:        1.5px solid var(--border);
  border-radius: var(--rs);
  padding:       8px;
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  min-height:    46px;
  background:    var(--surface);
  transition:    border-color .15s, box-shadow .15s;
  cursor:        text;
}
.tag-wrap:focus-within {
  border-color:var(--ink);
  box-shadow:  0 0 0 3px rgba(0,0,0,.08);
  background:  #fafafa;
}
.tag {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  background:  var(--surface-3);
  color:       var(--ink);
  border:      1px solid var(--border-strong);
  border-radius:20px;
  padding:     3px 10px;
  font-size:   12.5px;
  font-weight: 600;
}
.tag-x {
  cursor:     pointer;
  color:      var(--ink-soft);
  font-size:  15px;
  line-height:1;
  transition: color .1s;
}
.tag-x:hover { color: var(--danger); }
.tag-input {
  border:     none;
  outline:    none;
  font-family:'Roboto', sans-serif;
  font-size:  13.5px;
  color:      var(--ink);
  background: transparent;
  min-width:  120px;
  flex:       1;
  padding:    2px 4px;
  font-weight:400;
}
.tag-input::placeholder { color: var(--ink-faint); }

/* ── RANGE ──────────────────────────────────────────────────── */
.range-wrap   { display: flex; flex-direction: column; gap: 6px; }
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.range-val    { font-family: 'Roboto Slab', serif; font-size: 18px; font-weight: 700; color: var(--ink); }

input[type=range] {
  -webkit-appearance:none;
  width:        100%;
  height:       4px;
  background:   var(--surface-3);
  border-radius:4px;
  border:       none;
  outline:      none;
  padding:      0;
  box-shadow:   none;
}
input[type=range]:focus { box-shadow: none; border: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:        20px;
  height:       20px;
  border-radius:50%;
  background:   var(--ink);
  cursor:       pointer;
  border:       3px solid #fff;
  box-shadow:   0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.2);
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      2.5rem;
  padding-top:     1.75rem;
  border-top:      1px solid var(--border);
  gap:             1rem;
}
.btn-row-submit {
  flex-direction:  column;
  align-items:     stretch;
  gap:             0.5rem;
}
.btn-row-submit .captcha-err { margin-bottom: 0; }
.btn-row-main {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
}
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  padding:     11px 22px;
  border-radius:50px;
  font-family: 'Roboto', sans-serif;
  font-size:   13.5px;
  font-weight: 600;
  cursor:      pointer;
  border:      none;
  transition:  all .18s;
  text-decoration:none;
  letter-spacing:.01em;
}
.btn-primary {
  background:  var(--ink);
  color:       #fff;
  box-shadow:  0 2px 8px rgba(0,0,0,.2);
}
.btn-primary:hover {
  background:  #333;
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px rgba(0,0,0,.3);
}
.btn-ghost {
  background:  transparent;
  color:       var(--ink-soft);
  border:      1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--ink); }
.btn-teal {
  background:  var(--ink);
  color:       #fff;
  box-shadow:  0 2px 8px rgba(0,0,0,.2);
}
.btn-teal:hover { background: #333; transform: translateY(-1px); }
.btn-lg { padding: 14px 30px; font-size: 15px; }

/* ── ALERT ──────────────────────────────────────────────────── */
.alert {
  padding:     11px 15px;
  border-radius:var(--rs);
  font-size:   13px;
  margin-bottom:1rem;
  display:     none;
  align-items: center;
  gap:         8px;
  background:  var(--danger-light);
  border:      1px solid #e8b4b0;
  color:       var(--danger);
  font-weight: 500;
}
.alert.show { display: flex; }

/* ── INLINE FIELD ERROR ─────────────────────────────────────── */
.field-error {
  font-size:  11.5px;
  color:      var(--danger);
  font-weight:500;
  margin-top: 3px;
  display:    none;
}
.field-error.show { display: block; }
input.error, select.error, .dob-trigger.error, .tag-wrap.error {
  border-color:var(--danger) !important;
  box-shadow:  0 0 0 3px rgba(192,57,43,.1) !important;
}

/* ── STEP VISIBILITY ────────────────────────────────────────── */
.step-content { display: none; }
.step-content.active {
  display:   block;
  animation: fadeUp .3s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CONSENT BOX ────────────────────────────────────────────── */
.consent-box {
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  margin-top:   1.5rem;
  padding:      14px;
  background:   var(--surface-2);
  border-radius:var(--rs);
  border:       1px solid var(--border);
}
.consent-box input[type=checkbox] {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  margin-top:  2px;
  accent-color:var(--ink);
  cursor:      pointer;
}
.consent-box label {
  font-size:  13px;
  color:      var(--ink-mid);
  font-weight:400;
  cursor:     pointer;
  line-height:1.55;
}

/* ── CAPTCHA ────────────────────────────────────────────────── */
.captcha-notice {
  font-size:  11.5px;
  color:      var(--ink-faint);
  text-align: right;
  margin-top: 8px;
}
.captcha-notice a { color: var(--ink-soft); text-decoration: underline; }
.captcha-err {
  display:      none;
  align-items:  center;
  gap:          8px;
  padding:      10px 14px;
  background:   var(--danger-light);
  border:       1px solid #e8b4b0;
  border-radius:var(--rs);
  font-size:    13px;
  color:        var(--danger);
  margin-bottom:.75rem;
  font-weight:  500;
}
.captcha-err.show { display: flex; }

/* ── ASSISTANCE CHECKBOXES ──────────────────────────────────── */
.assistance-section {
  margin-top:   2rem;
  padding-top:  2rem;
  border-top:   1px solid var(--border);
}
.assistance-label {
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:         var(--ink-faint);
  margin-bottom: 1rem;
}
.assistance-option {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       14px 16px;
  border:        1.5px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 8px;
  cursor:        pointer;
  transition:    border-color .15s, background .15s;
  background:    var(--surface);
}
.assistance-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.assistance-option.selected { border-color: var(--ink); background: var(--surface-3); }
.assistance-option input[type=radio] {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  margin-top:  3px;
  accent-color:var(--ink);
  cursor:      pointer;
}
.assistance-option-content { flex: 1; }
.assistance-option-title {
  font-size:   13.5px;
  font-weight: 600;
  color:       var(--ink);
  margin-bottom:3px;
}
.assistance-option-desc {
  font-size:  12px;
  color:      var(--ink-soft);
  line-height:1.5;
  font-weight:400;
}

/* ── LOADING / TIMER ────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  display:        none;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding:        4rem 2rem;
  text-align:     center;
}
.loading-overlay.show { display: flex; }

/* 120-second countdown timer */
.timer-wrap {
  position:     relative;
  width:        120px;
  height:       120px;
  margin-bottom:1.5rem;
}
.timer-svg { transform: rotate(-90deg); }
.ring-bg {
  fill:         none;
  stroke:       var(--surface-3);
  stroke-width: 6;
}
.ring-fill {
  fill:              none;
  stroke:            var(--ink);
  stroke-width:      6;
  stroke-linecap:    round;
  stroke-dasharray:  339;
  stroke-dashoffset: 0;
  transition:        stroke-dashoffset 1s linear, stroke .3s;
}
.ring-fill.urgent   { stroke: var(--warn); }
.ring-fill.overtime { stroke: var(--danger); }

.timer-inner {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}
.timer-num {
  font-family: 'Roboto Slab', serif;
  font-size:   30px;
  font-weight: 700;
  color:       var(--ink);
  line-height: 1;
}
.timer-sec {
  font-size:     11px;
  color:         var(--ink-faint);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:   500;
}

.loading-title {
  font-family:  'Roboto Slab', serif;
  font-size:    20px;
  font-weight:  700;
  color:        var(--ink);
  margin-bottom:.4rem;
}
.loading-sub {
  color:       var(--ink-soft);
  font-size:   13.5px;
  margin-bottom:1.5rem;
  max-width:   340px;
  font-weight: 400;
}
.loading-steps   { display: flex; flex-direction: column; gap: 8px; max-width: 360px; width: 100%; }
.loading-step {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
  color:       var(--ink-faint);
  text-align:  left;
  padding:     9px 14px;
  border-radius:var(--rs);
  transition:  all .35s;
  font-weight: 400;
}
.loading-step.active {
  color:       var(--ink);
  font-weight: 600;
  background:  var(--surface-3);
  border:      1px solid var(--border);
}
.loading-step.done {
  color:       var(--success);
  background:  var(--success-light);
}
.step-dot {
  width:       8px;
  height:      8px;
  border-radius:50%;
  background:  currentColor;
  flex-shrink: 0;
}

/* ── RESULTS ────────────────────────────────────────────────── */
.results-header {
  background:   var(--surface);
  border:       1.5px solid var(--border);
  border-radius:var(--rl);
  padding:      1.75rem 2rem;
  margin-bottom:1.5rem;
  display:      flex;
  align-items:  flex-start;
  justify-content:space-between;
  flex-wrap:    wrap;
  gap:          1rem;
  box-shadow:   var(--sh-sm);
}
.results-header h2 {
  font-family:  'Roboto Slab', serif;
  font-size:    22px;
  font-weight:  700;
  color:        var(--ink);
  letter-spacing:-0.3px;
  margin-bottom:.3rem;
}
.results-header p { font-size: 13.5px; color: var(--ink-soft); font-weight: 400; }
.results-actions  { display: flex; gap: 8px; flex-wrap: wrap; }

.filter-bar {
  background:   var(--surface);
  border:       1.5px solid var(--border);
  border-radius:var(--r);
  padding:      14px 18px;
  margin-bottom:1.25rem;
  display:      flex;
  align-items:  center;
  gap:          12px;
  flex-wrap:    wrap;
  box-shadow:   var(--sh-sm);
}
.filter-bar label {
  font-size:     12px;
  font-weight:   700;
  color:         var(--ink-mid);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.filter-chip {
  padding:      5px 13px;
  border-radius:20px;
  border:       1.5px solid var(--border);
  background:   var(--surface);
  font-size:    12.5px;
  font-weight:  500;
  color:        var(--ink-soft);
  cursor:       pointer;
  transition:   all .15s;
}
.filter-chip:hover  { border-color: var(--ink); color: var(--ink); }
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

.sort-sel {
  margin-left:  auto;
  font-family:  'Roboto', sans-serif;
  font-size:    13px;
  color:        var(--ink);
  background:   var(--surface-2);
  border:       1.5px solid var(--border);
  border-radius:var(--rs);
  padding:      6px 32px 6px 12px;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position:right 10px center;
  appearance:   none;
  outline:      none;
}
.sort-sel:focus { border-color: var(--ink); }

.ai-banner {
  background:   var(--surface-2);
  border:       1px solid var(--border);
  border-radius:var(--r);
  padding:      13px 17px;
  margin-bottom:1.25rem;
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  font-size:    13px;
  color:        var(--ink-mid);
  line-height:  1.5;
  font-weight:  400;
}
.ai-dot {
  width:        8px;
  height:       8px;
  border-radius:50%;
  background:   var(--ink);
  flex-shrink:  0;
  margin-top:   4px;
  animation:    pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.4); }
}

.uni-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

.profile-summary {
  background:   var(--surface);
  border:       1.5px solid var(--border);
  border-radius:var(--r);
  padding:      1.25rem 1.5rem;
  margin-bottom:1.25rem;
  display:      grid;
  grid-template-columns: repeat(auto-fill,minmax(175px,1fr));
  gap:          1rem;
}
.profile-item .plabel {
  font-size:     10.5px;
  color:         var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom: 2px;
  font-weight:   700;
}
.profile-item .pval {
  font-size:  13.5px;
  font-weight:600;
  color:      var(--ink);
}

/* ── UNI CARDS ──────────────────────────────────────────────── */
.uni-card {
  background:   var(--surface);
  border:       1.5px solid var(--border);
  border-radius:var(--rl);
  padding:      1.6rem 1.8rem;
  box-shadow:   var(--sh-sm);
  transition:   box-shadow .2s, border-color .2s, transform .2s;
  position:     relative;
  overflow:     hidden;
}
.uni-card:hover {
  box-shadow:   var(--sh);
  border-color: var(--border-strong);
  transform:    translateY(-1px);
}
.uni-card::before {
  content:  '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width:    4px;
}
.rank-1::before  { background: #0a0a0a; }
.rank-2::before  { background: #4a4a4a; }
.rank-3::before  { background: #7a7a7a; }
.rank-other::before { background: var(--border-strong); }

.uni-card.not-eligible  { opacity: .88; border-color: #e8b4b0; }
.uni-card.not-eligible::before { background: var(--danger); }
.uni-card.conditional::before  { background: var(--warn); }

.uni-top {
  display:        flex;
  align-items:    flex-start;
  justify-content:space-between;
  gap:            1rem;
  margin-bottom:  1rem;
}
.uni-main h3 {
  font-family:  'Roboto Slab', serif;
  font-size:    18px;
  font-weight:  700;
  color:        var(--ink);
  margin-bottom:4px;
  line-height:  1.25;
}
.uni-meta   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-tag   { font-size: 12px; color: var(--ink-soft); font-weight: 400; }

.badge-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.match-badge {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  padding:     5px 12px;
  border-radius:20px;
  font-size:   12px;
  font-weight: 700;
}
.match-high { background: var(--success-light); color: var(--success); }
.match-mid  { background: var(--surface-3);     color: var(--ink-mid); }
.match-low  { background: var(--danger-light);  color: var(--danger); }

.elig-badge {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     4px 11px;
  border-radius:20px;
  font-size:   11.5px;
  font-weight: 700;
}
.elig-yes  { background: var(--success-light); color: var(--success); border: 1px solid #a7f3d0; }
.elig-no   { background: var(--danger-light);  color: var(--danger);  border: 1px solid #e8b4b0; }
.elig-cond { background: var(--warn-light);    color: var(--warn);    border: 1px solid #e8c97a; }

.uni-courses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.course-chip {
  font-size:    12px;
  padding:      4px 11px;
  background:   var(--surface-3);
  color:        var(--ink-mid);
  border-radius:20px;
  font-weight:  600;
  border:       1px solid var(--border);
}

.uni-details {
  display:     grid;
  grid-template-columns: repeat(auto-fill,minmax(165px,1fr));
  gap:         8px;
  border-top:  1px solid var(--border);
  padding-top: 1rem;
  margin-top:  .5rem;
}
.detail-item  { display: flex; flex-direction: column; gap: 2px; }
.dlabel {
  font-size:     10.5px;
  color:         var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:   700;
}
.dval { font-size: 13px; font-weight: 500; color: var(--ink); }

.elig-block {
  margin-top:   1rem;
  padding:      12px 15px;
  border-radius:var(--rs);
  font-size:    13px;
}
.elig-block.not-ok { background: var(--danger-light); border: 1px solid #e8b4b0; }
.elig-block.cond   { background: var(--warn-light);   border: 1px solid #e8c97a; }
.elig-block .etitle { font-weight: 700; margin-bottom: 6px; }
.elig-block ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.elig-block ul li { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-mid); font-weight: 400; }
.elig-block ul li::before { content: '•'; flex-shrink: 0; }
.suggestions-wrap { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.07); }
.suggestions-wrap strong { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; font-weight: 700; }
.suggestions-wrap ul li::before { content: '→'; }

.uni-link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  margin-top:  12px;
  font-size:   12.5px;
  color:       var(--ink);
  text-decoration:none;
  font-weight: 600;
  border-bottom:1.5px solid var(--border);
  padding-bottom:1px;
}
.uni-link:hover { border-color: var(--ink); }

.timeout-card {
  background:   var(--surface);
  border:       1.5px solid var(--border);
  border-radius:var(--rl);
  padding:      2.5rem;
  text-align:   center;
  max-width:    480px;
  margin:       0 auto;
}
.timeout-card h3 {
  font-family:  'Roboto Slab', serif;
  font-size:    20px;
  color:        var(--ink);
  margin-bottom:.75rem;
}
.timeout-card p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 1.25rem; line-height: 1.6; font-weight: 400; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  text-align:  center;
  padding:     2.5rem 1.5rem;
  color:       var(--ink-faint);
  font-size:   12px;
  border-top:  1px solid var(--border);
  margin-top:  3rem;
  font-weight: 400;
}
.site-footer a { color: var(--ink-soft); text-decoration: underline; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .form-grid       { grid-template-columns: 1fr; }
  .form-grid.cols3 { grid-template-columns: 1fr 1fr; }
  .form-card       { padding: 1.5rem 1.25rem; }
  .site-header     { padding: 0 1rem; }
  .hero            { padding: 2.5rem 1rem 2rem;  padding-top: 120px;}
  .stepper-wrap    { padding: 1.5rem 1rem; }
  .step-nav        { overflow-x: auto; width: 100%; border-radius: 14px; }
  .btn-row         { flex-direction: column; align-items: stretch; }
  .btn-row > div   { width: 100%; align-items: stretch !important; }
  .btn-row-main    { flex-direction: column; align-items: stretch; }
  .btn             { justify-content: center; }
  .filter-bar      { gap: 8px; }
  .sort-sel        { margin-left: 0; width: 100%; }
  .uni-top         { flex-direction: column; }
  .badge-stack     { align-items: flex-start; }
  .assistance-option { flex-direction: row; }

  /* location grid: full-width stacked on mobile */
  .form-grid.location-grid { grid-template-columns: 1fr; }

  /* hero-stats: 2×2 grid on mobile */
  .hero-stats {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    max-width:             100%;
    border-radius:         10px;
  }
  .hero-stat {
    min-width:    0;
    padding:      14px 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* right column: no right-border needed; add left divider instead */
  .hero-stat:nth-child(odd)  { border-right: 1px solid var(--border); }
  /* bottom row: no bottom border */
  .hero-stat:nth-child(3),
  .hero-stat:nth-child(4)   { border-bottom: none; }
  .hero-stat .num { font-size: 20px; }
  .hero-stat .lbl { font-size: 10px; }
}

/* ── PRINT ──────────────────────────────────────────────────── */
@media print {
  .site-header, .step-nav, .btn-row, .progress-wrap,
  .results-actions, .ai-dot, .filter-bar { display: none !important; }
  .form-card, .uni-card, .results-header { box-shadow: none; border: 1px solid #ccc; }
}