/* ==========================================================================
   licencecheck.org - design system
   ==========================================================================

   THE TOKEN BLOCK BELOW IS PORTED VERBATIM FROM ddir.co.uk. DO NOT RE-PICK IT.

   licencecheck.org and DDIR are two products from the same company sold to the
   same fleet operators, and the brief is that they must read as one family.
   That only holds if the values are IDENTICAL rather than merely similar - an
   operator moving between the two sites registers a shifted amber or a
   softened corner long before they could name it, and the resemblance is gone.

   So these are shared identity, not this site's taste. If a value looks wrong
   here, the fix is a conversation about the family, not an edit to this block.

   Three of them carry the identity harder than the rest, and none of the three
   should be softened:

     --r: 2px   Corners stay sharp, everywhere, with no exceptions. This is
                compliance tooling, not a consumer app, and a friendly radius
                is the single fastest way to make it look like generic SaaS.

     --mono     Data, prices, labels and small caps are set in IBM Plex Mono.
                Numbers a fleet manager is asked to trust should look measured
                rather than marketed. This does most of the work of making the
                site read as an instrument rather than a brochure.

     Dark only. DDIR commits to one visual world and so does this site. There
                is deliberately NO prefers-color-scheme block anywhere in this
                file, and `html` and `body` both paint the background from the
                tokens so a page can never end up borrowing a host background
                and rendering --text on white.

   No client-side JavaScript is used anywhere on this site, so every
   interactive state in here is reachable with CSS alone.
   ========================================================================== */

:root {
  --bg: #0A0E1A;
  --panel: #111627;
  --panel-2: #161C30;
  --text: #E9ECF4;
  --mut: #97A0B5;
  --dim: #5D6579;
  --amber: #F59E0B;
  --amber-2: #FFC249;
  --amber-ink: #241703;
  --pass: #34D399;
  --alert: #FB7185;
  --line: rgba(233, 236, 244, 0.09);
  --line-2: rgba(233, 236, 244, 0.2);
  --r: 2px;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* Site-local measurements. Deliberately a SEPARATE block from the identity
   tokens above so that block stays a clean, greppable copy of DDIR's and a
   diff against DDIR never turns up our own additions as false differences.
   These three are this site's own and are safe to tune. */
:root {
  --wrap: 1080px;
  --gutter: 24px;
  --measure: 68ch; /* Running text cap. Past ~70 characters the eye loses the
                      line it is returning to, and these pages are long. */
}

/* --------------------------------------------------------------------------
   Contrast notes, measured against --bg (#0A0E1A):

     --text   ~17.9:1   any size
     --mut     ~7.3:1   any size
     --amber   ~9.0:1   any size
     --dim     ~3.3:1   DECORATION ONLY - rules, separators, disabled marks.
                        It fails WCAG AA for body copy, so it must never be
                        used for anything a reader has to read.
     --amber-ink on --amber ~8.2:1  (the primary button)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  /* Painted here as well as on body so the overscroll gutter and the area
     below a short page stay in the same visual world rather than flashing
     white. */
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

/* Three of the four ways a page ends up scrolling sideways on a phone. The
   fourth is a wide table, handled under Tables below. */
img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

pre {
  overflow-x: auto;
}

/* DDIR, verbatim. */
body { background: var(--bg); color: var(--text); font-family: var(--sans);
       font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

body {
  /* A pasted URL in ported Yolasite copy is long enough to push the whole page
     wider than the viewport on a phone. Breaking it is uglier than the
     alternative, which is every line of body text scrolling sideways with it. */
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* --------------------------------------------------------------------------
   Focus and motion
   -------------------------------------------------------------------------- */

/* The amber is the highest-contrast thing on the palette, which makes it the
   honest choice for "you are here" on a keyboard. Nothing in this file removes
   an outline except the skip target below, which explains itself. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* Placed at the end of no particular section on purpose: !important means
     source order cannot betray it, and a later component adding a transition
     is covered without anyone remembering to come back here. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 20;
  /* Moved out of view rather than hidden: display:none and visibility:hidden
     both take it out of the tab order, which is the one thing it exists for. */
  transform: translateY(-150%);
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: var(--r);
}

.skip:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Type scale

   clamp() rather than breakpoints so the scale is continuous: there is no
   viewport width at which a heading is awkwardly large for the column it sits
   in. Each maximum is reached at roughly --wrap, so the scale stops growing at
   the same point the layout does.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); }
h4 { font-size: 1.0625rem; }
h5, h6 { font-size: 1rem; }

