/* ==========================================================================
   SuperPenguin Home v3 — site stylesheet
   One family (Inter). Two visible heading styles: the H1 title, and one
   shared subtitle appearance used by every H2 and H3.
   Empty space is the first visual priority.
   ========================================================================== */

/* ----- Fonts -------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-400.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-600.woff2') format('woff2');
  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;
}

/* ----- Tokens ------------------------------------------------------------- */
:root {
  --navy: #18143D;
  --navy-quiet: #3B3663;          /* quiet navy: 5.03:1 on the darkest wash, 11.09:1 on white */
  --purple: #817EE4;
  --lavender: #BAB9FF;
  --hairline: #E6E6FC;            /* internal rules and dividers */
  --edge: #D8D7F0;                /* panel and cell edges, visible on white */
  --soft: #ECECFF;
  --star-track: #D4D3FF;          /* listed palette value, so the unfilled part of the fifth star is visible */
  --tint: #F5F5FE;                /* website decision, quiet recessed surface */
  --wash-top: #A8A7F6;            /* observed live banner hue */
  --wash-mid: #F8FAFF;            /* observed live fade target */
  --white: #FFFFFF;
  --warm: #FAF6F5;
  --orange: #F8A17E;
  --on-navy: #EDECF7;            /* body text on the navy panels, 11.3:1 */

  --measure: 1240px;
  --gutter: 20px;
  --radius: 28px;
  --radius-sm: 18px;
  --section: 60px;
  --focus: 3px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 78px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --section: 96px; }
}

/* ----- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 18px; } }

img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; }

:where(a, button, summary, input):focus-visible {
  outline: var(--focus) solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.panel--navy :where(a, button):focus-visible,
.site-footer :where(a, button, input):focus-visible {
  outline-color: var(--white);
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 50;
  padding: 12px 20px;
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ----- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 960px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.7); }

/* ----- Type --------------------------------------------------------------- */
.title {
  margin: 0;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
@media (min-width: 360px) { .title { font-size: 38px; } }
@media (min-width: 768px) { .title { font-size: 48px; } }
@media (min-width: 1024px) { .title { font-size: 64px; } }
@media (min-width: 1440px) { .title { font-size: 72px; } }

/* the single shared subtitle appearance: every H2 and H3 uses it */
h2, h3, .subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}
@media (min-width: 768px) { h2, h3, .subtitle { font-size: 26px; } }
@media (min-width: 1024px) { h2, h3, .subtitle { font-size: 30px; } }

.eyebrow {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--navy-quiet);
}
.lede { max-width: 62ch; }
.quiet { color: var(--navy-quiet); }
.small { font-size: 15px; line-height: 1.5; }
@media (min-width: 1024px) { .small { font-size: 16px; } }

.section-head { text-align: center; max-width: 40ch; margin-inline: auto; }
.section-head > * + * { margin-top: 14px; }

/* ----- Links and actions -------------------------------------------------- */
.link {
  display: inline-block;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  padding-block: 4px;
}
.link:hover { text-decoration-thickness: 2px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.arrow-link svg { flex: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.actions--centre { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--navy);
  transition: background-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--white); color: var(--navy); }
.btn--primary:hover { background: var(--soft); }
.btn--secondary { background: transparent; color: var(--navy); }
.btn--secondary:hover { background: rgba(255,255,255,.55); }
.btn--onnavy { background: transparent; color: var(--white); border-color: var(--white); }
.btn--onnavy:hover { background: var(--white); color: var(--navy); }

/* ----- Panels ------------------------------------------------------------- */
.panel {
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 30px 22px;
}
@media (min-width: 768px) { .panel { padding: 40px 36px; } }
@media (min-width: 1024px) { .panel { padding: 52px 56px; } }
.panel--flush { padding: 0; overflow: hidden; }
.panel--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}
.panel--navy h3 { color: var(--white); }

.band { background: var(--tint); }
.band--soft { background: var(--soft); }
.band--warm { background: var(--warm); }

/* ==========================================================================
   Continuous navbar + hero wash
   ONE background owned by a shared wrapper. No opaque navbar, no divider,
   no shadow, no second gradient, no scroll-driven change.
   ========================================================================== */
.aurora {
  background-color: var(--white);
  background-image: linear-gradient(180deg,
    var(--wash-top) 0%,
    var(--lavender) 26%,
    var(--wash-mid) 68%,
    var(--white) 100%);
  background-repeat: no-repeat;
  background-size: 100% 1320px;
}
@media (min-width: 768px)  { .aurora { background-size: 100% 1440px; } }
@media (min-width: 1024px) { .aurora { background-size: 100% 1580px; } }

/* ----- Header ------------------------------------------------------------- */
.masthead { position: relative; background: transparent; padding-block: 22px; }
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark { display: inline-flex; flex: none; align-items: center; padding: 6px 2px; }
.wordmark img { width: 178px; height: 30px; display: block; object-fit: contain; }
@media (min-width: 1024px) { .wordmark img { width: 208px; height: 35px; } }

.nav-desktop { display: none; }
@media (min-width: 1280px) {
  .nav-desktop { display: flex; align-items: center; gap: 22px; }
  .nav-mobile { display: none; }
}
.nav-list { display: flex; align-items: center; gap: 20px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid transparent;
}
.nav-link:hover { border-bottom-color: var(--navy); }

.nav-disclosure { position: relative; }
.nav-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.nav-disclosure > summary::-webkit-details-marker { display: none; }
.nav-disclosure > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: translateY(-2px) rotate(45deg);
}
.nav-disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.nav-panel {
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 12px;
}
@media (min-width: 1280px) {
  .nav-disclosure > .nav-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: -14px;
    z-index: 30;
    width: 320px;
  }
}
.nav-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
}
.nav-panel a:hover { background: var(--soft); }
.nav-panel .nav-panel__desc { display: block; color: var(--navy-quiet); font-size: 15px; }

.header-cta { display: flex; align-items: center; gap: 12px; margin: 0; }
.header-cta .cue { font-size: 15px; white-space: nowrap; color: var(--navy-quiet); }
.header-cta .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }

/* mobile menu */
.nav-mobile > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile { flex: none; }
.nav-mobile > .nav-panel {
  position: absolute;
  top: calc(100% - 6px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 40;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.nav-mobile .nav-panel__group + .nav-panel__group { margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.nav-mobile .actions { padding: 14px; }
.nav-mobile .cue { display: block; padding: 4px 14px 0; font-size: 15px; color: var(--navy-quiet); }

/* ----- Hero --------------------------------------------------------------- */
.hero { padding-block: 26px 0; text-align: center; }
@media (min-width: 768px) { .hero { padding-block: 34px 0; } }

.hero__art { margin: 0 auto; max-width: 320px; }
@media (min-width: 768px) { .hero__art { max-width: 480px; } }
@media (min-width: 1024px) { .hero__art { max-width: 720px; } }
.hero__art img { display: block; width: 100%; border-radius: var(--radius); }

.hero__copy { margin-top: 40px; }
@media (min-width: 1024px) { .hero__copy { margin-top: 56px; } }
.hero__copy .eyebrow { display: block; }
.hero__copy .title { margin-top: 18px; margin-inline: auto; max-width: 22ch; }
.hero__copy .lede { margin: 22px auto 0; }
.hero .actions { margin-top: 34px; }
@media (min-width: 1024px) { .hero .actions { margin-top: 44px; } }
.hero__tail { height: var(--section); }

/* ----- Clinician proof ---------------------------------------------------- */
.proof { padding-block: 0 var(--section); }
.proof__panel { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) {
  .proof__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
.proof__body > * + * { margin-top: 18px; }
.proof__product { font-weight: 600; letter-spacing: 0.01em; }
.proof__figure {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .proof__figure { font-size: 34px; } }
@media (min-width: 1024px) { .proof__figure { font-size: 42px; } }
.proof__stat > p + p { margin-top: 8px; }
.proof__quote { margin-inline: 0; margin-bottom: 0; }
.proof__quote p { max-width: 34ch; }
.proof__quote footer { margin-top: 10px; color: var(--navy-quiet); font-size: 15px; }
.proof__art {
  padding: 18px;
  background: var(--soft);
  border-radius: var(--radius);
}
@media (min-width: 900px) { .proof__art { padding: 26px; } }
.proof__art img { display: block; width: 100%; border-radius: 12px; }
.proof__rule { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; }

/* ----- Five KPIs ---------------------------------------------------------- */
.kpi__panel { margin-top: 42px; }
@media (min-width: 1024px) { .kpi__panel { margin-top: 54px; } }

.kpi__verified { display: grid; gap: 34px; text-align: center; }
@media (min-width: 700px) {
  .kpi__verified { grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: center; }
  .kpi__divider { background: var(--hairline); align-self: stretch; }
  .kpi__verified > .kpi-measure { padding-inline: 28px; }
}
.kpi-measure__value {
  display: block;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .kpi-measure__value { font-size: 48px; } }
@media (min-width: 1024px) { .kpi-measure__value { font-size: 62px; } }
.kpi-measure__label { display: block; margin-top: 14px; color: var(--navy-quiet); }
.kpi-measure__stars { display: block; margin-inline: auto; width: 232px; max-width: 100%; height: auto; }
@media (min-width: 1024px) { .kpi-measure__stars { width: 268px; } }

.kpi__totals {
  margin-top: 38px;
  padding: 26px 18px;
  background: var(--tint);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 26px;
  text-align: center;
}
@media (min-width: 700px) {
  .kpi__totals { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 32px 24px; margin-top: 48px; }
}
.kpi-total__value {
  display: block;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) { .kpi-total__value { font-size: 34px; } }
.kpi-total__label { display: block; margin-top: 8px; color: var(--navy-quiet); font-size: 16px; }

.kpi__note {
  margin-top: 26px;
  text-align: center;
}
.kpi__note p { color: var(--navy-quiet); font-size: 15px; }
.kpi__note .link { margin-top: 10px; }

/* ----- Parent hope -------------------------------------------------------- */
.hope { text-align: center; }
.hope__quote {
  margin: 34px auto 0;
  max-width: 34ch;
}
@media (min-width: 1024px) { .hope__quote { margin-top: 46px; } }

/* ----- Solutions ---------------------------------------------------------- */
.solutions__lead { margin-top: 42px; }
.solutions__lead .panel { display: grid; gap: 28px; }
@media (min-width: 768px) { .solutions__lead .panel { padding-block: 56px; } }
@media (min-width: 900px) {
  .solutions__lead .panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; }
}
@media (min-width: 1024px) { .solutions__lead .panel { padding: 84px 64px; } }
.solutions__lead p { margin-top: 16px; max-width: 44ch; }
.solutions__pair { margin-top: 24px; display: grid; gap: 24px; }
@media (min-width: 768px) { .solutions__pair { grid-template-columns: 1fr 1fr; } }
.solutions__pair p { margin-top: 12px; max-width: 34ch; }
.solutions__pair .arrow-link { margin-top: 22px; }

/* ----- Family access ------------------------------------------------------ */
.family__top { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .family__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
}
.family__copy > * + * { margin-top: 18px; }
.family__copy p { max-width: 46ch; }
.family__art img, .family__dash img { display: block; width: 100%; border-radius: var(--radius-sm); }
.family__dash {
  margin-top: 44px;
  padding: 22px;
  background: var(--soft);
  border-radius: var(--radius);
}
@media (min-width: 1024px) { .family__dash { margin-top: 60px; padding: 40px; } }
.family__dash img { max-width: 900px; margin-inline: auto; border: 1px solid var(--edge); }

/* ----- Carousels ---------------------------------------------------------- */
.collections { display: grid; gap: 56px; margin-top: 44px; }
@media (min-width: 1024px) { .collections { gap: 72px; margin-top: 58px; } }

.carousel { text-align: center; }
.carousel__heading { margin-bottom: 24px; }
.carousel__frame { display: block; }

.logo-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  grid-auto-rows: 160px;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 144px; max-width: 760px; }
}
@media (min-width: 1440px) {
  /* Three columns, not four. The requested two rows are kept. Documented in QA:
     four columns squeezed the widest trust wordmarks to 9px lettering. */
  .logo-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; max-width: 1100px; }
}

