/*
 * Public website: landing, apply and status pages. Uses the same tokens as
 * the staff system (tokens.css), so both read as one EduFund.
 */
body.site { background: var(--color-surface); }
.site-boot { min-height: 100vh; display: grid; place-items: center; }
.site-wrap { width: min(1120px, 100% - 2rem); margin: 0 auto; }
.site-wrap.narrow { width: min(820px, 100% - 2rem); }
.site-main { min-height: 60vh; }
/* In-page links (#how, #cover...) stop below the sticky header instead of under it. (BUG-043) */
html { scroll-padding-top: 84px; }

/* --- Page loader: balls rolling along nine grooves (Uiverse by Praashoo7) --- */
.page-loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--pl-bg); transition: opacity .4s ease, visibility .4s;
  /* Safety net: if the script never runs, the loader still gets out of the way. */
  animation: page-loader-timeout 0s 6s forwards;
}
.page-loader.done { opacity: 0; visibility: hidden; }
@keyframes page-loader-timeout { to { opacity: 0; visibility: hidden; } }
/* Nine grooves 20deg apart (--i on each, set in index.html), each with a ball rolling
   along it; the balls start 0.2s apart. Sizes are in em, so font-size scales it. */
.pl-main { position: relative; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pl-set { display: flex; align-items: center; justify-content: center; }
.pl-track, .pl-lane {
  position: absolute; width: 1.15em; height: 13em; border-radius: 50px;
  transform: rotate(calc(var(--i) * 20deg));
}
.pl-track { background: var(--pl-bg); }
.pl-track::after, .pl-track::before {
  content: ""; position: absolute; width: 1.15em; border-radius: 50px; background: var(--pl-bg);
  border: 1px solid var(--pl-edge);
  box-shadow: inset 5px 5px 15px var(--pl-shade), inset -5px -5px 15px var(--pl-light);
}
.pl-track::after {
  left: 0; top: 0; height: 5em;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
}
.pl-track::before {
  right: 0; bottom: 0; height: 4.5em;
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to top, #000 calc(100% - 48px), transparent 100%);
}
.pl-lane { background: transparent; }
.pl-ball {
  display: block; width: 1.15em; height: 1.15em; border-radius: 50%; background-color: var(--pl-ball);
  box-shadow:
    rgba(0, 0, 0, 0.17) 0 -10px 10px 0 inset, rgba(0, 0, 0, 0.15) 0 -15px 15px 0 inset,
    rgba(0, 0, 0, 0.1) 0 -40px 20px 0 inset, rgba(0, 0, 0, 0.06) 0 2px 1px, rgba(0, 0, 0, 0.09) 0 4px 2px,
    rgba(0, 0, 0, 0.09) 0 8px 4px, rgba(0, 0, 0, 0.09) 0 16px 8px, rgba(0, 0, 0, 0.09) 0 32px 16px,
    0 -1px 15px -8px rgba(0, 0, 0, 0.09);
  animation: pl-move 3.63s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s);
}
@keyframes pl-move { 50% { transform: translateY(12em); } }
@media (max-width: 640px) { .pl-main { font-size: 13px; } }

/* --- Header --- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); }
.site-header-inner { display: flex; align-items: center; gap: var(--space-6); height: 68px; }
.site-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.site-brand:hover { text-decoration: none; }
.site-brand .brand-mark { width: 38px; height: 38px; }
.site-brand > span { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.site-brand small { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-normal); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 3px; }
.brand-mark .bm-bg { fill: #0d3b37; }
.brand-mark .bm-gold { fill: var(--color-gold); }
.brand-mark .bm-ivory { fill: var(--color-ivory); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
.site-nav a:not(.btn) { color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--color-primary); text-decoration: none; }
.site-menu { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; padding: 10px; flex-direction: column; justify-content: space-between; }
.site-menu span { display: block; height: 2px; background: var(--color-text); border-radius: 2px; }

/* --- Buttons used on the public pages --- */
.btn-lg { min-height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-gold { background: var(--color-gold); color: #1f1a0d; }
.btn-gold:hover { background: #e6c47a; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.link-btn { border: 0; background: none; padding: 0; margin-left: var(--space-3); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.link-btn:hover { text-decoration: underline; }

/* --- Hero: full screen, centred --- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #dcebe8; background: var(--color-sidebar);
  min-height: calc(100vh - 68px); min-height: calc(100svh - 68px);   /* the screen below the sticky header */
  display: grid; place-items: center;
}
/* Graduation photo (<img srcset> in landing.js). --hero-shift is the scroll parallax (reveal.js). */
.hero-photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 40%;
  transform: translateY(var(--hero-shift, 0px)) scale(1.06); will-change: transform;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-overlay); }