/* The standfirst under a heading. --mut, not --text: it is support, and at
   7.3:1 it is still comfortably readable. */
.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--mut);
  max-width: var(--measure);
}

small,
.fine {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mut);
}

/* Declared early and on the bare element (specificity 0,0,1) so that every
   component below - buttons, nav, footer - overrides it with a single class
   and never has to fight it. */
a {
  color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* :not([class]) is doing real work here, not showing off. A bare `a:hover`
   would be specificity 0,1,1 and would therefore beat `.btn-amber` (0,1,0) on
   colour - hovering the primary button would paint its label amber on amber
   and make it unreadable, with nothing failing to tell us. Every component
   link on this site carries a class; content links do not. */
a:not([class]):hover {
  color: var(--amber-2);
}

strong, b { font-weight: 700; }

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

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.9em;
}

:not(pre) > code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2px 6px;
}

pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Mono furniture

   Rule 2 of the identity: data, prices, labels and small caps are mono. These
   are the classes that deliver it, and they are what stops the page reading as
   generic SaaS.
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
}

.label-amber { color: var(--amber); }

.mono {
  font-family: var(--mono);
  /* Figures line up in a column even when the values differ in width, which is
     the whole point of showing a number in a table rather than a sentence. */
  font-variant-numeric: tabular-nums;
}

