/* Hardy & Butler, site.css
  One file. Tokens first, then type, layout, components, motion, print.
  No !important, no id selectors. Shadows on buttons only, violet tinted. */

/* 1. Tokens */
:root {
  --canvas: #FAFAF9;
  --canvas-2: #F5F4F9;
  --canvas-3: #EAE9F0;
  --canvas-4: #DBD9E4;
  --ink: #1E1330;
  --muted: #5A5470;
  --rule: #DBDADD;
  --accent: #6D4AFF;
  --accent-hover: #5B3DF5;
  --accent-active: #4C1D95;
  --accent-light: #A78BFA;
  --accent-text: #6D4AFF;
  --tint: #ECE8FA;
  --tint-strong: #E3DEFA;
  --ladder-bar: #DAD7F2;
  --btn-outline: #868294;
  --dark: #150C24;
  --on-dark: #FAFAF9;
  --on-dark-mute: #BFB6D6;
  --on-dark-rule: rgba(250, 250, 249, 0.15);

  /* Solid accent that is never remapped, for fills carrying a white label
     inside dark bands. Everywhere else use --accent. */
  --accent-solid: #6D4AFF;

  /* Aliases from the first palette, so component rules needed no edit.
     Headings and body now share one ink. */
  --ink-brand: var(--ink);
  --tint-8: var(--tint);
  --tint-15: var(--tint-strong);

  --radius-btn: 14px;
  --radius-card: 16px;
  --radius-input: 10px;
  --shadow: 0 1px 2px rgba(30, 19, 48, 0.06), 0 8px 24px -6px rgba(109, 74, 255, 0.28);
  --shadow-hi: 0 2px 4px rgba(30, 19, 48, 0.08), 0 14px 32px -8px rgba(109, 74, 255, 0.42);
  --shadow-low: 0 1px 2px rgba(30, 19, 48, 0.05);

  --font: Inter, Arial, "Liberation Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --size-display: clamp(2.5rem, 1.55rem + 4vw, 4.5rem);
  --size-h2: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
  --size-h3: clamp(1.5rem, 1.36rem + 0.5vw, 1.75rem);
  --size-lead: clamp(1.25rem, 1.16rem + 0.35vw, 1.4375rem);
  --size-body: 1.125rem;
  --size-small: 1.0625rem;
  --size-caption: 0.9375rem;
  --size-eyebrow: 0.75rem;

  --container: 1200px;
  --margin: 20px;
  --gutter: 16px;
  --section: 64px;
  --hero-top: 80px;
  --hero-bottom: 64px;
  --card-pad: 24px;
  --header-h: 84px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 120ms;
  --enter: 280ms;

  /* surface colour, re-set inside dark bands so children inherit */
  --surface: var(--canvas);
  --text: var(--ink);
  --text-strong: var(--ink);
  --text-mute: var(--muted);
  --line: var(--rule);
  --line-strong: var(--ink-brand);
}

@media (min-width: 768px) {
  :root {
    --margin: 32px;
    --gutter: 24px;
    --section: 88px;
    --hero-top: 104px;
    --hero-bottom: 88px;
    --card-pad: 32px;
    --size-body: 1.1875rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --margin: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section: 128px;
    --hero-top: 144px;
    --hero-bottom: 120px;
  }
}

/* Inter, self-hosted, latin subset, the only face. One variable file carries
   every weight from 100 to 900, so the 900-against-400 contrast in the
   headings is the same on every operating system. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2?v=f11d729b") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

svg {
  block-size: auto;
}

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

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-active);
  outline-offset: 3px;
}

.band--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--on-dark);
}

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

.skip-link {
  border-radius: var(--radius-btn);
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--canvas);
  color: var(--ink-brand);
  font-weight: 700;
  border: 1px solid var(--ink-brand);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* 3. Type */
.display,
.h2,
.h3,
h1,
h2,
h3 {
  color: var(--text-strong);
  font-weight: 700;
}

.display,
h1 {
  font-size: var(--size-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-inline-size: 15ch;
}

.h2,
h2 {
  font-size: var(--size-h2);
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-inline-size: 20ch;
}

.h3,
h3 {
  font-size: var(--size-h3);
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-inline-size: 30ch;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.lead {
  font-size: var(--size-lead);
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-inline-size: 56ch;
}

.prose {
  max-inline-size: 66ch;
}

.prose > * + * {
  margin-block-start: 1.2em;
}

.small {
  font-size: var(--size-small);
  line-height: 1.55;
  max-inline-size: 68ch;
}

.caption {
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--text-mute);
}

.mute {
  color: var(--text-mute);
}

.eyebrow {
  display: block;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-block-end: 24px;
}

.band--dark .eyebrow {
  color: var(--accent);
}

.num {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* The accent full stop. The violet passes as text on the light ground, so
   it is set as a glyph. */
.stop {
  color: var(--accent);
}

.stack > * + * {
  margin-block-start: 24px;
}

.stack-sm > * + * {
  margin-block-start: 16px;
}

.stack-lg > * + * {
  margin-block-start: 40px;
}

.measure {
  max-inline-size: 66ch;
}

.center {
  margin-inline: auto;
  text-align: center;
}

.center .display,
.center .h2,
.center h1,
.center h2,
.center .lead {
  margin-inline: auto;
}

/* 4. Layout */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

.band {
  background: var(--surface);
  color: var(--text);
  padding-block: var(--section);
}

.band--alt {
  --surface: var(--canvas-2);
}

.band--dark {
  --accent: var(--accent-light);
  --surface: var(--dark);
  --text: var(--on-dark);
  --text-strong: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --line: var(--on-dark-rule);
  --line-strong: var(--on-dark);
}

.band--hero {
  padding-block: var(--hero-top) var(--hero-bottom);
}

.band--hero-tight {
  padding-block: calc(var(--hero-top) * 0.75) var(--hero-bottom);
}

.band--cta {
  --surface: var(--canvas-2);
}

.section-head {
  margin-block-end: 48px;
}

.section-head > * + * {
  margin-block-start: 24px;
}

@media (min-width: 1024px) {
  .section-head {
    margin-block-end: 64px;
  }
}

/* Signature device 1: full bleed 1px rule with a section number */
.section-rule {
  position: relative;
  border-block-start: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.section-rule__label {
  display: block;
  padding-block: 12px;
  padding-inline: var(--margin);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.section-rule--alt {
  --surface: var(--canvas-2);
}

.section-rule--dark {
  --accent: var(--accent-light);
  --surface: var(--dark);
  --text: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --line-strong: var(--on-dark);
}

.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--2-wide {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
  }

  .grid--7-5 {
    grid-template-columns: 7fr 5fr;
    column-gap: 48px;
    align-items: start;
  }

  .grid--5-7 {
    grid-template-columns: 5fr 7fr;
    column-gap: 64px;
    align-items: center;
  }
}

.fig {
  inline-size: 100%;
  color: var(--text-strong);
}

.fig svg {
  inline-size: 100%;
  block-size: auto;
}

.fig figcaption {
  margin-block-start: 16px;
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--text-mute);
}

.fig--trace {
  aspect-ratio: 1200 / 260;
}

.fig--ladder {
  aspect-ratio: 1200 / 520;
}

.fig--pair {
  aspect-ratio: 960 / 420;
  max-inline-size: 960px;
  margin-inline: auto;
}

.fig--org {
  aspect-ratio: 1200 / 400;
}

.fig--org-side {
  aspect-ratio: 600 / 520;
}

.fig--stack {
  aspect-ratio: 600 / 520;
}

.fig--payback {
  aspect-ratio: 1200 / 520;
}

.fig--steps {
  aspect-ratio: 1200 / 220;
}


.fig svg text {
  font-family: var(--font);
}

/* 5. Buttons */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.btn--primary {
  background: var(--accent-solid);
  color: #fff;
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-hi);
  transform: translateY(-1px);
}

.btn--primary:active {
  background: var(--accent-active);
  box-shadow: var(--shadow);
  transform: none;
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--btn-outline);
  box-shadow: var(--shadow-low);
}

.btn--secondary:hover {
  border-color: var(--accent-solid);
  color: var(--accent-text);
  box-shadow: var(--shadow);
}

/* Active fills with the tint and the label returns to ink, 14.68:1. The
   hover label, violet, is 4.29:1 on the tint and must never sit on it. */
.btn--secondary:active {
  background: var(--tint);
  color: var(--ink);
}

.band--dark .btn--secondary {
  color: var(--on-dark);
  border-color: var(--btn-outline);
  box-shadow: none;
}

.band--dark .btn--secondary:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.band--dark .btn--secondary:active {
  background: var(--on-dark-rule);
  border-color: var(--on-dark);
  color: var(--on-dark);
}

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

.btn-row--center {
  justify-content: center;
}

.text-link {
  font-weight: 700;
  color: var(--text-strong);
}

.text-link:hover {
  color: var(--accent-text);
}

/* 6. Header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  block-size: var(--header-h);
  background: rgba(250, 250, 249, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--fast) var(--ease);
}

.site-header.is-scrolled {
  border-block-end-color: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  block-size: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  margin-block: -4px;
  text-decoration: none;
  color: var(--ink-brand);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__lockup {
  block-size: 36px;
  inline-size: auto;
}

/* Below 480px the full wordmark would meet the Menu control, so the header
   carries the mark with H&B instead. Same mark, same size. */
.brand__lockup--full {
  display: none;
}

@media (min-width: 480px) {
  .brand__lockup--full {
    display: block;
  }

  .brand__lockup--compact {
    display: none;
  }
}

/* The mark sits on a filled rounded square, the same badge as the favicon,
   in the light violet. The square is the bounding box, so the lockup size
   does not change. */
.brand__lockup .mark,
.brand__mark .mark,
.site-footer__mark .mark,
.mark-row__lockup .mark,
.mark-row__big .mark {
  color: var(--accent-light);
}

