/*
Theme Name: Supreme Academy
Theme URI: https://courses.supremesecurityservices.ca/
Author: Supreme Security Services
Author URI: https://supremesecurityservices.ca/
Description: First-party custom theme for the Supreme Academy LMS. Presentation layer only — all LMS business logic lives in the supreme-academy-core must-use module. Visuals derive from the design tokens in assets/css/tokens.css.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary — Supreme Security Services
Text Domain: supreme-academy
*/

/* -------------------------------------------------------------------------
 * Base layer. Every value references a token from assets/css/tokens.css,
 * which is enqueued before this file. A rebrand is a change in tokens.css.
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sa-font-sans);
  font-size: var(--sa-text-base);
  line-height: var(--sa-leading-body);
  color: var(--sa-color-ink);
  background: var(--sa-color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--sa-fw-heavy);
  line-height: var(--sa-leading-tight);
  color: var(--sa-color-secondary);
  margin: 0 0 var(--sa-space-4);
}
h1 { font-size: var(--sa-h1); }
h2 { font-size: var(--sa-h2); }
h3 { font-size: var(--sa-h3); }

p { margin: 0 0 var(--sa-space-4); }

a {
  color: var(--sa-color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--sa-color-primary-hover); }

img { max-width: 100%; height: auto; }

/* Keyboard focus visibility — WCAG 2.4.7, do not remove. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sa-color-primary);
  outline-offset: 2px;
  border-radius: var(--sa-radius-sm);
}

/* Accessible skip link. Visible only when focused. */
.sa-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--sa-space-3) var(--sa-space-4);
  background: var(--sa-color-primary);
  color: #fff;
  border-radius: 0 0 var(--sa-radius) 0;
}
.sa-skip-link:focus {
  left: 0;
  color: #fff;
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

.sa-container {
  width: 100%;
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: var(--sa-space-6);
}

/* -------------------------------------------------------------------------
 * Site header
 * ---------------------------------------------------------------------- */

.sa-site-header {
  background: var(--sa-gradient-brand);
  color: #fff;
}
.sa-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-6);
  min-height: 72px;
}
.sa-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  color: #fff;
  text-decoration: none;
  font-weight: var(--sa-fw-heavy);
  font-size: var(--sa-text-xl);
  letter-spacing: .01em;
}
.sa-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sa-radius-sm);
  background: var(--sa-color-accent);
  color: var(--sa-color-primary-dark);
  font-weight: var(--sa-fw-heavy);
}
.sa-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: var(--sa-fw-semibold);
  margin-left: var(--sa-space-6);
}
.sa-nav a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
 * Buttons (design-system primary/secondary)
 * ---------------------------------------------------------------------- */

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--sa-radius-pill);
  font-weight: var(--sa-fw-heavy);
  font-size: var(--sa-text-base);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sa-btn--primary {
  background: var(--sa-color-primary);
  color: #fff;
}
.sa-btn--primary:hover { background: var(--sa-color-primary-hover); color: #fff; }
.sa-btn--secondary {
  background: transparent;
  border-color: var(--sa-color-primary);
  color: var(--sa-color-primary);
}
.sa-btn--secondary:hover { background: var(--sa-color-primary); color: #fff; }

/* -------------------------------------------------------------------------
 * Hero (holding page while the curriculum is rebuilt)
 * ---------------------------------------------------------------------- */

.sa-hero {
  padding-block: var(--sa-space-16);
  background: var(--sa-color-surface-alt);
  border-bottom: 1px solid var(--sa-color-line);
}
.sa-hero__inner { max-width: var(--sa-container-narrow); }
.sa-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--sa-space-3);
  padding: var(--sa-space-1) var(--sa-space-3);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-color-primary);
  color: #fff;
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sa-hero__lead {
  font-size: var(--sa-text-lg);
  color: var(--sa-color-muted);
}
.sa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-4);
  margin-top: var(--sa-space-8);
}

.sa-main { padding-block: var(--sa-space-12); }

/* -------------------------------------------------------------------------
 * Site footer
 * ---------------------------------------------------------------------- */

.sa-site-footer {
  background: var(--sa-color-secondary-dark);
  color: #fff;
  padding-block: var(--sa-space-8);
  font-size: var(--sa-text-sm);
}
.sa-site-footer a { color: var(--sa-color-cream); }

@media (max-width: 640px) {
  .sa-site-header__inner { flex-direction: column; min-height: 0; padding-block: var(--sa-space-4); gap: var(--sa-space-3); }
  .sa-nav a { margin-left: var(--sa-space-4); }
}

/* -------------------------------------------------------------------------
 * Curriculum (course / lesson / quiz)
 * ---------------------------------------------------------------------- */

.sa-article { max-width: var(--sa-container-narrow); }

/* Breadcrumb back to the parent course. */
.sa-breadcrumb {
  margin-bottom: var(--sa-space-4);
  font-size: var(--sa-text-sm);
  color: var(--sa-color-muted);
}
.sa-breadcrumb a { font-weight: var(--sa-fw-semibold); }

/* Responsive 16:9 video frame. */
.sa-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-block: var(--sa-space-6);
  background: var(--sa-color-secondary-dark);
  border-radius: var(--sa-radius);
  overflow: hidden;
  box-shadow: var(--sa-elevation-2, 0 10px 30px rgba(0,0,0,.15));
}
.sa-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Course outline: topics and their lessons/quizzes. */
.sa-outline { margin-top: var(--sa-space-8); }
.sa-outline__topic { margin-bottom: var(--sa-space-8); }
.sa-outline__topic-title {
  padding-bottom: var(--sa-space-2);
  border-bottom: 2px solid var(--sa-color-line);
}
.sa-outline__list {
  list-style: none;
  margin: var(--sa-space-4) 0 0;
  padding: 0;
}
.sa-outline__item { margin: 0; }
.sa-outline__item + .sa-outline__item { border-top: 1px solid var(--sa-color-line); }
.sa-outline__link {
  display: flex;
  align-items: center;
  gap: var(--sa-space-3);
  padding: var(--sa-space-3) var(--sa-space-2);
  text-decoration: none;
  color: var(--sa-color-ink);
}
.sa-outline__link:hover { background: var(--sa-color-surface-alt); color: var(--sa-color-primary); }
/*
 * A locked item is a <span>, not a link, and its state is written out in text.
 * Reduced opacity alone would communicate "locked" by appearance only, so the
 * .sa-outline__state label carries the meaning and stays above 4.5:1 contrast.
 */
.sa-outline__link--locked {
  flex-wrap: wrap;
  cursor: default;
  color: var(--sa-color-muted);
}
.sa-outline__link--locked .sa-outline__type {
  background: var(--sa-color-surface-alt);
  color: var(--sa-color-muted);
}
.sa-outline__state {
  flex: none;
  margin-left: auto;
  font-size: var(--sa-text-sm);
  color: var(--sa-color-muted);
}
.sa-outline__type {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sa-radius-sm);
  background: var(--sa-color-surface-alt);
  color: var(--sa-color-primary);
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-heavy);
}

/* Inline notice (e.g. in-person course, interactive-quiz-pending). */
.sa-notice {
  padding: var(--sa-space-4) var(--sa-space-5);
  margin-block: var(--sa-space-6);
  border-left: 4px solid var(--sa-color-accent);
  background: var(--sa-color-surface-alt);
  border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
}
.sa-notice p:last-child { margin-bottom: 0; }

/* Quiz question list (review view — no answers are marked correct). */
.sa-quiz__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-3) var(--sa-space-6);
  margin-block: var(--sa-space-4) var(--sa-space-8);
  padding: 0;
  list-style: none;
  font-size: var(--sa-text-sm);
  color: var(--sa-color-muted);
}
.sa-quiz__meta b { color: var(--sa-color-ink); }
.sa-question {
  margin-bottom: var(--sa-space-6);
  padding-bottom: var(--sa-space-5);
  border-bottom: 1px solid var(--sa-color-line);
}
.sa-question__prompt { font-weight: var(--sa-fw-semibold); }
.sa-question__answers {
  list-style: none;
  margin: var(--sa-space-3) 0 0;
  padding: 0;
}
.sa-question__answers li {
  padding: var(--sa-space-2) var(--sa-space-3);
  margin-bottom: var(--sa-space-2);
  border: 1px solid var(--sa-color-line);
  border-radius: var(--sa-radius-sm);
}