/* enhanced state keeps the requested row count even when the last view is short */
[data-enhanced="true"] .logo-grid { grid-template-rows: 160px; }
@media (min-width: 768px) {
  [data-enhanced="true"] .logo-grid { grid-template-rows: repeat(5, 144px); }
}
@media (min-width: 1440px) {
  [data-enhanced="true"] .logo-grid { grid-template-rows: repeat(2, 160px); }
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Cap the height so a near-square mark cannot dwarf a wide wordmark. Both
   collections share the cap, so the boxes and the optical scale match. */
.logo-cell img {
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (min-width: 768px)  { .logo-cell img { max-height: 70px; } }
@media (min-width: 1440px) { .logo-cell img { max-height: 78px; } }
.logo-cell__text {
  font-size: 15px;
  line-height: 1.35;
  color: var(--navy);
  text-align: center;
}

.carousel__stage {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-areas: "frame frame frame" "prev range next";
  align-items: center;
  gap: 20px 16px;
}
.carousel__frame { grid-area: frame; }
.carousel__controls { display: contents; }
.carousel__controls .cbtn:first-of-type { grid-area: prev; }
.carousel__controls .cbtn:last-of-type { grid-area: next; }
.carousel__range { grid-area: range; text-align: center; font-size: 15px; color: var(--navy-quiet); }
.cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  cursor: pointer;
}
.cbtn:hover { background: var(--soft); }
/* Muted, not faded: opacity would dim the focus ring with the button, and the
   control stays keyboard reachable at the ends. */
.cbtn[aria-disabled="true"] { color: #A9A7C8; border-color: #D4D3EC; cursor: default; }
.cbtn[aria-disabled="true"]:hover { background: var(--white); }

@media (min-width: 1440px) {
  /* Controls sit OUTSIDE the grid at its left and right, and the range sits
     immediately under the grid. The collections wrap is widened so the full
     1100px grid and both controls fit without overlapping. */
  .collections .wrap, .wrap.collections-wrap { max-width: 1340px; }
  .carousel__stage {
    grid-template-columns: 48px minmax(0, 1100px) 48px;
    grid-template-areas: "prev frame next" ". range .";
    justify-content: center;
    gap: 18px 24px;
  }
  .carousel__range { margin-top: 0; }
}

/* ----- Standards ---------------------------------------------------------- */
.standards__list {
  margin-top: 40px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .standards__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .standards__list { grid-template-columns: repeat(4, 1fr); margin-top: 52px; } }
.standard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 132px;
  padding: 22px 18px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
}
.standard img { display: block; width: auto; }
.standard__text { font-size: 15px; line-height: 1.4; }
.standards__link { margin-top: 32px; text-align: center; }

/* ----- Questions ---------------------------------------------------------- */
.faq { margin-top: 40px; }
@media (min-width: 1024px) { .faq { margin-top: 52px; } }
.faq__row { border-top: 1px solid var(--hairline); }
.faq__row:first-child { border-top: 0; }
.faq__row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
}
@media (min-width: 1024px) {
  .faq__row > summary { padding: 26px 40px; font-size: 18px; }
  .faq__answer { padding: 0 40px 28px; }
}
.faq__row > summary::-webkit-details-marker { display: none; }
.faq__row > summary::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: translateY(-3px) rotate(45deg);
}
.faq__row[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* the panel clips at its rounded corners, so keep the ring inside the row */
.faq__row > summary:focus-visible { outline-offset: -4px; border-radius: 0; }
.faq__answer { padding: 0 24px 24px; color: var(--navy-quiet); max-width: 70ch; }
.faq__answer a { color: var(--navy); }

/* ----- Closing ------------------------------------------------------------ */
.closing__inner { display: grid; gap: 34px; align-items: center; }
.closing__copy { text-align: center; }
.closing__copy .actions { margin-top: 30px; justify-content: center; }
@media (min-width: 900px) {
  .closing__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; }
  .closing__copy { text-align: left; }
  .closing__copy .actions { justify-content: flex-start; }
}
.closing__art img { display: block; width: 100%; }

/* ----- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy); color: var(--on-navy); padding-block: 56px 34px; }
.site-footer h2 { color: var(--white); }

@media (min-width: 1024px) { .site-footer { padding-block: 72px 40px; } }
.footer__top { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } }
.footer__intro p { margin-top: 18px; max-width: 34ch; color: var(--on-navy); }
.footer__nav ul {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
}
@media (min-width: 620px) { .footer__nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer__nav a { display: inline-block; padding-block: 5px; font-size: 16px; text-decoration: none; color: var(--on-navy); }
.footer__nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

.newsletter { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.2); }
.newsletter > section > p { margin-top: 10px; color: var(--on-navy); max-width: 46ch; }
.newsletter form { margin-top: 22px; max-width: 560px; }
.newsletter fieldset { margin: 0; padding: 0; border: 0; }
.newsletter label { display: block; font-size: 15px; margin-bottom: -4px; }
.newsletter fieldset { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; }
.newsletter label { flex: 1 1 100%; }
.newsletter input[type="email"] {
  flex: 1 1 240px;
  width: auto;
  min-height: 48px;
  padding: 0 16px;
  font-size: 16px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--lavender);
  border-radius: 12px;
}
.newsletter button {
  min-height: 48px;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 999px;
}
.newsletter fieldset[disabled] input,
.newsletter fieldset[disabled] button { opacity: .6; cursor: not-allowed; }
.newsletter__state { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--on-navy); }
.newsletter__consent { margin-top: 10px; font-size: 15px; color: var(--on-navy); max-width: 56ch; }
.newsletter noscript p { margin-top: 10px; font-size: 15px; color: var(--on-navy); }
.newsletter a { color: var(--white); }

.footer__legal {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  font-size: 15px;
  color: var(--on-navy);
}
.footer__legal a { color: var(--on-navy); text-decoration: underline; text-underline-offset: 4px; padding-block: 5px; }
.footer__legal a:hover { color: var(--white); }
.cookie-settings {
  font: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  padding: 5px 0;
  color: var(--on-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: not-allowed;
  opacity: .75;
}
.footer__copyright { margin-top: 20px; font-size: 15px; color: var(--on-navy); }
.footer__social { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
.footer__social a { font-size: 16px; color: var(--on-navy); text-decoration: none; padding-block: 5px; }
.footer__social a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Forms, consent and lifecycle pages (checklist item 02)
   Nothing here changes the static render of Home: there the new status
   region is empty and takes no space, the error element is hidden, and the
   fallback paragraph, cookie banner and slide-in do not exist.
   ========================================================================== */
:root {
  --error: #A3261C;              /* 7.37:1 on white, 6.8:1 on the tint. The palette has no error colour */
  --field-edge: var(--purple);   /* 3.48:1 on white, meets 3:1 for a control boundary */
}

/* ----- Feedback shared by every form -------------------------------------- */
.form-status:not(:empty) { margin-top: 14px; font-weight: 600; }
.form-error { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--error); }
.form-fallback { margin-top: 12px; font-size: 15px; }
.form-status a, .form-error a, .form-fallback a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Navy footer newsletter: connected states --------------------------- */
.newsletter .form-status:not(:empty) { margin-top: 12px; font-size: 15px; color: var(--white); }
.newsletter .form-error { margin-top: 10px; font-size: 15px; color: var(--orange); }   /* 8.61:1 on navy */
.newsletter .form-fallback { color: var(--on-navy); }
.newsletter input[type="email"][aria-invalid="true"] {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange);
}
.newsletter fieldset:not([disabled]) button:not(:disabled):not([aria-disabled="true"]) { cursor: pointer; }
.newsletter fieldset:not([disabled]) button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--white); color: var(--navy); }
/* aria-disabled while sending or waiting, so keyboard focus stays on the button */
.newsletter button:disabled,
.newsletter button[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.cookie-settings:not(:disabled) { cursor: pointer; opacity: 1; }
.cookie-settings:not(:disabled):hover { color: var(--white); }

/* ----- Light-surface forms: contact, downloads, article and page newsletters */
.site-form fieldset,
.newsletter-light fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
* + .site-form { margin-top: 22px; }
.site-form fieldset { display: grid; gap: 22px; }
.site-form__field { display: grid; gap: 8px; min-width: 0; }
.site-form label,
.newsletter-light label { font-size: 16px; font-weight: 600; line-height: 1.4; }
.site-form input[type="text"],
.site-form input[type="email"],
.site-form textarea,
.newsletter-light input[type="email"] {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--field-edge);
  border-radius: 12px;
}
.site-form textarea { min-height: calc(9em + 26px); resize: vertical; }   /* six visible lines */
.site-form :where(input, textarea):hover,
.newsletter-light input:hover { border-color: var(--navy); }
.site-form textarea:focus-visible { outline: var(--focus) solid var(--navy); outline-offset: 3px; }
/* element-qualified so it outranks the base field rule above */
.site-form input[aria-invalid="true"],
.site-form textarea[aria-invalid="true"],
.newsletter-light input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.site-form fieldset[disabled] :where(input, textarea),
.newsletter-light fieldset[disabled] input { background: var(--tint); cursor: not-allowed; }
.site-form__note {
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--navy);
  background: var(--tint);
  border-left: 4px solid var(--purple);
  border-radius: 0 12px 12px 0;
}
.site-form__check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.site-form__check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 10px 0 0;
  accent-color: var(--navy);
}
.site-form__check label { padding-block: 10px; font-weight: 400; }   /* the label extends the target to 44px */
.site-form__consent { grid-column: 2; font-size: 15px; color: var(--navy-quiet); }
.site-form__consent a,
.newsletter-light .newsletter__consent a,
.newsletter-light .form-fallback a { color: var(--navy); }
.site-form__verify:empty,
.newsletter-light [data-turnstile]:empty { display: none; }
.site-form__actions { margin: 4px 0 0; }
.site-form .btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 12px; cursor: pointer; }
.site-form .btn:disabled,
.site-form .btn[aria-disabled="true"],
.site-form .btn[aria-disabled="true"]:hover,
.newsletter-light button:disabled,
.newsletter-light button[aria-disabled="true"] {
  background: var(--tint);
  color: var(--navy-quiet);
  border-color: var(--navy-quiet);
  cursor: not-allowed;
}
.site-form .form-state,
.newsletter-light .newsletter__state { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--navy-quiet); }
.site-form .form-status:not(:empty),
.newsletter-light .form-status:not(:empty) { color: var(--navy); }
.site-form .form-fallback,
.newsletter-light .form-fallback { color: var(--navy-quiet); }

.newsletter-light > section > p { margin-top: 10px; color: var(--navy-quiet); max-width: 46ch; }
.newsletter-light form { margin-top: 22px; }
.newsletter-light fieldset { display: grid; gap: 12px; }
.newsletter-light button {
  justify-self: start;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  cursor: pointer;
}
.newsletter-light button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--soft); }
.newsletter-light .newsletter__consent { margin-top: 10px; font-size: 15px; color: var(--navy-quiet); }

/* ----- Cookie banner: in normal flow above the page, never an overlay ----- */
.cookie-banner {
  padding-block: 18px;
  color: var(--navy);
  background: var(--white);
  border-bottom: 1px solid var(--edge);
}
.cookie-banner:focus { outline: var(--focus) solid var(--navy); outline-offset: -3px; }
.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.cookie-banner__text { max-width: 62ch; }
.cookie-banner__text a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-banner__actions .btn { min-width: 132px; cursor: pointer; }
body:focus { outline: none; }   /* focus parked on the document after a cookie choice, never a control */

/* ----- Newsletter slide-in: in flow below 768px, a corner panel above ----- */
.slide-in {
  position: relative;
  margin: var(--section) auto 0;
  max-width: 560px;
  padding: 26px 22px 24px;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.slide-in h2 { padding-right: 92px; }
.slide-in__close {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  cursor: pointer;
}
.slide-in__close:hover { background: var(--soft); }
@media (min-width: 768px) {
  .slide-in {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 60;
    width: 420px;
    max-width: calc(100vw - 2 * var(--gutter));
    max-height: calc(100vh - 2 * var(--gutter));
    margin: 0;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(24, 20, 61, .12);
  }
  .slide-in:not([hidden]) { animation: slide-in-enter .24s ease-out; }
}
@keyframes slide-in-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ----- Forms-host lifecycle pages ----------------------------------------- */
.lifecycle {
  background-color: var(--white);
  background-image: linear-gradient(180deg,
    var(--wash-top) 0%,
    var(--lavender) 22%,
    var(--wash-mid) 68%,
    var(--white) 100%);
  background-repeat: no-repeat;
  background-size: 100% 760px;
}
@media (min-width: 1024px) { .lifecycle { background-size: 100% 860px; } }
.lifecycle__main { padding-block: 26px var(--section); text-align: center; }
@media (min-width: 768px) { .lifecycle__main { padding-top: 34px; } }
.lifecycle__title { margin-inline: auto; max-width: 22ch; }
.lifecycle__panel { margin: 40px auto 0; max-width: 600px; text-align: left; }
@media (min-width: 1024px) { .lifecycle__panel { margin-top: 56px; } }
.lifecycle__panel > * + * { margin-top: 18px; }
.lifecycle__message { max-width: 62ch; }
.lifecycle__message a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.lifecycle__action { display: flex; justify-content: center; margin: 0; }
.lifecycle__action .btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 12px; cursor: pointer; }

/* ----- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide-in:not([hidden]) { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Page block: Privacy notice (/privacy-notice/), checklist item 03
   One reading column inside the shared shell, for the legal and policy pages.
   Nothing here matches anything on Home.
   ========================================================================== */
.aurora--legal { background-size: 100% 620px; }
@media (min-width: 768px)  { .aurora--legal { background-size: 100% 700px; } }
@media (min-width: 1024px) { .aurora--legal { background-size: 100% 820px; } }

.legal__opening { padding-block: 26px 0; }
@media (min-width: 768px) { .legal__opening { padding-top: 34px; } }
.legal__stamp { margin-top: 18px; color: var(--navy-quiet); }
@media (min-width: 1024px) { .legal__stamp { margin-top: 22px; } }

.legal__body { padding-block: var(--section); }
.legal__measure { max-width: min(66ch, 760px); margin-inline: auto; }   /* a reading measure, not a new site width */
.legal__intro > * + * { margin-top: 18px; }

.legal__section { margin-top: 52px; }
@media (min-width: 1024px) { .legal__section { margin-top: 64px; } }
.legal__section > * + * { margin-top: 18px; }
.legal__section > h2 + * { margin-top: 22px; }
.legal__label { font-weight: 600; }                     /* a body-size label, not a third heading tier */
.legal__section > .legal__label { margin-top: 30px; }

.legal ul { list-style: disc; padding-left: 22px; }
.legal li + li { margin-top: 12px; }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* ==========================================================================
   Page block: SuperPenguin one-pager (/resources/superpenguin-one-pager/), checklist item 23
   One short centred column: a quiet opening, one request panel and the
   article newsletter. Every selector is scoped to a class no other page
   carries, so nothing here reaches Home or another page.
   ========================================================================== */
.aurora--onepager { background-size: 100% 760px; }
@media (min-width: 768px)  { .aurora--onepager { background-size: 100% 880px; } }
@media (min-width: 1024px) { .aurora--onepager { background-size: 100% 980px; } }

.onepager-column { max-width: 760px; margin-inline: auto; }   /* a reading and form measure, not a new site width */

.onepager-open { padding-block: calc(var(--section) * 0.55) 0; }
.onepager-back { margin-bottom: 34px; }
@media (min-width: 768px) { .onepager-back { margin-bottom: 44px; } }
.onepager-open__inner { text-align: center; }
.onepager-pending { font-size: 15px; line-height: 1.5; }
.onepager-open__inner .title { margin-top: 22px; }
@media (min-width: 768px) { .onepager-open__inner .title { margin-top: 28px; } }
.onepager-open__inner > .title + .onepager-pending { margin-top: 20px; }
.onepager-lead { margin-top: 22px; max-width: 46ch; margin-inline: auto; }
@media (min-width: 1024px) { .onepager-lead { margin-top: 26px; } }

