/*
 * Technology Channel design system
 * Brand: https://brand.technologychannel.org  (monochrome, Poppins + Inter, no gradients or shadows)
 *
 * Mobile first: base rules are for phones; wider layouts are added at 640px, 900px and 1200px.
 * Meaning is never carried by colour. Status uses a label plus fill, outline or weight.
 *
 * Contents: 1 Tokens · 2 Base · 3 Layout · 4 Type · 5 Buttons · 6 Forms · 7 Components
 *           8 Site chrome · 9 Public pages · 10 Learning · 11 Admin · 12 Print · 13 Utilities
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --black: #000;
    --ink: #1a1a1a;
    --gray-700: #404040;
    --gray-500: #808080;
    --gray-400: #b3b3b3;
    --gray-200: #e5e5e5;
    --gray-100: #f5f5f5;
    --white: #fff;

    --text: var(--ink);
    --text-muted: var(--gray-700);   /* 10:1 on white; Gray-500 is kept for large or decorative text */
    --line: var(--gray-200);

    --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --radius: 6px;
    --container: 1120px;
    --header-h: 64px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--white); }
::selection { background: var(--black); color: var(--white); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.skip-link { position: absolute; left: var(--s4); top: -100px; background: var(--black); color: var(--white); padding: var(--s3) var(--s4); z-index: 100; }
.skip-link:focus { top: var(--s2); }

/* 3. Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); }
.container--narrow { max-width: 760px; }
.container--wide { max-width: 1320px; }
.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--tint { background: var(--gray-100); }
.section--dark { background: var(--black); color: var(--white); }
.section--line { border-top: 1px solid var(--line); }
.section__head { max-width: 680px; margin-bottom: var(--s6); }
.section__head--center { margin-inline: auto; text-align: center; }

.stack > * + * { margin-top: var(--s4); }
.stack--sm > * + * { margin-top: var(--s2); }
.stack--lg > * + * { margin-top: var(--s6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
.split { display: grid; gap: var(--s6); grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .container { padding-inline: var(--s5); }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .section { padding-block: var(--s9); }
    .section--tight { padding-block: var(--s8); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .split { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s7); align-items: start; }
    .split--even { grid-template-columns: 1fr 1fr; }
    .split--form { grid-template-columns: minmax(0, 1fr) 320px; }
    .sticky { position: sticky; top: calc(var(--header-h) + var(--s4)); }
}

/* 4. Type ------------------------------------------------------------------ */
h1, h2, h3, h4, .display { font-family: var(--font-display); color: var(--black); line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.display { font-weight: 800; font-size: clamp(2.25rem, 7vw, 4.25rem); line-height: 1.05; }
h1 { font-weight: 700; font-size: clamp(1.75rem, 4.5vw, 2.75rem); }
h2 { font-weight: 600; font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
h4 { font-weight: 600; font-size: 1rem; letter-spacing: 0; }
p { margin: 0; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark .display, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.lead { font-size: 1.125rem; color: var(--text-muted); }
.section--dark .lead, .on-dark .lead { color: var(--gray-400); }
.eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--gray-400); }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.strong { font-weight: 600; color: var(--black); }
.num { font-variant-numeric: tabular-nums; }

/* Long-form content written by staff in Markdown */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s7); font-size: 1.5rem; }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--s2); }
.prose blockquote { margin: var(--s5) 0; padding-left: var(--s4); border-left: 3px solid var(--black); color: var(--text-muted); }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); }
.prose code { font-size: 0.9em; background: var(--gray-100); padding: 2px 5px; border-radius: 3px; }
.prose pre { background: var(--gray-100); padding: var(--s4); border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }

