/*
 * Kroon Academy. Loaded only on /academy/ pages (pages/header.php, gated on $academy_assets),
 * never on any other page of the site.
 *
 * SCOPE. Every rule below starts at `.academy-page`, the wrapper pages/academy.php puts around
 * its own output. Nothing here is a bare element selector and nothing here redefines a shared
 * class, so none of it can reach the header, the footer, the buddy or any other page: the site's
 * own `.btn`, `.container`, `.mono-label`, `.card__eyebrow` and `.section` keep the rules
 * css/style.css gives them, which is why this file does not mention them.
 *
 * ORIGIN. Ported from the approved prototype (videos/rag_sampler/academy/css/academy.css, V2,
 * 2026-10-23): the series tabs, the thumbnail cards, the hero band and the swipe rails. It was
 * built on this site's own tokens, so no colour, font or spacing value is invented here - every
 * one of them comes from style.css. Mobile first: the one-column rules are the defaults and the
 * wider screens only add.
 */

/* The series tones are existing palette steps, used as a decorative edge on a card or an item.
   They are never the only thing that marks a difference. */
.academy-page {
  --pad-x: var(--gutter);
  --rail-gap: 12px;
  --tone-0: var(--accent-400); --tone-1: var(--graphite-800); --tone-2: var(--graphite-400); --tone-3: var(--accent-500);
  --tone-4: var(--graphite-600); --tone-5: var(--graphite-300); --tone-6: var(--accent-300); --tone-7: var(--graphite-700);
}
@media (min-width: 640px) { .academy-page { --pad-x: max(32px, env(safe-area-inset-left)); --rail-gap: 16px; } }
@media (min-width: 1024px) { .academy-page { --pad-x: 48px; } }
.academy-page [data-tone='0'] { --tone: var(--tone-0); }
.academy-page [data-tone='1'] { --tone: var(--tone-1); }
.academy-page [data-tone='2'] { --tone: var(--tone-2); }
.academy-page [data-tone='3'] { --tone: var(--tone-3); }
.academy-page [data-tone='4'] { --tone: var(--tone-4); }
.academy-page [data-tone='5'] { --tone: var(--tone-5); }
.academy-page [data-tone='6'] { --tone: var(--tone-6); }
.academy-page [data-tone='7'] { --tone: var(--tone-7); }

/* ------------------------------------------------------------------------------- the intro */
/* The hub's own hero is the site's component, drawn smaller here: on this page the stills are
   what the reader came for, so the words make room for them and the tabs and the first card sit
   in the first screen. Scoped to this page, so the hero on every other page is untouched. */
.academy-page .section--hero h1 { font-size: var(--text-h2); max-width: 22ch; }
.academy-page .section--hero p { font-size: var(--text-body); }
.academy-page .section--hero { padding-bottom: 0; }
/* The hero card follows the tabs straight away, as in V2, rather than after a full section gap. */
.academy-page .section.academy { padding-top: 0; }

/* ------------------------------------------------------------------------------------ tabs */
/* One scrollable row on phones, wrapped from 1024 up. They are links, not an ARIA tablist:
   they change the address, so Back, share and middle-click all behave. */
.academy-page .tabs { margin-top: 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.academy-page .tabs__row { display: flex; gap: 8px; max-width: var(--container); margin-inline: auto; padding: 10px var(--pad-x);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--pad-x); list-style: none; }
.academy-page .tabs__row::-webkit-scrollbar { display: none; }
.academy-page .tabs__row > li { flex: none; }
.academy-page .tab { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 4px 16px;
  border: 1px solid var(--graphite-300); border-radius: 999px; color: var(--fg); text-decoration: none; white-space: nowrap;
  font-size: var(--text-small); font-weight: 500; line-height: 1.2;
  transition: background-color var(--dur-control) ease-out, border-color var(--dur-control) ease-out; }
