/* ============================================================
   SchemeReady marketing site stylesheet
   Purpose: shared styles for every page under /schemeready
   (home, how it works, pricing, guides, legal, templates and
   the welcome page). The app under /schemeready/app has its own
   app.css and may import the tokens block from here.

   Palette: deep navy ink, a highways amber accent used sparingly,
   warm greys, white cards. Deliberately unlike the Denver House
   gradient (orange, magenta, purple) and unlike Lantra, National
   Highways, UKAS or CSCS branding.

   Structure
     1. Tokens (light, dark)
     2. Reset and base
     3. Layout (container, sections, grids)
     4. Header and navigation
     5. Footer
     6. Components (buttons, cards, eyebrow, callout, pricing,
        faq, tables, bands, forms, notices, steps, misc)
     7. Utilities
     8. Print
     9. The sample report card in the home page hero fills itself in

   Rules: every colour comes from a token; no colour carries
   meaning on its own; focus is always visible; motion respects
   prefers-reduced-motion. See docs/DESIGN.md.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens

   Every colour, space, radius, shadow, layer and type size now comes
   from the shared token layer that Denver House and SchemeReady both
   use. Do not add a colour here; add it to assets/tokens.css, then run
   tools/check_contrast.py.

   The import is here so no page has to change, but a page that wants
   the tokens to load in parallel rather than after this file may also
   add, before this stylesheet:

     <link rel="stylesheet" href="assets/tokens.css">

   tokens.css also carries the older --sr-* names as aliases, so every
   rule below keeps working and follows the theme on its own.
   ------------------------------------------------------------ */
@import url("tokens.css");

/* Shapes this stylesheet needs that are not colours, so they do not
   belong in tokens.css. --tick-mark is the tick used by .ticks and the
   pricing feature lists; it is a mask, so the tick itself takes its
   colour from a token and follows the theme. */
:root {
  --tick-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sr-header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--sr-font);
  font-size: var(--sr-fs-base);
  line-height: 1.6;
  color: var(--sr-text);
  background: var(--sr-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
svg { display: inline-block; vertical-align: middle; }

h1, h2, h3, h4, h5, h6 {
  color: var(--sr-heading);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 .6em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--sr-fs-h1); letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: var(--sr-fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--sr-fs-h3); }
h4 { font-size: var(--sr-fs-base); }
* + h2 { margin-top: 1.6em; }
* + h3 { margin-top: 1.4em; }

p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: .3em; }
dt { font-weight: 600; color: var(--sr-heading); }
dd { margin: 0 0 .7em; }
strong, b { font-weight: 700; }
small { font-size: var(--sr-fs-sm); }
hr { border: 0; border-top: 1px solid var(--sr-line); margin: 2.5rem 0; }
code, kbd, samp {
  font-family: var(--sr-font-mono);
  font-size: .92em;
  background: var(--sr-bg-soft);
  padding: .1em .35em;
  border-radius: 4px;
}
pre { background: var(--sr-bg-soft); padding: 1rem; border-radius: var(--sr-radius-sm); overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { border-left: 4px solid var(--sr-line-strong); padding-left: 1rem; color: var(--sr-muted); }
figcaption { font-size: var(--sr-fs-sm); color: var(--sr-muted); margin-top: .5rem; }
address { font-style: normal; }

a { color: var(--sr-link); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--sr-link-hover); text-decoration-thickness: 2px; }

/* Visible focus for everything focusable, both schemes */
:focus-visible {
  outline: 3px solid var(--sr-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--sr-focus-gap);
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--sr-amber); color: var(--sr-navy); }

/* Skip link: hidden until focused, then fixed at the top */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  padding: .7rem 1rem;
  background: var(--sr-navy);
  color: var(--ds-sr-on-brand);
  border-radius: var(--sr-radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; outline-color: var(--sr-amber); }

/* Reduced motion: stop all non-essential animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .btn:active { transform: none; }
}

/* ------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------ */
.container {
  width: min(var(--sr-container), 100% - 2 * var(--sr-gutter));
  margin-inline: auto;
}
.container-narrow { width: min(760px, 100% - 2 * var(--sr-gutter)); margin-inline: auto; }
.container-wide { width: min(1320px, 100% - 2 * var(--sr-gutter)); margin-inline: auto; }

.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section-soft { background: var(--sr-bg-soft); }
/* A navy band inside the page. The hairline is the next navy up the
   ramp, so it is invisible on a light page and gives the band an edge
   on a dark one, where the band and the page are close in tone. */