/* 5. Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 48px; padding: 0 var(--s5);
    font: 600 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
    color: var(--white); background: var(--black);
    border: 1.5px solid var(--black); border-radius: var(--radius);
    cursor: pointer; transition: background-color .15s, color .15s;
}
.btn:hover { background: var(--gray-700); border-color: var(--gray-700); }
.btn--secondary { background: var(--white); color: var(--black); }
.btn--secondary:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--ghost { background: transparent; color: var(--black); border-color: transparent; padding-inline: var(--s3); }
.btn--ghost:hover { background: var(--gray-100); border-color: transparent; }
.btn--invert { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--invert:hover { background: var(--gray-200); border-color: var(--gray-200); }
.btn--invert-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn--invert-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--sm { min-height: 36px; padding: 0 var(--s3); font-size: 0.875rem; }
.btn--lg { min-height: 56px; padding: 0 var(--s6); font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--gray-200); border-color: var(--gray-200); color: var(--gray-500); cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-google { background: var(--white); color: var(--black); border-color: var(--black); }
.btn-google:hover { background: var(--gray-100); border-color: var(--black); }

/* 6. Forms ----------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: var(--s4); }
.field__label { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--black); margin-bottom: var(--s2); }
.field__label .optional { font-weight: 400; color: var(--text-muted); }
.field__hint { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--s2); }
.field__error { font-size: 0.875rem; font-weight: 600; color: var(--black); margin-top: var(--s2); padding-left: var(--s3); border-left: 3px solid var(--black); }
.input, .select, .textarea {
    width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
    font: 400 1rem/1.4 var(--font-body); color: var(--black);
    background: var(--white); border: 1.5px solid var(--gray-400); border-radius: var(--radius);
    appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-700); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--black); outline-offset: 0; border-color: var(--black); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--black); border-width: 2.5px; }
.textarea { min-height: 120px; resize: vertical; }
.textarea--tall { min-height: 320px; font-family: ui-monospace, Consolas, monospace; font-size: 0.9375rem; }
.select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.input--sm, .select--sm { min-height: 36px; padding: var(--s1) var(--s3); font-size: 0.875rem; }
.select--sm { padding-right: 36px; }
input[type="file"].input { padding: 10px var(--s3); }
.form-row { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.form-row + .field, .field + .form-row, .form-row + .form-row { margin-top: var(--s4); }
.form-row > .field + .field { margin-top: 0; }   /* side by side: the row's own gap spaces them, so the tops line up */
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }

.check { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--black); }
.check + .check { margin-top: var(--s3); }

/* Large radio options, e.g. payment methods */
.choice { display: block; position: relative; cursor: pointer; }
.choice + .choice { margin-top: var(--s3); }
.choice input { position: absolute; opacity: 0; }
.choice__box { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border: 1.5px solid var(--gray-400); border-radius: var(--radius); }
.choice__box::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--gray-700); border-radius: 50%; }
.choice:hover .choice__box { border-color: var(--black); }
.choice input:checked + .choice__box { border-color: var(--black); border-width: 2px; padding: calc(var(--s4) - .5px); }
.choice input:checked + .choice__box::before { border: 6px solid var(--black); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--black); outline-offset: 2px; }
.choice__title { font-weight: 600; color: var(--black); }
.choice__note { font-size: 0.875rem; color: var(--text-muted); }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font: 600 1.125rem var(--font-display); color: var(--black); margin-bottom: var(--s4); }

/* 7. Components ------------------------------------------------------------ */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.card__body { padding: var(--s5); }
.card__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.card__foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.card--strong { border: 2px solid var(--black); }
.card--tint { background: var(--gray-100); border-color: var(--gray-100); }
.card--dark { background: var(--black); border-color: var(--black); color: var(--white); }
a.card { display: block; text-decoration: none; transition: border-color .15s; }
a.card:hover { border-color: var(--black); }

/* Status labels: solid = done/positive, outline = in progress, muted = inactive, alert = needs action */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font: 600 0.75rem/1.5 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; border-radius: 999px; border: 1.5px solid var(--black); color: var(--black); background: var(--white); }
.badge--solid { background: var(--black); color: var(--white); }
.badge--muted { border-color: var(--gray-200); background: var(--gray-100); color: var(--text-muted); }
.badge--alert { background: var(--black); color: var(--white); }
.badge--alert::before { content: "!"; font-weight: 800; }
.badge--strike { border-style: dashed; color: var(--text-muted); border-color: var(--gray-500); }

