:root{
  --ink:#0f1a2e; --ink-2:#3d4a63; --ink-3:#66738c;
  --line:#e2e8f3; --line-2:#c9d3e6;
  --bg:#f3f6fc; --card:#ffffff;
  --brand:#2456d6; --brand-2:#1a44b8; --brand-soft:#e8efff;
  --accent:#f26a1b; --accent-soft:#fff1e7;
  --ok:#12875a; --ok-soft:#e5f6ee;
  --warn:#a46203; --warn-soft:#fff5dc;
  --bad:#9c2b2b; --bad-soft:#fbeaea;
  --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(15,26,46,.04), 0 10px 28px rgba(36,86,214,.07);
  --purple:#6b4fe0; --purple-soft:#efebff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 16px}

header.site{background:var(--brand);color:#fff;padding:14px 0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:650;font-size:19px;letter-spacing:-.2px;color:#fff;display:flex;align-items:center;gap:9px}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--brand);display:grid;place-items:center;font-size:14px;font-weight:700}
header.site nav{display:flex;gap:18px;font-size:14px}
header.site nav a{color:#c9d7ec}
header.site nav a:hover{color:#fff}
header.site nav a.switch{color:#fff;border:1px solid rgba(255,255,255,.3);padding:4px 11px;border-radius:99px;font-size:13px}
header.site nav a.switch:hover{background:rgba(255,255,255,.12);text-decoration:none}
@media(max-width:640px){
  header.site .wrap{flex-wrap:wrap;gap:8px}
  header.site nav{width:100%;gap:14px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  header.site nav a{white-space:nowrap}
}

h1{font-size:27px;line-height:1.25;letter-spacing:-.4px;margin:0 0 8px;font-weight:650}
h2{font-size:20px;line-height:1.3;margin:0 0 10px;font-weight:620}
h3{font-size:16px;margin:0 0 8px;font-weight:620}
.lede{color:var(--ink-2);font-size:16px;margin:0 0 24px}
.muted{color:var(--ink-3)}
.small{font-size:13px}
section.pad{padding:28px 0}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}

.grid{display:grid;gap:14px}
@media(min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}

.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;letter-spacing:.2px}
.tag.mou{background:var(--ok-soft);color:var(--ok)}
.tag.t2{background:var(--brand-soft);color:var(--brand)}
.tag.t3{background:var(--warn-soft);color:var(--warn)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.neutral{background:#eef0f4;color:var(--ink-2)}

.college-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);color:inherit}
.college-card:hover{border-color:var(--line-2);text-decoration:none;transform:translateY(-1px);transition:.15s}
.college-card h3{margin:8px 0 4px}
.college-card .meta{color:var(--ink-3);font-size:13.5px}
.college-card .fee{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.college-card .fee b{color:var(--ink);font-weight:620}

label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;padding:11px 13px;font-size:16px;font-family:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);appearance:none;
}
select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7589' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(39,80,143,.13)}
.field{margin-bottom:15px}
.field .err{color:var(--bad);font-size:13px;margin-top:5px;display:none}
.field.has-err input,.field.has-err select{border-color:var(--bad)}
.field.has-err .err{display:block}
.row{display:grid;gap:14px}
@media(min-width:560px){.row.two{grid-template-columns:1fr 1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;font-size:15px;font-weight:620;font-family:inherit;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;width:100%}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-2)}
.btn.primary:disabled{background:#9aa6bd;cursor:not-allowed}
.btn.accent{background:var(--accent);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:#f3f5f9}
.btn.sm{padding:7px 13px;font-size:13.5px;width:auto}
.btn:hover{text-decoration:none}

.notice{padding:12px 14px;border-radius:var(--r);font-size:14px;line-height:1.5}
.notice.info{background:var(--brand-soft);color:var(--brand)}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.bad{background:var(--bad-soft);color:var(--bad)}
.notice.ok{background:var(--ok-soft);color:var(--ok)}

.steps{display:flex;gap:6px;margin-bottom:20px}
.step{flex:1;height:3px;border-radius:2px;background:var(--line)}
.step.done{background:var(--brand)}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:720px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat .k{font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.stat .v{font-size:24px;font-weight:650;letter-spacing:-.5px}
.stat .d{font-size:12px;color:var(--ink-3);margin-top:3px}

.bar{height:5px;background:#eef0f4;border-radius:3px;overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;background:var(--brand-2);border-radius:3px}
.bar.good span{background:var(--ok)}
.funnel-row{padding:11px 0;border-bottom:1px solid var(--line)}
.funnel-row:last-child{border-bottom:0}
.funnel-row .top{display:flex;justify-content:space-between;font-size:14px}
.funnel-row .top b{font-weight:620}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:600;color:var(--ink-3);font-size:12px;letter-spacing:.3px;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll table{min-width:720px}

.copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.copy-row:last-child{border-bottom:0}
.copy-row .lab{font-size:13px;color:var(--ink-3);flex:0 0 40%}
.copy-row .val{font-size:14.5px;font-weight:550;flex:1;word-break:break-word}
.copy-btn{flex:0 0 auto;padding:6px 11px;font-size:12.5px;font-weight:600;border:1px solid var(--line-2);background:#fff;border-radius:7px;cursor:pointer;color:var(--ink-2)}
.copy-btn:hover{background:#f3f5f9}
.copy-btn.done{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)}

.alias{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r);padding:11px 13px;word-break:break-all}

footer.site{padding:30px 0;color:var(--ink-3);font-size:13px;border-top:1px solid var(--line);margin-top:40px}
.hide{display:none}

/* Searchable select — used everywhere a list is longer than about eight items */
.fb-combo{position:relative}
.fb-combo-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  min-height:44px;padding:6px 10px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);cursor:text}
.fb-combo.is-open .fb-combo-box{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(39,80,143,.13)}
.fb-combo-input{flex:1;min-width:120px;border:0;outline:0;padding:4px 0;font-size:16px;font-family:inherit;background:transparent}
.fb-combo-input:focus{outline:0;border:0;box-shadow:none}
.fb-combo-tags{display:flex;flex-wrap:wrap;gap:6px}
.fb-combo-tag{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand);
  font-size:13.5px;font-weight:550;padding:4px 6px 4px 10px;border-radius:99px}
.fb-combo-x{border:0;background:transparent;color:var(--brand);font-size:17px;line-height:1;cursor:pointer;padding:0 4px;border-radius:99px}
.fb-combo-x:hover{background:rgba(27,58,107,.12)}
.fb-combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);
  max-height:300px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 10px 30px rgba(18,24,38,.14)}
.fb-combo-group{padding:9px 13px 5px;font-size:11.5px;font-weight:650;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink-3);background:#fbfbfd;position:sticky;top:0}
.fb-combo-item{display:flex;align-items:baseline;gap:9px;padding:11px 13px;cursor:pointer;font-size:15px;min-height:44px}
.fb-combo-item.is-active{background:var(--brand-soft)}
.fb-combo-item.is-chosen{font-weight:600}
.fb-combo-label{flex:0 0 auto}
.fb-combo-sub{font-size:12.5px;color:var(--ink-3);flex:1;text-align:right}
.fb-combo-check{color:var(--ok);font-weight:700}
.fb-combo-empty{padding:18px 14px;color:var(--ink-3);font-size:14px}
.fb-combo-empty-hint{font-size:12.5px;margin-top:4px;color:var(--ink-3)}

/* Full-width layout with a sticky rail — laptop gets two zones, mobile stacks */
.wrap{max-width:1180px}
.layout-rail{display:grid;gap:22px}
/* A grid item is min-width:auto by default, which means the track grows to
   fit its widest child rather than the child scrolling inside it. The table
   inside .scroll declares min-width:640px on a phone, so the column became
   640px wide inside a 360px screen and the whole page scrolled sideways --
   the scroller was there, it just had nothing to scroll against. This is the
   line that makes every .scroll on a rail page actually scroll. */
.layout-rail > *{min-width:0}
.layout-rail-side{order:-1}
.rail-card{position:static}
@media(min-width:960px){
  .layout-rail{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .layout-rail-side{order:0}
  .rail-card{position:sticky;top:20px}
}

.update-row{display:grid;gap:10px;padding:15px 0;border-bottom:1px solid var(--line)}
.update-row:last-child{border-bottom:0;padding-bottom:0}
.update-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(min-width:720px){
  .update-row{grid-template-columns:170px 1fr;gap:18px;align-items:start}
  .update-meta{flex-direction:column;align-items:flex-start;gap:5px}
}
.empty-state{padding:26px 4px;text-align:center;color:var(--ink-2)}


/* ---- Google sign-in -------------------------------------------------------
   Google publishes branding rules for this button: their mark, unaltered, on
   white, with the words "Continue with Google". Full width on a phone so it is
   the easiest thing on the screen to hit. */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;min-height:46px;padding:11px 16px;
  background:#fff;color:#3c4043;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:15px;font-weight:550;letter-spacing:.1px;cursor:pointer;
}
.btn-google:hover{background:#f8f9fb;border-color:var(--ink-3);text-decoration:none}
.btn-google:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.btn-google svg{flex:0 0 18px}

.or-rule{display:flex;align-items:center;gap:12px;margin:18px 0 20px;color:var(--ink-3);font-size:13px}
.or-rule::before,.or-rule::after{content:"";flex:1;height:1px;background:var(--line)}

.g-done{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:12px 14px;
  background:var(--ok-soft);border:1px solid #bfe0d2;border-radius:var(--r);
}
.g-done .g-tick{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:12px;line-height:1;
}
.g-done b{font-weight:600;font-size:15px}

/* ---- "use my current location" ------------------------------------------- */
.locate{margin:0 0 20px;padding:14px;background:var(--brand-soft);border:1px solid #d3e0f3;border-radius:var(--r)}
.locate .btn{margin:0}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line-2)}
.btn.ghost:hover{background:#f8f9fb;border-color:var(--brand-2)}

/* ---- the sign-in log on a candidate record ------------------------------- */
.signin-log{width:100%;border-collapse:collapse;font-size:14px}
.signin-log th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);padding:0 10px 8px;font-weight:600}
.signin-log td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:top}
.signin-log .chan{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand)}
.signin-log .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink-2)}

