/* The platform's one stylesheet: public pages, registration, the parent's space, help and
   questionnaires. The SFSC palette; the bright colours are accents only, since none of
   them reaches 4.5:1 for text on white (13-public-pages). Heebo, self-hosted (OFL). */

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/heebo-latin-ext-wght-normal.e1465e20c5af.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/heebo-latin-wght-normal.480b1d24f2aa.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #07294d;        /* navy: text, buttons */
  --quiet: #41518c;      /* slate: secondary text, links */
  --purple: #6c6baf;     /* Stronger Relationships; text only at 4.8:1 */
  --green: #89b702;      /* SFSC; accent only */
  --yellow: #ffc600;     /* accent only; text on navy */
  --orange: #f58f29;     /* accent only */
  --line: #e3e5ee;
  --tint: #f6f7fb;
  --tint-green: #f2f7e4;
  --tint-purple: #efeff7;
  --bad: #b3261e;
  --radius: 10px;
  --wrap: 72.5rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 18px/1.55 "Heebo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink); background: #fff;
}
img { max-width: 100%; height: auto; }
a { color: var(--quiet); }
a:hover { color: var(--ink); }
/* Text sizes, each with one job. rem is the browser's 16px, not the 18px body: .85rem (13.6px)
   labels and pills, 1rem (16px) what goes with the text, the body's 18px, 1.2rem (19.2px) small
   and card headings, 1.3rem (20.8px) section headings, 1.85rem (29.6px) page headings, 2.6rem
   (41.6px) on the home page. The quote mark and the "+" are drawings, not text. */
/* Focus: a navy outline, clear but calm; fields show it as a halo round their own border.
   On the dark footer, where navy would not show, it stays yellow. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.site-footer :focus-visible { outline-color: var(--yellow); }
/* Fields keep the same ink ring as everything else: a halo alone was 1.61:1, and boxes and
   round choices showed nothing (the accessibility review, 20 October 2026). */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(65, 81, 140, .3); }
p { margin: 0 0 1rem; }
h1 { font-size: 1.85rem; line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; line-height: 1.25; font-weight: 800; margin: 1.75rem 0 .7rem; }
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 1.25rem 0 .45rem; }
h4 { font-size: 1rem; margin: 1rem 0 .4rem; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1rem; }
li { margin: 0 0 .3rem; }
blockquote { margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--tint-purple); font-weight: 500; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
main iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
main a { overflow-wrap: anywhere; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* The palette stripe across the top, and the small one in the footer. */
.stripe { display: grid; grid-template-columns: repeat(4, 1fr); height: 6px; }
.stripe span:nth-child(1) { background: var(--green); }
.stripe span:nth-child(2) { background: var(--purple); }
.stripe span:nth-child(3) { background: var(--yellow); }
.stripe span:nth-child(4) { background: var(--orange); }

/* ------------------------------------------------------------------ header */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: relative; z-index: 5; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: .8rem; padding-bottom: .8rem; }
.logo { display: flex; min-width: 0; }
.logo img { width: min(200px, 52vw); display: block; }
.page .site-header .wrap { flex-wrap: nowrap; column-gap: .75rem; }  /* logo and Menu share one line on a phone */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.header-link { font-weight: 700; font-size: 1rem; min-height: 44px; display: flex; align-items: center; }

.nav-wide { display: none; }
.nav-wide, .menu nav { font-weight: 500; font-size: 1rem; }
.nav-wide a, .menu nav a { color: var(--ink); text-decoration: none; }
.nav-wide a:hover, .menu nav a:hover { text-decoration: underline; }
.nav-wide a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.nav-wide .sign-in, .menu nav .sign-in { border: 2px solid var(--ink); border-radius: 6px; padding: 0 1rem; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }

/* The phone menu: the button never moves or changes colour; its label and icon say Menu or
   Close, and the links drop down over the page under the header. */
.menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; width: 6.6rem; justify-content: center;
  min-height: 44px; padding: 0 .7rem; border: 2px solid var(--ink); border-radius: 6px; font-weight: 600; font-size: 1rem;
}
.menu .when-open, .menu[open] .when-closed { display: none; }
.menu[open] .when-open { display: inline-flex; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; }
.menu nav {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 24px rgba(7, 41, 77, .12); padding: .4rem 1rem 1.1rem; display: flex; flex-direction: column;
}
.menu nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); }
.menu nav .sign-in { margin-top: .9rem; justify-content: center; border-bottom: 2px solid var(--ink); }
.site-header .menu { flex: 0 0 auto; }