.alert { display: flex; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-left: 4px solid var(--black); border-radius: var(--radius); background: var(--white); }
.alert::before { flex: none; font-weight: 800; font-family: var(--font-display); width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; border: 1.5px solid var(--black); font-size: 0.8125rem; content: "i"; }
.alert--success::before { content: "✓"; background: var(--black); color: var(--white); }
.alert--error { border-color: var(--black); border-width: 2px; border-left-width: 6px; }
.alert--error::before { content: "!"; background: var(--black); color: var(--white); }
.alert--warn::before { content: "!"; }
.alert--tint { background: var(--gray-100); border-color: var(--gray-100); border-left-color: var(--black); }
.alert__title { font-weight: 600; color: var(--black); }
.flash-stack { display: grid; gap: var(--s3); margin-bottom: var(--s5); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th { text-align: left; font: 500 0.75rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--gray-100); padding: var(--s3) var(--s4); white-space: nowrap; }
.table td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); vertical-align: top; }
.table tr:hover td { background: #fafafa; }
.table a { font-weight: 600; }
.table .actions { white-space: nowrap; text-align: right; }
.table--plain th { background: none; padding-left: 0; }
.table--plain td { padding-left: 0; }

.kv { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; text-align: right; font-weight: 500; color: var(--black); overflow-wrap: anywhere; }

.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: var(--s3) 0; text-decoration: none; font-weight: 500; color: var(--text-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--black); }
.tabs a[aria-current="page"] { color: var(--black); font-weight: 600; border-bottom-color: var(--black); }
.tabs .count { font-size: 0.75rem; background: var(--gray-100); border-radius: 999px; padding: 1px 7px; margin-left: 4px; color: var(--black); }

.pagination { display: flex; gap: var(--s2); align-items: center; justify-content: center; margin-top: var(--s6); }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-weight: 500; }
.pagination a:hover { border-color: var(--black); }
.pagination [aria-current="page"] { background: var(--black); color: var(--white); border-color: var(--black); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 0.875rem; color: var(--text-muted); list-style: none; padding: 0; margin: 0 0 var(--s4); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--gray-400); }
.breadcrumb a { color: inherit; }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; justify-content: space-between; gap: var(--s4); align-items: center; padding: var(--s4) 0; cursor: pointer; font: 600 1.0625rem var(--font-display); color: var(--black); list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; flex: none; font: 300 1.5rem/1 var(--font-display); }
.accordion details[open] summary::after { content: "−"; }
.accordion .accordion__body { padding: 0 0 var(--s5); color: var(--text-muted); max-width: 70ch; }
.accordion summary .meta { font: 400 0.875rem var(--font-body); color: var(--text-muted); margin-left: auto; white-space: nowrap; }

.progress { height: 6px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--black); border-radius: 999px; }
.progress-row { display: flex; align-items: center; gap: var(--s3); }
.progress-row .progress { flex: 1; }

.stat { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.stat__value { font: 700 2rem/1.1 var(--font-display); color: var(--black); letter-spacing: -0.02em; }
.stat__label { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--s1); }
.stat__note { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--s2); }
.stat--dark { background: var(--black); border-color: var(--black); }
.stat--dark .stat__value { color: var(--white); }
.stat--dark .stat__label, .stat--dark .stat__note { color: var(--gray-400); }

.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font: 600 0.875rem var(--font-display); flex: none; object-fit: cover; overflow: hidden; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.25rem; }
.avatar--sm { width: 28px; height: 28px; font-size: 0.6875rem; }

.empty { text-align: center; padding: var(--s7) var(--s5); border: 1px dashed var(--gray-400); border-radius: var(--radius); }
.empty h3 { margin-bottom: var(--s2); }
.empty .btn { margin-top: var(--s4); }

.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.list-check li { position: relative; padding-left: 30px; }
.list-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.section--dark .list-check li::before { filter: invert(1); }
@media (min-width: 640px) { .list-check--2 { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
.list-plain { list-style: none; padding: 0; margin: 0; }

.price { font: 700 1.75rem/1.1 var(--font-display); color: var(--black); letter-spacing: -0.02em; }
.price__was { font: 400 1rem var(--font-body); color: var(--text-muted); text-decoration: line-through; margin-left: var(--s2); }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; position: relative; padding-left: 44px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--black); display: flex; align-items: center; justify-content: center; font: 600 0.875rem var(--font-display); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 var(--s5) var(--s5); border-left: 1px solid var(--line); margin-left: 6px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--black); }
.timeline li.is-staff::before, .timeline li.is-key::before { background: var(--black); }
.timeline__meta { font-size: 0.8125rem; color: var(--text-muted); }
.timeline__body { white-space: pre-line; overflow-wrap: anywhere; }