/* ---- mail desk ----------------------------------------------------------- */
.queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.queue-card{display:block;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);color:inherit}
.queue-card:hover{border-color:var(--brand-2);text-decoration:none}
.queue-card.is-breached{border-color:#e4b4b4;background:#fffafa}
.qc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.qc-top b{font-size:16px}
.qc-addr{font-size:12px;color:var(--ink-3);margin-bottom:12px;word-break:break-all}
.qc-nums{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.qc-nums b{font-size:18px;color:var(--ink)}
.qc-nums .bad b{color:var(--bad)}
.qc-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

.prio{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap}
.p-critical{background:var(--bad-soft);color:var(--bad)}
.p-high{background:var(--warn-soft);color:var(--warn)}
.p-normal{background:var(--brand-soft);color:var(--brand)}
.p-low{background:#f0f1f4;color:var(--ink-3)}

.msg{padding:14px 16px;border-radius:var(--r);margin-bottom:12px;border:1px solid var(--line)}
.msg.in{background:#fff}
.msg.out{background:var(--brand-soft);border-color:#d3e0f3}
.msg-head{margin-bottom:8px}
.msg-body{white-space:pre-wrap;font-size:15px;line-height:1.6}

.sel{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font:inherit;font-size:14px;margin-bottom:9px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:9px 0;border-top:1px solid var(--line);line-height:1.45}
.timeline li:first-child{border-top:0}
.btn.ghost.sm.is-on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- build page ---------------------------------------------------------- */
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) 180px 60px;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.bar-row:first-child{border-top:0}
.bar{height:8px;background:#eceef3;border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--brand-2);border-radius:99px;transition:width .4s ease}
.bar-num{text-align:right;color:var(--ink-3)}
@media(max-width:700px){
  .bar-row{grid-template-columns:minmax(0,1fr) 54px}
  .bar{grid-column:1 / -1;order:3}
}
.next-list{list-style:none;margin:0;padding:0}
.next-list li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.next-list li:first-child{border-top:0}
.flag-counts{display:flex;gap:7px;flex-wrap:wrap}
.flag-list{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto}
.flag-list li{padding:7px 0;border-top:1px solid var(--line);line-height:1.4}
.flag-list li:first-child{border-top:0}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dot.on{background:var(--ok)}
.dot.off{background:var(--line-2)}

.canned-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.closes-card{margin-bottom:16px}
.mou-form .mou-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mou-form input, .mou-form select, .mou-form textarea { width: 100%; box-sizing: border-box; }
.mou-form textarea { resize: vertical; font: inherit; padding: 8px 10px; border-radius: 8px; }
.warn-text { color: #9a5b00; }
.closes-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.closes-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.closes-form input{padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:14px;min-width:260px}
.closes-form .btn{margin:0}

.closing-strip{margin-bottom:22px;border-left:3px solid var(--warn)}
.closing-list{display:grid;gap:9px}
.closing-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:9px;border-bottom:1px solid var(--line)}
.closing-item:last-child{border-bottom:0;padding-bottom:0}
.closing-item b{font-weight:600}
.college-card .closes{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:var(--warn)}

/* ---- content desk forms -------------------------------------------------- */
.card .field input[type=text],
.card .field input[type=email],
.card .field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);
  font:inherit;font-size:15px;background:#fff;
}
.card .field textarea{resize:vertical;line-height:1.55}
.card .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.card .field{margin-bottom:16px}

.chip-row{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-block;font-size:12px;padding:4px 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-weight:550}
dl.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-items:baseline}
dl.facts dt{font-size:13px;color:var(--ink-3)}
dl.facts dd{margin:0;font-size:15px}

/* ---- width: full by default, with a toggle -------------------------------
   San's standing rule for every app: full-width layouts, plus a Full screen
   toggle. So the default is wide rather than a column in the middle of a big
   monitor, and the toggle goes edge to edge. Reading columns (.wrap-narrow)
   are left alone: a form or an article at 1800px is harder to use, not easier. */
:root{ --gutter:28px; --wrap-max:1600px; }
.wrap{max-width:var(--wrap-max);padding:0 var(--gutter)}
:root[data-width="full"]{ --wrap-max:100%; --gutter:36px; }
/* Only where there is room for two columns. Without the media query this
   rule applied at 360px too, which gave a phone a 400px rail inside a 360px
   screen and made every detail page scroll sideways -- the bug that five
   measured widths found and nobody reading the stylesheet did. The base
   .layout-rail is a single column until 960px; its full-width variant has to
   agree with it. */
@media(min-width:960px){
  :root[data-width="full"] .layout-rail{grid-template-columns:minmax(0,1fr) 400px}
}
@media(max-width:700px){ :root{ --gutter:16px; } :root[data-width="full"]{ --gutter:16px; } }

.width-toggle{
  display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;font:inherit;font-size:13px;padding:4px 11px;border-radius:99px;cursor:pointer;
}
.width-toggle:hover{background:rgba(255,255,255,.12)}
.width-toggle svg{display:block}
@media(max-width:860px){ .width-toggle{display:none} }

.prose{font-size:17px;line-height:1.7;white-space:pre-wrap}
.prose p{margin:0 0 16px}

/* ---- search on every list ------------------------------------------------
   The standing rule: wherever data is listed it is searchable, suggests and
   scrolls. The box is attached by table-search.js to any table long enough to
   need one, so this styles something that may or may not be there. */
.table-search{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.table-search input{
  flex:1 1 240px;min-width:0;max-width:420px;padding:9px 12px;
  border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:14px;background:#fff;
}
.table-search input:focus{outline:2px solid var(--brand-soft);outline-offset:1px;border-color:var(--brand-2)}
.table-search-count{font-size:13px;color:var(--ink-3)}
.table-search-count.none{color:var(--warn)}

/* A long list scrolls in place instead of pushing the page down for ever. */
.scroll{overflow:auto;-webkit-overflow-scrolling:touch}
.scroll table{min-width:100%}
.scroll.tall{max-height:70vh}

/* Phones: the table scrolls sideways rather than squashing, and the search box
   takes the full width above it. */
@media(max-width:700px){
  .table-search input{max-width:none;flex:1 1 100%}
  .scroll{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .scroll table{min-width:640px}
}

/* ---- policy pages -------------------------------------------------------- */
.policy-body h2{font-size:19px;margin:26px 0 10px}
.policy-body h2:first-child{margin-top:0}
.policy-body h3{font-size:16px;margin:20px 0 8px}
.policy-body p{margin:0 0 12px;line-height:1.65}
.policy-body ul{margin:0 0 14px;padding-left:20px}
.policy-body li{margin-bottom:7px;line-height:1.6}
.foot-links{display:block;margin-top:10px}
.foot-links a{margin-right:14px;color:inherit;text-decoration:underline;opacity:.85}
.mail-body{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:14px;line-height:1.6;margin:0;
  background:#fafbfc;border:1px solid var(--line);border-radius:var(--r);padding:14px;max-height:60vh;overflow:auto}

/* ---- the header's search box --------------------------------------------
   Between the brand and the navigation on a laptop; above the navigation on a
   phone, where it is the most useful thing in the header. */
.site-search{flex:1 1 220px;max-width:360px;margin:0 18px;min-width:0}
.site-search input{
  width:100%;padding:8px 13px;border:1px solid rgba(255,255,255,.28);border-radius:99px;
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:14px;
}
.site-search input::placeholder{color:rgba(255,255,255,.7)}
.site-search input:focus{outline:none;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55)}
@media(max-width:860px){
  header.site .wrap{flex-wrap:wrap}
  .site-search{order:3;flex:1 1 100%;max-width:none;margin:10px 0 0}
}
.filter-bar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.filter-bar .sel{min-width:160px}
@media(max-width:700px){ .filter-bar .field{flex:1 1 100%} .filter-bar .sel{width:100%} }

/* ===========================================================================
   Design tokens — WEB-07
   ===========================================================================
   Everything above this line was written with the numbers typed in at the
   point of use: 14px here, 18px there, 22px somewhere else. That is how a
   stylesheet drifts — each new page picks whichever number looked right that
   afternoon, and after thirty pages nothing lines up with anything.

   A scale fixes the drift by removing the choice. Spacing is a 4px base
   doubling to 64; type is a ratio of about 1.2 from 12px up. New rules below
   use the tokens. Older rules are retrofitted where it is safe to do so and
   left alone where a regex in the layout test pins them, because a stylesheet
   half-converted on purpose is more honest than one converted by hand and
   quietly broken in two places.                                            */

:root{
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:40px; --s-8:64px;

  --t-xs:12px; --t-sm:13.5px; --t-base:16px;
  --t-lg:20px; --t-xl:27px;   --t-2xl:34px;

  /* The one number a finger needs. Apple and Google both land near it, and
     every control below is measured against it rather than against a guess. */
  --touch:44px;
}

/* ---- touch targets — WEB-10 ----------------------------------------------
   Only where there is a finger. A 44px-tall "Copy" button next to a row of
   text looks wrong with a mouse and is the difference between usable and not
   with a thumb, so `pointer:coarse` is the right question to ask rather than
   a width. */
/* `pointer:coarse` is the right question -- is there a finger -- but a browser
   can answer it wrongly, and a 360px-wide screen is a phone whatever it says.
   Either condition applies the floor, so a mouse at 1400px keeps its compact
   controls and a thumb never meets a 31px link. */
@media (pointer:coarse), (max-width:700px){
  .btn, .btn.sm, .copy-btn, .chip, .pager a, .pager span,
  header.site nav a, .foot-links a, .table-search input,
  input[type=text],input[type=tel],input[type=email],input[type=number],
  input[type=date],input[type=password],select,textarea{
    min-height:var(--touch);
  }
  .btn.sm, .copy-btn{ padding-inline:var(--s-4); }
  header.site nav a{ display:inline-flex; align-items:center; }
  /* A link inside a table cell is the one that is always too small: give the
     cell the height instead of underlining a larger area than the word. */
  td a{ display:inline-block; padding-block:var(--s-2); }
  /* A row in a list is a whole tappable line, not the eleven characters of
     its title. The padding goes on the row so the underline still sits under
     the words. */
  .list-row{ padding-block:var(--s-3); }
  .list-row > a:first-child{ display:inline-block; padding-block:var(--s-1); }
  .breadcrumb a{ display:inline-flex; align-items:center; min-height:var(--touch); }
}

/* ---- list row — WEB-08 ---------------------------------------------------
   The same three lines were inline-styled on the home page, the entity page
   and the updates list: a title, a muted line under it, a hairline between
   rows. A class, so the next page that needs one does not invent a fourth
   spelling of 10px. */
.list-row{ padding:var(--s-3) 0; border-top:1px solid var(--line); }
.list-row:first-child{ border-top:0; padding-top:0; }
.list-row:last-child{ padding-bottom:0; }
.list-row .meta{ font-size:var(--t-sm); color:var(--ink-3); margin-top:var(--s-1); }

/* ---- section header — WEB-08 ---------------------------------------------
   A heading with something on the right: a count, a filter, a link to the
   whole list. One row on a laptop, two on a phone, and the action never
   squeezes the heading into a wrap. */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap; margin:0 0 var(--s-4);
}
.section-head h2, .section-head h3{ margin:0; }
.section-head .action{ font-size:var(--t-sm); white-space:nowrap; }

/* ---- breadcrumb — WEB-08 -------------------------------------------------
   Scrolls sideways rather than wrapping to three lines on a phone, because a
   breadcrumb that eats a third of a small screen is worse than one you have
   to nudge. */
.breadcrumb{
  display:flex; align-items:center; gap:var(--s-2);
  margin:0 0 var(--s-4); padding:0; list-style:none;
  font-size:var(--t-sm); color:var(--ink-3);
  overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
}
.breadcrumb li{ display:flex; align-items:center; gap:var(--s-2); }
.breadcrumb li + li::before{ content:"›"; color:var(--line-2); }
.breadcrumb a{ color:var(--ink-2); }
.breadcrumb [aria-current]{ color:var(--ink); font-weight:600; }

/* ---- pagination — WEB-08 -------------------------------------------------
   Numbers, not an infinite scroll: a student who has seen page 3 wants to
   send somebody page 3. */
.pager{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; margin-top:var(--s-5); }
.pager a, .pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--touch); padding:var(--s-2) var(--s-3);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:#fff; color:var(--ink-2); font-size:var(--t-sm);
}
.pager a:hover{ background:#f3f5f9; text-decoration:none; }
.pager [aria-current]{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:620; }
.pager .gap{ border:0; background:none; min-width:auto; padding-inline:var(--s-1); }
.pager .off{ opacity:.45; pointer-events:none; }

/* ---- countdown — WEB-08 --------------------------------------------------
   The colour carries the urgency, and the words carry it too: a red pill is
   invisible to a colour-blind reader and absent from a screen reader, so the
   text says "closes in 2 days" on its own. */
.countdown{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-1) var(--s-3); border-radius:99px;
  font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums;
  background:#eef0f4; color:var(--ink-2);
}
.countdown.soon{ background:var(--warn-soft); color:var(--warn); }
.countdown.urgent{ background:var(--bad-soft); color:var(--bad); }
.countdown.closed{ background:#eef0f4; color:var(--ink-3); font-weight:550; }
.countdown .dot{ width:7px; height:7px; border-radius:99px; background:currentColor; flex:0 0 auto; }

/* ---- sectioned forms — WEB-06 --------------------------------------------
   24px between fields, 40px between sections. The rhythm is the thing that
   tells a student where one question ends and the next begins, without a box
   around everything. */
.form-section{ margin:0 0 var(--s-7); }
.form-section:last-child{ margin-bottom:0; }
.form-section > .form-section-head{
  margin:0 0 var(--s-4); padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line);
}
.form-section > .form-section-head h3{ margin:0 0 var(--s-1); }
.form-section > .form-section-head p{ margin:0; font-size:var(--t-sm); color:var(--ink-3); }
.form-section .field{ margin-bottom:var(--s-5); }
.form-section .row{ gap:var(--s-5); }

/* ---- sticky apply bar — WEB-05 -------------------------------------------
   On a phone the apply button is at the bottom of a long page, which is the
   one place a student will not look. It travels with them instead. On a
   laptop the rail already holds it, so the bar is not drawn at all rather
   than drawn and hidden.

   The page gets padding under it so the last line of the footer is not
   permanently behind the bar — a sticky element that covers content is a
   worse bug than the one it fixes. */
.applybar{ display:none; }
@media(max-width:860px){
  .applybar{
    display:flex; align-items:center; gap:var(--s-3);
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:var(--s-3) var(--s-4);
    padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.97); border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(18,24,38,.09);
  }
  .applybar .what{ flex:1; min-width:0; }
  .applybar .what .k{ font-size:var(--t-xs); color:var(--ink-3); }
  .applybar .what .v{ font-size:var(--t-sm); font-weight:620;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .applybar .btn{ width:auto; flex:0 0 auto; min-height:var(--touch); }
  body.has-applybar{ padding-bottom:84px; }
}

/* ---- what the 44px floor does and does not cover -------------------------
   A standalone control -- a button, a field, a row in a list, a page number --
   gets the floor. A link inside a sentence does not: "challenges may be
   raised within the stated window (official notice)" cannot have a 44px-tall
   link in the middle of it without breaking the line it sits in, which is why
   the target-size rules carve out inline links in prose. The right fix for
   those is the words around them, not the height of them.                   */
.search-input{
  flex:1 1 320px; min-width:0; padding:11px 13px;
  border:1px solid var(--line-2); border-radius:var(--r);
  font:inherit; font-size:var(--t-base);
}
.tickbox{ width:20px; height:20px; accent-color:var(--brand); vertical-align:-3px; }

@media (pointer:coarse), (max-width:700px){
  /* The header: the brand is the way home and the box is the way to
     everything else. Both were under the floor. */
  .brand{ min-height:var(--touch); }
  .site-search input, .search-input{ min-height:var(--touch); }
  .tickbox{ width:24px; height:24px; }
  /* A label with a tickbox in it is the tap target, not the 20px box. */
  .filter-bar label{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--touch); }
}

