/* learn.wajd.co.uk. Copyright WAJD Group. Built by WAJD AI.

   A deliberately different look from the family portal. This is a professional
   register: flat surfaces, hairline rules, a serif for headings to carry authority,
   and colour used only for actions and for status. Ground rule 4002.

   No inline styles anywhere, because the CSP forbids them. Anything dynamic, such as a
   progress width, uses a utility class from the scale at the bottom of this file. */

:root {
  --gold: #a8801a;
  --gold-lift: #c9a227;
  --ink: #1b1e25;
  --ink-soft: #4b515e;
  --muted: #6a7180;
  --paper: #f7f6f3;
  --surface: #ffffff;
  --line: #ddd9d1;
  --line-strong: #c6c1b6;
  --field: #ffffff;
  --good: #2f6d46;
  --good-bg: #e8f1eb;
  --warn: #8a5a1c;
  --warn-bg: #f6efe3;
  --bad: #8f3232;
  --bad-bg: #f6eaea;
  --info-bg: #ecf0f6;
  --info: #2f4a72;
  --focus: #1b64c8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gold: #d4ac3e;
    --gold-lift: #e6c25c;
    --ink: #e9e7e2;
    --ink-soft: #b6b8bf;
    --muted: #8f95a1;
    --paper: #14161c;
    --surface: #1b1e25;
    --line: #2f333d;
    --line-strong: #444a57;
    --field: #12141a;
    --good: #7cbf95;
    --good-bg: #1a2a22;
    --warn: #d9a35f;
    --warn-bg: #2a2318;
    --bad: #d98686;
    --bad-bg: #2a1a1a;
    --info-bg: #1a1f2b;
    --info: #93b0da;
    --focus: #7aa9f0;
  }
}

:root[data-theme="dark"] {
  --gold: #d4ac3e; --gold-lift: #e6c25c; --ink: #e9e7e2; --ink-soft: #b6b8bf;
  --muted: #8f95a1; --paper: #14161c; --surface: #1b1e25; --line: #2f333d;
  --line-strong: #444a57; --field: #12141a; --good: #7cbf95; --good-bg: #1a2a22;
  --warn: #d9a35f; --warn-bg: #2a2318; --bad: #d98686; --bad-bg: #2a1a1a;
  --info-bg: #1a1f2b; --info: #93b0da; --focus: #7aa9f0;
}
:root[data-theme="light"] {
  --gold: #a8801a; --gold-lift: #c9a227; --ink: #1b1e25; --ink-soft: #4b515e;
  --muted: #6a7180; --paper: #f7f6f3; --surface: #ffffff; --line: #ddd9d1;
  --line-strong: #c6c1b6; --field: #ffffff; --good: #2f6d46; --good-bg: #e8f1eb;
  --warn: #8a5a1c; --warn-bg: #f6efe3; --bad: #8f3232; --bad-bg: #f6eaea;
  --info-bg: #ecf0f6; --info: #2f4a72; --focus: #1b64c8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.65 var(--sans);
}
img { max-width: 100%; height: auto; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-lift); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 0 0 .5rem; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 .6rem; }
h3 { font-size: 1.14rem; margin: 0 0 .4rem; }
p { margin: 0 0 .9rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-size: .93rem; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: .04em; }
.center { text-align: center; }
.empty { color: var(--muted); padding: 2rem 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--surface);
  border: 1px solid var(--line-strong); padding: .6rem 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap.narrow { max-width: 760px; }
.band { padding: 3rem 0; }
.band.alt { background: var(--surface); border-block: 1px solid var(--line); }
.band.closer { background: var(--surface); border-top: 1px solid var(--line); padding: 3.5rem 0; }

/* Masthead */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.masthead-in { display: flex; align-items: center; gap: 1rem; min-height: 66px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.brand-text strong { font-family: var(--serif); letter-spacing: .02em; }
.nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; flex-wrap: wrap; }
.nav > a { color: var(--ink-soft); text-decoration: none; padding: .45rem .6rem; border-radius: 4px; font-size: .95rem; }
.nav > a:hover { color: var(--ink); background: var(--paper); }
.nav .nav-me { color: var(--ink); font-weight: 600; }
.nav-form { margin: 0; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 4px;
  width: 42px; height: 38px; cursor: pointer; padding: 9px 10px; }