.thread { display: grid; gap: var(--s4); }
.thread__msg { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); max-width: 640px; }
.thread__msg--staff { background: var(--black); color: var(--white); border-color: var(--black); margin-left: auto; }
.thread__msg--staff .thread__meta { color: var(--gray-400); }
.thread__meta { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--s2); }
.thread__body { white-space: pre-line; overflow-wrap: anywhere; }

/* 8. Site chrome ----------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 40px; width: auto; }
.nav { display: none; }
.nav a { text-decoration: none; font-weight: 500; color: var(--text-muted); padding: var(--s2) 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--black); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--black); }
.header-actions { display: none; align-items: center; gap: var(--s3); }

.menu { position: static; }
.menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--black); border-radius: var(--radius); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span, .menu > summary span::before, .menu > summary span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--black); position: relative; }
.menu > summary span::before { position: absolute; top: -6px; }
.menu > summary span::after { position: absolute; top: 6px; }
.menu[open] > summary span { background: transparent; }
.menu[open] > summary span::before { top: 0; transform: rotate(45deg); }
.menu[open] > summary span::after { top: 0; transform: rotate(-45deg); }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); padding: var(--s4); display: grid; gap: var(--s1); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.menu__panel a { padding: var(--s3) var(--s2); text-decoration: none; font-weight: 500; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
.menu__panel .btn { margin-top: var(--s3); border-bottom: 1.5px solid var(--black); }
.menu__panel form { margin: 0; }

@media (min-width: 900px) {
    .nav { display: flex; gap: var(--s6); }
    .header-actions { display: flex; }
    .menu { display: none; }
}

.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); padding: 4px; border-radius: 999px; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--white); border: 1px solid var(--black); border-radius: var(--radius); padding: var(--s2); display: grid; z-index: 60; }
.user-menu__panel a, .user-menu__panel button { display: block; width: 100%; text-align: left; padding: var(--s2) var(--s3); text-decoration: none; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 4px; }
.user-menu__panel a:hover, .user-menu__panel button:hover { background: var(--gray-100); }
.user-menu__panel hr { margin: var(--s2) 0; }
.user-menu__who { padding: var(--s2) var(--s3); font-size: 0.8125rem; color: var(--text-muted); overflow-wrap: anywhere; }

.site-footer { background: var(--black); color: var(--gray-400); padding: var(--s8) 0 var(--s5); font-size: 0.9375rem; }
.site-footer a { color: var(--gray-400); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer h2 { font: 500 0.75rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: var(--s4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.site-footer .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.site-footer__grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
.site-footer__brand img { height: 44px; width: auto; margin-bottom: var(--s4); }
.site-footer__bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--gray-700); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; font-size: 0.8125rem; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

/* 9. Public pages ---------------------------------------------------------- */
.hero { background: var(--black); color: var(--white); padding: var(--s8) 0; }
.hero .display { color: var(--white); max-width: 14ch; }
.hero .lead { max-width: 52ch; margin-top: var(--s5); }
.hero .cluster { margin-top: var(--s6); }
.hero__proof { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--gray-700); display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); }
.hero__proof strong { display: block; font: 700 1.75rem/1.1 var(--font-display); color: var(--white); }
.hero__proof span { font-size: 0.875rem; color: var(--gray-400); }
@media (min-width: 900px) { .hero { padding: var(--s9) 0; } }

.page-head { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--line); }
.page-head .lead { margin-top: var(--s3); max-width: 60ch; }
.page-head--dark { background: var(--black); color: var(--white); border-bottom: 0; }
.page-head--dark h1 { color: var(--white); }
.page-head--dark .breadcrumb, .page-head--dark .lead, .page-head--dark .meta-row { color: var(--gray-400); }
.page-head--dark .meta-row > * + *::before { color: var(--gray-700); }

.course-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); transition: border-color .15s; }
.course-card:hover { border-color: var(--black); }
.course-card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.course-card__foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.course-card__cta { font-weight: 600; white-space: nowrap; }
.course-card:hover .course-card__cta { text-decoration: underline; text-underline-offset: 3px; }

/* Cover art. Without an uploaded image, the title is set in the brand face on black. */
.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--black); color: var(--white); display: flex; align-items: flex-end; padding: var(--s5); overflow: hidden; }
.thumb__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb__title { font: 800 clamp(1.25rem, 3.4vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; max-width: 14ch; }
.thumb__mark { position: absolute; right: var(--s4); top: var(--s4); width: 32px; height: 32px; opacity: .9; }
.thumb--post { aspect-ratio: 16 / 9; }

.meta-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 0.875rem; color: var(--text-muted); }
.meta-row > * + *::before { content: "·"; margin-right: var(--s4); color: var(--gray-400); }