.badge {
  fill: var(--dark);
}

.site-footer__mark .badge,
.mark-row__item--dark .badge {
  stroke: rgba(250, 250, 249, 0.4);
  stroke-width: 1;
}

.brand__mark {
  inline-size: 28px;
  block-size: 28px;
}

.nav {
  display: none;
  align-items: center;
  gap: 32px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding-block: 4px;
}

.nav__link:hover {
  color: var(--ink-brand);
}

/* "page" on the page itself, "true" on a page inside that section, and a
   blog post is inside Blog. Both get the marker. */
.nav__link[aria-current] {
  color: var(--ink-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 6px;
}

.menu-toggle {
  display: inline-block;
  padding: 10px 0;
  background: none;
  border: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-brand);
  text-decoration: none;
  cursor: pointer;
}

.menu-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--canvas);
  padding: var(--margin);
  overflow: auto;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.menu-panel:target,
.menu-panel.is-open {
  display: flex;
  opacity: 1;
}

.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: calc(var(--header-h) - 2 * var(--margin));
  min-block-size: 32px;
}

.menu-panel__list {
  margin-block: 48px auto;
}

.menu-panel__list li + li {
  margin-block-start: 20px;
}

.menu-panel__link {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-brand);
  text-decoration: none;
}

.menu-panel__link[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 8px;
}

.menu-panel__legal {
  margin-block-start: 40px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--rule);
}

.menu-panel__label {
  display: block;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 12px;
}

.menu-panel__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.menu-panel__legal-list a {
  display: inline-block;
  padding-block: 9px;
  margin-block: -9px;
  font-size: 1.0625rem;
  color: var(--ink);
}

.menu-panel .btn {
  align-self: flex-start;
  margin-block-start: 32px;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }

  .menu-toggle,
  .menu-panel {
    display: none;
  }

  .menu-panel:target,
  .menu-panel.is-open {
    display: none;
  }
}

/* 7. Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.card > * + * {
  margin-block-start: 12px;
}

.band--alt .card {
  background: var(--canvas);
}

.card--emphasis {
  border-color: var(--line-strong);
}

.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.card__meta .mono {
  color: var(--text-mute);
  white-space: nowrap;
}

.card .eyebrow {
  margin-block-end: 0;
}

.card__bullets li {
  position: relative;
  padding-inline-start: 20px;
  font-size: var(--size-small);
  line-height: 1.5;
}

.card__bullets li + li {
  margin-block-start: 6px;
}

.card__bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 6px;
  block-size: 6px;
  background: var(--text-strong);
}

.card__measure {
  font-size: var(--size-caption);
  color: var(--text-mute);
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}

.card--tint {
  --surface: var(--tint-8);
  background: var(--tint-8);
  border-color: var(--ink-brand);
  color: var(--ink-brand);
}

.card--tint p,
.card--tint li {
  color: var(--ink-brand);
}

/* Square bullets, violet, for standards lists */
.marks {
  display: grid;
  gap: 16px 48px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .marks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.marks li,
.mark-item {
  position: relative;
  padding-inline-start: 28px;
}

.marks li::before,
.mark-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 10px;
  block-size: 10px;
  background: var(--accent);
}

.mark-list > li + li {
  margin-block-start: 24px;
}

/* Numbered blocks */
.numbered {
  display: grid;
  gap: 32px var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .numbered--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .numbered--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.numbered__item > * + * {
  margin-block-start: 12px;
}

.numbered__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

.numbered__item .card-title {
  max-inline-size: 24ch;
}

.band--dark .numbered__n {
  color: var(--accent);
}

/* Stats */
.stats {
  display: grid;
  gap: 32px var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat__figure {
  display: block;
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.stat__text {
  margin-block-start: 12px;
  font-size: var(--size-small);
}

.stat__source {
  margin-block-start: 8px;
  font-size: var(--size-caption);
  color: var(--text-mute);
}

.stat__text b,
.stat__text strong {
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

/* Role rows */
.rows {
  border-block-start: 1px solid var(--line);
}

.rows__item {
  display: grid;
  gap: 8px;
  padding-block: 24px;
  border-block-end: 1px solid var(--line);
}

@media (min-width: 768px) {
  .rows__item {
    grid-template-columns: 1fr 2fr;
    gap: var(--gutter);
    padding-block: 28px;
  }
}

.rows__role {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

/* Blog index and posts. Same hairline rhythm as the role rows, but the left
   column carries the kicker and the date, so it needs its own baseline. */
.posts {
  border-block-start: 1px solid var(--line);
}

.posts__item {
  display: grid;
  gap: 12px;
  padding-block: 28px;
  border-block-end: 1px solid var(--line);
}

@media (min-width: 768px) {
  .posts__item {
    grid-template-columns: 1fr 2fr;
    gap: var(--gutter);
    padding-block: 36px;
  }
}

.posts__meta,
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.posts__meta .eyebrow {
  margin-block-end: 0;
}

.posts__meta .mono,
.post-meta .mono {
  color: var(--text-mute);
}

.posts__item .caption {
  color: var(--text-mute);
}

/* A single-line title link is 34px tall, and the back link 23px, so both get
   the same padded hit box as the footer and menu links. */
.posts__item .h3 a {
  display: inline-block;
  padding-block: 7px;
  margin-block: -7px;
}

.post-back a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}

/* Prices */
.price {
  display: block;
  font-size: var(--size-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.price--lg {
  font-size: clamp(2.5rem, 1.9rem + 2.5vw, 3.5rem);
}

.price-cards {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .price-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  background: var(--canvas);
}

.price-card--emphasis {
  border-color: var(--ink-brand);
}

.price-card__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--card-pad);
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent-solid);
  color: #fff;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}

.price-card__head > * + * {
  margin-block-start: 8px;
}

.price-card__list {
  margin-block-start: 24px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--line);
  flex: 1;
}

.price-card__list li {
  position: relative;
  padding-inline-start: 20px;
  font-size: var(--size-small);
  line-height: 1.5;
}

.price-card__list li + li {
  margin-block-start: 10px;
}

.price-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 6px;
  block-size: 6px;
  background: var(--ink-brand);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  inline-size: 100%;
  min-inline-size: 640px;
  border-collapse: collapse;
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
  background: var(--canvas);
  border: 1px solid var(--line);
}

.table th,
.table td {
  padding: 16px;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}

.table th {
  color: var(--text-strong);
  font-weight: 700;
}

.table thead th {
  border-block-end: 1px solid var(--ink-brand);
}

.table thead th + th {
  border-inline-start: 1px solid var(--line);
}

.table tbody td + td {
  border-inline-start: 1px solid var(--line);
}

.table__plan {
  display: block;
  font-size: 1.125rem;
}

.table__price {
  display: block;
  font-size: var(--size-small);
  font-weight: 400;
  color: var(--text-mute);
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  border-block-end: 1px solid var(--rule);
  margin-block-end: 40px;
}

.tab {
  margin: 0;
  min-inline-size: 44px;
  padding: 12px 0;
  margin-block-end: -1px;
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.tab:hover {
  color: var(--ink-brand);
}

.tab[aria-selected="true"] {
  color: var(--ink-brand);
  border-block-end-color: var(--accent);
}

.tabpanel + .tabpanel {
  margin-block-start: 64px;
}

.tabpanel__title {
  margin-block-end: 24px;
}

.tabpanel[hidden] {
  display: none;
}

.js-tabs .tabpanel + .tabpanel {
  margin-block-start: 0;
}

.js-tabs .tabpanel__title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Forms */
.form > * + * {
  margin-block-start: 24px;
}

.field > * + * {
  margin-block-start: 8px;
}

.field__label {
  display: block;
  font-size: var(--size-caption);
  font-weight: 700;
  color: var(--ink-brand);
}

.field__input,
.field__select,
.field__textarea {
  display: block;
  inline-size: 100%;
  padding: 14px;
  background: var(--canvas);
  border: 1px solid var(--ink);
  border-radius: var(--radius-input);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink);
  transition: background-color var(--fast) var(--ease);
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-brand) 50%), linear-gradient(135deg, var(--ink-brand) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 44px;
}

.field__textarea {
  min-block-size: 7.5em;
  resize: vertical;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  background-color: var(--tint-8);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field__note {
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--accent-text);
}

.field__note:empty {
  display: none;
}

.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--accent-text);
  padding: 13px;
}

.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.fieldset > legend {
  padding: 0;
  font-size: var(--size-caption);
  font-weight: 700;
  color: var(--ink-brand);
  margin-block-end: 12px;
}

.checks {
  display: grid;
  gap: 0 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .checks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  font-size: var(--size-small);
}

.check input {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--ink-brand);
  border: 1px solid var(--ink-brand);
}

.honeypot {
  position: absolute;
  left: -9999px;
}

.consent {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.consent a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.form__status {
  font-size: var(--size-small);
}

.form__status:empty {
  display: none;
}

.form__status--error {
  color: var(--accent-text);
  font-weight: 700;
}

.form__after {
  font-size: var(--size-caption);
  margin-block-start: 12px;
}

.form-success {
  padding: var(--card-pad);
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
}

.form-success > * + * {
  margin-block-start: 12px;
}

/* Rail */
.rail {
  background: var(--canvas-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.rail > * + * {
  margin-block-start: 24px;
}

.rail__steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  font-size: var(--size-small);
}

.rail__steps li + li {
  margin-block-start: 16px;
}

.rail__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding-block-start: 0.35em;
  color: var(--ink-brand);
}

.rail__email {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-brand);
}