.onepager-form { padding-block: calc(var(--section) * 0.8) 0; }
/* From 768px the two name fields share one row; every other control keeps the full width. */
@media (min-width: 768px) {
  .onepager-panel .site-form fieldset { grid-template-columns: 1fr 1fr; }
  .onepager-panel .site-form fieldset > * { grid-column: 1 / -1; }
  .onepager-panel .site-form fieldset > .site-form__field:nth-of-type(1),
  .onepager-panel .site-form fieldset > .site-form__field:nth-of-type(2) { grid-column: span 1; }
}

.onepager-help { padding-block: calc(var(--section) * 0.6) 0; }
.onepager-help__line { text-align: center; }

.onepager-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.onepager-signup__panel { max-width: 680px; margin-inline: auto; }
.onepager-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Product updates (/product-updates/), checklist item 15
   A short centred opening, one light release index panel and the two complete
   release entries in a narrow reading column. This is a release-reading
   layout, not a narrower navbar or footer. Every selector is scoped to a
   class no other page carries.
   ========================================================================== */
.aurora--updates { background-size: 100% 620px; }
@media (min-width: 768px)  { .aurora--updates { background-size: 100% 700px; } }
@media (min-width: 1024px) { .aurora--updates { background-size: 100% 820px; } }

.updates-column { max-width: min(66ch, 760px); margin-inline: auto; }   /* a reading measure, not a new site width */

.updates-open { padding-block: calc(var(--section) * 0.55) 0; }
.updates-open__inner { text-align: center; }
.updates-open__inner .title { margin-top: 26px; }
@media (min-width: 768px) { .updates-open__inner .title { margin-top: 32px; } }
.updates-lead { margin: 20px 0 0; }
@media (min-width: 1024px) { .updates-lead { margin-top: 24px; } }

.updates-index { padding-block: calc(var(--section) * 0.7) 0; }
.updates-index__list { list-style: none; margin: 0; padding: 0; }
.updates-index__item + .updates-index__item {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);     /* one restrained rule, the items never become cards */
}
.updates-index__label { margin: 0; }
.updates-index__link { font-weight: 600; }
.updates-index__summary { margin: 4px 0 0; }

.updates-body { padding-block: var(--section); }
.updates-release + .updates-release {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 1024px) { .updates-release + .updates-release { margin-top: 76px; padding-top: 76px; } }
.updates-release > * + * { margin-top: 18px; }
.updates-release > h2 + .updates-release__date { margin-top: 10px; }
.updates-release > .updates-release__date + h3 { margin-top: 30px; }
.updates-release > p { margin-bottom: 0; }
.updates-release strong { font-weight: 600; }   /* a semibold body label, not a third heading tier */

/* The six recorded source images are not available. Each position shows one small ordinary
   note in a restrained frame: no image role, no reserved dimensions, no empty block. */
.updates-note {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}
.updates-release > .updates-note { margin-top: 24px; }
.updates-release > .updates-note + * { margin-top: 24px; }
.updates-open__inner .updates-note { display: inline-block; text-align: left; }

.updates-return { margin: 56px 0 0; }
@media (min-width: 1024px) { .updates-return { margin-top: 72px; } }
/* ==========================================================================
   Page block: Newsletter (/newsletter/), checklist item 07
   One short centred opening and one white form panel in a 600px column. The
   page carries the component's own words as its H1, so the panel holds the
   form alone. Every selector is scoped to a class no other page carries.
   ========================================================================== */
.aurora--newsletter { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--newsletter { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--newsletter { background-size: 100% 720px; } }

/* the shared 60/78/96 rhythm stays, with a generous run down to the navy footer */
.newsletter-page { padding-bottom: calc(var(--section) * 1.6); }

.newsletter-page__open { text-align: center; }
.newsletter-page__open .title { margin-inline: auto; max-width: 20ch; }
.newsletter-page__lead {
  margin: 20px auto 0;
  max-width: 46ch;          /* the supporting sentence keeps a reading measure at every width */
  color: var(--navy-quiet);
}
@media (min-width: 1024px) { .newsletter-page__lead { margin-top: 24px; } }

.newsletter-page__panel {
  margin: 40px auto 0;
  max-width: 600px;
  text-align: left;         /* label, input, consent and feedback stay left aligned */
}
@media (min-width: 768px)  { .newsletter-page__panel { margin-top: 48px; } }
@media (min-width: 1024px) { .newsletter-page__panel { margin-top: 56px; } }
/* the panel holds one form and no heading, so the fragment's own top margin is not wanted */
.newsletter-page__panel form { margin-top: 0; }
.newsletter-page__panel button { justify-self: stretch; text-align: center; }
@media (min-width: 480px) { .newsletter-page__panel button { justify-self: start; } }
.newsletter-page__panel .newsletter__consent,
.newsletter-page__panel .form-fallback { max-width: 52ch; }
/* ==========================================================================
   Page block: Penguin case study (/resources/penguin-case-study/), checklist item 16
   One historical article in a narrow reading column: a roomy continuous
   opening, left-aligned body copy, six quotations kept beside their
   attributions, one plain findings list and the bibliography. Every selector
   is scoped to .aurora--casestudy or a .casestudy-* class, which no other
   page carries, so Home and every earlier page are untouched. The block adds
   its own top padding and never overrides the shared 60/78/96px rhythm.
   ========================================================================== */
.aurora--casestudy { background-size: 100% 680px; }
@media (min-width: 768px)  { .aurora--casestudy { background-size: 100% 780px; } }
@media (min-width: 1024px) { .aurora--casestudy { background-size: 100% 900px; } }

.casestudy-column { max-width: min(66ch, 760px); margin-inline: auto; }   /* a reading measure, not a new site width */

.casestudy-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section padding stays below */
.casestudy-back { margin: 0; }
.casestudy-open > .wrap > .casestudy-column > * + * { margin-top: 24px; }
.casestudy-open .title { margin-top: 28px; }
@media (min-width: 768px) { .casestudy-open .title { margin-top: 34px; } }
.casestudy-byline { margin-top: 20px; }
.casestudy-archive { margin-top: 20px; }

.casestudy-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.casestudy-section + .casestudy-section { margin-top: 56px; }   /* whitespace between sections, no rules or cards */
@media (min-width: 1024px) { .casestudy-section + .casestudy-section { margin-top: 72px; } }
.casestudy-section > * + * { margin-top: 18px; }
.casestudy-section > h2 + * { margin-top: 22px; }

.casestudy-findings { list-style: disc; padding-left: 22px; }   /* three reported percentages, an ordinary list */
.casestudy-findings li + li { margin-top: 10px; }

/* The bibliography keeps the source's own numbering, so the printed (1) to (4) markers in the
   narrative still name the entry a reader lands on. */
.casestudy-references { list-style: decimal; padding-left: 26px; }
.casestudy-references li + li { margin-top: 12px; }
.casestudy-references li { padding-left: 4px; }

/* Each quotation keeps its own attribution. One restrained rule sets the six quotes apart from
   the numbers above them: no card, no rating, no portrait, no carousel. */
.casestudy-quote {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--edge);
}
@media (min-width: 768px) { .casestudy-quote { padding-left: 26px; } }
.casestudy-quote__text { margin: 0; }
.casestudy-quote__text p { font-size: 18px; line-height: 1.5; }
@media (min-width: 1024px) { .casestudy-quote__text p { font-size: 20px; } }
.casestudy-quote__source { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--navy-quiet); }
.casestudy-section > .casestudy-quote + * { margin-top: 30px; }

/* The recorded source images are not available. Each position shows one small ordinary note in a
   restrained frame, with its exact source caption beneath where one exists: no image element, no
   reserved dimensions, no invented alt text. */
.casestudy-pending {
  display: inline-block;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}
