/* ==========================================================================
   Student registration (sections/students.php, assets/js/students.js). Late morning: the sky over the European
   University's gate at that hour (sampled from the photo: #ABBBD9 → #BDCADD), clearing toward noon further down
   the sheet. Brand ink for text (the "day text on light sky"), Tbilisi State University's ochre for the marks,
   brand green for the actions. The sheet rises tilted over the marriage screen and straightens (ch_sec3); on wide
   screens with motion it then holds while the universities pass (in_sec4). Modes, decided by CSS so the first paint
   is right: pin (JS, ≥ 861px, motion), tabs (JS, phones or reduced motion), list (no JS).
   ========================================================================== */
.stu {
  --sky-0: #A9B9D7; --sky-1: #BCC9DE; --sky-2: #D3DCE9; --sky-3: #EBF0F5;
  --s-ink: #0B1A33; --s-ink-2: #34445E; --ochre: #C98A1E; --ochre-ink: #6E4708; --ochre-lg: #9A6410;
  --s-line: rgb(11 26 51 / .14); --paper: #FBFCFD;
  --cw: clamp(280px, min(31vw, (100svh - 610px) * 1.58), 520px);   /* the card's width (the name above it, the picker under it) */
  --horizon: calc(min(12vw, 19vh) * .5 + 14px);   /* the band at the foot of the stage where the Georgian name shows */
  --sx: 1;
  position: relative; z-index: 8; color: var(--s-ink);
}
[dir="rtl"] .stu { --sx: -1; }
.stu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the sheet ---------- */
.stu__sheet {
  position: relative; border-radius: 28px 28px 0 0; transform-origin: 50% 0;
  background: linear-gradient(to bottom, var(--sky-0), var(--sky-1) 26%, var(--sky-2) 62%, var(--sky-3));
  box-shadow: 0 -24px 70px -26px rgb(8 14 30 / .55);
}

/* it comes in over the marriage screen, which holds still under it (marriage.css) */
@media (prefers-reduced-motion: no-preference) {
  html.js .stu { margin-top: -100vh; margin-top: -100svh; }
  /* its own layer for good: taking it away when the sheet lands would repaint all of it in one frame */
  html.js .stu__sheet { will-change: transform; }
}

.stu__cover { position: absolute; z-index: 30; inset: auto 0 0; height: 100vh; height: 100svh; background: #0A1220; opacity: 0; pointer-events: none; will-change: opacity; }

/* ---------- the stage: chapter head, the university, your name, the cards and the picker ---------- */
.stu__stage { position: relative; }
.stu__head, .stu-unis, .stu-deck, .stu-name, .stu-pick, .stu__help { position: relative; z-index: 1; }

.stu__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
html[lang="en"] .stu__eyebrow { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.stu__eyebrow .chap__no { color: var(--ochre); }
.stu__eyebrow > span:last-child { display: inline-flex; align-items: center; gap: 12px; }
.stu__eyebrow > span:last-child::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .45; }
.stu__title { margin-top: 12px; max-width: 13em; font-size: clamp(30px, 3.25vw, 54px); font-weight: 800; line-height: 1.28; letter-spacing: -.01em; text-wrap: balance; }
html[lang="en"] .stu__title { font-family: var(--font-serif); font-size: clamp(32px, 3.1vw, 54px); font-weight: 480; line-height: 1.04; letter-spacing: -.025em; }
.stu__lead { max-width: 46ch; font-size: 15.5px; line-height: 1.9; color: var(--s-ink-2); text-wrap: pretty; }
html[lang="en"] .stu__lead { line-height: 1.6; }

/* the sky: a university's name in Georgian on the horizon, white like a bank of cloud, drifting. Shown as pictures students.js draws from this text (live text this large costs the
   GPU a frame); no mask or blur here either, both make the GPU redraw the whole sky. */
.stu-sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
/* (only the names next to the one on show get a layer ahead of time, so a new name is ready to fade in; all six at
   once cost the GPU a 250 ms frame when the sheet came in, measured) */
.stu-cloud { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease-io); }
.stu-cloud.is-near { will-change: opacity; }
.stu-cloud.is-on { opacity: 1; }
.stu-cloud span {
  display: inline-block; white-space: nowrap; font-family: var(--font-ka); font-weight: 300;
  font-size: clamp(96px, min(12vw, 19vh), 220px); line-height: .8; color: rgb(255 255 255 / .62); translate: 0 34%;
  animation: stu-drift 52s linear infinite alternate;
}
@keyframes stu-drift { from { transform: translateX(5vw); } to { transform: translateX(calc(95vw - 100%)); } }
.stu:not(.is-seen) .stu-cloud span { animation-play-state: paused; }
.stu-cloud canvas { display: block; }
/* it rises from the horizon once the sheet has landed (.is-up: its first drawing then falls in a still moment), and
   sinks again when the stage lets go (.is-leaving) */