.nav-bar { display: block; height: 2px; background: var(--ink); margin: 3px 0; }
.theme-toggle { background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--muted);
  cursor: pointer; padding: .35rem .55rem; font: 600 .8rem var(--sans); }

@media (max-width: 860px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .8rem; }
  .nav.open { display: flex; }
  .nav > a, .nav .btn { text-align: left; }
}

/* Buttons: one system. Gold pill primary, quiet outline secondary. */
.btn, .btn-quiet {
  display: inline-block; border-radius: 999px; padding: .62rem 1.3rem; font: 600 .97rem var(--sans);
  cursor: pointer; text-decoration: none; border: 1px solid transparent; text-align: center;
}
.btn { background: var(--gold); color: #1b1608; border-color: var(--gold); }
.btn:hover { background: var(--gold-lift); border-color: var(--gold-lift); color: #1b1608; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn-lg { padding: .8rem 1.7rem; font-size: 1.02rem; }
.btn-sm { padding: .38rem .85rem; font-size: .88rem; }
.cta-row { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.cta-row.center { justify-content: center; }
.go { font-weight: 600; text-decoration: none; }
.go::after { content: " \2192"; }

/* Visual hero, artwork and reveal ---------------------------------------------------
   The site is a career site for care and nursing staff, so the register stays
   professional: illustration rather than cartoon, motion that settles rather than
   loops. Nothing animates forever and everything stops under prefers-reduced-motion. */
.hero-v { padding: 3.2rem 0 3rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--paper)); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; }
.hero-copy h1 { max-width: 15ch; }
.hero-art img { width: 100%; height: auto; display: block; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-art { order: -1; max-width: 460px; }
}

.trust { padding: 1.4rem 0; background: var(--ink); border-block: 0; }
.trust-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.trust-row li { display: flex; flex-direction: column; }
.trust-row strong { color: var(--gold-lift); font-size: .95rem; letter-spacing: .02em; }
.trust-row span { color: #cfd2d8; font-size: .88rem; }
[data-theme="light"] .trust-row span { color: #cfd2d8; }

.cover-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.cover-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; transition: transform .22s ease, border-color .22s ease; }
.cover-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.cover-card a { text-decoration: none; color: var(--ink); display: block; }
.cover-card .cover { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line); }
.cover-body { padding: 1rem 1.2rem 1.2rem; }
.cover-body h3 { margin: .1rem 0 .5rem; }
.cover-card:hover h3 { color: var(--gold); }

.method-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.method { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  gap: .1rem .8rem; align-items: start; background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 1rem 1.1rem; }
.method-n { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--gold); color: #1b1608; font-weight: 700; font-size: .95rem; }
.method strong { font-size: .98rem; }
.method span:not(.method-n) { color: var(--muted); font-size: .9rem; }

/* Reveal on scroll. One transition, once, then the class is removed from play. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.shown { opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease; }
html:not([data-reveal="on"]) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.shown { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cover-card:hover { transform: none; }
}

/* Hero and page heads */
.hero { padding: 3.6rem 0 2.6rem; border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 20ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; color: var(--gold); margin: 0 0 .5rem; }
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.page-head { padding: 2.6rem 0 1.6rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.page-head.tight { padding: 1.6rem 0 1.1rem; }
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: .7rem; }
.crumbs a { color: var(--muted); }
.section-h { margin-bottom: 1.2rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line-strong); }