/* 404 / access-denied fallback. */
.sa-404__links {
  list-style: none;
  margin: var(--sa-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-3) var(--sa-space-6);
}
.sa-404__links a { font-weight: var(--sa-fw-semibold); }

/* ---------------------------------------------------------------------------
   Application form (Phase 1)

   Applying is the primary conversion on a course page, so the block is given a
   surface of its own rather than sitting inline with the outline.
   --------------------------------------------------------------------------- */
.sa-apply-block {
  margin-top: var(--sa-space-12);
  padding: var(--sa-space-8);
  background: var(--sa-color-surface-alt);
  border: 1px solid var(--sa-color-line);
  border-radius: var(--sa-radius-lg);
}
.sa-apply-block > h2 { margin-top: 0; }

.sa-apply .sa-field {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  margin: 0 0 var(--sa-space-4);
}
.sa-apply label { font-weight: var(--sa-fw-semibold); }

.sa-apply input[type="text"],
.sa-apply input[type="email"],
.sa-apply input[type="tel"],
.sa-apply textarea {
  width: 100%;
  padding: var(--sa-space-3);
  font: inherit;
  color: var(--sa-color-ink);
  background: var(--sa-color-surface);
  border: 1px solid var(--sa-color-muted-2);
  border-radius: var(--sa-radius-sm);
}
.sa-apply textarea { resize: vertical; }

/* A visible, high-contrast focus ring — never removed, only restyled. */
.sa-apply :is(input, textarea, button):focus-visible {
  outline: 3px solid var(--sa-color-secondary);
  outline-offset: 2px;
}

/* Consent is a checkbox beside its text, not stacked. */
.sa-apply .sa-consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--sa-space-3);
  font-weight: var(--sa-fw-regular);
}
.sa-apply .sa-consent input { margin-top: 0.25em; }

/* Errors are announced in text and marked with aria-invalid, never colour alone. */
.sa-apply .sa-field-error {
  margin: 0;
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-color-danger);
}
.sa-apply input[aria-invalid="true"],
.sa-apply textarea[aria-invalid="true"] {
  border-color: var(--sa-color-danger);
  border-width: 2px;
}
.sa-form-error {
  padding: var(--sa-space-3) var(--sa-space-4);
  margin-bottom: var(--sa-space-4);
  color: var(--sa-color-danger);
  background: #FCECEB;
  border-left: 4px solid var(--sa-color-danger);
  border-radius: var(--sa-radius-sm);
}
.sa-notice--success {
  border-left: 4px solid var(--sa-color-success);
  background: #EAF5EF;
}

.sa-form-note {
  margin: var(--sa-space-4) 0 0;
  font-size: var(--sa-text-sm);
  color: var(--sa-color-muted);
}

/*
 * Honeypot. Positioned off-screen rather than display:none, because some bots
 * skip fields that are explicitly hidden. It is aria-hidden and out of the tab
 * order, so assistive technology and keyboard users never reach it.
 */
.sa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Lesson progress (Phase 2)
   --------------------------------------------------------------------------- */
.sa-progress {
  margin-top: var(--sa-space-8);
  padding-top: var(--sa-space-6);
  border-top: 1px solid var(--sa-color-line);
}
.sa-progress__label {
  margin: 0 0 var(--sa-space-2);
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-color-muted);
}
/*
 * <progress> is styled per-engine. The value is also written out in text above,
 * so if any of this is unsupported the learner still knows where they are.
 */
.sa-progress__bar {
  width: 100%;
  height: 10px;
  border: none;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-color-line);
  overflow: hidden;
  appearance: none;
}
.sa-progress__bar::-webkit-progress-bar {
  background: var(--sa-color-line);
  border-radius: var(--sa-radius-pill);
}
.sa-progress__bar::-webkit-progress-value {
  background: var(--sa-color-primary);
  border-radius: var(--sa-radius-pill);
}
.sa-progress__bar::-moz-progress-bar {
  background: var(--sa-color-primary);
  border-radius: var(--sa-radius-pill);
}

.sa-lesson-actions { margin-top: var(--sa-space-6); }

/* Completion is stated in words, not by colour or a tick alone. */
.sa-progress-done {
  display: inline-block;
  margin: 0;
  padding: var(--sa-space-2) var(--sa-space-4);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-color-success);
  background: #EAF5EF;
  border: 1px solid var(--sa-color-success);
  border-radius: var(--sa-radius-pill);
}

/* ---------------------------------------------------------------------------
   Quiz attempts (Phase 3)
   --------------------------------------------------------------------------- */
.sa-quiz-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.sa-question__legend {
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sa-question__hint {
  margin: 0 0 var(--sa-space-2);
  font-size: var(--sa-text-sm);
  color: var(--sa-color-muted);
}
.sa-quiz-form .sa-question__answers li { padding: 0; border: 0; }
.sa-quiz-form .sa-question__answers label {
  display: flex;
  align-items: flex-start;
  gap: var(--sa-space-3);
  padding: var(--sa-space-3);
  border: 1px solid var(--sa-color-line);
  border-radius: var(--sa-radius-sm);
  cursor: pointer;
}
.sa-quiz-form .sa-question__answers label:hover { background: var(--sa-color-surface-alt); }
.sa-quiz-form input:focus-visible {
  outline: 3px solid var(--sa-color-secondary);
  outline-offset: 2px;
}

/* Result banner. The pass/fail word carries the meaning; colour only supports it. */
.sa-result {
  padding: var(--sa-space-6);
  margin: var(--sa-space-6) 0;
  border-radius: var(--sa-radius);
  border-left: 4px solid;
}
.sa-result--pass { background: #EAF5EF; border-color: var(--sa-color-success); }
.sa-result--fail { background: #FCECEB; border-color: var(--sa-color-danger); }
.sa-result__headline {
  margin: 0 0 var(--sa-space-2);
  font-size: var(--sa-h3);
  font-weight: var(--sa-fw-bold);
}
.sa-result--pass .sa-result__headline { color: var(--sa-color-success); }
.sa-result--fail .sa-result__headline { color: var(--sa-color-danger); }
.sa-result__score { margin: 0; }

/* Reviewed answers. Each verdict is spelled out, not left to the border colour. */
.sa-quiz__questions--reviewed .sa-question {
  padding: var(--sa-space-4);
  border-left: 4px solid var(--sa-color-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-color-surface-alt);
}
.sa-question--correct { border-left-color: var(--sa-color-success); }
.sa-question--wrong { border-left-color: var(--sa-color-danger); }
.sa-question__yours { margin: var(--sa-space-2) 0 0; font-size: var(--sa-text-sm); }
.sa-question__verdict {
  margin: var(--sa-space-1) 0 0;
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
}
.sa-question--correct .sa-question__verdict { color: var(--sa-color-success); }
.sa-question--wrong .sa-question__verdict { color: var(--sa-color-danger); }

.sa-attempts {
  width: 100%;
  margin: var(--sa-space-4) 0;
  border-collapse: collapse;
  font-size: var(--sa-text-sm);
}
.sa-attempts th,
.sa-attempts td {
  padding: var(--sa-space-2) var(--sa-space-3);
  text-align: left;
  border-bottom: 1px solid var(--sa-color-line);
}
.sa-attempts th { font-weight: var(--sa-fw-semibold); color: var(--sa-color-muted); }
.sa-attempts td { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Public marketing pages
   =========================================================================== */

/* Contact strip above the header. */
.sa-topbar {
  background: var(--sa-color-primary-dark);
  color: #fff;
  font-size: var(--sa-text-sm);
}
.sa-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sa-space-6);
  padding-top: var(--sa-space-2);
  padding-bottom: var(--sa-space-2);
}
.sa-topbar__link { color: #fff; text-decoration: none; }
.sa-topbar__link:hover { text-decoration: underline; }
.sa-topbar__link--muted { opacity: 0.85; }
.sa-topbar__label { opacity: 0.75; }

/* Header and brand. */
.sa-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sa-space-6);
  padding-top: var(--sa-space-4);
  padding-bottom: var(--sa-space-4);
  flex-wrap: wrap;
}
.sa-brand { display: flex; align-items: center; gap: var(--sa-space-3); text-decoration: none; }
.sa-brand__logo { height: 52px; width: auto; display: block; }
.sa-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.sa-brand__name {
  font-weight: var(--sa-fw-heavy);
  font-size: var(--sa-text-xl);
  color: var(--sa-color-primary);
  letter-spacing: -0.01em;
}
.sa-brand__sub { font-size: var(--sa-text-xs); color: var(--sa-color-muted); }

/* Nav. The toggle is a checkbox so it works without JavaScript. */
.sa-nav { display: flex; align-items: center; gap: var(--sa-space-6); margin-left: auto; }
.sa-nav__list { display: flex; gap: var(--sa-space-6); list-style: none; margin: 0; padding: 0; }
.sa-nav__list a {
  text-decoration: none;
  font-weight: var(--sa-fw-semibold);
  color: var(--sa-color-ink);
}
.sa-nav__list a:hover,
.sa-nav__list .current-menu-item > a { color: var(--sa-color-primary); }
.sa-nav__account { font-weight: var(--sa-fw-semibold); }
.sa-nav-toggle__label { display: none; }

@media (max-width: 860px) {
  .sa-nav-toggle__label {
    display: block;
    margin-left: auto;
    padding: var(--sa-space-2);
    cursor: pointer;
  }
  .sa-nav-toggle__bars,
  .sa-nav-toggle__bars::before,
  .sa-nav-toggle__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sa-color-ink);
    content: "";
  }
  .sa-nav-toggle__bars::before { transform: translateY(-7px); }
  .sa-nav-toggle__bars::after { transform: translateY(5px); }
  .sa-nav-toggle__label:focus-visible { outline: 3px solid var(--sa-color-secondary); outline-offset: 2px; }

  .sa-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sa-space-4);
    width: 100%;
    margin-left: 0;
    padding-top: var(--sa-space-4);
  }
  .sa-nav__list { flex-direction: column; gap: var(--sa-space-4); width: 100%; }
  .sa-js .sa-nav { display: none; }
  .sa-js .sa-nav-open .sa-nav { display: flex; }
}

