/* HSC Institution Pages — front-end styles.

   Scoped under .hip-root so nothing leaks into the theme. Selectors are
   written as `.hip-root.hip-root` — the class is repeated on purpose. Themes
   ship their own h1-h4 / p / li / b / small / th rules that would otherwise
   beat a single-class selector and change the rendered sizes and weights.
   Repeating the class raises every rule one specificity level so the theme
   can no longer win.

   The custom-property block immediately below is deliberately left at single
   `.hip-root` specificity so the admin colour picker (which prints an inline
   `.hip-root{--blue:...}` rule) can still override it.

   Design tokens, spacing and component shapes intentionally mirror the XI
   Class Admission Homepage plugin so a college page and the homepage read as
   one product. */

.hip-root{
  --blue:#0080b9; --blue-deep:#045c86; --blue-darker:#033f5e;
  --ink:#06283b; --sky:#e6f3fb; --sky-2:#d3ebf7; --gold:#f5a623; --gold-soft:#ffedcf;
  --paper:#f4f8fb; --white:#ffffff; --line:#cfe3ef; --muted:#5a7486;
  --green:#1f9d76; --green-soft:#e3f6ef; --red:#d0454c; --red-soft:#fdecec;
  --shadow:0 18px 40px -20px rgba(4,60,90,.35); --shadow-sm:0 8px 22px -14px rgba(4,60,90,.45);
  --radius:18px;
  --disp:"Bricolage Grotesque",sans-serif;
  --body:"Inter",sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --bn:"Hind Siliguri",sans-serif;
}

/* ── reset & typography base ─────────────────────────────────────────── */

.hip-root.hip-root *{box-sizing:border-box;margin:0;padding:0}
.hip-root.hip-root{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  scroll-behavior:smooth;position:relative;
}
.hip-root.hip-root h1,.hip-root.hip-root h2,.hip-root.hip-root h3,.hip-root.hip-root h4{
  font-family:var(--disp);line-height:1.14;letter-spacing:-.01em;
}
.hip-root.hip-root a{color:inherit;text-decoration:none}

.hip-root.hip-root p,.hip-root.hip-root div,.hip-root.hip-root span,
.hip-root.hip-root section,.hip-root.hip-root ul,.hip-root.hip-root ol,
.hip-root.hip-root li,.hip-root.hip-root table,.hip-root.hip-root thead,
.hip-root.hip-root tbody,.hip-root.hip-root tr,.hip-root.hip-root td,
.hip-root.hip-root nav,.hip-root.hip-root article{
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;
}
.hip-root.hip-root b,.hip-root.hip-root strong{font-weight:700}
.hip-root.hip-root small{font-size:.82em}
.hip-root.hip-root code{
  font-family:var(--mono);background:var(--sky);padding:2px 6px;border-radius:4px;font-size:.84em;
}
.hip-root.hip-root ul,.hip-root.hip-root ol{list-style:none}
.hip-root.hip-root img{max-width:100%;height:auto;display:block}
.hip-root.hip-root button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hip-root.hip-root table{border-collapse:collapse;width:100%}

/* ── layout ──────────────────────────────────────────────────────────── */

.hip-root.hip-root .wrap{width:min(1120px,92vw);margin:0 auto}
.hip-root.hip-root section{padding:54px 0;background:var(--paper)}

.hip-root.hip-root #hip-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--blue),var(--gold));transition:width .1s linear;
}

/* ── reveal animation ────────────────────────────────────────────────── */

.hip-root.hip-root .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.hip-root.hip-root .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hip-root.hip-root .reveal{opacity:1;transform:none;transition:none}
  .hip-root.hip-root{scroll-behavior:auto}
}

/* ── section heads ───────────────────────────────────────────────────── */

