/* =========================================================================
   Reviseberg — website styles
   Hand-written, no framework. Tokens first, then layout, then components.
   Target: WCAG 2.2 AA. Body text ≥ 4.5:1, UI ≥ 3:1, targets ≥ 44px.
   ========================================================================= */

:root {
  /* Brand */
  --ink: #291c29;
  --ink-2: #443044;
  --brand: #713653;
  --brand-hover: #57253e;
  --lime: #f1b9d1;
  --lime-deep: #e9a3c2;

  /* Neutrals */
  --bg: #fffaf5;
  --bg-muted: #f4eeea;
  --bg-sunk: #ede3e5;
  --border: #ded3d7;
  --border-strong: #b7a4af;

  /* Text */
  --fg: #291c29;
  --fg-muted: #665461;
  --fg-on-dark: #fff7fb;
  --fg-on-dark-muted: #d8c3d0;

  /* Status */
  --critical: #b3261e;
  --serious: #a2540b;
  --moderate: #7a5b00;

  /* Shape & motion */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(41, 28, 41, .06), 0 12px 32px -12px rgba(41, 28, 41, .18);
  --shadow-lg: 0 2px 4px rgba(41, 28, 41, .05), 0 32px 64px -24px rgba(41, 28, 41, .28);
  --tap: 44px;
  --shell: 1180px;
  /* The sticky header's height, in one place because three things need it:
     the mobile menu's top edge, `scroll-padding-top`, and the scroll margin on
     anything focus or an anchor jumps to. Without it every in-page link lands
     with its heading parked underneath the bar. */
  --header-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* ----------------------------------------------------------------- reset */

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

/* `scroll-padding-top` is what makes a jump link land somewhere readable.
   The header is sticky, so without it the browser scrolls the target to y=0 —
   i.e. exactly behind the bar — and every table of contents, every FAQ anchor
   and every skip link delivers somebody to a heading they cannot see. It is
   also what 2.4.11 asks for, which is a criterion this site publishes a page
   about. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--brand-hover); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
.list-reset { list-style: none; margin: 0; padding: 0; }

code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-sunk); padding: .1em .35em; border-radius: 5px; }

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

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.section--dark :focus-visible, .cta :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); }

::selection { background: var(--lime); color: var(--ink); }

main:focus { outline: none; }

/* --------------------------------------------------------------- helpers */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 100;
  background: var(--ink); color: #fff;
  padding: .85rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--sm { width: 1.1em; height: 1.1em; }

.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
  text-underline-offset: .18em;
}

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

/* A line break that is a layout decision, not a sentence boundary. It splits a
   headline where the designer wants it on a wide screen; on a phone the same
   break lands mid-thought and costs a line, so it stops existing. */
@media (max-width: 48rem) { .br-wide { display: none; } }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .4rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-muted);
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  color: var(--fg-muted);
}

.eyebrow {
  margin: 0 0 .75rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
}
.section--dark .eyebrow { color: var(--lime); }

.note { font-size: .9375rem; color: var(--fg-muted); }
.note--center { text-align: center; margin-top: 2rem; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .75rem 1.375rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-2); color: #fff; }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--bg-muted); color: var(--ink); border-color: var(--ink); }

.btn--ghost { background: transparent; color: var(--fg); padding-inline: .875rem; }
.btn--ghost:hover { background: var(--bg-muted); color: var(--fg); }

.btn--invert { background: var(--lime); color: var(--ink); }
.btn--invert:hover { background: var(--lime-deep); color: var(--ink); }

.btn--ghost-invert { background: transparent; color: var(--fg-on-dark); border-color: rgba(255,255,255,.4); }
.btn--ghost-invert:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.btn--lg { min-height: 52px; padding: .9rem 1.75rem; font-size: 1.0625rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 32px;
  font-weight: 650; text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { transition: transform .18s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: .75rem; min-height: var(--header-h); }

.site-header__brand { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; color: var(--ink); }

.logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.1875rem; letter-spacing: -.03em; color: var(--ink); }
/* `flex: none` because the bar it sits in is now three items wide on a phone:
   without it the mark is the thing that gives, and an iceberg squashed to a
   sliver is the logo on every small screen. */
.logo__mark { width: 30px; height: 30px; flex: none; color: var(--brand); }
.logo__berg { color: var(--brand); }
.logo--inverse { color: #fff; }
.logo--inverse .logo__mark { color: var(--lime); }
.logo--inverse .logo__berg { color: var(--lime); }

.nav__toggle {
  display: none;
  align-items: center; gap: .5rem;
  min-height: var(--tap); padding: .5rem .875rem;
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  font: inherit; font-weight: 600; color: var(--fg); cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 4px; }
.nav__toggle-bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--fg); font-weight: 550; text-decoration: none;
}
.nav__link:hover { background: var(--bg-muted); color: var(--fg); }
.nav__link.is-current { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }

.nav__actions { display: flex; align-items: center; gap: .5rem; }
.nav__lang {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: var(--tap); padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--fg-muted); font-size: .9375rem; font-weight: 600; text-decoration: none;
}
.nav__lang:hover { background: var(--bg-muted); color: var(--fg); }