/* Facts strip */
.facts {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* Dark band closing statement */
.statement {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  max-inline-size: 24ch;
}

/* Refusal band typography as image */
.refusal {
  font-size: var(--size-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--on-dark);
  max-inline-size: 22ch;
}

/* 8. Footer */
.site-footer {
  --accent: var(--accent-light);
  background: var(--dark);
  color: var(--on-dark);
  padding-block: 64px 40px;
  --text: var(--on-dark);
  --text-strong: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --line: var(--on-dark-rule);
}

.site-footer__grid {
  display: grid;
  gap: 40px var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Five across only once there is room for the longest label on one line.
   What we automate joined the footer on 9 September 2026, and at 1024 the
   five columns fit but Quotes and proposals, Customer enquiries and Month-end
   reporting all wrapped. Three across carries them cleanly until 1200. */
@media (min-width: 1200px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  }
}

.site-footer__mark {
  block-size: 40px;
  inline-size: auto;
  color: var(--on-dark);
}

.site-footer__line {
  margin-block-start: 20px;
  font-size: 1rem;
  color: var(--on-dark-mute);
  max-inline-size: 30ch;
}

.site-footer__heading {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-block-end: 16px;
}

.site-footer__list li + li {
  margin-block-start: 10px;
}

.site-footer__list a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  /* A short label such as Blog is under 44px wide on its own, so the box is
     padded sideways too. The negative margin keeps the column flush left. */
  padding-inline: 4px;
  margin-inline: -4px;
  color: var(--on-dark);
  text-decoration: none;
  font-size: 1.0625rem;
}

.site-footer__list a:hover {
  text-decoration: underline;
}

.site-footer__bottom {
  margin-block-start: 48px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--on-dark-rule);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-dark-mute);
}

.site-footer__bottom > * + * {
  margin-block-start: 8px;
}

/* The facts strip is page content on About and in the Contact rail and
   keeps its size there; only the footer's copy drops with the sign-off. */
.site-footer .facts {
  font-size: 0.8125rem;
}

/* 9. Motion */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--enter) var(--ease), transform var(--enter) var(--ease);
}

.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js-motion .reveal-group > :nth-child(2) {
  transition-delay: 40ms;
}

.js-motion .reveal-group > :nth-child(3) {
  transition-delay: 80ms;
}

.js-motion .reveal-group > :nth-child(4) {
  transition-delay: 120ms;
}

.js-motion .reveal-group > :nth-child(5) {
  transition-delay: 160ms;
}

.js-motion .reveal-group > :nth-child(6) {
  transition-delay: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    transition-delay: 0ms;
    scroll-behavior: auto;
  }

  .js-motion .reveal {
    opacity: 1;
    transform: none;
  }
}

/* 10. Print. Every dark surface becomes paper, so every colour that only
   ever sat on the dark is remapped here to one that reads on white. */
@media print {
  :root {
    --accent: #4C1D95;
    --accent-light: #4C1D95;
    --accent-text: #4C1D95;
    --on-dark: #000;
    --on-dark-mute: #333;
    --on-dark-rule: #999;
    --dark: #fff;
  }

  .site-header,
  .skip-link,
  .menu-panel,
  .site-footer__grid,
  .btn-row,
  .sticky-cta,
  .motion-toggle {
    display: none;
  }

  .ladder__block--tall,
  .rail--dark,
  .strip--dark,
  .oversight-card,
  .band--dark .strip__tile--brand,
  .orbit__chip,
  .mark-row__item--dark,
  .trace,
  .band--alt .trace,
  .queue__state--stop {
    background: #fff;
    color: #000;
    border-color: #000;
  }

  /* The trace is a dark object on screen. On paper every one of its lines
     has to be black on white, including the ones the screen makes recede. */
  .trace__time,
  .trace__actor,
  .trace__what,
  .trace__detail {
    color: #000;
  }

  .artefact,
  .queue th,
  .queue td {
    border-color: #000;
  }

  .badge {
    fill: #fff;
    stroke: #000;
    stroke-width: 1;
  }

  .band,
  .band--dark,
  .band--alt,
  .section-rule,
  .site-footer {
    --surface: #fff;
    --text: #000;
    --text-strong: #000;
    --text-mute: #333;
    background: #fff;
    color: #000;
    padding-block: 24px;
  }

  .site-footer__bottom {
    color: #000;
  }

  .btn {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    text-decoration: underline;
  }

  .nav a[href]::after,
  .site-footer a[href]::after {
    content: " (" attr(href) ")";
  }

  .tabpanel[hidden] {
    display: block;
  }

  .fig {
    color: #000;
  }
}

.cta-box {
  max-inline-size: 760px;
}

/* The closing heading is a full sentence: balanced lines, so the last line
   is never a single word. */
.cta-box .h2 {
  text-wrap: balance;
}

/* The price note on Pricing and Agent Models sits close under its buttons. */
.stack > .cta-note {
  margin-block-start: 12px;
}

/* The reply commitment, fix pack v7, 15 September 2026. It used to sit
   under the buttons in caption text, the smallest and lightest on the
   screen, where it read as a disclaimer. It is a promise, so it takes the
   body size and the body colour and comes before the buttons it answers.
   It lives here rather than in pages.css because the newsroom's pages carry
   the same closing section and load this file, not that one. */
.reply-note {
  font-size: var(--size-body);
  line-height: 1.55;
  color: var(--text);
  max-inline-size: 56ch;
}

.center .reply-note {
  margin-inline: auto;
}

/* Vertical spacing between blocks inside a section */
.space-md {
  margin-block-start: 40px;
}

.space-lg {
  margin-block-start: 48px;
}

.space-xl {
  margin-block-start: 64px;
}

.space-xl-both {
  margin-block: 64px;
}

/* Wide diagrams scroll inside their own box on small screens */
.fig--wide {
  aspect-ratio: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fig--wide svg {
  min-inline-size: 760px;
}

@media (min-width: 768px) {
  .fig--wide svg {
    min-inline-size: 0;
  }
}

/* Contact rail as this page's dark band */
.rail--dark {
  --accent: var(--accent-light);
  --surface: var(--dark);
  --text: var(--on-dark);
  --text-strong: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --line: var(--on-dark-rule);
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark);
}

.rail--dark .eyebrow,
.rail--dark .rail__n {
  color: var(--accent);
}

.rail--dark .card-title,
.rail--dark .rail__email {
  color: var(--on-dark);
}

.rail--dark :focus-visible {
  outline-color: var(--on-dark);
}

/* 404 links */
.site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 1.125rem;
}

.site-links a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

/* Style guide only */
.swatches {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .swatches {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .swatches {
    grid-template-columns: repeat(5, 1fr);
  }
}

.swatch {
  display: grid;
  gap: 4px;
  font-size: var(--size-small);
}

.swatch__chip {
  display: block;
  block-size: 72px;
  border: 1px solid var(--rule);
  margin-block-end: 8px;
}

.swatch__chip--canvas { background: var(--canvas); }
.swatch__chip--canvas-2 { background: var(--canvas-2); }
.swatch__chip--canvas-3 { background: var(--canvas-3); }
.swatch__chip--canvas-4 { background: var(--canvas-4); }
.swatch__chip--ink { background: var(--ink); }
.swatch__chip--muted { background: var(--muted); }
.swatch__chip--rule { background: var(--rule); }
.swatch__chip--accent { background: var(--accent); }
.swatch__chip--accent-hover { background: var(--accent-hover); }
.swatch__chip--accent-active { background: var(--accent-active); }
.swatch__chip--accent-light { background: var(--accent-light); }
.swatch__chip--tint { background: var(--tint); }
.swatch__chip--tint-strong { background: var(--tint-strong); }
.swatch__chip--ladder-bar { background: var(--ladder-bar); }
.swatch__chip--btn-outline { background: var(--btn-outline); }
.swatch__chip--dark { background: var(--dark); }
.swatch__chip--on-dark { background: var(--on-dark); }
.swatch__chip--on-dark-mute { background: var(--on-dark-mute); }

.btn--primary.is-hover { background: var(--accent-hover); box-shadow: var(--shadow-hi); transform: translateY(-1px); }
.btn--primary.is-active { background: var(--accent-active); }
.btn--secondary.is-hover { border-color: var(--accent-solid); color: var(--accent-text); box-shadow: var(--shadow); }
.btn--secondary.is-active { background: var(--tint); color: var(--ink); }
.btn.is-focus { outline: 2px solid var(--accent-active); outline-offset: 3px; }

.mark-row {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mark-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mark-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mark-row__item {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: var(--card-pad);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  color: var(--ink-brand);
}

.mark-row__item--dark {
  --text-mute: var(--on-dark-mute);
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark);
}

.mark-row__big {
  inline-size: 160px;
  block-size: auto;
}

.mark-row__lockup {
  inline-size: 100%;
  block-size: auto;
}

.form > .fieldset {
  margin-block-start: 24px;
}

/* Two-column treatments for wide screens: prose left, something real right */
.rail--light {
  background: var(--canvas);
  border: 1px solid var(--rule);
}

.rail--light .eyebrow {
  margin-block-end: 16px;
}

@media (min-width: 1024px) {
  .grid--8-4 {
    grid-template-columns: 7fr 5fr;
    column-gap: 48px;
    align-items: start;
  }

  .grid--6-6 {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: start;
  }
}

.stats--stack {
  grid-template-columns: 1fr;
  gap: 28px;
}

.stats--stack .stat + .stat {
  padding-block-start: 28px;
  border-block-start: 1px solid var(--rule);
}

.price-strip {
  padding-block-start: 40px;
  border-block-start: 1px solid var(--line);
}

.price-strip > * + * {
  margin-block-start: 24px;
}

/* Phone-only and desktop-only blocks. Mobile first: the phone version shows
   by default and swaps at 768px. */
.only-desktop {
  display: none;
}

@media (min-width: 768px) {
  .only-desktop {
    display: block;
  }

  .only-phone {
    display: none;
  }
}

/* The six first-agent cards collapse to a plain list on phones. All six stay. */
.cards--compact .card {
  padding: 16px 0;
  border-width: 1px 0 0;
}

.cards--compact .card:last-child {
  border-block-end: 1px solid var(--line);
}

.cards--compact .card > * + * {
  margin-block-start: 4px;
}

.cards--compact .card__measure {
  display: none;
}

@media (min-width: 768px) {
  .cards--compact .card {
    padding: var(--card-pad);
    border-width: 1px;
  }

  .cards--compact .card:last-child {
    border-block-end-width: 1px;
  }

  .cards--compact .card > * + * {
    margin-block-start: 12px;
  }

  .cards--compact .card__measure {
    display: block;
  }
}


/* 11. The mark. On every page the sweep turns about the centre once every
   seven seconds and the blip flares as the beam crosses its bearing. The two
   loops are phase-locked: same duration, same delay, both linear, wherever
   they appear. The pivot is the path's own box: the path M0 0 L12 -12 has a
   12 by 12 geometry box whose top-left is local (0,-12), so 0px 12px from
   that corner is local (0,0), the centre of the mark. A view-box origin
   resolves in the path's translated space and lands on the badge's far
   corner, which the short intro swing hid and a full turn does not. */
.mark__sweep {
  transform-box: fill-box;
  transform-origin: 0px 12px;
  animation: scope-rev 7s linear infinite;
}

.mark__blip {
  animation: scope-blip 7s linear infinite;
}

@keyframes scope-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* The blip sits 12.8 degrees anticlockwise of the drawn line, so a clockwise
   beam reaches it at 96.4 per cent of the cycle. Opacity only. */
@keyframes scope-blip {
  0% { opacity: 1; }
  6% { opacity: 1; }
  30% { opacity: 0.3; }
  90% { opacity: 0.3; }
  96.5% { opacity: 1; }
  100% { opacity: 1; }
}

/* Home: the reveal plays once, then both loops start at 1.2s from the
   drawn pose the reveal finished in at 860ms. */
.brand__lockup--intro .mark__ring {
  opacity: 0;
  animation: mark-ring 260ms var(--ease) forwards;
}

.brand__lockup--intro .mark__ring--outer {
  animation-name: mark-ring-outer;
}

.brand__lockup--intro .mark__sweep {
  transform-box: fill-box;
  transform-origin: 0px 12px;
  transform: rotate(-45deg);
  animation:
    mark-sweep 420ms var(--ease) 260ms forwards,
    scope-rev 7s linear 1.2s infinite;
}

.brand__lockup--intro .mark__blip {
  opacity: 0;
  animation:
    mark-blip 180ms var(--ease) 680ms forwards,
    scope-blip 7s linear 1.2s infinite;
}

@keyframes mark-ring {
  to { opacity: 0.45; }
}

@keyframes mark-ring-outer {
  to { opacity: 0.25; }
}

@keyframes mark-sweep {
  to { transform: rotate(0deg); }
}

@keyframes mark-blip {
  to { opacity: 1; }
}

/* 12. Moving strips. The list is rendered twice and the track slides half
   its own width, which is what makes the loop seamless. */
.strip-block {
  padding-block-end: 8px;
}

.strip-band__lede {
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--muted);
  max-inline-size: 56ch;
  margin-block: 12px 0;
}