.hip-root.hip-root .sec-head{margin-bottom:26px}
.hip-root.hip-root .eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);
  background:var(--sky);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;margin-bottom:14px;
}
.hip-root.hip-root .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hip-root.hip-root .sec-head h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;margin-bottom:10px}
.hip-root.hip-root .sec-head p{color:var(--muted);font-size:.95rem}
.hip-root.hip-root .sub-heading{
  font-size:1.12rem;font-weight:700;margin:34px 0 16px;padding-left:13px;
  border-left:4px solid var(--gold);
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.hip-root.hip-root .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-weight:700;font-size:.94rem;padding:12px 22px;border-radius:12px;cursor:pointer;
  border:none;font-family:var(--body);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.hip-root.hip-root .btn.primary{background:var(--blue);color:#fff;box-shadow:0 12px 26px -12px var(--blue)}
.hip-root.hip-root .btn.primary:hover{background:var(--blue-deep);transform:translateY(-2px);color:#fff}
.hip-root.hip-root .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.hip-root.hip-root .btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.hip-root.hip-root .btn.accent{background:linear-gradient(135deg,var(--gold),#e09000);color:#fff;border:none;box-shadow:0 10px 24px -10px rgba(196,128,0,.45)}
.hip-root.hip-root .btn.accent:hover{filter:brightness(1.08);transform:translateY(-2px);color:#fff}

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

.hip-root.hip-root .hip-hero{
  background:var(--paper);color:var(--ink);padding:30px 0 26px;position:relative;overflow:hidden;
}
.hip-root.hip-root .hip-hero .eyebrow{
  background:var(--sky);border-color:var(--line);color:var(--blue);margin-bottom:0;
}
.hip-root.hip-root .hero-inner{
  position:relative;z-index:1;max-width:100%;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.hip-root.hip-root .hip-hero h1{
  font-size:clamp(2rem,4.6vw,3rem);font-weight:800;margin:0;line-height:1.14;
}
.hip-root.hip-root .hip-hero h1 .hl{
  display:inline-block;position:relative;color:var(--blue);white-space:nowrap;
}
.hip-root.hip-root .hip-hero h1 .hl::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;
  background:var(--gold-soft);z-index:-1;border-radius:3px;
}
.hip-root.hip-root .hip-hero .lead{
  font-size:1rem;color:#39566a;max-width:800px;line-height:1.55;margin:0 auto;
}
.hip-root.hip-root .hip-hero .lead code{background:var(--sky);color:var(--blue-deep)}
.hip-root.hip-root .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}

.hip-root.hip-root .hip-crumb{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;
  position:relative;z-index:1;font-size:.78rem;color:var(--muted);margin-bottom:16px;
}
.hip-root.hip-root .hip-crumb a{color:var(--blue)}
.hip-root.hip-root .hip-crumb a:hover{color:var(--blue-deep);text-decoration:underline}
.hip-root.hip-root .hip-crumb .is-current{color:var(--ink);font-weight:600}

.hip-root.hip-root .hip-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:2px}
.hip-root.hip-root .hip-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;
  background:var(--sky);border:1px solid var(--line);font-size:.82rem;color:var(--ink);
}
.hip-root.hip-root .hip-chip-ico{display:flex;color:var(--blue)}
.hip-root.hip-root .hip-chip-ico svg{width:15px;height:15px}
.hip-root.hip-root .hip-chip-lbl{color:var(--muted)}
.hip-root.hip-root .hip-chip-val{font-weight:700;color:var(--blue-deep)}
.hip-root.hip-root .hip-chip-val.is-mono{font-family:var(--mono)}

/* ── notice board ────────────────────────────────────────────────────── */

.hip-root.hip-root .notice-board{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;
}
.hip-root.hip-root .notice-item{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:14px;padding:18px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hip-root.hip-root .notice-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hip-root.hip-root .notice-new{border-left-color:var(--green)}
.hip-root.hip-root .notice-important{border-left-color:var(--red)}
.hip-root.hip-root .notice-update{border-left-color:var(--blue)}
.hip-root.hip-root .notice-info{border-left-color:var(--muted)}
.hip-root.hip-root .notice-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:9px}
.hip-root.hip-root .notice-badge{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--sky);color:var(--blue-deep);
}
.hip-root.hip-root .notice-badge.new{background:var(--green-soft);color:#0f7a5a}
.hip-root.hip-root .notice-badge.important{background:var(--red-soft);color:#a32c32}
.hip-root.hip-root .notice-badge.update{background:var(--sky);color:var(--blue-deep)}
.hip-root.hip-root .notice-badge.info{background:#eef2f5;color:var(--muted)}
.hip-root.hip-root .notice-date{
  display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted);
}
.hip-root.hip-root .notice-date svg{width:13px;height:13px}
.hip-root.hip-root .notice-title{font-size:.99rem;font-weight:700;margin-bottom:8px}
.hip-root.hip-root .notice-body{font-size:.88rem;color:var(--muted);line-height:1.62}
.hip-root.hip-root .notice-body p{font-size:.88rem;color:var(--muted);line-height:1.62}
.hip-root.hip-root .notice-link{
  display:inline-block;margin-top:11px;font-size:.83rem;font-weight:600;color:var(--blue);
}
.hip-root.hip-root .notice-link:hover{text-decoration:underline}

/* ── profile grid ────────────────────────────────────────────────────── */

.hip-root.hip-root .hip-profile-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.hip-root.hip-root .hip-profile-item{
  background:var(--white);padding:15px 17px;display:flex;flex-direction:column;gap:5px;
}
.hip-root.hip-root .hip-profile-lbl{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.hip-root.hip-root .hip-profile-val{font-size:.94rem;font-weight:600}
.hip-root.hip-root .hip-profile-val.is-mono{font-family:var(--mono);color:var(--blue-deep)}

/* ── ranking cards ───────────────────────────────────────────────────── */

.hip-root.hip-root .hip-rank-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px;
}
.hip-root.hip-root .hip-rank-card{
  position:relative;background:linear-gradient(160deg,var(--blue-deep),var(--blue));
  color:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:4px;overflow:hidden;
}
.hip-root.hip-root .hip-rank-card::after{
  content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.hip-root.hip-root .hip-rank-ico{
  position:absolute;top:16px;right:16px;color:rgba(255,255,255,.55);display:flex;
}
.hip-root.hip-root .hip-rank-lbl{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.hip-root.hip-root .hip-rank-val{font-family:var(--disp);font-size:1.9rem;font-weight:800;line-height:1.1}
.hip-root.hip-root .hip-rank-val small{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7)}
.hip-root.hip-root .hip-rank-scope{font-size:.8rem;color:rgba(255,255,255,.75)}
.hip-root.hip-root .hip-rank-band{
  align-self:flex-start;margin-top:8px;position:relative;z-index:1;
  background:var(--gold);color:#3d2a00;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
}

/* ── stat cards ──────────────────────────────────────────────────────── */

.hip-root.hip-root .hip-stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px;
}
.hip-root.hip-root .hip-stat-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-sm);
}
.hip-root.hip-root .hip-stat-val{
  font-family:var(--disp);font-size:1.55rem;font-weight:800;color:var(--blue-deep);line-height:1.15;
}
.hip-root.hip-root .hip-stat-lbl{font-size:.86rem;font-weight:700}
.hip-root.hip-root .hip-stat-note{font-size:.74rem;color:var(--muted)}

/* ── pass / fail bar ─────────────────────────────────────────────────── */

.hip-root.hip-root .hip-bar-wrap{
  margin-top:16px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:17px;box-shadow:var(--shadow-sm);
}
.hip-root.hip-root .hip-bar-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;font-weight:700;margin-bottom:10px;
}
.hip-root.hip-root .hip-bar-total{color:var(--muted);font-weight:500}
.hip-root.hip-root .hip-bar{display:flex;height:13px;border-radius:999px;overflow:hidden;background:#eef2f5}
.hip-root.hip-root .hip-bar-pass{background:var(--green)}
.hip-root.hip-root .hip-bar-fail{background:var(--red)}
.hip-root.hip-root .hip-bar-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:.78rem;color:var(--muted)}
.hip-root.hip-root .hip-bar-legend span{display:inline-flex;align-items:center;gap:6px}
.hip-root.hip-root .hip-bar-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.hip-root.hip-root .hip-bar-legend i.is-pass{background:var(--green)}
.hip-root.hip-root .hip-bar-legend i.is-fail{background:var(--red)}
.hip-root.hip-root .hip-bar-legend i.is-abs{background:var(--muted)}

/* ── data tables ─────────────────────────────────────────────────────── */

.hip-root.hip-root .hip-table-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.hip-root.hip-root .hip-table-head{
  padding:13px 18px;border-bottom:1px solid var(--line);background:var(--sky);
  display:flex;justify-content:flex-end;
}
.hip-root.hip-root .hip-table-hint{font-size:.74rem;color:var(--muted)}
.hip-root.hip-root .hip-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hip-root.hip-root .hip-table th{
  text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-deep);background:var(--sky);padding:12px 15px;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.hip-root.hip-root .hip-table td{
  padding:13px 15px;font-size:.88rem;border-bottom:1px solid var(--line);vertical-align:middle;
}
.hip-root.hip-root .hip-table tbody tr:last-child td{border-bottom:0}
.hip-root.hip-root .hip-table tbody tr:hover{background:#fafdff}
.hip-root.hip-root .hip-table .cname{font-weight:700}
.hip-root.hip-root .hip-table .gpa-pill{
  display:inline-block;background:var(--sky);color:var(--blue-deep);font-family:var(--mono);
  font-weight:700;font-size:.82rem;padding:3px 10px;border-radius:999px;
}
.hip-root.hip-root .hip-table .seats{font-family:var(--mono);font-weight:700}
.hip-root.hip-root .hip-table .hip-dash{color:var(--muted);font-size:.82rem}
.hip-root.hip-root .hip-total-row td{background:var(--sky);font-weight:700}
.hip-root.hip-root .hip-mini-bar{
  display:inline-block;width:76px;height:7px;border-radius:999px;background:#eef2f5;
  overflow:hidden;vertical-align:middle;margin-right:8px;
}
.hip-root.hip-root .hip-mini-bar i{display:block;height:100%;background:var(--blue);border-radius:999px}

/* ── standalone note ─────────────────────────────────────────────────── */

.hip-root.hip-root .apply-note{
  display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 15px;
  font-size:.85rem;line-height:1.6;margin-top:12px;
}
.hip-root.hip-root .apply-note svg{flex:none;margin-top:2px}
.hip-root.hip-root .apply-note.info{background:var(--sky);color:var(--blue-darker);border:1px solid var(--line)}
.hip-root.hip-root .apply-note.warn{background:var(--gold-soft);color:#7a4e00;border:1px solid #f0d5a4}
.hip-root.hip-root .hip-standalone-note{margin-top:20px}

/* ── accordion (phases) ──────────────────────────────────────────────── */

.hip-root.hip-root .phases{position:relative;padding-left:46px}
.hip-root.hip-root .spine{
  position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px;
}
.hip-root.hip-root .spine-fill{
  position:absolute;top:0;left:0;width:100%;height:0;background:var(--blue);
  border-radius:2px;transition:height .3s ease;
}
.hip-root.hip-root .phase{position:relative;margin-bottom:14px}
.hip-root.hip-root .phase-node{
  position:absolute;left:-46px;top:14px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--white);
  border:2px solid var(--line);color:var(--muted);z-index:1;transition:all .22s ease;
}
.hip-root.hip-root .phase.on .phase-node{border-color:var(--blue);color:var(--blue)}
.hip-root.hip-root .phase.open .phase-node{background:var(--blue);border-color:var(--blue);color:#fff}
.hip-root.hip-root .phase-card{
  background:var(--white);border:1px solid var(--line);border-radius:15px;
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease;
}
.hip-root.hip-root .phase.open .phase-card{box-shadow:var(--shadow)}
.hip-root.hip-root .phase-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;cursor:pointer;user-select:none;
}
.hip-root.hip-root .phase-head:hover{background:#fafdff}
.hip-root.hip-root .lead-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.hip-root.hip-root .lead-txt .tag{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);
}
.hip-root.hip-root .lead-txt h3,.hip-root.hip-root .lead-txt h4{font-size:1rem;font-weight:700}
.hip-root.hip-root .lead-txt .meta{font-size:.78rem;color:var(--muted)}
.hip-root.hip-root .chev{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--sky);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;transition:transform .22s ease;
}
.hip-root.hip-root .phase.open .chev{transform:rotate(180deg)}
.hip-root.hip-root .phase-body{display:none}
.hip-root.hip-root .phase.open .phase-body{display:block}
.hip-root.hip-root .phase-body-inner{padding:0 18px 18px;border-top:1px solid var(--line);padding-top:16px}
.hip-root.hip-root .phase-body-inner p{font-size:.9rem;color:#39566a;line-height:1.65;margin-bottom:10px}
.hip-root.hip-root .phase-body-inner p:last-child{margin-bottom:0}
.hip-root.hip-root .phase-body-inner ul{display:flex;flex-direction:column;gap:9px}
.hip-root.hip-root .phase-body-inner li{
  display:flex;align-items:flex-start;gap:9px;font-size:.89rem;color:#39566a;line-height:1.6;
}
.hip-root.hip-root .phase-body-inner li .tick{
  flex:none;width:18px;height:18px;border-radius:50%;background:var(--sky);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.hip-root.hip-root .phase-body-inner li .evt-date{
  margin-left:auto;flex:none;font-family:var(--mono);font-size:.74rem;font-weight:600;
  background:var(--sky);color:var(--blue-deep);padding:3px 9px;border-radius:999px;white-space:nowrap;
}

/* accordion body sub-components (shared class names with the homepage) */

.hip-root.hip-root .apply-fields-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0;
}
.hip-root.hip-root .apply-field-item{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:.84rem;color:#39566a;
}
.hip-root.hip-root .apply-field-lbl{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-deep);margin-bottom:3px;
}
.hip-root.hip-root .apply-fee-highlight{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--sky);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;
  font-size:.88rem;color:#39566a;
}
.hip-root.hip-root .apply-fee-amt{
  font-family:var(--disp);font-size:1.5rem;font-weight:800;color:var(--blue-deep);
}
.hip-root.hip-root .apply-fee-amt small{font-size:.72rem;font-weight:500;color:var(--muted)}
.hip-root.hip-root .apply-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.hip-root.hip-root .apply-filter-chip{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:.82rem;font-weight:600;
}
.hip-root.hip-root .apply-filter-chip small{font-weight:400;color:var(--muted)}
.hip-root.hip-root .apply-filter-arrow{color:var(--muted);font-weight:700}
.hip-root.hip-root .apply-rules-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.hip-root.hip-root .apply-rule-chip{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;font-size:.85rem;font-weight:700;
}
.hip-root.hip-root .apply-rule-lbl{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px;
}