.stu-sky { opacity: 0; visibility: hidden; transform: translateY(40px); transition: opacity .7s var(--ease-io), transform .9s var(--ease-out), visibility 0s .9s; }
.stu.is-up:not(.is-leaving) .stu-sky.is-drawn { opacity: 1; visibility: visible; transform: none; transition: opacity 1.2s var(--ease-io) .2s, transform 1.6s var(--ease-out) .2s, visibility 0s; }

/* ---------- a university (the article; with JS one at a time, cross-fading) ---------- */
.stu-unis { margin: 0; padding: 0; list-style: none; }
.stu-uni__pic { display: none; }
.stu-uni__meta { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--s-ink-2); }
.stu-uni__name { margin-top: 6px; font-size: clamp(24px, 2.1vw, 34px); font-weight: 800; line-height: 1.3; }
html[lang="en"] .stu-uni__name { font-family: var(--font-serif); font-weight: 520; line-height: 1.12; letter-spacing: -.015em; }
.stu-uni__code { display: inline-block; vertical-align: .32em; margin-inline-start: 6px; padding: 3px 9px 2px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-latin); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; }
.stu-uni__tag { margin-top: 4px; font-size: 15px; font-weight: 650; color: var(--ochre-ink); }
.stu-uni__text { margin-top: 14px; max-width: 52ch; font-size: 15px; line-height: 1.9; color: var(--s-ink-2); text-wrap: pretty; }
html[lang="en"] .stu-uni__text { line-height: 1.6; }
.stu-uni__fields { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.stu-uni__fields li { padding: 3px 13px; border: 1px solid rgb(11 26 51 / .22); border-radius: 999px; font-size: 13px; font-weight: 600; background: rgb(255 255 255 / .28); }
.stu-uni__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.stu-uni__go .btn { min-height: 50px; padding: 0 24px; }
.stu-uni__go .btn .arrow { transition: translate .4s var(--ease-out); }
.stu-uni__go .btn:hover .arrow { translate: calc(var(--sx) * 4px) 0; }
.stu-uni__site { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(11 26 51 / .3); padding-bottom: 1px; }
.stu-uni__site:hover { border-color: currentColor; }
.stu-out { width: 14px; height: 14px; }
[dir="rtl"] .stu-out { transform: scaleX(-1); }

html.js .stu-unis { display: grid; }
html.js .stu-uni { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .45s var(--ease-io), transform .7s var(--ease-out), visibility 0s .45s; }
html.js .stu-uni.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease-io) .2s, transform .9s var(--ease-out) .2s, visibility 0s; }

