:root {
  --da-page: #f3f4f6;
  --da-surface: #ffffff;
  --da-text: #111827;
  --da-text-muted: #4b5563;
  --da-line: #e5e7eb;
  --da-line-strong: #6b7280;
  --da-brand: #312e81;
  --da-brand-hover: #4338ca;
  --da-on-brand: #ffffff;
  --da-action: #c64014;
  --da-action-hover: #ae3812;
  --da-on-action: #ffffff;
  --da-success: #15803d;
  --da-on-success: #ffffff;
  --da-warning: #f5b400;
  --da-on-warning: #111827;
  --da-warning-text: #92400e;
  --da-danger: #b4123e;
  --da-on-danger: #ffffff;
  --da-info: #1d4ed8;
  --da-on-info: #ffffff;
  --da-label-slate: #737476;
  --da-label-red: #d43a4f;
  --da-label-crimson: #ba036e;
  --da-label-orange: #d73803;
  --da-label-amber: #b06100;
  --da-label-olive: #7a7703;
  --da-label-green: #3b723e;
  --da-label-teal: #05836d;
  --da-label-cyan: #067dae;
  --da-label-blue: #0056b0;
  --da-label-indigo: #3964fe;
  --da-label-violet: #6901d3;
  --da-label-magenta: #ad4eb4;
  --da-label-brown: #81462b;
  --da-on-label: #ffffff;
  --da-hover: #eceef2;
  --da-pressed: #e1e4e9;
  --da-tooltip: #111827;
  --da-on-tooltip: #ffffff;
  --da-track: #d1d5db;
  --da-skeleton: #e5e7eb;
  --da-overlay: rgb(17 24 39 / 0.55);
  --da-focus-colour: var(--da-action);
  --da-focus-on-brand: #ffffff;
  --da-focus-width: 3px;
  --da-focus-offset: 2px;
  --da-radius-button: 9999px;
  --da-radius-label: 9999px;
  --da-radius-input: 0.625rem;
  --da-radius-card: 0.75rem;
  --da-radius-tile: 0.75rem;
  --da-radius-overlay: 0.5rem;
  --da-radius-small: 0.375rem;
  --da-border-width: 1px;
  --da-border-width-strong: 2px;
  --da-edge-bar: 0.375rem;
  --da-shadow: none;
  --da-icon-xs: 0.875rem;
  --da-icon-sm: 1.125rem;
  --da-icon-md: 1.375rem;
  --da-icon-lg: 1.75rem;
  --da-icon-xl: 2.5rem;
  --da-icon-tile: 3.25rem;
  --da-icon-tile-lg: 4.5rem;
  --da-font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --da-heading-weight: 700;
  --da-text-xs: 0.75rem;
  --da-text-sm: 0.875rem;
  --da-text-base: 1rem;
  --da-text-lg: 1.1875rem;
  --da-text-xl: 1.375rem;
  --da-text-2xl: 1.75rem;
  --da-text-3xl: 2.25rem;
  --da-text-figure: 2.75rem;
  --da-container-max: 90rem;
  --da-content-margin-full: 75px;
  --da-space-gutter: clamp(1rem, 2.5vw, 2.5rem);
  --da-space-page: 2.75rem;
  --da-space-section: 3rem;
  --da-space-group: 1.5rem;
  --da-space-stack: 0.5rem;
  --da-space-card: 2rem;
  --da-space-hero: 2.5rem;
  --da-space-cell-x: 1.25rem;
  --da-space-cell-y: 1rem;
  --da-space-control: 2.75rem;
  --da-space-control-sm: 2.25rem;
  --da-space-control-xs: 1.75rem;
  --da-space-control-x: 1.25rem;
  --da-space-empty: 3.5rem;
  --da-space-header: 0.5rem;
  --da-space-band: 0.5rem;
  --da-space-page-top: var(--da-space-band);
  --da-bar-row: var(--da-space-control-xs);
  --da-bar-y: 0.25rem;
  --da-bar-left: 1.125rem;
  --da-bar-right: 0.5rem;
  --da-bar-gap: 0.75rem;
  --da-bar-text-inset: calc((var(--da-bar-row) - 1.375rem) / 2);
  --da-space-notice-strip: calc(var(--da-bar-row) + 2 * var(--da-bar-y) + 2 * var(--da-border-width));
  --da-space-grid-row: 2.75rem;
  --da-grid-column: 12rem;
  --da-grid-column-min: 4.5rem;
  --da-grid-column-max: 40rem;
  --da-grid-min-rows: 8;
  --da-grid-height: 28rem;
  --da-text-pane-height: 28rem;
  --da-dialog-wide: 64rem;
  --da-tile-min: 14rem;
  --da-flow-step-height: 2.75rem;
  --da-flow-step-x: 0.75rem;
  --da-flow-text: var(--da-text-lg);
  --da-flow-number: 1.75rem;
  --da-nav-link-x: 0.75rem;
  --da-page-gutter: var(--da-space-gutter);
  --font-sans: var(--da-font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --spacing: 0.25rem;
  --container-prose: 42rem;
  --container-form: 36rem;
  --container-dialog: 32rem;
  --container-drawer: 36rem;
  --container-dialog-wide: var(--da-dialog-wide);
  --container-content: var(--da-container-max);
  --container-workspace: 120rem;
  --container-side-panel: 20rem;
  --container-nav: 15rem;
  --container-menu: 12rem;
  --container-popover: 20rem;
  --container-tooltip: 16rem;
  --container-toast: 24rem;
  --container-swatch: 10rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-progress: progress-indeterminate 1.6s ease-in-out infinite;
}

/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-ca15706333.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-71d5ee93cc.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-6e9e020a25.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-1be3448e29.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-5c66f9e07e.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-34b9c504ca.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-3100e775e8.woff2) format('woff2-variations');
  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;
}
/* ============================================================
   DataAttendant website: the site's own rules (ADR-0076)

   Every colour, size, space, radius, line and font comes from the
   product's tokens (packages/web/src/theme.css), which the build puts
   before these rules. This file holds no design value of its own:
   `pnpm check:theme` fails on a colour, a pixel value, a shadow or a
   size that is not a token.

   The site is the product's design system on a page that reads: the
   grey page, white cards, the indigo header band with white text, the
   coral action colour for the one call to action and for links, one
   focus outline, no shadows, no dotted or dashed lines.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--da-page);
  color: var(--da-text);
  font-family: var(--da-font-sans);
  font-size: var(--da-text-base);
  line-height: var(--leading-relaxed);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--da-heading-weight);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--da-text-3xl);
}

h2 {
  font-size: var(--da-text-xl);
  margin-top: var(--da-space-section);
}

h3 {
  font-size: var(--da-text-lg);
  margin-top: var(--da-space-group);
}

p,
ul,
ol,
table,
picture {
  margin: var(--da-space-group) 0 0;
}

ul,
ol {
  padding-left: var(--da-space-group);
}

li + li {
  margin-top: var(--da-space-stack);
}

a {
  color: var(--da-action);
}

a:hover {
  color: var(--da-action-hover);
}

:focus-visible {
  outline: var(--da-focus-width) solid var(--da-focus-colour);
  outline-offset: var(--da-focus-offset);
}

[data-on-brand] {
  --da-focus-colour: var(--da-focus-on-brand);
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--da-surface);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--da-space-stack) var(--da-space-cell-x);
  border-bottom: var(--da-border-width) solid var(--da-line);
}

code {
  font-family: var(--font-mono);
  font-size: var(--da-text-sm);
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    transition: none;
  }
}

/* ---------- The one content container (the product's width and gutters) ---------- */
.container {
  width: 100%;
  max-width: var(--da-container-max);
  margin: 0 auto;
  padding: 0 var(--da-space-gutter);
}