/* German labels need room too: collapse before desktop links begin to wrap. */
@media (max-width: 74rem) {
  .nav__toggle { display: inline-flex; }
  .site-nav {
    position: absolute; inset: var(--header-h) 0 auto;
    display: none;
    flex-direction: column; align-items: stretch; gap: .5rem;
    /* A phone in landscape has ~330px of height: the menu has to scroll rather
       than put its last two items past the bottom of the screen with nothing
       to say so. */
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    padding: 1rem clamp(1rem, 4vw, 2rem) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__link { padding-block: .75rem; }
  .nav__actions { flex-wrap: wrap; padding-top: .5rem; border-top: 1px solid var(--border); }
  .nav__actions .btn { flex: 1 1 auto; }

  /* The call to action stays in the bar; the menu holds everything else. It
     is pushed right by `margin-left: auto` because the nav beside it is taken
     out of flow while it is closed. */
  .site-header__cta { margin-left: auto; padding: .625rem 1rem; font-size: .9375rem; }
}

/* The call to action never wraps: a two-line button in a 72px bar pushes the
   header open and the wordmark out of shape. Where the long label will not
   fit, the short one is what ships — same destination, same promise, fewer
   characters (German needs this; English happens not to). */
.site-header__cta { white-space: nowrap; }
.site-header__cta-short { display: none; }
@media (max-width: 30rem) {
  .site-header__cta-long { display: none; }
  .site-header__cta-short { display: inline; }
  .site-header__inner { gap: .5rem; }
  .logo { font-size: 1.0625rem; }
}

/* Under ~480px the toggle's word is what pushes the row over the edge, so it
   becomes the button's accessible name instead of its label — the icon and the
   `aria-expanded` state carry the rest, and nothing loses a name. */
@media (max-width: 30rem) {
  .nav__toggle { padding-inline: .75rem; }
  .nav__toggle-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ------------------------------------------------------------ breadcrumb */

.breadcrumb { padding: 1rem 0 0; font-size: .875rem; }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.breadcrumb__item { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; }
.breadcrumb__item + .breadcrumb__item::before { content: "/"; color: var(--border-strong); }
.breadcrumb__item a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb__current { color: var(--fg); font-weight: 600; }
/* The trail plus a hero heading is a lot of chrome on a phone; the current
   page is already the <h1> two lines below it, so it drops out there. */
@media (max-width: 40rem) {
  .breadcrumb__list > .breadcrumb__item:last-child { display: none; }
}

/* ------------------------------------------------------------------- hero */

.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--bg-muted), var(--bg)); }
.hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60rem) { .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.hero--simple .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--simple .hero__copy { max-width: 54rem; }
.hero--simple .hero__title { max-width: 24ch; }
.hero--simple .hero__intro { max-width: 58ch; }

.hero__title { font-size: clamp(2.25rem, 5.2vw, 3.75rem); letter-spacing: -.035em; margin-bottom: .4em; }
.hero__intro { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--fg-muted); max-width: 40ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__note { margin-top: 1rem; font-size: .9375rem; color: var(--fg-muted); }
.hero__trust { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .625rem; }
.hero__trust li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9375rem; color: var(--fg-muted); }
.hero__trust .icon { color: var(--brand); margin-top: .15em; }

/* -------------------------------------------------------- product preview */

.preview {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.preview__chrome {
  display: flex; align-items: center; gap: .4rem;
  padding: .75rem 1rem;
  background: var(--bg-muted); border-bottom: 1px solid var(--border);
}
.preview__chrome > span:not(.preview__url) { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.preview__url { margin-left: .75rem; font-size: .75rem; color: var(--fg-muted); font-family: var(--font-mono); }

.preview__body { padding: 1.5rem; display: grid; gap: 1.25rem; }
.preview__score { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.ring {
  --value: 82;
  position: relative;
  width: 108px; height: 108px; flex: none;
  display: grid; place-content: center; text-align: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--brand) calc(var(--value) * 1%), var(--bg-sunk) 0);
}
.ring::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg);
}
.ring__value { position: relative; z-index: 1; font-size: 2rem; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.preview__gauge { display: grid; justify-items: center; gap: .5rem; flex: none; }
.ring__label { margin: 0; max-width: 9rem; text-align: center; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }

.preview__deltas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; flex: 1 1 180px; }
.preview__deltas li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; border-bottom: 1px dashed var(--border); padding-bottom: .4rem; }
.preview__delta-label { color: var(--fg-muted); }
.preview__delta-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.preview__delta-value.up { color: var(--brand); }
.preview__delta-value.down { color: var(--fg); }

.preview__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.preview__row {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; align-items: start;
  padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-muted);
  font-size: .875rem;
}
.preview__row-meta { grid-column: 2; font-size: .75rem; color: var(--fg-muted); }
.preview__foot { font-size: .8125rem; color: var(--fg-muted); margin: 0; }
.preview__caption { padding: .75rem 1.5rem 1.25rem; font-size: .75rem; color: var(--fg-muted); }

.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid currentColor;
}
.tag--critical, .tag--kritisch { color: var(--critical); }
.tag--serious, .tag--schwer { color: var(--serious); }
.tag--moderate, .tag--mittel { color: var(--moderate); }

/* --------------------------------------------------------------- sections */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--muted { background: var(--bg-muted); }
.section--tight { padding-top: clamp(2rem, 4vw, 3rem); }
.section--tall { padding-block: clamp(4rem, 12vw, 8rem); }
.section--dark { background: var(--ink); color: var(--fg-on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-head__intro { color: var(--fg-on-dark-muted); }

.section-head { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { font-size: clamp(1.75rem, 3.4vw, 2.625rem); margin-bottom: .35em; }
.section-head__intro { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--fg-muted); margin: 0; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
}
.split .section-head { margin-bottom: 1.5rem; }
.split__aside { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.section--muted .split__aside { background: var(--bg); }

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  display: flex; flex-direction: column; gap: .625rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.card__icon {
  display: inline-grid; place-content: center;
  width: 44px; height: 44px; margin-bottom: .25rem;
  border-radius: 12px; background: var(--bg-sunk); color: var(--brand);
}
.card__title { font-size: 1.125rem; margin: 0; }
/* A status inside the heading — "In development" on an agent that is not built. */
.card__badge {
  display: inline-block; vertical-align: middle; margin-left: .375rem;
  padding: .125rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 650; line-height: 1.4; white-space: nowrap;
  color: var(--serious); border: 1px solid currentColor;
}
.card__text { margin: 0; color: var(--fg-muted); font-size: .9375rem; }
.card__text a { color: var(--brand); }

/* ------------------------------------------------------------------ steps */

.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; gap: .75rem; padding: 1.5rem; border-radius: var(--radius); background: var(--bg-muted); border: 1px solid var(--border); }
.section--muted .step { background: var(--bg); }
.step__num {
  display: grid; place-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .9375rem;
}
.step__title { font-size: 1.0625rem; margin: 0 0 .25rem; }
.step__text { margin: 0; font-size: .9375rem; color: var(--fg-muted); }

/* ------------------------------------------------------------------ stats */

.stats { display: grid; gap: 1.5rem; margin: 0 0 clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { border-top: 2px solid rgba(255,255,255,.25); padding-top: 1rem; }
.stat__value { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 750; letter-spacing: -.035em; color: var(--lime); }
.stat__label { order: 2; font-size: .875rem; color: var(--fg-on-dark-muted); }
.stat { display: flex; flex-direction: column-reverse; gap: .25rem; }

.quote { margin: 0; max-width: 46rem; }
.quote blockquote { margin: 0; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.45; }
.quote figcaption { margin-top: 1rem; font-weight: 650; color: #fff; }
.quote__role { display: block; font-weight: 400; font-size: .9375rem; color: var(--fg-on-dark-muted); }

/* ----------------------------------------------------------------- checks */

.checks { display: grid; gap: .875rem; }
@media (min-width: 48rem) { .checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checks li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; }
.checks .icon { color: var(--brand); margin-top: .25em; }
.section--dark .checks .icon { color: var(--lime); }

.chips { display: flex; flex-wrap: wrap; gap: .625rem; justify-content: center; }
.chip {
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); color: var(--fg-on-dark);
  font-size: .9375rem; font-weight: 550;
}

/* -------------------------------------------------------------------- faq */

.faq { max-width: 52rem; margin-inline: auto; }
.faq .section-head__title { text-align: center; margin-bottom: 2rem; }
.faq__list { display: grid; gap: .75rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--tap); padding: 1rem 1.25rem;
  font-weight: 650; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none;
  width: .65em; height: .65em;
  border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted);
  transform: rotate(45deg) translateY(-.15em);
  transition: transform .2s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-.15em); }