/* ---------- the student cards ---------- */
.stu-deck { width: var(--cw); aspect-ratio: 1.586; container-type: inline-size; perspective: 1500px; }
.stu-deck__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 7deg)) rotateY(calc(var(--ry, 0deg) + var(--sx) * -11deg)); }
.stu-id {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40%; overflow: hidden;
  border-radius: 4.6cqw; background: var(--paper); color: var(--s-ink);
  box-shadow: 0 40px 70px -36px rgb(14 24 52 / .55), 0 2px 8px rgb(14 24 52 / .12), inset 0 0 0 1px rgb(255 255 255 / .7);
  transition: transform .9s var(--ease-out), opacity .6s var(--ease-io);
  will-change: transform, opacity;   /* (painted while still hidden at the back of the stack) */
}
/* where each card lies: d = its place after the one on top (0); the ones already seen were dealt off to the side */
.stu-id[data-d="0"] { z-index: 4; transform: none; }
.stu-id[data-d="1"] { z-index: 3; transform: translate3d(calc(var(--sx) * -3.5%), 5.5%, -50px); }
.stu-id[data-d="2"] { z-index: 2; transform: translate3d(calc(var(--sx) * -7%), 11%, -100px); }
.stu-id[data-d="far"] { z-index: 1; transform: translate3d(calc(var(--sx) * -7%), 11%, -100px); opacity: 0; }
.stu-id[data-d="past"] { z-index: 5; transform: translate3d(calc(var(--sx) * -115%), -16%, 40px) rotate(calc(var(--sx) * 9deg)); opacity: 0; transition: transform .9s var(--ease-io), opacity .5s var(--ease-io) .25s; }
.stu-id:not([data-d="0"]) .stu-id__body > *, .stu-id:not([data-d="0"]) .stu-id__code { opacity: .55; }

.stu-id__body { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; padding: 6.2cqw 6cqw 5.4cqw; }
.stu-id__guil { position: absolute; inset: 18% 0 6%; width: 100%; height: 76%; opacity: .34; }
.stu-id__body > p { position: relative; margin: 0; }
.stu-id__head { display: flex; align-items: center; gap: 2.6cqw; }
.stu-id__logo { width: 7.4cqw; height: 7.4cqw; flex: none; }
.stu-id__head > span { display: grid; line-height: 1.25; }
.stu-id__head b { font-size: 2.6cqw; font-weight: 800; letter-spacing: .02em; }
html[lang="en"] .stu-id__head b { letter-spacing: .14em; text-transform: uppercase; font-size: 2.2cqw; }
.stu-id__head span[lang="ka"] { font-family: var(--font-ka); font-size: 2.25cqw; color: var(--s-ink-2); }
.stu-id__uni { display: grid; margin-top: 5.4cqw !important; line-height: 1.3; }
.stu-id__uni b { font-size: 3.9cqw; font-weight: 800; }
.stu-id__uni span { margin-top: .6cqw; font-family: var(--font-serif); font-size: 2.6cqw; color: var(--s-ink-2); }
.stu-id__uni span[lang="ka"] { font-family: var(--font-ka); font-style: normal; font-size: 2.4cqw; }   /* (in English the second line is the Georgian name) */
.stu-id__who { display: grid; align-content: end; gap: .8cqw; }
.stu-id__who span { font-size: 2.1cqw; font-weight: 700; letter-spacing: .04em; color: var(--s-ink-2); }
.stu-id__who b { min-height: 1.5em; padding-bottom: .6cqw; border-bottom: 1px dashed rgb(11 26 51 / .35); font-size: 4.6cqw; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu-id__who b:empty::before { content: attr(data-empty); opacity: .32; font-weight: 600; }
.stu-id__fields { margin-top: 2.4cqw !important; font-size: 2.2cqw; font-weight: 600; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stu-id__photo { position: relative; background: #8FA3C2; }
.stu-id__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stu-id__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(8 16 36 / .62), rgb(8 16 36 / 0) 46%); }
.stu-id__code { position: absolute; z-index: 1; inset-inline-start: 5cqw; bottom: 3.8cqw; font-family: var(--font-serif); font-size: 9cqw; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff; }
/* the seal over the photo's edge, as on a real card: a faint outline until the card has a name, then stamped */
.stu-id__seal {
  position: absolute; z-index: 2; width: 21cqw; height: 21cqw; inset-inline-end: calc(40% - 10.5cqw); bottom: 6cqw;
  color: var(--ochre-lg); overflow: visible; opacity: .2; transform: rotate(-14deg) scale(.96);
  transition: opacity .25s, transform .25s;
}
.stu-id__seal text { font-family: "Noto Serif Georgian", var(--font-latin); font-size: 7.6px; font-weight: 700; letter-spacing: .5px; fill: currentColor; }
.stu-id__seal use { opacity: .9; }
.stu.is-named .stu-id__seal { opacity: .92; animation: stu-stamp .5s var(--ease-out) both; }
@keyframes stu-stamp { 0% { opacity: 0; transform: rotate(-24deg) scale(1.6); } 60% { opacity: .95; transform: rotate(-12deg) scale(.94); } 100% { opacity: .92; transform: rotate(-14deg) scale(1); } }
/* a sheen that follows the pointer (students.js sets --mx) */
.stu-id__sheen { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / .38) 49%, rgb(255 255 255 / 0) 60%); background-size: 260% 100%; background-position: calc(50% + var(--mx, 0) * 45%) 0; opacity: .5; }