/* LMS dashboard and printable first-party certificate. */
.sa-dashboard-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sa-space-4); margin:var(--sa-space-5) 0; }
.sa-dashboard-facts div { padding:var(--sa-space-3); background:var(--sa-color-surface-alt); border-radius:var(--sa-radius); }
.sa-dashboard-facts dt { color:var(--sa-color-muted); font-size:var(--sa-text-sm); }
.sa-dashboard-facts dd { margin:var(--sa-space-1) 0 0; font-weight:var(--sa-fw-bold); }
.sa-dashboard-items { display:grid; gap:var(--sa-space-2); }
.sa-item-state { display:inline-block; min-width:6.5rem; font-weight:var(--sa-fw-semibold); }
.sa-learning-card details { margin:var(--sa-space-4) 0; }
.sa-learning-card summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:var(--sa-fw-semibold); }
.sa-certificate { max-width:960px; margin:var(--sa-space-10) auto; padding:clamp(1.5rem,5vw,4rem); background:#fff; border:10px double var(--sa-color-primary); text-align:center; }
.sa-certificate__label { text-transform:uppercase; letter-spacing:.12em; color:var(--sa-color-primary); font-weight:var(--sa-fw-bold); }
.sa-certificate__name { font-size:clamp(2rem,6vw,4rem); color:var(--sa-color-secondary); }
.sa-certificate__meta { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sa-space-5); margin:var(--sa-space-7) 0; }
.sa-certificate__disclaimer { max-width:70ch; margin:var(--sa-space-6) auto; font-size:var(--sa-text-sm); }
@media print {
  .sa-site-header,.sa-site-footer,.sa-certificate-actions { display:none!important; }
  .sa-certificate { margin:0; border-color:#000; box-shadow:none; min-height:90vh; }
}

/* --------------------------------------------------------------------------
   Coordinated public frontend phase
   -------------------------------------------------------------------------- */

.sa-narrow { max-width: var(--sa-container-narrow); }
.sa-center { text-align: center; }
.sa-small { font-size: var(--sa-text-sm); color: var(--sa-color-muted); }
.sa-eyebrow {
  margin: 0 0 var(--sa-space-3);
  color: var(--sa-color-primary);
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sa-hero .sa-eyebrow,
.sa-section--navy .sa-eyebrow { color: var(--sa-color-cream); }

.sa-breadcrumbs { margin-bottom: var(--sa-space-6); font-size: var(--sa-text-sm); }
.sa-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sa-space-2); margin: 0; padding: 0; list-style: none; }
.sa-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--sa-space-2); color: rgba(85,96,107,.8); }
.sa-hero .sa-breadcrumbs a,
.sa-hero .sa-breadcrumbs span { color: #fff; }
.sa-hero .sa-breadcrumbs li::after { color: rgba(255,255,255,.65); }

.sa-hero--compact { padding-block: clamp(3rem, 7vw, 5rem); }
.sa-direct-answer {
  margin: 0;
  padding: var(--sa-space-6);
  color: var(--sa-color-secondary-dark);
  background: var(--sa-color-cream);
  border-left: 5px solid var(--sa-color-primary);
  border-radius: var(--sa-radius);
  font-size: var(--sa-text-lg);
}
.sa-section--navy { color: #fff; background: var(--sa-color-secondary-dark); }
.sa-section--navy :is(h2,h3) { color: #fff; }
.sa-section--navy p { color: rgba(255,255,255,.84); }

.sa-two-col,
.sa-three-col,
.sa-feature-grid,
.sa-offer-grid,
.sa-topic-grid,
.sa-dashboard-grid {
  display: grid;
  gap: var(--sa-space-6);
}
.sa-two-col { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sa-space-12); }
.sa-three-col,
.sa-feature-grid,
.sa-offer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sa-topic-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sa-dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.sa-callout,
.sa-path-card,
.sa-topic-card,
.sa-feature-grid article,
.sa-offer-card,
.sa-learning-card,
.sa-dashboard-note,
.sa-empty-state,
.sa-next-steps {
  padding: var(--sa-space-6);
  background: var(--sa-color-surface);
  border: 1px solid var(--sa-color-line);
  border-radius: var(--sa-radius-lg);
  box-shadow: var(--sa-shadow-sm);
}
.sa-callout { background: var(--sa-color-cream); border-color: rgba(74,18,17,.15); }
.sa-callout > :first-child,
.sa-path-card > :first-child,
.sa-topic-card > :first-child,
.sa-offer-card > :first-child { margin-top: 0; }
.sa-topic-card > span { display: block; margin-bottom: var(--sa-space-4); color: var(--sa-color-primary); font-weight: var(--sa-fw-heavy); }
.sa-topic-card h2,
.sa-topic-card h3 { margin: 0; font-size: var(--sa-text-lg); }
.sa-topic-card p { margin: var(--sa-space-2) 0 0; color: var(--sa-color-muted); font-size: var(--sa-text-sm); }

.sa-offer-card { display: flex; flex-direction: column; min-height: 100%; }
.sa-offer-card--featured { border: 2px solid var(--sa-color-primary); box-shadow: var(--sa-shadow); }
.sa-offer-card__mode { align-self: flex-start; margin: 0 0 var(--sa-space-4); padding: .35rem .7rem; color: var(--sa-color-primary); background: var(--sa-color-cream); border-radius: var(--sa-radius-pill); font-size: var(--sa-text-sm); font-weight: var(--sa-fw-bold); }
.sa-offer-card__title { margin: 0 0 var(--sa-space-3); font-size: var(--sa-text-xl); }
.sa-offer-card__title a { color: inherit; text-decoration: none; }
.sa-offer-card__actions { margin-top: auto; padding-top: var(--sa-space-4); }
.sa-link-arrow { font-weight: var(--sa-fw-bold); }
.sa-link-arrow::after { content: " →"; }

.sa-check-list { list-style: none; margin: var(--sa-space-4) 0; padding: 0; }
.sa-check-list li { position: relative; padding-left: 1.8rem; margin-bottom: var(--sa-space-3); }
.sa-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--sa-color-primary); font-weight: var(--sa-fw-heavy); }
.sa-section--navy .sa-check-list li::before { color: var(--sa-color-cream); }