.section-navy {
  background: var(--sr-navy);
  color: var(--ds-sr-on-brand);
  border-block: 1px solid var(--ds-sr-surface-brand-hover);
}
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy p { color: var(--ds-sr-on-brand); }
.section-navy a { color: var(--sr-footer-link); }
.section-tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.section-head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head p { color: var(--sr-muted); }
.section-head.center { margin-inline: auto; text-align: center; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* Split: text beside an image or a figure */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1.1fr .9fr; } .split.reverse > :first-child { order: 2; } }

/* Hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem); }
.hero h1 { font-size: var(--sr-fs-display); max-width: 18ch; }
.hero .lead { max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-note { font-size: var(--sr-fs-sm); color: var(--sr-muted); margin-top: 1rem; }

/* There was a canvas scene behind this hero until 12 September 2026. It is gone.
   Measured on the running page it painted 0.5 per cent of the hero at 1000px,
   because this hero has no open space: the words and the sample report card fill
   it, and the scene's marks ended up in a narrow left gutter or damped to a third
   of their strength behind text. Nobody could see it. The home page now animates
   the sample report card itself, in HTML, at the end of this file. The shared
   engine (assets/hero-canvas.js) stays, because the Denver House home page and
   docs/hero-test.html still use it. */

.lead { font-size: var(--sr-fs-lead); line-height: 1.55; color: var(--sr-text); }
.prose { max-width: 68ch; }
.prose img, .prose figure { margin-block: 1.5rem; }

/* ------------------------------------------------------------
   4. Header and navigation
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sr-surface);
  border-bottom: 1px solid var(--sr-line);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--sr-header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--sr-heading);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  border-radius: var(--sr-radius-sm);
}
.brand:hover { color: var(--sr-heading); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
/* The mark is two shapes, coloured from tokens rather than from a fill
   attribute, so it follows the theme. In the header it is a navy tile
   with an amber tick; the footer, which is dark in both themes, turns
   it round so the mark still reads. */
.brand-mark-tile { fill: var(--sr-navy); }
.brand-mark-tick { stroke: var(--sr-amber); }
.brand-name { line-height: 1; white-space: nowrap; }
.brand-name .brand-accent { color: var(--sr-amber-text); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .15rem;
}
.site-nav li { margin: 0; }
.site-nav a:not(.btn) {
  display: inline-block;
  white-space: nowrap;
  padding: .55rem .7rem;
  color: var(--sr-text);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  border-radius: var(--sr-radius-sm);
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { color: var(--sr-heading); background: var(--sr-bg-soft); }
.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--sr-heading);
  font-weight: 700;
  border-bottom-color: var(--sr-amber);
  border-radius: var(--sr-radius-sm) var(--sr-radius-sm) 0 0;
}
.site-nav .nav-cta { margin-left: .5rem; }

/* Mobile toggle: a real button, at least 44px, with a text label */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  min-width: 44px;
  padding: .4rem .7rem;
  background: transparent;
  color: var(--sr-heading);
  border: 1px solid var(--sr-line-strong);
  border-radius: var(--sr-radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle-bars {
  position: relative;
  width: 20px;
  height: 14px;
  display: inline-block;
  flex: none; /* the button is a flex row, so without this the bars box
                 shrinks on a narrow header and the bars, which are
                 positioned inside it, run under the word Menu */
}
.nav-toggle-bars::before, .nav-toggle-bars::after, .nav-toggle-bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span { top: 6px; }
.nav-toggle-bars::after { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1179px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--sr-surface);
    border-bottom: 1px solid var(--sr-line);
    box-shadow: var(--sr-shadow-lg);
    padding: .75rem var(--sr-gutter) 1.25rem;
    max-height: calc(100vh - var(--sr-header-h));
    overflow-y: auto;
  }
  .site-header.nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .site-nav a:not(.btn) { display: block; padding: .8rem .75rem; font-size: 1.05rem; border-bottom: 0; }
  .site-nav a:not(.btn)[aria-current="page"] { background: var(--sr-navy-tint); border-radius: var(--sr-radius-sm); }
  .site-nav .nav-cta { margin: .75rem 0 0; display: block; text-align: center; }
}

/* On a narrow phone the brand, the appearance toggle and the menu
   button have to share one row. Tighten the gaps rather than let the
   menu button be squeezed. The menu button's own margin is zeroed
   beside its placement rule in the appearance toggle section below,
   where it can win. */
@media (max-width: 430px) {
  .site-header-inner { gap: .5rem; }
  .nav-toggle { padding: .4rem .55rem; }
  .brand { font-size: 1.15rem; gap: .45rem; }
  .brand-mark { width: 30px; height: 30px; }
}

/* No-script fallback menu (inside <noscript> in the page template) */
.noscript-bar { background: var(--sr-amber-tint); border-bottom: 1px solid var(--sr-line); padding: .7rem 0; font-size: var(--sr-fs-sm); }
.noscript-bar p { margin: 0; color: var(--sr-text); }