/* A strip that scrolls sideways -- the nav on a phone, the breadcrumb -- does
   not need a scrollbar drawn through it. The platforms that overlay their
   scrollbars already hide it; this is for the ones that do not, where a grey
   bar under four words reads as a broken layout rather than as an affordance.
   The table inside .scroll keeps its bar, because there the bar is the only
   sign that there are more columns. */
header.site nav, .breadcrumb{ scrollbar-width:none; }
header.site nav::-webkit-scrollbar, .breadcrumb::-webkit-scrollbar{ display:none; }

/* ---- the marks table — FORM-14 -------------------------------------------
   Rows are subjects, columns are marks. The row header stays put while the
   columns scroll, because a number in the third column means nothing once
   "Chemistry" has scrolled off the left. */
.marks-table th[scope="row"]{
  text-transform:none; font-size:var(--t-sm); color:var(--ink-2); font-weight:600;
  position:sticky; left:0; background:var(--card); white-space:nowrap; padding-right:var(--s-4);
}
.marks-table td.num input{ width:110px; text-align:right; font-variant-numeric:tabular-nums; padding:8px 10px; }
.marks-table .err{ font-size:var(--t-xs); text-align:left; }
@media(max-width:700px){ .marks-table td.num input{ width:88px; } }

/* ---- the stepper — FORM-17 ----------------------------------------------
   One panel at a time, but only once form.js has said so. Without the
   js-steps class every panel is visible and the form is one long page that
   still works -- a stylesheet that hid them unconditionally would mean a
   failed script load shows a student an empty form and no way to tell why. */