/* ---------- Skip link: hidden until it has the keyboard's focus ---------- */
.skip-link {
  position: absolute;
  left: var(--da-space-gutter);
  top: var(--da-space-stack);
  z-index: 10;
  padding: var(--da-space-stack) var(--da-space-control-x);
  background: var(--da-surface);
  color: var(--da-action);
  border-radius: var(--da-radius-button);
  transform: translateY(-200%);
}

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

/* ---------- The header band ---------- */
.site-header {
  background: var(--da-brand);
  color: var(--da-on-brand);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--da-space-stack) var(--da-space-group);
  padding-top: var(--da-space-header);
  padding-bottom: var(--da-space-header);
  min-height: var(--da-space-control);
}

.brand {
  color: var(--da-on-brand);
  font-weight: var(--font-weight-bold);
  font-size: var(--da-text-lg);
  text-decoration: none;
  margin-right: auto;
}

a.brand:hover {
  color: var(--da-on-brand);
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-space-stack);
  margin: 0;
  padding: 0;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--da-space-control-sm);
  padding: 0 var(--da-nav-link-x);
  border-radius: var(--da-radius-button);
  color: var(--da-on-brand);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--da-brand-hover);
  color: var(--da-on-brand);
}

.site-nav a[aria-current="page"] {
  background: var(--da-surface);
  color: var(--da-brand);
}