.sa-price { margin: var(--sa-space-4) 0; padding-top: var(--sa-space-4); border-top: 1px solid var(--sa-color-line); }
.sa-price__amount { margin: 0; color: var(--sa-color-secondary-dark); font-size: var(--sa-h3); font-weight: var(--sa-fw-heavy); }
.sa-price__note,
.sa-price__neutral { margin: var(--sa-space-1) 0 0; color: var(--sa-color-muted); font-size: var(--sa-text-sm); }
.sa-hero .sa-price { border-color: rgba(255,255,255,.25); }
.sa-hero .sa-price__amount,
.sa-hero .sa-price__neutral,
.sa-hero .sa-price__note { color: #fff; }

.sa-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sa-space-4); margin: 0; }
.sa-stat-grid div { padding: var(--sa-space-4); border: 1px solid rgba(255,255,255,.18); border-radius: var(--sa-radius); }
.sa-stat-grid dt { color: rgba(255,255,255,.75); font-size: var(--sa-text-sm); }
.sa-stat-grid dd { margin: var(--sa-space-1) 0 0; color: #fff; font-size: var(--sa-h3); font-weight: var(--sa-fw-heavy); }
.sa-stat-grid--light div { border-color: var(--sa-color-line); background: #fff; }
.sa-stat-grid--light dt { color: var(--sa-color-muted); }
.sa-stat-grid--light dd { color: var(--sa-color-primary); }

.sa-process { max-width: 900px; margin: 0 auto; padding: 0; list-style: none; counter-reset: steps; }
.sa-process li { display: grid; grid-template-columns: auto 1fr; gap: var(--sa-space-6); position: relative; padding-bottom: var(--sa-space-8); }
.sa-process li:not(:last-child)::before { content: ""; position: absolute; top: 3rem; bottom: .25rem; left: 1.45rem; width: 2px; background: var(--sa-color-line); }
.sa-process__number { display: grid; place-items: center; width: 3rem; height: 3rem; color: #fff; background: var(--sa-color-primary); border-radius: 50%; font-weight: var(--sa-fw-heavy); }
.sa-process h2 { margin: 0 0 var(--sa-space-2); font-size: var(--sa-text-xl); }
.sa-process p { margin: 0; }

.sa-faq-group + .sa-faq-group { margin-top: var(--sa-space-12); }
.sa-faq-list { border-top: 1px solid var(--sa-color-line); }
.sa-faq { border-bottom: 1px solid var(--sa-color-line); }
.sa-faq summary { position: relative; padding: var(--sa-space-4) 2.5rem var(--sa-space-4) 0; color: var(--sa-color-secondary-dark); cursor: pointer; font-weight: var(--sa-fw-bold); list-style: none; }
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; color: var(--sa-color-primary); font-size: var(--sa-text-xl); }
.sa-faq[open] summary::after { content: "−"; }
.sa-faq > div { padding: 0 var(--sa-space-8) var(--sa-space-4) 0; }
.sa-faq > div p { margin: 0; }

.sa-syllabus { margin-bottom: var(--sa-space-4); background: #fff; border: 1px solid var(--sa-color-line); border-radius: var(--sa-radius); overflow: clip; }
.sa-syllabus summary { display: flex; gap: var(--sa-space-4); align-items: center; padding: var(--sa-space-4) var(--sa-space-6); cursor: pointer; }
.sa-syllabus summary small { display: block; color: var(--sa-color-muted); font-weight: var(--sa-fw-regular); }
.sa-syllabus__number { color: var(--sa-color-primary); font-size: var(--sa-text-xl); font-weight: var(--sa-fw-heavy); }
.sa-syllabus ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sa-color-line); }
.sa-syllabus li { display: flex; justify-content: space-between; gap: var(--sa-space-4); padding: var(--sa-space-3) var(--sa-space-6); }
.sa-syllabus li + li { border-top: 1px solid var(--sa-color-line); }
.sa-badge,
.sa-status { display: inline-flex; align-items: center; width: max-content; padding: .25rem .65rem; color: #fff; background: var(--sa-color-primary); border-radius: var(--sa-radius-pill); font-size: var(--sa-text-xs); font-weight: var(--sa-fw-bold); }
.sa-badge--muted { color: var(--sa-color-secondary-dark); background: var(--sa-color-surface-alt); border: 1px solid var(--sa-color-line); }

.sa-table-wrap { overflow-x: auto; border: 1px solid var(--sa-color-line); border-radius: var(--sa-radius); }
.sa-comparison { width: 100%; min-width: 760px; border-collapse: collapse; }
.sa-comparison th,
.sa-comparison td { padding: var(--sa-space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--sa-color-line); }
.sa-comparison thead { background: var(--sa-color-secondary-dark); color: #fff; }
.sa-comparison tbody tr:last-child > * { border-bottom: 0; }

.sa-application-shell { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); overflow: hidden; background: #fff; border: 1px solid var(--sa-color-line); border-radius: var(--sa-radius-lg); box-shadow: var(--sa-shadow); }
.sa-application-shell__info { padding: clamp(1.5rem,4vw,3rem); color: #fff; background: var(--sa-gradient-brand); }
.sa-application-shell__info h2 { color: #fff; }
.sa-application-shell__info .sa-mini-steps li::before { background: var(--sa-color-cream); color: var(--sa-color-primary-dark); }
.sa-application-shell__form { padding: clamp(1.5rem,4vw,3rem); }
.sa-application-shell__form > h2 { margin-top: 0; }
.sa-mini-steps { counter-reset: mini; list-style: none; margin: var(--sa-space-6) 0; padding: 0; }
.sa-mini-steps li { counter-increment: mini; position: relative; min-height: 2rem; padding-left: 2.75rem; margin-bottom: var(--sa-space-4); }
.sa-mini-steps li::before { content: counter(mini); position: absolute; left: 0; top: -.15rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: #fff; background: var(--sa-color-primary); border-radius: 50%; font-weight: var(--sa-fw-bold); }
.sa-privacy-note { padding-top: var(--sa-space-4); border-top: 1px solid rgba(255,255,255,.25); font-size: var(--sa-text-sm); }
.sa-selected-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sa-space-2); margin: 0 0 var(--sa-space-6); padding: var(--sa-space-3); color: var(--sa-color-secondary-dark); background: var(--sa-color-cream); border-radius: var(--sa-radius); }
.sa-selected-offer span { font-size: var(--sa-text-xs); font-weight: var(--sa-fw-bold); text-transform: uppercase; letter-spacing: .05em; }
.sa-form-status:empty { display: none; }
.sa-form-status { margin-bottom: var(--sa-space-4); padding: var(--sa-space-3); background: var(--sa-color-surface-alt); border-radius: var(--sa-radius-sm); }
.sa-apply button[disabled] { cursor: wait; opacity: .75; }

.sa-success-panel { padding: clamp(2rem,5vw,4rem); text-align: center; background: var(--sa-color-cream); border: 1px solid rgba(74,18,17,.15); border-radius: var(--sa-radius-lg); }
.sa-success-panel__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto var(--sa-space-4); color: #fff; background: var(--sa-color-success); border-radius: 50%; font-size: var(--sa-h2); }
.sa-next-steps { margin-top: var(--sa-space-8); }

.sa-dashboard-head { padding: var(--sa-space-12) 0; color: #fff; background: var(--sa-gradient-brand); }
.sa-dashboard-head h1 { color: #fff; }
.sa-learning-card { display: flex; flex-direction: column; }
.sa-learning-card__top h2 { margin: var(--sa-space-3) 0; font-size: var(--sa-text-xl); }
.sa-status--active,
.sa-status--completed { background: var(--sa-color-success); }
.sa-status--expired { background: var(--sa-color-warning); color: #111; }
.sa-status--revoked,
.sa-status--refunded { background: var(--sa-color-danger); }
.sa-progress { height: .75rem; overflow: hidden; background: var(--sa-color-line); border-radius: var(--sa-radius-pill); }
.sa-progress span { display: block; height: 100%; background: var(--sa-color-primary); border-radius: inherit; }
.sa-dashboard-note { margin-top: var(--sa-space-8); background: var(--sa-color-cream); }
.sa-empty-state { max-width: 680px; text-align: center; margin: 0 auto; }

/* Core WordPress login, password setup and reset screens. */
body.login { background: var(--sa-color-surface-alt); font-family: var(--sa-font-sans); }
.login h1 a { width: 96px; height: 96px; background-image: none; }
.login h1 a::before { content: "SA"; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto; color: #fff; background: var(--sa-color-primary); border-radius: var(--sa-radius-lg); font-size: var(--sa-text-xl); font-weight: var(--sa-fw-heavy); }
.login form { border: 1px solid var(--sa-color-line); border-radius: var(--sa-radius-lg); box-shadow: var(--sa-shadow); }
.login .button-primary { min-height: 44px; background: var(--sa-color-primary); border-color: var(--sa-color-primary); border-radius: var(--sa-radius-pill); font-weight: var(--sa-fw-bold); }
.login .button-primary:hover { background: var(--sa-color-primary-hover); border-color: var(--sa-color-primary-hover); }
.login :is(input,button,a):focus-visible { outline: 3px solid var(--sa-color-primary); outline-offset: 2px; box-shadow: none; }

@media (max-width: 1000px) {
  .sa-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sa-offer-grid,
  .sa-three-col,
  .sa-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sa-two-col,
  .sa-dashboard-grid,
  .sa-application-shell { grid-template-columns: 1fr; gap: var(--sa-space-6); }
  .sa-application-shell { gap: 0; }
  .sa-topic-grid { grid-template-columns: 1fr; }
  .sa-syllabus li { align-items: flex-start; flex-direction: column; }
  .sa-topbar__link--muted { display: none; }
}

@media (max-width: 420px) {
  .sa-hero__actions .sa-btn,
  .sa-cta__actions .sa-btn,
  .sa-offer-card__actions .sa-btn { width: 100%; }
  .sa-stat-grid { grid-template-columns: 1fr; }
}

/* Hero. */
.sa-hero {
  background: var(--sa-gradient-brand);
  color: #fff;
  padding: var(--sa-space-16) 0;
}
.sa-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sa-space-12);
  align-items: start;
}
.sa-hero__eyebrow {
  margin: 0 0 var(--sa-space-3);
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-color-cream);
}
.sa-hero__title {
  margin: 0 0 var(--sa-space-4);
  font-size: var(--sa-h1);
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
}
.sa-hero__lede {
  margin: 0 0 var(--sa-space-6);
  font-size: var(--sa-text-lg);
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.92);
}
.sa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sa-space-4); margin: 0 0 var(--sa-space-6); }
.sa-hero__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sa-space-2); }
.sa-hero__points li { position: relative; padding-left: var(--sa-space-6); color: rgba(255, 255, 255, 0.92); }
.sa-hero__points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sa-color-cream);
  font-weight: var(--sa-fw-bold);
}

