@charset "UTF-8";

/* =========================================================================
   NDISsupport.courses — design system
   Editorial-clinical. Warm paper, eucalyptus ink, ochre accents.
   Fraunces (display serif) + Karla (humanist sans) + JetBrains Mono (codes).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Palette: deep blue, turquoise, white.

   Token roles are kept separate on purpose. `--deep` is a dark SURFACE used
   behind the footer and table headers, so it stays dark in both themes and
   carries its own `--on-deep` text colour; `--brand-strong` is the emphatic
   brand TEXT colour and therefore flips light in dark mode. Collapsing those
   two roles into one token is what makes dark-mode footers unreadable.
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  /* --- Surfaces -----------------------------------------------------
     The page ground is true white and the alternating band only a whisper of
     blue: together these are ~70% of a long page, so tinting them is what
     made the site feel heavy. Cards separate on white by border and shadow. */
  --surface:        #FFFFFF;
  --surface-sunk:   #F3F8FC;
  --surface-raised: #FFFFFF;
  --rule:           #CBDDEB;
  --rule-soft:      #E0EAF3;

  /* --- Ink ---------------------------------------------------------- */
  --ink:          #0B2033;
  --ink-soft:     #31536E;
  --ink-mute:     #4C6C89;

  /* --- Brand: blue --------------------------------------------------- */
  --brand:        #0B5EA8;
  --brand-hover:  #08477F;
  --brand-strong: #08477F;
  --brand-wash:   #E1EFFA;
  --brand-ink:    #FFFFFF;

  /* --- Accent: turquoise --------------------------------------------- */
  --accent:       #07767C;
  --accent-hover: #055B60;
  --accent-lift:  #14B4BA;
  --accent-wash:  #DBF2F3;
  --accent-ink:   #FFFFFF;

  /* --- Header surface: pale blue with dark ink ------------------------
     Used for the footer, table headers and card heads. Formerly navy; the
     site is light-only, so these are now a soft wash like everything else. */
  --deep:         #EAF3FA;
  --on-deep:      #0B2033;
  --on-deep-mute: #31536E;

  /* --- Turquoise band behind heroes and CTAs --------------------------
     A pale wash with dark text, not a saturated block. Inverting it was the
     single biggest thing keeping the page feeling heavy, and it also removes
     the contrast ceiling that a light-on-turquoise band imposes. */
  --band:         #DFF3F4;
  --band-deep:    #CFECEE;
  --on-band:      #0B2033;
  --on-band-mute: #31536E;
  --band-btn:     #0B5EA8;
  --band-btn-ink: #FFFFFF;

  /* --- Status --------------------------------------------------------- */
  --success:      #07767C;
  --success-wash: #DBF2F3;
  --info:         #1361AF;
  --info-wash:    #E3EFFA;
  --warn:         #8A5B0E;
  --warn-wash:    #FAEFDA;
  --danger:       #AC2D1D;
  --danger-hover: #87200F;
  --danger-wash:  #FBE7E3;
  --danger-ink:   #FFFFFF;

  /* --- Type --------------------------------------------------------- */
  --display: "Plus Jakarta Sans", "Karla", "Helvetica Neue", sans-serif;
  --sans:    "Karla", "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Geometry ----------------------------------------------------- */
  --measure: 68ch;
  --shell:   72rem;
  --shell-wide: 84rem;
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(8, 35, 60, .08), 0 3px 10px -2px rgba(8, 35, 60, .07);
  --shadow:    0 2px 4px rgba(8, 35, 60, .06), 0 10px 26px -8px rgba(8, 35, 60, .16);
  --shadow-lg: 0 4px 10px rgba(8, 35, 60, .07), 0 28px 60px -22px rgba(8, 35, 60, .32);
}