.stat-row { list-style: none; display: flex; gap: 2rem; padding: 0; margin: 2rem 0 0; flex-wrap: wrap; }
.stat-row li { display: flex; flex-direction: column; }
.stat-row strong { font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
.stat-row span { color: var(--muted); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; }
.stat-row.small strong { font-size: 1.45rem; }

/* Cards: flat, hairline, no shadow */
.card-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-grid.three { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-grid.two { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.3rem 1.4rem; }
.card.flat { background: transparent; }
.band.alt .card.flat { background: var(--paper); }
.card h2, .card h3 { margin-bottom: .5rem; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--gold); }
.tag { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 0 0 .45rem; }
.facts { list-style: none; padding: 0; margin: .8rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.facts li { font-size: .8rem; border: 1px solid var(--line); border-radius: 3px; padding: .15rem .5rem; color: var(--ink-soft); }

.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: 1.2rem; }
.chip { font-size: .88rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .32rem .85rem;
  text-decoration: none; color: var(--ink-soft); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.route-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.route { display: block; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px;
  padding: 1.2rem 1.3rem; text-decoration: none; color: var(--ink); background: var(--surface); }
.route:hover { border-left-color: var(--gold-lift); }
.route p { color: var(--muted); font-size: .93rem; }

/* Split layout */
.split { display: grid; gap: 2.2rem; grid-template-columns: minmax(0, 1fr) 320px; padding-top: 2.4rem; padding-bottom: 3rem; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.col-side .card { margin-bottom: 1.1rem; }
.col-side h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--sans); }

.prose { max-width: 68ch; margin-bottom: 2.4rem; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.ticks.small li { font-size: .93rem; }
.plain { list-style: none; padding: 0; }
.plain li { margin-bottom: .6rem; font-size: .94rem; }
.plain.numbered { list-style: decimal; padding-left: 1.2rem; }

/* Modules list */
.modules { list-style: none; padding: 0; margin: 0 0 2.4rem; counter-reset: none; }
.modules li { border: 1px solid var(--line); border-radius: 6px; margin-bottom: .55rem; background: var(--surface); }
.modules a { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 1.1rem; text-decoration: none; color: var(--ink); }
.modules a:hover { border-color: var(--gold); }
.mod-n { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); min-width: 1.6rem; }
.mod-body { display: flex; flex-direction: column; gap: .15rem; }
.mod-body .muted { font-size: .85rem; }

/* Audio player and dialogue */
.player { border: 1px solid var(--line-strong); border-radius: 6px; padding: 1.2rem 1.3rem; background: var(--surface); margin-bottom: 1.6rem; }
.player-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.player-head h2 { margin-bottom: .2rem; }
.player-controls { display: flex; gap: .5rem; align-items: center; }
.speed select { font: inherit; font-size: .9rem; padding: .45rem .5rem; border: 1px solid var(--line-strong);
  border-radius: 4px; background: var(--field); color: var(--ink); }
.player-note { font-size: .85rem; color: var(--muted); margin: .9rem 0 0; }
.dialogue { margin-bottom: 2.4rem; }
.turn { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: .55rem 0;
  border-bottom: 1px solid var(--line); margin: 0; }
.turn .who { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); padding-top: .2rem; }
.turn-educator .who { color: var(--gold); }
.turn .line { max-width: 62ch; }
.turn.speaking { background: var(--info-bg); }
.turn.speaking .line { font-weight: 500; }
@media (max-width: 620px) {
  .turn { grid-template-columns: 1fr; gap: .15rem; }
}

/* Recording script */
.script-module { border-top: 1px solid var(--line); }
.script { border-left: 2px solid var(--line); padding-left: 1.1rem; margin: 1rem 0 1.6rem; }
.script-turn { display: grid; grid-template-columns: 90px 60px minmax(0, 1fr); gap: .9rem;
  padding: .5rem 0; margin: 0; align-items: baseline; }
.script-who { font-size: .78rem; font-weight: 700; letter-spacing: .07em; color: var(--ink); }
.script-at { font-size: .78rem; color: var(--muted); }
.script-line { max-width: 62ch; }
.cue { background: var(--warn-bg); border-left: 3px solid var(--warn); padding: .5rem .8rem;
  margin: 1rem 0 .6rem -1.1rem; font-size: .9rem; border-radius: 0 4px 4px 0; }
.cue-n { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700;
  color: var(--warn); margin-right: .5rem; }
@media (max-width: 700px) {
  .script-turn { grid-template-columns: 1fr; gap: .1rem; }
  .script-at { display: none; }
}

/* Callouts */
.callout { border-left: 3px solid var(--line-strong); padding: .9rem 1.1rem; margin: 1.2rem 0; border-radius: 0 4px 4px 0; background: var(--info-bg); }
.callout-kind { text-transform: uppercase; font-size: .72rem; letter-spacing: .09em; font-weight: 700; margin: 0 0 .3rem; color: var(--info); }
.callout p:last-child { margin-bottom: 0; }
.callout-key { border-left-color: var(--info); }
.callout-law { border-left-color: var(--info); background: var(--info-bg); }
.callout-practice { border-left-color: var(--good); background: var(--good-bg); }
.callout-practice .callout-kind { color: var(--good); }
.callout-warning { border-left-color: var(--bad); background: var(--bad-bg); }
.callout-warning .callout-kind { color: var(--bad); }