/* ------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------ */
.site-footer {
  margin-top: auto;
  background: var(--sr-footer-bg);
  color: var(--sr-footer-text);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  font-size: var(--sr-fs-sm);
  line-height: 1.6;
}
.site-footer a { color: var(--sr-footer-link); }
.site-footer a:hover { color: var(--sr-footer-text); }
.site-footer h2, .site-footer h3 { color: var(--sr-footer-text); font-size: .95rem; margin: 0 0 .7rem; letter-spacing: .02em; }
.site-footer p { margin-bottom: .8em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 .45rem; }
.site-footer .brand { color: var(--sr-footer-text); margin-bottom: .75rem; }
.site-footer .brand .brand-accent { color: var(--sr-footer-link); }
.site-footer .brand-mark-tile { fill: var(--sr-amber); }
.site-footer .brand-mark-tick { stroke: var(--ds-sr-on-accent); }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--sr-footer-line);
}
.footer-brand { grid-column: span 1; max-width: 34ch; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand p { color: var(--sr-footer-muted); }
/* Appearance control in the footer. theme.js builds it for a light
   surface, so the footer, which stays dark in both themes, restates the
   three colours it needs. The radio itself always shows which one is
   chosen, so nothing depends on the highlight. */
.footer-theme { padding-block: 1.5rem; border-bottom: 1px solid var(--sr-footer-line); }
.footer-theme .ds-theme-choice legend { color: var(--sr-footer-text); }
.footer-theme .ds-theme-choice-item {
  background: transparent;
  color: var(--sr-footer-text);
  border-color: var(--sr-footer-muted);
}
.footer-theme .ds-theme-choice-item input { accent-color: var(--sr-footer-link); }
.footer-theme .ds-theme-choice-item:hover { background: var(--sr-footer-line); }
.footer-theme .ds-theme-choice-item:focus-within { outline-color: var(--sr-footer-link); }
.footer-theme .ds-theme-choice-item:has(input:checked) {
  background: var(--sr-footer-line);
  border-color: var(--sr-footer-text);
}

.footer-statement { padding-block: 1.75rem; border-bottom: 1px solid var(--sr-footer-line); }
.footer-statement p { max-width: 90ch; color: var(--sr-footer-muted); }
.footer-statement .independence { color: var(--sr-footer-text); }
.footer-company { padding-top: 1.5rem; color: var(--sr-footer-muted); }
.footer-company p { max-width: 90ch; }
.footer-company strong { color: var(--sr-footer-text); }
.footer-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }

/* ------------------------------------------------------------
   6. Components
   ------------------------------------------------------------ */

/* Buttons. .btn is the primary: the family gradient (the Denver House
   sweep resolving into the SchemeReady navy) on a pill, white text, a
   soft navy shadow and a lift on hover, the same shape and manner as the
   buttons on the Denver House site. .btn-secondary is the navy outline,
   .btn-ghost a quiet text button, .btn-small for nav and tables. Every
   stop of the gradient is checked for white text by tools/check_contrast.py.
   Real <button> and <a> both work; min target 44px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.6rem;
  border-radius: var(--sr-radius-pill);
  border: 1px solid transparent;
  background: var(--ds-sr-brand-gradient);
  color: var(--ds-brand-on-ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ds-sr-btn-shadow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover {
  color: var(--ds-brand-on-ink);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--ds-sr-btn-shadow-strong);
  filter: saturate(1.08) brightness(1.05);
}
.btn:active { transform: translateY(0); box-shadow: var(--ds-sr-btn-shadow); filter: none; }
.btn:focus-visible { outline: 3px solid var(--sr-focus); outline-offset: 3px; }
/* Unavailable, not faded. A disabled control is exempt from the
   contrast rule, but the reader still has to be able to read what it
   says, so this drops the fill rather than the ink. */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--sr-bg-soft);
  color: var(--sr-muted);
  border-color: var(--sr-line-strong);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  background: var(--sr-bg-soft);
  color: var(--sr-muted);
  box-shadow: none;
  transform: none;
  filter: none;
}

.btn-secondary {
  background: var(--sr-surface);
  color: var(--sr-heading);
  border: 2px solid var(--sr-heading);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--sr-navy-tint); color: var(--sr-heading); box-shadow: var(--ds-sr-btn-shadow); filter: none; }
.btn-secondary:active { box-shadow: none; }
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-secondary:hover { border-color: var(--sr-heading); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sr-link);
  text-decoration: underline;
  text-underline-offset: .15em;
  box-shadow: none;
}
.btn-ghost:hover { background: var(--sr-bg-soft); color: var(--sr-link-hover); box-shadow: none; transform: none; filter: none; }