.sa-hero__card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--sa-radius-lg);
  padding: var(--sa-space-6);
}
.sa-hero__card-title { margin: 0 0 var(--sa-space-2); font-size: var(--sa-text-xl); color: #fff; }
.sa-hero__card-text { margin: 0 0 var(--sa-space-4); color: rgba(255, 255, 255, 0.88); font-size: var(--sa-text-sm); }
.sa-hero__card-phone { margin: 0 0 var(--sa-space-3); font-size: var(--sa-h3); font-weight: var(--sa-fw-bold); }
.sa-hero__card-phone a { color: var(--sa-color-cream); text-decoration: none; }
.sa-hero__card-meta { margin: 0; font-size: var(--sa-text-sm); color: rgba(255, 255, 255, 0.78); }

@media (max-width: 860px) {
  .sa-hero { padding: var(--sa-space-12) 0; }
  .sa-hero__inner { grid-template-columns: 1fr; gap: var(--sa-space-8); }
}

/* Trust strip. */
.sa-strip { background: var(--sa-color-surface-alt); border-bottom: 1px solid var(--sa-color-line); }
.sa-strip__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sa-space-6);
  padding-top: var(--sa-space-6);
  padding-bottom: var(--sa-space-6);
}
.sa-strip__label { display: block; font-size: var(--sa-text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--sa-color-muted-2); }
.sa-strip__value { display: block; font-weight: var(--sa-fw-semibold); color: var(--sa-color-ink); }

/* Generic sections. */
.sa-section { padding: var(--sa-space-16) 0; }
.sa-section--alt { background: var(--sa-color-surface-alt); }
.sa-section__title { margin: 0 0 var(--sa-space-3); font-size: var(--sa-h2); }
.sa-section__lede { margin: 0 0 var(--sa-space-8); color: var(--sa-color-muted); max-width: 65ch; }

.sa-pagehead {
  background: var(--sa-color-secondary-dark);
  color: #fff;
  padding: var(--sa-space-12) 0;
}
.sa-pagehead__title { margin: 0 0 var(--sa-space-3); color: #fff; font-size: var(--sa-h1); }
.sa-pagehead__lede { margin: 0; max-width: 65ch; color: rgba(255, 255, 255, 0.9); font-size: var(--sa-text-lg); }

/* Course cards. */
.sa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sa-space-6); }
.sa-card {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-3);
  padding: var(--sa-space-6);
  background: var(--sa-color-surface);
  border: 1px solid var(--sa-color-line);
  border-top: 3px solid var(--sa-color-primary);
  border-radius: var(--sa-radius);
}
.sa-card__title { margin: 0; font-size: var(--sa-h3); }
.sa-card__title a { text-decoration: none; color: var(--sa-color-ink); }
.sa-card__title a:hover { color: var(--sa-color-primary); }
.sa-card__mode { margin: 0; font-size: var(--sa-text-sm); font-weight: var(--sa-fw-semibold); color: var(--sa-color-secondary); }
.sa-card__text { margin: 0; color: var(--sa-color-muted); }
.sa-card__action { margin: auto 0 0; }

/* Course list rows on the archive. */
.sa-course-list { display: grid; gap: var(--sa-space-6); }
.sa-course-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sa-space-6);
  padding: var(--sa-space-6);
  background: var(--sa-color-surface);
  border: 1px solid var(--sa-color-line);
  border-left: 4px solid var(--sa-color-primary);
  border-radius: var(--sa-radius);
}
.sa-course-row__body { flex: 1 1 320px; }
.sa-course-row__title { margin: 0 0 var(--sa-space-2); font-size: var(--sa-h3); }
.sa-course-row__title a { text-decoration: none; color: var(--sa-color-ink); }
.sa-course-row__title a:hover { color: var(--sa-color-primary); }
.sa-course-row__mode { margin: 0 0 var(--sa-space-2); font-size: var(--sa-text-sm); font-weight: var(--sa-fw-semibold); color: var(--sa-color-secondary); }
.sa-course-row__text { margin: 0 0 var(--sa-space-3); color: var(--sa-color-muted); }
.sa-course-row__facts { display: flex; flex-wrap: wrap; gap: var(--sa-space-4); list-style: none; margin: 0; padding: 0; font-size: var(--sa-text-sm); color: var(--sa-color-muted-2); }
.sa-course-row__facts li { position: relative; padding-left: var(--sa-space-4); }
.sa-course-row__facts li::before { content: "\2022"; position: absolute; left: 0; color: var(--sa-color-primary); }

/* Steps. Numbered because this is a genuine sequence. */
.sa-steps { counter-reset: sa-step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sa-space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sa-steps__item { counter-increment: sa-step; position: relative; padding-top: var(--sa-space-12); }
.sa-steps__item::before {
  content: counter(sa-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-color-primary);
  color: #fff;
  font-weight: var(--sa-fw-bold);
  font-variant-numeric: tabular-nums;
}
.sa-steps__title { margin: 0 0 var(--sa-space-2); font-size: var(--sa-text-lg); }
.sa-steps__item p { margin: 0; color: var(--sa-color-muted); }

/* Split layout with an aside. */
.sa-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sa-space-12); align-items: start; }
@media (max-width: 860px) { .sa-split { grid-template-columns: 1fr; gap: var(--sa-space-8); } }
.sa-split__aside {
  padding: var(--sa-space-6);
  background: var(--sa-color-surface-alt);
  border: 1px solid var(--sa-color-line);
  border-radius: var(--sa-radius);
}
.sa-callout__title { margin: 0 0 var(--sa-space-3); font-size: var(--sa-text-lg); }
.sa-callout__source { margin: var(--sa-space-3) 0 0; font-size: var(--sa-text-sm); }

.sa-ticks { list-style: none; margin: var(--sa-space-4) 0 0; padding: 0; display: grid; gap: var(--sa-space-3); }
.sa-ticks li { position: relative; padding-left: var(--sa-space-6); }
.sa-ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--sa-color-success); font-weight: var(--sa-fw-bold); }

.sa-facts { margin: 0; }
.sa-facts dt { font-size: var(--sa-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sa-color-muted-2); }
.sa-facts dd { margin: 0 0 var(--sa-space-4); font-weight: var(--sa-fw-semibold); }