.casestudy-caption { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.casestudy-section > .casestudy-pending + .casestudy-caption { margin-top: 10px; }

.casestudy-action { margin-top: 30px; }
.casestudy-help { margin-top: 52px; }
@media (min-width: 1024px) { .casestudy-help { margin-top: 64px; } }

/* The printed (1) to (4) markers keep their exact characters. Padding inside the line gives each
   one a 24px tall touch target without changing the line box or the words around it. */
.casestudy-cite { text-decoration: underline; text-underline-offset: 3px; padding: 3px 2px; }

.casestudy-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.casestudy-signup__panel { max-width: 680px; margin-inline: auto; }
.casestudy-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Contact (/contact/), checklist item 06
   A short centred opening with its artwork first, then one left-aligned
   reading and form column. The two request forms are the only panels.
   Every selector is scoped to a class no other page carries.
   ========================================================================== */
.aurora--contact { background-size: 100% 900px; }
@media (min-width: 768px)  { .aurora--contact { background-size: 100% 1020px; } }
@media (min-width: 1024px) { .aurora--contact { background-size: 100% 1140px; } }

.contact-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.contact-open__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.contact-open__art {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  aspect-ratio: 1024 / 576;        /* the slot ratio is reserved before the file loads */
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .contact-open__art { max-width: 720px; } }
.contact-open__inner .title { margin-top: 30px; }
@media (min-width: 768px) { .contact-open__inner .title { margin-top: 38px; } }
.contact-open__action { margin-top: 26px; }

.contact-body { padding-top: 0; }
.contact-column { max-width: 760px; margin-inline: auto; }
.contact-column > * + * { margin-top: 44px; }
@media (min-width: 768px)  { .contact-column > * + * { margin-top: 52px; } }
@media (min-width: 1024px) { .contact-column > * + * { margin-top: 60px; } }

.contact-help__text { margin-top: 16px; max-width: 62ch; }

.contact-panel > h2 + * { margin-top: 18px; }
.contact-careers { max-width: 56ch; }
.contact-careers strong { color: var(--navy); font-weight: 600; }

.contact-utility > * + * { margin-top: 14px; }
.contact-utility__dot { padding-inline: 6px; color: var(--navy-quiet); }
.contact-utility__company { max-width: 62ch; }
.contact-utility__email { overflow-wrap: anywhere; }   /* the address breaks rather than widen the page when text is enlarged */

/* ==========================================================================
   Page block: Data protection family app (/resources/data-protection-overview-superpenguin-app/), checklist item 24
   One short centred opening, then a single left-aligned request column and
   the article newsletter well clear of it.

   Each block sets its OWN top padding and never touches the shared bottom
   padding, so the gap a reader sees between the opening and the request is
   exactly one shared section (60, 78 or 96px), and the gap before the
   optional signup is deliberately 2.5 of them. The opening itself starts
   0.6 of a section below the transparent navbar. Item 06's review found a
   page block that gave its opening a bottom padding of its own and broke
   that rhythm, which is why tests/test_dpo_app.py test 15 refuses any
   padding-bottom or padding-block shorthand in this block.

   Every selector is scoped to a class no other page carries, so nothing
   here reaches Home or another page.
   ========================================================================== */
.aurora--dpo-app { background-size: 100% 740px; }
@media (min-width: 768px)  { .aurora--dpo-app { background-size: 100% 860px; } }
@media (min-width: 1024px) { .aurora--dpo-app { background-size: 100% 960px; } }

.dpo-app-column { max-width: 760px; margin-inline: auto; }   /* a reading and form measure, not a new site width */

.dpo-app-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.dpo-app-back { margin-bottom: 34px; }
@media (min-width: 768px) { .dpo-app-back { margin-bottom: 44px; } }
.dpo-app-open__inner { text-align: center; }
.dpo-app-pending { font-size: 15px; line-height: 1.5; }
.dpo-app-open__inner .title { margin-top: 22px; }
@media (min-width: 768px) { .dpo-app-open__inner .title { margin-top: 28px; } }
.dpo-app-lead { margin-top: 22px; max-width: 46ch; margin-inline: auto; }
@media (min-width: 1024px) { .dpo-app-lead { margin-top: 26px; } }

.dpo-app-body { padding-top: 0; }                            /* one shared gap below the opening, not two */
.dpo-app-body .dpo-app-column > * + * { margin-top: 34px; }
@media (min-width: 768px) { .dpo-app-body .dpo-app-column > * + * { margin-top: 40px; } }
/* From 768px the two name fields share one row; every other control keeps the full width. */
@media (min-width: 768px) {
  .dpo-app-panel .site-form fieldset { grid-template-columns: 1fr 1fr; }
  .dpo-app-panel .site-form fieldset > * { grid-column: 1 / -1; }
  .dpo-app-panel .site-form fieldset > .site-form__field:nth-of-type(1),
  .dpo-app-panel .site-form fieldset > .site-form__field:nth-of-type(2) { grid-column: span 1; }
}
.dpo-app-help { text-align: center; }

.dpo-app-signup { padding-top: calc(var(--section) * 1.5); } /* the optional signup stands clear of the request */
.dpo-app-signup__panel { max-width: 680px; margin-inline: auto; }
.dpo-app-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Data protection clinical dashboard (/resources/data-protection-overview-superpenguin-web-dashboard/), checklist item 25
   One short centred opening, then a single left-aligned request column and
   the article newsletter well clear of it. The same shape as item 24's
   family-app page, because the two pages are the same page with a different
   document behind them.

   Each block sets its OWN top padding and never touches the shared bottom
   padding, so the gap a reader sees between the opening and the request is
   exactly one shared section (60, 78 or 96px), and the gap before the
   optional signup is deliberately 2.5 of them. The opening itself starts
   0.6 of a section below the transparent navbar. Item 06's review found a
   page block that gave its opening a bottom padding of its own and broke
   that rhythm, which is why tests/test_dpo_dashboard.py test 15 refuses any
   padding-bottom or padding-block shorthand in this block.

   Every selector is scoped to a class no other page carries, so nothing
   here reaches Home or another page.
   ========================================================================== */
.aurora--dpo-dashboard { background-size: 100% 740px; }
@media (min-width: 768px)  { .aurora--dpo-dashboard { background-size: 100% 860px; } }
@media (min-width: 1024px) { .aurora--dpo-dashboard { background-size: 100% 960px; } }

.dpo-dashboard-column { max-width: 760px; margin-inline: auto; }   /* a reading and form measure, not a new site width */

.dpo-dashboard-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.dpo-dashboard-back { margin-bottom: 34px; }
@media (min-width: 768px) { .dpo-dashboard-back { margin-bottom: 44px; } }
.dpo-dashboard-open__inner { text-align: center; }
.dpo-dashboard-pending { font-size: 15px; line-height: 1.5; }
.dpo-dashboard-open__inner .title { margin-top: 22px; }
@media (min-width: 768px) { .dpo-dashboard-open__inner .title { margin-top: 28px; } }
.dpo-dashboard-lead { margin-top: 22px; max-width: 46ch; margin-inline: auto; }
@media (min-width: 1024px) { .dpo-dashboard-lead { margin-top: 26px; } }

.dpo-dashboard-body { padding-top: 0; }                            /* one shared gap below the opening, not two */
.dpo-dashboard-body .dpo-dashboard-column > * + * { margin-top: 34px; }
@media (min-width: 768px) { .dpo-dashboard-body .dpo-dashboard-column > * + * { margin-top: 40px; } }
/* From 768px the two name fields share one row; every other control keeps the full width. */
@media (min-width: 768px) {
  .dpo-dashboard-panel .site-form fieldset { grid-template-columns: 1fr 1fr; }
  .dpo-dashboard-panel .site-form fieldset > * { grid-column: 1 / -1; }
  .dpo-dashboard-panel .site-form fieldset > .site-form__field:nth-of-type(1),
  .dpo-dashboard-panel .site-form fieldset > .site-form__field:nth-of-type(2) { grid-column: span 1; }
}
.dpo-dashboard-help { text-align: center; }

.dpo-dashboard-signup { padding-top: calc(var(--section) * 1.5); } /* the optional signup stands clear of the request */
.dpo-dashboard-signup__panel { max-width: 680px; margin-inline: auto; }
.dpo-dashboard-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Innovate UK announcement (/resources/innovate-uk-grant/), checklist item 17
   One short historical announcement in a narrow reading column: a roomy
   continuous opening with its short title group centred, three left-aligned
   paragraphs of body copy and two closing actions. Every selector is scoped
   to .aurora--innovate or an .innovate-* class, which no other page carries,
   so Home and every earlier page are untouched. The block adds its own top
   padding and never overrides the shared 60/78/96px rhythm.
   ========================================================================== */
.aurora--innovate { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--innovate { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--innovate { background-size: 100% 720px; } }

.innovate-column { max-width: min(66ch, 760px); margin-inline: auto; }   /* a reading measure, not a new site width */

.innovate-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section padding stays below */
.innovate-back { margin: 0; }

/* The short title group is centred, as the shared contract allows for short groups and artwork.
   Centring the column is what puts the hero note's own box in the middle, not only its words.
   The back link keeps the reading alignment, and the body copy below stays left aligned because
   it is prose and not a short group. */
.innovate-open > .wrap > .innovate-column { text-align: center; }
.innovate-open > .wrap > .innovate-column > * + * { margin-top: 24px; }
.innovate-back { text-align: left; }
.innovate-open .title { margin-top: 28px; }
@media (min-width: 768px) { .innovate-open .title { margin-top: 34px; } }
.innovate-byline { margin-top: 20px; }
.innovate-notice { margin-top: 20px; max-width: 52ch; margin-inline: auto; }

.innovate-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.innovate-body > .wrap > .innovate-column > * + * { margin-top: 22px; }

/* The two recorded source images are not available. Each position shows one small ordinary note
   in a restrained frame: no image element, no reserved dimensions, no invented alt text and no
   caption, because the source records none for either occurrence. */
.innovate-pending {
  display: inline-block;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}

.innovate-action { margin-top: 30px; }
.innovate-help { margin-top: 52px; }
@media (min-width: 1024px) { .innovate-help { margin-top: 64px; } }

.innovate-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.innovate-signup__panel { max-width: 680px; margin-inline: auto; }
.innovate-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Penguin closing article (/resources/penguin-closing/), checklist item 18
   One short historical article in a narrow reading column: a roomy continuous
   opening with its short title group centred, four left-aligned paragraphs of
   body copy, two named review notes with the one source caption, and two
   closing actions that sit together and wrap. Every selector is scoped to
   .aurora--penguinclose or a .penguinclose-* class, which no other page
   carries, so Home and every earlier page are untouched. The block adds its
   own top spacing and never changes the shared 60/78/96px rhythm.
   ========================================================================== */
.aurora--penguinclose { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--penguinclose { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--penguinclose { background-size: 100% 720px; } }

.penguinclose-column { max-width: min(66ch, 760px); margin-inline: auto; }   /* a reading measure, not a new site width */

.penguinclose-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section spacing stays below */
.penguinclose-back { margin: 0; }

/* The short title group is centred, as the shared contract allows for short groups and artwork.
   Centring the column is what puts the hero note's own box in the middle, not only its words.
   The back link keeps the reading alignment, and the body copy below stays left aligned because
   it is prose and not a short group. */
.penguinclose-open > .wrap > .penguinclose-column { text-align: center; }
.penguinclose-back { text-align: left; }

/* The stacking rule below sets the default gap between the opening's children, and each element
   that wants a different one restates the SAME child chain. A single-class rule would lose:
   `.penguinclose-open > .wrap > .penguinclose-column > * + *` carries three classes, so a bare
   `.penguinclose-byline { margin-top: 20px }` never renders and the designed rhythm is silently
   the default everywhere. Measured on the built page, not assumed: the desktop and mobile rounds
   read every one of these gaps back out of the browser. */
.penguinclose-open > .wrap > .penguinclose-column > * + * { margin-top: 24px; }
.penguinclose-open > .wrap > .penguinclose-column > .title { margin-top: 28px; }
@media (min-width: 768px) {
  .penguinclose-open > .wrap > .penguinclose-column > .title { margin-top: 34px; }
}
.penguinclose-open > .wrap > .penguinclose-column > .penguinclose-byline { margin-top: 20px; }
.penguinclose-open > .wrap > .penguinclose-column > .penguinclose-archive { margin-top: 20px; }
.penguinclose-archive { max-width: 52ch; margin-inline: auto; }

.penguinclose-body { padding-top: 0; }   /* the opening's shared lower spacing carries this join */
.penguinclose-body > .wrap > .penguinclose-column > * + * { margin-top: 22px; }

/* The three recorded source images are not available. Each position shows one small ordinary
   note in a restrained frame: no image element, no reserved dimensions, no invented alt text.
   The second occurrence keeps the one exact caption source 05 records for it, directly below
   its note, and the first has none because the source records none. */
.penguinclose-pending {
  display: inline-block;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}
.penguinclose-caption { font-size: 15px; line-height: 1.55; max-width: 52ch; }
/* the caption belongs to the note above it, so it sits closer than an ordinary paragraph */
.penguinclose-body > .wrap > .penguinclose-column > .penguinclose-caption { margin-top: 10px; }

/* The source writes the two closing actions on one line with its own separator. They sit
   together, wrap when the line runs out and keep comfortable space between the two targets. */
.penguinclose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 16px;
}
.penguinclose-body > .wrap > .penguinclose-column > .penguinclose-actions { margin-top: 30px; }
.penguinclose-body > .wrap > .penguinclose-column > .penguinclose-help { margin-top: 52px; }
@media (min-width: 1024px) {
  .penguinclose-body > .wrap > .penguinclose-column > .penguinclose-help { margin-top: 64px; }
}

.penguinclose-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.penguinclose-signup__panel { max-width: 680px; margin-inline: auto; }
.penguinclose-signup__panel form { max-width: 440px; }
/* ==========================================================================
   Page block: Press (/press/), checklist item 27
   A short centred opening title, then one left-aligned reading column at the
   shared 760px measure holding four open editorial sections: the company
   description with its Our story link, the one restrained press-kit panel
   with the kit request inside it, the single coverage entry, and the contact
   line. There is no hero, no artwork and no card grid, because the source
   supplies none. Every selector is scoped to .aurora--press or a .press-*
   class, which no other page carries, so Home and every earlier page render
   exactly as before.

   What it does to spacing, exactly: it sets its OWN opening's top padding to
   0.6 of the shared section and its OWN body section's top padding to 0, so
   the opening's shared bottom padding carries the join, one section unit at
   96/78/60 for 1440/768/390. Every gap between the four sections below is a
   margin on this page's own column. It sets no bottom padding anywhere and
   changes nothing outside its own sections, so no other page's rhythm moves.
   ========================================================================== */
.aurora--press { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--press { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--press { background-size: 100% 720px; } }

.press-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.press-open__inner { text-align: center; }

.press-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join */

/* One reading column for the whole page, at the shared measure. */
.press-column { max-width: 760px; margin-inline: auto; }
.press-column > * + * { margin-top: 44px; }
@media (min-width: 768px)  { .press-column > * + * { margin-top: 52px; } }
@media (min-width: 1024px) { .press-column > * + * { margin-top: 60px; } }

/* Every section reads heading, then text, then its action. */
.press-about > * + *, .press-news > * + * { margin-top: 18px; }
.press-contact > * + * { margin-top: 18px; }
.press-about__text { max-width: 62ch; }
.press-news__text { max-width: 62ch; }
.press-contact__text { max-width: 62ch; }
.press-about__action { margin-top: 20px; }

.press-kit__panel > * + * { margin-top: 18px; }
.press-kit__text { max-width: 56ch; }
.press-kit__panel form { margin-top: 28px; }
@media (min-width: 768px) { .press-kit__panel form { margin-top: 32px; } }

/* From 768px the two name fields share one row, which the brief allows while
   the labels and their error lines still fit. Email, organisation and every
   other control span the form, and below 768px every field stacks in DOM
   order, exactly as the shared fragment renders them. */
@media (min-width: 768px) {
  .press-kit__panel .site-form fieldset { grid-template-columns: 1fr 1fr; }
  .press-kit__panel .site-form fieldset > * { grid-column: 1 / -1; }
  .press-kit__panel .site-form fieldset > .site-form__field:nth-of-type(1),
  .press-kit__panel .site-form fieldset > .site-form__field:nth-of-type(2) { grid-column: span 1; }
}

/* The coverage label is the source's own bold line, with the date in a <time>
   element. It identifies the coverage and is never a badge or an endorsement. */
.press-news__source strong { font-weight: 600; }
.press-news__source time { font-weight: inherit; }

/* The two story links. Below the transition they stack, one to a row, which
   keeps them separated for a touch and stops a line ending on the separator.
   The separator is decorative and aria-hidden, so it is painted only where the
   two links share a row. */
.press-news__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.press-news__dot { display: none; }
@media (min-width: 768px) {
  .press-news__links { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
  .press-news__dot { display: inline; color: var(--navy-quiet); }
}

/* The address breaks rather than widen the page when text is enlarged. */
.press-contact__email { overflow-wrap: anywhere; }

/* ==========================================================================
   Page block: Evidence (/evidence/), checklist item 08
   A short centred opening whose artwork comes first, then the five jump
   links, the two family measures side by side from 1024px, and one
   left-aligned reading column for everything below: the parent hopes, the
   five attributed quotations, the historical evaluation, the research
   sentence, the two source tables and the closed commissioning disclosure.
   Every selector is scoped to .aurora--evidence or an .evidence-* class,
   which no other page carries, so Home and every earlier page render
   exactly as before.

   What it does to spacing, exactly: it sets its OWN opening's top padding to
   0.6 of the shared section and its OWN first following section's top
   padding to 0, which is how the opening's shared bottom padding carries the
   first join. That reproduces Home's own measured joins, the first at
   96/78/60 and every later one at 192/156/120 at 1440/768/390. It sets no
   lower padding on any section and changes nothing outside its own
   sections, so no other page's rhythm moves.
   ========================================================================== */
.aurora--evidence { background-size: 100% 820px; }
@media (min-width: 768px)  { .aurora--evidence { background-size: 100% 940px; } }
@media (min-width: 1024px) { .aurora--evidence { background-size: 100% 1060px; } }

.evidence-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.evidence-open__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.evidence-open__art {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1024 / 576;        /* the slot ratio is reserved before the file loads */
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .evidence-open__art { max-width: 640px; } }
.evidence-open__inner .title { margin-top: 30px; }
@media (min-width: 768px) { .evidence-open__inner .title { margin-top: 36px; } }

/* Five ordinary links that wrap, never a tab strip and never a sticky bar. Each list item keeps
   its own separator, so a dot can never be orphaned onto a line of its own. The dot is
   decorative and hidden from assistive technology. */
.evidence-jump { margin-top: 26px; }
@media (min-width: 768px) { .evidence-jump { margin-top: 30px; } }
.evidence-jump__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
}
.evidence-jump__link { padding-inline: 2px; }
.evidence-jump__dot { margin-left: 6px; color: var(--navy-quiet); }

/* One reading column for every section below the two measures, at the shared measure. */
.evidence-column { max-width: 760px; margin-inline: auto; }
.evidence-column > * + * { margin-top: 18px; }
.evidence-column > h2 + * { margin-top: 22px; }
/* The two tables use the full reading width, which is the same 760px, so the frame below only
   needs to be told never to force the page sideways. */
.evidence-column--table { max-width: 760px; }

.evidence-family { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.evidence-family__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .evidence-family__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
}
.evidence-measure > * + * { margin-top: 16px; }
/* A figure size, not a new heading tier: the same data style Home uses for its two verified
   measures, so the page shows one clear value and no duplicated large number plus icon. */
.evidence-measure__value {
  display: block;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 18px;
}
@media (min-width: 768px) { .evidence-measure__value { font-size: 48px; } }
@media (min-width: 1024px) { .evidence-measure__value { font-size: 62px; } }
.evidence-measure__method { max-width: 46ch; }

/* The hopes are an open editorial section, never a third measure: no panel, no figure size and
   no attribution, because both are anonymous. */
.evidence-hope {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--edge);
  max-width: 62ch;
}
@media (min-width: 768px) { .evidence-hope { padding-left: 26px; } }
.evidence-hope p { font-size: 18px; line-height: 1.5; }
@media (min-width: 1024px) { .evidence-hope p { font-size: 20px; } }
.evidence-column > .evidence-hope + .evidence-hope { margin-top: 30px; }
.evidence-hopes__label { margin-top: 26px; }

.evidence-clinician__context { max-width: 62ch; }

/* Each quotation keeps its own attribution beside it, and Dori's and Sharon's earlier-Penguin
   labels stay inside their own figures. One restrained rule, no card, no rating, no portrait,
   no avatar and no carousel. */
.evidence-quote {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--edge);
  max-width: 62ch;
}
@media (min-width: 768px) { .evidence-quote { padding-left: 26px; } }
.evidence-quote__text { margin: 0; }
.evidence-quote__text p { font-size: 18px; line-height: 1.5; }
@media (min-width: 1024px) { .evidence-quote__text p { font-size: 20px; } }
.evidence-quote__source { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--navy-quiet); }
/* The earlier-Penguin label sits immediately after its own quote rather than inside the figure,
   because a figure holds flow content and then one figcaption and html-validate refuses a
   paragraph after the caption. It is spaced tight to the quote above it and the next quote keeps
   its full gap, so the label stays visibly attached to the speaker it belongs to. */