.btn-small { min-height: 36px; padding: .4rem 1.05rem; font-size: .92rem; }
.btn-large { min-height: 52px; padding: .85rem 1.75rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Cards */
.card {
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: var(--sr-shadow);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }
.card-plain { box-shadow: none; }
.card-soft { background: var(--sr-bg-soft); border-color: transparent; box-shadow: none; }
.card-link { display: block; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.card-link:hover { color: inherit; box-shadow: var(--sr-shadow-lg); transform: translateY(-2px); }
.card-link h3 { color: var(--sr-link); text-decoration: underline; text-underline-offset: .15em; }
.card-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--sr-amber-tint);
  color: var(--sr-amber-text);
  margin-bottom: .9rem;
}
.card-icon svg { width: 24px; height: 24px; }

/* Eyebrow: small label above a heading */
/* Eyebrow. One of the brand moments: the Denver House sweep, restrained
   and resolving into the SchemeReady navy, so the family resemblance
   shows without the product looking like a consultancy advert. Every
   stop in that gradient is dark enough to be text. Browsers that cannot
   clip a background to text keep the accent colour underneath. */
.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sr-amber-text);
  margin: 0 0 .6rem;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .eyebrow {
    background: var(--ds-sr-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.section-navy .eyebrow { color: var(--sr-footer-link); background: none; }

/* The other two brand moments. Use them sparingly: a rule under a hero
   heading, or a keyline on one highlighted card. Both are decorative,
   so nothing may depend on seeing them. */
.brand-rule {
  display: block;
  height: 4px;
  width: 88px;
  border: 0;
  margin: 0 0 var(--ds-space-md);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-sr-brand-gradient);
}
.brand-wash { background: var(--ds-sr-brand-gradient-soft); }

/* Callout: a bordered note. Variants: .callout-accent (amber),
   .callout-warn (red edge for cautions), .callout-navy. */
.callout {
  background: var(--sr-callout-bg);
  border: 1px solid var(--sr-line);
  border-left: 5px solid var(--sr-navy);
  border-radius: var(--sr-radius-sm);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; color: var(--sr-heading); margin-bottom: .35rem; display: block; }
.callout-accent { border-left-color: var(--sr-amber); background: var(--sr-amber-tint); }
.callout-warn { border-left-color: var(--sr-error); background: var(--sr-callout-warn-bg); }
.callout-navy { background: var(--sr-navy); color: var(--ds-sr-on-brand); border-color: var(--ds-sr-surface-brand-hover); border-left-color: var(--sr-amber); }
.callout-navy .callout-title, .callout-navy h3 { color: var(--ds-sr-on-brand); }
.callout-navy a { color: var(--sr-footer-link); }

/* Pricing cards.
   The four licence cards sit in one row on a wide screen (inside the 1320px
   container-wide), two on a tablet, one on a phone. Each card is a subgrid
   of the same rows, so the eyebrow, the title, the lead, the price, the
   features and the button sit on the same horizontal line right across the
   row, however long the text in any one card. Browsers without subgrid get
   the same cards as flex columns, which still read well and merely stop
   lining up. */
.pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: stretch; }
.pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
@media (max-width: 1060px) { .pricing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 600px) { .pricing-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--sr-shadow);
  position: relative;
  min-width: 0;
}
@supports (grid-template-rows: subgrid) {
  .pricing-grid-4 > .pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; align-content: start; }
  .pricing-grid-4 > .pricing-card > * { min-width: 0; }
  .pricing-grid-4 > .pricing-card > .btn { align-self: end; }
}
.pricing-card.is-featured { border: 2px solid var(--sr-amber); box-shadow: var(--sr-shadow-lg); }
.pricing-card .eyebrow { margin-bottom: .3rem; }
.pricing-title { margin: 0 0 .5rem; font-size: var(--sr-fs-h3); text-wrap: balance; }
.pricing-lead { color: var(--sr-muted); margin-bottom: 1rem; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; margin: .5rem 0 1rem; }
/* In the aligned row every price starts at the top of the shared track and
   every amount, figure or words, sits in the same line box, so the four sit
   on one horizontal line whatever the note beneath them wraps to. */