.buy-box .price { font-size: 2.25rem; }
.buy-box .kv { margin-top: var(--s5); font-size: 0.9375rem; }

/* Sticky enrol bar on phones so the main action is always one tap away */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--white); border-top: 1px solid var(--black); padding: var(--s3) var(--s4); display: flex; gap: var(--s4); align-items: center; justify-content: space-between; }
.buy-bar .price { font-size: 1.25rem; }
.has-buy-bar { padding-bottom: 76px; }
@media (min-width: 900px) { .buy-bar { display: none; } .has-buy-bar { padding-bottom: 0; } }

.quote { display: flex; flex-direction: column; gap: var(--s4); height: 100%; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); margin: 0; background: var(--white); }
.quote__result { font: 600 1.125rem/1.3 var(--font-display); color: var(--black); }
.quote blockquote { margin: 0; color: var(--text-muted); }
.quote figcaption { margin-top: auto; display: flex; gap: var(--s3); align-items: center; }

.person { display: flex; gap: var(--s4); align-items: flex-start; }
.person__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex: none; }

.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--black); border-radius: var(--radius); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame__empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s2); align-items: center; justify-content: center; color: var(--gray-400); text-align: center; padding: var(--s5); }

.auth-card { max-width: 440px; margin: var(--s8) auto; }
.error-page { min-height: 60vh; display: flex; align-items: center; }
.error-page__code { font: 800 5rem/1 var(--font-display); color: var(--black); letter-spacing: -0.04em; }

.qr-box { display: inline-block; padding: var(--s4); border: 1px solid var(--black); border-radius: var(--radius); background: var(--white); }
.qr-box img, .qr-box svg { display: block; width: 240px; height: 240px; object-fit: contain; }
.bank-details { white-space: pre-line; font-weight: 500; color: var(--black); }