.faq__q:hover { color: var(--brand); }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--fg-muted); font-size: .9375rem; }
.faq__a p:not(:last-child) { margin-bottom: .75em; }

/* ------------------------------------------------------------------ table */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 34rem; }
.table caption { text-align: left; padding: 1rem 1.25rem; font-weight: 650; border-bottom: 1px solid var(--border); }
.table th, .table td { padding: .875rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table thead th { background: var(--bg-muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
.table tbody th { font-weight: 650; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ plans */

.plans { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
  display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
}
.plan--featured { border-color: var(--ink); border-width: 2px; box-shadow: var(--shadow); }
.plan__badge {
  align-self: flex-start; margin: 0;
  padding: .25rem .75rem; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.plan__name { font-size: 1.25rem; margin: 0; }
.plan__price { margin: 0; }
.plan__amount { font-size: clamp(1.875rem, 3.5vw, 2.375rem); font-weight: 750; letter-spacing: -.04em; }
.plan__period { color: var(--fg-muted); font-size: .9375rem; }
.plan__for { margin: 0 0 .5rem; color: var(--fg-muted); font-size: .9375rem; }
.plan .btn { width: 100%; }
.plan__features { display: grid; gap: .625rem; margin-top: .5rem; font-size: .9375rem; }
.plan__features li { display: flex; align-items: flex-start; gap: .6rem; }
.plan__features .icon { color: var(--brand); margin-top: .25em; }

/* -------------------------------------------------------------------- cta */

.cta { background: var(--ink); color: var(--fg-on-dark); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .cta__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.cta__title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: #fff; margin-bottom: .35em; }
.cta__text { color: var(--fg-on-dark-muted); margin: 0; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (min-width: 60rem) { .cta__actions { justify-content: flex-end; } }
.cta__note { flex-basis: 100%; margin: 0; font-size: .875rem; color: var(--fg-on-dark-muted); }
@media (min-width: 60rem) { .cta__note { text-align: right; } }

.panel {
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-muted); text-align: center;
  max-width: 48rem; margin-inline: auto;
}
.panel .section-head__intro { margin-bottom: 1.5rem; }

/* ----------------------------------------------------------- lead / forms */

.lead { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: linear-gradient(180deg, var(--bg-muted), var(--bg)); }

/* Three blocks, and the order matters more on a phone than the columns do.
   Stacked, the pitch used to run pill → headline → paragraph → three trust
   lines before the form began, which put the first field more than a screen
   below the fold: an advertisement clicked on a phone landed on a page whose
   one job was invisible. The reassurance now sits *under* the form, where it
   answers the hesitation rather than delaying it, and the DOM says exactly
   that — no `order`, so reading order and visual order stay the same thing. */
.lead__inner { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: start; }
/* The reassurance belongs to the pitch above it, not halfway down the column. */
@media (min-width: 62rem) { .lead__inner { row-gap: 2rem; } }
@media (min-width: 62rem) {
  .lead__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    /* `auto 1fr` rather than two auto rows: the form spans both, and two auto
       rows split its extra height between them — which pushed the reassurance
       into the middle of an empty column, a long way from the sentence it is
       reassuring about. */
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy form" "trust form";
    align-content: start;
  }
  .lead__copy { grid-area: copy; }
  .lead__form { grid-area: form; }
  .lead__trust { grid-area: trust; }
}
.lead__copy .hero__title { font-size: clamp(2rem, 4.4vw, 3rem); }
.lead__copy .hero__intro { margin-bottom: 0; }
.lead__trust .hero__trust { margin-top: 0; }
.lead__form {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); box-shadow: var(--shadow);
}
.form__title { font-size: 1.375rem; margin-bottom: .25rem; }
.form__intro { color: var(--fg-muted); font-size: .9375rem; margin-bottom: 1.5rem; }

.form__grid { display: grid; gap: 1rem; }
.field--wide { grid-column: 1 / -1; }
.field { display: grid; gap: .375rem; }
.label { font-weight: 650; font-size: .9375rem; }
.optional { font-weight: 400; color: var(--fg-muted); }
.req { color: var(--critical); }
.hint { margin: 0; font-size: .8125rem; color: var(--fg-muted); }

.input {
  width: 100%; min-height: var(--tap);
  padding: .7rem .875rem;
  font: inherit; font-size: 1rem; color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.input:hover { border-color: var(--fg-muted); }
.input:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
textarea.input { min-height: 7rem; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }

.input[aria-invalid="true"] { border-color: var(--critical); border-width: 2px; }
.field__error { margin: 0; font-size: .875rem; font-weight: 600; color: var(--critical); }

.field--consent { margin-top: 1.25rem; }
.checkbox { display: flex; align-items: flex-start; gap: .65rem; font-size: .875rem; color: var(--fg-muted); cursor: pointer; }
.checkbox input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form .btn { width: 100%; margin-top: 1.5rem; }
.form__note { margin-top: 1rem; font-size: .8125rem; color: var(--fg-muted); }

.form__error-summary {
  margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  border: 2px solid var(--critical); border-radius: var(--radius-sm);
  background: #fdf3f2;
}
.form__error-summary h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--critical); }
.form__error-summary ul { margin: 0; padding-left: 1.25rem; font-size: .9375rem; }
.form__error-summary a { color: var(--critical); }

.form__status:not(:empty) {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  border-radius: var(--radius-sm); font-size: .9375rem;
  border: 2px solid var(--brand); background: #faedf3;
}
.form__status.is-error { border-color: var(--critical); background: #fdf3f2; }
.form__status strong { display: block; }

/* ------------------------------------------------------------- prose /doc */

.doc { max-width: 46rem; margin-inline: auto; }
.prose { font-size: 1.0625rem; }
.prose__head h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.prose__meta { font-size: .875rem; color: var(--fg-muted); }
.prose__intro { font-size: 1.125rem; color: var(--fg-muted); }
.prose section { margin-top: 2.5rem; }
.prose h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-top: 0; }
.prose h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .5em; }
.prose .table-wrap { margin: 1.5rem 0; }
.prose .table { min-width: 30rem; }

.toc {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius);
}
.toc__title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin-bottom: .75rem; }
.toc ol { margin: 0; padding-left: 1.25em; font-size: .9375rem; }
.toc li { margin-bottom: .35em; }