.pricing-grid-4 .price { align-self: start; margin-top: .25rem; }
.pricing-grid-4 .price-amount { line-height: 2.6rem; }
/* A card on its own row, for the thing sold outside the licences. */
.pricing-card-wide { margin-top: 1.5rem; }
@media (min-width: 820px) {
  .pricing-card-wide { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 2.5rem; align-items: start; }
  .pricing-card-wide > .pricing-features { grid-column: 2; grid-row: 1 / span 4; margin: .35rem 0 0; }
  .pricing-card-wide > .btn { justify-self: start; }
}
.price-amount { font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem); font-weight: 800; color: var(--sr-heading); letter-spacing: -.02em; line-height: 1; }
.price-note { font-size: var(--sr-fs-sm); color: var(--sr-muted); }
/* A price that is words rather than a figure, at a size the row can hold. */
.price-amount-text { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); letter-spacing: 0; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pricing-features li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--sr-amber-tint);
}
.pricing-features li::after {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1rem; height: 1rem;
  background: var(--sr-amber-text);
  -webkit-mask: var(--tick-mark) center / 100% no-repeat;
  mask: var(--tick-mark) center / 100% no-repeat;
}
.pricing-card .btn { margin-top: auto; }
.pricing-grid-4 .pricing-features { margin-bottom: 1.25rem; }
.pricing-grid-4 .pricing-features li { margin-bottom: .45rem; font-size: var(--sr-fs-sm); }
.pricing-footnote { font-size: var(--sr-fs-sm); color: var(--sr-muted); margin: .9rem 0 0; }
.pricing-badge {
  position: absolute;
  top: -.8rem;
  right: 1.25rem;
  background: var(--sr-navy);
  color: var(--ds-sr-on-brand);
  border: 1px solid var(--ds-sr-surface-brand-hover);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--sr-radius-pill);
}
.pricing-notes { margin-top: 1.75rem; color: var(--sr-muted); font-size: var(--sr-fs-sm); max-width: 80ch; }

/* FAQ: native details/summary, keyboard operable by default */
.faq {
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
  margin-bottom: .75rem;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 600;
  color: var(--sr-heading);
  position: relative;
  border-radius: var(--sr-radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: .6rem; height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq[open] summary { border-bottom: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm) var(--sr-radius-sm) 0 0; }
.faq summary:hover { background: var(--sr-bg-soft); }
.faq-body { padding: 1rem 1.25rem .25rem; }
.faq-body > :last-child { margin-bottom: 1rem; }
.faq-group { margin-bottom: 2.5rem; }

/* Tables: wrap every table in .table-wrap so it scrolls on
   narrow screens instead of the page. Give the wrapper
   tabindex="0", role="region" and an aria-label. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5rem; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); background: var(--sr-surface); }
.table-wrap table { margin: 0; min-width: 560px; }
table { width: 100%; border-collapse: collapse; font-size: var(--sr-fs-sm); }
th, td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--sr-line); }
thead th { background: var(--sr-bg-soft); color: var(--sr-heading); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
caption { caption-side: top; text-align: left; font-weight: 600; color: var(--sr-heading); padding: .6rem .9rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Appearance toggle. theme.js builds the control and styles it; these
   rules only place it. The mount point sits in shared/header.html. */
.site-header-theme { display: inline-flex; align-items: center; margin-left: auto; }
.site-header-theme + .nav-toggle { margin-left: .35rem; }
/* The narrow-phone override sits here rather than in the 430px block
   above, because a media query adds no specificity: written earlier in
   the file it lost to the .35rem on source order and never applied. */
@media (max-width: 430px) {
  .site-header-theme + .nav-toggle { margin-left: 0; }
}
/* One row at desktop widths. The row is a .container capped at 1120px
   and the eight nav links can neither wrap nor shrink, so the list gap
   and the link padding are trimmed here to fit the widest page's nav
   beside the brand and the toggle. Without that the toggle sat outside
   the column and every desktop width scrolled sideways. The phone menu
   keeps its own padding, so no tap target changes. */
@media (min-width: 1180px) {
  .site-header-theme { margin-left: 0; order: 3; }
  .site-nav ul { gap: 0; }
  .site-nav a:not(.btn) { padding-left: .45rem; padding-right: .45rem; }
}

/* Bands: the four readiness bands as chips. Three things carry the
   band, never colour on its own: the word is always printed, the
   marker is a different shape for each band (circle, diamond,
   triangle, octagon), and the chip has an edge that meets 3:1. */
.band {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .7rem;
  border-radius: var(--sr-radius-pill);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.band::before {
  content: "";
  width: .6rem;
  height: .6rem;
  background: currentColor;
  flex: none;
  clip-path: var(--band-shape, circle(50% at 50% 50%));
}
.band-ready {
  background: var(--ds-band-ready-bg);
  color: var(--ds-band-ready-fg);
  border-color: var(--ds-band-ready-border);
  --band-shape: var(--ds-band-ready-shape);
}
.band-nearly {
  background: var(--ds-band-nearly-bg);
  color: var(--ds-band-nearly-fg);
  border-color: var(--ds-band-nearly-border);
  --band-shape: var(--ds-band-nearly-shape);
}
.band-gaps {
  background: var(--ds-band-gaps-bg);
  color: var(--ds-band-gaps-fg);
  border-color: var(--ds-band-gaps-border);
  --band-shape: var(--ds-band-gaps-shape);
}
.band-not-ready {
  background: var(--ds-band-not-bg);
  color: var(--ds-band-not-fg);
  border-color: var(--ds-band-not-border);
  --band-shape: var(--ds-band-not-shape);
}
.band-lg { font-size: 1.05rem; padding: .4rem 1rem; }
.band-lg::before { width: .78rem; height: .78rem; }

/* Generic chips and badges */
.chip {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-navy-tint);
  color: var(--sr-heading);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip-amber { background: var(--sr-amber-tint); color: var(--sr-amber-text); }

/* Forms: used by the free check, the welcome page and contact
   style blocks. Every input needs a <label for>. */
.field { margin-bottom: 1.25rem; }
.field label, .field legend { display: block; font-weight: 600; color: var(--sr-heading); margin-bottom: .35rem; }
.field .help { font-size: var(--sr-fs-sm); color: var(--sr-muted); margin: 0 0 .4rem; }
.field .error { font-size: var(--sr-fs-sm); color: var(--sr-error); font-weight: 600; margin: .4rem 0 0; }
.input, .select, .textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  font: inherit;
  color: var(--sr-text);
  background: var(--sr-surface);
  border: 1px solid var(--sr-line-strong);
  border-radius: var(--sr-radius-sm);
}
textarea { min-height: 7rem; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--sr-error); border-width: 2px; }
fieldset { border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
legend { padding: 0 .4rem; }
.choice { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; }
.choice input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--sr-navy); flex: none; }
.choice label { font-weight: 500; margin: 0; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Notices: use with role="status" or role="alert" and aria-live */
.notice {
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  padding: .9rem 1.1rem;
  background: var(--sr-surface);
  margin: 1rem 0;
}
.notice > :last-child { margin-bottom: 0; }
.notice-success { border-color: var(--sr-success); }
.notice-error { border-color: var(--sr-error); }
.notice-info { border-color: var(--sr-navy); background: var(--sr-navy-tint); }
.notice:empty { display: none; }

/* Steps: numbered process list (how it works) */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 1.25rem; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; margin: 0; }
.steps > li::before {
  content: counter(step);
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sr-navy);
  color: var(--ds-sr-on-brand);
  border: 1px solid var(--ds-sr-surface-brand-hover);
  font-weight: 800;
}
/* The number comes from ::before, which auto-places in the first column.
   Every real child belongs in the second, or the second and later children
   drop back under the number and wrap to its width. */