.hero-inner { display: grid; place-items: center; padding: 72px 0; text-align: center; }
.hero-copy { max-width: 46rem; display: grid; justify-items: center; opacity: var(--hero-fade, 1); }
.kicker { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold); font-weight: var(--weight-semibold); }
.kicker.dark { color: var(--color-gold-text); }
.hero h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 6.5vw, 5rem); line-height: 1.02;
  color: #fff; margin: var(--space-4) 0 var(--space-5); text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 44ch; line-height: 1.6; color: #eef5f4; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.hero-actions .btn svg { width: 18px; height: 18px; }
/* Entrance, played when the loader lifts (landing.js swaps html.hero-pending for
   html.hero-go): kicker, then the heading word by word, the gold underline drawing
   itself under "sponsored.", the summary, the buttons. If the script never runs,
   neither class is set and everything is simply visible. */
.hero-word { display: inline-block; }
.hero-mark { position: relative; }
.hero-underline { position: absolute; left: -3%; bottom: -0.16em; width: 106%; height: 0.3em; overflow: visible; }
.hero-underline path { fill: none; stroke: var(--color-gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-pending .hero-copy .kicker, .hero-pending .hero-word, .hero-pending .hero-lede, .hero-pending .hero-actions { opacity: 0; }
.hero-pending .hero-underline path { stroke-dashoffset: 1; }
.hero-go .hero-copy .kicker { animation: hero-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-go .hero-word { animation: hero-word .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.15s + var(--w) * .14s); }
.hero-go .hero-underline path { animation: hero-draw .8s cubic-bezier(.6, 0, .2, 1) .95s both; }
.hero-go .hero-lede { animation: hero-rise .7s cubic-bezier(.2, .7, .2, 1) .6s both; }
.hero-go .hero-actions { animation: hero-rise .7s cubic-bezier(.2, .7, .2, 1) .75s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-word { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } }
@keyframes hero-draw { from { stroke-dashoffset: 1; } }
/* A sheen crosses the gold "Apply now" button every few seconds. */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg);
}
.hero-go .btn-shine::after { animation: btn-shine 4.5s ease-in-out 1.8s infinite; }
@keyframes btn-shine { 0% { left: -60%; } 28%, 100% { left: 130%; } }

/* --- Scroll animations (js/public/reveal.js) --- */
.reveal-ready [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transform: none; }
  .hero-word, .hero-copy > *, .hero-underline path { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .btn-shine::after { display: none; }
}


/* --- Bands --- */
.band { padding: 72px 0; }
.band-alt { background: var(--color-bg); }
.band-title { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; margin-bottom: var(--space-8); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); counter-reset: none; }
.steps li { border-top: 2px solid var(--color-primary); padding-top: var(--space-4); }
.step-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-gold-text); font-weight: 600; }
.steps h3 { font-size: var(--text-md); margin: var(--space-2) 0; }
.steps p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
/* "What sponsorship covers": explanation on the left, an award card on the right whose
   bar splits into the three parts. The bar grows in when the card scrolls into view. */