.evidence-quote__note { font-size: 15px; line-height: 1.5; }
.evidence-column > .evidence-quote + .evidence-quote__note { margin-top: 10px; }
.evidence-column > .evidence-quote + .evidence-quote,
.evidence-column > .evidence-quote__note + .evidence-quote { margin-top: 34px; }

.evidence-action { margin-top: 26px; }

/* The two inline source links keep their visible words and get a 24px tall target without
   changing the line box around them. */
.evidence-cite { padding-block: 3px; }

.evidence-scale__value { font-weight: 600; font-size: 22px; line-height: 1.3; }
@media (min-width: 1024px) { .evidence-scale__value { font-size: 26px; } }

/* Both source tables are real tables at every width. Cells wrap rather than clip, shrink or push
   the page sideways, and every association is kept: a column header for each column and a row
   header for each row. No table image and no second hidden mobile copy. */
.evidence-table__frame {
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  overflow: hidden;                /* the rounded corners clip the first and last rows */
}
.evidence-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
}
@media (min-width: 1024px) { .evidence-table { font-size: 16px; } }
.evidence-table th,
.evidence-table td {
  padding: 14px 14px;
  vertical-align: top;
  overflow-wrap: anywhere;         /* a long figure can never widen the page at 320px */
  hyphens: auto;
}
@media (min-width: 768px) { .evidence-table th, .evidence-table td { padding: 18px 20px; } }
.evidence-table thead th {
  font-weight: 600;
  background: var(--tint);
  border-bottom: 1px solid var(--edge);
}
.evidence-table tbody th { font-weight: 600; }
.evidence-table tbody tr + tr th,
.evidence-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.evidence-table--wide tbody th { width: 34%; }

.evidence-limit { margin-top: 20px; max-width: 62ch; }

/* One native disclosure, closed on load, with all twelve rows already in the page. The summary
   is a control in the existing functional style, never a third heading, and the sentence that
   qualifies the table sits outside it and stays visible either way. */
.evidence-disclosure {
  margin-top: 26px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.evidence-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 16px;
}
@media (min-width: 1024px) { .evidence-disclosure > summary { padding: 22px 24px; font-size: 18px; } }
.evidence-disclosure > summary::-webkit-details-marker { display: none; }
.evidence-disclosure > summary::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: translateY(-3px) rotate(45deg);
}
.evidence-disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* the disclosure clips at its rounded corners, so keep the ring inside it */
.evidence-disclosure > summary:focus-visible { outline-offset: -4px; border-radius: 0; }
.evidence-disclosure__body { padding: 0 14px 18px; }
@media (min-width: 768px) { .evidence-disclosure__body { padding: 0 20px 20px; } }

.evidence-close__inner { text-align: center; }
.evidence-close__inner p { margin-inline: auto; }
.evidence-close__action { margin-top: 28px; }
/* "Talk through the evidence" is a long label. The shared button keeps its label on one line,
   which is right for Home's short ones, but at twice the text size on a 390px or 320px screen
   this one runs past the right edge and Home's do not. Only this page's own action is allowed to
   wrap. It keeps the shared pill, its 52px minimum height and its padding: a wrapped label makes
   the button taller, never wider than the screen. */
.evidence-close__action .btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

/* ==========================================================================
   Page block: NIHR brain-injury announcement (/resources/nihr-grant-2/), checklist item 19
   One short historical announcement in a narrow reading column: a roomy
   continuous opening with its short title group centred, two left-aligned
   paragraphs of body copy with one review note between them, and two closing
   actions. Every selector is scoped to .aurora--brainj or a .brainj-* class,
   which no other page carries, so Home and every earlier page are untouched.
   The block adds its own top padding and never overrides the shared
   60/78/96px section rhythm.

   Every rule that changes a stacked gap restates the SAME child chain as the
   stacking rule beside it. A bare `.brainj-byline { margin-top: 20px }`
   carries one class (0,1,0) and
   `.brainj-open > .wrap > .brainj-column > * + *` carries three (0,3,0), so
   the single-class rule would never render and the designed rhythm would
   silently be the default everywhere. Checklist item 18 shipped that defect,
   found it only in an independent review, and the desktop and mobile rounds
   for this page measure every one of these gaps back out of the browser
   rather than trusting the stylesheet.
   ========================================================================== */