.stat {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* body is a column flexbox and this is the part that stretches, so on a short
   page the slack is absorbed here and the footer sits at the bottom of the
   viewport. Putting the stretch on the footer instead would open a band of
   bare --bg between the closing CTA and the footer. */
main {
  flex: 1 0 auto;
}

/* DDIR, verbatim. */
section { padding: 66px 0; }
.band { display: flex; align-items: baseline; gap: 18px; border-top: 1px solid var(--line-2);
        padding-top: 18px; margin-bottom: 36px; }

/* .band is a flex row of a mono label and a heading sharing a baseline, so the
   label must not stretch and the heading must be free to wrap. */
.band .label { flex: 0 0 auto; }
.band h2, .band h3 { margin: 0; }

/* Full-bleed tone changes. The band colour runs edge to edge while the content
   inside stays on the 1080px measure, which is why these sit on the <section>
   and not on .wrap. */
.tone-panel { background: var(--panel); border-block: 1px solid var(--line); }
.tone-panel-2 { background: var(--panel-2); border-block: 1px solid var(--line); }

/* An explicit scroll container for anything wider than the column - a rate
   card, a comparison table, a code sample. Wide content scrolls inside this;
   the page itself never does.

   Note there is deliberately no `overflow-x: hidden` on body. It would hide
   exactly this class of bug rather than fix it, and it silently breaks
   position:sticky for every descendant. */
.scroller {
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Buttons

   DDIR, verbatim. Modifiers follow the base deliberately: .btn-amber and
   .btn-line are the same specificity as .btn (0,1,0), so source order is the
   only thing deciding which background wins. Moving either above .btn would
   produce a button with no colour and no error.
   -------------------------------------------------------------------------- */

/* .btn-amber draws no border, so an amber and a line button side by side
   differ in height by the 2px of .btn-line's border and sit visibly
   off-baseline. A transparent border on the base fixes that for free.

   This has to sit ABOVE the verbatim block rather than below it. .btn-line's
   real border is also 0,1,0, so a later `.btn { border: ... }` would silently
   overwrite it and the secondary button would lose its outline altogether -
   no error, no failing test, just a button that stopped looking like one. */
.btn {
  border: 1px solid transparent;
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
       font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 0.01em;
       text-decoration: none; padding: 15px 28px; border-radius: var(--r); cursor: pointer;
       transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn-amber { background: var(--amber); color: var(--amber-ink); }
.btn-amber:hover { background: var(--amber-2); }
.btn-line { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--text); }

/* The compact variant used in the masthead, where full-size buttons would
   crowd the nav off the line on a laptop. */
.btn-sm {
  font-size: 14px;
  padding: 10px 18px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Masthead

   No JavaScript, so the mobile nav is a wrap rather than a toggle: the logo,
   the five links and the two calls to action are each their own flex item and
   simply fall onto the next line as the viewport narrows. Nothing to open,
   nothing to trap focus in, nothing to break.
   -------------------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-block: 18px;
}

.wordmark {
  /* Mark and words on one baseline. Flex rather than an inline image so the
     two stay aligned as the type scale moves, and so the gap is one value
     rather than a margin that has to be undone somewhere else. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.wordmark:hover { color: var(--text); }
.wordmark-tld { color: var(--amber); }

/* Explicit box: width and height are on the element too, but the CSS has to
   agree or the reserved space and the painted space differ and the header
   jumps once the PNG decodes. */
.wordmark-mark {
  width: 40px;
  height: 40px;
  display: block;
  flex: 0 0 auto;
}

/* Below the nav's wrap point the mark alone carries the brand and the words
   would push the buttons onto a third row. */
@media (max-width: 420px) {
  .wordmark { font-size: 17px; gap: 8px; }
  .wordmark-mark { width: 34px; height: 34px; }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.nav a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  text-decoration: none;
  padding-block: 4px;
}

.nav a:hover { color: var(--text); }

/* Same specificity as .nav a:hover (0,2,1), so this MUST stay below it or the
   current page would lose its highlight the moment the pointer moved away. */
.nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -1px 0 0 var(--amber);
}

.head-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding: 92px 0 72px; }

/* DDIR, verbatim. No font-size here on purpose - it comes from the h1 in the
   type scale above, which is a lower specificity (0,0,1 against 0,1,1) and so
   is safely overridden by anything a page needs. */
.hero h1 { font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'opsz' 40;
           line-height: 1; margin-bottom: 24px; }

.hero .lede { margin-bottom: 32px; }
.hero .label { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Grid and cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 16px;
  /* auto-fit + minmax is the whole responsive story: columns are added and
     removed by available width, so there are no card breakpoints to maintain
     and no count to keep in sync with the content. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Column-count modifiers. Same specificity as .grid, so as with the buttons
   these have to stay below it. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}

.card > * + * { margin-top: 12px; }
.card h3, .card h4 { color: var(--text); }
.card p { color: var(--mut); }

/* Lifted only by its border. A shadow would read as a floating consumer card
   and fight the flat, panelled look the rest of the kit is built on. */
.card-line {
  background: transparent;
}

.card-accent {
  border-color: var(--line-2);
  box-shadow: inset 3px 0 0 0 var(--amber);
}

/* --------------------------------------------------------------------------
   Prices

   Every number on this site comes from src/_data/pricing.js - see the comment
   at the top of that file, and tests/pricing.test.js, which fails the build if
   a price is typed into a page.

   .price-when is not decoration. "1.00" reads as a recurring charge until you
   see "once every three years", so the modifier travels with the number and
   the two are never separated in a template.
   -------------------------------------------------------------------------- */

.price {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.price-when {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  margin-top: 10px;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
}

.price-row .price {
  font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th, td {
  text-align: left;
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  border-bottom-color: var(--line-2);
  white-space: nowrap;
}

td {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Status marks
   -------------------------------------------------------------------------- */

.pass { color: var(--pass); }
.alert { color: var(--alert); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 5px 10px;
  color: var(--mut);
}

.pill-pass { color: var(--pass); border-color: var(--pass); }
.pill-alert { color: var(--alert); border-color: var(--alert); }

/* --------------------------------------------------------------------------
   Prose

   The measure is set on the container's CHILDREN rather than on the container
   itself. Capping .prose would also cap anything that needs the full column -
   a table, a card grid - and capping only <p> would miss the <ul>, <ol> and
   <blockquote> that Markdown emits just as often. Children plus explicit
   opt-outs is the version that survives content nobody has written yet.
   -------------------------------------------------------------------------- */

.prose > * {
  max-width: var(--measure);
}

.prose > table,
.prose > figure,
.prose > hr,
.prose > .grid,
.prose > .scroller,
.prose > .btn-row {
  max-width: 100%;
}

.prose > * + * {
  margin-top: 20px;
}

.prose > * + h2 { margin-top: 44px; }
.prose > * + h3 { margin-top: 32px; }

.prose > :last-child {
  margin-bottom: 0;
}

.prose p,
.prose li {
  color: var(--mut);
}

.prose h2, .prose h3, .prose h4 {
  color: var(--text);
}

.prose a {
  color: var(--amber);
  text-decoration: underline;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li { margin-top: 8px; }

/* The one flash of amber in a wall of grey text, and the cheapest way to make
   a ported Yolasite bullet list look like it belongs here. */
.prose li::marker { color: var(--amber); }

.prose blockquote {
  border-left: 2px solid var(--amber);
  padding-left: 20px;
  color: var(--text);
}

/* Markdown has no way to wrap its own tables, so the table becomes its own
   scroll container. Without this one rule a single wide table from a ported
   page widens the document and every line on the page scrolls sideways with
   it. fit-content keeps a narrow table narrow instead of stretching it. */
.prose table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Closing call to action

   Repeated on every page, which is why it lives in the layout and not in
   content: a CTA that has to be remembered gets forgotten on the page that
   most needed it.
   -------------------------------------------------------------------------- */

.cta {
  background: var(--panel-2);
  border-top: 1px solid var(--line-2);
  padding: 56px 0;
}

.cta .label { margin-bottom: 16px; }
.cta h2 { max-width: 20ch; margin-bottom: 16px; }
.cta .lede { margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   Footer

   The family lines are the point of this footer. Two products, one company,
   and an operator who needs to be able to see that in one glance.
   -------------------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 44px 0 56px;
  font-size: 15px;
  color: var(--mut);
}

.foot-family {
  max-width: var(--measure);
}

.foot-family + .foot-family {
  margin-top: 8px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
}

.site-foot a {
  color: var(--mut);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
}

.site-foot a:hover {
  color: var(--text);
  text-decoration-color: var(--text);
}

/* Same specificity as .site-foot a (0,1,1), so this has to stay below it or
   the two brand names would drop back to --mut and stop being the thing the
   eye lands on. */
.site-foot .foot-brand {
  color: var(--text);
  font-weight: 700;
  text-decoration-color: var(--amber);
}

.foot-copy {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   Skip target

   Focus arrives here programmatically, from the skip link, rather than by
   tabbing - so an outline would be announcing something the reader did not do,
   and the jump to the top of the content already confirms the skip worked.
   This is the only outline suppressed anywhere in this file.
   -------------------------------------------------------------------------- */

main:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Narrow viewports

   One breakpoint, and only for the things clamp() cannot do: vertical rhythm
   and the masthead's horizontal padding.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  section { padding: 44px 0; }
  .hero { padding: 56px 0 44px; }
  .cta { padding: 44px 0; }

  .band {
    /* The label and the heading stop sharing a baseline once the heading wraps
       to three lines; stacking them keeps the label as a caption rather than a
       stranded word beside a paragraph-sized heading. */
    display: block;
  }

  .band .label { margin-bottom: 10px; }

  .btn { width: 100%; }
  .btn-sm { width: auto; }
}

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

   The list rendered by _includes/price-table.njk. The .price, .price-when and
   .price-row primitives above already do the work; this is only what a
   definition list needs on top of them - browsers give dl/dt/dd margins and an
   indent that would knock the figures out of their column.

   .price-figure is right-aligned so the modifier sits directly beneath its own
   number rather than under the middle of the row. Which number a modifier
   belongs to has to be unambiguous at a glance: "once every three years"
   drifting under the wrong line is a mis-quote, not a layout nit.
   -------------------------------------------------------------------------- */

.price-table {
  margin: 0;
}

.price-table .price-row {
  margin: 0;
}

.price-table dt {
  font-weight: 500;
  color: var(--text);
}

.price-table dd {
  /* The UA stylesheet's 40px inline-start margin on dd is the one that would
     push every figure off its column. */
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
}

/* Below this the longest label and its price stop fitting on one line, and
   space-between pulls them to opposite edges with a ragged gap in between.
   Stacking is the honest answer; this is narrower than the 640px breakpoint
   above because the rows survive tablet width perfectly well. */
@media (max-width: 480px) {
  .price-table .price-row {
    display: block;
  }

  .price-table dd {
    text-align: left;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   Full-bleed page furniture

   For pages that opt out of base.njk's reading-measure wrapper with
   `wide: true` and lay out their own sections. They still want running text to
   read exactly as it does on the ported article pages, so they wrap it in
   .prose by hand - this is only the spacing that would otherwise be an inline
   style, and an inline style is where a design system starts leaking.
   -------------------------------------------------------------------------- */

.section-note {
  margin-top: 32px;
}

/* A price row is a label on the left and a figure on the right, and past about
   this width the two stop reading as a pair: the eye has to travel so far that
   which modifier belongs to which number becomes a guess. That ambiguity is a
   mis-quote, not a layout nit - see _includes/price-table.njk. Inside .prose
   the measure already does this; this is for the wide sections that have no
   measure to inherit. */
.price-table {
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Footer compliance line

   The ICO registration and the ISO 27001 certificate number. Sized and
   coloured as fine print because that is what it is, but --mut rather than
   --dim: --dim fails AA for body copy and these are two numbers a reader is
   meant to be able to read and check. A trust signal nobody can read is
   decoration.

   The numbers themselves are .mono, like every other identifier on the site.
   -------------------------------------------------------------------------- */

.foot-compliance {
  max-width: 62ch;
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mut);
}

.foot-compliance .mono {
  font-size: 12px;
  color: var(--text);
}