@media (min-width: 62rem) {
  .menu { display: none; }
  .nav-wide { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem; }
  .logo img { width: 270px; }
  .page .site-header .wrap { flex-wrap: wrap; column-gap: 2rem; }
  .site-header .wrap { padding-left: 2rem; padding-right: 2rem; }
}

/* ------------------------------------------------------------------ layouts */
main { flex: 1 0 auto; }
/* Forms and the parent's own pages: one calm column, a panel on larger screens. */
.flow-main { padding: 1.25rem 1rem 3rem; }
.flow-main > .panel { max-width: 36rem; margin: 0 auto; }
@media (min-width: 48rem) {
  body.flow { background: var(--tint); }
  .flow-main { padding: 3rem 2rem 4rem; }
  .flow-main > .panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2.25rem 2.5rem 2.5rem; }
}
/* Public pages: full width, content in a readable measure. */
.page-main .reading { max-width: 46rem; }
.page-main .section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 62rem) {
  h1 { font-size: 2.6rem; }
  .page-main .wrap { padding-left: 2rem; padding-right: 2rem; }
  .page-main .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* ------------------------------------------------------------------ controls */
label { display: block; font-weight: 700; margin: 0 0 .4rem; }
.hint { color: var(--quiet); font-size: 1rem; margin: -.2rem 0 .7rem; }
.hint a { overflow-wrap: anywhere; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--ink); padding: .7rem .8rem; border: 2px solid var(--ink); border-radius: 6px; background: #fff;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2307294d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem;
}
input#postcode { max-width: 14rem; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
textarea { min-height: 8rem; }
/* The browser's own file control, with its button drawn like the site's secondary
   buttons; the chosen file's name still shows beside it, with no JavaScript. */
input[type=file] { display: block; width: 100%; max-width: 100%; font: inherit; color: var(--quiet); font-size: 1rem; margin: 0 0 .4rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 6px;
  min-height: 44px; padding: .45rem 1.1rem; margin-right: .8rem; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--tint); }