.aurora--brainj { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--brainj { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--brainj { background-size: 100% 720px; } }

.brainj-column { max-width: min(66ch, 760px); margin-inline: auto; overflow-wrap: anywhere; }   /* a reading measure, not a new site width; the long partner names and the utility address never widen it */

.brainj-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section padding stays below */

/* The short title group is centred, as the shared contract allows for short groups and artwork.
   Centring the column is what puts the hero note's own box in the middle, not only its words.
   The back link keeps the reading alignment, and the body copy below stays left aligned because
   it is prose and not a short group. */
.brainj-open > .wrap > .brainj-column { text-align: center; }
.brainj-back { text-align: left; }

.brainj-open > .wrap > .brainj-column > * + * { margin-top: 24px; }
.brainj-open > .wrap > .brainj-column > .title { margin-top: 28px; }
@media (min-width: 768px) {
  .brainj-open > .wrap > .brainj-column > .title { margin-top: 34px; }
}
.brainj-open > .wrap > .brainj-column > .brainj-byline { margin-top: 20px; }
.brainj-open > .wrap > .brainj-column > .brainj-notice { margin-top: 20px; }
.brainj-notice { max-width: 52ch; margin-inline: auto; }

.brainj-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.brainj-body > .wrap > .brainj-column > * + * { margin-top: 22px; }

/* The recorded hero and the one source-05 body occurrence are not available. Each position shows
   one small ordinary note in a restrained frame: no image element, no reserved dimensions, no
   invented alt text and no caption, because the source records none for either occurrence. */
/* No margin is written here on purpose. The shared reset already gives every paragraph
   `margin: 0`, and a single-class `margin` set beside the three-class stacking rule above would
   never render its top value anyway: that is the shape an independent review found in this
   block, and the shape item 18 shipped as a real defect. */
.brainj-pending {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}

.brainj-body > .wrap > .brainj-column > .brainj-actions { margin-top: 30px; }
.brainj-body > .wrap > .brainj-column > .brainj-help { margin-top: 52px; }
@media (min-width: 1024px) {
  .brainj-body > .wrap > .brainj-column > .brainj-help { margin-top: 64px; }
}

.brainj-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.brainj-signup__panel { max-width: 680px; margin-inline: auto; }
.brainj-signup__panel form { max-width: 440px; }
/* ==========================================================================
   Page block: Stammering-AI article (/resources/stammering-ai/), checklist item 20
   One short historical article in a narrow reading column: a roomy continuous
   opening with its short title group centred, three left-aligned paragraphs of
   body copy with one review note above them, and two closing actions. Every
   selector is scoped to .aurora--stamai or a .stamai-* class, which no other
   page carries, so Home and every earlier page are untouched.

   What this block does to the shared section rhythm, stated exactly, because
   an independent review found the sentence that used to stand here ("adds its
   own top padding and never overrides the shared rhythm") false about the
   three rules below it. `.section` sets `padding-block: var(--section)`, which
   computes to 60/78/96px at 390/768/1440. Three rules here REPLACE part of
   that at the same specificity, deliberately, and both browser rounds measure
   the result rather than trusting it:
     .stamai-open    top padding becomes 0.55 of a section unit, so the opening
                     starts closer to the header than a full section would
     .stamai-body    top padding becomes 0, so the opening's own shared bottom
                     padding carries the one-unit join to the body
     .stamai-signup  bottom padding becomes 1.4 units, so the newsletter panel
                     has room below it before the footer
   Nothing else here touches the shared rhythm and no rule changes `--section`
   itself, so every other section on the page keeps the shared value.

   Every rule that changes a stacked gap restates the SAME child chain as the
   stacking rule beside it. A bare `.stamai-byline { margin-top: 20px }`
   carries one class (0,1,0) and
   `.stamai-open > .wrap > .stamai-column > * + *` carries three (0,3,0), so
   the single-class rule would never render and the designed rhythm would
   silently be the default everywhere. Checklist item 18 shipped that defect
   and an independent review of item 19 then found the same shape spelled with
   the `margin` shorthand, which its own guard could not see. No single-class
   `margin`, `margin-top` or `margin-block` is written anywhere in this block,
   probe_stylesheet_scope.py refuses one in either spelling, and the desktop
   and mobile rounds measure every designed gap back out of the browser rather
   than trusting the stylesheet.
   ========================================================================== */
.aurora--stamai { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--stamai { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--stamai { background-size: 100% 720px; } }

.stamai-column { max-width: min(66ch, 760px); margin-inline: auto; overflow-wrap: anywhere; }   /* a reading measure, not a new site width; the author's full name and role never widen it */

.stamai-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section padding stays below */

/* The short title group is centred, as the shared contract allows for short groups and artwork.
   Centring the column is what puts the hero note's own box in the middle, not only its words.
   The back link keeps the reading alignment, and the body copy below stays left aligned because
   it is prose and not a short group. */
.stamai-open > .wrap > .stamai-column { text-align: center; }
.stamai-back { text-align: left; }

.stamai-open > .wrap > .stamai-column > * + * { margin-top: 24px; }
.stamai-open > .wrap > .stamai-column > .title { margin-top: 28px; }
@media (min-width: 768px) {
  .stamai-open > .wrap > .stamai-column > .title { margin-top: 34px; }
}
.stamai-open > .wrap > .stamai-column > .stamai-byline { margin-top: 20px; }
.stamai-open > .wrap > .stamai-column > .stamai-notice { margin-top: 20px; }
.stamai-notice { max-width: 52ch; margin-inline: auto; }

.stamai-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.stamai-body > .wrap > .stamai-column > * + * { margin-top: 22px; }

/* The recorded hero and the one source-05 body occurrence are not available. Each position shows
   one small ordinary note in a restrained frame: no image element, no reserved dimensions, no
   invented alt text and no caption, because the source records none for either occurrence.
   No margin is written here on purpose. The body note is the FIRST child of the body column, so
   the `* + *` rule above never reaches it and a margin-top written for it would be a dead
   declaration; the hero note is not first, so it takes the opening column's own 24px gap. The
   shared reset already gives every paragraph `margin: 0`. */
.stamai-pending {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}

.stamai-body > .wrap > .stamai-column > .stamai-actions { margin-top: 30px; }
.stamai-body > .wrap > .stamai-column > .stamai-help { margin-top: 52px; }
@media (min-width: 1024px) {
  .stamai-body > .wrap > .stamai-column > .stamai-help { margin-top: 64px; }
}

.stamai-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.stamai-signup__panel { max-width: 680px; margin-inline: auto; }
.stamai-signup__panel form { max-width: 440px; }
/* ==========================================================================
   Page block: BBC article (/resources/bbc-news/), checklist item 21
   One short historical article in a narrow reading column: a roomy continuous
   opening with its short title group centred, two left-aligned paragraphs of
   body copy with one review note between them, and two closing actions. Every
   selector is scoped to .aurora--bbcnews or a .bbcnews-* class, which no other
   page carries, so Home and every earlier page are untouched.

   What this block does to the shared section rhythm, stated exactly, because
   an independent review of item 20 found the inherited sentence ("adds its own
   top padding and never overrides the shared rhythm") false about the three
   rules below it. `.section` sets `padding-block: var(--section)`, which
   computes to 60/78/96px at 390/768/1440. Three rules here REPLACE part of
   that at the same specificity, deliberately, and both browser rounds measure
   the result rather than trusting it:
     .bbcnews-open    top padding becomes 0.55 of a section unit, so the opening
                      starts closer to the header than a full section would
     .bbcnews-body    top padding becomes 0, so the opening's own shared bottom
                      padding carries the one-unit join to the body
     .bbcnews-signup  bottom padding becomes 1.4 units, so the newsletter panel
                      has room below it before the footer
   Nothing else here touches the shared rhythm and no rule changes `--section`
   itself, so every other section on the page keeps the shared value.

   Every rule that changes a stacked gap restates the SAME child chain as the
   stacking rule beside it. A bare `.bbcnews-byline { margin-top: 20px }`
   carries one class (0,1,0) and
   `.bbcnews-open > .wrap > .bbcnews-column > * + *` carries three (0,3,0), so
   the single-class rule would never render and the designed rhythm would
   silently be the default everywhere. Checklist item 18 shipped that defect
   and an independent review of item 19 then found the same shape spelled with
   the `margin` shorthand, which its own guard could not see. No single-class
   `margin`, `margin-top`, `margin-block` or `margin-block-start` is written
   anywhere in this block, probe_stylesheet_scope.py refuses one in every
   spelling, and the desktop and mobile rounds measure every designed gap back
   out of the browser rather than trusting the stylesheet.
   ========================================================================== */
.aurora--bbcnews { background-size: 100% 560px; }
@media (min-width: 768px)  { .aurora--bbcnews { background-size: 100% 640px; } }
@media (min-width: 1024px) { .aurora--bbcnews { background-size: 100% 720px; } }

.bbcnews-column { max-width: min(66ch, 760px); margin-inline: auto; overflow-wrap: anywhere; }   /* a reading measure, not a new site width; the author's full name with his PhD, the family name Brigden-McLean and the organisation name Action for Stammering Children never widen it */

.bbcnews-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section padding stays below */

/* The short title group is centred, as the shared contract allows for short groups and artwork.
   Centring the column is what puts the hero note's own box in the middle, not only its words.
   The back link keeps the reading alignment, and the body copy below stays left aligned because
   it is prose and not a short group. */
.bbcnews-open > .wrap > .bbcnews-column { text-align: center; }
.bbcnews-back { text-align: left; }

.bbcnews-open > .wrap > .bbcnews-column > * + * { margin-top: 24px; }
.bbcnews-open > .wrap > .bbcnews-column > .title { margin-top: 28px; }
@media (min-width: 768px) {
  .bbcnews-open > .wrap > .bbcnews-column > .title { margin-top: 34px; }
}
.bbcnews-open > .wrap > .bbcnews-column > .bbcnews-byline { margin-top: 20px; }
.bbcnews-open > .wrap > .bbcnews-column > .bbcnews-notice { margin-top: 20px; }
.bbcnews-notice { max-width: 52ch; margin-inline: auto; }

.bbcnews-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.bbcnews-body > .wrap > .bbcnews-column > * + * { margin-top: 22px; }

/* The recorded hero and the one source-05 body occurrence are not available. Each position shows
   one small ordinary note in a restrained frame: no image element, no reserved dimensions, no
   invented alt text and no caption, because the source records none for either occurrence.
   No margin is written here on purpose, and the reason differs from the sibling article blocks
   this one is copied from. Source 05 records this article's body occurrence at line 385, BETWEEN
   the two story paragraphs, so unlike item 20's body note this one is NOT the first child of the
   body column: it takes the 22px `* + *` gap above, and the involvement paragraph after it takes
   the same gap. The hero note is not first either, so it takes the opening column's own 24px gap.
   The shared reset already gives every paragraph `margin: 0`, so a rule here would add nothing. */
.bbcnews-pending {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}

.bbcnews-body > .wrap > .bbcnews-column > .bbcnews-actions { margin-top: 30px; }
.bbcnews-body > .wrap > .bbcnews-column > .bbcnews-help { margin-top: 52px; }
@media (min-width: 1024px) {
  .bbcnews-body > .wrap > .bbcnews-column > .bbcnews-help { margin-top: 64px; }
}

.bbcnews-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.bbcnews-signup__panel { max-width: 680px; margin-inline: auto; }
.bbcnews-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Public Organisations (/solutions/public-organisations/), checklist items 11 and 12
   One block for the merged page that replaces the V6 Population access and
   Referral access pages. Both of their old blocks were dropped rather than
   merged: every selector in them was a V4-era class (population-*, referral-*)
   that the V6 markup had already stopped using, so 46 of their 47 selectors
   matched nothing on either page. Only the section this page genuinely adds
   needs its own rules, and it is the two-routes opening.

   Everything else on the page is shared: the hero, the combined-routes
   diagram, the support tables, the triangle, the rollout band, the team-case
   cards and the commissioner kit all render on classes v2.css, v3.css and
   v4.css already own. Nothing here is scoped more widely than #two-routes or
   the .v2-routes class, which no other page carries.
   ========================================================================== */

/* The two route cards. .v2-split is a two-column grid at every width, so the
   stack below the shared 1024px line has to be asked for. Postcode Access is
   first in source order, which is also the order it must read in when stacked. */
.v2-routes { gap: 32px; align-items: stretch; margin-top: 40px; }
.v2-routes > .v2-card { gap: 16px; }
.v2-routes .v2-card p { margin: 0; }
/* The two phones are different shapes, so a max-height alone leaves one card's picture
   noticeably smaller than the other's and the captions below them stop lining up. Fix the
   frame instead of the picture. */
.v2-routes .v2-card p:has(img) { display: flex; align-items: center; justify-content: center; height: 300px; margin: 0; }
.v2-routes .v2-card img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1023.98px) {
  .v2-routes { grid-template-columns: 1fr; gap: 24px; max-width: 560px; margin-inline: auto; }
}

/* The three shared steps. .v2-flow is a four-column grid built for the four
   cards the old Population access page carried. This page has three, so the
   fourth column would sit empty at desktop. The shared rule stacks the list at
   1000px, and this section's line is 1024px, so the band between the two is
   given the same stacked treatment rather than left as one wide column. */
#two-routes .v2-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The shared flow list paints its first card as the way in: a filled panel and a bigger
   heading. That was right on the old Population access page, whose first card really was
   "Families enter their postcode". On this page the way in is the two route cards above, and
   these three are equal steps that both routes share, so the highlight would point at the
   wrong thing. Only this section is levelled: every other flow list on the site keeps it. */
#two-routes .v2-flow > li:first-child { background: #fff; border-color: var(--v2-line); }
#two-routes .v2-flow > li:first-child h3 { font-size: 19px; }
@media (max-width: 1023.98px) {
  #two-routes .v2-flow { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; gap: 40px; }
  #two-routes .v2-flow > li { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 0 24px; }
  #two-routes .v2-flow img { grid-row: 1 / 3; height: 210px; margin: 0; }
  #two-routes .v2-flow > li:not(:last-child)::after { content: "\2193"; display: block; top: auto; bottom: -35px; right: calc(50% - 8px); }
}

/* ==========================================================================
   Page block: Home, the v7 two-card solutions row
   Home listed three solutions and now lists two. .v2-cards is a three-column
   grid, which would leave a gap at the end of the row, so the solutions row
   alone asks for two columns. Every other .v2-cards row on the site still
   carries three cards and is untouched.
   ========================================================================== */
#solutions .v2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
@media (max-width: 900px) {
  #solutions .v2-cards { grid-template-columns: 1fr; max-width: 520px; }
}

/* ==========================================================================
   Page block: Pricing (/pricing/), checklist item 09
   A short centred opening with the two jump links, then the dated snapshot
   label and two roomy plan panels: a narrower Free panel beside the larger
   Premium panel from 1024px, stacked in source order below that. Premium
   carries the inclusions, the review controls and the summary, with the
   licence and reset definitions in plain sight beside them. The services
   section stays open below, with generous separation from the navy footer.
   Every selector is scoped to .aurora--pricing or a .pricing-* class, which
   no other page carries, so Home and every earlier page are untouched.
   No rule here uses a descendant * + * selector: item 18 recorded that such
   a rule outranks the single-class rules beside it and silently loses their
   designed gaps, so every gap below is set on the element that owns it.
   ========================================================================== */
.aurora--pricing { background-size: 100% 640px; }
@media (min-width: 768px)  { .aurora--pricing { background-size: 100% 740px; } }
@media (min-width: 1024px) { .aurora--pricing { background-size: 100% 860px; } }

/* The opening sets its OWN top padding and NOTHING else about the section box, so the
   opening's shared bottom padding carries the join to the body: one shared section, 96/78/60
   at 1440/768/390, the shape Contact settled and items 12, 17, 24 and 25 copied. The body
   takes no top padding, so the join is one unit and not two. Neither section gains a bottom
   padding in any spelling: item 06's review found a page block that gave its opening one and
   silently broke the rhythm. The generous run down to the navy footer is added as the LAST
   element's own bottom margin, which adds to the shared section padding instead of replacing
   it. */
.pricing-open { padding-top: calc(var(--section) * 0.6); }
.pricing-body { padding-top: 0; }

.pricing-open__inner { text-align: center; }
.pricing-open__inner .title { margin-inline: auto; max-width: 18ch; }
.pricing-open__jump { margin-top: 20px; }
@media (min-width: 1024px) { .pricing-open__jump { margin-top: 24px; } }
.pricing-open__dot { margin-inline: 10px; color: var(--navy-quiet); }
/* the two jump links sit on one line at a comfortable width and wrap as a pair when narrow */
.pricing-open__link { display: inline-block; }

.pricing-practice { margin: 0; }
.pricing-snapshot { margin: 0; text-align: center; color: var(--navy-quiet); font-size: 16px; }
/* The site ships Inter 400 and 600 only, so a bare <strong> asks for 700 and the browser
   synthesises it. This page's two source-bold runs, the dated label and the price line, pin 600,
   the same pin four sibling page blocks already carry for the same reason. The desktop round
   found this: it measures the weights actually painted, and read 700 in all three engines. */
.pricing-snapshot strong,
.pricing-plan__price strong { font-weight: 600; }

.pricing-plans { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 768px)  { .pricing-plans { gap: 28px; margin-top: 40px; } }
@media (min-width: 1024px) {
  /* the Free panel is deliberately narrower than Premium, not an equal-height card */
  .pricing-plans { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 32px; align-items: start; margin-top: 48px; }
}

.pricing-plan { text-align: left; }
.pricing-plan h2 { margin: 0; }
.pricing-plan__price { margin-top: 16px; font-size: 20px; }
.pricing-plan__allowance { margin-top: 14px; color: var(--navy); }
.pricing-plan__note { margin-top: 10px; color: var(--navy-quiet); font-size: 16px; }
.pricing-plan__action { margin-top: 24px; }
/* the shared button keeps its label on one line, so this page's own actions may wrap
   rather than push a 320px screen sideways at doubled text (item 08) */
.pricing-plan__cta,
.pricing-services__demo { max-width: 100%; white-space: normal; text-align: center; }

.pricing-plan__included-title { margin-top: 32px; }
@media (min-width: 1024px) { .pricing-plan__included-title { margin-top: 40px; } }
/* the shared reset is ul, ol { list-style: none }, so the inclusions need their bullets back */
.pricing-included { margin-top: 18px; list-style: disc; padding-left: 22px; }
.pricing-included li { margin-top: 8px; }
.pricing-included li:first-child { margin-top: 0; }

.pricing-calc { margin-top: 36px; }
@media (min-width: 1024px) { .pricing-calc { margin-top: 44px; } }
/* One row, vertically centred, so the source's own separator sits between the two labels
   rather than dropping to the text baseline and reading as a full stop. */
.pricing-calc__intervals {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pricing-calc__interval { display: inline-flex; align-items: center; gap: 10px; padding-block: 10px; }
.pricing-calc__interval input[type="radio"] {
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  accent-color: var(--navy);
}
.pricing-calc__interval label { font-size: 17px; font-weight: 600; padding-block: 11px; }
.pricing-calc__dot { margin-inline: 12px; color: var(--navy-quiet); }

.pricing-calc__field { display: grid; gap: 8px; margin-top: 24px; min-width: 0; }
.pricing-calc__field label { font-size: 16px; font-weight: 600; line-height: 1.4; }
.pricing-calc__field input[type="number"] {
  inline-size: 100%;
  max-inline-size: 160px;
  padding: 13px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--field-edge);
  border-radius: 12px;
}
.pricing-calc__field input[type="number"]:hover { border-color: var(--navy); }
.pricing-calc__field input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.pricing-calc__field input[type="number"]:disabled { background: var(--tint); cursor: not-allowed; }
.pricing-calc__help { margin: 0; font-size: 15px; color: var(--navy-quiet); max-width: 56ch; }
.pricing-calc__error:empty { display: none; }

.pricing-calc__definition { margin-top: 16px; font-size: 16px; color: var(--navy-quiet); max-width: 60ch; }
.pricing-calc__state:not(:empty) { margin-top: 16px; font-size: 16px; font-weight: 600; }

/* White with a fine edge, not a tint fill. An independent review measured the summary's own
   disabled action at 1.00:1 against a tint panel: a disabled control whose fill equals its
   container reads as an outline-only pill, which is exactly what the LIVE secondary button looks
   like two lines below it. White here is what makes the shared disabled fill (var(--tint)) read
   as disabled, the same way it does on every other panel on this site. The review-only label is
   deliberately not written out in this comment: the whole stylesheet ships in the public build,
   and a comment is one of the places the brief says the dated review must not reach. */
.pricing-summary {
  margin-top: 32px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--purple);
  border-radius: 20px;
}
@media (min-width: 768px) { .pricing-summary { margin-top: 40px; padding: 28px; } }
.pricing-summary__title { margin: 0; }
.pricing-summary__mode { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--navy-quiet); }
.pricing-summary__list { margin-top: 20px; }
.pricing-summary__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding-block: 10px;
  border-top: 1px solid var(--purple);
}
.pricing-summary__row:first-child { border-top: 0; padding-top: 0; }
.pricing-summary__row dt { color: var(--navy-quiet); }
.pricing-summary__row dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pricing-summary__vat { display: block; font-size: 15px; font-weight: 400; color: var(--navy-quiet); }
.pricing-summary__action { margin-top: 22px; }
.pricing-summary__continue { max-width: 100%; white-space: normal; text-align: center; }
/* The same disabled appearance every other disabled control on this site already has
   (.site-form .btn:disabled), so a truly unavailable action does not read as a live one. */
.pricing-summary__continue:disabled {
  background: var(--tint);
  color: var(--navy-quiet);
  border-color: var(--navy-quiet);
  cursor: not-allowed;
}
.pricing-summary__custom { margin-top: 18px; font-size: 16px; max-width: 56ch; }
.pricing-summary__fallback { margin-top: 18px; font-size: 16px; }
.pricing-summary__plans { margin-top: 8px; font-size: 16px; }

.pricing-unavailable { margin-top: 32px; text-align: center; }
@media (min-width: 1024px) { .pricing-unavailable { margin-top: 40px; } }
.pricing-unavailable__text { margin: 0; font-size: 19px; }
.pricing-unavailable__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }
.pricing-unavailable__plans,
.pricing-unavailable__free { max-width: 100%; white-space: normal; text-align: center; }

.pricing-services { margin-top: calc(var(--section) * 0.9); margin-bottom: calc(var(--section) * 0.6); }
.pricing-services h2 { margin: 0; }
.pricing-services__text { margin-top: 16px; max-width: 56ch; }
.pricing-services__action { margin-top: 24px; }