/* ---------- your name for the cards ---------- */
.stu-hold { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(16px, 2.4vh, 26px); }
.stu-hold .stu-deck { margin-bottom: calc(var(--cw) / 1.586 * .11); }   /* (room for the cards peeking out under the top one) */
.stu-name { display: grid; gap: 6px; width: var(--cw); }
.stu-name__label { font-size: 12.5px; font-weight: 700; color: var(--s-ink); }
.stu-name__input {
  height: 48px; padding: 0 16px; border: 1px solid rgb(11 26 51 / .26); border-radius: 14px; background: rgb(255 255 255 / .55);
  font: inherit; font-size: 16px; font-weight: 650; color: var(--s-ink); outline: none;
  box-shadow: 0 6px 18px -12px rgb(14 24 52 / .35); transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.stu-name__input::placeholder { color: rgb(11 26 51 / .45); font-weight: 500; font-size: 14.5px; }
.stu-name__input:hover { border-color: rgb(11 26 51 / .5); background: rgb(255 255 255 / .7); }
.stu-name__input:focus-visible { border-color: var(--s-ink); background: #fff; box-shadow: 0 0 0 3px rgb(131 205 32 / .55); }

/* ---------- the picker under the cards: one chip per university (the one on show fills as you scroll through it),
   and a line saying how to move: scroll (where the stage holds) or swipe (phones, reduced motion) ---------- */
.stu-pick { display: grid; justify-items: center; gap: 10px; max-width: 100%; }
.stu-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stu-tick button {
  position: relative; overflow: hidden; display: block; padding: 8px 15px 9px; border: 1px solid rgb(11 26 51 / .24); border-radius: 999px;
  background: rgb(255 255 255 / .34); color: var(--s-ink-2); cursor: pointer;
  font-family: var(--font-latin); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.2;
  transition: background-color .3s, border-color .3s, color .3s;
}
.stu-tick i { position: absolute; inset-inline: 12px; bottom: 4px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
.stu-tick b { position: absolute; inset: 0; background: var(--ochre); transform: scaleX(var(--f, 0)); transform-origin: left; }
[dir="rtl"] .stu-tick b { transform-origin: right; }
.stu-tick.is-done button { border-color: rgb(201 138 30 / .7); color: var(--s-ink); }
.stu-tick.is-on button { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
.stu-tick.is-on i { opacity: 1; }
.stu-tick button:hover { border-color: var(--s-ink); color: var(--s-ink); }
.stu-tick.is-on button:hover { color: #fff; }
.stu-tick button:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 3px; }
.stu-pick__hint { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: calc(var(--cw) + 80px); font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--s-ink-2); text-align: center; }
.stu-pick__hint svg { flex: none; width: 20px; height: 20px; }
.stu-pick__swipe, .stu-pick__tap { display: none; }
/* until you have moved once, the mouse's wheel rolls */
.stu-pick__mouse line { animation: stu-wheel 1.6s var(--ease-io) infinite; }
.stu.is-moved .stu-pick__mouse line { animation: none; }
@keyframes stu-wheel { 0%, 20% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(5px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
/* no hold here (phones, reduced motion): swipe or pick */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .stu-pick__mouse, .stu-pick__scroll { display: none; }
  .stu-pick__swipe { display: block; }
  .stu-pick__tap { display: inline; }
}

.stu__help { font-size: 14px; color: var(--s-ink-2); }
.stu__help a { margin-inline-start: 4px; font-weight: 750; color: var(--s-ink); text-decoration: none; border-bottom: 1px solid rgb(11 26 51 / .3); }
.stu__help a:hover { border-color: currentColor; }

/* ---------- wide screens: head across the top; the university | your name, the cards, the picker ---------- */
@media (min-width: 861px) {
  html.js .stu__stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head" "uni deck" "help deck";
    column-gap: clamp(28px, 4vw, 76px); row-gap: clamp(20px, 3.4vh, 40px);
    padding: calc(var(--header-h) + 2.6vh) var(--gutter) var(--horizon); padding-inline-start: var(--qnav-clear); max-width: 1600px; margin: 0 auto;
  }
  html.js .stu__head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "eye eye" "title lead"; column-gap: clamp(28px, 4vw, 76px); align-items: end; }
  html.js .stu__eyebrow { grid-area: eye; justify-self: start; }
  html.js .stu__title { grid-area: title; }
  html.js .stu__lead { grid-area: lead; padding-bottom: .3em; }
  html.js .stu-unis { grid-area: uni; align-self: center; }
  html.js .stu-hold { grid-area: deck; place-self: center; }
  html.js .stu__help { grid-area: help; align-self: end; }
}
/* … held still while the universities pass (one stretch of scroll each) */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.js .stu__track { height: calc(100svh + var(--n) * 64svh); }
  html.js .stu__stage { position: sticky; top: 0; height: 100svh; min-height: 660px; }
}
/* short laptop screens: a smaller head, so the university and the card keep their room above the horizon */
@media (min-width: 861px) and (max-height: 820px) {
  .stu__title { font-size: clamp(28px, 2.6vw, 42px); }
  html[lang="en"] .stu__title { font-size: clamp(30px, 2.7vw, 44px); }
  .stu__lead { font-size: 14.5px; line-height: 1.75; }
  html[lang="en"] .stu__lead { line-height: 1.55; }
  .stu-uni__text { font-size: 14px; line-height: 1.75; }
  html[lang="en"] .stu-uni__text { line-height: 1.55; }
  .stu-uni__go { margin-top: 16px; }
  .stu-hold { gap: 14px; }
}

/* ---------- phones: one column, the universities as tabs under the card ---------- */
@media (max-width: 860px) {
  .stu { --cw: min(calc(100vw - 2 * var(--gutter) - 22px), 420px); }
  .stu__sheet { border-radius: 22px 22px 0 0; }
  html.js .stu__stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "deck" "uni" "help"; row-gap: 20px; padding: calc(var(--header-h) + 22px) var(--gutter) 20px; padding-inline-start: var(--qnav-clear); }
  html.js .stu__head { grid-area: head; display: grid; gap: 10px; }
  .stu__title { font-size: clamp(27px, 7.4vw, 36px); }
  html[lang="en"] .stu__title { font-size: clamp(30px, 8.6vw, 40px); }
  html.js .stu-hold { grid-area: deck; justify-self: center; margin-top: 10px; }
  html.js .stu-unis { grid-area: uni; }
  html.js .stu__help { grid-area: help; }
  .stu { --horizon: 74px; }
  html.js .stu__stage { padding-bottom: var(--horizon); }
  .stu-cloud span { font-size: clamp(76px, 23vw, 120px); }
  .stu-deck { touch-action: pan-y; }
}