.steps > li > * { grid-column: 2; }
.steps h3 { margin: .3rem 0 .3rem; }
.steps p { margin: 0; color: var(--sr-muted); }
@media (min-width: 820px) {
  .steps-row { grid-template-columns: repeat(4, 1fr); }
  .steps-row > li { grid-template-columns: 1fr; }
  .steps-row > li > * { grid-column: 1; }
}

/* Feature list with tick bullets */
.ticks { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--sr-amber-tint);
}
.ticks li::after {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 1.1rem; height: 1.1rem;
  background: var(--sr-amber-text);
  -webkit-mask: var(--tick-mark) center / 100% no-repeat;
  mask: var(--tick-mark) center / 100% no-repeat;
}

/* Stat blocks */
.stat { padding: 1rem 0; }
.stat-value { font-size: var(--sr-fs-h2); font-weight: 800; color: var(--sr-heading); line-height: 1.1; }
.stat-label { color: var(--sr-muted); font-size: var(--sr-fs-sm); }

/* Figure frame for screenshots and the sample report image */
.frame { background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius); padding: .6rem; box-shadow: var(--sr-shadow-lg); }
.frame img { border-radius: calc(var(--sr-radius) - 4px); width: 100%; }

/* Embedded PDF (sample report) */
.pdf-embed { width: 100%; aspect-ratio: 1 / 1.35; max-height: 80vh; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); background: var(--sr-surface); }

/* Breadcrumb */
.breadcrumb { font-size: var(--sr-fs-sm); color: var(--sr-muted); margin: 0 0 1rem; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin: 0 .3rem 0 0; color: var(--sr-line-strong); }

/* Page header block (title, intro, dates) */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem); }
.page-head h1 { max-width: 24ch; }
.page-head .lead { max-width: 62ch; color: var(--sr-muted); }
.page-meta { font-size: var(--sr-fs-sm); color: var(--sr-muted); }