/* ---------- The one call to action ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--da-space-control);
  padding: 0 var(--da-space-control-x);
  border-radius: var(--da-radius-button);
  background: var(--da-action);
  color: var(--da-on-action);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.button:hover {
  background: var(--da-action-hover);
  color: var(--da-on-action);
}

.site-header .button {
  min-height: var(--da-space-control-sm);
}

/* ---------- The page ---------- */
main {
  flex: 1 0 auto;
  padding: var(--da-space-page) 0;
}

main:focus {
  outline: none;
}

.page {
  max-width: var(--container-prose);
}

.card {
  background: var(--da-surface);
  border: var(--da-border-width) solid var(--da-line);
  border-radius: var(--da-radius-card);
  padding: var(--da-space-card);
}

.lead {
  font-size: var(--da-text-lg);
  color: var(--da-text-muted);
  margin-top: var(--da-space-stack);
}

.meta {
  font-size: var(--da-text-sm);
  color: var(--da-text-muted);
  margin-top: var(--da-space-stack);
}

.figure {
  margin: var(--da-space-group) 0 0;
}

.figure img {
  border-radius: var(--da-radius-card);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-space-stack);
  margin: 0 0 var(--da-space-group);
  padding: 0;
  font-size: var(--da-text-sm);
}

.breadcrumb li + li {
  margin-top: 0;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--da-text-muted);
  margin-right: var(--da-space-stack);
}

.breadcrumb [aria-current="page"] {
  color: var(--da-text-muted);
}

/* ---------- Lists of pages: the Learn hub, related articles ---------- */
.page-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--da-space-group);
}

.page-list li + li {
  margin-top: 0;
}

.page-list h3 {
  margin: 0;
}

.page-list p {
  margin-top: var(--da-space-stack);
}

.next-step {
  margin-top: var(--da-space-section);
}

.next-step p {
  margin-top: 0;
}

.next-step .button {
  margin-top: var(--da-space-group);
}

/* ---------- Legal pages: long text, numbered sections ---------- */
.legal h2 {
  font-size: var(--da-text-lg);
}

/* The legal pages' table of contents (P-108). */
.contents {
  margin-top: var(--da-space-group);
}

.contents h2 {
  margin-top: 0;
}

.contents ol {
  margin-top: var(--da-space-stack);
}

/* ---------- The footer ---------- */
.site-footer {
  background: var(--da-surface);
  border-top: var(--da-border-width) solid var(--da-line);
  font-size: var(--da-text-sm);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-space-stack) var(--da-space-group);
  align-items: center;
  padding-top: var(--da-space-group);
  padding-bottom: var(--da-space-group);
}

.site-footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-space-stack) var(--da-space-group);
  margin: 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: 0;
}

/* ---------- The landing page (P-114): full-width bands, each with the one content container ---------- */
main.main-bands {
  padding: 0;
}

.band {
  padding: var(--da-space-section) 0;
}

.band-page {
  background: var(--da-page);
}

.band-surface {
  background: var(--da-surface);
  border-top: var(--da-border-width) solid var(--da-line);
  border-bottom: var(--da-border-width) solid var(--da-line);
}

.band-brand {
  background: var(--da-brand);
  color: var(--da-on-brand);
}

.band h2 {
  margin-top: 0;
  max-width: var(--container-prose);
  font-size: var(--da-text-2xl);
}

.section-lead {
  max-width: var(--container-prose);
  font-size: var(--da-text-lg);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--da-space-stack) var(--da-space-group);
}

.button-large {
  min-height: var(--da-space-control);
  font-size: var(--da-text-base);
}