/* Quiz */
.quiz { margin-bottom: 2rem; }
.q { border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.2rem; margin: 0 0 1rem; background: var(--surface); }
.q legend { font-weight: 600; padding: 0 .3rem; max-width: 62ch; }
.qn { color: var(--gold); font-family: var(--serif); margin-right: .3rem; }
.opt { display: flex; gap: .65rem; align-items: flex-start; padding: .45rem .3rem; border-radius: 4px; cursor: pointer; }
.opt:hover { background: var(--paper); }
.opt input { margin-top: .35rem; flex: none; }
.q-feedback { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 4px; font-size: .93rem; }
.q-feedback.right { background: var(--good-bg); color: var(--good); }
.q-feedback.wrong { background: var(--bad-bg); color: var(--bad); }
.result { border: 1px solid var(--line-strong); border-radius: 6px; padding: 1.4rem; margin-bottom: 1.2rem; }
.result.pass { border-color: var(--good); background: var(--good-bg); }
.result.fail { border-color: var(--warn); background: var(--warn-bg); }
.result h3 { margin-bottom: .3rem; }
.form-msg, .form-error { padding: .7rem .9rem; border-radius: 4px; background: var(--bad-bg); color: var(--bad); font-size: .93rem; }
.form-msg.ok { background: var(--good-bg); color: var(--good); }