/* =========================================================================
   Reset & base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7.25rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.68;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Paper grain — subtle, and dropped entirely on small screens for perf. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
@media (max-width: 40rem) { body::before { display: none; } }

body > * { position: relative; z-index: 1; }

img, svg { max-width: 100%; height: auto; display: block; }

/* =========================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h3, h4 { letter-spacing: -.018em; }

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.08rem + .8vw, 1.6rem); }
h4 { font-size: 1.17rem; letter-spacing: -.008em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent); }

strong { font-weight: 700; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.eyebrow--plain::after { display: none; }

.lede {
  font-size: clamp(1.2rem, 1.1rem + .45vw, 1.42rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 54ch;
}

.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
.muted { color: var(--ink-mute); }
.small { font-size: .94rem; }
.tiny  { font-size: .85rem; }

/* =========================================================================
   Layout
   ========================================================================= */

/* The three shells are used standalone, so each needs its own auto margin —
   they are widths, not modifiers of .shell. */
.shell, .shell--wide, .shell--narrow { margin-inline: auto; }

.shell { width: min(100% - 2rem, var(--shell)); }
.shell--wide { width: min(100% - 2rem, var(--shell-wide)); }
.shell--narrow { width: min(100% - 2rem, 48rem); }

@media (min-width: 40rem) {
  .shell, .shell--wide, .shell--narrow { width: min(100% - 4rem, var(--shell)); }
  .shell--wide { width: min(100% - 4rem, var(--shell-wide)); }
  .shell--narrow { width: min(100% - 4rem, 48rem); }
}

.section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.section--sunk { background: var(--surface-sunk); }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section--sunk + .section, .section + .section--sunk { border-top: 0; }

main { flex: 1; }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Two-thirds of a three-column grid. Only applied once the grid actually has
   three columns — below that the grid is a single implicit column, and a span
   would silently create a second one and push the page sideways on a phone. */
@media (min-width: 66rem) { .grid__span-2 { grid-column: span 2; } }

/* =========================================================================
   Header
   ========================================================================= */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand) 0%, var(--accent-lift) 55%, var(--brand) 100%) 1;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }

/* The logo is a horizontal lockup — the cross plus the words "NDIS SUPPORT
   COURSES" — on a transparent background, so it carries the site name on its
   own and the masthead does not repeat it in text. Sized by height, with the
   width left to the artwork's own ratio. */
.brand__logo {
  width: auto;
  height: 2.95rem;
  max-width: 100%;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
@media (max-width: 40rem) { .brand__logo { height: 2.35rem; } }

.brand--footer {
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}
.brand--footer .brand__logo { height: 3.1rem; }

/* Kept for the lettermark fallback used in generated documents. */
.brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent-lift) 100%);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--surface) 22%, transparent);
}

.brand__domain {
  font-family: var(--mono);
  font-size: .71rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-top: .12rem;
}

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }

/* :not(.btn) keeps these rules away from buttons in the nav — otherwise the
   higher specificity here silently overrides .btn--primary's own colour. */
.nav a:not(.btn) {
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  font-size: .99rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:not(.btn):hover { background: var(--surface-sunk); color: var(--ink); }
.nav a:not(.btn)[aria-current="page"] { color: var(--brand); }

.nav__divider { width: 1px; height: 1.4rem; background: var(--rule); margin-inline: .5rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: .45rem .7rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 60rem) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem 1rem 1.1rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) { padding: .7rem .5rem; font-size: 1.07rem; }
  .nav__divider { width: auto; height: 1px; margin: .5rem 0; }
  .nav .btn { margin-top: .5rem; text-align: center; justify-content: center; }
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-hover); color: var(--brand-ink); box-shadow: var(--shadow); }

.btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--accent-hover); color: var(--accent-ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--ink-mute); }

.btn--quiet { background: transparent; color: var(--ink-soft); padding-inline: .6rem; }
.btn--quiet:hover { color: var(--ink); background: var(--surface-sunk); }

.btn--danger { background: var(--danger); color: var(--danger-ink); }
.btn--danger:hover { background: var(--danger-hover); color: var(--danger-ink); }

/* For use on a coloured band, where the usual brand fills have too little
   contrast against it. The pair is theme-aware: white on the light band,
   bright turquoise on the dark one. */
/* Outlined button for use on a band, in either theme. */
.btn--on-band {
  background: transparent;
  color: var(--on-band);
  border-color: color-mix(in srgb, var(--on-band) 38%, transparent);
}
.btn--on-band:hover {
  background: color-mix(in srgb, var(--on-band) 8%, transparent);
  color: var(--on-band);
  border-color: var(--on-band);
}

.btn--invert,
.band .btn--accent { background: var(--band-btn); color: var(--band-btn-ink); box-shadow: var(--shadow); }
.btn--invert:hover,
.band .btn--accent:hover { background: var(--band-btn); color: var(--band-btn-ink); filter: brightness(.94); }

.btn--block { width: 100%; }
.btn--sm { padding: .45rem .9rem; font-size: .92rem; }
.btn--lg { padding: .9rem 1.8rem; font-size: 1.12rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* =========================================================================
   Cards, panels, pills
   ========================================================================= */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--sunk { background: var(--surface-sunk); box-shadow: none; border-color: var(--rule); }

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  background: var(--surface-raised);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--rule-soft);
}
.pill--success  { background: var(--success-wash); color: var(--success); border-color: transparent; }
.pill--accent  { background: var(--accent-wash);    color: var(--accent);    border-color: transparent; }
.pill--danger   { background: var(--danger-wash);     color: var(--danger);     border-color: transparent; }
.pill--info    { background: var(--info-wash);      color: var(--info);      border-color: transparent; }
.pill--warn   { background: var(--warn-wash);     color: var(--warn);     border-color: transparent; }

.pill__dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 7vw, 7rem);
  background:
    radial-gradient(70rem 40rem at 88% -10%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 62%),
    radial-gradient(52rem 32rem at -8% 108%, color-mix(in srgb, var(--accent-lift) 24%, transparent) 0%, transparent 58%);
}

.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
}

.hero h1 .accent { color: var(--accent); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.hero__proof div { line-height: 1.2; }
.hero__proof b {
  display: block;
  font-family: var(--display);
  font-size: 1.92rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -.02em;
}
.hero__proof span { font-size: .87rem; color: var(--ink-mute); letter-spacing: .02em; }

/* Stacked "module index" card in the hero */
.index-card {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.index-card__head {
  padding: 1.1rem 1.4rem;
  background: var(--deep);
  border-bottom: 3px solid var(--accent-lift);
  color: var(--on-deep);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.index-card__head h2 {
  font-size: 1.12rem;
  margin: 0;
  color: inherit;
  letter-spacing: -.01em;
}
.index-card__head span { font-family: var(--mono); font-size: .75rem; opacity: .75; }

.index-card ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.index-card li {
  counter-increment: idx;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .62rem 1.4rem;
  font-size: .97rem;
  border-top: 1px solid var(--rule-soft);
}
.index-card li:first-child { border-top: 0; }
.index-card li::before {
  content: counter(idx, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--accent);
  flex-shrink: 0;
}
.index-card li span { margin-left: auto; font-size: .77rem; color: var(--ink-mute); font-family: var(--mono); }

/* =========================================================================
   Course cards
   ========================================================================= */

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent-lift));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--rule);
  color: inherit;
}
.course-card:hover::after { transform: scaleX(1); }
.course-card[data-practical="1"]::after { background: var(--warn); }

.course-card__top { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }

.course-card__num {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--accent);
  letter-spacing: .08em;
}

.course-card h3 { font-size: 1.36rem; margin-bottom: .55rem; }
.course-card p { font-size: .99rem; color: var(--ink-soft); margin-bottom: 1.2rem; }

.course-card__meta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .85rem;
  color: var(--ink-mute);
  font-family: var(--mono);
}

/* =========================================================================
   Prose (lesson bodies, legal pages)
   ========================================================================= */

.prose { max-width: var(--measure); font-size: 1.1875rem; line-height: 1.78; }
.prose > * + * { margin-top: 1.15em; }
.prose h3 {
  margin-top: 2.4em;
  padding-top: .1em;
  font-size: 1.51rem;
  color: var(--brand-strong);
}
.prose h4 { margin-top: 1.9em; font-size: 1.19rem; }
.prose ul, .prose ol { padding-left: 1.4em; margin-block: 1.2em; }
.prose li { margin-bottom: .62em; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose ol { counter-reset: item; }

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--ink-soft);
}

.content-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.6em;
  font-size: 1.02rem;
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.content-table thead th {
  background: var(--deep);
  border-bottom: 3px solid var(--accent-lift);
  color: var(--on-deep);
  text-align: left;
  padding: .7rem .85rem;
  font-family: var(--sans);
  font-size: .81rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.content-table td, .content-table th { padding: .85rem .95rem; vertical-align: top; }
.content-table tbody tr { border-bottom: 1px solid var(--rule-soft); }
.content-table tbody tr:nth-child(even) { background: var(--surface-sunk); }
.content-table tbody tr:last-child { border-bottom: 0; }

/* Callouts */
.callout {
  margin-block: 1.9em;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r);
  border-left: 4px solid var(--brand);
  background: var(--brand-wash);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h4 {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: .83rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}
.callout p, .callout li { font-size: 1.08rem; line-height: 1.7; }
.callout ul, .callout ol { margin-block: .7em; }

.callout--warn { border-left-color: var(--danger); background: var(--danger-wash); }
.callout--warn h4 { color: var(--danger); }

.callout--key { border-left-color: var(--accent); background: var(--accent-wash); }
.callout--key h4 { color: var(--accent); }

.callout--scenario {
  border-left-color: var(--info);
  background: var(--info-wash);
  font-style: italic;
}
.callout--scenario h4 { color: var(--info); font-style: normal; }
.callout--scenario strong { font-style: normal; }

/* =========================================================================
   Learning shell (lesson player)
   ========================================================================= */

.learn { display: grid; gap: 2.5rem; align-items: start; padding-block: 2rem 4rem; }

/* Grid and flex children default to min-width:auto, which lets a long word or
   a wide table push the track past the viewport. Pinning it to 0 lets the
   inner scroll containers (.content-table, .table-wrap) do their job. */
.learn > *, .grid > *, .row > * { min-width: 0; }

/* Single column: the lesson comes first. Otherwise an eight-item syllabus
   pushes the actual reading below the fold on every phone. */
.learn > article { order: 1; }
.learn > .syllabus { order: 2; }

@media (min-width: 64rem) {
  .learn { grid-template-columns: 17.5rem 1fr; gap: 3.5rem; }
  .learn > article { order: 2; }
  .learn > .syllabus { order: 1; }
}

.syllabus {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  overflow: hidden;
}
@media (min-width: 64rem) { .syllabus { position: sticky; top: 6.75rem; } }

.syllabus__head { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--rule-soft); }
.syllabus__head h2 { font-size: 1.09rem; margin-bottom: .55rem; }
.syllabus__head h2::before {
  content: "All lessons · ";
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .3rem;
}
@media (min-width: 64rem) { .syllabus__head h2::before { display: none; } }

.syllabus ol { list-style: none; margin: 0; padding: .4rem; counter-reset: step; }
.syllabus li { counter-increment: step; }
.syllabus a {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem .7rem;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.35;
}
.syllabus a:hover { background: var(--surface-sunk); color: var(--ink); }
.syllabus a[aria-current="page"] {
  background: var(--brand-wash);
  color: var(--brand-strong);
  font-weight: 700;
}
.syllabus a::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .73rem;
  color: var(--ink-mute);
  padding-top: .18rem;
  flex-shrink: 0;
}
.syllabus a[data-done="1"]::before { content: "✓"; color: var(--success); font-size: .87rem; }
.syllabus a[data-locked="1"] { opacity: .45; pointer-events: none; }

.syllabus__quiz { padding: .4rem .8rem 1rem; border-top: 1px solid var(--rule-soft); margin-top: .4rem; }

/* Progress */
.progress {
  height: .45rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent-lift));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.progress--thick { height: .7rem; }

.dial { display: grid; place-items: center; position: relative; width: 5.5rem; height: 5.5rem; }
.dial svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.dial circle { fill: none; stroke-width: 7; }
.dial .dial__track { stroke: var(--surface-sunk); }
.dial .dial__value {
  stroke: var(--brand);
  stroke-linecap: round;
  transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1);
}
.dial b {
  position: absolute;
  font-family: var(--display);
  font-size: 1.22rem;
  letter-spacing: -.02em;
}

/* Lesson article */
.lesson__head { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 2px solid var(--ink); }
.lesson__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}

/* =========================================================================
   Quiz
   ========================================================================= */

.quiz__q {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  background: var(--surface-raised);
  margin-bottom: 1.5rem;
}
.quiz__q > legend { display: contents; }

.quiz__num {
  font-family: var(--mono);
  font-size: .77rem;
  letter-spacing: .1em;
  color: var(--accent);
  display: block;
  margin-bottom: .6rem;
}
.quiz__prompt {
  font-family: var(--display);
  font-size: 1.29rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.014em;
  margin-bottom: 1.2rem;
  display: block;
}

.choice {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .95rem 1.05rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  margin-bottom: .6rem;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .14s ease, background-color .14s ease;
}
.choice:hover { border-color: var(--brand); background: var(--brand-wash); }
.choice input { margin-top: .32rem; accent-color: var(--brand); flex-shrink: 0; width: 1.05rem; height: 1.05rem; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.choice span { font-size: 1.06rem; line-height: 1.55; }

/* Dense variant, for picking from a long list rather than answering a
   question — the module picker on the bulk certificate form. */
.choice--compact { padding: .5rem .7rem; margin-bottom: .3rem; }
.choice--compact span { font-size: .97rem; line-height: 1.35; }
.choice--compact input { margin-top: .18rem; }

.choice--correct { border-color: var(--success); background: var(--success-wash); }
.choice--wrong   { border-color: var(--danger);     background: var(--danger-wash); }

.feedback {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  font-size: 1.01rem;
  background: var(--surface-sunk);
  border-left: 3px solid var(--ink-mute);
}
.feedback--right { border-left-color: var(--success); background: var(--success-wash); }
.feedback--wrong { border-left-color: var(--danger);     background: var(--danger-wash); }
.feedback b { display: block; margin-bottom: .3rem; font-size: .81rem; letter-spacing: .1em; text-transform: uppercase; }

.scoreboard {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 2.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
@media (min-width: 46rem) { .scoreboard { grid-template-columns: auto 1fr; } }
.scoreboard__score {
  font-family: var(--display);
  font-size: clamp(3.2rem, 2rem + 5vw, 5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.04em;
}
.scoreboard--pass .scoreboard__score { color: var(--success); }
.scoreboard--fail .scoreboard__score { color: var(--danger); }

/* =========================================================================
   Certificate
   ========================================================================= */

.cert {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cert::before {
  content: "";
  position: absolute;
  inset: .7rem;
  border: 1px solid var(--rule-soft);
  border-radius: calc(var(--r-lg) - 4px);
  pointer-events: none;
}
.cert__inner { position: relative; text-align: center; }
.cert__name {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -.025em;
  margin: .4rem 0 .2rem;
}
.cert__course { font-size: 1.22rem; color: var(--ink-soft); margin-bottom: 1.75rem; }
.cert__code {
  font-family: var(--mono);
  font-size: 1.12rem;
  letter-spacing: .08em;
  color: var(--brand);
  font-weight: 700;
}
.cert__meta {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
}
@media (min-width: 40rem) { .cert__meta { grid-template-columns: repeat(3, 1fr); } }
.cert__meta dt {
  font-size: .75rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: .25rem;
}
.cert__meta dd { margin: 0; font-weight: 600; font-size: 1.02rem; }

.verify-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border-radius: var(--r);
  font-weight: 700;
  margin-bottom: 2rem;
}
.verify-banner--valid   { background: var(--success-wash); color: var(--success); }
.verify-banner--expiring{ background: var(--warn-wash);     color: var(--warn); }
.verify-banner--expired { background: var(--danger-wash);  color: var(--danger); }
.verify-banner--revoked { background: var(--danger-wash);     color: var(--danger); }
.verify-banner--unknown { background: var(--surface-sunk);    color: var(--ink-soft); }
.verify-banner__icon { font-size: 1.59rem; line-height: 1; }

/* =========================================================================
   Forms
   ========================================================================= */

.field { margin-bottom: 1.15rem; }
.field > label {
  display: block;
  font-size: .89rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .4rem;
  color: var(--ink-soft);
}
.field__hint { font-size: .87rem; color: var(--ink-mute); margin-top: .35rem; }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1.04rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.textarea { resize: vertical; min-height: 7rem; }
.select { appearance: none; background-image: none; cursor: pointer; }

.field-row { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.auth-shell { display: grid; gap: 3rem; align-items: center; padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); }
@media (min-width: 60rem) { .auth-shell { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* Flash & alerts */
.alert {
  padding: .95rem 1.25rem;
  border-radius: var(--r);
  margin-bottom: 1.5rem;
  font-size: 1.02rem;
  border-left: 3px solid;
}
.alert--error   { background: var(--danger-wash);     border-color: var(--danger);     color: var(--danger); }
.alert--success { background: var(--success-wash); border-color: var(--success); color: var(--success); }
.alert--info    { background: var(--info-wash);      border-color: var(--info);      color: var(--info); }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* =========================================================================
   Tables (admin)
   ========================================================================= */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--surface-raised); }
.table { width: 100%; border-collapse: collapse; font-size: .99rem; }
.table th {
  text-align: left;
  padding: .8rem 1rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.table td { padding: .92rem 1rem; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-sunk); }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-size: .93rem; }

.stat {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
}
.stat b {
  display: block;
  font-family: var(--display);
  font-size: 2.44rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand);
  margin-bottom: .3rem;
}
.stat span { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
  background: var(--deep);
  border-top: 3px solid var(--accent-lift);
  color: var(--on-deep-mute);
  padding-block: 3.5rem 2rem;
  margin-top: auto;
}
.footer a { color: var(--on-deep); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer h4 {
  font-family: var(--sans);
  font-size: .77rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-deep-mute);
  margin-bottom: .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .5rem; font-size: .99rem; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__base {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(220, 235, 247, .18);
  font-size: .89rem;
  color: var(--on-deep-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.footer__ack { max-width: 46ch; font-size: .89rem; line-height: 1.6; color: var(--on-deep-mute); }

/* =========================================================================
   Utilities & motion
   ========================================================================= */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.75rem; }
.hide { display: none !important; }

.divider { height: 1px; background: var(--rule-soft); border: 0; margin-block: 2rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: .5rem;
  background: var(--brand);
  color: var(--brand-ink);
  padding: .6rem 1rem;
  border-radius: var(--r);
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: .5rem; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise .6s cubic-bezier(.22,1,.36,1) backwards; }
.rise:nth-child(2) { animation-delay: .07s; }
.rise:nth-child(3) { animation-delay: .14s; }
.rise:nth-child(4) { animation-delay: .21s; }
.rise:nth-child(5) { animation-delay: .28s; }
.rise:nth-child(6) { animation-delay: .35s; }

/* =========================================================================
   Print — lesson content and certificates
   ========================================================================= */

@media print {
  .masthead, .footer, .syllabus, .lesson__nav, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .learn { display: block; }
  .card, .panel, .cert { box-shadow: none; border-color: #999; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .callout { break-inside: avoid; }
}

/* =========================================================================
   Marketing components
   A coloured band with an overlapping white card, benefit tick-lists, role
   cards, an FAQ accordion and a sticky mobile call-to-action.
   ========================================================================= */

/* --- Coloured hero band ------------------------------------------------ */

.band {
  position: relative;
  background: linear-gradient(135deg, var(--band) 0%, var(--band-deep) 100%);
  color: var(--on-band);
  overflow: hidden;
}
.band::after {
  /* Soft blooms give the flat wash some depth without needing imagery.
     color-mix keeps them working on both the pale and the dark band. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 82% 8%, color-mix(in srgb, var(--accent-lift) 16%, transparent) 0%, transparent 62%),
    radial-gradient(26rem 26rem at 12% 96%, color-mix(in srgb, var(--brand) 9%, transparent) 0%, transparent 60%);
}
.band > * { position: relative; z-index: 1; }
.band h1, .band h2, .band h3 { color: var(--on-band); }
.band p { color: var(--on-band-mute); }
.band a:not(.btn) { color: var(--on-band); }

.band-hero { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) 0; }

.band-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .band-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
}

/* White card lifting off the band, the way a course landing page does it. */
.lift-card {
  background: var(--surface-raised);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  box-shadow: var(--shadow-lg);
  margin-bottom: -3.5rem;
  color: var(--ink);
}
.lift-card h1, .lift-card h2, .lift-card h3 { color: var(--ink); }
.lift-card p, .lift-card li, .lift-card td { color: var(--ink-soft); }

.band-hero + .section, .band-hero + * { padding-top: 5.5rem; }

/* --- Illustrated panel (stands in for photography) --------------------- */

.figure-panel {
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-lift) 30%, transparent);
  padding: 1.5rem;
  backdrop-filter: blur(2px);
}
.figure-panel__inner {
  background: var(--surface-raised);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink);
}
.figure-panel__inner p { color: var(--ink-soft); }

/* --- Benefit tick list -------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
/* Deliberately not a flex container: inline children such as <strong> would
   become flex items and the sentence would break into fragments. The marker
   is positioned instead, so the content stays in normal inline flow. */
.ticks li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .12rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 800;
  background: var(--accent-wash);
  color: var(--accent);
}
.band .ticks li::before { background: color-mix(in srgb, var(--accent-lift) 26%, transparent); color: var(--accent); }
.band .ticks li { color: var(--on-band); }

/* --- Feature / role cards ---------------------------------------------- */

.feature {
  background: var(--surface-raised);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  height: 100%;
}
.feature__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent-lift) 100%);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}
.feature h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.feature p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 0; }

.role-card {
  background: var(--surface-raised);
  border: 1px solid var(--rule-soft);
  border-left: 4px solid var(--accent-lift);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  height: 100%;
}
.role-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.role-card p { font-size: .98rem; color: var(--ink-soft); margin-bottom: 0; }

/* --- FAQ accordion ------------------------------------------------------ */

.faq {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  margin-bottom: .85rem;
  overflow: hidden;
}
.faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.25rem 1.15rem 1.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.015em;
  position: relative;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}
.faq[open] > summary::after { content: "−"; }
.faq > summary:hover { background: var(--surface-sunk); }
.faq__body { padding: 0 1.4rem 1.35rem; color: var(--ink-soft); }
.faq__body > :first-child { margin-top: 0; }
.faq__body > :last-child { margin-bottom: 0; }

/* --- Sticky mobile call-to-action --------------------------------------- */

.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: .6rem;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px -10px rgba(8,35,60,.28);
}
.cta-bar .btn { flex: 1; }
@media (max-width: 60rem) {
  .cta-bar { display: flex; }
  /* Keep the bar from covering the end of the page. */
  body { padding-bottom: 4.75rem; }
}

/* --- Stat band ---------------------------------------------------------- */

.stat-band { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat-band div { text-align: center; }
.stat-band b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--on-band);
}
.stat-band span {
  font-size: .9rem;
  color: var(--on-band-mute);
  display: block;
  margin-top: .45rem;
}

/* Price block on a course card. */
.course-card__price {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-soft);
}
.course-card__price strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
}
.course-card__price span { font-size: .82rem; color: var(--ink-mute); }

/* =========================================================================
   Regulatory alignment statement (home). Text and a neutral mark only —
   deliberately no third-party logo.
   ========================================================================= */
.alignment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.5rem;
  align-items: start;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-lift);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.alignment__mark {
  color: var(--accent);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
}
.alignment__title {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  margin: 0 0 .6rem;
  max-width: 44ch;
}
.alignment__body { margin: 0 0 .75rem; max-width: 70ch; }
.alignment__note { margin: 0; font-size: .92rem; color: var(--ink-mute); max-width: 70ch; }
@media (max-width: 34rem) {
  .alignment { grid-template-columns: 1fr; }
}