.js-steps .step-panel{ display:none; }
.js-steps .step-panel.is-step:not(.hide){ display:block; }

.stepper{ margin:0 0 var(--s-5); }
.stepper-rail{
  display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none;
  padding-bottom:var(--s-2); margin-bottom:var(--s-3);
}
.stepper-rail::-webkit-scrollbar{ display:none; }
.stepper-dot{
  display:flex; align-items:center; gap:var(--s-2);
  flex:0 0 auto; padding:var(--s-2) var(--s-3);
  background:#fff; border:1px solid var(--line); border-radius:99px;
  font:inherit; font-size:var(--t-sm); color:var(--ink-3); cursor:pointer;
}
.stepper-dot .n{
  display:grid; place-items:center; width:20px; height:20px; border-radius:99px;
  background:var(--line); color:var(--ink-2); font-size:var(--t-xs); font-weight:700;
}
.stepper-dot.is-done{ color:var(--ok); border-color:var(--ok-soft); }
.stepper-dot.is-done .n{ background:var(--ok-soft); color:var(--ok); }
.stepper-dot.is-current{ color:var(--brand); border-color:var(--brand); font-weight:620; }
.stepper-dot.is-current .n{ background:var(--brand); color:#fff; }
.stepper .bar{ height:6px; }

.step-nav{
  display:flex; gap:var(--s-3); align-items:center; justify-content:space-between;
  margin-top:var(--s-5);
}
.step-nav .btn{ width:auto; min-width:140px; }
@media(max-width:560px){ .step-nav .btn{ flex:1; min-width:0; } }

/* ---- the review — FORM-18 ----------------------------------------------- */
.review-group + .review-group{ margin-top:var(--s-5); }
.review-group h4{
  margin:0 0 var(--s-2); font-size:var(--t-xs); font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--ink-3);
}
.review-row{
  display:grid; grid-template-columns:1fr auto; gap:var(--s-1) var(--s-3);
  align-items:baseline; padding:var(--s-3) 0; border-top:1px solid var(--line);
}
.review-row:first-of-type{ border-top:0; }
.review-row .k{ font-size:var(--t-sm); color:var(--ink-3); grid-column:1; }
.review-row .v{ font-size:var(--t-base); grid-column:1; word-break:break-word; }
.review-row .copy-btn{ grid-column:2; grid-row:1 / span 2; align-self:center; }
.review-row.is-missing .v{ color:var(--bad); }
.review-row.is-missing{ background:var(--bad-soft); margin-inline:calc(var(--s-3) * -1);
  padding-inline:var(--s-3); border-radius:var(--r); border-top-color:transparent; }