/* 10. Learning ------------------------------------------------------------- */
.app-bar { background: var(--black); color: var(--white); }
.app-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; }
.app-bar a { color: var(--white); text-decoration: none; }
.app-bar .logo img { height: 30px; }
.app-bar__title { font: 600 0.9375rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.subnav { border-bottom: 1px solid var(--line); background: var(--white); }
.subnav .tabs { border-bottom: 0; }

.learn { display: grid; grid-template-columns: 1fr; }
.learn__main { min-width: 0; }
.learn__side { border-top: 1px solid var(--line); }
.learn__body { padding: var(--s5) var(--s4) var(--s7); max-width: 860px; }
@media (min-width: 900px) {
    .learn { grid-template-columns: minmax(0, 1fr) 360px; min-height: calc(100vh - 56px); }
    .learn__side { border-top: 0; border-left: 1px solid var(--line); max-height: calc(100vh - 56px); overflow-y: auto; position: sticky; top: 0; }
    .learn__body { padding: var(--s6) var(--s6) var(--s8); }
    .learn .video-frame { border-radius: 0; }
}
.learn .video-frame { border-radius: 0; }

.curriculum__module { padding: var(--s4); font: 600 0.875rem var(--font-display); color: var(--black); background: var(--gray-100); border-bottom: 1px solid var(--line); }
.lesson-link { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); text-decoration: none; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.lesson-link:hover { background: var(--gray-100); }
.lesson-link[aria-current="page"] { background: var(--black); color: var(--white); }
.lesson-link[aria-current="page"] .lesson-link__meta { color: var(--gray-400); }
.lesson-link__state { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--gray-500); }
.lesson-link.is-done .lesson-link__state { border-color: var(--black); background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.lesson-link[aria-current="page"] .lesson-link__state { border-color: var(--white); }
.lesson-link[aria-current="page"].is-done .lesson-link__state { background-color: var(--white); filter: invert(0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); }
.lesson-link__meta { display: block; font-size: 0.8125rem; color: var(--text-muted); }
.lesson-link.is-locked { color: var(--text-muted); }

.syllabus { list-style: none; padding: 0; margin: 0; }
.syllabus li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.syllabus li:first-child { border-top: 0; }
.syllabus .meta { color: var(--text-muted); white-space: nowrap; font-size: 0.875rem; }

.enrolled-card { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.enrolled-card__body { padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 640px) { .enrolled-card { grid-template-columns: 240px 1fr; } .enrolled-card .thumb { aspect-ratio: auto; height: 100%; min-height: 160px; } }

/* 11. Admin ---------------------------------------------------------------- */
.admin { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--gray-100); }
.admin__side { background: var(--black); color: var(--gray-400); }
.admin__brand { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); min-height: 56px; }
.admin__brand img { height: 28px; }
.admin-nav { display: none; padding: var(--s2) var(--s3) var(--s5); }
.admin-nav.is-open { display: block; }
.admin-nav h2 { font: 500 0.6875rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); margin: var(--s5) var(--s3) var(--s2); }
.admin-nav a { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 9px var(--s3); border-radius: var(--radius); text-decoration: none; color: var(--gray-400); font-weight: 500; font-size: 0.9375rem; }
.admin-nav a:hover { color: var(--white); background: #1f1f1f; }
.admin-nav a[aria-current="page"] { color: var(--black); background: var(--white); }
.admin-nav .count { font-size: 0.75rem; font-weight: 600; background: var(--white); color: var(--black); border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.admin-nav a[aria-current="page"] .count { background: var(--black); color: var(--white); }
.admin-menu { cursor: pointer; color: var(--white); background: none; border: 1px solid var(--gray-700); border-radius: var(--radius); padding: 6px 12px; font: 500 0.875rem var(--font-body); }
.admin__main { min-width: 0; }
.admin__top { background: var(--white); border-bottom: 1px solid var(--line); padding: var(--s3) var(--s4); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 56px; }
.admin__content { padding: var(--s5) var(--s4) var(--s8); max-width: 1280px; }
.admin__content--narrow { max-width: 860px; }
@media (min-width: 900px) {
    .admin { grid-template-columns: 240px minmax(0, 1fr); }
    .admin__side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .admin-nav { display: block; }
    .admin-menu { display: none; }
    .admin__top { padding-inline: var(--s6); }
    .admin__content { padding: var(--s6) var(--s6) var(--s9); }
}

.page-title { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.page-title h1 { font-size: 1.625rem; }
.page-title p { color: var(--text-muted); margin-top: var(--s1); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin-bottom: var(--s4); }
.filters .field { margin: 0; flex: 1 1 160px; max-width: 260px; }
.filters .field--grow { max-width: none; flex: 2 1 220px; }
.filters .field__label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s1); }

.attention { list-style: none; padding: 0; margin: 0; }
.attention li + li { border-top: 1px solid var(--line); }
.attention a { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); text-decoration: none; }
.attention a:hover { background: var(--gray-100); }
.attention__count { flex: none; min-width: 44px; height: 44px; padding: 0 var(--s2); border-radius: var(--radius); background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font: 700 1.125rem var(--font-display); }
.attention__count--zero { background: var(--gray-100); color: var(--gray-500); }
.attention__text strong { display: block; color: var(--black); }
.attention__text span { font-size: 0.875rem; color: var(--text-muted); }
.attention__go { margin-left: auto; font-weight: 600; white-space: nowrap; }

.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--s3); overflow-x: auto; padding-bottom: var(--s3); }
.pipeline__col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 200px; }
.pipeline__head { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font: 600 0.875rem var(--font-display); color: var(--black); }
.pipeline__list { padding: var(--s2); display: grid; gap: var(--s2); align-content: start; }
.lead-chip { display: block; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-size: 0.875rem; background: var(--white); }
.lead-chip:hover { border-color: var(--black); }
.lead-chip.is-overdue { border-left: 4px solid var(--black); }
.lead-chip strong { display: block; color: var(--black); }
.lead-chip .muted { display: block; }

.bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: var(--s4); }
.bars__bar { flex: 1; min-width: 6px; background: var(--black); border-radius: 2px 2px 0 0; position: relative; }
.bars__bar--empty { background: var(--gray-200); }
.bars__labels { display: flex; gap: 4px; margin-top: var(--s2); font-size: 0.6875rem; color: var(--text-muted); }
.bars__labels span { flex: 1; min-width: 6px; text-align: center; white-space: nowrap; overflow: hidden; }

.proof { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--gray-100); }
.proof img { width: 100%; max-height: 640px; object-fit: contain; }