/* ── fee cards ───────────────────────────────────────────────────────── */

.hip-root.hip-root .hip-fee-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-bottom:24px;
}
.hip-root.hip-root .hip-fee-card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:15px;
  padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:4px;
}
.hip-root.hip-root .hip-fee-ico{
  position:absolute;top:16px;right:16px;color:var(--line);display:flex;
}
.hip-root.hip-root .hip-fee-lbl{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.hip-root.hip-root .hip-fee-amt{
  font-family:var(--disp);font-size:1.75rem;font-weight:800;color:var(--blue-deep);line-height:1.15;
}
.hip-root.hip-root .hip-fee-note{font-size:.78rem;color:var(--muted)}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.hip-root.hip-root .faq-list{display:grid;gap:12px;max-width:840px;margin:0 auto}
.hip-root.hip-root .faq-list .faq{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.hip-root.hip-root .faq-list .faq.open{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.hip-root.hip-root .faq-list .faq .faq-qh{
  margin:0;padding:0;font:inherit;letter-spacing:inherit;text-align:left;
}

/* The question is a <button>, which themes style very aggressively (padding,
   centred text, borders, min-height, text-transform). The layout-critical
   properties below are forced so the row always reads as
   "question ......... [+]" regardless of the active theme. */
.hip-root.hip-root .faq-list .faq .faq-qh .faq-q{
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  text-align:left !important;
  padding:16px 20px !important;
  margin:0 !important;
  min-height:0 !important;
  height:auto !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:inherit !important;
  font-family:var(--body) !important;
  font-size:.98rem !important;
  font-weight:600 !important;
  line-height:1.6 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  cursor:pointer !important;
  transform:none !important;
}
.hip-root.hip-root .faq-list .faq .faq-qh .faq-q:hover{background:#fafdff !important;color:inherit !important}
.hip-root.hip-root .faq-list .faq .faq-qh .faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.hip-root.hip-root .faq-list .faq .faq-q .faq-q-txt{
  min-width:0;flex:1 1 auto;text-align:left;overflow-wrap:anywhere;
}
.hip-root.hip-root .faq-list .faq .faq-q .plus{
  width:24px !important;height:24px !important;flex:none !important;
  border-radius:7px;background:var(--sky);color:var(--blue);
  display:grid !important;place-items:center;
  font-size:1rem;font-weight:700;line-height:1;
  transition:background .18s ease,color .18s ease;
}
.hip-root.hip-root .faq-list .faq.open .faq-q .plus{background:var(--blue);color:#fff}
.hip-root.hip-root .faq-list .faq .faq-a{display:none;overflow:visible}
.hip-root.hip-root .faq-list .faq.open .faq-a{display:block}
.hip-root.hip-root .faq-list .faq .faq-a p{
  padding:0 20px 18px;margin:0;color:#39566a;font-size:.92rem;line-height:1.68;text-align:left;
}

/* ── related colleges ────────────────────────────────────────────────── */

/* Fixed column count (like .hip-timeline-grid) rather than auto-fit: with
   auto-fit the last row stretched its one or two orphans across the full
   width, so the strip never lined up with the other card grids. */

.hip-root.hip-root .hip-rel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;
}
.hip-root.hip-root .hip-rel-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:9px;
  min-width:0;height:100%;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.hip-root.hip-root .hip-rel-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue);color:var(--ink);
}
.hip-root.hip-root .hip-rel-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.hip-root.hip-root .hip-rel-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;
}
.hip-root.hip-root .hip-rel-ico{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--sky);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.hip-root.hip-root .hip-rel-ico svg{width:17px;height:17px;stroke-linecap:round;stroke-linejoin:round}
.hip-root.hip-root .hip-rel-loc svg,
.hip-root.hip-root .hip-rel-go svg{stroke-linecap:round;stroke-linejoin:round}
.hip-root.hip-root .hip-rel-rank{
  flex:none;background:var(--gold-soft);color:#7a4e00;border:1px solid #f0d5a4;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.hip-root.hip-root .hip-rel-name{
  font-family:var(--disp);font-size:1.02rem;font-weight:800;line-height:1.28;
  letter-spacing:-.01em;overflow-wrap:anywhere;
}
.hip-root.hip-root .hip-rel-card:hover .hip-rel-name{color:var(--blue-deep)}
.hip-root.hip-root .hip-rel-loc{
  display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);min-width:0;
}
.hip-root.hip-root .hip-rel-loc svg{flex:none;width:13px;height:13px}
.hip-root.hip-root .hip-rel-loc span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Same hairline-separated cell treatment as .hip-profile-grid, so the three
   comparable numbers read as one small table inside the card.

   Flex rather than grid, deliberately. Under a three-column grid any stray
   element that a content filter injects becomes a grid item and shunts the
   real cells into a broken 3x3 arrangement. In a nowrap flex row the same
   stray item can only ever squeeze the row, never rearrange it. */