.strip-rows > .strip + .strip {
  margin-block-start: 12px;
}


@keyframes strip-slide-back {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.strip-band__title {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-inline-size: 30ch;
}

@media (min-width: 768px) {
  .strip-band__title {
    font-size: 2.5rem;
  }
}

.strip-block {
  margin-block-end: 32px;
}

.strip {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

.strip__track {
  display: flex;
  inline-size: max-content;
  animation: strip-slide 46s linear infinite;
}

.strip--slow .strip__track {
  animation-duration: 58s;
}

.strip__track--back {
  animation-name: strip-slide-back;
  animation-duration: 61s;
}

.strip--row-one .strip__track {
  animation-duration: 52s;
}

.strip-rows:hover .strip__track,
.strip-rows:focus-within .strip__track {
  animation-play-state: paused;
}

.strip:hover .strip__track,
.strip:focus-within .strip__track,
.strip:focus .strip__track {
  animation-play-state: paused;
}

.strip__list {
  display: flex;
  gap: 12px;
  padding-inline: 6px;
  flex: none;
}

.strip__tile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--canvas);
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Integration tiles carry their brand colour. The boundary is guaranteed by
   the border and the inset hairline, so the fill can be the true colour. */
.strip__tile--brand {
  gap: 12px;
  padding: 16px 26px;
  border: 2px solid var(--bc);
  border-radius: 14px;
  background: var(--bc-tint);
  background: color-mix(in srgb, var(--bc) 10%, var(--canvas));
  box-shadow: inset 0 0 0 1px rgba(30, 19, 48, 0.07);
  font-size: 1.1875rem;
}

.strip__tile--brand .strip__dot {
  background: var(--bc);
}

.strip__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(30, 19, 48, 0.22);
}

.strip--dark .strip__dot {
  box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.3);
}

.strip__dept {
  font-family: var(--mono);
  font-size: 0.65625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-inline-start: 2px;
}

.strip--dark {
  background: var(--dark);
  padding-block: 28px;
}

.strip--dark .strip__tile {
  background: rgba(250, 250, 249, 0.05);
  border-color: rgba(250, 250, 249, 0.14);
  color: var(--on-dark);
}

@keyframes strip-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Brand colours of the named systems, each with its computed 10 per cent
   tint as the fallback for browsers without color-mix. The six department
   codes below exist only inside the agent strip. */