/* Contact cards. */
.sa-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sa-space-6); margin-bottom: var(--sa-space-12); }
.sa-contact-card { padding: var(--sa-space-6); background: var(--sa-color-surface); border: 1px solid var(--sa-color-line); border-top: 3px solid var(--sa-color-secondary); border-radius: var(--sa-radius); }
.sa-contact-card__title { margin: 0 0 var(--sa-space-3); font-size: var(--sa-text-lg); }
.sa-contact-card__primary { margin: 0 0 var(--sa-space-1); font-size: var(--sa-text-xl); font-weight: var(--sa-fw-bold); }
.sa-contact-card__primary a { text-decoration: none; color: var(--sa-color-primary); }
.sa-contact-card__meta { margin: 0 0 var(--sa-space-4); font-size: var(--sa-text-sm); color: var(--sa-color-muted); }
.sa-contact-card__address { font-style: normal; line-height: 1.7; }

/* Closing CTA band. */
.sa-cta { background: var(--sa-color-primary); color: #fff; padding: var(--sa-space-12) 0; }
.sa-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sa-space-6); }
.sa-cta__title { margin: 0 0 var(--sa-space-2); color: #fff; font-size: var(--sa-h3); }
.sa-cta__text { margin: 0; color: rgba(255, 255, 255, 0.9); }
.sa-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sa-space-4); margin: 0; }
.sa-cta .sa-btn--primary { background: #fff; color: var(--sa-color-primary); }
.sa-cta .sa-btn--primary:hover { background: var(--sa-color-cream); color: var(--sa-color-primary-dark); }

.sa-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
.sa-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sa-btn--lg { padding: var(--sa-space-3) var(--sa-space-8); font-size: var(--sa-text-lg); }

.sa-notice--info { border-left: 4px solid var(--sa-color-info); background: var(--sa-color-surface-alt); margin-top: var(--sa-space-12); }

/* Footer. */
.sa-site-footer { background: var(--sa-color-secondary-dark); color: rgba(255, 255, 255, 0.82); padding: var(--sa-space-12) 0 var(--sa-space-6); }
.sa-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sa-space-8); }
.sa-footer__heading { margin: 0 0 var(--sa-space-4); font-size: var(--sa-text-base); color: #fff; text-transform: uppercase; letter-spacing: 0.06em; }
.sa-footer__blurb { margin: 0 0 var(--sa-space-4); font-size: var(--sa-text-sm); }
.sa-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sa-space-2); font-size: var(--sa-text-sm); }
.sa-site-footer a { color: var(--sa-color-cream); text-decoration: none; }
.sa-site-footer a:hover { text-decoration: underline; }
.sa-footer__address { font-style: normal; font-size: var(--sa-text-sm); line-height: 1.7; margin-bottom: var(--sa-space-3); }
.sa-footer__note { opacity: 0.7; }
.sa-social { display: flex; flex-wrap: wrap; gap: var(--sa-space-4); list-style: none; margin: 0; padding: 0; font-size: var(--sa-text-sm); }
.sa-social--stacked { flex-direction: column; gap: var(--sa-space-2); }
.sa-footer__base { margin-top: var(--sa-space-8); padding-top: var(--sa-space-6); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--sa-text-sm); }
.sa-footer__base p { margin: 0 0 var(--sa-space-2); }
.sa-footer__disclaimer { opacity: 0.72; max-width: 80ch; }

/* ---------------------------------------------------------------------------
   Touch-target sizing (WCAG 2.2 AA 2.5.8; design system asks for >=44px).
   Runtime QA at 375px found the mobile Menu button (22px) and stacked nav
   links (23px) below the minimum. These rules only apply where the header
   collapses, so the desktop bar is unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .sa-nav-toggle__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--sa-space-2);
  }
  .sa-nav__list a,
  .sa-nav__account {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .sa-topbar__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Authenticated-screen target sizes (WCAG 2.2 AA 2.5.8, 24x24 minimum).
   Runtime review at 375px measured course-item links and Sign out at 23px and
   footer/social links at 19px. These rules enlarge the real interactive box —
   the link itself gains padding and a min-height — rather than adding an
   invisible overlay, so the visible target and the clickable target stay the
   same shape and keyboard focus still outlines what the user sees.
   --------------------------------------------------------------------------- */
.sa-dashboard-items li > a,
.sa-dashboard-card a:not(.sa-btn),
.sa-footer__list a,
.sa-social a,
.sa-dashboard-signout a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* The dashboard sign-out sits alone in its paragraph; give it a real box. */
.sa-dashboard-signout a {
  min-height: 44px;
  padding-inline: 2px;
}

/* Footer lists stack, so spacing keeps neighbouring targets from crowding. */
.sa-footer__list { gap: var(--sa-space-3); }
.sa-social { gap: var(--sa-space-4) var(--sa-space-6); }

/* Focus stays visible and follows the enlarged box. */
.sa-dashboard-items li > a:focus-visible,
.sa-footer__list a:focus-visible,
.sa-social a:focus-visible,
.sa-dashboard-signout a:focus-visible {
  outline: 3px solid var(--sa-color-secondary);
  outline-offset: 2px;
}

/* A one-character label (the "X" profile) is tall enough but only ~8px wide,
   so the box needs a floor on both axes, not just height. */
.sa-social a {
  min-width: 24px;
  justify-content: center;
}

/* -------------------------------------------------------------------------
 * On-dark legibility and target size.
 *
 * The site header, the dashboard head and .sa-pagehead all paint dark brand
 * backgrounds, but the component rules further up this file give the brand
 * wordmark, the primary nav and the eyebrows their light-background colours
 * (--sa-color-primary / --sa-color-ink / --sa-color-muted). On the dark
 * gradient those measure between 1.02:1 and 2.44:1, so the desktop navigation
 * is effectively invisible. These rules re-state the colours in the dark
 * scopes only, so light-background usages are untouched.
 * ---------------------------------------------------------------------- */

/* The header is now a light floating capsule (see the brand refresh block at
 * the end of this file), so these components take their brand colours on a
 * white ground rather than the former dark gradient bar. */
.sa-site-header .sa-brand__name { color: var(--sa-color-primary); }
.sa-site-header .sa-brand__sub { color: var(--sa-color-muted); }
.sa-site-header .sa-nav__list a,
.sa-site-header .sa-nav__account { color: var(--sa-color-primary); }
.sa-site-header .sa-nav__list a:hover,
.sa-site-header .sa-nav__list a:focus-visible,
.sa-site-header .sa-nav__list .current-menu-item > a { color: var(--sa-color-primary-hover); }