.md-help { font-size: 0.8125rem; color: var(--text-muted); }
.md-help code { background: var(--gray-100); padding: 1px 5px; border-radius: 3px; }
.sortable-row { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.sortable-row:first-child { border-top: 0; }
.sortable-row__main { flex: 1; min-width: 0; }
.inline-form { display: inline; margin: 0; }

/* 12. Print: certificates and receipts -------------------------------------- */
.sheet { background: var(--white); border: 1px solid var(--line); margin: var(--s5) auto; max-width: 820px; padding: var(--s6); }
.certificate { position: relative; background: var(--white); color: var(--black); border: 2px solid var(--black); outline: 1px solid var(--black); outline-offset: -10px; padding: clamp(28px, 6vw, 64px); margin: var(--s5) auto; max-width: 1040px; aspect-ratio: 297 / 210; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: space-between; gap: var(--s4); }
.certificate__logo { height: clamp(36px, 6vw, 56px); width: auto; }
.certificate__name { font: 700 clamp(1.75rem, 5.5vw, 3.25rem)/1.1 var(--font-display); letter-spacing: -0.02em; border-bottom: 1.5px solid var(--black); padding-bottom: var(--s3); min-width: 60%; }
.certificate__course { font: 600 clamp(1.125rem, 3vw, 1.75rem)/1.2 var(--font-display); }
.certificate__foot { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); text-align: left; font-size: clamp(0.6875rem, 1.6vw, 0.875rem); }
.certificate__foot svg { width: clamp(64px, 12vw, 104px); height: auto; display: block; }
.certificate__sign { text-align: right; }
.certificate__sign strong { display: block; border-top: 1.5px solid var(--black); padding-top: var(--s2); margin-top: var(--s6); font-family: var(--font-display); }

@media print {
    .no-print, .site-header, .site-footer, .app-bar, .subnav, .buy-bar, .flash-stack { display: none !important; }
    body { background: #fff; }
    .sheet, .certificate { border-color: #000; margin: 0; max-width: none; }
    .certificate { width: 100%; height: 100vh; aspect-ratio: auto; page-break-inside: avoid; }
    @page { margin: 10mm; }
    @page certificate { size: A4 landscape; margin: 8mm; }
    .certificate { page: certificate; }
}

/* 13. Utilities ------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.w-full { width: 100%; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); }
.mb-2 { margin-bottom: var(--s2); } .mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); }
.hide-mobile { display: none; }
@media (min-width: 640px) { .hide-mobile { display: revert; } .only-mobile { display: none; } }
[hidden] { display: none !important; }

/* 14. Checkout ------------------------------------------------------------- */
.flow { display: flex; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s6); font-size: 0.875rem; }
.flow li { flex: 1; padding-top: var(--s2); border-top: 3px solid var(--gray-200); color: var(--text-muted); }
.flow li.is-done, .flow li.is-current { border-color: var(--black); color: var(--black); }
.flow li.is-current { font-weight: 600; }
.flow li.is-done::before { content: "✓ "; }
.summary-line { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.summary-total { border-top: 2px solid var(--black); padding-top: var(--s4); margin-top: var(--s4); font: 700 1.25rem var(--font-display); color: var(--black); }
.redirect-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s5); }

/* Admin on medium screens: the sidebar already takes 240px, so two-column pages stack until there is room. */
@media (min-width: 900px) and (max-width: 1239px) {
    .admin .split, .admin .split--form, .admin .split--even { grid-template-columns: minmax(0, 1fr); }
    .admin .sticky { position: static; }
}
.card__head h2 { font-size: 1.25rem; }
.card__head h3 { font-size: 1rem; }

/* Grid and split children may shrink below their content, so wide tables scroll inside their own box. */
.grid > *, .split > * { min-width: 0; }
.tabs { overflow-y: hidden; }

/* Headings inside sidebar cards are quieter than section headings. */
aside .card h2 { font-size: 1.25rem; }

/* 15. Course video ----------------------------------------------------------- */
/* A video shown as a picture with a play button; the player loads when it is pressed. */
.video-facade__link { position: absolute; inset: 0; display: block; color: var(--white); text-decoration: none; }
.video-facade__link img { width: 100%; height: 100%; object-fit: cover; }
.video-facade__tile { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s5); font: 800 clamp(1.25rem, 3vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.video-facade__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--white); border: 1px solid var(--black); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.video-facade__play::before { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--black); margin-left: 5px; }
.video-facade__link:hover .video-facade__play, .video-facade__link:focus-visible .video-facade__play { transform: scale(1.08); }
.video-facade__link:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
.video-facade__label { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s4); background: var(--black); color: var(--white); font: 600 0.875rem/1.5 var(--font-display); text-align: center; }
/* With a label along the bottom, the play button is centred in the picture left above it. */
.video-facade__label + .video-facade__play { margin-top: -54px; }