.hip-root.hip-root .hip-rel-facts{
  display:flex;flex-wrap:nowrap;gap:1px;margin-top:2px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;
}
.hip-root.hip-root .hip-rel-fact{
  flex:1 1 0;background:var(--paper);padding:9px 10px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.hip-root.hip-root .hip-rel-fact .lbl{
  font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;
}
.hip-root.hip-root .hip-rel-fact .val{
  font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--blue-deep);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* margin-top:auto pins the footer to the bottom edge, so every card in a row
   ends on the same line however long the college name runs. */
.hip-root.hip-root .hip-rel-go{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.82rem;font-weight:700;color:var(--blue);
}
.hip-root.hip-root .hip-rel-go svg{flex:none;width:15px;height:15px;transition:transform .2s ease}
.hip-root.hip-root .hip-rel-card:hover .hip-rel-go svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .hip-root.hip-root .hip-rel-card,
  .hip-root.hip-root .hip-rel-go svg{transition:none}
  .hip-root.hip-root .hip-rel-card:hover{transform:none}
  .hip-root.hip-root .hip-rel-card:hover .hip-rel-go svg{transform:none}
}

/* Auto-paragraph insurance. The rows below are built entirely from inline
   elements, so any filter that rewrites newlines into <br /> — wpautop, or a
   page builder's own pass — would inject phantom flex and grid items between
   the real ones. The plugin emits these rows without whitespace between tags
   so there is nothing to rewrite, and these rules neutralise anything a third
   party still manages to insert. */