.sa-dashboard-head .sa-eyebrow,
.sa-pagehead .sa-eyebrow { color: var(--sa-color-cream); }
.sa-dashboard-head a,
.sa-pagehead a { color: #fff; }

/* Three .sa-pagehead templates render a bare <h1> rather than
 * .sa-pagehead__title, so the heading kept its dark ink on the navy band. */
.sa-pagehead h1 { color: #fff; }

/* Target size. Real padding on the control itself, so the visible control and
 * its hit area stay the same shape - no transparent overlays. */
.sa-nav__list a,
.sa-nav__account,
.sa-topbar__link,
.sa-footer__base a,
.sa-dashboard-head a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* The profile form is the one form that is not styled, because its template
 * used .sa-application while every other form and all the form CSS use
 * .sa-apply. Its controls therefore rendered at the browser default 21px. */
.sa-apply input[type="text"],
.sa-apply input[type="email"],
.sa-apply input[type="tel"],
.sa-apply select {
  min-height: 44px;
}

/* The lesson/quiz breadcrumb and the profile back link are standalone
 * navigation affordances rather than links inside a sentence, so the WCAG
 * 2.5.8 inline exception does not cover them. */
.sa-breadcrumb a,
.sa-backlink {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* The verification link sits beside the print button as a peer action. */
.sa-certificate-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* =========================================================================
 * Brand refresh — homepage, shared header and shared footer.
 *
 * Adapted from the parent site supremesecurityservices.ca, inspected
 * 6 September 2026. The characteristics being matched are: a light floating
 * pill navbar over a full-bleed dark hero; small trust chips above the
 * headline; heavy Poppins 800 headings; pill CTAs at 999px radius, weight 800,
 * ~52px tall; and airy sections alternating white with #F8F9FA.
 *
 * No photograph ships with the theme, so the hero uses a decorative SVG
 * skyline. If the owner supplies uploads/brand/hero.jpg the template prefers
 * it and the SVG becomes the fallback.
 * ====================================================================== */

/* --- Slim contact strip ------------------------------------------------ */
.sa-topbar {
  background: var(--sa-color-primary-dark);
  color: #fff;
  font-size: var(--sa-text-xs);
}
.sa-topbar__inner { display: flex; gap: var(--sa-space-6); justify-content: flex-end; padding-block: 6px; }
.sa-topbar__link { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.sa-topbar__link:hover { text-decoration: underline; }
.sa-topbar__label { opacity: .82; }

/* --- Floating capsule header ------------------------------------------ */
.sa-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  padding-block: var(--sa-space-3);
}
.sa-site-header::before {
  /* A soft white plate behind the capsule so the sticky header stays legible
     once dark hero content scrolls under it. */
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: .96;
}
.sa-site-header__inner {
  position: relative;
  min-height: 68px;
  gap: var(--sa-space-5);
  padding-inline: var(--sa-space-6);
  background: #fff;
  border: 1px solid rgba(74, 18, 17, .10);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(27, 8, 7, .08);
}
.sa-brand__logo { height: 44px; }
.sa-brand__name { font-size: var(--sa-text-lg); letter-spacing: -0.015em; }
.sa-brand__sub { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

.sa-nav__list { gap: var(--sa-space-5); }
.sa-nav__list a {
  font-size: 15px;
  font-weight: var(--sa-fw-semibold);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.sa-nav__list a:hover,
.sa-nav__list .current-menu-item > a { border-bottom-color: var(--sa-color-primary); }

.sa-nav__cta.sa-btn.sa-btn--primary,
.sa-nav__account {
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--sa-fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 20px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}
.sa-nav__account {
  border: 2px solid var(--sa-color-primary);
  text-decoration: none;
}
.sa-nav__account:hover { background: var(--sa-color-primary); color: #fff; }

/* --- Pill CTAs, matching the parent site button signature -------------- */
.sa-btn {
  border-radius: 999px;
  font-weight: var(--sa-fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
}
.sa-btn--lg { min-height: 52px; padding-inline: 28px; font-size: 13px; }

/* --- Hero -------------------------------------------------------------- */
.sa-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--sa-color-primary-dark) var(--sa-hero-image, url("assets/img/hero-skyline.svg")) center bottom / cover no-repeat;
}
.sa-hero::after {
  /* Warm scrim: the parent site darkens its skyline photo the same way, so the
     headline holds contrast wherever the image is light. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(27, 8, 7, .58) 0%, rgba(27, 8, 7, .30) 45%, rgba(27, 8, 7, .72) 100%);
}
.sa-hero__inner {
  align-items: center;
  gap: var(--sa-space-10);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.sa-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sa-space-5);
  padding: 7px 16px;
  min-height: 30px;
  color: var(--sa-color-cream);
  background: rgba(245, 237, 224, .12);
  border: 1px solid rgba(245, 237, 224, .28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--sa-fw-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sa-hero__title {
  margin: 0 0 var(--sa-space-4);
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  font-weight: var(--sa-fw-heavy);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sa-hero__lede {
  margin: 0 0 var(--sa-space-7);
  max-width: 54ch;
  color: rgba(255, 255, 255, .92);
  font-size: var(--sa-text-lg);
  line-height: 1.6;
}
.sa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sa-space-3); margin: 0 0 var(--sa-space-7); }
/* On the dark hero the solid button must be light, or a maroon fill would
   disappear into the scrim. */
.sa-hero .sa-btn--primary { background: var(--sa-color-cream); color: var(--sa-color-primary-dark); border: 2px solid var(--sa-color-cream); }
.sa-hero .sa-btn--primary:hover { background: #fff; border-color: #fff; color: var(--sa-color-primary-dark); }
.sa-hero .sa-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .85); }
.sa-hero .sa-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.sa-hero__points { display: flex; flex-wrap: wrap; gap: var(--sa-space-3) var(--sa-space-6); margin: 0; padding: 0; list-style: none; }
.sa-hero__points li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, .92);
  font-size: var(--sa-text-sm);
}
.sa-hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--sa-color-cream);
  border-bottom: 2px solid var(--sa-color-cream);
  transform: rotate(-45deg);
}

/* Contact card: a cream panel, so the hero has one clear light anchor rather
   than a second dark box on a dark ground. */
.sa-hero__card {
  padding: var(--sa-space-7);
  color: var(--sa-color-ink);
  background: var(--sa-color-cream);
  border-radius: var(--sa-radius-lg);
  box-shadow: 0 18px 44px rgba(27, 8, 7, .28);
}
.sa-hero__card .sa-eyebrow { color: var(--sa-color-primary); }
.sa-hero__card-title { margin: 0 0 var(--sa-space-2); color: var(--sa-color-primary-dark); font-size: var(--sa-text-xl); }
.sa-hero__card-text { margin: 0 0 var(--sa-space-4); color: var(--sa-color-muted); font-size: var(--sa-text-sm); }
.sa-hero__card-phone { margin: 0 0 var(--sa-space-2); font-size: var(--sa-h3); font-weight: var(--sa-fw-heavy); }
.sa-hero__card-phone a { color: var(--sa-color-primary); text-decoration: none; display: inline-flex; min-height: 24px; align-items: center; }
.sa-hero__card-phone a:hover { text-decoration: underline; }
.sa-hero__card-meta { margin: 0; color: var(--sa-color-muted); font-size: var(--sa-text-sm); }

/* --- Trust strip ------------------------------------------------------- */
.sa-strip { background: var(--sa-color-cream); border-bottom: 1px solid rgba(74, 18, 17, .10); }
.sa-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sa-space-6); padding-block: var(--sa-space-6); }
.sa-strip__item { display: flex; flex-direction: column; gap: 4px; }
.sa-strip__label { color: var(--sa-color-primary); font-size: 11px; font-weight: var(--sa-fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.sa-strip__value { color: var(--sa-color-ink); font-size: var(--sa-text-base); font-weight: var(--sa-fw-semibold); }

@media (max-width: 860px) {
  .sa-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .sa-site-header__inner { border-radius: var(--sa-radius-lg); }
  .sa-topbar__inner { justify-content: center; flex-wrap: wrap; gap: var(--sa-space-4); }
}
@media (max-width: 520px) {
  .sa-strip__inner { grid-template-columns: 1fr; }
}

/* An earlier hero block caps .sa-hero__inner at the narrow container, which
 * left the headline breaking across three lines and the CTAs stacking. The
 * hero is a full-width band, so it takes the full container. */
.sa-hero__inner { max-width: var(--sa-container); }

/* .sa-main carries page padding, which pushed the full-bleed hero away from
 * the header. Only a hero that opens the page is pulled back up. */
.sa-main > .sa-hero:first-child { margin-block-start: calc(-1 * var(--sa-space-12)); }

.sa-hero__card-phone { white-space: nowrap; }

/* Defects the redesign audit surfaced on the homepage. All pre-existing; all
 * measured in the browser at 1440. */

/* Step copy on the navy band inherited the muted grey used on light grounds,
 * measuring 2.32:1. Scoped to the steps only: a bare .sa-section--navy p also
 * matches paragraphs inside white cards nested in the navy band, which turned
 * those white on white. */
.sa-section--navy .sa-steps__item p { color: rgba(255, 255, 255, .92); }

/* Definition terms in the trust panel sat at 4.38:1 at 12px. */
.sa-facts dt { color: var(--sa-color-ink); }

/* Arrow links and offer-card apply links measured 22px tall. */
.sa-link-arrow,
.sa-offer-card a:not(.sa-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* The WSIB reference link is a standalone action inside the callout. */
.sa-callout a:not(.sa-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* .sa-hero__card is shared: the course page nests a .sa-stat-grid inside it,
 * and that grid was coloured for the card's former dark panel. Repainting the
 * card cream left white figures on cream, so the grid takes ink colours
 * whenever it sits inside the card. */
.sa-hero__card .sa-stat-grid dt { color: var(--sa-color-muted); }
.sa-hero__card .sa-stat-grid dd { color: var(--sa-color-primary-dark); }
.sa-hero__card .sa-stat-grid { border-color: rgba(74, 18, 17, .18); }

@media (max-width: 860px) {
  /* Keep the brand and the menu button on one row; the nav takes its own row
     underneath when opened, instead of pushing the button down. */
  .sa-brand { flex: 1 1 auto; min-width: 0; }
  .sa-nav-toggle__label { flex: 0 0 auto; margin-left: 0; }
  .sa-nav { flex: 1 0 100%; }
  .sa-brand__logo { height: 38px; }
  .sa-brand__name { font-size: var(--sa-text-base); }
  .sa-hero__inner { padding-block: clamp(2.5rem, 9vw, 4rem); }
  .sa-hero__actions .sa-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 860px) {
  /* An earlier rule stacks the header inner into a column, which pushed the
     menu button onto its own row beneath the brand. The capsule keeps a row. */
  .sa-site-header__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-inline: var(--sa-space-4);
  }
}

/* .sa-container puts its gutter in padding, which sits inside the capsule's
 * background, so the capsule ran edge to edge and its rounded corners were
 * lost against the screen edges. The gutter belongs on the header instead. */
.sa-site-header { padding-inline: var(--sa-space-4); }


/* =========================================================================
 * Surface-local text colours.
 *
 * .sa-section--navy sets white headings and near-white paragraphs on every
 * descendant. The light cards nested inside it - .sa-feature-grid article and
 * its siblings - paint a white surface but inherited that white text, so
 * "Protected learning" and its paragraph rendered white on white on the
 * security-training page. Broad descendant overrides cause this, so the fix is
 * to give each surface its own colours rather than to add another override:
 * these rules are correct wherever the card is nested.
 * ====================================================================== */

.sa-callout,
.sa-path-card,
.sa-topic-card,
.sa-feature-grid article,
.sa-offer-card,
.sa-learning-card,
.sa-dashboard-note,
.sa-empty-state,
.sa-next-steps {
  color: var(--sa-color-ink);
}

.sa-callout :is(h2, h3, h4),
.sa-path-card :is(h2, h3, h4),
.sa-topic-card :is(h2, h3, h4),
.sa-feature-grid article :is(h2, h3, h4),
.sa-offer-card :is(h2, h3, h4),
.sa-learning-card :is(h2, h3, h4),
.sa-dashboard-note :is(h2, h3, h4),
.sa-empty-state :is(h2, h3, h4),
.sa-next-steps :is(h2, h3, h4) {
  color: var(--sa-color-secondary);
}

.sa-callout p,
.sa-path-card p,
.sa-topic-card p,
.sa-feature-grid article p,
.sa-offer-card p,
.sa-learning-card p,
.sa-dashboard-note p,
.sa-empty-state p,
.sa-next-steps p {
  color: var(--sa-color-muted);
}

.sa-callout li,
.sa-feature-grid article li,
.sa-offer-card li,
.sa-learning-card li,
.sa-next-steps li {
  color: var(--sa-color-ink);
}

/* The eyebrow is maroon by default, which is correct on a light ground. The
 * application shell's info panel paints the dark brand gradient and sets white
 * text, but the eyebrow's own colour won, leaving "Secure application" at
 * 1.03:1 on the gradient. */
.sa-application-shell__info .sa-eyebrow,
.sa-application-shell__info .sa-small,
.sa-application-shell__info .sa-footer__note {
  color: var(--sa-color-cream);
}
.sa-application-shell__info p {
  color: rgba(255, 255, 255, .92);
}
.sa-application-shell__info a:not(.sa-btn) {
  color: #fff;
}

/* =========================================================================
 * Form controls, headings and spacing consistency.
 *
 * Form styling was scoped to .sa-apply, so every other form on the site -
 * profile, and any future named form - fell back to browser defaults at around
 * 21px tall. The shared shape lives here instead, keyed on the field wrapper
 * the templates already use.
 * ====================================================================== */

.sa-field input[type="text"],
.sa-field input[type="email"],
.sa-field input[type="tel"],
.sa-field input[type="password"],
.sa-field input[type="number"],
.sa-field input[type="date"],
.sa-field select,
.sa-field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sa-space-3);
  font: inherit;
  color: var(--sa-color-ink);
  background: var(--sa-color-surface);
  border: 1px solid var(--sa-color-muted-2);
  border-radius: var(--sa-radius-sm);
}
.sa-field textarea { min-height: 8rem; resize: vertical; }
.sa-field label { display: inline-block; margin-bottom: var(--sa-space-2); font-weight: var(--sa-fw-semibold); }
.sa-field { margin-bottom: var(--sa-space-5); }
.sa-field__help { margin: var(--sa-space-2) 0 0; color: var(--sa-color-muted); font-size: var(--sa-text-sm); }

.sa-field :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--sa-color-secondary);
  outline-offset: 2px;
}
.sa-field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--sa-color-danger);
  border-width: 2px;
}