/* --------------------------------------------------------------- notfound */

.notfound { max-width: 40rem; margin-inline: auto; text-align: center; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* ----------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: var(--fg-on-dark-muted); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .9375rem; }
.site-footer a { color: var(--fg-on-dark); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.footer__pitch { margin: 1rem 0; max-width: 32ch; }
.footer__contact { margin: 0; }

.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.footer__heading { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: .75rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.footer__list a { display: inline-flex; align-items: center; min-height: 36px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .875rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.footer__legal a, .footer__legal .linklike { min-height: var(--tap); display: inline-flex; align-items: center; color: var(--fg-on-dark); font-size: .8125rem; }

/* ---------------------------------------------------------------- consent */

.consent {
  position: fixed; inset: auto 0 0; z-index: 60;
  padding: 1rem;
  display: flex; justify-content: center;
}
.consent[hidden] { display: none; }
.consent__panel {
  width: 100%; max-width: 34rem;
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.consent__title { font-size: 1.125rem; margin-bottom: .5rem; }
.consent__text { font-size: .9375rem; color: var(--fg-muted); margin-bottom: 1.25rem; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.consent__actions .btn { flex: 1 1 10rem; }
.consent__links { margin: 1rem 0 0; font-size: .8125rem; color: var(--fg-muted); }

/* --------------------------------------------------------- print & motion */

@media print {
  .site-header, .site-footer, .consent, .cta, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

@media (prefers-contrast: more) {
  :root { --border: #6b7c76; --border-strong: #38504a; --fg-muted: #33443f; }
}

/* =========================================================================
   Reference pages — the WCAG catalogue and the BFSG guides
   ========================================================================= */

/* The detection badge.
   Three states, three inks, and never colour alone: each badge carries its own
   icon and its own word, because a page that sells 1.4.1 cannot fail it. The
   inks are the existing status tokens rather than new ones — `--brand` for a
   check that decides, `--serious` for one that only half decides, `--fg-muted`
   for one that decides nothing. All three are AA against `--bg-muted`. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.badge--automated { color: var(--brand); }
.badge--partial { color: var(--serious); }
.badge--manual { color: var(--fg-muted); }

/* The principle jump list on the WCAG hub. */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.jump__label { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.jump__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.jump__link {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap); padding: .5rem 1rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--fg); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.jump__link:hover { background: var(--bg-muted); color: var(--ink); border-color: var(--ink); }
.jump__count { color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* A hero the breadcrumb already gave a top margin to. */
.hero--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Facts about a criterion that come from the catalogue rather than the copy. */
.facts { margin: 0; font-size: .9375rem; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(6rem, 34%) 1fr;
  gap: .25rem 1rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--border);
}
.facts__row:last-child { border-bottom: 0; }
.facts dt { color: var(--fg-muted); }
.facts dd { margin: 0; }

/* `.panel` centres its text, which is right for a one-sentence call to action
   and wrong for a definition list: it left the labels and the values of "At a
   glance" floating on their own axes with nothing to read down. */
.panel--facts { padding: 1.5rem; text-align: left; }
.panel--facts .section-head__title { font-size: 1.125rem; margin-bottom: .75rem; }

/* The criterion index: one card per criterion, used on the hub, on every
   criterion page ("related") and on every guide. It is the internal linking
   that makes fifty pages a reference instead of fifty pages. */
.crit-links {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.crit-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem .75rem;
  align-items: baseline;
  height: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.crit-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.crit-link__id {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 650;
  color: var(--brand);
}
.crit-link__name { font-weight: 650; text-decoration: underline; text-underline-offset: .18em; }
.crit-link:hover .crit-link__name { text-decoration-thickness: 2px; }
.crit-link__meta { font-size: .8125rem; color: var(--fg-muted); }

@media (max-width: 40rem) {
  .facts__row { grid-template-columns: 1fr; gap: .125rem; }
}

/* =========================================================================
   The instant free scan
   ========================================================================= */

/* Which half of /free-scan/ a visitor gets.
   The scan needs a fetch and a poll, so without JavaScript it cannot work and
   is not shown; the email form that was always there takes its place. The
   inline script in <head> removes `no-js` before anything paints, so neither
   one flashes. Default is the enhanced path, because a page that assumes the
   worse case and corrects it is the one that flickers for everybody. */
.scan-fallback { display: none; }
.no-js .scan { display: none; }
.no-js .scan-fallback { display: block; }

/* The idle page. A landing page for a tool should look like the tool, so the
   panel carries the product's two colours across its top edge and the section
   behind it gets a soft light rather than a flat wash. Both are decorative,
   both are behind the content, and neither clips: an `overflow: hidden` here
   would quietly break the sticky column the result state uses. */
.page-scan .lead { position: relative; isolation: isolate; }
.page-scan .lead::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 60%;
  background:
    radial-gradient(55% 60% at 22% 18%, rgba(241, 185, 209, .28), transparent 70%),
    radial-gradient(45% 55% at 82% 8%, rgba(113, 54, 83, .10), transparent 72%);
  z-index: -1; pointer-events: none;
}
.page-scan .lead__form { position: relative; overflow: hidden; }
.page-scan .lead__form::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--lime-deep));
}
.page-scan.is-scanning .lead__form::before,
.page-scan.has-result .lead__form::before { content: none; }

.scan__row { display: flex; gap: .625rem; flex-wrap: wrap; }
.scan__row .input { flex: 1 1 14rem; min-width: 0; font-size: 1.0625rem; }
.scan__row .btn { flex: 0 0 auto; }
@media (max-width: 30rem) { .scan__row .btn { width: 100%; } }

/* ---------------------------------------------------------- page states

   /free-scan/ is a landing page until somebody uses it, and then it is a
   report. The pitch, the headline and the three reassurances have done their
   job the moment a URL is submitted; leaving them beside a 27rem column while
   the evidence — the thing the whole page argues for — is squeezed into it
   gets the priority exactly backwards.

   So the page has three states, set on <body> by the script and laid out here:
   idle (two columns, form on the right), scanning and result (one column, the
   full width of a wider shell). The script owns when; CSS owns what it looks
   like, which is why neither half has to know about the other. */
.page-scan.is-scanning .lead__trust,
.page-scan.has-result .lead__trust { display: none; }

/* The pitch is taken off the screen, not out of the page. `display: none` here
   would take the <h1> with it and leave a document whose first heading is an
   <h2> — on the page that sells heading structure. Taken out of the flow it
   keeps the layout single-column (an absolutely positioned grid item claims no
   track) and keeps the heading exactly where a screen reader expects it. */
.page-scan.is-scanning .lead__copy,
.page-scan.has-result .lead__copy {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-scan.is-scanning .lead,
.page-scan.has-result .lead {
  /* Wider than the rest of the site on purpose: a findings list and the offer
     beside it need the room, and nothing here is long-form prose. */
  --shell: 1400px;
  padding-top: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 62rem) {
  .page-scan.is-scanning .lead__inner,
  .page-scan.has-result .lead__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "form";
  }
}

/* The panel is a card while it holds a form and a backdrop once it holds a
   report: the result has cards of its own, and a card inside a card is a
   border for its own sake. */
.page-scan.is-scanning .lead__form,
.page-scan.has-result .lead__form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Both are scrolled to by the script, and both sit under a sticky header
   unless they are told not to. A result whose "What we found" heading is
   hidden behind the bar reads, for the second it takes to work it out, like a
   page that jumped somewhere at random. */
.scan__progress { margin-top: 1.25rem; scroll-margin: calc(var(--header-h) + 1rem) 0 1.5rem; }
.scan__result { scroll-margin-top: calc(var(--header-h) + 1rem); }
.page-scan.is-scanning .scan__progress { margin-top: 0; }
.scan__progress-text { margin: 0 0 .625rem; font-size: 1.0625rem; font-weight: 650; color: var(--fg); }

/* An indeterminate bar: we know it is working, not how far along it is, and a
   percentage nobody measured is the kind of number this product argues with.
   It stops moving under prefers-reduced-motion — the rule at the top of this
   file kills the animation, which leaves a static bar rather than nothing. */
.scan__bar { height: 5px; border-radius: 999px; background: var(--bg-sunk); overflow: hidden; }
.scan__bar span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--lime-deep));
  animation: scan-slide 1.4s var(--ease) infinite;
}
@keyframes scan-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* ------------------------------------------------------------- the loader

   Half a minute is a long time to look at a four-pixel bar. This is the one
   place on the site with a real animation, and it earns it: it is the only
   moment where somebody is waiting on us with nothing to read.

   Everything moving is decorative and marked `aria-hidden` in the markup. The
   words beside it — the polite status line and the list of checks this pass
   runs — are ordinary text, because somebody using a screen reader waits the
   same thirty seconds and deserves the same answer. */
.scan-loader {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  max-width: 76rem; margin-inline: auto;
}
.scan-loader__target {
  margin: 0 0 .5rem;
  font-size: .875rem; color: var(--fg-muted); word-break: break-word;
}
.scan-loader__target strong { color: var(--fg); }
@media (min-width: 56rem) {
  .scan-loader { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.scan-loader__stage {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.scan-loader__chrome {
  display: flex; gap: .4rem; align-items: center;
  padding: .7rem .9rem;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}
.scan-loader__chrome span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--border-strong); }
.scan-loader__page {
  position: relative;
  display: grid; gap: .7rem; align-content: start;
  padding: 1.25rem;
  min-height: 15rem;
  overflow: hidden;
}
.scan-loader__block {
  display: block; height: .7rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-sunk), var(--bg-muted), var(--bg-sunk));
  background-size: 220% 100%;
  animation: scan-shimmer 2.4s linear infinite;
}
.scan-loader__block--head { height: 1.5rem; width: 58%; }
.scan-loader__block--wide { width: 100%; }
.scan-loader__block--mid { width: 76%; }
.scan-loader__block--tall { height: 4.25rem; border-radius: var(--radius-sm); }
.scan-loader__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }

/* The beam: a check passing down the page. It is the only thing on this screen
   that says "something is happening to your page" rather than "something is
   happening". Removed outright under reduced motion — a frozen tinted band
   halfway down a skeleton reads as an error, not as calm. */
.scan-loader__beam {
  position: absolute; left: 0; right: 0; top: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(113, 54, 83, 0) 0%, rgba(113, 54, 83, .10) 65%, rgba(113, 54, 83, .22) 100%);
  border-bottom: 2px solid var(--brand);
  animation: scan-beam 2.8s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) { .scan-loader__beam { display: none; } }

@keyframes scan-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@keyframes scan-beam {
  0% { transform: translateY(-105%); }
  100% { transform: translateY(270%); }
}

.scan-loader__elapsed {
  margin: .625rem 0 0;
  font-size: .8125rem; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.scan-loader__steps-title {
  margin: 1.5rem 0 .7rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-muted);
}
.scan-loader__steps { display: grid; gap: .55rem; }
.scan-loader__step { display: flex; align-items: center; gap: .65rem; font-size: .9375rem; }
/* The pulse moves through the icons, never through the text: text at reduced
   opacity is text below 4.5:1, and this is a page that sells the difference. */
.scan-loader__step .icon {
  flex: none; width: 1rem; height: 1rem;
  padding: .3rem; box-sizing: content-box;
  border-radius: 50%;
  color: var(--bg); background: var(--border-strong);
  animation: scan-step 3.6s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * .45s);
}
@keyframes scan-step {
  0%, 100% { background: var(--border-strong); }
  18% { background: var(--brand); }
}