.academy-page .tab:hover { border-color: var(--fg); background: var(--surface); }
.academy-page .tab__n { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--muted); font-weight: 400; }
.academy-page .tab.is-soon .tab__t { color: var(--graphite-600); }
.academy-page .tab[aria-current='page'] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.academy-page .tab[aria-current='page'] .tab__t { color: var(--bg); }
.academy-page .tab[aria-current='page'] .tab__n { color: var(--graphite-300); }
@media (min-width: 1024px) {
  .academy-page .tabs__row { flex-wrap: wrap; overflow: visible; }
  .academy-page .tab { min-height: 44px; }
}

/* ------------------------------------------------------------------------------ thumbnails */
/* A fixed 16:9 box, so nothing shifts while the image loads. */
.academy-page .thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-md); background: var(--surface); container-type: inline-size; isolation: isolate; }
.academy-page .thumb picture, .academy-page .thumb img { display: block; width: 100%; height: 100%; }
.academy-page .thumb img { object-fit: cover; transition: transform var(--dur-fade) var(--ease); }
.academy-page .thumb::after { content: ''; position: absolute; inset: 0; border: 1px solid rgb(23 23 23 / 0.08); border-radius: inherit; pointer-events: none; }

/* The stand-in when an episode has no still yet: its number and title, drawn. */
.academy-page .ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqi; padding: 6cqi 7cqi 6cqi 9cqi; background: var(--graphite-50); }
.academy-page .ph::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2.4cqi; min-width: 4px; background: var(--tone); }
.academy-page .ph__label { font-family: var(--font-mono); font-size: max(9px, 3.6cqi); letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite-600); }
.academy-page .ph__t { font-family: var(--font-heading); font-weight: 600; font-size: max(13px, 7.4cqi); line-height: 1.08; letter-spacing: -0.02em; color: var(--fg); }
.academy-page .ph__boxes { margin-top: auto; display: flex; gap: 4cqi; }
.academy-page .ph__boxes i { flex: 1; height: 9cqi; border: 1px solid var(--graphite-400); border-radius: 3px; }
.academy-page .ph__boxes i:last-child { border-color: var(--tone); box-shadow: inset 0 0 0 1px var(--tone); }

.academy-page .badge { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; }
.academy-page .badge--when { right: 8px; bottom: 8px; background: var(--graphite-900); color: var(--graphite-50); }
/* The site's buddy is fixed to the bottom-right of the VIEWPORT, so on a phone it sits on top
 * of whatever is in that corner - here the running time, which it covered all but a sliver of.
 * Reserving padding cannot help, because the buddy does not scroll with the card. Below the
 * buddy's breakpoint the badge moves to the other corner instead, where nothing overlaps it.
 * From 640 up the layout is wide enough that the two never meet, so the V2 placement stands. */
@media (max-width: 639px) {
  .academy-page .badge--when { right: auto; left: 8px; }
}

/* --------------------------------------------------------------------------- episode cards */
.academy-page .ecard { display: flex; flex-direction: column; gap: 10px; height: 100%; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.academy-page .ecard:hover .thumb img { transform: scale(1.03); }
.academy-page .ecard:hover .ecard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.academy-page .ecard__body { display: grid; gap: 3px; padding-inline: 2px; min-width: 0; }
.academy-page .ecard__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.academy-page .ecard__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; }
.academy-page .ecard__meta { font-size: var(--text-small); color: var(--muted); min-height: 1em; }
.academy-page .ecard__seen { color: var(--success); font-weight: 500; }
/* The episode you are on says so, as the approved page does; it sits beside the seen mark. */
.academy-page .ecard__now { color: var(--accent-ink); font-weight: 600; }

/* How far this device has got through the series: one segment per episode, filled from the
 * left. The row is written by the script, so it carries no meaning until then. */
.academy-page .academy-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 32px; font-size: var(--text-small); color: var(--muted); }
.academy-page .academy-progress__bar { display: flex; gap: 4px; flex: 1 1 160px; min-width: 160px; }
.academy-page .academy-progress__bar > span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.academy-page .academy-progress__bar > span.is-on { background: var(--accent-ink); }

/* The next thing to do, within reach of a thumb. It sticks to the bottom of the viewport on a
 * phone and sits inline from 640 up, where the page is short enough not to need it pinned.
 * The safe-area inset keeps it clear of the home indicator on a tall phone. */