input[type=file]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.choice { display: flex; gap: .8rem; align-items: flex-start; border: 2px solid var(--line); border-radius: 8px; padding: .9rem; margin: 0 0 .7rem; cursor: pointer; font-weight: 400; }
.choice:hover { border-color: var(--quiet); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--tint-green); }
.choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.choice input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; flex: none; accent-color: var(--ink); }
.choice span { font-weight: 400; }
.choice strong { display: block; font-weight: 700; }
.choice .sub { display: block; color: var(--quiet); font-size: 1rem; margin-top: .1rem; }
.choice .sub.warn { color: var(--bad); font-weight: 600; }
.choice .sub.for { color: var(--ink); font-weight: 600; }  /* who a group is for */
.dot::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .5rem; background: var(--green); vertical-align: .05rem; }
.dot.rpc::before { background: var(--purple); }
.aside-link { margin-top: 1.25rem; font-size: 1rem; }
.note.good { background: var(--tint-green); display: flex; gap: .6rem; align-items: center; font-weight: 600; }
.note.good svg { flex: none; color: #4f6b00; }
.success { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.success h1 { margin: 0; }
.success .badge { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--green); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.success .badge svg { width: 1.4rem; height: 1.4rem; }
.join-link { font-size: 1rem; word-break: break-all; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset.ask { min-width: 0; }
fieldset.ask > legend { padding: 0; }
fieldset.ask > legend > h1 { margin-bottom: 1rem; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  font: inherit; font-weight: 600; color: #fff; background: var(--ink); border: 2px solid var(--ink); border-radius: 6px;
  padding: .55rem 1.4rem; margin-top: .6rem; text-decoration: none; cursor: pointer; line-height: 1.25;
  max-width: 100%; text-align: center; overflow-wrap: anywhere;
}
button:hover, .button:hover { background: #0e3a68; color: #fff; }
button.secondary, .button.secondary { color: var(--ink); background: #fff; }
button.secondary:hover, .button.secondary:hover { background: var(--tint); color: var(--ink); }
button.link { background: none; border: 0; padding: 0; margin: 0; min-height: 0; color: var(--quiet); text-decoration: underline; font-weight: 400; }
/* "I have done this module" asks first (the accessibility review, 20 October 2026): it counts towards finishing. */
details.mark-done > summary { display: inline-block; list-style: none; min-height: 24px; color: var(--quiet); text-decoration: underline; cursor: pointer; }
details.mark-done > summary::-webkit-details-marker { display: none; }
ul.modules li > details.mark-done { grid-column: 2 / -1; margin-top: -.4rem; }  /* its own row: the icon and button stay with the title */
details.mark-done form { margin-top: .5rem; }
details.mark-done form p { margin: 0 0 .5rem; }
.button.small, button.small { min-height: 40px; padding: .35rem .9rem; font-size: 1rem; margin-top: .4rem; }
form.inline { display: inline; }
form:not(.inline):not(.search) > button, form:not(.inline):not(.search) > .button { display: flex; width: max-content; max-width: 100%; }
/* Text set straight under a button reads as part of it (Frederic, 21 October 2026): what follows
   a form, or a form's button, starts a paragraph's space below it; anything with spacing of its
   own keeps it. */
:where(form:not(.inline):not(.search)) { margin-bottom: 1rem; }
:where(form:not(.inline):not(.search)):last-child { margin-bottom: 0; }
:where(form:not(.inline):not(.search) > :is(button, .button)) + :not(button, .button) { margin-top: 1rem; }
.error { color: var(--bad); font-weight: 700; border-left: 4px solid var(--bad); padding-left: .7rem; }
.note { background: var(--tint-purple); border-radius: var(--radius); padding: .9rem 1.1rem; }
.note.reassure { background: var(--tint-green); display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; margin-top: 1.5rem; }
.note.reassure svg { flex: none; margin-top: .2rem; }
.back { margin: 0 0 1rem; font-size: 1rem; }
.back a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }
.back a::before { content: ""; width: .5rem; height: .5rem; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin-right: .2rem; }
.card { border: 2px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin: 0 0 1rem; background: #fff; }
.card h2 { margin-top: 0; }
.past { padding-left: 1.2rem; }
/* A list with an action beside each item (the passkey lists): the button set apart from the words, the rows apart. */
.past form.inline { margin-left: .75rem; }
.past li:has(> form.inline) + li { margin-top: .5rem; }
.modules { list-style: none; padding: 0; margin: 0; }
.modules li { border-top: 1px solid var(--line); padding: .6rem 0; }
.pages { margin-top: 1.5rem; }

/* Registration: where the parent is in it. A phone has the bars and one line naming the
   step and the next; a wide screen names all five steps instead, and puts what is chosen
   so far in a column beside the question. */
.progress { margin: 0 0 1.25rem; }
.progress .programme { margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--quiet); }
.progress .bars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.progress .bars li { height: 6px; border-radius: 3px; background: var(--line); margin: 0; }
.progress .bars li.done { background: var(--ink); }
.progress .step-line { margin: .45rem 0 0; font-size: 1rem; }
.progress .step-names, .programme-wide, .summary { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recap { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.25rem; }
.recap h2 { font-size: 1rem; margin: 0 0 .4rem; }
.recap p { margin: 0 0 .3rem; font-size: 1rem; }
.recap .price { font-weight: 700; }
.recap p:last-child { margin: 0; }
.pair > div + div { margin-top: 1.1rem; }
.pair { margin-bottom: 1.1rem; }
@media (min-width: 62rem) {
  /* Every form and message page: a white page at the header's width and side padding, so
     the content lines up with the logo, at a reading width unless it is registering. */
  body.flow { background: #fff; }
  .flow-main { padding: 1.75rem 0 4.5rem; }
  .flow-main > .panel { max-width: var(--wrap); box-sizing: border-box; background: none; border: 0; border-radius: 0; padding: 0 2rem; }
  body.flow:not(.registering) .flow-content { max-width: 40rem; }
  .registering .flow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 1.75rem; min-height: 44px; }  /* the Back link's height, so nothing moves when it appears */
  .registering .back { margin: 0; }
  .registering .progress { margin: 0 0 0 auto; }  /* on the right on every step, with a Back link or (step 1) without */
  .registering .progress .programme, .registering .progress .bars, .registering .progress .step-line, .registering .recap { display: none; }
  .registering .progress .step-names { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; margin: 0; padding: 0; font-size: 1rem; color: var(--quiet); }
  .step-names li { display: flex; align-items: center; gap: .5rem; margin: 0; }
  .step-names .num { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid #9aa3c4; display: flex; align-items: center; justify-content: center; font-size: .85rem; box-sizing: border-box; }
  .step-names li.current { color: var(--ink); font-weight: 700; }
  .step-names li.current .num { background: var(--ink); border-color: var(--ink); color: #fff; }
  .step-names li.done { color: var(--ink); }
  .step-names li.done .num { background: var(--green); border-color: var(--green); color: var(--ink); }
  .registering .flow-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem; }
  .registering .flow-content { flex: 999 1 35rem; min-width: 0; }
  .registering .programme-wide { display: block; margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--quiet); }
  .registering .summary { display: block; flex: 1 1 18.75rem; max-width: 22.5rem; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; box-sizing: border-box; }
  .summary h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
  .summary dl { margin: 0; display: flex; flex-direction: column; gap: .9rem; font-size: 1rem; }
  /* The label above its value, the Change link beside both: a grid, so the list keeps only dt and dd (axe, G4). */
  .summary .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: start; }
  .summary .row dt, .summary .row dd { grid-column: 1; }
  .summary .row dd.change { grid-column: 2; grid-row: 1 / span 2; }
  .summary dt { font-weight: 700; }
  .summary dd { margin: 0; }
  .summary .price { display: block; }
  .registering .choices.two, .registering .choices.three { display: grid; gap: 1rem; margin: 0 0 1.25rem; }
  .registering .choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registering .choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .registering .choices .choice { margin: 0; }
  .registering .choices.three .choice { flex-direction: column; gap: .7rem; padding: 1.25rem; }
  .registering .choices.three .choice span { font-size: 1.3rem; font-weight: 700; }
  .registering .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 45rem; }
  .registering .pair > div + div { margin-top: 0; }
}

/* ------------------------------------------------------------------ public pages */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.hero > div { flex: 1 1 22rem; min-width: 0; }
.hero > img { flex: 1 1 24rem; min-width: 0; width: 100%; height: 15rem; object-fit: cover; border-radius: 14px; }
.hero .lead { font-size: 1.2rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.eyebrow { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.band { background: var(--tint); }
.band-green { background: var(--tint-green); }
@media (min-width: 62rem) { .hero > img { height: 25rem; } .hero .lead { font-size: 1.2rem; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.course-card { background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.course-card::before { content: ""; height: 10px; background: var(--green); }
.course-card.rpc::before { background: var(--purple); }
.course-card > div { padding: 1.4rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.course-card h3 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.course-card p { margin: 0; }
.course-card .meta { font-size: 1rem; color: var(--quiet); font-weight: 500; }
.course-card .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .5rem; }

/* Standard pages are built from blocks (sfsc.content.blocks): text keeps the reading width,
   key figures and link cards take the full width. */
.standard .block { margin-top: 2.5rem; }
.standard .reading.rich.block > :first-child { margin-top: 0; }
.figures { background: var(--ink); color: #fff; border-radius: 14px; padding: 1.8rem 1.6rem 2rem; }
.figures h2 { color: #fff; margin: 0 0 1.4rem; font-size: 1.3rem; }
.figures ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.6rem 2rem; }
.figures li { margin: 0; padding-top: .9rem; border-top: 4px solid var(--green); }
.figures li:nth-child(4n+2) { border-top-color: var(--purple); }
.figures li:nth-child(4n+3) { border-top-color: var(--yellow); }
.figures li:nth-child(4n+4) { border-top-color: var(--orange); }
.figures .number { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin-bottom: .3rem; }
.figures .line { display: block; }
.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.link-card { background: var(--tint); border-radius: 12px; border-left: 6px solid var(--green); padding: 1.4rem 1.5rem 1.5rem; }
.link-card:nth-child(2n) { border-left-color: var(--purple); }
.link-card h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.link-card .rich > :last-child { margin-bottom: 0; }
.link-card a { color: var(--ink); font-weight: 600; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.link-card:nth-child(2n) a { text-decoration-color: var(--purple); }
figure.quote { margin-left: 0; margin-right: 0; }
.picture { margin-left: 0; margin-right: 0; }
.picture img { display: block; width: 100%; height: auto; border-radius: 12px; }
.picture figcaption { margin-top: .5rem; font-size: 1rem; color: var(--quiet); }

.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 2.5rem; align-items: start; }
.quote { padding: 1.6rem; border-radius: 12px; background: var(--tint-purple); }
.quote blockquote { background: none; padding: 0; font-size: 1.2rem; line-height: 1.45; }
.quote blockquote::before { content: "\201C"; display: block; font-size: 4rem; line-height: .8; color: var(--purple); font-weight: 800; }
.quote .by { color: var(--quiet); font-size: 1rem; margin: 0; }
.quote blockquote:last-child { margin-bottom: 0; }
.rich figure.quote { margin: 1.75rem 0; }
.two-up figure.quote { margin: 0; }
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { border-top: 1px solid var(--line); padding: .9rem 0; margin: 0; }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts .date { display: block; font-size: 1rem; color: var(--quiet); }
.posts a { color: var(--ink); font-weight: 700; font-size: 1.2rem; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.signin-band { border: 2px dashed var(--purple); border-radius: 12px; padding: 1.3rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.signin-band p { margin: 0; }

/* Our courses. */
.section-lead { color: var(--quiet); margin: -.3rem 0 1.25rem; max-width: 46rem; }
.in-person { border: 2px dashed var(--purple); border-radius: 12px; padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.in-person .rich { flex: 1 1 26rem; min-width: 0; }
.in-person .rich p:last-child { margin-bottom: 0; }
.in-person .button { margin-top: 0; }
.not-sure { font-size: 1.2rem; margin: 0; }
.not-sure a { font-weight: 700; }

/* Home: what each course can help with, from the programme pages. */
.helps { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.helps > div { border-radius: 12px; padding: 1.4rem 1.4rem 1.2rem; background: var(--tint-green); }
.helps > div.rpc { background: var(--tint-purple); }
.helps h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.helps p { margin: 0 0 .8rem; color: var(--quiet); font-size: 1rem; }
.helps ul { list-style: none; padding: 0; margin: 0; }
.helps li { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .55rem; font-weight: 500; }
.helps li svg { flex: none; margin-top: .25rem; }

/* Programme page, in sections: how it works, the video and a parent's words, the
   course cards, the in-person course, then the questions in their themes. */
.section-heading { margin: 0 0 1.25rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; }
.steps li { margin: 0; background: var(--tint-green); border-radius: 12px; padding: 1.3rem 1.3rem 1.4rem; }
.steps.rpc li { background: var(--tint-purple); }
.steps h3 { margin: .6rem 0 .3rem; font-size: 1.2rem; }
.steps p { margin: 0; }
.watch { margin-top: 2.5rem; align-items: center; }
/* A video is a still with a play button until pressed (content.embeds, video.js). */
.video iframe, .video-still iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.video-still a { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--ink); }
.video-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-still .play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--ink); box-shadow: 0 2px 10px rgba(7, 41, 77, .35); }
.video-still a:hover .play { background: #fff; }
.video-still .from { margin: .4rem 0 0; font-size: .85rem; color: var(--quiet); }
.price-line { margin: 1.25rem 0 0; }
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem 3rem; align-items: start; }
/* A theme's name is a label over its questions, so it never reads as one of them. */
.theme h3 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.page-main .section.lead-in { padding-bottom: 0; }
.ask { margin: 1.75rem 0 0; }
details.question { border-top: 1px solid var(--line); padding: .9rem 0; }
details.question:last-of-type { border-bottom: 1px solid var(--line); }
details.question summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details.question summary::-webkit-details-marker { display: none; }
details.question summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--quiet); }
details.question[open] summary::after { content: "\2212"; }
details.question[open] summary { margin-bottom: .6rem; }
.rich h2:first-child { margin-top: 0; }

/* Blog. */
.article-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.article-list article { border: 2px solid var(--line); border-radius: 12px; padding: 1.2rem 1.3rem; }
.article-list h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.article-list h2 a { color: var(--ink); text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.article-list .hint, .article-list p { margin: 0 0 .4rem; }
.lead-image { width: 100%; max-height: 26rem; object-fit: cover; border-radius: 12px; margin: 0 0 1.5rem; }

/* Get help. */
.tag { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; font-size: .85rem; font-weight: 600; vertical-align: .1rem; background: var(--tint-green); color: var(--ink); }
.tag.rpc { background: var(--tint-purple); }
.results { margin-bottom: 1rem; }
.help-group { margin: 0 0 1.5rem; }
.help-group h3 { margin: 0 0 .3rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); }
.card.ask { background: var(--tint); border-color: var(--line); padding: 1.4rem; margin: 2.5rem 0 2rem; scroll-margin-top: 1rem; }
.card.ask h2 { margin-top: 0; }
.card.ask input[type=email], .card.ask textarea { margin-bottom: 1.1rem; }
.categories-title { font-weight: 700; margin: .4rem 0 .2rem; }
.categories { margin: .2rem 0 .8rem; }
.categories legend { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); margin: .4rem 0 .45rem; }
.free-box { background: var(--tint-green); border-radius: 12px; padding: 1.2rem 1.3rem .4rem; margin: 0 0 2rem; }
.free-box h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.free-box p { font-size: 1rem; }
/* On the help page the check is one line until opened. */
.free-toggle { margin: 0 0 2rem; }
.free-toggle summary { cursor: pointer; list-style: none; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .3rem 0; }
.free-toggle summary::-webkit-details-marker { display: none; }
.free-toggle summary span { color: var(--quiet); text-decoration: underline; text-underline-offset: 3px; }
.free-toggle summary span::after { content: "\203A"; display: inline-block; margin-left: .35rem; text-decoration: none; transition: transform .15s; }
.free-toggle[open] summary span::after { transform: rotate(90deg); }
.free-toggle .free-box { margin: .6rem 0 0; }
@media (prefers-reduced-motion: reduce) { .free-toggle summary span::after { transition: none; } }
.free-answers { list-style: none; padding: 0; margin: 0 0 1rem; }
.free-answers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; border: 2px solid var(--line); border-radius: 10px; padding: .9rem 1rem; margin: 0 0 .7rem; }
.free-answers li.free { border-color: var(--green); background: var(--tint-green); }
.free-answers li div { display: flex; flex-direction: column; }
.free-answers li .button { margin-top: 0; }
@media (min-width: 40rem) { .categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .7rem; } .categories legend { grid-column: 1 / -1; } }
label.optional span { font-weight: 400; color: var(--quiet); }
input[type=file] { font: inherit; font-size: 1rem; color: var(--quiet); margin: 0 0 .4rem; max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: .45rem .9rem; margin-right: .8rem; cursor: pointer; }
.other-ways { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.other-ways h2 { font-size: 1.2rem; margin-top: 0; }

/* Help search. */
.search { margin: 0 0 1.5rem; }
.search-row { display: flex; gap: .5rem; }
.search-row input { flex: 1; min-width: 0; }
.search-row button, .search-row .button { margin-top: 0; min-height: 0; align-self: stretch; padding: 0 1.1rem; }  /* as tall as its field */

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--ink); color: #fff; margin-top: 0; }
.site-footer .wrap { padding-top: 2.25rem; padding-bottom: 2.5rem; }
.site-footer .stripe { width: 140px; height: 5px; margin-bottom: 1rem; }
.site-footer .strapline { color: var(--yellow); font-size: 1.2rem; font-weight: 500; margin: 0; max-width: 24rem; }
.footer-top { margin-bottom: 2rem; }
.footer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
.footer-groups h2 { margin: 0 0 .6rem; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b9c3dd; }
.footer-groups ul { list-style: none; padding: 0; margin: 0; }
.footer-groups li { margin: 0 0 .5rem; font-size: 1rem; }
.site-footer .professionals { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 1rem; }
.site-footer.compact .wrap { padding-top: 1.4rem; padding-bottom: 1.6rem; }
.site-footer.compact nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 1rem; }
@media (min-width: 62rem) {
  .site-footer:not(.compact) .wrap { display: grid; grid-template-columns: minmax(14rem, 1fr) 3fr; column-gap: 3rem; }
  .footer-top { margin: 0; }
  .footer-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer .professionals { grid-column: 1 / -1; }
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--yellow); }
@media (min-width: 62rem) { .site-footer .wrap { padding-left: 2rem; padding-right: 2rem; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* The parent's space: the course's state at a glance, the next session first. */
.course-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .4rem; }
.course-top h2 { margin: 0; }
.my-course .tag { margin-left: 0; }
/* Each course card carries its programme's colour, and leads with the course itself. */
.my-course { border-top: 6px solid var(--green); }
.my-course.rpc { border-top-color: var(--purple); }
.my-course h2 .course-programme { display: block; margin-bottom: .2rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.note.clash { background: #fff1e0; }
/* A course that has just ended: what to finish, then what comes next. */
/* A help conversation: REF's replies on the left, tinted and named; the parent's own on the right. */
.conversation { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.message { max-width: 88%; margin: 0; padding: .8rem 1rem .9rem; border-radius: 14px; }
.message p { margin: 0 0 .4rem; }
.message p:last-child { margin-bottom: 0; }
.message .from { font-size: .85rem; font-weight: 700; color: var(--quiet); }
.message.theirs { align-self: flex-start; background: var(--tint-purple); border-bottom-left-radius: 4px; }
.message.mine { align-self: flex-end; background: #fff; border: 2px solid var(--line); border-bottom-right-radius: 4px; }
.message .attached a { overflow-wrap: anywhere; }
.reply textarea { margin-bottom: 1rem; }
.finishing .whats-next { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.finishing .whats-next h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.tag.ok { background: var(--tint-green); color: #2f5400; }
.tag.attention { background: #fff1e0; color: #8a3c00; }
.tag.neutral { background: var(--tint-purple); color: var(--ink); }  /* a fact, neither good nor needing action */
.to-do { margin: .6rem 0 1.1rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--tint-green); }
.to-do p:last-child { margin-bottom: 0; }
/* A running course in two strands, drawn alike: the group sessions and the online modules,
   each with its icon, its count and a track of six marks, then what comes next in it. */
.strand { min-width: 0; padding: 1rem 0 0; border-top: 1px solid var(--line); margin-top: 1rem; }
.strand-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.strand-head svg { flex: none; color: var(--quiet); }
.strand-head h3 { margin: 0; font-size: 1.2rem; }
.strand-head .count { margin-left: auto; font-size: 1rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
.track { display: flex; gap: 4px; list-style: none; padding: 0; margin: .6rem 0 .5rem; }
.track li { flex: 1; height: 8px; margin: 0; border-radius: 4px; background: var(--line); }
.track li.done { background: var(--green); }
.track li.before { background: none; border: 1px dashed var(--line); }  /* held before they joined: neither came nor missed */
.track li.part { background: linear-gradient(to right, var(--green) 50%, var(--line) 50%); }
.rpc .track li.done { background: var(--purple); }
.rpc .track li.part { background: linear-gradient(to right, var(--purple) 50%, var(--line) 50%); }
.strand-sub { margin: 0 0 .7rem; font-size: 1rem; color: var(--quiet); }
.next-line { margin: 0 0 .2rem; font-weight: 700; }
.next-line .next-label { display: block; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.strand .join-now { margin-top: .2rem; }
.strand .note { font-size: 1rem; margin: .4rem 0 .8rem; }
.strand-links { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; font-size: 1rem; }
.strand-links li { margin: 0; }
ul.modules { list-style: none; padding: 0; margin: .2rem 0 0; }
ul.modules li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--line); margin: 0; }
ul.modules li:first-child { border-top: 0; }
ul.modules .mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--quiet); color: #fff; }
ul.modules .done .mark { background: var(--green); border-color: var(--green); }
.rpc ul.modules .done .mark { background: var(--purple); border-color: var(--purple); }
ul.modules .doing .mark { background: linear-gradient(to right, var(--quiet) 50%, #fff 50%); }
ul.modules .later .mark { border-style: dashed; border-color: #a9b0c8; }
.module-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.module-text form.inline { margin: .1rem 0 0; }
.module-text button.link { text-align: left; }
.module-title { font-weight: 600; line-height: 1.35; }
.later .module-title { font-weight: 400; color: var(--quiet); }
.module-state { font-size: 1rem; color: var(--quiet); }
.module-actions { font-size: 1rem; }
.module-actions .button, .module-actions button { margin-top: 0; }

/* Signing in: one thing at a time. The field and its button, room around them; the other
   way in and the help below are quiet. */
form.sign-in { margin: 1.25rem 0 0; }
form.sign-in button[type=submit] { margin-top: 1rem; }
input.code { max-width: 10rem; font-size: 1.3rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.other-way { margin: 1.25rem 0 0; }
.other-way button.link { font-size: 1rem; }
.page-foot { margin: 2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 1rem; color: var(--quiet); }
.page-foot p { margin: .6rem 0; }
details.no-code summary { cursor: pointer; color: var(--quiet); text-decoration: underline; text-underline-offset: 3px; }
details.no-code[open] summary { margin-bottom: .2rem; }
form.inline button.link { font-size: 1rem; }

/* The parent's space is a page, not a form step: no panel round it. On a wide screen the
   courses take the main column, the occasional things a narrow one beside it, and a
   course card's next session sits beside what there is to do. A phone keeps one column. */
.space-main { padding: 1.5rem 0 3rem; }
.space-main h1 { margin: 0 0 1.25rem; }
.space-layout { display: grid; gap: 1.75rem; }
.space-courses, .space-side { min-width: 0; }
.space-courses > .card { margin-bottom: 1.25rem; }
/* Beside the courses, one quiet panel: questions to us, another course, the account. */
.space-side { border-top: 1px solid var(--line); }
.side-block { padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.side-block:last-child { border-bottom: 0; }
.side-block h2 { font-size: 1rem; margin: 0 0 .4rem; }
.side-block p { margin: 0 0 .4rem; }
.side-block p:last-child { margin-bottom: 0; }
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { margin: 0 0 .4rem; }
.side-list li:last-child { margin-bottom: 0; }
.side-list .hint { display: block; margin: 0; font-size: .85rem; }
.side-block button.link { font-size: 1rem; }
@media (min-width: 62rem) {
  body.space { background: var(--tint); }
  .space-main { padding: 2.5rem 0 4rem; }
  .space-main .wrap { padding-left: 2rem; padding-right: 2rem; }  /* in line with the header and footer */
  .space-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; align-items: start; }
  .space-courses > .card { padding: 1.5rem 1.6rem 1.6rem; }
  .course-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; }
  .course-body .strand { margin-top: .6rem; }
  .space-side { position: sticky; top: 1.5rem; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; padding: .2rem 1.2rem; }
}

/* D63: help for a signed-in parent. One plain list in their own words; a reply waiting
   for them first; their situation once they choose. */
.get-help h1 { margin-bottom: 1rem; }
.help-waiting { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .85rem 1.1rem; margin: 0 0 1.5rem;
  border-radius: var(--radius); background: var(--tint-green); color: inherit; text-decoration: none; }
.help-waiting::after, .help-topics a::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .25rem;
  border: solid var(--quiet); border-width: 0 2.5px 2.5px 0; transform: rotate(-45deg); }
.help-waiting span, .help-topics a span { flex: 1; }
.help-topics { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1px solid var(--line); }
.help-topics li { border-bottom: 1px solid var(--line); }
.help-topics a { display: flex; align-items: center; gap: .75rem; min-height: 64px; color: inherit; text-decoration: none;
  font-weight: 700; font-size: 1.2rem; line-height: 1.3; padding: .5rem 0; }
.help-topics a:hover { color: var(--quiet); }
.help-situation { margin: 0 0 1.25rem; }
.help-situation h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
.help-bar { height: 8px; border-radius: 4px; background: var(--line); margin: 0 0 .75rem; overflow: hidden; }
.help-bar span { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.help-ask { margin-top: 1.5rem; }
.help-ask select, .help-ask textarea { width: 100%; box-sizing: border-box; }

/* Questionnaires (D129): one card per question, choices as large targets, progress named. */
.questionnaire h1 { margin-top: .25rem; }
.q-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; list-style: none; padding: 0; margin: .5rem 0 1.5rem; counter-reset: part; }
.q-progress li { counter-increment: part; border-top: 5px solid var(--line); padding-top: .4rem; font-size: .85rem; color: var(--quiet); }
.q-progress li.done { border-color: var(--quiet); }
.q-progress li.now { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.q-progress li span::before { content: counter(part) ". "; }
.q-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.1rem .4rem; margin: 0 0 1.1rem; }
.q-card legend { float: left; width: 100%; padding: 0; margin: 0 0 .9rem; font-weight: 700; font-size: 1.2rem; line-height: 1.35; }
.q-card legend + * { clear: both; }
.q-card .choices { display: grid; gap: .6rem; margin: 0 0 .7rem; }
.q-card .choices .choice { margin: 0; padding: .7rem .9rem; }
.q-card .choices.prefer { margin-top: .2rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.choice-group { margin: .9rem 0 .5rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.q-card select { margin: 0 0 .7rem; }
.q-card textarea { width: 100%; margin: 0 0 .7rem; }
.q-extra { margin: .2rem 0 .8rem; }
.q-extra label { display: block; font-weight: 400; color: var(--quiet); margin: 0 0 .3rem; }
.q-actions { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
@media (min-width: 640px) {
  .q-card { padding: 1.4rem 1.5rem .6rem; }
  .q-card .choices.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A question left unanswered is marked where it is (the accessibility review, WCAG 3.3.1). */
.q-card.missing { border-color: var(--bad); border-width: 2px; }