/* ==========================================================================
   swiss.css: the Academy's Swiss look (owner, 2026-10-25: "follow the Marine Directory").
   Loaded last on every Academy page, after app.css and the page files, so it re-tunes the
   shared tokens and components in one place. Replaces look.css (orange, pills, big cards).

   The rules, from marinedirectory.ae (docs/redesign/design/DESIGN_SYSTEM.md there):
   - One typeface, Switzer 400/500 (no bold: 600 and 700 render as 500).
   - Greys, plus safety orange #E94E1B (owner, 2026-10-26) as the one colour: the main button
     on a page (white text, as before) and the small marks that use the accent. Only the
     colour changed; everything else is as it was.
   - Hairlines separate things. 6px corners on buttons, fields and images, 12px on panels.
   - Two buttons: quiet (grey field) and ink (the main action).
   - Form fields are boxed (1px border, 6px corners, ink border and a soft ring on focus),
     never a single underline.

   1 Fonts  2 Tokens  3 Base and type  4 Buttons  5 Forms  6 Chips, tags, progress
   7 Header, launch line, footer  8 Cards, lists, accordion  9 Home  10 Learner home
   ========================================================================== */

/* 1 Fonts: Switzer (ITF Free Font License, fonts/switzer-license-ITF-FFL.txt). */
@font-face { font-family: "Switzer"; src: url("/academy-assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/academy-assets/fonts/switzer-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/academy-assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

/* 2 Tokens ---------------------------------------------------------------- */
:root {
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink: #1a1a1a;
  --ink-2: #4d4d4d;
  --ink-3: #6b6b6b;          /* small secondary text (5.3:1) */
  --grey: #949494;           /* display grey: 24px and up only */
  --line: #e2e2e2;
  --line-strong: #d4d4d4;
  --surface: #ffffff;
  --surface-2: #f6f6f5;      /* bands and panels */
  --surface-3: #f0f0f0;      /* the quiet button, search field */
  --grey-200: #e2e2e2;

  /* Safety orange (owner, 2026-10-26): the one colour, nothing else changed. */
  --accent: #e94e1b;
  --accent-strong: #e94e1b;
  --accent-hover: #e94e1b;
  --accent-wash: #f0f0f0;
  --signal: #e94e1b;
  --on-accent: #ffffff;

  --r-control: 6px;
  --r-panel: 12px;
  --r-pill: 6px;
  --radius: 6px;
  --control-h: 48px;
  --shadow-pop: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .08);
  --focus-ring: 0 0 0 3px rgb(26 26 26 / .1);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --gutter: clamp(16px, 3vw, 40px);
  --max: 1360px;

  /* Type: size and grey make the hierarchy, never weight or colour. */
  --fs-display: clamp(2rem, 1.45rem + 1.7vw, 2.75rem);  --lh-display: 1.12;
  --fs-h1: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);      --lh-h1: 1.15;
  --fs-h2: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);      --lh-h2: 1.18;
  --fs-h3: 1.25rem;                                     --lh-h3: 1.3;
  --fs-lead: 1.25rem;                                   --lh-lead: 1.45;
  --fs-hero: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem);
  --track-display: -0.015em;
  --track-head: -0.01em;
}
/* These :root rules come after app.css's media blocks, so they win at every width. */
@media (min-width: 1024px) { :root { --header-h: 72px; } }