.academy-page .academy-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 32px;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 10px 0 max(10px, env(safe-area-inset-bottom)); }
.academy-page .academy-bar__btn { display: flex; width: 100%; min-height: 48px;
  align-items: center; justify-content: center; text-align: center; }
@media (min-width: 640px) {
  .academy-page .academy-bar { position: static; border-top: 0; padding: 0; }
  .academy-page .academy-bar__btn { width: auto; display: inline-flex; }
}
.academy-page .ecard__now + .ecard__seen { margin-left: 8px; }
.academy-page .ecard.is-current { position: relative; }
.academy-page .ecard.is-current .ecard__title { font-weight: 700; }

/* ---------------------------------------------------------------------------------- hero */
/* The one thing to do next, on the site's own dark surface. */
.academy-page .hero-slot { margin-top: 20px; }
.academy-page .hero { display: grid; gap: 14px; padding: 12px 12px 18px; border-radius: var(--radius-md);
  background: var(--surface-dark); color: var(--bg); text-decoration: none; }
.academy-page .hero .thumb { border-radius: var(--radius-sm); }
.academy-page .hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-inline: 4px; min-width: 0; }
.academy-page .hero__label { margin: 0; color: var(--graphite-300); }
.academy-page .hero__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.academy-page .hero__meta { color: var(--graphite-300); font-size: var(--text-small); }
.academy-page .hero__cta { margin-top: 10px; min-width: 160px; }
.academy-page .hero:hover .thumb img { transform: scale(1.02); }
@media (min-width: 768px) {
  .academy-page .hero { grid-template-columns: 7fr 5fr; align-items: center; gap: 32px; padding: 20px 32px 20px 20px; }
}

/* -------------------------------------------------------------------------------- shelves */
/* One per series. Phones: a rail that swipes with scroll-snap. From 1024: four per view and
   the arrows appear. `is-grid` is the same markup as a stacked list with a still per row. */
.academy-page .shelves { margin-top: 8px; }
.academy-page .shelf { margin-top: 36px; }
.academy-page .shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.academy-page .shelf__text { min-width: 0; flex: 1 1 260px; }
.academy-page .shelf__title { font-size: var(--text-h3); font-weight: 600; margin-top: 4px; }
.academy-page .shelf__link { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.academy-page .shelf__link:hover { text-decoration: underline; }
.academy-page .shelf__blurb { display: none; color: var(--muted); max-width: var(--measure); margin-top: 4px; }
.academy-page .shelf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--text-small); color: var(--muted); margin-top: 2px; }
.academy-page .shelf__nav { display: flex; align-items: center; gap: 4px; }
/* The site's own .btn--ghost has no min-height, by design: on a page of prose it is a link in a
   sentence. Here it is a tap target beside a rail, so this one gets the 44px box - scoped to the
   link itself, so the shared class keeps its own rules everywhere else. */
.academy-page .shelf__all { font-size: var(--text-small); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.academy-page .rail__btn { display: none; width: 44px; height: 44px; border: 1px solid var(--fg); border-radius: 50%; font-size: 1.4rem; line-height: 1; align-items: center; justify-content: center; cursor: pointer; }
.academy-page .rail__btn:hover { background: var(--surface); }
.academy-page .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 300px); gap: var(--rail-gap);
  margin: 12px calc(-1 * var(--pad-x)) 0; padding: 4px var(--pad-x) 14px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x);
  scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--graphite-300) transparent; }
.academy-page .rail__item { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .academy-page .rail { grid-auto-columns: calc((100% - 2 * var(--pad-x) - 2 * var(--rail-gap)) / 2.6); } }
@media (min-width: 1024px) {
  .academy-page .rail { grid-auto-columns: calc((100% - 2 * var(--pad-x) - 3 * var(--rail-gap)) / 4); }
  .academy-page .shelf__nav .rail__btn { display: inline-flex; }
}

/* The stacked form: the series page and the list under a player. */
.academy-page .shelf.is-grid .shelf__blurb { display: block; }
.academy-page .shelf.is-grid .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 4px;
  overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