.hip-root.hip-root .hip-rel-grid br,
.hip-root.hip-root .hip-rel-card br,
.hip-root.hip-root .hero-cta br,
.hip-root.hip-root .hip-chips br,
.hip-root.hip-root .hip-crumb br,
.hip-root.hip-root .sec-head br{display:none}
.hip-root.hip-root .hip-rel-grid > p,
.hip-root.hip-root .hip-rel-card p,
.hip-root.hip-root .hero-cta p{display:contents;margin:0}

/* ── admission roadmap timeline ──────────────────────────────────────── */

.hip-root.hip-root .hip-timeline-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.hip-root.hip-root .hip-t-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;min-width:0;
}
.hip-root.hip-root .hip-t-card:hover{
  border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow);
}
.hip-root.hip-root .hip-t-card.active{
  border-color:var(--blue);box-shadow:0 10px 26px -12px var(--blue);
}
.hip-root.hip-root .hip-t-badge{
  font-family:var(--disp);font-size:.65rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:100px;align-self:flex-start;
}
.hip-root.hip-root .hip-t-badge.upcoming{background:var(--green-soft);color:var(--green);border:1px solid #b6e6d2}
.hip-root.hip-root .hip-t-badge.pending{background:var(--sky);color:var(--muted);border:1px solid var(--line)}
.hip-root.hip-root .hip-t-card h3{font-size:1.18rem;margin:0;color:var(--ink)}
.hip-root.hip-root .hip-t-item{
  border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:2px;
}
.hip-root.hip-root .hip-t-item .lbl{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;
}
.hip-root.hip-root .hip-t-item .val{font-size:.9rem;font-weight:700;color:var(--blue-deep)}

/* ── CTA ─────────────────────────────────────────────────────────────── */

.hip-root.hip-root .hip-cta-panel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(150deg,var(--blue-deep),var(--blue));color:#fff;
  border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow);
}
.hip-root.hip-root .hip-cta-text{max-width:620px}
.hip-root.hip-root .hip-cta-text h3{font-size:1.3rem;font-weight:800;margin-bottom:7px}
.hip-root.hip-root .hip-cta-text p{font-size:.9rem;color:rgba(255,255,255,.86)}
.hip-root.hip-root .hip-cta-panel .btn.primary{background:var(--gold);color:#3d2a00}
.hip-root.hip-root .hip-cta-panel .btn.primary:hover{filter:brightness(1.06);background:var(--gold)}

/* ── disclaimer ──────────────────────────────────────────────────────── */

.hip-root.hip-root .panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);
}
.hip-root.hip-root .disclaimer-panel{display:flex;gap:14px;align-items:flex-start;max-width:840px;margin:0 auto}
.hip-root.hip-root .disclaimer-ico{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:#996800;
  display:flex;align-items:center;justify-content:center;
}
.hip-root.hip-root .disclaimer-text{font-size:.86rem;color:var(--muted);line-height:1.68}