/* ==========================================================================
   Page block: About us (/about-us/), checklist item 14
   A centred opening whose artwork comes first, then the H1 and the two
   introductory paragraphs; one left-aligned reading column for Shaped
   together and for From Penguin to SuperPenguin; nine equal softly rounded
   team panels in a three, two, one column grid; the shared standards group
   on its shared tint band; and a short centred closing panel holding the
   whole every-voice illustration and one action. Every selector is scoped
   to .aurora--about or an .about-* class, which no other page carries, so
   Home and every earlier page render exactly as before.

   Spacing, exactly: the opening's OWN top padding is 0.6 of the shared
   section and the FIRST following section's top padding is 0, so the
   opening's shared bottom padding carries that join, which is the shape
   Contact, Referral access and Population access all use. No bottom
   padding and no padding shorthand is set on any .section here, so the
   shared 60/78/96px rhythm is never overridden and no other page's rhythm
   moves. Checklist item 11 recorded that a padding guard written against
   padding-bottom and padding-block is blind to the shorthand's third
   value, so this block sets padding-top alone.

   Every designed gap is a single-class rule on the element it moves. There
   is deliberately no `> * + *` child rule anywhere in this block: such a
   rule carries three classes and silently outranks every single-class
   margin beside it, which is how eight designed gaps on /resources/
   penguin-closing/ rendered as the 22px default with every test passing
   (checklist item 18). The browser round measures these gaps rather than
   trusting the stylesheet.

   The team panels centre their text because the approved review state is
   nine name and role records today and a consistent square portrait area
   above them once actual verified local imagery is approved: centring now
   means that later pass adds an image and changes no alignment. Nothing
   here truncates, clamps lines or fixes a panel height, so a long role and
   doubled text grow the panel instead of being cut.
   ========================================================================== */
.aurora--about { background-size: 100% 900px; }
@media (min-width: 768px)  { .aurora--about { background-size: 100% 980px; } }
@media (min-width: 1024px) { .aurora--about { background-size: 100% 1100px; } }

/* One reading column for the prose sections. Long prose stays left-aligned
   and comfortably measured; only the short opening and the closing centre. */
.about-column { max-width: 760px; margin-inline: auto; }

.about-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.about-open__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.about-open__art {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1024 / 768;        /* the slot ratio is reserved before the file loads */
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .about-open__art { max-width: 580px; } }
.about-open__inner .title { margin-top: 30px; }
@media (min-width: 768px) { .about-open__inner .title { margin-top: 36px; } }
.about-open__lead { margin-top: 22px; max-width: 58ch; margin-inline: auto; }
@media (min-width: 1024px) { .about-open__lead { margin-top: 26px; } }