.button-secondary {
  background: var(--da-surface);
  color: var(--da-brand);
  border: var(--da-border-width-strong) solid var(--da-brand);
}

.button-secondary:hover {
  background: var(--da-hover);
  color: var(--da-brand);
}

/* The hero: the copy and the before-and-after card side by side on a wide screen, stacked on a narrow one. */
.hero-grid {
  display: grid;
  gap: var(--da-space-section);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* P-117: the eyebrow above the headline; its capitals come from here, not from the text. */
.eyebrow {
  margin: 0;
  font-size: var(--da-text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--da-brand);
}

.hero-copy .eyebrow + h1 {
  margin-top: var(--da-space-stack);
}

.hero-copy h1 {
  font-size: var(--da-text-3xl);
  line-height: var(--leading-tight);
}

@media (min-width: 48rem) {
  .hero-copy h1 {
    font-size: var(--da-text-figure);
  }
}

.hero-lead {
  font-size: var(--da-text-lg);
  color: var(--da-text-muted);
  max-width: var(--container-prose);
}

.hero-copy .actions {
  margin-top: var(--da-space-group);
}

.trust {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-space-stack) var(--da-space-group);
  font-weight: var(--font-weight-semibold);
}

.trust li + li {
  margin-top: 0;
}

/* The before-and-after tables: live text in a real table, the protected value set apart in the mono font. */
.demo-card {
  margin: 0;
  background: var(--da-surface);
  border: var(--da-border-width) solid var(--da-line);
  border-radius: var(--da-radius-card);
  padding: var(--da-space-card);
}

.table-frame {
  margin-top: var(--da-space-group);
  background: var(--da-surface);
  border: var(--da-border-width) solid var(--da-line);
  border-radius: var(--da-radius-card);
  padding: var(--da-space-stack) var(--da-space-card);
  overflow-x: auto;
}

.demo-table {
  margin: 0;
  width: 100%;
  font-size: var(--da-text-sm);
}

.demo-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--da-space-stack);
  color: var(--da-text-muted);
}

.demo-table th,
.demo-table td {
  padding: var(--da-space-stack);
}

.demo-table td {
  overflow-wrap: anywhere;
}

.demo-table th {
  white-space: nowrap;
}

.demo-table thead th {
  color: var(--da-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* On a narrow screen each row is a small card: the column's name above each value, from its data-label. */
@media (max-width: 40rem) {
  .demo-table thead {
    position: absolute;
    width: var(--da-border-width);
    height: var(--da-border-width);
    overflow: hidden;
    clip-path: inset(50%);
  }

  .demo-table tr {
    display: block;
    padding: var(--da-space-stack) 0;
    border-bottom: var(--da-border-width) solid var(--da-line);
  }

  .demo-table th,
  .demo-table td {
    display: block;
    border: 0;
    padding: var(--da-space-stack) 0 0;
  }

  .demo-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--da-font-sans);
    font-weight: var(--font-weight-semibold);
    font-size: var(--da-text-xs);
    color: var(--da-text-muted);
  }

  .demo-card,
  .table-frame {
    padding: var(--da-space-stack) var(--da-space-group);
  }
}

.demo-table .protected {
  font-family: var(--font-mono);
  color: var(--da-brand);
  font-weight: var(--font-weight-semibold);
}

.note {
  font-size: var(--da-text-sm);
  color: var(--da-text-muted);
  max-width: var(--container-prose);
}

/* Cards in rows: the problem's three, the four steps. */
.feature-cards,
.step-cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--da-space-group);
  margin-top: var(--da-space-group);
}

@media (min-width: 48rem) {
  .feature-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .step-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.feature-cards li + li,
.step-cards li + li {
  margin-top: 0;
}

.feature-cards h3,
.step-cards h3 {
  margin-top: 0;
}

.feature-cards p,
.step-cards p {
  margin-top: var(--da-space-stack);
}

/* The steps are numbered by the ordered list, shown in the brand's circle. */
.step-cards {
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--da-flow-number);
  height: var(--da-flow-number);
  border-radius: var(--da-radius-button);
  background: var(--da-brand);
  color: var(--da-on-brand);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--da-space-stack);
}

/* The file types, as chips. */
.chips-label {
  font-weight: var(--font-weight-semibold);
}

.chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--da-space-stack);
  margin-top: var(--da-space-stack);
}

.chips li + li {
  margin-top: 0;
}

.chips li {
  padding: var(--da-space-stack) var(--da-space-control-x);
  border: var(--da-border-width) solid var(--da-line-strong);
  border-radius: var(--da-radius-label);
  background: var(--da-page);
  font-weight: var(--font-weight-medium);
}

/* Short sections (the solution, the levels, the closing) are centred, so no half of a wide screen is left empty. */
.band-centered .container {
  text-align: center;
}

.band-centered h2,
.band-centered .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.band-centered .actions {
  justify-content: center;
}

/* The privacy section: the statement beside the file types, on a wide screen. */
.split {
  display: grid;
  gap: var(--da-space-group) var(--da-space-section);
  align-items: start;
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.split .card {
  margin-top: 0;
}

/* The closing band, on the brand colour. */
.band-closing h2 {
  color: var(--da-on-brand);
}

.band-closing .section-lead {
  color: var(--da-on-brand);
}

/* ---------- Articles (P-111): the notice, the Key terms box, the boxes, Where next ---------- */
.notice {
  margin: 0 0 var(--da-space-group);
  font-size: var(--da-text-sm);
  color: var(--da-text-muted);
}

.key-terms {
  margin-top: var(--da-space-group);
}

.key-terms h2 {
  margin-top: 0;
  font-size: var(--da-text-lg);
}

.key-terms dl {
  margin: var(--da-space-stack) 0 0;
}

.key-terms dt {
  font-weight: var(--font-weight-semibold);
  margin-top: var(--da-space-stack);
}

.key-terms dd {
  margin: 0;
}

.box {
  margin-top: var(--da-space-group);
  background: var(--da-surface);
  border: var(--da-border-width) solid var(--da-line);
  border-left: var(--da-edge-bar) solid var(--da-info);
  border-radius: var(--da-radius-card);
  padding: var(--da-space-stack) var(--da-space-card);
}

.box-tip {
  border-left-color: var(--da-success);
}

.box-warning {
  border-left-color: var(--da-warning-text);
}

.box-label {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

details.box summary {
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--da-space-stack) 0;
}

.where-next ul {
  margin-top: var(--da-space-stack);
}

/* ---------- The Learn hub's cards (P-111): each card is one link ---------- */
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--da-space-group);
}

.cards li + li {
  margin-top: 0;
}

.card-link {
  display: block;
  color: var(--da-text);
  text-decoration: none;
}

.card-link:hover {
  border-color: var(--da-line-strong);
  color: var(--da-text);
}

.card-link:hover .card-title {
  text-decoration: underline;
}

.card-title {
  margin: 0;
  color: var(--da-action);
}

.card-text {
  display: block;
  margin-top: var(--da-space-stack);
}

.card-link .meta {
  display: block;
}

.draft-label {
  font-weight: var(--font-weight-semibold);
  color: var(--da-warning-text);
}

/* ---------- The pricing page (P-116): three plan cards side by side, and the pack table ---------- */
/* The page holding the cards uses the container's full width; its text keeps the reading width. */
.page:has(.plan-cards) {
  max-width: none;
}

.page:has(.plan-cards) > :not(.plan-cards, .table-frame) {
  max-width: var(--container-prose);
}

.plan-cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--da-space-group);
  margin-top: var(--da-space-group);
}

@media (min-width: 48rem) {
  .plan-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plan-cards > li + li {
  margin-top: 0;
}

.plan {
  display: flex;
  flex-direction: column;
}

.plan h3 {
  margin-top: 0;
}

.plan-price {
  margin-top: var(--da-space-stack);
}

.plan-amount {
  font-size: var(--da-text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.plan-period {
  color: var(--da-text-muted);
}

.plan-credits {
  margin-top: var(--da-space-stack);
  font-weight: var(--font-weight-semibold);
}

.plan-includes {
  margin-top: var(--da-space-stack);
  padding-left: var(--da-space-group);
  font-size: var(--da-text-sm);
}

/* The call to action sits at the foot of each card, so the three line up. */
.plan-action {
  margin-top: auto;
  padding-top: var(--da-space-group);
}

.pack-table td,
.pack-table th[scope="row"] {
  white-space: nowrap;
}