/* ── back to top ─────────────────────────────────────────────────────── */

.hip-root.hip-root #hip-toTop{
  position:fixed;right:20px;bottom:20px;width:42px;height:42px;border-radius:50%;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:60;
}
.hip-root.hip-root #hip-toTop.show{opacity:1;visibility:visible;transform:none}
.hip-root.hip-root #hip-toTop:hover{background:var(--blue-deep)}

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width:980px){
  .hip-root.hip-root .hip-timeline-grid{grid-template-columns:repeat(2,1fr)}
  .hip-root.hip-root .hip-rel-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .hip-root.hip-root section{padding:38px 0}
  .hip-root.hip-root .hip-timeline-grid{grid-template-columns:1fr}
  .hip-root.hip-root .hip-rel-grid{grid-template-columns:1fr;gap:13px}
  .hip-root.hip-root .hip-hero{padding:24px 0 20px}
  .hip-root.hip-root .phases{padding-left:0}
  .hip-root.hip-root .spine{display:none}
  .hip-root.hip-root .phase-node{
    position:static;margin-bottom:-8px;transform:translateY(8px);width:32px;height:32px;
  }
  .hip-root.hip-root .phase-body-inner li .evt-date{margin-left:0;margin-top:5px}
  .hip-root.hip-root .phase-body-inner li{flex-wrap:wrap}
  .hip-root.hip-root .hip-cta-panel{padding:22px}

  /* Stacked table rows: the header row is hidden and each cell carries its
     own label, so wide data tables stay readable without horizontal scroll. */
  .hip-root.hip-root .hip-table thead{display:none}
  .hip-root.hip-root .hip-table,
  .hip-root.hip-root .hip-table tbody,
  .hip-root.hip-root .hip-table tr,
  .hip-root.hip-root .hip-table td{display:block;width:100%}
  .hip-root.hip-root .hip-table tr{
    border-bottom:1px solid var(--line);padding:6px 0;
  }
  .hip-root.hip-root .hip-table tbody tr:last-child{border-bottom:0}
  .hip-root.hip-root .hip-table td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border-bottom:0;padding:7px 15px;
  }
  .hip-root.hip-root .hip-table td::before{
    content:attr(data-label);font-size:.68rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);flex:none;
  }
  .hip-root.hip-root .hip-table td.col-name{
    justify-content:flex-start;background:var(--sky);padding:10px 15px;
  }
  .hip-root.hip-root .hip-table td.col-name::before{display:none}
  .hip-root.hip-root .hip-table-hint{display:none}
}

/* Mobile: the hero actions stack and fill the column width, so each one is a
   full-width tap target. Uses the same 720px breakpoint as the rest of the
   stylesheet — below it three buttons no longer fit on one line and used to
   wrap into a ragged two-plus-one row with a centred orphan. */

@media (max-width:720px){
  .hip-root.hip-root .hero-cta{
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    width:100%;max-width:440px;gap:8px;margin-top:4px;
  }
  .hip-root.hip-root .hero-cta .btn{width:100%;padding:12px 18px}

  /* The lifted glow under the primary and accent buttons sits in the gap once
     they are stacked, so a 9px gap read as roughly twice that. Pulled in
     tight against the button edge, the stack reads as one group. */
  .hip-root.hip-root .hero-cta .btn.primary{box-shadow:0 4px 12px -8px var(--blue)}
  .hip-root.hip-root .hero-cta .btn.accent{box-shadow:0 4px 12px -8px rgba(196,128,0,.45)}
}