.about-shaped { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.about-shaped__text { margin-top: 22px; max-width: 62ch; }
@media (min-width: 1024px) { .about-shaped__text { margin-top: 26px; } }

/* The nine records are one purposeful collection of equal panels, never nine
   isolated biographies: one column below 768px, two from 768px and three from
   1024px, with the 24px gap the brief names. DOM order is 1 to 9 row-major at
   every width, so the reading order and the tab order never change. */
.about-team__note {
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-quiet);
}
@media (min-width: 1024px) { .about-team__note { font-size: 16px; } }
.about-team__list {
  margin-top: 28px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .about-team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .about-team__list { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-person {
  padding: 24px 22px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .about-person { padding: 28px 26px; } }
/* A name is semibold body text and a role is ordinary body text. Neither is a
   new display heading tier, so neither borrows the shared subtitle appearance.
   The site ships Inter 400 and 600 only, so 600 is the only semibold there is. */
.about-person__name { font-weight: 600; overflow-wrap: anywhere; }
.about-person__role { margin-top: 6px; color: var(--navy-quiet); overflow-wrap: anywhere; }

.about-history__first { margin-top: 22px; max-width: 62ch; }
@media (min-width: 1024px) { .about-history__first { margin-top: 26px; } }
.about-history__closed { margin-top: 18px; max-width: 62ch; }
.about-history__action { margin-top: 22px; }

/* The shared standards component keeps its own grid and cells. The page adds
   only the specification's review warning under it, in the same quiet voice as
   the team note, because current status, issuer permission and product scope
   are still unverified. */
.about-standards__note {
  margin-top: 28px;
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-quiet);
}
@media (min-width: 1024px) { .about-standards__note { font-size: 16px; } }

/* A short centred closing panel. The illustration keeps its whole 2048x967
   frame at every width: it is never cropped, never a background and never
   given a fixed height, and its ratio is reserved before the file loads. */
.about-close__panel { max-width: 760px; margin-inline: auto; text-align: center; }
.about-close__art {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 2048 / 967;
  height: auto;
}
@media (min-width: 1024px) { .about-close__art { max-width: 600px; } }
.about-close__action { margin-top: 28px; }
/* The shared .btn keeps its label on one line, which pushes a 320px screen
   sideways at doubled text (checklist item 08). This page's own action may
   wrap instead. The shared rule is left alone. */
.about-close__action .btn { white-space: normal; max-width: 100%; }
/* ==========================================================================
   Page block: Clinics and Schools (/solutions/clinics-and-schools/), checklist item 10
   A centred opening whose artwork comes first, a centred section head over
   the three numbered steps and the one reserved demo footprint, one pale
   panel for the attributed saving, a three-column Coming next group under a
   centred head, a tinted band holding the practice invitation, its two links
   and the shared standards component, and a short centred closing. Every
   selector is scoped to .aurora--clinics-schools or a .clinicians-* class, which
   no other page carries, so Home and every earlier page render exactly as
   before.

   Spacing, exactly: the opening's OWN top padding is 0.6 of the shared
   section and the FIRST following section's top padding is 0, so the
   opening's shared bottom padding carries that join. That reproduces Home's
   own measured joins, the first at 96/78/60 and every later one at
   192/156/120 at 1440/768/390. No bottom padding is set anywhere in this
   block, by longhand or by shorthand, and nothing outside these selectors
   changes, so no other page's rhythm moves.

   Every designed gap is a single-class rule on the element it moves. There
   is deliberately no `> * + *` child rule anywhere in this block: such a
   rule carries three classes and silently outranks every single-class
   margin beside it, which is how eight designed gaps on /resources/
   penguin-closing/ rendered as the 22px default with every test passing
   (checklist item 18). The browser round measures every designed gap rather
   than trusting the stylesheet.

   The site ships Inter 400 and 600 only. A bare <strong> asks the browser
   for weight 700, a face that does not exist, so every <strong> this page
   renders is pinned to 600 here, the way .updates-release strong,
   .contact-careers strong, .press-news__source strong and
   .population-way__route strong already are (checklist item 11).
   ========================================================================== */
.aurora--clinics-schools { background-size: 100% 1080px; }
@media (min-width: 768px)  { .aurora--clinics-schools { background-size: 100% 1220px; } }
@media (min-width: 1024px) { .aurora--clinics-schools { background-size: 100% 1400px; } }

.clinicians-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.clinicians-open__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.clinicians-open__art {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1024 / 768;        /* the slot ratio is reserved before the file loads */
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .clinicians-open__art { max-width: 580px; } }
.clinicians-eyebrow { margin-top: 30px; }
@media (min-width: 768px) { .clinicians-eyebrow { margin-top: 36px; } }
.clinicians-open__inner .title { margin-top: 14px; }
.clinicians-open__lead { margin-top: 22px; max-width: 52ch; margin-inline: auto; }
.clinicians-open__action { margin-top: 28px; }

.clinicians-steps { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */

/* The shared reset is ul, ol { list-style: none }, so a numbered list needs its numbers back.
   A real outside marker is painted outside the item's own box, so from 1024px, where the three
   steps share a row, the numbers hang out of their own grid cell. Each step draws its number
   inside its own padding instead, which keeps every number in its column at every width and
   keeps the hanging indent a wrapped step needs. The element stays a real <ol> and carries
   role="list", so the three steps are still announced as a list of three even where a browser
   drops list semantics from an unmarkered list (checklist item 12). */
.clinicians-steps__list {
  list-style: none;
  counter-reset: clinicians-step;
  margin-top: 30px;
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 18px;
}
.clinicians-steps__list > li {
  counter-increment: clinicians-step;
  position: relative;
  padding-left: 28px;
}
.clinicians-steps__list > li::before {
  content: counter(clinicians-step) ".";
  position: absolute;
  left: 0;
  top: 0;
}
.clinicians-steps__list strong { font-weight: 600; }
@media (min-width: 1024px) {
  .clinicians-steps__list {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 40px;
  }
}

/* The page's one reserved demo footprint: the ai-steps still and its visible review caption, and
   nothing else. There is no video, audio, iframe, poster, play control, animated GIF or hidden
   player here, and nothing on this page requests media. The 2:1 ratio is reserved before the file
   loads so the figure never moves the caption when the image arrives. */
.clinicians-demo { margin-top: 40px; max-width: 760px; margin-inline: auto; }
@media (min-width: 768px)  { .clinicians-demo { margin-top: 48px; } }
@media (min-width: 1024px) { .clinicians-demo { margin-top: 56px; } }
.clinicians-demo__art {
  display: block;
  width: 100%;
  aspect-ratio: 1024 / 512;        /* the slot ratio is reserved before the file loads */
  height: auto;
  border-radius: var(--radius-sm);
}
.clinicians-demo__caption {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-quiet);
}
@media (min-width: 1024px) { .clinicians-demo__caption { font-size: 16px; } }

/* One pale panel holding the attributed saving, the practice name and the Evidence link together,
   so the phrase can never be separated from who reported it. The figure is body emphasis at the
   shared body size, not a new heading tier and not a headline number, because it is one practice's
   account and not a measured average. */
.clinicians-experience__panel { max-width: 760px; margin-inline: auto; text-align: center; }
.clinicians-experience__figure { margin-top: 20px; }
.clinicians-experience__figure strong { font-weight: 600; }
.clinicians-experience__source { margin-top: 10px; color: var(--navy-quiet); }
.clinicians-experience__action { margin-top: 22px; }

/* Coming next: one open group of three distinct items, never cards and never a badge. Each item
   keeps its visible word Coming as real text, so the state survives with styles off, in a screen
   reader and for a reader who cannot see the colour. */
.clinicians-coming__list {
  margin-top: 34px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .clinicians-coming__list { gap: 28px; } }
@media (min-width: 1024px) {
  .clinicians-coming__list { margin-top: 44px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
}
.clinicians-coming__item { max-width: 46ch; }
.clinicians-coming__item strong { font-weight: 600; }
.clinicians-coming__label { white-space: nowrap; color: var(--navy-quiet); }

.clinicians-practice__text { margin-top: 14px; }

/* The two links. Below the transition they stack, one to a row, which keeps them clearly separated
   for a touch and stops a line ever ending on a separator. The separators are decorative and
   aria-hidden, so they are painted only where the links share a row. From 768px they sit inline
   with the dot between them, the treatment Contact, Referral access and Population access use. */
.clinicians-links {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.clinicians-links__dot { display: none; }
@media (min-width: 768px) {
  .clinicians-links { flex-direction: row; justify-content: center; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
  .clinicians-links__dot { display: inline; color: var(--navy-quiet); }
}

/* The shared standards component keeps its own grid and cells. This page adds only its heading and
   the specification's review warning under it, in the same quiet voice as the demo caption, because
   current status, issuer permission and product scope are still unverified. */
.clinicians-standards { margin-top: 44px; }
@media (min-width: 1024px) { .clinicians-standards { margin-top: 56px; } }
.clinicians-standards__heading { text-align: center; }
.clinicians-standards__note {
  margin-top: 28px;
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-quiet);
}
@media (min-width: 1024px) { .clinicians-standards__note { font-size: 16px; } }

.clinicians-close__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.clinicians-close__action { margin-top: 26px; }

/* ==========================================================================
   Page block: NIHR stammering funding (/resources/nihr-grant/), checklist item 22
   One historical funding article in a narrow reading column: a roomy continuous
   opening with its short title group centred, three left-aligned paragraphs of
   body copy with one review note between the first two, and a Voices group of
   four quotations, each a restrained left rule rather than a card. Every
   selector is scoped to .aurora--nihrstam or a .nihrstam-* class, which no
   other page carries, so Home and every earlier page are untouched.

   What this block does to the shared section rhythm, stated exactly, because
   an independent review of item 20 found the inherited sentence ("adds its own
   top padding and never overrides the shared rhythm") false about the rules
   below it. `.section` sets `padding-block: var(--section)`, which computes to
   60/78/96px at 390/768/1440. Four rules here REPLACE part of that at the same
   specificity, deliberately, and both browser rounds measure the result rather
   than trusting it:
     .nihrstam-open    top padding becomes 0.55 of a section unit, so the
                       opening starts closer to the header than a full section
     .nihrstam-body    top padding becomes 0, so the opening's own shared bottom
                       padding carries the one-unit join to the body
     .nihrstam-voices  top padding becomes 0, so the body's own shared bottom
                       padding carries the one-unit join to the quotations
     .nihrstam-signup  bottom padding becomes 1.4 units, so the newsletter panel
                       has room below it before the footer
   The break from the article to the signup section is therefore the full two
   units Home uses between two complete sections, while the article's own
   internal joins are one unit each. Nothing else here touches the shared
   rhythm and no rule changes `--section` itself, so every other section on the
   page keeps the shared value.

   Every rule that changes a stacked gap restates the SAME child chain as the
   stacking rule beside it. A bare `.nihrstam-byline { margin-top: 20px }`
   carries one class (0,1,0) and
   `.nihrstam-open > .wrap > .nihrstam-column > * + *` carries three (0,3,0), so
   the single-class rule would never render and the designed rhythm would
   silently be the default everywhere. Checklist item 18 shipped that defect
   and an independent review of item 19 then found the same shape spelled with
   the `margin` shorthand, which its own guard could not see.
   The only single-class rules here that touch the BLOCK axis, the one a
   stacking rule competes for, are the two `margin: 0` resets the quotation
   figure and its blockquote need, because a browser's own stylesheet gives
   `figure` and `blockquote` a 1em/40px margin that no shared reset clears.
   They set nothing, so nothing can be silently lost behind a chain rule.
   Three other single-class rules write `margin-inline: auto` to centre a box,
   on `.nihrstam-column`, `.nihrstam-notice` and `.nihrstam-signup__panel`.
   That is the INLINE axis and no rule in this block sets an inline margin on
   those children, so none of them can be outranked and the guard ignores them
   deliberately. probe_stylesheet_scope.py refuses any single-class rule that
   sets a non-zero BLOCK-axis margin, in every spelling of it, and allows
   `margin-inline: auto`; the desktop and mobile rounds then measure every
   designed gap back out of the browser.
   ========================================================================== */
.aurora--nihrstam { background-size: 100% 700px; }
@media (min-width: 768px)  { .aurora--nihrstam { background-size: 100% 800px; } }
@media (min-width: 1024px) { .aurora--nihrstam { background-size: 100% 920px; } }

.nihrstam-column { max-width: min(66ch, 760px); margin-inline: auto; overflow-wrap: anywhere; }   /* a reading measure, not a new site width; Heather Brigden-McLean's family name and South West Yorkshire Partnership NHS Foundation Trust never widen it */

.nihrstam-open { padding-top: calc(var(--section) * 0.55); }   /* the shared section padding stays below */

/* The short title group is centred, as the shared contract allows for short groups and artwork.
   Centring the column is what puts the hero note's own box in the middle, not only its words.
   The back link keeps the reading alignment, and the body copy below stays left aligned because
   it is prose and not a short group. */
.nihrstam-open > .wrap > .nihrstam-column { text-align: center; }
.nihrstam-back { text-align: left; }

.nihrstam-open > .wrap > .nihrstam-column > * + * { margin-top: 24px; }
.nihrstam-open > .wrap > .nihrstam-column > .title { margin-top: 28px; }
@media (min-width: 768px) {
  .nihrstam-open > .wrap > .nihrstam-column > .title { margin-top: 34px; }
}
.nihrstam-open > .wrap > .nihrstam-column > .nihrstam-byline { margin-top: 20px; }

/* The byline's author takes its own LINE while the column is narrow, so its line count cannot
   depend on which font has loaded. This is a measured fix, not a preference. The page's own words
   are 13 August 2024 · Jordi Fernandez, Founder & CEO. Measured at sixteen widths: Inter wraps
   them to two lines from 320 to 412px and fits them on one from 430px up, while the fallback
   family fits them on ONE line at 412px. So the shared `font-display: swap` grew this byline by a
   line after first paint and pushed the author, the notice and the whole article down 25px: layout
   shift 0.2378 at 412x823 with the fonts delayed 1.2s, against 0.0068 on /resources/nihr-grant-2/
   and 0.0959 on /resources/bbc-news/ under the identical condition. The swap is the shared
   background condition every page of this site carries; this byline was the amplifier, and this is
   the part that belongs to this page.
   Reserving the space with min-height was tried first and only took the shift to 0.2244, because
   the author ANCHOR still moved between the two lines inside the reserved box. Two lines in every
   font removes the move itself. Above 430px the span is inline again and the byline is the single
   line Inter renders there, so nothing about the wide rendering changes. The break falls after the
   source's own separator, which is where Inter already broke it. */
.nihrstam-byline__author { display: block; }
@media (min-width: 430px) { .nihrstam-byline__author { display: inline; } }
.nihrstam-open > .wrap > .nihrstam-column > .nihrstam-notice { margin-top: 20px; }
.nihrstam-notice { max-width: 52ch; margin-inline: auto; }

.nihrstam-body { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.nihrstam-body > .wrap > .nihrstam-column > * + * { margin-top: 22px; }

/* The recorded hero candidate and the one source-05 body occurrence are not available. Each
   position shows one small ordinary note in a restrained frame: no image element, no reserved
   dimensions, no invented alt text and no caption, because the source records none for either
   occurrence. No margin is written here on purpose. Source 05 records this article's body
   occurrence at line 410, BETWEEN the funding paragraph and the collaborators paragraph, so it
   is not the first child of the body column: it takes the 22px `* + *` gap above, and the
   collaborators paragraph after it takes the same gap. The hero note is not first either, so it
   takes the opening column's own 24px gap. The shared reset already gives every paragraph
   `margin: 0`, so a rule here would add nothing. */
.nihrstam-pending {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 15px;
  line-height: 1.5;
}

.nihrstam-voices { padding-top: 0; }   /* the body's shared bottom padding carries this join */
/* This column needs no `* + *` stacking rule. Its children are the heading, the four quotation
   figures and the closing action, and every one of those except the first has its own rule below,
   so a `* + *` here would match nothing that the rules below do not already set. An earlier draft
   carried one at 32px and an independent review found it could never render. Both remaining gaps
   still restate the full child chain, because the rules below DO compete with each other. */

/* Each of the four quotations keeps its own attribution immediately attached inside its own
   figure: one restrained left rule, generous separation, no card, no panel grid, no portrait,
   no avatar, no carousel and no promoted number. The attribution is utility type in the quiet
   navy, not a third heading tier. The figure and its blockquote each need their own `margin: 0`
   because a browser's default stylesheet, not the shared reset, is what gives them a margin. */
.nihrstam-quote {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--edge);
}
@media (min-width: 768px) { .nihrstam-quote { padding-left: 26px; } }
.nihrstam-quote__text { margin: 0; }
.nihrstam-quote__text p { font-size: 18px; line-height: 1.5; }
@media (min-width: 1024px) { .nihrstam-quote__text p { font-size: 20px; } }
.nihrstam-quote__source { font-size: 15px; line-height: 1.5; color: var(--navy-quiet); }
.nihrstam-quote > .nihrstam-quote__source { margin-top: 12px; }

.nihrstam-voices > .wrap > .nihrstam-column > .nihrstam-quote { margin-top: 40px; }
@media (min-width: 1024px) {
  .nihrstam-voices > .wrap > .nihrstam-column > .nihrstam-quote { margin-top: 48px; }
}
.nihrstam-voices > .wrap > .nihrstam-column > .nihrstam-actions { margin-top: 44px; }
@media (min-width: 1024px) {
  .nihrstam-voices > .wrap > .nihrstam-column > .nihrstam-actions { margin-top: 52px; }
}

.nihrstam-signup { padding-block: var(--section) calc(var(--section) * 1.4); }
.nihrstam-signup > .wrap > .nihrstam-column > * + * { margin-top: 28px; }
.nihrstam-signup__panel { max-width: 680px; margin-inline: auto; }
.nihrstam-signup__panel form { max-width: 440px; }

/* ==========================================================================
   Page block: Resources (/resources/), checklist item 26
   A short centred opening whose artwork comes first, then the H1 and the
   three collection links as one wrapping native navigation; then two groups,
   each a left-aligned heading above a list of restrained cards, one column
   below 1024px and two roomy columns from 1024px. Every selector is scoped
   to .aurora--resources or a .res-* class, which no other page carries, so
   Home and every earlier page render exactly as before.

   The cards reuse the shared .panel rule itself rather than restating it,
   so their corners, their fine edge, their white fill and their padding are
   literally the shared ones and can never drift from them. This block adds
   no shadow, no fixed height, no line clamp and no min-height, so a long
   title and doubled text grow a card instead of being cut, and two cards in
   one row are only as tall as the grid makes them.

   Spacing, exactly, and these three are the whole of it: the opening's OWN
   top padding is 0.6 of the shared section; the FIRST group's top padding
   is 0, so the opening's shared bottom padding carries that join, which is
   the shape Contact, About us, Referral access and Population access all
   use; and the SECOND group's top padding is 0.9 of the shared section, on
   top of the first group's shared bottom padding, which is the generous
   separation between the two groups the brief asks for. Nothing else in
   this block sets padding at all. No bottom padding and no padding
   shorthand is set anywhere here, so the shared 60/78/96px rhythm is never
   overridden and no other page's rhythm moves. Checklist item 11 recorded
   that a padding guard written against padding-bottom and padding-block is
   blind to the shorthand's third value, so this block sets padding-top
   alone, and this item's pre-close review added the other half of that
   lesson: a guard keyed on SECTION CLASS NAMES is blind to the same defect
   written as `.aurora--resources .section`, so the test refuses a bottom
   padding anywhere in this block and pins the three selectors above as the
   only ones that set padding at all.

   Every designed gap is a single-class rule on the element it moves. There
   is deliberately no `> * + *` child rule anywhere in this block: such a
   rule carries three classes and silently outranks every single-class
   margin beside it, which is how eight designed gaps on /resources/
   penguin-closing/ rendered as the 22px default with every test passing
   (checklist item 18). The browser round measures these gaps on the built
   page rather than trusting this stylesheet.

   The ten cards carry a review note where a thumbnail will sit. The note is
   quiet utility copy at the shared 15/16px, not a heading tier, and its
   place at the top of the card is the place the later approved image takes,
   so that pass changes no layout rule here.
   ========================================================================== */
.aurora--resources { background-size: 100% 820px; }
@media (min-width: 768px)  { .aurora--resources { background-size: 100% 940px; } }
@media (min-width: 1024px) { .aurora--resources { background-size: 100% 1060px; } }

/* ----- Opening ------------------------------------------------------------ */
.res-open { padding-top: calc(var(--section) * 0.6); }   /* the shared section padding stays below */
.res-open__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.res-open__art {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  aspect-ratio: 1024 / 576;        /* the slot ratio is reserved before the file loads */
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .res-open__art { max-width: 720px; } }
.res-open__inner .title { margin-top: 30px; }
@media (min-width: 768px) { .res-open__inner .title { margin-top: 38px; } }

/* The three collection links are one native navigation, not tabs and not a
   filter: ordinary same-tab links that wrap onto as many lines as they need
   at 320px and at 200% text. */
.res-jump { margin-top: 26px; }
@media (min-width: 1024px) { .res-jump { margin-top: 30px; } }
.res-jump__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.res-jump__link { font-size: 16px; }
@media (min-width: 1024px) { .res-jump__link { font-size: 18px; } }

/* ----- Groups ------------------------------------------------------------- */
.res-group--research-and-stories { padding-top: 0; }   /* the opening's shared bottom padding carries this join, as on Home */
.res-group--downloads { padding-top: calc(var(--section) * 0.9); }

/* Two groups, generously separated, each headed on the left above its own
   list. The heading keeps the one shared subtitle appearance and adds no
   size, weight or colour of its own. */
.res-group__heading { max-width: 30ch; }

.res-list {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 768px)  { .res-list { margin-top: 32px; gap: 24px; } }
@media (min-width: 1024px) {
  .res-list {
    margin-top: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
  }
}

/* The card itself is the shared .panel. This rule adds nothing to its
   surface: only the text alignment the brief asks for inside a balanced
   card, and a guard so an unbroken long word cannot push a narrow card
   sideways.

   The guard is `overflow-wrap: anywhere`, on the card so it inherits to
   the note, the title and the summary alike, and NOT `break-word`.
   `break-word` adds soft wrap opportunities but leaves the min-content
   size of the box alone, and the entry title is an inline-block link that
   is sized shrink-to-fit from its longest word: measured, a 37-character
   title made that link 464px wide inside a 280px card and scrolled the
   whole page 187px sideways at 320px, with `break-word` in place. Ten
   other page blocks on this site already use `anywhere` for exactly this,
   several of them saying so in their own comments. Found by this item's
   pre-close independent review, which also found the comment above
   claiming a guard that did not guard. */
.res-card { text-align: left; overflow-wrap: anywhere; }
.res-card__pending { font-size: 15px; line-height: 1.5; }
@media (min-width: 1024px) { .res-card__pending { font-size: 16px; } }
.res-card__name { margin-top: 14px; }
@media (min-width: 1024px) { .res-card__name { margin-top: 16px; } }
.res-card__summary { margin-top: 12px; max-width: 46ch; color: var(--navy-quiet); }
@media (min-width: 1024px) { .res-card__summary { margin-top: 14px; } }

/* ==========================================================================
   Route utilities (PRJ-249 checklist item 28)
   The twelve legacy fallback stubs and /404.html. A compact variant of the
   shared brand shell: the same wash, the same wordmark, the same navy
   footer, and in between one short reading column and nothing else. No
   navigation, no promotion, no newsletter, no cookie control, no media.
   Every rule here is scoped to .aurora--utility, .masthead--utility or a
   .utility class, none of which any ordinary page carries, so this block
   cannot move Home or any built page. The utility pages are the only
   pages on the site with no second heading tier, which is why the reading
   column is sized here rather than borrowed from .legal__measure.
   ========================================================================== */
.aurora--utility { background-size: 100% 520px; }
@media (min-width: 768px)  { .aurora--utility { background-size: 100% 560px; } }
@media (min-width: 1024px) { .aurora--utility { background-size: 100% 620px; } }

/* The shared masthead row is a three-part flex row. With the wordmark as its
   only child the row is unnecessary, so the utility header drops it and keeps
   the wordmark's own padding and focus ring untouched. */
.masthead--utility { padding-block: 22px; }

.utility { padding-block: var(--section); }

/* Around 760px of reading width, as the brief asks, and comfortable gutters
   come from the shared .wrap. */
.utility__measure { max-width: 760px; }
.utility__measure > * + * { margin-top: 20px; }
@media (min-width: 1024px) { .utility__measure > * + * { margin-top: 24px; } }

.utility__lead { color: var(--navy-quiet); max-width: 56ch; }

/* The whole Continue phrase is one link, and a destination name can be long
   ("NIHR funding for brain injury support"). `anywhere`, not `break-word`:
   break-word adds wrap opportunities but leaves the min-content width of an
   inline-block alone, which is what scrolled a 320px page sideways on the
   Resources cards earlier in this project. The block display plus the
   generous padding keeps the target well over 44px on every viewport
   without changing the shared link colour. */
.utility__action { font-weight: 600; overflow-wrap: anywhere; }
.utility__action a {
  display: inline-block;
  padding-block: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.utility__action a:hover { text-decoration-thickness: 2px; }