/* Page headings share one rhythm across the information, authentication and
 * learning families rather than each template setting its own. */
.sa-pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sa-pagehead__title { margin: 0 0 var(--sa-space-3); }
.sa-section__title { margin: 0 0 var(--sa-space-4); }
.sa-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Checkboxes and radios ship at about 13px, below the 24px target floor. The
 * consent checkbox on the application form is the one a learner must hit. */
.sa-apply input[type="checkbox"],
.sa-apply input[type="radio"],
.sa-field input[type="checkbox"],
.sa-field input[type="radio"],
.sa-quiz-form input[type="checkbox"],
.sa-quiz-form input[type="radio"] {
  width: 24px;
  height: 24px;
  margin-inline-end: var(--sa-space-2);
  accent-color: var(--sa-color-primary);
}

/* Breadcrumb links are the standing navigation on every information and course
 * page, so they take the same floor as the rest of the navigation. */
.sa-breadcrumbs a,
.sa-breadcrumbs span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* The consent checkbox sits in a flex row beside its label, which shrank it to
 * 16px wide even with an explicit size. */
.sa-apply input[type="checkbox"],
.sa-apply input[type="radio"],
.sa-field input[type="checkbox"],
.sa-field input[type="radio"],
.sa-quiz-form input[type="checkbox"],
.sa-quiz-form input[type="radio"] {
  flex: 0 0 24px;
  min-width: 24px;
}

/* The 404 recovery links are the only navigation on that page. */
.sa-404__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* Telephone and email links are standalone actions wherever they appear, and on
 * a phone they are the most likely thing a visitor taps.
 *
 * Deliberately NOT inline-flex: an email address is long, and a flex box will
 * not break inside itself, so an address in a narrow contact card pushed the
 * whole page 87px wider than the viewport at 768. Vertical padding grows the
 * hit area on an ordinary inline box, which still wraps. */
.sa-main a[href^="tel:"],
.sa-main a[href^="mailto:"] {
  padding-block: 4px;
  overflow-wrap: anywhere;
}

/* Standalone links inside the contact card are actions rather than links in a
 * sentence, so they take the target floor too - by the same padding route, for
 * the same wrapping reason. */
.sa-contact-card a,
.sa-contact-card__primary a {
  padding-block: 4px;
  overflow-wrap: anywhere;
}

/* A paragraph whose whole content is one link is a standalone action, not a
 * link inside a sentence, so the WCAG 2.5.8 inline exception does not cover it. */
.sa-callout__source a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* .sa-hero .sa-price__* forces white for the price block on the dark hero, and
 * that scope includes .sa-hero__card, which is now a cream panel. Same class of
 * problem as the stat grid: a component coloured for the card's former dark
 * background. The card restates the light-ground colours for its own contents. */
.sa-hero__card .sa-price { border-color: rgba(74, 18, 17, .18); }
.sa-hero__card .sa-price__amount { color: var(--sa-color-secondary-dark); }
.sa-hero__card .sa-price__note,
.sa-hero__card .sa-price__neutral { color: var(--sa-color-muted); }
.sa-hero__card .sa-check-list li,
.sa-hero__card li { color: var(--sa-color-ink); }
.sa-hero__card .sa-link-arrow { color: var(--sa-color-primary); }

/* Content links: target size without changing layout.
 *
 * Several standalone links sit in a bare <p> with no class, so there is no
 * selector that distinguishes them from a link inside a sentence. Padding on an
 * ordinary inline box grows the hit area vertically while leaving flow and
 * wrapping alone, so it can be applied to every content link. It is applied to
 * the link itself, so the visible control and its hit area stay the same shape;
 * no transparent overlay is involved. Links inside a sentence are exempt under
 * WCAG 2.5.8 but are no worse for meeting it. */
.sa-main a {
  padding-block: 3px;
}