: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-logo-height: 2.25rem;
  --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 (P-118) ----------
   Narrower than the application's (90rem), centered: the text, the cards and the tables of every page span it, so
   the header, the content and the footer share the same outer edges. The content is 68rem (about 1,088 pixels: the
   large breakpoint and 16 steps of the spacing scale), with the product's gutters on either side. */
:root {
  --site-container-max: calc(var(--breakpoint-lg) + 16 * var(--spacing) + 2 * var(--da-space-gutter));
}

.container {
  width: 100%;
  max-width: var(--site-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);
}

/* P-133: the owner's logo, at the height of the --da-logo-height token, its width from its proportions. It is made
   for this band: its words are almost white. The link's focus outline is the band's (white). */
.brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--da-radius-button);
  margin-right: auto;
}

/* P-134: the logo's picture and image are blocks with no margin of their own. The general rule for pictures above
   gives a picture the group space on top (1.5rem), which put the logo 12 pixels below the band's middle line. */
.brand picture,
.brand .logo {
  display: block;
  margin: 0;
}

.brand .logo {
  height: var(--da-logo-height);
  width: auto;
}

.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;
}

/* P-118: long text (the articles and the legal pages) keeps a reading measure, centered in the container. */
.reading {
  max-width: var(--container-prose);
  margin-left: auto;
  margin-right: auto;
}

.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);
}

/* ---------- The page frame (P-128) ----------
   The pricing page, the support page and the legal pages (the pages of the footer) share one frame, the pricing
   page's: the container's full width, the page's padding (main), the breadcrumbs, the opening (the h1, the lead and
   any meta line, `.page-intro`), and a white container for each section (`.panel`, below), a section's space apart.
   Every h2 has the one size above. No template sets a width, a margin or a size of its own. */

/* The legal pages' table of contents (P-108): a card under the opening, its links in two columns on a wide screen. */
.contents {
  margin-top: var(--da-space-group);
}

.contents h2 {
  margin-top: 0;
}

/* The sections' headings carry their own numbers, so the list shows no second one. */
.contents ol {
  margin-top: var(--da-space-stack);
  list-style: none;
  padding-left: 0;
}

@media (min-width: 48rem) {
  .contents ol {
    columns: 2;
    column-gap: var(--da-space-section);
  }

  .contents li {
    break-inside: avoid;
  }
}

/* ---------- 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;
  font-size: var(--da-text-2xl);
}

.section-lead {
  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;
}

/* P-118: the card's column is the wider, so its values stay on one line in the narrower container. */
@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  }
}

/* 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);
}

.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;
}

/* P-118: beside the copy, a value breaks only between words, so an address or a code stays whole. */
@media (min-width: 64rem) {
  .demo-table td {
    overflow-wrap: break-word;
  }
}

.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);
}

/* 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 page (P-151, D-182, D-183): a brand banner, then a grid of cards, each one link ----------
   The banner has the header's colour; its breadcrumbs, h1 and description take the on-brand colour. The cards sit in
   rows of one (phone), two (medium) and three (large); a row's cards have one height, and each card's foot ("Read
   guide →" and the reading time) stays at its bottom. The edge of a card takes the brand colour on hover and keyboard focus,
   which also shows the site's focus ring. */
.learn-banner {
  padding: var(--da-space-empty) 0;
}

.learn-banner h1 {
  color: var(--da-on-brand);
}

.learn-lead {
  margin-top: var(--da-space-stack);
  max-width: var(--container-prose);
  font-size: var(--da-text-lg);
}

.learn-banner .breadcrumb a,
.learn-banner .breadcrumb a:hover,
.learn-banner .breadcrumb li + li::before,
.learn-banner .breadcrumb [aria-current="page"] {
  color: var(--da-on-brand);
}

.learn-cards {
  list-style: none;
  padding: 0;
  margin-top: var(--da-space-group);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--da-space-group);
}

@media (min-width: 48rem) {
  .learn-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .learn-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.learn-cards li {
  display: flex;
}

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

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

.learn-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.learn-card:hover,
.learn-card:focus-visible {
  border-color: var(--da-brand);
  color: var(--da-text);
}

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

/* The category chip: the page's light grey with brand-colored text. The flat palette has no tints (P-034), so the
   brief's light tint of the brand is not a token. */
.chip {
  align-self: flex-start;
  padding: var(--da-bar-y) var(--da-space-stack);
  border-radius: var(--da-radius-label);
  background: var(--da-page);
  color: var(--da-brand);
  font-size: var(--da-text-xs);
  font-weight: var(--font-weight-semibold);
}

.learn-card .card-title {
  margin-top: var(--da-space-group);
  font-size: var(--da-text-lg);
}

/* The description: at most four lines, clipped with an ellipsis; the whole text stays in the page for assistive technology. */
.learn-card .card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin-top: var(--da-space-stack);
  color: var(--da-text-muted);
}

.learn-card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--da-space-stack) var(--da-space-group);
  margin-top: auto;
  padding-top: var(--da-space-group);
  font-size: var(--da-text-sm);
}

.learn-card-read {
  color: var(--da-action);
  font-weight: var(--font-weight-semibold);
}

.learn-card-time {
  color: var(--da-text-muted);
}

.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 ---------- */
.plan-cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--da-space-group);
  margin-top: var(--da-space-group);
}

/* P-118: side by side from the large breakpoint; below it each card takes the full width, so no price wraps. */
@media (min-width: 64rem) {
  .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);
}

/* P-118: a plan's name can wrap the button's label onto two lines; it stays centered. */
.plan-action .button {
  text-align: center;
}

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

/* P-118: a section of the pricing page in a white container of its own, as the plan cards are (front matter `panels`). */
.panel {
  margin-top: var(--da-space-section);
}

.panel > h2 {
  margin-top: 0;
}

/* P-128: the frame's section container, on every page of the footer. P-129 (the owner's answer): its text, lists,
   headings and tables use the container's full inner width, inside its padding; a long word breaks rather than overflow. */
.panel {
  overflow-wrap: break-word;
}

/* A numbered section's number, as a small badge in the brand's colours. */
.section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--da-flow-number);
  height: var(--da-flow-number);
  padding: 0 var(--da-space-stack);
  margin-right: var(--da-space-stack);
  border-radius: var(--da-radius-button);
  background: var(--da-brand);
  color: var(--da-on-brand);
  font-size: var(--da-text-sm);
  font-weight: var(--font-weight-bold);
  vertical-align: middle;
}

/* A table in a container uses the container's full width. On a narrow screen each row is a small card, with the
   column's name above each value (from its data-label), as the pricing page's pack table does. */
.table-scroll {
  margin-top: var(--da-space-group);
  overflow-x: auto;
}

.table-scroll table {
  margin: 0;
}

@media (max-width: 40rem) {
  .table-scroll thead {
    position: absolute;
    width: var(--da-border-width);
    height: var(--da-border-width);
    overflow: hidden;
    clip-path: inset(50%);
  }

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

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

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

/* The highlighted section (the support page's How to contact us): the brand's bar at its left edge, and its e-mail
   address as the call to action. */
.panel-highlight {
  border-left: var(--da-edge-bar) solid var(--da-brand);
}

/* P-129: the address stands in a paragraph of its own, under its lead-in. */
.panel-highlight .button {
  margin: 0;
}