/* 3 Base and type --------------------------------------------------------- */
body.ax { font-family: var(--font); letter-spacing: .01em; font-synthesis-weight: none; font-feature-settings: normal; background: var(--surface); }
body.ax--full { background: var(--surface); }
:where(.ax) h1, :where(.ax) h2, :where(.ax) h3, :where(.ax) h4 { font-weight: 500; letter-spacing: var(--track-head); }
:where(.ax) b, :where(.ax) strong { font-weight: 500; }
:where(.ax) ::selection { background: var(--ink); color: #fff; }
:where(.ax) :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
:where(.ax) a:not([class]):hover, .ax-link:hover, .prose a:hover, .ax-linkbutton:hover { color: var(--ink-3); }
.ax-display { font-weight: 500; letter-spacing: var(--track-display); }
.ax-h1 { font-weight: 500; letter-spacing: var(--track-display); }
.ax-h2, .ax-h3 { font-weight: 500; letter-spacing: var(--track-head); }
.ax-lead { color: var(--ink-3); font-weight: 400; }
.ax-eyebrow, .course-card__topic, .menu__label, .ax-sheetnav__label { font-size: .8125rem; line-height: 1.25rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ax-accent-text { color: var(--ink); }
.ax-greeting::before { background: var(--ink); }
.ax-steps > li::before { color: var(--ink); font-weight: 500; }
.ax-section--band { background: var(--surface-2); }
.prose strong, .prose b, .prose th { font-weight: 500; }
.prose figure img, .figure img { border-radius: var(--radius); }

/* 4 Buttons: quiet (grey) and ink -------------------------------------------- */
.btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius); background: var(--surface-3); color: var(--ink); font-weight: 400; letter-spacing: .01em; gap: 10px; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.btn:hover { background: #e4e4e4; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: none; border-radius: var(--radius); }
.btn:active { transform: none; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #3b3b3b; }
.btn--primary, .btn--accent { background: var(--accent); color: #fff; }
.btn--primary:hover, .btn--accent:hover { background: var(--accent); }
.btn--secondary { background: var(--surface-3); color: var(--ink); }
.btn--secondary:hover { background: #e4e4e4; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #ececec; }
.btn--ghost { background: none; padding-inline: 12px; }
.btn--ghost:hover { background: var(--surface-3); }
.btn--danger { background: none; color: var(--danger); box-shadow: inset 0 0 0 1px var(--line); }
.btn--danger:hover { background: var(--surface-3); }
.btn--text:hover { color: var(--ink-3); }
.btn--sm { min-height: 40px; padding-inline: 16px; font-size: .9375rem; }
.btn--lg, .btn--xl { min-height: 52px; padding-inline: 28px; font-size: 1rem; }
.btn--icon { width: 44px; min-height: 44px; padding: 0; background: none; }
.btn--icon:hover { background: var(--surface-3); }
.btn .ax-icon { width: 18px; height: 18px; stroke-width: 1.5; }
.btn--icon .ax-icon { width: 22px; height: 22px; }
/* "More" links: text with an arrow (Marine Directory's .more). */
.sw-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; }
.sw-more .ax-icon { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.sw-more:hover .ax-icon { transform: translateX(3px); }
.sw-more:hover { color: var(--ink-3); }

/* 5 Forms: boxed fields -------------------------------------------------------- */
.field__label { font-weight: 500; }
.input, .select, .textarea { min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background-color: var(--surface); font-size: max(16px, 1rem); line-height: 1.4; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.select { padding-right: 40px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--grey); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus-ring); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:disabled, .select:disabled, .textarea:disabled { color: var(--ink-3); background-color: var(--surface-3); }
.field:has([aria-invalid="true"]) .field__label { color: var(--danger); }
.input--search { padding-left: 44px; }
.input--code { font-weight: 500; }
.form-errors { border-radius: var(--radius); }
.check input[type="checkbox"], .check input[type="radio"], .choice input { accent-color: var(--ink); }
.choice { border-color: var(--line-strong); border-radius: var(--radius); }
.choice:hover { border-color: var(--grey); }
.choice:has(input:checked) { border: 1px solid var(--ink); padding: 12px 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--ink), var(--focus-ring); }
.notice { border-radius: var(--radius); background: var(--surface-2); }
.panel { border-radius: var(--r-panel); background: var(--surface-2); }
.panel--white { background: var(--surface); border: 1px solid var(--line); }

/* 6 Chips, tags, progress ------------------------------------------------------ */
.chip { border-radius: var(--radius); border-color: var(--line); font-weight: 400; }
.chip:hover { border-color: var(--grey); }
.chip[aria-current="true"], .chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-active, .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag { border-radius: 4px; border-color: var(--line); color: var(--ink-3); font-weight: 400; letter-spacing: .01em; }
.tag--accent { border-color: var(--ink); color: var(--ink); background: none; }
.tag--solid { border-radius: 4px; background: rgb(26 26 26 / .8); color: #fff; }
.progress > span, .ring__fill { background: var(--ink); stroke: var(--ink); }
.ring__label { font-weight: 500; }
.toast { border-radius: var(--radius); }
.toast .ax-icon { color: #fff; }
.menu__panel { border-radius: var(--r-panel); }
.menu__item { border-radius: var(--radius); font-weight: 400; }
.menu__item .ax-icon { stroke-width: 1.5; }
.ax-account .menu__who b { font-weight: 500; }
.ax-avatar { font-weight: 500; }
.tabs a, .tabs button { font-weight: 400; color: var(--ink-3); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { border-bottom-width: 1px; }
.tabs .tabs__n { border-radius: 4px; }

/* 7 Header, launch line, footer ------------------------------------------------ */
.ax-header { background: rgb(255 255 255 / .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.ax-header__bar { gap: var(--sp-2); }
@media (min-width: 1024px) { .ax-header__bar { gap: var(--sp-5); } }
.ax-brand { font-weight: 500; }
.ax-brand__lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.ax-brand__logo { display: block; height: 30px; width: auto; }
.ax-brand__rule { width: 1px; height: 24px; background: var(--line-strong); }
.ax-brand__word { font-size: 1.25rem; font-weight: 400; letter-spacing: var(--track-head); color: var(--grey); }
@media (max-width: 420px) { .ax-brand__logo { height: 26px; } .ax-brand__word { font-size: 1.0625rem; } .ax-brand__lockup { gap: 9px; } }
.ax-nav { gap: var(--sp-5); margin-left: var(--sp-5); }
.ax-nav__link { position: relative; padding: 0; min-height: 44px; border-radius: 0; color: var(--ink); font-weight: 400; font-size: 1rem; white-space: nowrap; background: none; }
.ax-nav__link:hover, .menu[open] > .ax-nav__link { background: none; color: var(--ink-3); }
.ax-nav__link[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 8px; height: 1px; background: currentColor; }
.ax-nav__link .ax-icon { stroke-width: 1.5; }
@media (max-width: 1239px) { .ax-nav__link--home { display: none; } }
.ax-search .input { min-height: 40px; border: 0; border-radius: var(--radius); background-color: var(--surface-3); box-shadow: inset 0 0 0 1px transparent; font-size: .9375rem; }
.ax-search .input:focus { background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.ax-header .btn { min-height: 40px; padding-inline: 16px; font-size: 1rem; }
.ax-header .btn--ghost { padding-inline: 8px; }
.ax--focus { background: var(--surface-2); }

.ax-launch { background: var(--surface-2); color: var(--ink-3); border-bottom: 1px solid var(--line); font-size: .8125rem; }
.ax-launch b { color: var(--ink); font-weight: 500; }
.ax-launch a { color: var(--ink); }
.ax-launch__dot { display: none; }

.ax-footer { margin-top: var(--sp-9); padding-block: var(--sp-8) calc(var(--sp-5) + env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 1rem; }
.ax-footer__grid { gap: var(--sp-7) var(--sp-5); }
@media (min-width: 768px) { .ax-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.ax-footer__brand p { max-width: 26em; margin-top: var(--sp-3); }
.ax-footer h2 { font-size: .8125rem; letter-spacing: .08em; font-weight: 500; color: var(--ink-3); }
.ax-footer a { color: var(--ink); }
.ax-footer a:hover { color: var(--ink-3); text-decoration: none; }
.ax-footer__base { margin-top: var(--sp-8); padding-top: var(--sp-5); font-size: .875rem; color: var(--ink-3); }
.ax-footer__main-site { font-weight: 400; }

/* 8 Cards, lists, accordion ---------------------------------------------------- */
.course-card { gap: 6px; }
.course-card__media { border-radius: var(--radius); margin-bottom: var(--sp-3); background: var(--surface-3); }
.course-card__topic { font-size: .8125rem; letter-spacing: .01em; text-transform: none; font-weight: 400; }
.course-card__title { font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.course-card__title a::after { border-radius: var(--radius); }
.course-card__summary { color: var(--ink-3); font-size: .9375rem; line-height: 1.45; }
.course-card:hover .course-card__img { transform: none; }
.course-card:hover .course-card__title { text-decoration: none; color: var(--ink-3); }
.course-card:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius); }
.course-card--row .course-card__media { border-radius: var(--radius); }
.topic-tile { border-radius: var(--r-panel); }
.topic-tile__name, .list-row__title, .empty__title, .accordion summary, .faq summary { font-weight: 500; }
.list-row__thumb, .home-continue__thumb { border-radius: var(--radius); }

.topic-list__icon { display: none; }
.topic-list__link { grid-template-columns: minmax(0, 1fr) 20px; min-height: 64px; }
.topic-list__name { font-weight: 400; font-size: 1.0625rem; }
.topic-list__meta { color: var(--ink-3); }
.topic-list__chevron { color: var(--grey); stroke-width: 1.5; }
.topic-list__link:hover .topic-list__name { text-decoration: none; color: var(--ink-3); }
.topic-list__link:hover .topic-list__chevron { color: var(--ink); }
.topic-list__link:focus-visible { outline: 2px solid var(--ink); }

/* FAQ: hairlines, 20px questions, a "+" that turns to "×" (the Marine Directory's .faq). */
.accordion summary, .faq summary { min-height: 64px; font-size: 1.25rem; letter-spacing: var(--track-head); }
.accordion summary::after { content: "+"; width: auto; height: auto; background: none; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--ink-3); transition: transform 200ms var(--ease); }
.accordion details[open] > summary::after { transform: rotate(45deg); }
.accordion summary:hover { color: var(--ink-3); }
.accordion__body { color: var(--ink-3); max-width: 40em; }

/* 9 Home (guest): the Marine Directory home's rhythm ---------------------------- */
.sw-label { font-size: .8125rem; line-height: 1.25rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-5); }
.sw-row { border-top: 1px solid var(--line); padding-block: clamp(40px, 4.5vw, 64px) clamp(48px, 5vw, 80px); }
.sw-row--open { border-top: 0; }
.sw-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-6); }
.sw-head__title { font-size: var(--fs-h2); line-height: 1.18; font-weight: 500; letter-spacing: var(--track-head); max-width: 24em; text-wrap: balance; }
.sw-head__title span { color: var(--grey); }
.sw-head__text { margin-top: var(--sp-3); max-width: 36em; color: var(--ink-3); }

.sw-hero { padding-block: clamp(40px, 5vw, 72px) var(--sp-6); }
.sw-hero__title { font-size: var(--fs-hero); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); max-width: 22em; text-wrap: balance; }
.sw-hero__title .sw-hero__grey { color: var(--grey); }
.sw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (max-width: 479px) { .sw-hero__actions { display: grid; } }
.sw-greeting { margin-bottom: var(--sp-5); color: var(--ink-3); }

.sw-figure { margin: 0; }
.sw-figure img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius); background: var(--surface-3); }
@media (max-width: 767px) { .sw-figure img { aspect-ratio: 4 / 3; } }
.sw-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-2); font-size: .875rem; color: var(--ink-3); }
.sw-figure figcaption a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sw-figure figcaption a:hover { color: var(--ink-3); }
.sw-figure figcaption .ax-icon { width: 14px; height: 14px; }

.sw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin-block: var(--sp-6) clamp(48px, 5vw, 80px); }
@media (max-width: 767px) { .sw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); } }
.sw-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding-top: var(--sp-4); border-top: 1px solid var(--ink); }
.sw-stats dt { color: var(--ink-3); }
.sw-stats dd { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }

.sw-cols { display: grid; gap: var(--sp-6) var(--sp-5); }
@media (min-width: 768px) { .sw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sw-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sw-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sw-col { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--ink-3); }
.sw-col__title { font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); color: var(--ink); }
.sw-col__num { font-size: 1.25rem; line-height: 1.3; color: var(--grey); font-variant-numeric: tabular-nums; }

.sw-courses { display: grid; gap: var(--sp-7) var(--sp-5); }
@media (min-width: 640px) { .sw-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sw-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sw-split { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .sw-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; } }
.sw-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface-3); }
@media (max-width: 1023px) { .sw-split__media { display: none; } }
.sw-split .topic-list { grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-5); }
@media (min-width: 768px) { .sw-split .topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sw-how { display: grid; gap: var(--sp-7); }
@media (min-width: 1024px) { .sw-how { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; } }
.sw-how .home-device { padding: var(--sp-6); border-radius: var(--r-panel); background: var(--surface-2); }
.home-device__frame { border-color: var(--line-strong); }
.home-device__progress > span { background: var(--ink); }

/* The ink band (the Marine Directory's "Need help now?" block). */
.sw-band { display: grid; gap: var(--sp-7); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-panel); background: var(--ink); color: #b5b5b5; }
@media (min-width: 1024px) { .sw-band { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-8); } }
.sw-band .sw-label { color: #9a9a9a; }
.sw-band__title { font-size: var(--fs-h2); line-height: 1.18; font-weight: 500; letter-spacing: var(--track-head); color: #fff; max-width: 20em; text-wrap: balance; }
.sw-band__text { margin-top: var(--sp-4); max-width: 36em; }
.sw-band .btn { margin-top: var(--sp-6); }
.sw-card { margin: 0; max-width: 460px; width: 100%; justify-self: start; }
@media (min-width: 1024px) { .sw-card { justify-self: end; } }
  conic-gradient(from 90deg at 30% 30%, #1a1a1a 25%, transparent 0) 0 0 / 12px 12px,
  repeating-linear-gradient(90deg, #1a1a1a 0 3px, transparent 3px 8px), #fff; opacity: .85; }

/* The grey call-to-action panel (the Marine Directory's "List your company"). */
.sw-cta { display: grid; gap: var(--sp-6); padding: clamp(32px, 5vw, 64px); border-radius: var(--r-panel); background: var(--surface-2); }
@media (min-width: 1024px) { .sw-cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; } }
.sw-cta__title { font-size: var(--fs-h2); line-height: 1.18; font-weight: 500; letter-spacing: var(--track-head); max-width: 20em; text-wrap: balance; }
.sw-cta__title span { color: var(--grey); }
.sw-cta__text { margin-top: var(--sp-4); max-width: 34em; color: var(--ink-3); }
.sw-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); }
.sw-points { display: grid; gap: var(--sp-3); }
.sw-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.sw-points .ax-icon { width: 18px; height: 18px; margin-top: 3px; stroke-width: 1.5; }

.sw-faq { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) { .sw-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-5); } }

/* 10 Learner home --------------------------------------------------------------- */
.home-continue__row { background: none; border-radius: 0; }
.home-continue__title { font-weight: 500; }
.hx-ask { display: grid; gap: var(--sp-3); justify-items: start; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-panel); background: var(--surface-2); color: var(--ink-3); }
.hx-h3 { font-size: var(--fs-h2); line-height: 1.18; font-weight: 500; letter-spacing: var(--track-head); color: var(--ink); }

/* Phones: the first courses swipe sideways, so the home page stays short. */
@media (max-width: 639px) {
  .sw-courses { grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .sw-courses::-webkit-scrollbar { display: none; }
  .sw-courses > * { scroll-snap-align: start; }
}

/* Review mode (staff reading the courses, Plugs.AcademyReviewer): one line above the page;
   the page itself keeps this public look. */
.review-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px var(--gutter); background: #e94e1b; color: #fff; font-size: 13.5px; }
.review-bar b { font-weight: 500; }
.review-bar__dot { width: 8px; height: 8px; border-radius: 999px; background: #fff; }
.review-bar a { margin-left: auto; color: inherit; text-decoration: underline; text-underline-offset: 3px; }