/* Course page layout. The heading and the page content share the left column, so the price
   card (with the intro video on top) starts level with the heading and stays in view while
   the page scrolls. On phones and tablets it is one column, with the price card last. */
.course-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.course-layout > * { min-width: 0; }
/* The heading's black band runs the full width of the window, behind the price card:
   the black is spread sideways and trimmed to the height of the heading. */
.course-layout__head { box-shadow: 0 0 0 100vmax var(--black); clip-path: inset(0 -100vmax); }
.course-layout__main { padding-block: var(--s7) var(--s6); }
.course-layout__aside { padding-bottom: var(--s7); }
@media (min-width: 900px) {
    /* The second row takes any extra height, so a short page never stretches the heading. */
    .course-layout { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; column-gap: var(--s7); }
    .course-layout__head, .course-layout__main { grid-column: 1; }
    .course-layout__main { padding-bottom: var(--s7); }
    .course-layout__aside { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-block: var(--s7); padding-bottom: 0; }
}

/* Where the course intro video sits: in the price card, above the price, on wide screens;
   under the heading on phones and tablets, where the price card is at the end of the page. */
.buy-box__video { display: none; }
.buy-box__video .video-frame { border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
/* On a phone held sideways a full-width video would be taller than the screen: keep it small
   enough to fit between the site header and the Enrol bar. */
.course-video-top { max-width: max(280px, calc((100vh - 172px) * 16 / 9)); max-width: max(280px, calc((100svh - 172px) * 16 / 9)); }
@media (min-width: 900px) {
    .buy-box__video { display: block; }
    .course-video-top { display: none; }
    .course-video-top + * { margin-top: 0; }
}

/* 16. Feedback ---------------------------------------------------------------- */
/* Rating from 1 to 5: five boxes in a row, the chosen one filled. */
.rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); max-width: 520px; }
.rating label { position: relative; cursor: pointer; }
.rating input { position: absolute; opacity: 0; inset: 0; }
.rating span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s3) var(--s1); border: 1.5px solid var(--gray-400); border-radius: var(--radius); text-align: center; }
.rating strong { font: 700 1.5rem/1 var(--font-display); color: var(--black); }
.rating small { font-size: 0.75rem; color: var(--text-muted); }
.rating label:hover span { border-color: var(--black); }
.rating input:checked + span { background: var(--black); border-color: var(--black); }
.rating input:checked + span strong, .rating input:checked + span small { color: var(--white); }
.rating input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }

/* 17. Staff and roles --------------------------------------------------------- */
/* One person per card: who they are on the left, their role buttons on the right (below, on a phone). */
.role-row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: center; justify-content: space-between; }
.role-row > :first-child { flex: 1 1 220px; min-width: 0; }
.role-switch { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
/* The role the person has now: filled, and not a button to press. */
.role-switch .btn[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); cursor: default; }
.role-switch .btn[aria-pressed="true"]::before { content: "✓"; margin-right: 6px; }
.role-choices { display: grid; gap: var(--s3); }
.role-choices .choice + .choice { margin-top: 0; }
.role-choices .choice__box { height: 100%; align-items: flex-start; }
@media (min-width: 900px) { .role-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The current intro video, shown small on the course form in the admin panel. */
.video-preview { max-width: 420px; }
/* A form section reached by a link (for example "Add the video link") stops just below the top of the window. */
.admin .card[id] { scroll-margin-top: var(--s4); }

/* The large player over the page, opened from the picture in the price card. */
.video-dialog { width: min(960px, calc(100vw - 32px), calc((100vh - 140px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.video-dialog::backdrop { background: rgba(0, 0, 0, .88); }
.video-dialog__close { display: block; margin: 0 0 var(--s3) auto; min-height: 40px; padding: 0 var(--s4); background: var(--white); color: var(--black); border: 0; border-radius: var(--radius); font: 600 0.875rem var(--font-body); cursor: pointer; }
.video-dialog__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }