/* ==========================================================================
   NWLexTech design system
   --------------------------------------------------------------------------
   A single, reusable vocabulary for every public-facing page.

   Principles
   - Warm white ground, charcoal text, one muted accent (teal).
   - Two type families, used sparingly: a serif for headings, a sans for
     everything else. No decorative mono, no all-caps display type.
   - Space carries the hierarchy, not borders, shadows or colour.
   - Components are additive: build new pages from these classes rather
     than writing page-level <style> blocks.

   Sections
     01  Tokens
     02  Base
     03  Layout
     04  Typography
     05  Buttons & links
     06  Navigation
     07  Footer
     08  Entries (services, engagements, listings)
     09  Definition & credential lists
     10  Forms
     11  Disclosure (FAQ)
     12  Prose (long-form article & training content)
     13  Utilities
     14  Legacy bridge (Bootstrap-based training pages)
     15  Flash messages
     16  Plans
     17  Training sidebar
     18  Training content
     19  Brutalist layer
   ========================================================================== */

/* -------------------------------------------------------------------------
   01  Tokens
   ---------------------------------------------------------------------- */

:root {
  /* Ground */
  --paper: #ffffff;          /* white — the default page ground */
  --paper-alt: #eef3f2;      /* a cool teal-grey band for alternating sections */
  --surface: #ffffff;        /* raised surface: forms, table heads */

  /* Ink */
  --ink: #24252a;            /* charcoal — headings and primary text */
  --ink-2: #4a4c54;          /* body text on warm ground */
  --muted: #6c6d75;          /* secondary text, meta, captions */

  /* Rules */
  --rule: #dfe3e2;           /* hairline, cool */
  --rule-strong: #c4cbca;

  /* Accent — a single muted teal, used for links, marks and one CTA */
  --accent: #35605c;
  --accent-deep: #274845;
  --accent-tint: #edf2f0;

  /* Feedback */
  --danger: #8c3a2e;
  --danger-tint: #f8efed;

  /* Type */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Measure */
  --wrap: 1120px;            /* page gutter width */
  --measure: 68ch;           /* comfortable reading column */

  /* Rhythm */
  --space-section: clamp(3.5rem, 6vw, 6rem);
  --space-gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius: 0;               /* square corners — see 19 Brutalist layer */

  /* Brutalist structure: heavy ink lines and hard offset shadows. */
  --line: 2px solid var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-hard-accent: 6px 6px 0 var(--accent);
  --nav-h: 68px;
}

/* -------------------------------------------------------------------------
   02  Base
   ---------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Anchored sections clear the fixed header. */
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

::selection {
  background: var(--accent-tint);
  color: var(--accent-deep);
}

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

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

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

/* Page shell: pins the footer to the bottom on short pages. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--nav-h);
}
.page__body { flex: 1 0 auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.section {
  padding-block: var(--space-section);
}
.section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.section--alt { background: var(--paper-alt); }
.section--ruled { border-top: 1px solid var(--rule); }

/* Section intro: eyebrow + heading + lead, with room to breathe. */
.section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 44rem;
}
/* For a head that sits directly on top of its own list. */
.section__head--flush { margin-bottom: 0; }

/* Page header — the calm replacement for a hero slab. */
.page-head {
  padding-block: clamp(3rem, 5.5vw, 5rem) clamp(2.5rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.page-head__title { margin-bottom: 1rem; }
.page-head__lead {
  max-width: 46rem;
  margin: 0;
}

/* Text columns — plain grid, no card chrome. */
.cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* An asymmetric split for "heading left, content right" sections. */
.cols--aside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.stack > * + * { margin-top: 1.1rem; }
.stack--tight > * + * { margin-top: 0.5rem; }
.stack--loose > * + * { margin-top: 2rem; }

/* -------------------------------------------------------------------------
   04  Typography
   ---------------------------------------------------------------------- */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(1.9rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.15;
}
h2, .h2 {
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem);
  line-height: 1.25;
}
h3, .h3 {
  font-size: 1.125rem;
  line-height: 1.4;
}
h4, .h4 {
  font-size: 1rem;
  line-height: 1.5;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.03rem, 1rem + 0.22vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: var(--measure);
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.meta {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--muted);
}

.measure { max-width: var(--measure); }

/* Small print — disclaimers, footnotes. */
.fineprint {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   05  Buttons & links
   ---------------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover {
  color: var(--accent-deep);
  text-decoration-color: currentColor;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  text-decoration: none;
}

.btn[disabled],
.btn--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* A quiet text link that still reads as an action. */
.link-more {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 1px;
}
.link-more:hover {
  text-decoration: none;
  border-bottom-color: currentColor;
}

/* -------------------------------------------------------------------------
   06  Navigation
   ---------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand:hover { color: var(--ink); text-decoration: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.nav__link {
  font-size: 0.9rem;
  font-weight: 450;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav__link:hover {
  color: var(--ink);
  text-decoration: none;
  border-bottom-color: var(--rule-strong);
}
.nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Mobile disclosure menu — a CSS-only toggle, so navigation works
   without JavaScript. The checkbox stays focusable for keyboard users
   and the label is its visible control. */
.nav__check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.nav__toggle { display: none; }

@media (max-width: 860px) {
  .nav__inner { position: relative; }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--ink);
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    user-select: none;
  }
  .nav__check:focus-visible ~ .nav__toggle {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .nav__menu {
    display: none;
    position: absolute;
    top: calc(var(--nav-h) - 10px);
    right: 0;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(36, 37, 42, 0.08);
    padding: 0.4rem 0.8rem;
  }
  .nav__check:checked ~ .nav__menu { display: block; }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav__link:last-child { border-bottom: 0; }
  .nav__link[aria-current="page"] {
    color: var(--accent-deep);
    border-bottom-color: var(--rule);
  }
}

/* -------------------------------------------------------------------------
   07  Footer
   ---------------------------------------------------------------------- */

.footer {
  flex-shrink: 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
.footer__brand {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.footer__brand:hover { color: var(--ink); text-decoration: none; }
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}
.footer__nav a {
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--accent-deep); text-decoration: underline; }
.footer__legal {
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   08  Entries — services, engagements, listings
   --------------------------------------------------------------------------
   The workhorse pattern. A hairline-separated list rather than a grid of
   boxes: it scales to any number of items without turning the page into
   a wall of cards.
   ---------------------------------------------------------------------- */

.entries {
  border-top: 1px solid var(--rule);
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}

.entry__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.entry__kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.entry__price {
  font-size: 0.88rem;
  color: var(--accent-deep);
  margin: 0;
}
.entry__body { margin: 0; }
.entry__body > p { margin-bottom: 0.9rem; }

/* Whole-row link (blog posts, documents). */
.entry--link {
  grid-template-columns: 1fr;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
  padding-inline: 0.75rem;
  margin-inline: -0.75rem;
}
.entry--link:hover {
  background: var(--accent-tint);
  text-decoration: none;
  color: inherit;
}
.entry--link:hover .entry__title { color: var(--accent-deep); }

/* Included-in / topic tags. Restrained: text, not pills with borders. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  position: relative;
  font-size: 0.85rem;
  color: var(--muted);
}
.tags li + li::before {
  content: "";
  position: absolute;
  left: -0.62rem;
  top: 0.62em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rule-strong);
}

/* Service carousel — a scroll-snap row of service cards that advances on
   its own. Native scrolling carries touch and trackpad; the carousel
   Stimulus controller adds arrows, dots, autoplay and the readout. */
.carousel {
  position: relative;
  --carousel-interval: 5000ms;
}

.carousel__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 1.5rem) / 2);
  gap: 1.5rem;
  margin: 0 -0.5rem 0 0;
  padding: 0 0.5rem 0.75rem 0;     /* room for the hard shadows */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: 2px; }

.carousel__slide {
  scroll-snap-align: start;
  display: flex;
  min-width: 0;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: var(--line);
  box-shadow: var(--shadow-hard);
  padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.carousel__slide.is-active .service-card { box-shadow: var(--shadow-hard-accent); }
.carousel__slide.is-active .service-card:hover { box-shadow: 8px 8px 0 var(--accent); }

/* An ink strip across the top: kicker on the left, number on the right. */
.service-card__head {
  margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2rem)) 1.25rem;
  border-bottom: var(--line);
}
.service-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem clamp(1.25rem, 3vw, 2rem);
}
.service-card__kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.service-card__index {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  padding: 0.1rem 0.45rem;
}
.service-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 1.25rem clamp(1.25rem, 3vw, 2rem) 0.85rem;
}
.service-card__price {
  margin: 0;
  padding: 0.6rem clamp(1.25rem, 3vw, 2rem);
  border-top: var(--line);
  background: var(--accent-tint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-deep);
}
.service-card__body p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.service-card__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.4rem 0 0.6rem;
}

/* Inclusions: square ticks. */
.checklist {
  margin: 0.4rem 0 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 2px dashed var(--ink);
}
.service-card__label + .checklist { margin-top: 0; }
.checklist li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.checklist li + li { margin-top: 0.55rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1rem;
  height: 1rem;
  background: var(--accent);
  border: 2px solid var(--ink);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.3em;
  width: 0.28rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Controls: a ruled bar with square buttons. */
.carousel__controls {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  border: var(--line);
  background: var(--surface);
}
.carousel__status {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 1rem;
  border-right: var(--line);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.carousel__status [data-carousel-target="current"] { color: var(--ink); font-weight: 700; }
.carousel__sep { margin: 0 0.35rem; color: var(--ink); }

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.carousel__dot {
  position: relative;
  overflow: hidden;
  width: 1.25rem;
  height: 0.75rem;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--surface);
  cursor: pointer;
  transition: width 0.2s ease;
}
.carousel__dot:hover { background: var(--accent-tint); }
.carousel__dot.is-active { width: 3rem; }
/* The active dot fills over one autoplay interval. */
.carousel__dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
}
.carousel.is-playing .carousel__dot.is-active::after {
  animation: carousel-progress var(--carousel-interval) linear forwards;
}
@keyframes carousel-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.carousel__arrows { display: flex; }
.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-left: var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.carousel__arrow:hover { background: var(--ink); color: #fff; }
.carousel__arrow:active { background: var(--accent); }

@media (max-width: 860px) {
  /* One card at a time, with the next one peeking in. */
  .carousel__track { grid-auto-columns: 88%; gap: 1rem; align-items: start; }
}
@media (max-width: 520px) {
  .carousel__dots { display: none; }
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-radius: var(--radius);
  padding: 0.2rem 0.5rem;
  vertical-align: 0.1em;
}

/* Numbered/plain block used for approach, engagements and "who we help".
   No border, no hover — just a rule above and generous space. */
.notes {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
.notes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.note { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.note__index {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.note__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.note__body {
  font-size: 0.93rem;
  line-height: 1.65;
  margin: 0;
}

/* Anonymised engagement summaries. */
.casework { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.case {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(0.75rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}
.case__client {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.case__frame {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
}
.case__body { margin: 0; }
.case__outcome {
  margin: 0.7rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent-tint);
  font-size: 0.92rem;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   09  Definition & credential lists
   ---------------------------------------------------------------------- */

.deflist { margin: 0; }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(0.5rem, 2vw, 2rem);
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
}
.deflist > div:first-child { border-top: 1px solid var(--rule); }
.deflist dt {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.93rem;
}
.deflist dd {
  margin: 0;
  font-size: 0.93rem;
}

/* A plain marker list — used for credentials and capability lists. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.ticks li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.93rem;
  line-height: 1.6;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

/* -------------------------------------------------------------------------
   10  Forms
   ---------------------------------------------------------------------- */

.form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 44rem;
}

.field { margin-bottom: 1.25rem; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.label .req { color: var(--danger); }
.label .opt {
  color: var(--muted);
  font-weight: 400;
}

.input,
.select,
.textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input::placeholder,
.textarea::placeholder { color: #9b9ba2; }

.select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c6d75' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}

.textarea {
  resize: vertical;
  min-height: 9rem;
}

.form__note {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.errors {
  background: var(--danger-tint);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--danger);
}
.errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* -------------------------------------------------------------------------
   11  Disclosure (FAQ)
   ---------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); max-width: 52rem; }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.15rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-deep); }

.faq__sign {
  flex-shrink: 0;
  position: relative;
  width: 11px;
  height: 11px;
  align-self: center;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq__sign::before { inset: 5px 0 5px 0; height: 1px; }
.faq__sign::after { inset: 0 5px 0 5px; width: 1px; }
.faq__item[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; }

.faq__a {
  padding-bottom: 1.4rem;
  max-width: var(--measure);
  font-size: 0.95rem;
}
.faq__a p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   12  Prose — long-form articles and training content
   --------------------------------------------------------------------------
   Applied to CKEditor output and any detailed written material, so blog
   posts, compliance documents and course resources share one reading
   experience.
   ---------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose > * + * { margin-top: 1.2rem; }

.prose h2 {
  font-size: 1.45rem;
  line-height: 1.3;
  margin-top: 2.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.prose h3 {
  font-size: 1.15rem;
  margin-top: 2rem;
}
.prose h4 {
  font-size: 1rem;
  margin-top: 1.6rem;
}
.prose > :first-child { margin-top: 0; }

.prose p { margin-bottom: 0; }

.prose a { font-weight: 500; }

.prose strong { color: var(--ink); font-weight: 600; }

.prose ul,
.prose ol {
  padding-left: 1.3rem;
  margin-block: 1.2rem;
}
.prose li + li { margin-top: 0.45rem; }
.prose li::marker { color: var(--muted); }

.prose blockquote {
  margin: 1.75rem 0;
  padding: 0.2rem 0 0.2rem 1.35rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-style: normal;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--paper-alt);
  border-radius: 2px;
  padding: 0.12em 0.35em;
}
.prose pre {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }

.prose img {
  border-radius: var(--radius);
  display: block;
}

.prose figure { margin: 1.75rem 0; }
.prose figcaption {
  font-size: 0.83rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* Tables scroll rather than break the page. */
.prose .table-scroll,
.table-scroll {
  overflow-x: auto;
  margin-block: 1.5rem;
}
.prose table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.prose th,
.prose td,
.table th,
.table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th,
.table th {
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-alt);
}

/* -------------------------------------------------------------------------
   13  Utilities
   ---------------------------------------------------------------------- */

.u-muted { color: var(--muted); }
.u-ink { color: var(--ink); }
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-1 { margin-top: 0.5rem; }
.u-mt-2 { margin-top: 1rem; }
.u-mt-3 { margin-top: 1.75rem; }
.u-mt-4 { margin-top: 2.5rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--surface);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Empty states. */
.empty {
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  color: var(--muted);
}
.empty__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* Responsive collapse for every multi-column pattern. */
@media (max-width: 900px) {
  .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cols--2,
  .cols--3,
  .cols--aside,
  .notes--2,
  .notes--3 { grid-template-columns: minmax(0, 1fr); }

  .entry,
  .case,
  .deflist > div { grid-template-columns: minmax(0, 1fr); }

  .entry { gap: 0.75rem; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .nav, .footer, .skip-link { display: none !important; }
  .page { padding-top: 0; }
  body { background: #fff; color: #000; }
  a { text-decoration: none; color: #000; }
}

/* -------------------------------------------------------------------------
   14  Legacy bridge
   --------------------------------------------------------------------------
   The signed-in training area is built on Bootstrap utilities and a set of
   older class names. Rather than rewrite every template, these map the old
   names onto the new tokens so training pages inherit the same palette and
   typography.
   ---------------------------------------------------------------------- */

.font-helvetica { font-family: var(--font-sans) !important; }
.text-red { color: var(--accent) !important; }
.bg-red { background-color: var(--accent) !important; }
.bg-black { background-color: var(--ink) !important; }

.border-swiss { border: 1px solid var(--rule) !important; }
.border-bottom-swiss { border-bottom: 1px solid var(--rule) !important; }
.border-end-swiss { border-right: 1px solid var(--rule) !important; }

.link-back {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.link-back:hover { color: var(--accent-deep); }

/* Bootstrap component overrides, scoped to what the training pages use. */
.btn { border-radius: var(--radius); }
.btn-dark {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-dark:hover {
  background-color: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
}
/* Destructive actions keep a distinct colour — they must not read as the
   primary accent. */
.btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #743026 !important;
  border-color: #743026 !important;
}
.btn-outline-dark {
  border-color: var(--rule-strong) !important;
  color: var(--ink) !important;
}
.btn-outline-dark:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.text-dark { color: var(--ink) !important; }
.text-muted { color: var(--muted) !important; }
.bg-light { background-color: var(--paper-alt) !important; }
.border-dark { border-color: var(--rule) !important; }

/* The training shell keeps its sidebar layout, restyled to the palette. */
.app-shell { height: 100vh; overflow: hidden; background: var(--paper); }
.app-shell > .row { height: 100%; }
.main-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
}
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; }

/* -------------------------------------------------------------------------
   15  Flash messages
   ---------------------------------------------------------------------- */

.flash-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.flash {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(36, 37, 42, 0.1);
  padding: 0.9rem 1rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.flash--alert {
  border-left-color: var(--danger);
}
.flash.is-leaving {
  opacity: 0;
  transform: translateY(4px);
}

.flash__text {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.flash--alert .flash__text { color: var(--danger); }

.flash__close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.flash__close:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   16  Plans
   --------------------------------------------------------------------------
   Pricing is one of the few places a bounded panel earns its keep: the
   reader is comparing two things side by side. Kept to a hairline and a
   single accent border on the featured plan.
   ---------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 52rem;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.plan--featured { border-color: var(--accent); }

.plan__name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.plan__price {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin: 0.75rem 0 0.15rem;
}
.plan__term {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}
.plan__desc {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0.6rem 0 0;
}

.plan__features {
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.6rem;
}
.plan__features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}
.plan__features li.is-excluded { color: var(--muted); }
.plan__features li.is-excluded::before {
  border-color: var(--rule-strong);
  background: var(--rule);
}

.plan__action { margin-top: auto; }
.plan__action .btn { width: 100%; }

.plan__current {
  margin-top: auto;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.78rem 1rem;
}

/* Curriculum module lists. */
.module__list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.module__list li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.module__list li + li { margin-top: 0.3rem; }
.module__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 4px;
  height: 1px;
  background: var(--rule-strong);
}

@media (max-width: 720px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   17  Training sidebar
   --------------------------------------------------------------------------
   The signed-in training area keeps its sidebar layout. Same tokens, same
   type — no gradient, no persistent call to action.
   ---------------------------------------------------------------------- */

.side {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0;
  z-index: 1030;
}

.side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--space-gutter);
}

.side__brand {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.side__brand:hover { color: var(--ink); text-decoration: none; }

.side__toggle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

.side__nav { padding: 0.5rem 0 1rem; }

.side__group {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1rem var(--space-gutter) 0.4rem;
  margin: 0;
}

.side__link {
  display: block;
  font-size: 0.93rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.55rem var(--space-gutter);
  border-left: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.side__link:hover {
  background: var(--accent-tint);
  color: var(--ink);
  text-decoration: none;
}
.side__link[aria-current="page"] {
  color: var(--accent-deep);
  border-left-color: var(--accent);
  background: var(--accent-tint);
}

.side__foot {
  border-top: 1px solid var(--rule);
  padding: 1.1rem var(--space-gutter);
  margin-top: auto;
}

.side__identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  min-width: 0;
}
.side__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: 0.85rem;
  font-weight: 600;
}
.side__email {
  min-width: 0;
  font-size: 0.83rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side__plan {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.side__actions { display: grid; gap: 0.4rem; }
.side__action {
  font-size: 0.85rem;
  color: var(--ink-2);
  text-decoration: none;
}
.side__action:hover { color: var(--accent-deep); }
.side__signout {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.side__signout:hover { color: var(--danger); }

.side__legal {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.side__legal a { color: var(--muted); text-decoration: none; }
.side__legal a:hover { color: var(--ink-2); text-decoration: underline; }

@media (min-width: 768px) {
  .side {
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .side__head { padding-top: 1.75rem; }
  .side__nav { flex: 1 0 auto; }
}

/* -------------------------------------------------------------------------
   18  Training content
   --------------------------------------------------------------------------
   Course modules, subjects and resources. Same rules and spacing as the
   public pages; the only additions are progress indication and the
   Bootstrap accordion used to nest subjects inside a module.
   ---------------------------------------------------------------------- */

/* Main column of the sidebar layout. */
.learn-main {
  background: var(--paper);
  min-height: 100vh;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.learn-main > .wrap { max-width: 68rem; }

.progress-track {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

/* A module: heading block on the left, its subjects on the right. */
.module {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.module:first-child { border-top: 1px solid var(--rule); }

.module__index {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.module__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1rem;
}

/* Resource rows inside a subject. */
.resource-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.resource-row:last-of-type { border-bottom: 0; }
.resource-row__link {
  font-size: 0.93rem;
  color: var(--ink-2);
  text-decoration: none;
}
.resource-row__link:hover { color: var(--accent-deep); text-decoration: underline; }
.resource-row__state {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.resource-row__quiz {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Bootstrap accordion, restyled. */
.accordion { --bs-accordion-border-color: var(--rule); }
.accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
}
.accordion-button {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  padding: 0.95rem 0;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  color: var(--accent-deep);
  background: transparent;
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.accordion-button::after {
  width: 0.85rem;
  height: 0.85rem;
  background-size: 0.85rem;
}
.accordion-body { padding: 0 0 1.25rem; }

.subject-index {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

@media (max-width: 900px) {
  .module { grid-template-columns: minmax(0, 1fr); }
}

/* Small shared helpers used by the training templates, so those stay free
   of inline styles (progress-fill width is genuinely dynamic and remains
   inline). */
.progress-wrap { max-width: 18rem; }
.side__identity-text { min-width: 0; }

/* A row of actions closing a page, separated by a rule. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
}

/* Bootstrap modal, brought onto the design system. */
.modal-content {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.modal-header { border-bottom: 1px solid var(--rule); }
.modal-body { padding: 1.5rem; }

/* -------------------------------------------------------------------------
   19  Brutalist layer
   --------------------------------------------------------------------------
   Structure made visible: heavy ink lines, square corners, hard offset
   shadows and mono labels, laid over the components above. Body text keeps
   the calm sans and serif so long reading stays comfortable.

   Some templates still carry page-level <style> blocks, which load after
   this file; selectors prefixed with `body` outrank those.
   ---------------------------------------------------------------------- */

/* Bootstrap: square everything. */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
  --bs-body-bg: var(--paper);
}
body .rounded,
body [class*="rounded-"] { border-radius: 0 !important; }

::selection { background: var(--accent); color: #fff; }

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

/* ── Type ─────────────────────────────────────────────────────────────── */

h1, .h1 { letter-spacing: -0.025em; }

/* Eyebrows become stamped labels. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--ink);
  padding: 0.3rem 0.6rem;
}

.meta,
.badge {
  font-family: var(--font-mono);
}
.badge {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--accent-tint);
  color: var(--ink);
}

/* ── Layout ───────────────────────────────────────────────────────────── */

/* Page header on a faint drafting grid, closed by an ink rule. */
.page-head {
  border-bottom: var(--line);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.page-head__title {
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.75rem);
  line-height: 1.05;
}
.page-head__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 8px;
  margin-top: 1.1rem;
  background: var(--accent);
  border: 2px solid var(--ink);
}
.page-head__lead { color: var(--ink-2); }

.section--alt {
  background: var(--paper-alt);
  border-block: var(--line);
}
.section--ruled { border-top: var(--line); }

/* A section heading carries a short accent bar beneath it. */
.section__head h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin-top: 0.75rem;
  background: var(--accent);
}
.section__head--center h2::after { margin-inline: auto; }

/* ── Buttons & links ──────────────────────────────────────────────────── */

.btn {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn--primary,
.btn--primary:hover {
  border-color: var(--ink);
}
.btn--ghost {
  background: var(--surface);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--accent-tint);
  border-color: var(--ink);
  color: var(--ink);
}

.link-more {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 3px solid var(--accent);
  padding-bottom: 2px;
}
.link-more::after { content: " \2192"; }
.link-more:hover {
  color: #fff;
  background: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── Navigation ───────────────────────────────────────────────────────── */

.nav {
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: var(--line);
}
.nav__brand {
  border: 2px solid var(--ink);
  padding: 0.25rem 0.6rem;
  box-shadow: var(--shadow-hard-sm);
  background: var(--surface);
}
.nav__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.35rem 0.5rem;
  border-bottom: 0;
}
.nav__link:hover {
  background: var(--ink);
  color: #fff;
}
.nav__link[aria-current="page"] {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 860px) {
  .nav__toggle {
    font-family: var(--font-mono);
    text-transform: uppercase;
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-hard-sm);
  }
  .nav__menu {
    border: var(--line);
    box-shadow: var(--shadow-hard);
  }
  .nav__link { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--ink); }
  .nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--ink); }
}

/* ── Footer: an ink slab ──────────────────────────────────────────────── */

.footer {
  background: var(--ink);
  color: #c9cbcf;
  border-top: 6px solid var(--accent);
}
.footer__brand,
.footer__brand:hover { color: #fff; }
.footer__nav a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.footer__nav a:hover { color: #fff; background: var(--accent); text-decoration: none; }
.footer__legal {
  border-top: 1px solid #4a4c54;
  color: #a4a6ac;
}
.footer a:not(.footer__brand) { color: #fff; }
.footer p,
.footer .meta,
.footer .fineprint { color: #c9cbcf; }

/* ── Entries, notes, cases ────────────────────────────────────────────── */

.entries { border-top: var(--line); }
.entry { border-bottom: var(--line); }
.entry__kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent-deep);
}
.entry__price {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  border: 2px solid var(--ink);
  background: var(--accent-tint);
  padding: 0.2rem 0.5rem;
  margin-top: 0.5rem;
}
.entry--link:hover { background: var(--accent-tint); }

/* Tags read as stamped chips. */
.tags { gap: 0.45rem; }
.tags li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 0.15rem 0.45rem;
  background: var(--surface);
}
.tags li + li::before { content: none; }

/* Notes become hard-shadowed blocks. */
.notes { gap: 1.5rem; }
.note {
  background: var(--surface);
  border: var(--line);
  box-shadow: var(--shadow-hard);
  padding: 1.5rem;
}
.note__index {
  display: inline-block;
  font-family: var(--font-mono);
  color: #fff;
  background: var(--accent);
  padding: 0.1rem 0.4rem;
}
.note__title {
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
}

.casework { border-top: var(--line); }
.case { border-bottom: var(--line); }
.case__frame {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-deep);
}
.case__outcome {
  border-left: 6px solid var(--accent);
  background: var(--paper-alt);
  padding: 0.75rem 1rem;
  color: var(--ink-2);
}

/* ── Lists ────────────────────────────────────────────────────────────── */

.deflist > div { border-bottom: 1px solid var(--ink); }
.deflist > div:first-child { border-top: var(--line); }
.deflist > div:last-child { border-bottom: var(--line); }
.deflist dt {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ticks li::before,
.plan__features li::before {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  outline: 2px solid var(--ink);
}
.plan__features li.is-excluded::before { background: var(--rule); outline-color: var(--rule-strong); }
.module__list li::before { height: 2px; background: var(--ink); }

/* ── Forms ────────────────────────────────────────────────────────────── */

.form {
  border: var(--line);
  box-shadow: var(--shadow-hard);
}
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.input,
.select,
.textarea,
body .form-control,
body .form-select,
body .form-control-modern,
body .form-control-swiss {
  background-color: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.input:focus,
.select:focus,
.textarea:focus,
body .form-control:focus,
body .form-select:focus,
body .form-control-modern:focus,
body .form-control-swiss:focus {
  border-color: var(--ink);
  background-color: var(--surface);
  box-shadow: 4px 4px 0 var(--accent);
  transform: none;
}
.errors {
  border: 2px solid var(--danger);
  border-left-width: 8px;
}
body .error-block {
  border: 2px solid var(--danger);
  border-left-width: 8px;
  border-radius: 0;
}

/* Page-level buttons on the auth and account templates. */
body .btn-primary-swiss,
body .btn-swiss-save,
body .btn-swiss-submit,
body .btn-swiss,
body .sidebar-btn {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
body .btn-primary-swiss:hover,
body .btn-swiss-save:hover,
body .btn-swiss-submit:hover,
body .btn-swiss:hover,
body .sidebar-btn:hover {
  background: var(--accent-deep) !important;
  border-color: var(--ink) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
body .btn-swiss-outline {
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink);
}
body .custom-checkbox { border-radius: 0; }

/* Auth pages: the side panel becomes a ruled, gridded slab. */
body .visual-sidebar {
  background-color: var(--paper-alt);
  border-left: var(--line);
  color: var(--ink);
}
body .visual-sidebar::before { content: none; }
body .visual-sidebar::after {
  background-image:
    linear-gradient(rgba(36, 37, 42, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 37, 42, 0.07) 1px, transparent 1px);
  -webkit-mask-image: none;
  mask-image: none;
}
body .visual-content h2 { color: var(--ink); }
body .glass-tag {
  font-family: var(--font-mono);
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 0;
}
body .feature-list-item {
  background: var(--surface);
  border: var(--line);
  box-shadow: var(--shadow-hard-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}

/* ── Disclosure, prose, tables ────────────────────────────────────────── */

.faq { border-top: var(--line); }
.faq__item { border-bottom: var(--line); }
.faq__item[open] { background: var(--paper-alt); }
.faq__q { padding-inline: 0.75rem; }
.faq__a { padding-inline: 0.75rem; }
.faq__sign::before { height: 3px; inset: 4px 0 4px 0; background: var(--ink); }
.faq__sign::after { width: 3px; inset: 0 4px 0 4px; background: var(--ink); }

.prose h2 { border-top: var(--line); }
.prose blockquote {
  border-left: 6px solid var(--accent);
  background: var(--paper-alt);
  padding: 1rem 1.25rem;
  color: var(--ink-2);
}
.prose code {
  font-family: var(--font-mono);
  border: 1px solid var(--ink);
  background: var(--paper-alt);
}
.prose pre {
  border: var(--line);
  box-shadow: var(--shadow-hard-sm);
}
.prose pre code { border: 0; }
.prose table,
.table { border: var(--line); }
.prose th,
.prose td,
.table th,
.table td { border-bottom: 1px solid var(--ink); }
.prose th,
.table th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ink);
}

/* ── Flash, plans, modals, cards ──────────────────────────────────────── */

.flash {
  border: var(--line);
  border-left: 8px solid var(--accent);
  box-shadow: var(--shadow-hard);
}
.flash--alert { border-left-color: var(--danger); }

.plan {
  border: var(--line);
  box-shadow: var(--shadow-hard);
}
.plan--featured {
  border-color: var(--ink);
  box-shadow: var(--shadow-hard-accent);
}
.plan__features { border-top: var(--line); }
.plan__current { border: 2px dashed var(--ink); font-family: var(--font-mono); }

.modal-content {
  border: var(--line);
  box-shadow: 10px 10px 0 var(--ink);
}
.modal-header,
.modal-footer { border-color: var(--ink) !important; }

body .card {
  border: var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-hard);
}

/* ── Training area ────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .side { border-right: var(--line); }
}
.side { border-bottom: var(--line); }
.side__brand {
  border: 2px solid var(--ink);
  padding: 0.2rem 0.55rem;
  box-shadow: var(--shadow-hard-sm);
}
.side__group {
  font-family: var(--font-mono);
  color: var(--ink);
}
.side__link { border-left-width: 4px; }
.side__link[aria-current="page"] {
  background: var(--ink);
  color: #fff;
  border-left-color: var(--accent);
}
.side__foot { border-top: var(--line); }
.side__avatar {
  border-radius: 0;
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
}
.side__toggle {
  font-family: var(--font-mono);
  text-transform: uppercase;
  border: 2px solid var(--ink);
}

.module { border-bottom: var(--line); }
.module:first-child { border-top: var(--line); }
.module__index {
  display: inline-block;
  font-family: var(--font-mono);
  color: #fff;
  background: var(--ink);
  padding: 0.15rem 0.45rem;
}
.subject-index { font-family: var(--font-mono); }
.resource-row { border-bottom: 1px solid var(--ink); }

/* Progress: a ruled box filled in accent. */
.progress-track {
  height: 14px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 0;
}
.progress-fill {
  border-radius: 0;
  border-right: 2px solid var(--ink);
}
.progress-label { font-family: var(--font-mono); }

.accordion-item { border-bottom: var(--line); }
.actions { border-top: var(--line); }

/* -------------------------------------------------------------------------
   20  Compliance resource grid
   Filter chips over a grid of document cards (compliance/index).
   ---------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard-sm);
}
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.chip--quiet { border-width: 1px; }
.chip__count {
  margin-left: 0.3rem;
  opacity: 0.6;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.doc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--line);
  box-shadow: var(--shadow-hard-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.doc-card[hidden] { display: none; }
.doc-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
  color: inherit;
  text-decoration: none;
}
.doc-card:hover .doc-card__title { color: var(--accent-deep); }
.doc-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Ink strip: topic on the left, access on the right. */
.doc-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--ink);
  padding: 0.5rem 1rem;
}
.doc-card__kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-card__access {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  padding: 0.1rem 0.45rem;
}
.doc-card__access--premium {
  color: var(--accent-deep);
  background: var(--accent-tint);
}

.doc-card__body {
  flex: 1;
  padding: 1.25rem 1.25rem 0;
}
.doc-card__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.doc-card__summary {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.doc-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 0.65rem 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.doc-card__cta {
  font-weight: 700;
  color: var(--accent-deep);
}
.doc-card__cta::after { content: " \2192"; }

@media (max-width: 960px) {
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-bar { align-items: flex-start; }
}