.academy-page .shelf.is-grid .rail__item + .rail__item { border-top: 1px solid var(--line); padding-top: 4px; }
.academy-page .shelf.is-grid .ecard { display: grid; grid-template-columns: 42% 1fr; gap: 12px; align-items: center; padding-block: 8px; }
.academy-page .shelf.is-grid .ecard.is-current { box-shadow: inset 4px 0 0 var(--accent); padding-left: 12px; }
@media (min-width: 640px) { .academy-page .shelf.is-grid .ecard { grid-template-columns: 180px 1fr; } }

/* ------------------------------------------------------------- the topics we cover, folded */
.academy-page .soon-row { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.academy-page .soon-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.academy-page .soon-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: 56px; height: 100%; padding: 10px 14px 10px 18px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg); color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color var(--dur-control) ease-out, background-color var(--dur-control) ease-out; }
.academy-page .soon-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tone); }
.academy-page a.soon-item:hover { border-color: var(--graphite-500); background: var(--surface); }
.academy-page a.soon-item:hover .soon-item__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.academy-page .soon-item__n { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.academy-page .soon-item__body { display: grid; gap: 2px; min-width: 0; }
.academy-page .soon-item__t { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; }
.academy-page .soon-item__m { font-size: var(--text-small); color: var(--muted); }
.academy-page .soon-item__go { color: var(--muted); font-size: 1.1rem; }
@media (min-width: 640px) { .academy-page .soon-list { grid-template-columns: repeat(2, 1fr); gap: 12px var(--rail-gap); } }
@media (min-width: 1024px) { .academy-page .soon-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

/* ------------------------------------------------------- the series, watch and check pages */
.academy-page .academy-eyebrow { font-size: var(--text-small); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.academy-page .academy-eyebrow a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
/* The way back up from a watch page: the hub, then the series. Both are real links and
 * both clear 44px, because this is the only route back that is not the site menu. */
.academy-page .academy-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  font-size: var(--text-small); color: var(--muted); }
/* inline-flex drops the whitespace between the chevron and the word, so the gap is set here. */
.academy-page .academy-crumbs a { color: inherit; display: inline-flex; align-items: center;
  gap: 5px; min-height: 44px; }
.academy-page .academy-crumbs a:hover { color: var(--fg); }
.academy-page .academy-crumbs__up { font-weight: 600; }
.academy-page .academy-crumbs__sep { opacity: .5; }
.academy-page .academy-series__blurb { color: var(--muted); }
.academy-page .academy-series__meta { font-size: var(--text-small); color: var(--muted); }
.academy-page .academy-outcomes { padding: 20px; border-radius: var(--radius-md); background: var(--surface); margin-top: 24px; }
.academy-page .academy-outcomes ul, .academy-page .academy-notcovered ul { margin-top: 12px; display: grid; gap: 8px; list-style: none; padding: 0; }
.academy-page .academy-outcomes li, .academy-page .academy-notcovered li { padding-left: 20px; position: relative; }
.academy-page .academy-outcomes li::before, .academy-page .academy-notcovered li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--accent-ink); }
.academy-page .academy-notcovered { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 32px; }

.academy-page .academy-selfcheck-card { display: block; margin-top: 24px; padding: 20px; border: 1px solid var(--line);
  border-radius: var(--radius-md); text-decoration: none; color: inherit; min-height: 44px; }
.academy-page .academy-selfcheck-card:hover { background: var(--accent-wash); }
.academy-page .academy-selfcheck-card__title { display: block; font-weight: 600; }
.academy-page .academy-selfcheck-card__note { display: block; margin-top: 4px; font-size: var(--text-small); color: var(--muted); }

.academy-page .academy-player video { width: 100%; height: auto; border-radius: var(--radius-md); background: var(--graphite-900); }
.academy-page .academy-player video.is-tall { max-width: 420px; margin-inline: auto; }
.academy-page .academy-watch__summary { color: var(--muted); margin-top: 16px; }

.academy-page .academy-check, .academy-page .academy-quiz__item { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 24px; }
.academy-page .academy-check__head { font-size: var(--text-small); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.academy-page .academy-check__prompt, .academy-page .academy-quiz__prompt { margin-top: 8px; font-weight: 600; }
.academy-page .academy-check__options { display: grid; gap: 8px; margin-top: 14px; list-style: none; padding: 0; }
.academy-page .academy-option { display: block; width: 100%; min-height: 44px; padding: 11px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.academy-page .academy-option:hover:not(:disabled) { border-color: var(--fg); }
.academy-page .academy-option:disabled { cursor: default; }
.academy-page .academy-option.is-right { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg)); }
.academy-page .academy-option.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg)); }
.academy-page .academy-check__why { margin-top: 12px; color: var(--muted); }

.academy-page .academy-selfcheck__note { font-size: var(--text-small); color: var(--muted); }
.academy-page .academy-quiz { display: grid; gap: 16px; list-style: none; padding: 0; margin-top: 16px; }
.academy-page .academy-quiz__done { padding: 16px 20px; border-radius: var(--radius-md); background: var(--accent-wash); margin-top: 20px; }
.academy-page .academy-quiz__score { font-weight: 600; }
.academy-page .academy-quiz__band { margin-top: 4px; }
.academy-page .academy-scorecard { padding: 24px; border-radius: var(--radius-md); background: var(--surface); text-align: center; margin-top: 20px; }
.academy-page .academy-scorecard__label { font-size: var(--text-small); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.academy-page .academy-scorecard__score { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.academy-page .academy-scorecard__band { margin-top: 8px; font-weight: 600; }
.academy-page .academy-scorecard__series { color: var(--muted); }

.academy-page .academy-transcript, .academy-page .academy-glossary { margin-top: 24px; }
.academy-page .academy-transcript summary, .academy-page .academy-glossary summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.academy-page .academy-cues { display: grid; gap: 2px; margin-top: 8px; list-style: none; padding: 0; }
.academy-page .academy-cue { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border-radius: var(--radius-sm); cursor: pointer; color: var(--muted); }
.academy-page .academy-cue:hover { background: var(--surface); color: var(--fg); }
.academy-page .academy-glossary dl { margin-top: 8px; display: grid; gap: 10px; }
.academy-page .academy-glossary dt { font-weight: 600; }
.academy-page .academy-glossary dd { margin: 0; color: var(--muted); }

.academy-page .academy-updown { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 32px; }
.academy-page .academy-updown a { min-height: 44px; display: inline-flex; align-items: center; }
.academy-page .academy-updown__next { margin-left: auto; }

/* ------------------------------------------------ the glossary: /academy/begrippen/ and the hub link */
/* One column at every width (06 §5): a letter is a <details>, open on the server and folded
 * shut below 640px by js/academy.js. Each row is a term, its one-line definition, the name the
 * video uses when it differs, and the way to the video. */
.academy-page .academy-terms { max-width: 760px; margin-top: 24px; }
.academy-page .academy-terms__letter { border-top: 1px solid var(--line); }
.academy-page .academy-terms__letter:last-child { border-bottom: 1px solid var(--line); }
.academy-page .academy-terms__letter > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.academy-page .academy-terms__h { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2; }
.academy-page .academy-terms__rows { display: grid; gap: 20px; margin: 4px 0 20px; }
.academy-page .academy-terms__row { display: grid; gap: 4px; scroll-margin-top: 96px; }
.academy-page .academy-terms__term { font-weight: 600; }
.academy-page .academy-terms__row dd { margin: 0; }
.academy-page .academy-terms__spoken { font-size: var(--text-small); color: var(--muted); }
.academy-page .academy-terms__go a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
@media (min-width: 640px) {
  .academy-page .academy-terms__row { grid-template-columns: minmax(160px, 1fr) 2fr; column-gap: var(--rail-gap); align-items: baseline; }
  .academy-page .academy-terms__row dd { grid-column: 2; }
}
.academy-page .academy-terms-link { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 24px; padding: 12px 20px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-md);
  color: inherit; text-decoration: none; font-weight: 600; }
.academy-page .academy-terms-link:hover { background: var(--surface); }
.academy-page .academy-terms-link__go { color: var(--muted); font-size: 1.1rem; }