/* ---------- without JS: a plain list of the universities, each with its picture ---------- */
html:not(.js) .stu__stage { padding: calc(var(--header-h) + 40px) var(--gutter) 20px; padding-inline-start: var(--qnav-clear); max-width: 1240px; margin: 0 auto; }
html:not(.js) .stu-hold, html:not(.js) .stu-sky { display: none; }
html:not(.js) .stu__head { display: grid; gap: 12px; margin-bottom: 40px; }
html:not(.js) .stu-unis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 44px 32px; }
html:not(.js) .stu-uni__pic { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
html:not(.js) .stu__help { margin-top: 32px; }

/* ---------- after the universities: how it works, the questions ---------- */
.stu-more {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 112px);
  max-width: 1600px; margin: 0 auto; padding: clamp(64px, 11vh, 128px) var(--gutter) clamp(80px, 13vh, 150px); padding-inline-start: var(--qnav-clear);
}
.stu-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "years groups" "go go"; column-gap: clamp(28px, 3.4vw, 56px); align-content: start; }
.stu-plan__years { grid-area: years; display: grid; justify-items: center; align-content: start; line-height: 1; color: var(--ochre-lg); }
.stu-plan__years b { font-size: clamp(76px, 8.4vw, 136px); font-weight: 800; letter-spacing: -.04em; }
html[lang="en"] .stu-plan__years b { font-family: var(--font-serif); font-weight: 500; }
.stu-plan__years span { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--s-ink); white-space: nowrap; }
.stu-plan__groups { grid-area: groups; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.stu-plan__h { font-size: 17px; font-weight: 800; line-height: 1.5; padding-bottom: 12px; border-bottom: 1.5px solid var(--s-ink); margin: 0; }
.stu-plan__list { margin: 0; padding: 0; list-style: none; }
.stu-plan__list li { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--s-line); font-size: 15px; font-weight: 550; line-height: 1.6; }
.stu-plan__no { font-size: 22px; font-weight: 800; color: var(--ochre-lg); line-height: 1; }
html[lang="en"] .stu-plan__no { font-family: var(--font-serif); font-weight: 500; }
.stu-plan__go { grid-area: go; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.stu-plan__go .btn { min-height: 52px; padding: 0 30px; }
.stu-plan__help { display: grid; text-decoration: none; line-height: 1.35; }
.stu-plan__help span { font-size: 13px; font-weight: 600; color: var(--s-ink-2); }
.stu-plan__help b { font-size: 16px; font-weight: 800; }
.stu-plan__help:hover b { text-decoration: underline; text-underline-offset: 4px; }

.stu-faq__title { font-size: clamp(20px, 1.7vw, 26px); font-weight: 800; line-height: 1.45; margin-bottom: 14px; }
html[lang="en"] .stu-faq__title { font-family: var(--font-serif); font-weight: 520; }
.stu-faq__item { border-top: 1px solid var(--s-line); }
.stu-faq__item:last-of-type { border-bottom: 1px solid var(--s-line); }
.stu-faq__item summary { position: relative; display: block; padding-block: 18px; padding-inline: 0 36px; font-size: 16px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.stu-faq__item summary::-webkit-details-marker { display: none; }
.stu-faq__item summary i { position: absolute; inset-inline-end: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.stu-faq__item summary i::before, .stu-faq__item summary i::after { content: ""; position: absolute; inset: 6px 0; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out); }
.stu-faq__item summary i::after { transform: rotate(90deg); }
.stu-faq__item[open] summary i::after { transform: rotate(0); }
.stu-faq__item summary:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 2px; border-radius: 4px; }
.stu-faq__item p { padding: 0 0 20px; font-size: 15px; line-height: 1.9; color: var(--s-ink-2); }
html[lang="en"] .stu-faq__item p { line-height: 1.6; }
.stu-faq__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 15px; font-weight: 750; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.stu-faq__more .arrow { transition: translate .4s var(--ease-out); }
.stu-faq__more:hover .arrow { translate: calc(var(--sx) * 4px) 0; }

@media (max-width: 1100px) {
  .stu-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  /* all six chips on one line */
  .stu-ticks { flex-wrap: nowrap; gap: 6px; }
  .stu-tick button { padding: 7px 10px 8px; font-size: 12px; letter-spacing: .05em; }
  .stu-tick i { inset-inline: 8px; }
}
@media (max-width: 640px) {
  .stu-plan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "years" "groups" "go"; }
  .stu-plan__years { justify-items: start; grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 12px; margin-bottom: 20px; }
  .stu-plan__groups { grid-template-columns: minmax(0, 1fr); }
  .stu-more { padding-bottom: 110px; }   /* clear of the quick nav button */
}

/* ---------- reduced motion: nothing drifts or flies; changes are instant ---------- */
@media (prefers-reduced-motion: reduce) {
  .stu-cloud span { animation: none; transform: translateX(5vw); }
  .stu-cloud, html.js .stu-uni, html.js .stu-uni.is-on, .stu-id, .stu-tick button { transition: none; }
  .stu-pick__mouse line { animation: none; }
  .stu.is-named .stu-id__seal { animation: none; }
}