.cover-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.cover-intro .band-title { margin: var(--space-3) 0 var(--space-4); font-size: 2.2rem; }
.cover-lede { font-size: var(--text-md); line-height: 1.65; color: var(--color-text-muted); max-width: 46ch; }
.cover-intro .cover-points { margin-top: var(--space-6); }   /* beats .ticks { margin: 0 } further down */
.cover-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-6);
  color: var(--color-primary); font-weight: var(--weight-semibold);
}
.cover-link svg { width: 16px; height: 16px; transition: translate .2s; }
.cover-link:hover { text-decoration: none; }
.cover-link:hover svg { translate: 4px 0; }
.award-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 60px -30px rgba(16, 40, 37, .28);
}
.award-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.award-head h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.award-tag {
  font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted);
  padding: 4px 10px; border-radius: 999px; background: var(--color-bg);
}
.part-tuition { --c: var(--part-tuition); }
.part-accommodation { --c: var(--part-accommodation); }
.part-other { --c: var(--part-other); }
.award-bar { display: flex; gap: 4px; height: 14px; margin: 20px 0 16px; }
.award-seg { flex: 0 0 calc(var(--share) - 3px); border-radius: 999px; background: var(--c); transform-origin: left center; }
.reveal-ready .award-card .award-seg { transform: scaleX(0); }
.reveal-ready .award-card.is-visible .award-seg {
  transform: scaleX(1); transition: transform .8s cubic-bezier(.2, .7, .2, 1) calc(.35s + var(--i) * .18s);
}
.award-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.award-part {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px; margin: 0 -12px; border-radius: 12px; transition: background .2s;
}
.award-part:hover { background: var(--color-bg); }
.award-chip {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--color-surface));
}
.award-chip svg { width: 20px; height: 20px; }
.award-part h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.award-part p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; margin-top: 2px; }
.award-sum {
  margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--color-border-strong);
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7;
}
.award-sum span { color: var(--color-text); font-weight: var(--weight-medium); }
.award-sum strong { color: var(--color-primary); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ticks li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; }
.ticks svg { width: 18px; height: 18px; flex: none; color: var(--color-primary); margin-top: 3px; }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-sm); }

/* Participating institutions: a loop of tiles (js/public/institution-marquee.js). */
.marquee { overflow: hidden; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee:focus-visible { box-shadow: 0 0 0 3px var(--color-focus, #0f5e57) inset; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) 0; margin: 0; list-style: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.inst-tile { display: flex; align-items: center; gap: 12px; flex: none; min-height: 76px; padding: 12px 20px 12px 12px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
/* Same box for every logo, so tall crests and wide marks line up. */
.inst-logo { width: 60px; height: 52px; flex: none; object-fit: contain; }
.inst-crest { --crest: #0f5e57; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .04em;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--crest) 70%, #fff), var(--crest) 70%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--crest) 60%, #fff), inset 0 0 0 5px var(--crest); }
.inst-crest.is-mid { font-size: .85rem; letter-spacing: .02em; }
.inst-crest.is-long { font-size: .6rem; letter-spacing: 0; }
.inst-name { display: flex; flex-direction: column; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; color: var(--color-text); }
.inst-name small { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 640px) {
  .inst-tile { min-height: 64px; padding: 10px 16px 10px 10px; }
  .inst-logo, .inst-crest { height: 44px; }
  .inst-logo { width: 50px; }
  .inst-crest { width: 44px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee-list { flex-wrap: wrap; justify-content: center; padding: 0 16px; }
  .marquee-list[aria-hidden="true"] { display: none; }
}

/* --- 3D ring carousel (Uiverse by ilkhoeri; js/public/carousel.js) --- */
.gallery-band { text-align: center; overflow: hidden; }
.band-lede { max-width: 52ch; margin: calc(-1 * var(--space-5)) auto var(--space-6); color: var(--color-text-muted); }
/* Everything scales from one card width, --w: ring radius, 3D perspective and frame height
   are multiples of it, so the ring looks the same at every size, only bigger or smaller.
   Desktop/tablet: the ring (about 6 card widths across) grows with the screen, up to
   150 x 225 px cards. */
.c3d {
  --w: clamp(58px, calc((100vw - 48px) / 6.2), 150px);
  --radius: 2.5;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.c3d-wrapper {
  position: relative; width: 100%; height: calc(var(--w) * 3.45); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.c3d-inner {
  --h: calc(var(--w) * 1.5);
  --translateZ: calc(var(--w) * var(--radius));
  --rotateX: -15deg; --perspective: calc(var(--w) * 10);
  position: absolute; width: var(--w); height: var(--h); top: 20%;
  left: calc(50% - (var(--w) / 2) - 2.5px);
  transform-style: preserve-3d; transform: perspective(var(--perspective));
  animation: c3d-rotate 20s linear infinite;
  will-change: transform;
}
/* carousel.js pauses the ring while it is off-screen (saves battery on phones). */
.c3d-wrapper.is-offscreen .c3d-inner { animation-play-state: paused; }
@keyframes c3d-rotate {
  from { transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0); }
  to { transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn); }
}
.c3d-card {
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
  border: 2px solid rgba(var(--color-card));
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
  backface-visibility: visible;
}
.c3d-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  background: radial-gradient(circle, rgba(var(--color-card), 0.2) 0%, rgba(var(--color-card), 0.6) 80%, rgba(var(--color-card), 0.9) 100%);
}
/* Phones: a tighter ring (radius 2 card widths, about 5 across) lets each card be about
   30% bigger than before while the whole ring still fits the screen. */
@media (max-width: 640px) {
  .c3d { --w: min(80px, calc((100vw - 40px) / 4.6)); --radius: 2; }
  .c3d-wrapper { height: calc(var(--w) * 3.4); }
  .c3d-card { border-radius: 10px; }
}

/* --- Footer --- */
/* Rich footer: apply call-out, brand + three link columns, copyright + back to top. */
.site-footer { position: relative; background: #0a2624; color: #9fbab6; font-size: var(--text-sm); }
.footer-cta { background: linear-gradient(120deg, var(--color-sidebar), #0f5e57); color: #d7ebe8; }
.footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding: 44px 0; }
.footer-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; color: #fff; }
.footer-cta p { margin-top: var(--space-2); color: #cfe0dd; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-cta .btn svg { width: 18px; height: 18px; }
.footer-main {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8); padding: 52px 0 36px;
}
.site-footer .site-brand, .site-footer .site-brand small { color: #fff; }
.footer-brand p { margin-top: var(--space-4); max-width: 36ch; line-height: 1.6; }
.footer-col h3 { color: #fff; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
/* Links: an underline slides in on hover or keyboard focus. */
.footer-col a {
  color: #cfe0dd; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
.footer-col a:hover, .footer-col a:focus-visible { color: #fff; background-size: 100% 1px; text-decoration: none; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .08); padding: var(--space-5) 0 var(--space-6); color: #86a39f;   /* 4.5:1+ (BUG-054) */
}
.back-to-top {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #cfe0dd;
  font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background .2s, border-color .2s;
}
.back-to-top:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.back-to-top svg { width: 14px; height: 14px; rotate: -90deg; transition: translate .2s; }
.back-to-top:hover svg { translate: 0 -2px; }

/* --- Apply + status pages --- */
.page-intro { padding: 56px 0 28px; }
.page-intro h1 { font-family: var(--font-display); font-weight: 600; font-size: 2.3rem; margin: var(--space-2) 0 var(--space-3); }
.page-intro p:not(.kicker) { color: var(--color-text-muted); font-size: var(--text-md); }
.stepper { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; gap: var(--space-2); }
.stepper li { flex: 1; display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 3px solid var(--color-border); color: var(--color-text-faint); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.stepper li.current { border-bottom-color: var(--color-primary); color: var(--color-text); }
.stepper li.done { border-bottom-color: var(--color-gold); color: var(--color-text-muted); }
.stepper-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-neutral-soft); font-size: var(--text-xs); }
.stepper li.current .stepper-dot { background: var(--color-primary); color: #fff; }
.stepper li.done .stepper-dot { background: var(--color-gold); color: #1f1a0d; }
.stepper-dot svg { width: 14px; height: 14px; }
.apply-card { margin-bottom: 72px; }
.apply-card .card-body { padding: var(--space-8); }
.apply-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.apply-sub { margin: var(--space-1) 0 var(--space-6); }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.review-grid h3 { font-size: var(--text-md); margin-bottom: var(--space-3); display: flex; align-items: baseline; }
.confirm { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.confirm input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--color-primary); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fix-btn { margin-top: var(--space-2); }
.apply-done { text-align: left; }
.apply-done h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; margin: var(--space-3) 0 var(--space-2); }
.apply-done h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.apply-done .alert { margin-top: var(--space-5); }
.done-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success-soft); color: var(--color-success); }
.done-icon svg { width: 28px; height: 28px; }
.ref-box { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-2); padding: var(--space-4) var(--space-5); border: 1px dashed var(--color-gold-deep); border-radius: var(--radius); background: var(--color-secondary-soft); }
.ref-box span { font-size: var(--text-sm); color: var(--color-text-muted); }
.ref-box strong { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .06em; }
.next-steps { padding-left: 1.2rem; line-height: 1.8; color: var(--color-text-muted); }
.status-result { margin-top: calc(-1 * var(--space-10)); }
.status-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.status-top h2 { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .04em; }
.status-meaning { font-size: var(--text-md); padding: var(--space-4); border-left: 3px solid var(--color-gold); background: var(--color-surface-alt); }
.status-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; } /* BUG-040 */
.status-card .small svg { display: inline; width: 14px; height: 14px; vertical-align: -2px; }

/* --- Student portal (portal.html, js/public/portal.js; BUG-042) --- */
.portal-view { margin-bottom: 72px; }
.portal-home { display: flex; flex-direction: column; gap: var(--space-5); }
.portal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.portal-grid > * { min-width: 0; }
.portal-card .card-header h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.portal-card .card-header .small { display: block; margin-top: 2px; }
.portal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: var(--radius); }
.portal-stat { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.portal-stat + .portal-stat { border-left: 1px solid var(--color-border); }
.portal-stat span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.portal-stat strong { font-size: clamp(1.05rem, 3.6vw, 1.4rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-stat.is-paid strong { color: var(--color-primary); }
.portal-award .ledger-bar { height: 10px; margin-top: var(--space-4); border-radius: 999px; background: var(--color-secondary-soft); overflow: hidden; }
.portal-award .ledger-paid { display: block; height: 100%; background: var(--color-primary); }
.portal-parts { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); }
.portal-parts li { display: flex; gap: var(--space-2); color: var(--color-text-muted); }
.portal-parts strong { color: var(--color-text); }
.portal-docs { padding: 0 var(--space-5); }
.portal-card td.nowrap { white-space: nowrap; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero::before { background: var(--hero-overlay-narrow); }
  .hero-photo { object-position: 60% 50%; }
  .hero-inner { padding: 48px 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-layout, .two-col, .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-stats { grid-template-columns: minmax(0, 1fr); }
  .portal-stat + .portal-stat { border-left: 0; border-top: 1px solid var(--color-border); }
  .cover-layout { gap: var(--space-8); }
  .cover-intro .band-title { font-size: 1.8rem; }
}
@media (max-width: 760px) {
  .site-menu { display: flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .site-nav .btn { margin-top: var(--space-3); }
  .band { padding: 52px 0; }
  .steps, .review-grid, .status-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding: 40px 0 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta-inner { padding: 36px 0; }
  .apply-card .card-body { padding: var(--space-5); }
  .stepper-name { display: none; }
  .stepper li.current .stepper-name { display: inline; }
}

/* Scrolled-to panels stop below the sticky header, not underneath it. */
#apply, .status-result { scroll-margin-top: 88px; }
.review-docs { grid-column: 1 / -1; }

/* Applicant portal sign-in on status.html */
/* Same bottom margin as .apply-card: .status-result pulls itself up by --space-10. */
.signin-wrap { display: flex; justify-content: center; margin-bottom: 72px; }
.signin-wrap .signin { border: 1px solid var(--color-border); }

/* Touch screens: 44 x 44 px targets on the public pages (BUG-055). */
@media (pointer: coarse) {
  .site-menu { width: 44px; height: 44px; }
  .back-to-top { min-height: 44px; }
  .footer-col a { display: inline-block; padding: 10px 0; }
}