/* ------------------------------------------------------------- the result */

.scan__result:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.scan-result__head { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.scan-result__head .pill { margin-bottom: .75rem; }
.pill--done { border-color: var(--brand); background: #faedf3; color: var(--brand-hover); }
.scan__result-title { font-size: clamp(1.5rem, 3.2vw, 2.25rem); margin-bottom: .35rem; }
.scan__checked { margin: 0; font-size: .9375rem; color: var(--fg-muted); word-break: break-word; }

/* The counted head: measured numbers only, and no score. One page cannot
   produce a conformance figure, and a number invented to look like a grade is
   the green tick this product exists to argue with. */
.scan-summary { display: grid; gap: 1rem; align-items: start; margin: 0 0 clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 56rem) {
  .scan-summary { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.scan-summary__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem; }
.scan-stat, .scan-severity {
  padding: 1rem 1.125rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow);
}
/* The label sits at the bottom edge: the tiles share a row height set by the
   tallest of them, and content floating in the middle of the extra space reads
   as a card that failed to load. */
.scan-stat { display: grid; align-content: space-between; gap: .1rem; }
.scan-stat__value {
  font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 750; line-height: 1.05;
  letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.scan-stat__label { font-size: .875rem; color: var(--fg-muted); }
.scan-stat__of { font-size: .8125rem; color: var(--fg-muted); }
.scan-stat--reach { background: var(--bg-muted); box-shadow: none; }

.scan-severity__title {
  margin-bottom: .7rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-muted);
}
/* Decorative, and only ever a second reading of the list below it: every count
   is written out as a number and a word, because severity must never be colour
   alone — 1.4.1 is a criterion we publish a page about. */
.scan-severity__bar {
  display: flex; height: .5rem; margin-bottom: .85rem;
  border-radius: 999px; overflow: hidden; background: var(--bg-sunk);
}
.scan-severity__part { flex-basis: 0; }
.scan-severity__part--critical { background: var(--critical); }
.scan-severity__part--serious { background: var(--serious); }
.scan-severity__part--moderate { background: var(--moderate); }
.scan-severity__part--minor { background: var(--border-strong); }
.scan-severity__list { display: grid; gap: .4rem; }
.scan-sev { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; }
.scan-sev__dot { width: .65rem; height: .65rem; border-radius: 50%; flex: none; background: currentColor; }
.scan-sev--critical { color: var(--critical); }
.scan-sev--serious { color: var(--serious); }
.scan-sev--moderate { color: var(--moderate); }
.scan-sev--minor { color: var(--fg-muted); }
.scan-sev__name { flex: 1; color: var(--fg); }
.scan-sev__n { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.scan-sev.is-zero { color: var(--border-strong); }
.scan-sev.is-zero .scan-sev__name, .scan-sev.is-zero .scan-sev__n { color: var(--fg-muted); font-weight: 400; }

/* Evidence on one side, the offer on the other. The report form used to sit
   below everything at the bottom of a narrow column; beside the findings it is
   read while the findings are still on screen, which is the argument. */
.scan-result__cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 62rem) {
  .scan-result__cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .scan-result__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.scan__findings-title {
  margin-bottom: .75rem;
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-muted);
}
.scan-findings { display: grid; gap: .875rem; }
@media (min-width: 82rem) {
  .scan-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.scan-finding {
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  /* Staggered in, once. `both` keeps the end state, which is also what the
     reduced-motion rule at the top of this file collapses to. */
  animation: scan-in .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.scan-finding:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.scan-finding--critical { border-left-color: var(--critical); }
.scan-finding--serious { border-left-color: var(--serious); }
.scan-finding--moderate { border-left-color: var(--moderate); }
@keyframes scan-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.scan-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.scan-finding__rule { font-family: var(--font-mono); font-size: .8125rem; }
.scan-finding__count { margin-left: auto; font-size: .8125rem; color: var(--fg-muted); }
.scan-finding__message { margin: .5rem 0 .75rem; font-size: .9375rem; }
.scan-finding__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.scan-finding__wcag { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.scan-finding__selector {
  flex: 1 1 100%;
  display: block;
  padding: .35rem .5rem;
  border-radius: 6px;
  background: var(--bg-sunk);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

/* A criterion link, shaped like a chip rather than underlined prose: it sits in
   a row of its own siblings, not inside a sentence. */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: .75rem; font-weight: 650;
}
.chip--link { background: var(--bg-muted); color: var(--brand); text-decoration: none; }
.chip--link:hover { background: var(--bg-sunk); color: var(--brand-hover); text-decoration: underline; }

.scan__more { margin: 1rem 0 0; font-size: .9375rem; color: var(--fg-muted); }

/* The sentence that keeps a short list of findings honest. Marked as a note
   rather than a warning: it is the result's context, not an apology for it. */
.scan__reach {
  margin: 1.25rem 0 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font-size: .9375rem;
}

.scan-clean {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--brand); border-radius: var(--radius);
  background: #faedf3;
}
.scan__clean-title { font-size: 1.125rem; margin-bottom: .375rem; }
.scan__clean-text { margin: 0; font-size: .9375rem; color: var(--fg-muted); }

.scan-failed {
  max-width: 42rem; margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); box-shadow: var(--shadow);
}
.scan-failed .btn { margin-top: 1rem; }

/* The offer, once the evidence is on screen. */
.scan__report {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
}
.scan__report-title { font-size: 1.25rem; margin-bottom: .375rem; }
.scan__report-intro { font-size: .9375rem; color: var(--fg-muted); margin-bottom: 1.25rem; }
.scan__again { margin-top: 1.25rem; font-size: .9375rem; }

/* Public identity: warm paper, aubergine ink and a restrained rose accent. */
:root { --logo-ice: #f1b9d1; }
.site-header { background: rgba(255,250,245,.96); }
.logo--inverse { --logo-ice: #291c29; }
.btn { border-radius: 8px; font-size: .9375rem; min-height: 48px; }
.site-header__cta { min-height: 44px; }
.nav__link { font-size: .9375rem; }
.hero { background: var(--bg); }
.hero__title { letter-spacing: -.055em; }
.section-head__title { letter-spacing: -.045em; }
.card { box-shadow: none; }
.plan--featured { background: #faedf3; }
.launch-hero { padding: clamp(3rem,5vw,4rem) 0 0; }
.launch-hero > .shell { max-width: 1280px; }
.launch-eyebrow { display: flex; justify-content: center; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 600; margin-bottom: 1.5rem; }
.launch-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px #f4e2eb; }
.launch-hero h1 { font-size: clamp(2.6rem,6vw,5.2rem); font-weight: 600; letter-spacing: -.065em; line-height: .99; text-align: center; margin: 0 auto 1.5rem; }
.launch-hero h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.065em; color: var(--brand); }
.launch-intro { max-width: 610px; margin: 0 auto 1.75rem; text-align: center; font-size: 1.125rem; line-height: 1.65; color: var(--fg-muted); }
.launch-actions { display: flex; justify-content: center; gap: .65rem; flex-wrap: wrap; }
.launch-actions .btn { padding: .95rem 1.5rem; }
.launch-note { text-align: center; margin: .8rem 0 0; font-size: .8125rem; color: var(--fg-muted); }
.launch-trust { display: flex; justify-content: center; gap: 1.8rem; flex-wrap: wrap; margin: 2.1rem 0 2.8rem; }
.launch-trust li { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--fg-muted); }
.launch-trust .icon { width: 1rem; }
/* The product, where the shop illustration used to be: one wide dashboard
   frame, score on the left and findings on the right, so the first thing under
   the hero is what somebody gets rather than a story about a shop. */
.launch-preview { max-width: 1080px; margin: 0 auto; text-align: left; }
.launch-preview .preview__body { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; gap: 1.5rem 2rem; padding: 1.75rem; }
.launch-preview .preview__score { flex-direction: column; align-items: stretch; }
.launch-preview .preview__foot { grid-column: 1 / -1; }
@media (max-width: 760px) { .launch-preview .preview__body { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; } }
.evidence-stage { padding: 1.65rem; border-radius: 18px; background: var(--ink); color: var(--fg-on-dark); scroll-margin-top: 6rem; text-align: left; }
.evidence-stage__heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.evidence-stage__heading h2 { font-size: 1.125rem; letter-spacing: -.025em; margin: 0; }
.evidence-stage__heading > span { font-size: .72rem; color: var(--fg-on-dark-muted); }
.evidence-stage__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; }
.sample-shop { background: #f0ddd0; color: #38272d; position: relative; overflow: hidden; border-radius: 9px; padding: 1.5rem 2rem 2.5rem; min-height: 390px; }
.sample-shop__nav { border-bottom: 1px solid #c8afa5; display: flex; justify-content: space-between; padding-bottom: .8rem; font-size: .65rem; letter-spacing: .12em; font-weight: 700; }
.sample-shop__label { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; margin: 2rem 0 .7rem; }
.sample-shop__headline { font-family: Georgia,serif; font-size: clamp(2.2rem,4vw,3.7rem); line-height: 1; letter-spacing: -.055em; margin-bottom: .8rem; position: relative; z-index: 2; }
.sample-shop > p:not([class]) { font-size: .8rem; max-width: 16rem; position: relative; z-index: 2; }
.sample-shop__button { display: inline-flex; gap: 1.5rem; padding: .7rem 1rem; margin-top: 1rem; font-size: .75rem; background: #38272d; color: #fff7fb; outline: 2px solid #713653; outline-offset: 4px; position: relative; z-index: 2; }
.sample-shop__sculpture { position: absolute; width: 180px; height: 250px; right: -18px; bottom: -28px; transform: rotate(-16deg); }
.sample-shop__sculpture span { display: block; position: absolute; width: 130px; height: 180px; border: 24px solid #b06c82; border-radius: 90px 90px 20px 20px; box-shadow: inset 5px 0 0 #95566b, 7px 9px 0 #cf9aab; }
.sample-shop__sculpture span:nth-child(2) { top: 42px; left: 36px; }
.sample-shop__sculpture span:nth-child(3) { top: 84px; left: 72px; }
.sample-dialog { position: absolute; z-index: 4; inset: 30% 8% auto; padding: 1.5rem; border: 1px solid #b7a4af; border-radius: 10px; background: #fffaf5; box-shadow: 0 15px 70px #291c2966; }
.sample-dialog > span { float: right; }
.sample-dialog strong { font-family: Georgia,serif; font-size: 1.7rem; }
.sample-dialog p { font-size: .875rem; margin-top: .65rem; }
.evidence-panel { background: #fffaf5; color: var(--fg); padding: 1.5rem; border-radius: 9px; }
.evidence-panel .eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .65rem; }
.evidence-controls { display: flex; gap: .3rem; margin: 1rem 0 1.5rem; }
.evidence-controls[hidden], [data-evidence-panel][hidden], .sample-dialog[hidden] { display: none; }
.evidence-controls button { flex: 1; border: 1px solid var(--border-strong); background: transparent; color: var(--fg-muted); padding: .5rem; min-height: 44px; font: inherit; font-size: .65rem; border-radius: 6px; cursor: pointer; }
.evidence-controls button[aria-pressed=true] { color: #fff; background: var(--brand); border-color: var(--brand); }
.evidence-key { display: inline-flex; padding: .35rem .75rem; border: 1px solid var(--border-strong); border-bottom-width: 3px; border-radius: 6px; font: 600 .875rem var(--font-mono); margin-bottom: 1rem; background: #fff; }
.evidence-panel h3 { font-size: 1.55rem; letter-spacing: -.035em; max-width: 24ch; }
.evidence-panel p { font-size: .875rem; color: var(--fg-muted); }
#evidence-result { min-height: 225px; }
.evidence-verdict { display: flex; gap: .4rem; align-items: center; font-weight: 600; border-top: 1px solid var(--border); padding-top: .9rem; margin-top: 1.2rem; }
.evidence-panel .link-arrow { font-size: .8rem; }
.evidence-caption { font-size: .72rem; color: var(--fg-on-dark-muted); margin: 1rem 0 0; }
.benefits-section { padding-block: clamp(4rem,8vw,7rem); }
.benefits-section .section-head { max-width: 46rem; }
.benefits-section .section-head__title, .platform-story .section-head__title, .partner-story .section-head__title { font-size: clamp(2.4rem,4.4vw,4rem); }
.benefit-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.6rem; margin-top: 3.5rem; }
.benefit-list li { padding-top: 1.2rem; border-top: 1px solid var(--border-strong); }
.benefit-list li > span { display: block; color: var(--brand); font: .75rem var(--font-mono); margin-bottom: 1.5rem; }
.benefit-list h3 { font-size: 1.4rem; letter-spacing: -.04em; }
.benefit-list p { color: var(--fg-muted); font-size: .95rem; }
.platform-story, .partner-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,7vw,6rem); align-items: center; }
.capability-list li { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.capability-list li > .icon { color: var(--brand); margin-top: .3rem; width: 1.5rem; }
.capability-list h3 { font-size: 1.25rem; }
.capability-list p { color: var(--fg-muted); font-size: .9375rem; }
.partner-story .section-head__intro { color: var(--fg-on-dark-muted); }
.roadmap-note { border: 1px solid #72576a; border-radius: 12px; padding: 2rem; }
.roadmap-note > div + div { margin-top: 2rem; border-top: 1px solid #72576a; padding-top: 2rem; }
.roadmap-note h3 { font-size: 1.15rem; color: var(--lime); }
.roadmap-note p { color: var(--fg-on-dark-muted); font-size: .9375rem; }
.roadmap-dot { float: right; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.guide-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.guide-links a { display: block; padding: 1.6rem 0; border-top: 1px solid var(--border-strong); text-decoration: none; color: var(--fg); }
.guide-links a:hover h3 { color: var(--brand); text-decoration: underline; }
.guide-links h3 { font-size: 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.guide-links p { color: var(--fg-muted); font-size: .9375rem; }
.cta { background: var(--ink); }
@media (max-width: 48rem) {
  .launch-hero { padding-top: 2.5rem; }
  .launch-hero h1 { font-size: clamp(3.1rem,11vw,4.7rem); }
  .launch-intro { font-size: 1rem; max-width: 34rem; }
  .launch-trust { gap: .6rem 1rem; margin-block: 1.5rem 2rem; }
  .evidence-stage { padding: .9rem; }
  .evidence-stage__heading { display: block; }
  .evidence-stage__heading h2 { margin-bottom: .25rem; }
  .evidence-stage__grid { grid-template-columns: 1fr; }
  .sample-shop { min-height: 330px; padding: 1.2rem 1.5rem 2rem; }
  .sample-shop__headline { font-size: 3.1rem; }
  .evidence-panel { padding: 1.2rem; }
  .evidence-controls { margin-bottom: 1rem; }
  #evidence-result { min-height: 230px; }
  .benefit-list, .platform-story, .partner-story, .guide-links { grid-template-columns: 1fr; }
  .benefit-list { gap: 1.8rem; }
  .benefit-list li > span { margin-bottom: .75rem; }
  .guide-links { gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .launch-hero h1 { animation: launch-appear .6s ease-out both; }
  @keyframes launch-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
.page-pricing .hero { text-align: center; padding-bottom: 1.5rem; }
.page-pricing .hero__copy { margin-inline: auto; }
.page-pricing .hero__title, .page-pricing .hero__intro { margin-inline: auto; }
.page-pricing .hero__actions { justify-content: center; }
.page-pricing .hero + .section { padding-top: 2rem; }
.page-pricing .plan { border-radius: 12px; box-shadow: none; }
.page-pricing .plan--featured { border-color: var(--brand); }

/* The search phrase at the top of a hero heading — `heroTitle` in lib/ui.mjs.
   It is part of the <h1>, dressed as the line above it: small, tracked
   normally and in the accent colour, so the slogan is still what you read
   first. The heading's own letter-spacing is tuned for display sizes and would
   crush text this small, hence the reset. */
.hero__kicker {
  display: block;
  margin-bottom: .6rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--brand);
}
.launch-hero h1 .hero__kicker { margin-bottom: 1.1rem; font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); }

/* Annex 3 BFSG on /accessibility-statement/, lettered the way the statute
   letters it. The letter is text, not a list marker: "Annex 3 (c)" is what the
   rest of the page and every lawyer cites, so it has to be read out. */
.annex { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 48rem) { .annex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.annex__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.annex__ref { font: 600 1.125rem/1.4 var(--font-mono); color: var(--brand); }
.annex__title { font-size: 1.0625rem; margin: 0 0 .35rem; }
.annex__text { margin: 0; font-size: .9375rem; color: var(--fg-muted); }

/* A criterion page's practical half (pages-learn.mjs): testing by hand, the
   failure and the fix in code, the rules the scan runs and the guides that
   cite the criterion. Code wraps rather than scrolls on purpose: a scrolling
   <pre> is a region a keyboard cannot reach — the page would fail the criteria
   it explains — and wrapped code survives 320px. */
.test-steps { margin: 0; padding-left: 1.35em; }
.test-steps li { margin-bottom: .75rem; padding-left: .25rem; }
.test-steps li::marker { font-weight: 700; color: var(--brand); }

.code-sample { margin: 0 0 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.code-sample figcaption {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-bottom: 1px solid var(--border);
  font-size: .8125rem; font-weight: 700;
}
.code-sample--fail figcaption { color: var(--critical); }
.code-sample--pass figcaption { color: var(--fg); }
.code-sample pre { margin: 0; padding: .9rem 1rem; font: .8125rem/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.code-sample code { padding: 0; background: none; font-size: inherit; }

.rules__title { margin: 1.75rem 0 .5rem; font-size: 1.0625rem; }
.rule-list { margin-bottom: 1rem; }
.rule-list__item {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .25rem 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
@media (max-width: 40rem) { .rule-list__item { grid-template-columns: minmax(0, 1fr); } }
.rule-list__id { justify-self: start; overflow-wrap: anywhere; }
.rule-list__help { font-size: .9375rem; color: var(--fg-muted); }
.rule-list__engine {
  display: inline-block; margin-left: .35rem; padding: .05rem .5rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}

.guide-refs { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: 0 0 2.5rem; }
/* The code samples are cards of their own; a card around them is one too many. */
.split--practice .split__aside { padding: 0; border: 0; background: none; }