@media(min-width:620px){
  .review-row{ grid-template-columns:200px 1fr auto; }
  .review-row .k{ grid-column:1; }
  .review-row .v{ grid-column:2; }
  .review-row .copy-btn{ grid-column:3; grid-row:1; }
}

/* Lucky draw */
.draw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.draw-switch{display:flex;align-items:center;gap:14px;margin:0;padding:14px 18px}
.draw-switch .lab{font-size:12px;color:var(--ink-2)}
.switch{position:relative;width:56px;height:30px;border-radius:999px;border:1px solid var(--line-2);background:#d9d9d9;cursor:pointer;padding:0;transition:background .2s}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch.on{background:#2e7d4f}
.switch.on span{transform:translateX(26px)}
.switch:disabled{opacity:.6;cursor:wait}
.draw-notice{padding:10px 12px;border-radius:8px;background:var(--surface-2,#f4f4f4);margin:0 0 12px}
.draw-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.draw-form input{width:100%;box-sizing:border-box}
.draw-bar{height:6px;border-radius:999px;background:#e8e8e8;margin-top:6px;overflow:hidden}
.draw-bar span{display:block;height:100%;background:#2e7d4f}
.draw-actions{display:flex;gap:10px;flex-wrap:wrap}
.draw-actions form{margin:0}
.draw-search{margin:6px 0 10px}
.draw-search input{width:100%;max-width:420px;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:14px;box-sizing:border-box}

/* ===== Public look: richer header, hero, cards (shared across public pages) ===== */
header.site{background:linear-gradient(120deg,#16315e 0%,#1b3a6b 55%,#27508f 100%);box-shadow:0 2px 14px rgba(18,24,38,.18);position:sticky;top:0;z-index:50}
header.site .wrap{flex-wrap:nowrap}
.brand .mark{box-shadow:0 2px 8px rgba(0,0,0,.2)}
header.site nav{align-items:center;gap:6px;flex-wrap:nowrap}
header.site nav a{padding:7px 11px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s}
header.site nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
header.site nav a.is-here{color:#fff;background:rgba(255,255,255,.14)}
header.site nav a.other-site{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:0;padding:7px 13px;font-weight:600;font-size:13px;white-space:nowrap;flex:0 0 auto}
header.site nav a.other-site:hover{background:#9c4416;text-decoration:none}
header.site .width-toggle{flex:0 0 auto;white-space:nowrap}
header.site .site-search input{border-radius:99px;padding-left:16px}
@media(min-width:861px){
  header.site .wrap{gap:14px}
  .site-search{margin:0 10px}
}
@media(max-width:1100px){ header.site nav a{padding:6px 8px} }

/* Hero */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.16),transparent 42%),linear-gradient(135deg,#1b3a6b 0%,#2f5fa8 100%);padding:44px 0 40px}
.hero::after{content:"";position:absolute;right:-80px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.06)}
.hero h1{color:#fff;font-size:34px;letter-spacing:-.6px;max-width:640px}
.hero .lede{color:#dbe6f7;font-size:17px;max-width:620px;margin-bottom:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.hero .btn.primary{background:#fff;color:var(--brand)}
.hero .btn.primary:hover{background:#eaf0fa}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12)}
.stat-row{display:flex;flex-wrap:wrap;gap:10px}
.stat-row .stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 16px;min-width:130px;backdrop-filter:blur(4px)}
.stat-row .stat b{display:block;font-size:22px;letter-spacing:-.3px;line-height:1.1}
.stat-row .stat span{font-size:12.5px;color:#cfe0f7}

/* Section headings with accent bar */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:38px 0 14px;flex-wrap:wrap}
.sec-head h2{margin:0;position:relative;padding-left:14px}
.sec-head h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:linear-gradient(var(--accent),#e0873f)}
.sec-head a{font-size:14px;font-weight:600}
.sec-head .muted{font-size:13.5px}

/* Closing-soon strip as horizontal cards */
.closing-strip{border-left:0;background:linear-gradient(180deg,#fffaf2,#fff);border:1px solid #f1dfc2}
.closing-strip h3{color:var(--warn);text-transform:uppercase;letter-spacing:.6px;font-size:12.5px}
.closing-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.closing-item{flex-direction:column;align-items:flex-start;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.closing-item:last-child{padding-bottom:12px}
.closing-item a{color:var(--ink)}
.closing-item a:hover{color:var(--brand-2)}

/* Results / updates list as a rich panel */
.panel{padding:6px 0}
.panel .list-row{padding:14px 20px;margin:0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;transition:background .15s}
.panel .list-row:first-child{border-top:0}
.panel .list-row:hover{background:#f7f9fd}
.panel .list-row::before{content:"";grid-row:span 2;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 4px var(--brand-soft)}
.panel .list-row a{font-weight:600;color:var(--ink)}
.panel .list-row a:hover{color:var(--brand-2)}
.panel .list-row .meta{grid-column:2;margin-top:0}

/* College cards, richer */
.college-card{position:relative;padding:20px 20px 16px;display:flex;flex-direction:column;overflow:hidden}
.college-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brand-2),#7aa7e0);opacity:.9}
.college-card.tier-1::before{background:linear-gradient(90deg,var(--ok),#5bb98c)}
.college-card.tier-3::before{background:linear-gradient(90deg,var(--warn),#e0b25a)}
.college-card .top{display:flex;gap:12px;align-items:flex-start}
.avatar{flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:18px;color:var(--brand);background:linear-gradient(135deg,#eaf0fa,#d7e4f7);border:1px solid #d0dcf0}
.avatar.mou{color:var(--ok);background:linear-gradient(135deg,#e6f4ee,#cdebdc);border-color:#bfe2d0}
.avatar.t3{color:var(--warn);background:linear-gradient(135deg,#fdf3e0,#f7e3bf);border-color:#ecd7a8}
.college-card h3{margin:0 0 2px;font-size:16.5px;line-height:1.3}
.college-card .meta{color:var(--ink-3);font-size:13px}
.college-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.college-card .chip{font-size:12px;color:var(--ink-2);background:#f1f4f9;border:1px solid var(--line);padding:3px 9px;border-radius:99px;white-space:nowrap}
.college-card .fee{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.college-card .fee .range{font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.2px}
.college-card .fee .range small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.college-card .apply-cta{flex:0 0 auto;font-size:13px;font-weight:650;color:var(--brand);background:var(--brand-soft);padding:7px 12px;border-radius:9px}
.college-card:hover .apply-cta{background:var(--brand);color:#fff}
.college-card .fee{border-top:1px solid var(--line)}
.college-card .fee b{color:inherit}
.college-card:hover{box-shadow:0 12px 30px rgba(18,24,38,.10);transform:translateY(-2px)}

/* Footer */
footer.site{background:#fff;color:var(--ink-3);margin-top:56px;padding:26px 0 34px}
footer.site .wrap{line-height:1.7}

/* Mobile: 16px gutter, no sideways page scroll */
@media(max-width:640px){
  .hero{padding:30px 0 28px}
  .hero h1{font-size:27px}
  .hero .lede{font-size:15.5px}
  .stat-row .stat{min-width:0;flex:1 1 calc(50% - 10px)}
  .stat-row .stat b{font-size:19px}
  .sec-head{margin-top:30px}
  .panel .list-row{padding:12px 16px}
  body{overflow-x:hidden}
}

/* ===== Home: ticker, feature cards, steps, rich footer (modelled on door2college.com structure) ===== */
.ticker{background:#0f2a52;color:#dbe6f7;font-size:13px;overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.08)}
.ticker-track{display:inline-flex;gap:44px;padding:8px 0;animation:ticker 40s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:8px}
.ticker-track span::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff7a3d;box-shadow:0 0 0 3px rgba(255,122,61,.25)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.trust span{font-size:12.5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#eaf2ff;padding:5px 11px;border-radius:99px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.intro{margin:52px 0 18px}
.intro h2{font-size:24px;letter-spacing:-.3px;margin:0}
.intro p{color:var(--ink-2);margin:6px 0 0;max-width:640px}
.feature{display:flex;flex-direction:column;gap:8px;padding:22px}
.feature .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--brand-soft);border:1px solid #d6e2f5}
.feature.warm .ico{background:var(--accent-soft);border-color:#f3d7c2}
.feature.green .ico{background:var(--ok-soft);border-color:#c6e6d6}
.feature h3{font-size:17px;margin:4px 0 0}
.feature p{margin:0;color:var(--ink-2);font-size:14.5px}
.step{padding:22px 20px 20px}
.step .num{font-size:30px;font-weight:750;letter-spacing:-.6px;color:transparent;-webkit-text-stroke:1.2px var(--brand-2);line-height:1;margin-bottom:10px;display:block}
.step h3{font-size:16px}
.step p{margin:0;color:var(--ink-2);font-size:14px}
.cta-band{margin-top:48px;border-radius:18px;padding:30px 28px;color:#fff;background:linear-gradient(120deg,#16315e,#2f5fa8);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07)}
.cta-band h2{color:#fff;margin:0 0 4px;font-size:22px}
.cta-band p{margin:0;color:#cfe0f7;font-size:14.5px}
.cta-band .btn.primary{background:#fff;color:var(--brand)}
.cta-band .btn.primary:hover{background:#eaf0fa}
footer.site .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:26px}
footer.site .foot-grid h4{margin:0 0 8px;color:var(--ink);font-size:13.5px;text-transform:uppercase;letter-spacing:.8px}
footer.site .foot-grid a{display:block;color:var(--ink-3);text-decoration:none;padding:2px 0}
footer.site .foot-grid a:hover{color:var(--brand-2)}
@media(max-width:640px){
  footer.site .foot-grid{grid-template-columns:1fr 1fr}
  footer.site .foot-grid > div:first-child{grid-column:1 / -1}
  .cta-band{padding:24px 20px}
  .intro{margin-top:40px}
  .intro h2{font-size:21px}
}

/* ===== Uniform listing styles: updates rows, panel headings, card grids ===== */
.panel.updates .update-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:16px 20px;border-top:1px solid var(--line);transition:background .15s}
.panel.updates .update-row:first-child{border-top:0}
.panel.updates .update-row:hover{background:#f7f9fd}
.panel.updates .update-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.panel.updates .update-body a{color:var(--brand-2)}
@media(max-width:640px){
  .panel.updates .update-row{grid-template-columns:1fr;gap:8px;padding:14px 16px}
}
.sec-head + .grid{margin-bottom:6px}

/* Account pages: student dashboard and My rewards. Shared classes only, no inline styling. */
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.acct-head .lede{margin-bottom:0}
.acct-actions{display:flex;gap:8px;flex-wrap:wrap}
.acct-actions-row{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.acct-app-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.acct-app-head h3{margin:0 0 3px}
.acct-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.acct-block.small{font-size:13px}
.acct-block .copy-row{padding:5px 0}
.acct-email{word-break:break-all}
.acct-doc-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.acct-doc-head h3{margin:0}
.acct-entry{padding:12px 0;border-top:1px solid var(--line)}
.acct-entry:first-of-type{border-top:0;padding-top:0}
.acct-entry-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.acct-entry p{margin:4px 0 0}
.acct-draw h3{margin:0 0 4px}
.acct-draw .draw-bar{margin:8px 0 6px}
.acct-note{margin-top:16px}
.acct-tight{margin:0}

/* Shared layout utilities. Use these instead of inline style attributes. */
.card > h3:first-child{margin-top:0}
.m-0{margin:0}
.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}
.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px}
.mt-24{margin-top:24px}.mt-26{margin-top:26px}.mt-28{margin-top:28px}
.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-18{margin-bottom:18px}
.spacer-14{height:14px}
.flex-between{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.flex-baseline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.flex-center{display:flex;align-items:center;gap:10px}
.flex-row{display:flex;gap:8px;flex-wrap:wrap}
.accent-warn{border-left:3px solid var(--warn)}
.list-plain{margin:0;padding-left:18px}
.consent-row{padding:12px 0;border-top:1px solid var(--line)}
.consent-row:first-of-type{border-top:0;padding-top:0}
.color-bad{color:var(--bad)}
.color-ok{color:var(--ok)}
.notice.mb-18{margin-bottom:18px}
.notice.mt-14{margin-top:14px}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:3px}.mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}
.mb-8{margin-bottom:8px}.mb-20{margin-bottom:20px}.mt-4{margin-top:4px}
.search-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-bar .field{margin:0}
.search-row{grid-template-columns:1fr auto;gap:10px}
.auto-w{width:auto}
.checkbox-line{display:flex;align-items:center;gap:7px}
.closing-title{margin:0 0 4px;font-size:17px}
.lede-tight{margin:0 0 14px}
.min-w0{min-width:0}
.result-link{font-size:16px}
.mt-0{margin-top:0}
.foot-brand{color:var(--ink);margin-bottom:8px}
.foot-mark{background:var(--brand);color:#fff}
.foot-blurb{margin:0 0 6px;max-width:380px}
.pager-note{margin:10px 0 0}

/* Spacing utilities generated from inline styles during the UI pass. */
.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.mt-3{margin-top:3px}.mt-5{margin-top:5px}.mt-6{margin-top:6px}.mt-7{margin-top:7px}.mt-9{margin-top:9px}.mt-34{margin-top:34px}
.pt-8{padding-top:8px}.pt-14{padding-top:14px}.pt-16{padding-top:16px}
.ticker-link{color:#fff;text-decoration:none}
.steps-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Generated utilities from the UI pass. */
.ai-baseline{align-items:baseline}
.ai-start{align-items:flex-start}
.d-flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.fs-17{font-size:17px}
.fs-19{font-size:19px}
.fw-550{font-weight:550}
.fw-600{font-weight:600}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-8{gap:8px}
.jc-between{justify-content:space-between}
.muted-70{opacity:.7}
.narrow-520{max-width:520px}
.pad-row{padding:14px 0}
/* Utility classes used by converted pages. */
.w-full{width:100%}
.text-center{text-align:center}
.rule-top{border-top:1px solid var(--line)}
.rule-bottom{border-bottom:1px solid var(--line)}
.pre-line{white-space:pre-line}
.pre-wrap{white-space:pre-wrap}
.pl-18{padding-left:18px}
.break-all{word-break:break-all}
.pointer{cursor:pointer}
.inherit-color{color:inherit}
.lh-17{line-height:1.7}
.color-brand{color:var(--brand)}
.spacer-20{height:20px}
.fw-400{font-weight:400}
.color-warn{color:var(--warn)}

/* ---- Approved mockup pass (2026-10-30): vivid blue bar, orange accent,
   coloured stat tiles, rounder cards. Overrides the restrained base above. */
header.site{background:linear-gradient(110deg,#1d4fd0 0%,#2456d6 50%,#3b6ff0 100%);box-shadow:0 4px 18px rgba(36,86,214,.25)}
.card{border-radius:18px;border-color:#e2e8f3}
.college-card{border-radius:18px}
.btn.primary{box-shadow:0 6px 16px rgba(36,86,214,.22)}
.btn.accent{box-shadow:0 6px 16px rgba(242,106,27,.28)}
.hero{background:radial-gradient(circle at 88% 18%,rgba(255,255,255,.2),transparent 40%),linear-gradient(120deg,#1a44b8 0%,#2456d6 55%,#3b6ff0 100%)}
.hero .btn.primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(242,106,27,.35)}
.hero .btn.primary:hover{background:#d95a12}
.cta-band{background:linear-gradient(120deg,#1a44b8,#3b6ff0)}
.stat-grid .stat{border:0;color:#fff;border-radius:16px;box-shadow:0 10px 22px rgba(36,86,214,.18)}
.stat-grid .stat:nth-child(4n+1){background:linear-gradient(135deg,#2456d6,#3b6ff0)}
.stat-grid .stat:nth-child(4n+2){background:linear-gradient(135deg,#f26a1b,#ff8a3d)}
.stat-grid .stat:nth-child(4n+3){background:linear-gradient(135deg,#12875a,#22b07d)}
.stat-grid .stat:nth-child(4n+4){background:linear-gradient(135deg,#6b4fe0,#8d74ff)}
.stat-grid .stat .k,.stat-grid .stat .d{color:rgba(255,255,255,.85)}
.stat-grid .stat .v{color:#fff}


/* ---- My rewards hero (mockup H) ---- */
.rw-hero{position:relative;overflow:hidden;border-radius:20px;color:#fff;padding:26px 24px;margin:0 0 26px;background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.2),transparent 40%),linear-gradient(130deg,#5b3fd6 0%,#6b4fe0 50%,#8d74ff 100%);box-shadow:0 16px 36px rgba(107,79,224,.28);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:center}
.rw-hero h1{color:#fff;margin:4px 0 6px;font-size:30px}
.rw-kicker{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#e4dcff}
.rw-lede{margin:0;color:#e4dcff;font-size:14.5px;max-width:520px}
.rw-ring{width:132px;height:132px;border-radius:50%;background:conic-gradient(#ffd23f calc(var(--p)*1%),rgba(255,255,255,.22) 0);display:grid;place-items:center}
.rw-ring div{width:104px;height:104px;border-radius:50%;background:#6b4fe0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rw-ring b{font-size:24px;letter-spacing:-.4px}
.rw-ring span{font-size:11px;color:#e4dcff}
.rw-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rw-tile{border-radius:14px;padding:12px 14px;color:#fff}
.rw-tile b{display:block;font-size:22px;letter-spacing:-.3px;line-height:1.1}
.rw-tile span{font-size:12.5px;opacity:.9}
.rw-tile.t-blue{background:linear-gradient(135deg,#2456d6,#3b6ff0)}
.rw-tile.t-orange{background:linear-gradient(135deg,#f26a1b,#ff8a3d)}
.rw-tile.t-green{background:linear-gradient(135deg,#12875a,#22b07d)}
@media(max-width:560px){
  .rw-hero{grid-template-columns:1fr;padding:20px 18px}
  .rw-hero h1{font-size:26px}
  .rw-ring{justify-self:center;width:120px;height:120px}
  .rw-ring div{width:94px;height:94px}
  .rw-tiles{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .rw-tile{padding:10px}
  .rw-tile b{font-size:18px}
  .rw-tile span{font-size:11.5px}
}

/* ---- Account header band (mockup pass) ---- */
.acct-band{background:radial-gradient(circle at 92% 0%,rgba(255,255,255,.18),transparent 40%),linear-gradient(120deg,#1a44b8 0%,#2456d6 55%,#3b6ff0 100%);color:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 14px 30px rgba(36,86,214,.22);align-items:center}
.acct-band h1{color:#fff;margin:0 0 4px}
.acct-band .lede{color:#dbe6f7}
.acct-band .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.acct-band .btn.ghost:hover{background:rgba(255,255,255,.24)}
@media(max-width:560px){.acct-band{padding:18px 16px}.acct-band .acct-actions{width:100%}.acct-band .acct-actions .btn{flex:1 1 auto}}

/* ---- Home: mockup pass 2 (warning strip, rewards tiles, coloured college CTAs) ---- */
.warn-strip{background:#fff4d6;color:#6b4300;font-size:14.5px;font-weight:600;padding:11px 0}
.rw-pub{margin:0 0 34px}
.rw-pub h2{margin:4px 0 4px}
.rw-pub > p{margin:0 0 4px}
.rw-tiles-pub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.rw-tiles-pub .t{border-radius:18px;padding:22px 22px;color:#fff;box-shadow:0 14px 28px rgba(15,26,46,.12)}
.rw-tiles-pub .t b{display:block;font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.05}
.rw-tiles-pub .t span{font-size:14px;opacity:.92}
.rw-tiles-pub .t.blue{background:linear-gradient(135deg,#2456d6,#3b6ff0)}
.rw-tiles-pub .t.orange{background:linear-gradient(135deg,#f26a1b,#ff8a3d)}
.rw-tiles-pub .t.green{background:linear-gradient(135deg,#12875a,#22b07d)}
@media(max-width:560px){.rw-tiles-pub{gap:8px}.rw-tiles-pub .t{padding:14px 12px;border-radius:14px}.rw-tiles-pub .t b{font-size:26px}.rw-tiles-pub .t span{font-size:12px}}
.college-card .fee{display:flex;justify-content:space-between;align-items:center;gap:10px}
.college-card .apply-cta{display:inline-block;background:var(--brand);color:#fff;font-weight:650;border-radius:10px;padding:9px 16px;white-space:nowrap;box-shadow:0 6px 14px rgba(36,86,214,.22)}
.college-card:nth-child(3n+2) .apply-cta{background:var(--accent);box-shadow:0 6px 14px rgba(242,106,27,.28)}
.college-card:nth-child(3n+3) .apply-cta{background:var(--purple);box-shadow:0 6px 14px rgba(107,79,224,.28)}

.alert{border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:14.5px}.alert.warn{background:var(--warn-soft);color:var(--warn)}.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.bad{background:var(--bad-soft);color:var(--bad)}