.tile--m365 { --bc: #D83B01; --bc-tint: #F7E7E0; }
.tile--outlook { --bc: #0078D4; --bc-tint: #E1EDF5; }
.tile--teams { --bc: #5059C9; --bc-tint: #E9EAF4; }
.tile--sharepoint { --bc: #036C70; --bc-tint: #E1ECEB; }
.tile--google { --bc: #1A73E8; --bc-tint: #E4ECF7; }
.tile--salesforce { --bc: #00A1E0; --bc-tint: #E1F1F6; }
.tile--hubspot { --bc: #FF7A59; --bc-tint: #FAEDE9; }
.tile--xero { --bc: #13B5EA; --bc-tint: #E3F3F8; }
.tile--sage { --bc: #00D639; --bc-tint: #E1F6E6; }
.tile--quickbooks { --bc: #2CA01C; --bc-tint: #E5F1E3; }
.tile--slack { --bc: #611F69; --bc-tint: #EBE4EB; }
.orbit-band .tile--slack { --bc: #8E5FA0; --bc-dark: #2D1D3D; }
.tile--zapier { --bc: #FF4F00; --bc-tint: #FAE9E0; }
.tile--stripe { --bc: #635BFF; --bc-tint: #EBEAFA; }
.tile--freeagent { --bc: #3C8DBC; --bc-tint: #E7EFF3; }
.tile--dropbox { --bc: #0061FF; --bc-tint: #E1EBFA; }
.tile--twilio { --bc: #F22F46; --bc-tint: #F9E6E7; }
.tile--notion { --bc: #37352F; --bc-tint: #E6E6E5; }
.tile--docusign { --bc: #4C4C4C; --bc-tint: #E9E9E8; }
.dot--sales { background: #6D4AFF; }
.dot--marketing { background: #A78BFA; }
.dot--finance { background: #4ADEDE; }
.dot--operations { background: #FFB020; }
.dot--customer { background: #FF6B9D; }
.dot--people { background: #7BD1A0; }

/* The integrations strip on the dark band. Brand colour at 18 per cent over
   the dark as the fill, the colour at full strength as the border, an
   off-white hairline outside it so the darkest brands still have an edge. */
.strip-band {
  padding-block: 56px 64px;
}

.strip-band .strip-block {
  margin-block-end: 32px;
}

.strip-band .strip-band__lede {
  color: var(--on-dark-mute);
}

.tile--m365 { --bc-dark: #38141E; }
.tile--outlook { --bc-dark: #111F44; }
.tile--teams { --bc-dark: #201A42; }
.tile--sharepoint { --bc-dark: #121D32; }
.tile--google { --bc-dark: #161F47; }
.tile--salesforce { --bc-dark: #112746; }
.tile--hubspot { --bc-dark: #3F202E; }
.tile--xero { --bc-dark: #152A48; }
.tile--sage { --bc-dark: #113028; }
.tile--quickbooks { --bc-dark: #192723; }
.tile--slack { --bc-dark: #230F30; }
.tile--zapier { --bc-dark: #3F181E; }
.tile--stripe { --bc-dark: #231A4B; }
.tile--freeagent { --bc-dark: #1C233F; }
.tile--dropbox { --bc-dark: #111B4B; }
.tile--twilio { --bc-dark: #3D122A; }
.tile--notion { --bc-dark: #1B1326; }
.tile--docusign { --bc-dark: #1F182B; }

.band--dark .strip__tile--brand {
  background: var(--bc-dark);
  background: color-mix(in srgb, var(--bc) 18%, var(--dark));
  border-color: var(--bc);
  box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.3);
  color: var(--on-dark);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.band--dark .strip__tile--brand .strip__dot {
  box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.3);
}

.band--dark .strip__tile--brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.3), 0 6px 20px -6px var(--bc);
}

/* A visible control to stop the moving parts, WCAG 2.2.2. Pure CSS: a
   checkbox, and :has() on the root pauses every strip and the orbit. The
   hover and focus pauses stay; this one holds. */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  margin-block-start: 12px;
  margin-block-end: 4px;
  font-size: var(--size-caption);
  font-weight: 700;
  color: var(--on-dark);
}

.motion-toggle label {
  cursor: pointer;
}

.motion-toggle__box {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--accent-solid);
}

html:has(.motion-toggle__box:checked) .strip__track,
html:has(.motion-toggle__box:checked) .orbit__ring,
html:has(.motion-toggle__box:checked) .orbit__chip,
html:has(.motion-toggle__box:checked) .orbit__sweep,
html:has(.motion-toggle__box:checked) .mark__sweep,
html:has(.motion-toggle__box:checked) .mark__blip {
  animation-play-state: paused;
}

/* 13. Sticky action bar, home page on phones only */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  padding: 12px var(--margin) calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 250, 249, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--rule);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}

.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sticky-cta .btn {
  display: block;
  inline-size: 100%;
}

.has-sticky-cta main {
  padding-block-end: 96px;
}

/* A newly focused element scrolled to the bottom edge must not land under
   the bar, WCAG 2.4.11. */
@media (max-width: 767px) {
  html:has(.has-sticky-cta) {
    scroll-padding-block-end: 96px;
  }
}

@media (min-width: 768px) {
  .sticky-cta {
    display: none;
  }

  .has-sticky-cta main {
    padding-block-end: 0;
  }
}

/* 14. Reduced motion for the new pieces: finished states, no movement.
   Every mark, intro included, rests in its drawn pose. */
@media (prefers-reduced-motion: reduce) {
  .mark__sweep,
  .mark__blip,
  .brand__lockup--intro .mark__ring,
  .brand__lockup--intro .mark__blip,
  .brand__lockup--intro .mark__sweep {
    animation: none;
  }

  .mark__sweep {
    transform: none;
  }

  .mark__blip {
    opacity: 1;
  }

  .brand__lockup--intro .mark__ring {
    opacity: 0.45;
  }

  .brand__lockup--intro .mark__ring--outer {
    opacity: 0.25;
  }

  .brand__lockup--intro .mark__blip {
    opacity: 1;
  }

  .brand__lockup--intro .mark__sweep {
    transform: none;
  }

  /* Stopping the animation leaves each .strip a horizontal scroller, so the
     region name and tabindex have to sit on .strip itself and not on the
     .strip-rows wrapper, or the scroller is one no keyboard can reach. Fixed
     in the markup on 26 August 2026 by matching what the agents strip on the
     same page already did. Do NOT instead move the overflow up to
     .strip-rows: tried the same day and it is worse, because .strip stops
     clipping, the tiles spill off the dark strip onto the light band, the
     page overflows to 6,289px and four .strip__dept labels fail contrast
     where they land. The clipping box and the scrolling box must be the
     same element. */
  .strip {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .strip__track {
    animation: none;
    transform: none;
  }

  .strip__list[aria-hidden="true"] {
    display: none;
  }

  .sticky-cta,
  .btn,
  .btn:hover,
  .band--dark .strip__tile--brand,
  .band--dark .strip__tile--brand:hover {
    transition: none;
    transform: none;
  }
}

/* 15. The ladder, fourteen steps against one agent and three people.
   One grid, both columns, so the blocks align to the rows exactly. */
.ladder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* The two column titles are headers, not labels. Two fills, two worlds. */
.ladder__head {
  display: block;
  max-inline-size: none;
  min-block-size: 47px;
  padding: 14px 18px;
  border-radius: 10px;
  margin-block-end: 18px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--canvas-4);
}

.ladder__head--agent {
  order: 23;
  margin-block-start: 16px;
  background: var(--ladder-bar);
}

.ladder__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--canvas-3);
  border: 1px solid transparent;
  border-inline-start: 3px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
}

.ladder__n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex: none;
}

/* The eleven steps the agent takes recede by colour, never by opacity:
   --muted is 5.93:1 on canvas-3, measured. The rows sit in the band's own
   hue family so their step against it lives in all three channels. */
.ladder__row--agent {
  color: var(--muted);
  background: var(--canvas-3);
  border-color: transparent;
}

/* The three steps a person keeps: ink, and an accent edge that ties each
   one to the person block opposite it across the bracket. */
.ladder__row--12,
.ladder__row--13,
.ladder__row--14 {
  color: var(--ink);
  border-inline-start-color: var(--accent);
}

/* Below 768px the fourteen rows live inside a native details; the grid
   copies are for 768px and up. */
.ladder__row--wide {
  display: none;
}

.ladder__details {
  order: 2;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--canvas);
}

.ladder__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.ladder__summary::-webkit-details-marker {
  display: none;
}

.ladder__chevron {
  margin-inline-start: auto;
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--fast) var(--ease);
  flex: none;
}

.ladder__details[open] .ladder__chevron {
  transform: rotate(225deg);
}

.ladder__fold {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
}

@media (min-width: 768px) {
  .ladder__row--wide {
    display: flex;
  }

  .ladder__details {
    display: none;
  }
}

.ladder__block--tall {
  --accent: var(--accent-light);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 14px;
  background: var(--dark);
  color: var(--on-dark);
  order: 24;
  justify-content: flex-start;
}

.ladder__lead {
  display: grid;
  gap: 12px;
}

.ladder__eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.ladder__big {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  max-inline-size: 16ch;
}

.ladder__sub,
.ladder__points {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-dark-mute);
}

/* The four claims are the body of the panel: equal bands, a hairline
   above each, filling whatever height the eleven rows give the block. */
.ladder__points {
  margin-block-start: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.ladder__points > span {
  display: flex;
  align-items: center;
  flex: 1;
  min-block-size: 44px;
  padding-block: 8px;
  border-block-start: 1px solid var(--on-dark-rule);
}

.ladder__block--person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--tint);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.ladder__block--person::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  background: var(--accent);
  flex: none;
}

.ladder__bracket {
  display: none;
}

.ladder__caption {
  margin-block-start: 24px;
  font-size: var(--size-small);
  color: var(--muted);
}

.ladder__caption b {
  color: var(--ink);
}

/* phone order: steps 01 to 11, the agent block, then each kept step with
   the person who keeps it */
.ladder__row--01 { order: 2; }
.ladder__row--02 { order: 4; }
.ladder__row--03 { order: 6; }
.ladder__row--04 { order: 8; }
.ladder__row--05 { order: 10; }
.ladder__row--06 { order: 12; }
.ladder__row--07 { order: 14; }
.ladder__row--08 { order: 16; }
.ladder__row--09 { order: 18; }
.ladder__row--10 { order: 20; }
.ladder__row--11 { order: 22; }
.ladder__row--12 { order: 26; }
.ladder__block--p1 { order: 27; }
.ladder__row--13 { order: 28; }
.ladder__block--p2 { order: 29; }
.ladder__row--14 { order: 30; }
.ladder__block--p3 { order: 31; }

@media (min-width: 1024px) {
  .ladder {
    grid-template-columns: 1fr 44px 1fr;
    grid-template-rows: auto repeat(14, minmax(0, auto));
    column-gap: 0;
    row-gap: 8px;
  }

  .ladder__head--today { grid-column: 1; grid-row: 1; margin-block-end: 10px; }
  .ladder__head--agent { grid-column: 3; grid-row: 1; margin-block-start: 0; margin-block-end: 10px; }
  .ladder__row { grid-column: 1; }
  .ladder__row--01 { grid-row: 2; }
  .ladder__row--02 { grid-row: 3; }
  .ladder__row--03 { grid-row: 4; }
  .ladder__row--04 { grid-row: 5; }
  .ladder__row--05 { grid-row: 6; }
  .ladder__row--06 { grid-row: 7; }
  .ladder__row--07 { grid-row: 8; }
  .ladder__row--08 { grid-row: 9; }
  .ladder__row--09 { grid-row: 10; }
  .ladder__row--10 { grid-row: 11; }
  .ladder__row--11 { grid-row: 12; }
  .ladder__row--12 { grid-row: 13; }
  .ladder__row--13 { grid-row: 14; }
  .ladder__row--14 { grid-row: 15; }
  .ladder__block--tall { grid-column: 3; grid-row: 2 / 13; }
  .ladder__block--p1 { grid-column: 3; grid-row: 13; }
  .ladder__block--p2 { grid-column: 3; grid-row: 14; }
  .ladder__block--p3 { grid-column: 3; grid-row: 15; }

  .ladder__bracket {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 2 / 13;
    inline-size: 14px;
    margin-inline-start: 8px;
    border: 2px solid var(--accent);
    border-inline-end: 0;
  }

  .ladder__bracket::before {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - 1px);
    inset-inline-start: 12px;
    inline-size: 14px;
    block-size: 2px;
    background: var(--accent);
  }

  .ladder__bracket::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - 5px);
    inset-inline-start: 24px;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--accent);
  }
}

/* The one moment: rows dim and the bracket draws, once, on first view.
   The finished state is the default, so this only replays it. */
@keyframes ladder-dim {
  from { color: var(--ink); }
  to { color: var(--muted); }
}

@keyframes ladder-draw {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}

.js-motion .ladder.is-in .ladder__row--agent {
  animation: ladder-dim 700ms var(--ease) both;
}

.js-motion .ladder.is-in .ladder__row--02 { animation-delay: 30ms; }
.js-motion .ladder.is-in .ladder__row--03 { animation-delay: 60ms; }
.js-motion .ladder.is-in .ladder__row--04 { animation-delay: 90ms; }
.js-motion .ladder.is-in .ladder__row--05 { animation-delay: 120ms; }
.js-motion .ladder.is-in .ladder__row--06 { animation-delay: 150ms; }
.js-motion .ladder.is-in .ladder__row--07 { animation-delay: 180ms; }
.js-motion .ladder.is-in .ladder__row--08 { animation-delay: 210ms; }
.js-motion .ladder.is-in .ladder__row--09 { animation-delay: 240ms; }
.js-motion .ladder.is-in .ladder__row--10 { animation-delay: 270ms; }
.js-motion .ladder.is-in .ladder__row--11 { animation-delay: 300ms; }

.js-motion .ladder.is-in .ladder__bracket {
  animation: ladder-draw 500ms var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .ladder.is-in .ladder__row--agent,
  .js-motion .ladder.is-in .ladder__bracket {
    animation: none;
  }
}

/* 16. Oversight. Four cards, one object, and the statement at full size. */
.section-head--wide .h2--wide {
  max-inline-size: none;
}

.oversight-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .oversight-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.oversight-card {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-radius: 16px;
  background: rgba(250, 250, 249, 0.035);
}

.oversight-card > * + * {
  margin-block-start: 10px;
}

.oversight-card__n {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-light);
}

.oversight-card__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  max-inline-size: none;
}

.oversight-card__body {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--on-dark-mute);
}

.oversight-card--brake {
  border: 2px solid var(--accent-light);
  padding: 27px;
}

.oversight-card__switch {
  display: inline-block;
  inline-size: 34px;
  block-size: 18px;
  border-radius: 9px;
  background: rgba(167, 139, 250, 0.32);
  position: relative;
  flex: none;
}

.oversight-card__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--accent-solid);
}

.statement--loud {
  margin-block-start: 56px;
  padding-block-start: 40px;
  border-block-start: 1px solid rgba(250, 250, 249, 0.18);
  font-size: 2.125rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-inline-size: 22ch;
}

@media (min-width: 768px) {
  .statement--loud {
    margin-block-start: 72px;
    padding-block-start: 48px;
    font-size: 3rem;
  }
}

/* 17. Oversight on phones: the nine words first, the evidence after.
   Visual order only, the DOM keeps heading, cards, statement. */
.oversight-flow {
  display: flex;
  flex-direction: column;
}

.oversight-flow .section-head {
  order: 0;
}

.oversight-flow .statement--loud {
  order: 1;
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
  margin-block-end: 40px;
}

.oversight-flow .oversight-grid {
  order: 2;
}

@media (min-width: 768px) {
  .oversight-flow {
    display: block;
  }

  .oversight-flow .statement--loud {
    margin-block-start: 72px;
    padding-block-start: 48px;
    border-block-start: 1px solid rgba(250, 250, 249, 0.18);
    margin-block-end: 0;
  }
}

/* 18. The orbit, Agent Models. Twelve systems on a rotating ring around the
   mark, every chip counter-rotating so the names stay upright. All CSS: the
   angles are classes, the motion is keyframes, nothing is computed at run
   time, so it renders with JavaScript off and stops under reduced motion. */
.orbit-band {
  padding-block: 96px;
  overflow: hidden;
}

.orbit-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}

.orbit-lede {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--on-dark-mute);
  max-inline-size: 44ch;
}

.orbit-note {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--accent-light);
}

.orbit {
  display: none;
}

.orbit-strip {
  margin-block-start: 40px;
}

@media (min-width: 1024px) {
  .orbit-strip {
    display: none;
  }

  .orbit {
    --orbit: 640px;
    --r: 345px;
    display: block;
    position: relative;
    inline-size: var(--orbit);
    block-size: var(--orbit);
    margin: 64px auto;
    flex: none;
  }

  .orbit__guide,
  .orbit__sweep,
  .orbit__ring,
  .orbit__mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
  }

  .orbit__guide {
    border: 1px solid rgba(167, 139, 250, 0.16);
    border-radius: 50%;
  }

  .orbit__guide--1 { inline-size: 200px; block-size: 200px; }
  .orbit__guide--2 { inline-size: 360px; block-size: 360px; }
  .orbit__guide--3 { inline-size: 520px; block-size: 520px; }

  .orbit__sweep {
    inline-size: 520px;
    block-size: 520px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(109, 74, 255, 0.55), transparent 68deg);
    -webkit-mask-image: radial-gradient(circle, transparent 58px, #000 59px);
    mask-image: radial-gradient(circle, transparent 58px, #000 59px);
    animation: orbit-sweep 12s linear infinite;
  }

  .orbit__mark {
    inline-size: 96px;
    block-size: auto;
    color: var(--accent-light);
  }

  .orbit__ring {
    inline-size: 0;
    block-size: 0;
    animation: orbit-spin 77s linear infinite;
  }

  .orbit__slot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  }

  .orbit__chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 2px solid var(--bc);
    border-radius: 12px;
    background: var(--bc-orbit);
    background: color-mix(in srgb, var(--bc) 20%, var(--dark));
    box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.28), 0 8px 22px -10px var(--bc);
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-dark);
    translate: -50% -50%;
    animation: orbit-unspin 77s linear infinite;
  }

  .orbit__chip .strip__dot {
    background: var(--bc);
    box-shadow: 0 0 0 1px rgba(250, 250, 249, 0.3);
  }

  .orbit:hover .orbit__ring,
  .orbit:hover .orbit__chip,
  .orbit:hover .orbit__sweep,
  .orbit:focus-within .orbit__ring,
  .orbit:focus-within .orbit__chip,
  .orbit:focus-within .orbit__sweep,
  .orbit:focus .orbit__ring,
  .orbit:focus .orbit__chip,
  .orbit:focus .orbit__sweep {
    animation-play-state: paused;
  }
}

@media (min-width: 1280px) {
  .orbit-grid {
    grid-template-columns: minmax(0, 1fr) 840px;
    gap: 24px;
  }

  .orbit {
    margin: 64px 0 64px 100px;
  }
}

.orbit__slot--1 { --a: 0deg; }
.orbit__slot--2 { --a: 30deg; }
.orbit__slot--3 { --a: 60deg; }
.orbit__slot--4 { --a: 90deg; }
.orbit__slot--5 { --a: 120deg; }
.orbit__slot--6 { --a: 150deg; }
.orbit__slot--7 { --a: 180deg; }
.orbit__slot--8 { --a: 210deg; }
.orbit__slot--9 { --a: 240deg; }
.orbit__slot--10 { --a: 270deg; }
.orbit__slot--11 { --a: 300deg; }
.orbit__slot--12 { --a: 330deg; }
.orbit-band .tile--google { --bc-orbit: #16214B; }
.orbit-band .tile--zapier { --bc-orbit: #44191D; }
.orbit-band .tile--xero { --bc-orbit: #152E4C; }
.orbit-band .tile--outlook { --bc-orbit: #112247; }
.orbit-band .tile--sage { --bc-orbit: #113428; }
.orbit-band .tile--slack { --bc-orbit: #2D1D3D; }
.orbit-band .tile--m365 { --bc-orbit: #3C151D; }
.orbit-band .tile--hubspot { --bc-orbit: #44222F; }
.orbit-band .tile--teams { --bc-orbit: #211B45; }
.orbit-band .tile--salesforce { --bc-orbit: #112A4A; }
.orbit-band .tile--sharepoint { --bc-orbit: #111F33; }
.orbit-band .tile--quickbooks { --bc-orbit: #1A2A22; }

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes orbit-unspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes orbit-sweep {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit__ring,
  .orbit__chip,
  .orbit__sweep {
    animation: none;
  }
}

/* 19. Product artefacts: the approval queue, the audit trace and the one
   number. These are the things Hardy actually produces, drawn in the site's
   own type rather than photographed, so a screen reader reads every word,
   they cost no bytes and they make no third-party request. Colour is never
   the only thing carrying a state: every state is a word as well.
   Each one is an EXAMPLE of the format and says so underneath. A fabricated
   record that reads as a real customer's data does not go on this site. */
.artefact {
  border: 2px solid var(--line-strong);
  background: var(--surface);
}

.band--alt .artefact,
.band--cta .artefact {
  background: var(--canvas);
}

.artefact__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px;
  border-block-end: 1px solid var(--line);
}

.artefact__head .eyebrow {
  margin-block-end: 0;
}

.artefact__head .mono {
  color: var(--text-mute);
}

.artefact__body {
  padding: 16px;
}

.artefact__note {
  margin-block-start: 12px;
  color: var(--text-mute);
}

/* The approval queue. Three columns: when, what was asked, what happened. */
.queue {
  inline-size: 100%;
  min-inline-size: 620px;
  border-collapse: collapse;
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
}

.queue th,
.queue td {
  padding: 14px 16px;
  text-align: start;
  vertical-align: top;
  border-block-start: 1px solid var(--line);
}

.queue thead th {
  border-block-start: 0;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.queue tbody th {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
}

.queue__detail {
  display: block;
  margin-block-start: 4px;
  color: var(--text-mute);
}

.queue__state {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 4px 8px;
  border: 2px solid transparent;
  color: var(--text-strong);
}

/* Proceeded on its own: no frame, recessive, because nothing happened that
   anybody needs to look at. */
.queue__state--auto {
  padding-inline: 0;
  font-weight: 400;
  color: var(--text-mute);
}

.queue__state--wait {
  border-color: var(--accent);
}

/* Inverted, so it reads as a stop in both a light band and a dark one. */
.queue__state--stop {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--surface);
}

/* The audit trace. A dark object on a light page, which is where most of the
   weight on these pages comes from. It is a component, not a band, so it does
   not spend the page's one dark band. */
.trace {
  --surface: var(--dark);
  --text: var(--on-dark);
  --text-strong: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --line: var(--on-dark-rule);
  --line-strong: var(--on-dark);
  --accent: var(--accent-light);
  background: var(--dark);
  color: var(--on-dark);
}

.band--alt .trace,
.band--cta .trace {
  background: var(--dark);
}

.trace__list {
  list-style: none;
  margin: 0;
  padding: 4px 16px 16px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.trace__line {
  display: grid;
  gap: 2px;
  padding-block: 12px;
  border-block-start: 1px solid var(--on-dark-rule);
}

.trace__line:first-child {
  border-block-start: 0;
}

.trace__time {
  color: var(--on-dark-mute);
}

.trace__what {
  color: var(--on-dark);
}

.trace__actor {
  color: var(--accent-light);
}

.trace__detail {
  color: var(--on-dark-mute);
}

@media (min-width: 768px) {
  .trace__line {
    grid-template-columns: 88px 76px minmax(0, 1fr);
    gap: 2px 16px;
  }

  .trace__detail {
    grid-column: 3;
  }
}

/* On phones the oversight band runs statement, cards, then the queue, so the
   claim still lands before the evidence. Orders 0 to 2 are set in 17. */
.oversight-flow .artefact {
  order: 3;
  margin-block-start: 40px;
}

@media (min-width: 768px) {
  .oversight-flow .artefact {
    margin-block-start: 56px;
  }
}

/* Three columns will not fit 320px without shrinking the state labels past
   readable, so the queue scrolls inside its own region on phones, the same
   way the price table does. The hint is shown only at the sizes where it is
   true, so it never tells a desktop reader to scroll something that does not. */
.queue__hint {
  display: block;
  padding: 0 16px 12px;
  color: var(--text-mute);
}

@media (min-width: 768px) {
  .queue__hint {
    display: none;
  }
}

/* 20. Depth, added 26 August 2026 on James's call: real elevation and a lit
   ground, square corners kept. Two rules hold it together.
   ONE, the dark grounds only ever get DARKER. A gradient that lightens a text
   ground changes the contrast ratio across the band, and neither axe nor the
   sweep's own checker measures a gradient, so a failure there would be
   invisible to every check we run. --dark is the ceiling, never the floor.
   TWO, every shadow here is flattened in the print sheet at the end. */
:root {
  --lift-1: 0 1px 2px rgba(30, 19, 48, 0.05), 0 6px 16px -8px rgba(30, 19, 48, 0.18);
  --lift-2: 0 2px 4px rgba(30, 19, 48, 0.06), 0 18px 44px -16px rgba(30, 19, 48, 0.30);
  --lift-dark: 0 2px 4px rgba(0, 0, 0, 0.40), 0 20px 48px -16px rgba(0, 0, 0, 0.70);
}

/* A lit middle and shaded edges. Nothing here is lighter than --dark. */
.band--dark,
.strip--dark,
.rail--dark {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.32) 100%);
}

.card {
  box-shadow: var(--lift-1);
}

.cards--compact .card {
  box-shadow: none;
}

@media (min-width: 768px) {
  .cards--compact .card {
    box-shadow: var(--lift-1);
  }
}

.artefact {
  box-shadow: var(--lift-2);
}

.band--dark .artefact,
.trace {
  box-shadow: var(--lift-dark);
}

.price-card {
  box-shadow: var(--lift-1);
}

.price-card--emphasis {
  box-shadow: var(--lift-2);
}

/* The picture at the top of a post. Held to the container width, because the
   sources are 960 to 1600 wide and a full-bleed image would upscale on a
   large screen and go soft. */
.post-hero {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--margin));
  margin: 0 auto;
  padding: 8px var(--margin) 56px;
}

.post-hero img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  box-shadow: var(--lift-2);
}

.post-hero__credit {
  margin-block-start: 12px;
  color: var(--text-mute);
}

/* The index thumbnail sits under the kicker and the date, in the left column
   from 768px up, so it never squeezes the title. */
.posts__thumb {
  display: block;
  flex-basis: 100%;
  inline-size: 100%;
  max-inline-size: 320px;
  block-size: auto;
  margin-block-start: 8px;
  box-shadow: var(--lift-1);
}

@media print {
  .card,
  .artefact,
  .trace,
  .price-card,
  .price-card--emphasis,
  .post-hero img,
  .posts__thumb,
  .band--dark,
  .strip--dark,
  .rail--dark {
    box-shadow: none;
    background-image: none;
  }
}

/* 21. Department colour, added 26 August 2026. The six colours already
   existed and were spent on a 9px dot. They now carry the whole card.
   MEASURED, and this is the whole design constraint: on an 8 per cent tint of
   itself, ink is 15.1 to 16.2:1 on every one of the six, so the ground and
   the body copy are safe everywhere. The colour ITSELF as text on that tint
   is 1.5 to 4.4:1, so a department colour is never a label. On the solid
   colour, ink is 3.4 (sales) to 10.7 (finance), so the agent badge is ink on
   the colour at 20px/900, which is large text and needs 3.0. White is only
   safe on sales, so white is not used on any of them. */
.dept--sales { --dept: #6D4AFF; }
.dept--marketing { --dept: #A78BFA; }
.dept--finance { --dept: #4ADEDE; }
.dept--operations { --dept: #FFB020; }
.dept--customer { --dept: #FF6B9D; }
.dept--people { --dept: #7BD1A0; }

.card--agent {
  --surface: color-mix(in srgb, var(--dept) 8%, var(--canvas));
  background: color-mix(in srgb, var(--dept) 8%, var(--canvas));
  border: 2px solid var(--dept);
  box-shadow: var(--lift-1);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.band--alt .card--agent {
  background: color-mix(in srgb, var(--dept) 8%, var(--canvas));
}

.card--agent:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-2);
}

/* The number is the thing James picks out, so it is the loudest object on
   the card: 20px, weight 900, ink on the department colour. */
.card__n {
  display: inline-block;
  padding: 6px 12px;
  background: var(--dept);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.card--agent .card__meta {
  align-items: center;
}

.card--agent .card__bullets li::before {
  background: var(--dept);
  inline-size: 8px;
  block-size: 8px;
}

.card--agent .card__measure {
  border-block-start-color: var(--dept);
}

/* The tab row carries the six colours too, so the choice is visible before
   the panel opens. The label stays ink; only the rule under it takes colour. */
.tab--dept[aria-selected="true"] {
  border-block-end-color: var(--dept);
}

.tab__swatch {
  display: inline-block;
  inline-size: 10px;
  block-size: 10px;
  margin-inline-end: 8px;
  background: var(--dept);
  vertical-align: baseline;
}

@media (prefers-reduced-motion: reduce) {
  .card--agent,
  .card--agent:hover {
    transition: none;
    transform: none;
  }
}

@media print {
  .card--agent,
  .band--alt .card--agent {
    background: #fff;
    border-color: #000;
    box-shadow: none;
  }

  .card__n {
    background: #fff;
    color: #000;
    border: 1px solid #000;
  }

  .card--agent .card__bullets li::before {
    background: #000;
  }
}

/* Four agents to a department, so the catalogue runs 1, 2 then 4 across.
   grid--3 left the fourth card stranded on a row of its own at 1024px up. */
.grid--dept {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--dept {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .grid--dept {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 22. The Twins, added 27 August 2026. Hardy and Butler given a face, with
   their names on them so nobody has to guess which is which. Hardy is the
   black shirt, Butler the white one, taken from the pair plate.
   The copy sits BESIDE the portraits and never on top of them. Text over an
   image is the one thing neither axe nor the sweep's contrast checker can
   measure, so the layout avoids needing to. On the dark band the name is
   --text-strong at 18.12:1 and the role line --text-mute at 9.80:1, both
   measurable and both safe. */
.twins-grid {
  display: grid;
  gap: 40px;
}

.twins__copy > * {
  max-inline-size: 46ch;
}

.twins__copy .eyebrow {
  margin-block-end: 16px;
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}

.duo__item img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  box-shadow: var(--lift-dark);
}

.duo__name {
  margin-block-start: 16px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.duo__role {
  margin-block-start: 6px;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-mute);
}

@media (min-width: 1024px) {
  .twins-grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: 64px;
  }
}

/* About shows the pair together as a scene, which costs the page nothing:
   the picture is already dark, and About spends its one dark band further
   down on what we will not do. */
.twins-figure {
  margin: 0;
}

.twins-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  box-shadow: var(--lift-2);
}

.twins-figure figcaption {
  margin-block-start: 12px;
  color: var(--text-mute);
  max-inline-size: 66ch;
}

@media print {
  .duo__item img,
  .twins-figure img {
    box-shadow: none;
  }
}

/* 23. Social. One link, in the footer, with the mark inheriting the text
   colour so it takes the on-dark value and needs no colour of its own. */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.social-link__mark {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}

/* 24. The brand page. Swatches that copy themselves and the logo downloads.
   The chip colours are NOT here: they are generated into brand-chips.css from
   data/brand.json, because a style attribute would be blocked by the CSP and
   a hand-written class per colour would drift from the data. */
.swatch-group + .swatch-group,
.logo-group + .logo-group {
  margin-block-start: 48px;
}

.swatch-group__note {
  max-inline-size: 72ch;
  margin-block: 8px 0;
  color: var(--text-mute);
}

.swatch-cards,
.logo-cards {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

@media (min-width: 640px) {
  .swatch-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .swatch-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.swatch-card {
  border: 1px solid var(--line);
  background: var(--canvas);
  padding: 0 0 16px;
}

.band--alt .swatch-card {
  background: var(--canvas);
}

/* The chip is the button, so the whole colour is the hit area: 96px tall and
   full width, comfortably past the 44px minimum. */
.swatch-card__chip {
  display: block;
  inline-size: 100%;
  block-size: 96px;
  border: 0;
  border-block-end: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  position: relative;
}

.swatch-card__hex {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  /* Reads on any chip, light or dark, because it carries its own ground. */
  background: var(--canvas);
  color: var(--ink);
}

.swatch-card__chip[data-copied] .swatch-card__hex::after {
  content: " copied";
}

.swatch-card__name,
.swatch-card__token,
.swatch-card__use {
  padding-inline: 16px;
}

.swatch-card__name {
  margin-block-start: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.swatch-card__token {
  margin-block-start: 4px;
  color: var(--text-mute);
}

.swatch-card__use {
  margin-block-start: 8px;
  color: var(--text-mute);
}

.logo-card {
  border: 1px solid var(--line);
  background: var(--canvas);
}

.logo-card__stage {
  display: grid;
  place-items: center;
  min-block-size: 132px;
  padding: 24px;
}

.logo-card__stage--colour,
.logo-card__stage--black {
  background: var(--canvas);
}

.logo-card__stage--white {
  background: var(--dark);
}

.logo-card__stage img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 40px;
}

.logo-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-block-start: 1px solid var(--line);
  color: var(--text-mute);
}

@media print {
  .swatch-card,
  .logo-card,
  .logo-card__stage--white {
    background: #fff;
    border-color: #000;
  }
}

/* The download link is 40x30 on its own, so it takes the same padded hit box
   as the footer and menu links rather than a smaller one. */
.logo-card__meta .text-link {
  display: inline-block;
  padding: 8px 10px;
  margin: -8px -10px;
}

/* 25. Department directors, added 8 September 2026. Each of the six panels
   now opens with the agent that runs it: a portrait, a name, a role, one
   sentence, and the four agents underneath as a roll call.
   MEASURED, and it obeys the two standing rules from section 21. ONE, the
   department colour is never text and never sits behind text: it is the 2px
   boundary on the portrait, the 4px spine on the block and the 3px rule
   under each roll-call name. TWO, the ground is the same 8 per cent tint the
   agent cards already use, where ink measures 15.1 to 16.2:1 on all six. No
   opacity anywhere, on text or on anything else.
   THE COPY NEVER SITS ON THE PICTURE, for the same reason as section 22:
   text over an image is the one contrast no checker can measure. */
.dept-head {
  display: grid;
  gap: 24px;
  align-items: start;
  margin-block-end: 32px;
  padding: 20px;
  background: color-mix(in srgb, var(--dept) 8%, var(--canvas));
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--dept);
  box-shadow: var(--lift-1);
}

.dept-head__portrait {
  margin: 0;
  max-inline-size: 220px;
}

.dept-head__portrait img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 2px solid var(--dept);
  box-shadow: var(--lift-1);
}

.dept-head__copy > * {
  max-inline-size: 62ch;
}

.dept-head__name {
  margin: 8px 0 0;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.dept-head__role {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: var(--size-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.dept-head__line {
  margin: 14px 0 0;
  font-size: var(--size-small);
  line-height: 1.55;
}

.dept-head__label {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: var(--size-caption);
  color: var(--text-mute);
}

.dept-head__team {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.dept-head__team li {
  padding: 6px 12px 5px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-block-end: 3px solid var(--dept);
  font-size: var(--size-caption);
  font-weight: 700;
  color: var(--text-strong);
}

/* The reporting line on each agent card. It is what turns twenty-four
   separate boxes into six teams, so it sits at the top with the number
   rather than buried under the bullets. */
.card__reports {
  margin: 0 0 14px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--line);
  font-size: var(--size-caption);
  color: var(--text-mute);
}

@media (min-width: 640px) {
  .dept-head {
    grid-template-columns: 220px 1fr;
    gap: 28px;
    padding: 24px;
  }
}

@media (min-width: 1024px) {
  .dept-head {
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: center;
  }

  .dept-head__portrait {
    max-inline-size: 260px;
  }
}

@media print {
  .dept-head {
    background: #fff;
    border-color: #000;
    box-shadow: none;
  }

  .dept-head__portrait img {
    border-color: #000;
    box-shadow: none;
  }

  .dept-head__team li {
    background: #fff;
    border-color: #000;
  }
}

/* 26. The switchboard and the department picker, added 9 September 2026.
   TWO FAULTS, ONE CAUSE. The hero held a type specimen: six ruled boxes with
   the department names set large and AGT-01 TO 04 in the corner. It spent
   four hundred pixels looking like the catalogue below without being wired to
   it, so it read as decoration and James read it as ugly. Underneath it, the
   six departments were an underline tab row, and a reader who does not
   recognise that row as a control never opens a panel, which loses the
   director and the four agents that report to that director on all six.
   THE FIX IS ONE OBJECT IN TWO PLACES. The specimen is now the index: every
   cell names the range, the department, the director who runs it and the four
   agents underneath, and every cell is the control that opens that department
   in the catalogue. The tab row is now six buttons that look like buttons.
   Picking either one marks the other, so the hero and the catalogue are one
   control and not two lists that happen to share six words.
   The hairline grid of the specimen survives as the 1px gap on a ruled
   ground, so the page did not lose the plate, it gained a use for it.
   MEASURED, and it obeys the two standing rules from section 21. ONE, the
   department colour is never text: it is the 4px cap on a cell, the border on
   a button and the ground at 8 to 26 per cent. On the deepest of those tints
   ink measures 11.7:1 on sales and higher on the other five, so every word in
   both objects is ink or --text-mute on a ground that is safe. TWO, no
   opacity anywhere. */
.board {
  display: block;
}

.board__hint {
  margin: 0 0 20px;
  max-inline-size: 62ch;
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--text-mute);
}

/* 1px of ruled ground between the cells is the specimen's hairline grid. */
.board__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.board__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 28px 24px 24px;
  background: var(--canvas);
  color: var(--text);
  text-decoration: none;
  transition: background var(--fast) var(--ease);
}

/* The cap is the only place the department colour appears at full strength.
   It thickens rather than moves, because a cell that lifts would open the
   1px gaps it shares with its neighbours. */
.board__cell::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: var(--dept);
  transition: block-size var(--fast) var(--ease);
}

.board__range {
  font-family: var(--mono);
  font-size: var(--size-eyebrow);
  letter-spacing: 0.08em;
  color: var(--text-mute);
}

.board__name {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.board__director {
  margin-block-start: 2px;
  font-size: var(--size-caption);
  font-weight: 700;
  color: var(--text-strong);
}

.board__team {
  font-size: var(--size-caption);
  line-height: 1.45;
  color: var(--text-mute);
}

/* The cue is what makes a cell read as a control rather than a caption. It
   sits on the bottom edge of every cell, so the six line up across the grid. */
.board__cue {
  margin-block-start: auto;
  padding-block-start: 14px;
  font-size: var(--size-caption);
  font-weight: 700;
  color: var(--accent-text);
}

.board__cue::after {
  content: "\2192";
  margin-inline-start: 8px;
  display: inline-block;
  transition: transform var(--fast) var(--ease);
}

.board__cell:hover,
.board__cell:focus-visible {
  background: color-mix(in srgb, var(--dept) 10%, var(--canvas));
}

.board__cell:hover::before,
.board__cell:focus-visible::before {
  block-size: 10px;
}

.board__cell:hover .board__cue::after,
.board__cell:focus-visible .board__cue::after {
  transform: translateX(4px);
}

/* Set by the script when that department is the one open below. */
.board__cell[aria-current="true"] {
  background: color-mix(in srgb, var(--dept) 14%, var(--canvas));
}

.board__cell[aria-current="true"]::before {
  block-size: 10px;
}

@media (min-width: 640px) {
  .board__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .board__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .board__cell {
    padding: 32px 28px 28px;
  }
}

/* The picker. Six buttons, not a tab row: the border and the tint say
   pressable before anybody hovers, and the button grows under the pointer so
   the hand knows it found something. The label is ink at every state, because
   the department colour as text is 1.5 to 4.4:1 and ink on the solid colour
   at 16px bold is 3.4:1 on sales, and a control needs 4.5:1. */
.tabs__hint {
  margin: 0 0 20px;
  max-inline-size: 62ch;
  font-size: var(--size-small);
  line-height: 1.55;
  font-weight: 700;
  color: var(--text-strong);
}

.tabs--dept {
  gap: 12px;
  border-block-end: 0;
  margin-block-end: 40px;
}

.tabs--dept .tab--dept {
  padding: 12px 18px;
  margin-block-end: 0;
  background: color-mix(in srgb, var(--dept) 8%, var(--canvas));
  border: 2px solid color-mix(in srgb, var(--dept) 55%, var(--canvas));
  border-radius: var(--radius-btn);
  color: var(--text-strong);
  box-shadow: var(--lift-1);
  transition:
    transform var(--fast) var(--ease),
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.tabs--dept .tab--dept:hover {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--dept) 18%, var(--canvas));
  border-color: var(--dept);
  box-shadow: var(--lift-2);
  color: var(--text-strong);
}

.tabs--dept .tab--dept[aria-selected="true"] {
  transform: scale(1.04);
  background: color-mix(in srgb, var(--dept) 26%, var(--canvas));
  border-color: var(--dept);
  box-shadow: var(--lift-1);
}

.tabs--dept .tab--dept[aria-selected="true"]:hover {
  transform: scale(1.08);
}

.tabs--dept .tab__swatch {
  inline-size: 12px;
  block-size: 12px;
  margin-inline-end: 10px;
  vertical-align: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .board__cell,
  .board__cell::before,
  .board__cue::after,
  .tabs--dept .tab--dept {
    transition: none;
  }

  .tabs--dept .tab--dept,
  .tabs--dept .tab--dept:hover,
  .tabs--dept .tab--dept[aria-selected="true"],
  .tabs--dept .tab--dept[aria-selected="true"]:hover {
    transform: none;
  }

  .board__cell:hover .board__cue::after,
  .board__cell:focus-visible .board__cue::after {
    transform: none;
  }
}

@media print {
  .board__grid {
    background: #fff;
    border-color: #000;
  }

  .board__cell {
    background: #fff;
    border-block-start: 1px solid #000;
  }

  .board__cell::before {
    background: #000;
  }

  .board__cue {
    display: none;
  }

  .tabs--dept .tab--dept,
  .tabs--dept .tab--dept[aria-selected="true"] {
    background: #fff;
    border-color: #000;
    box-shadow: none;
    transform: none;
  }
}