.module-nav { display: flex; gap: .7rem; justify-content: space-between; align-items: center;
  padding-top: 1.4rem; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* Progress */
.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin: .7rem 0; }
.progress-fill { height: 100%; background: var(--gold); border-radius: 999px; }
.mod-pills { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; gap: .3rem; flex-wrap: wrap; }
.pill { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; font-size: .82rem;
  text-decoration: none; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.pill-passed { background: var(--good); border-color: var(--good); color: var(--surface); }
.pill-studied, .pill-opened { border-color: var(--gold); color: var(--gold); }

/* Status and accreditation badges: the only place colour carries meaning */
.acc { display: inline-block; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; padding: .18rem .55rem; border-radius: 3px; margin: 0 .3rem .3rem 0; }
.acc-held { background: var(--good-bg); color: var(--good); }
.acc-applied { background: var(--info-bg); color: var(--info); }
.acc-aligned { background: var(--warn-bg); color: var(--warn); }
.acc-planned { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.acc-revoked { background: var(--bad-bg); color: var(--bad); }
.comp-complete { background: var(--good-bg); color: var(--good); }
.comp-due_soon { background: var(--warn-bg); color: var(--warn); }
.comp-expired { background: var(--bad-bg); color: var(--bad); }
.comp-not_started { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }

.acc-block { padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.acc-block:last-of-type { border-bottom: 0; }
.status { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.status-completed { color: var(--good); }
.status-active { color: var(--gold); }
.note { background: var(--info-bg); border-left: 3px solid var(--info); padding: .7rem .9rem; font-size: .9rem; border-radius: 0 4px 4px 0; }
.status-key { margin: 0; }
.status-key dt { margin-top: .8rem; }
.status-key dd { margin: .3rem 0 0; color: var(--ink-soft); }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field > span:first-child { font-weight: 600; font-size: .93rem; }
.field input, .field textarea, .field select {
  font: inherit; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--field); color: var(--ink); width: 100%;
}
.field .hint { font-size: .85rem; color: var(--muted); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.check input { margin-top: .3rem; }
.themes { border: 1px solid var(--line); border-radius: 4px; padding: .8rem; display: flex; flex-direction: column; gap: .45rem; }
.themes legend { font-size: .9rem; font-weight: 600; padding: 0 .3rem; }
.hp { position: absolute; left: -9999px; }
.auth-card { max-width: 480px; margin: 0 auto; }
.swap { margin-top: 1.2rem; }
.small-print { font-size: .86rem; }
.verify-form { display: flex; gap: .7rem; align-items: flex-end; margin-top: 1.6rem; flex-wrap: wrap; }
.verify-form .field { flex: 1 1 260px; }
.verify-form input { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* Verify verdicts */
.verdict { border: 1px solid var(--line-strong); border-left-width: 4px; border-radius: 0 6px 6px 0; padding: 1.5rem 1.6rem; }
.verdict-label { text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; font-weight: 700; margin: 0 0 .5rem; }
.verdict-valid { border-left-color: var(--good); background: var(--good-bg); }
.verdict-valid .verdict-label { color: var(--good); }
.verdict-revoked { border-left-color: var(--bad); background: var(--bad-bg); }
.verdict-revoked .verdict-label { color: var(--bad); }
.verdict-none { border-left-color: var(--warn); background: var(--warn-bg); }
.verdict-none .verdict-label { color: var(--warn); }
.verdict-facts { display: grid; grid-template-columns: 150px 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.verdict-facts dt { font-weight: 600; font-size: .9rem; }
.verdict-facts dd { margin: 0; }

/* Certificates */
.certificate { border: 1px solid var(--line-strong); border-top: 4px solid var(--gold); border-radius: 4px;
  padding: 1.6rem; background: var(--surface); }
.certificate.revoked { border-top-color: var(--bad); opacity: .8; }
.cert-issuer { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: var(--gold); margin: 0 0 .8rem; }
.cert-name { font-family: var(--serif); font-size: 1.25rem; margin: .3rem 0 .8rem; }
.cert-facts { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .9rem; color: var(--ink-soft); }
.cert-code { font-size: 1.05rem; letter-spacing: .12em; padding: .5rem .7rem; border: 1px dashed var(--line-strong); display: inline-block; border-radius: 4px; }

/* Data table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table.data { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .93rem; background: var(--surface); }
table.data th, table.data td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
table.data tr:last-child td { border-bottom: 0; }
.totals { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 2rem; }
.total { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; background: var(--surface); }
.total strong { display: block; font-family: var(--serif); font-size: 1.7rem; }
.total span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.big-figure { font-family: var(--serif); font-size: 2rem; margin: 0; }
.big-figure span { font-family: var(--sans); font-size: .9rem; color: var(--muted); }

.enrol-list .enrol { margin-bottom: 1rem; }
.enrol-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.outcomes { margin-bottom: 1.6rem; }

/* FAQ */
.faq { border-bottom: 1px solid var(--line); padding: .85rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: .7rem 0 0; color: var(--ink-soft); max-width: 68ch; }

/* Footer */
.foot { background: var(--surface); border-top: 1px solid var(--line); padding: 2.8rem 0 1.4rem; margin-top: 2rem; }
.foot-in { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 800px) { .foot-in { grid-template-columns: 1fr 1fr; } }
.foot h2 { font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .4rem; font-size: .93rem; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot-brand { font-size: 1.05rem; }
.foot-brand strong { font-family: var(--serif); }
.foot-legal { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem; color: var(--muted); }
.foot-legal p { margin-bottom: .4rem; }

/* Print: a certificate should print cleanly with no browser furniture. */
@media print {
  .masthead, .foot, .cta-row, .chips, .player, .quiz, .module-nav { display: none !important; }
  body { background: #fff; color: #000; }
  .certificate { border: 2px solid #000; page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Width utilities. Dynamic widths cannot use a style attribute under our CSP, so the
   templates round to the nearest 5 and pick a class from this scale. */
.w-0{width:0}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}
.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}
.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}
.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}
.w-100{width:100%}

/* ---- price, photography and app sized controls ------------------------------------
   The price block never shows a struck through price of our own. A permanent discount
   against a figure we never charged is the sector practice the about page promises not
   to copy, so the comparison is always attributed to the wider market. */
.price-line { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-top: .7rem; }
.price-free { font-weight: 700; font-size: 1.05rem; color: var(--gold, #b8892b); letter-spacing: .01em; }
.price-market { font-size: .82rem; color: var(--muted); }
.price-note { margin-top: 1rem; font-size: .92rem; color: var(--muted); max-width: 60ch; }
.price-note strong { color: var(--ink); }

/* Photographs are cropped by the browser rather than by us, so one file serves both the
   3:2 card and any taller slot without a second download. */
img.cover { object-fit: cover; background: var(--surface-2, #f2f2f0); }

/* Touch first sizing. This interface is intended to survive being wrapped as an app, so
   every interactive target clears the 44px minimum on a phone, and the nav does not
   depend on hover. */
@media (max-width: 720px) {
  .btn, .btn-quiet, .chip, .nav a, .nav button { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  .chip { padding-inline: 1rem; }
  .cover-card a { -webkit-tap-highlight-color: transparent; }
  .cover-card:active { transform: scale(.995); }
  .price-line { margin-top: .55rem; }
}