/* Table of contents for long pages (legal, guides) */
.toc { background: var(--sr-bg-soft); border-radius: var(--sr-radius-sm); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.toc h2 { font-size: 1rem; margin: 0 0 .5rem; }
.toc ol { margin: 0; }

/* Cookie-free analytics note and small legal print */
.small-print { font-size: var(--sr-fs-sm); color: var(--sr-muted); }

/* ------------------------------------------------------------
   7. Utilities
   ------------------------------------------------------------ */
/* The width and height carry !important because the form rules above
   are more specific than one class, and without it a hidden input keeps
   width:100% and widens the page. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-muted { color: var(--sr-muted); }
.text-small { font-size: var(--sr-fs-sm); }
.text-strong { font-weight: 700; color: var(--sr-heading); }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2.5rem !important; }
.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.flow > * { margin-block: 0; }
.flow > * + * { margin-top: 1em; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.no-js-only { display: none; }

/* ------------------------------------------------------------
   8. Print
   ------------------------------------------------------------ */
/* tokens.css redefines the palette for print (white paper, black ink),
   so these rules only change layout and keep using the token names. */
@media print {
  body { background: var(--sr-bg); color: var(--sr-text); font-size: 11pt; }
  .site-header, .nav-toggle, .skip-link, .hero-actions, .btn, .footer-grid, .footer-theme, .pdf-embed, .breadcrumb { display: none !important; }
  .site-footer { background: none; color: var(--sr-text); border-top: 1px solid var(--sr-line-strong); padding-top: 1rem; }
  .site-footer a, .site-footer p, .footer-statement p, .footer-company { color: var(--sr-text); }
  .site-footer .brand { color: var(--sr-text); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .card, .pricing-card, .callout, .faq, .table-wrap { box-shadow: none; border: 1px solid var(--sr-line); break-inside: avoid; }
  .faq[open] summary::after, .faq summary::after { display: none; }
  details:not([open]) > *:not(summary) { display: block; }
  .band { border: 1px solid var(--sr-line-strong); }
  h1, h2, h3 { break-after: avoid; }
  .section { padding-block: 1.25rem; }
  .section-soft, .section-navy { background: none; color: var(--sr-text); border-block: 0; }
  .section-navy h1, .section-navy h2, .section-navy h3, .section-navy p { color: var(--sr-text); }
}

/* The sample report card in the hero shows a real table, and at 1440 it was 560px wide
   inside a 456px card, so the Band column was cut off mid word. A decorative card in a
   hero is not somewhere anybody thinks to scroll sideways, so make it fit instead: fixed
   layout, the section name allowed to wrap, and the band chip kept on one line. */
.hero .table-wrap table,
.frame .table-wrap table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.hero .table-wrap th:first-child,
.frame .table-wrap th:first-child { width: auto; }
.hero .table-wrap th:nth-child(2),
.frame .table-wrap th:nth-child(2) { width: 4.2rem; }
/* The band chip is nowrap, so at the card's normal type size "Gaps to close" is wider
   than any column that also leaves room for the section name, and it spilled past the
   card edge. Inside this card the chip is set compact, which lets the column be 7.4rem
   and fit at every width. A clipped band name in a sample report is the worst possible
   place for one, so this is sized from the widest chip rather than guessed. */
.hero .table-wrap th:last-child,
.frame .table-wrap th:last-child { width: 8.5rem; }
.hero .table-wrap .band,
.frame .table-wrap .band {
  font-size: .74rem;
  padding: .12rem .45rem;
  gap: .25rem;
}
.hero .table-wrap td:first-child,
.frame .table-wrap td:first-child { white-space: normal; overflow-wrap: anywhere; }
.hero .table-wrap .band,
.frame .table-wrap .band { white-space: nowrap; }
/* The last column's own padding was the final ten pixels of overflow. */
.hero .table-wrap th:last-child,
.hero .table-wrap td:last-child,
.frame .table-wrap th:last-child,
.frame .table-wrap td:last-child { padding-right: 0; }

/* The header call to action was being squeezed by the navigation list until "Open the
   app" wrapped onto four lines in a 72px pill. It keeps its words on one line and is the
   last thing in the header allowed to give up space. */
.site-header .nav-cta,
.site-nav .nav-cta {
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: max-content;
}

/* ------------------------------------------------------------
   9. The sample report card fills itself in

   The hero card shows the summary page of a real report: a company, a verdict
   band, four scored sections and two lines of conclusion. It fills in once, the
   way it would if somebody had just finished their assessment. The rows arrive,
   the scores count up to their real values (assets/hero-report-fill.js), the
   band chips resolve, the overall band lands last and the conclusion follows it.
   Then it rests, and what rests is exactly the card that shipped before any of
   this existed.

   Four rules hold the whole thing together.

   1. The scaffolding never moves. The report title, the company, the visit line,
      the table frame and the column headings are painted at once and stay put.
      Only results animate, which is what makes it read as a report being worked
      out rather than a page fading in.

   2. The starting state lives inside the keyframes, never in a rule of its own.
      With animation-fill-mode: both an element shows the from state during its
      delay, and the keyframes have no to block, so every animation ends at the
      element's own computed style. Nothing here can leave the card in a state
      the stylesheet cannot reach on its own: if the animation never runs, or the
      browser does not do animations, every part is simply there.

   3. Nothing but opacity and transform. No size, no margin, no display. The card
      occupies its final box from the first paint, so nothing below it moves.

   4. Under prefers-reduced-motion the declarations do not exist at all, because
      they are inside the no-preference query. Not faster: none.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {

  /* The sequence runs on its own timings rather than --ds-motion-*, which are
     the 120 to 300ms of interface feedback and far too quick to read as a
     report being filled in. The easing is the token. */
  @keyframes sr-fill-row {
    from { opacity: 0; transform: translateY(.45rem); }
  }
  @keyframes sr-fill-chip {
    from { opacity: 0; transform: scale(.86); }
  }
  @keyframes sr-fill-verdict {
    from { opacity: 0; transform: scale(.92); }
  }
  @keyframes sr-fill-note {
    from { opacity: 0; transform: translateY(.3rem); }
  }

  /* The four section rows, 220ms apart. A row carries its section name and its
     score; the band chip inside it is held back and resolves afterwards. */
  [data-report-fill] [data-fill="row"] {
    animation: sr-fill-row 460ms var(--ds-motion-ease) both;
  }
  [data-report-fill] [data-fill="row"]:nth-of-type(1) { animation-delay: 420ms; }
  [data-report-fill] [data-fill="row"]:nth-of-type(2) { animation-delay: 640ms; }
  [data-report-fill] [data-fill="row"]:nth-of-type(3) { animation-delay: 860ms; }
  [data-report-fill] [data-fill="row"]:nth-of-type(4) { animation-delay: 1080ms; }

  /* Each chip resolves 620ms after its own row arrived, which is just after the
     score has finished counting. */
  [data-report-fill] [data-fill="chip"] {
    animation: sr-fill-chip 340ms var(--ds-motion-ease) both;
  }
  [data-report-fill] [data-fill="row"]:nth-of-type(1) [data-fill="chip"] { animation-delay: 1040ms; }
  [data-report-fill] [data-fill="row"]:nth-of-type(2) [data-fill="chip"] { animation-delay: 1260ms; }
  [data-report-fill] [data-fill="row"]:nth-of-type(3) [data-fill="chip"] { animation-delay: 1480ms; }
  [data-report-fill] [data-fill="row"]:nth-of-type(4) [data-fill="chip"] { animation-delay: 1700ms; }

  /* The overall band lands last, because it is the one thing that cannot be
     known until every section has been scored. It sits above the table, so the
     eye is already there. */
  [data-report-fill] [data-fill="verdict"] {
    animation: sr-fill-verdict 520ms var(--ds-motion-ease) both;
    animation-delay: 1900ms;
  }
  [data-report-fill] [data-fill="note"] {
    animation: sr-fill-note 420ms var(--ds-motion-ease) both;
    animation-delay: 2150ms;
  }

  /* Off screen or in a hidden tab the script sets this and the browser does no
     work at all. animation-play-state is not inherited, so it is set on the
     animated elements and not on the card. */
  [data-report-fill][data-fill-hold] [data-fill] { animation-play-state: paused; }
}

/* Printing at second one must not print a half empty report. */
@media print {
  [data-report-fill] [data-fill] { animation: none !important; }
}

/* ------------------------------------------------------------
   The request form
   ------------------------------------------------------------
   Used by request-access.html, which is how somebody becomes a
   customer while there is no payment gateway. The pieces that were
   already here are reused: .field, .choice, fieldset, legend and
   .callout. These four are the ones that were missing.
   ------------------------------------------------------------ */

/* A column of radio or checkbox choices with room to tap. */
.choice-list { display: flex; flex-direction: column; gap: .15rem; }
.choice-list .choice { padding: .5rem 0; }
.choice-list .choice span { line-height: 1.45; }

/* A note under a field, explaining what the answer is used for. The
   help text above an input is .help; this is the one below it. */
.field-note {
  display: block;
  font-size: var(--sr-fs-sm);
  color: var(--sr-muted);
  margin-top: .4rem;
}

/* The field that is not a field. Off the side of the page rather than
   display:none, because a script that skips hidden inputs would skip
   this one too and the point is that it gets filled in. aria-hidden and
   tabindex -1 in the markup keep it away from a reader and the keyboard.
   Never put a real field in here. */
.offscreen {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* What the form says after it has been sent, or could not be. It is a
   live region, so it must be in the page from the start and empty,
   never inserted when there is something to say. */
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status:empty { margin: 0; }
.form-status.is-ok { color: var(--sr-success, var(--sr-heading)); }
.form-status.is-error { color: var(--sr-error); }