: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: 1rem;
  --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));
  /* P-152 (D-184): an article's reading card, at most 48rem (the medium breakpoint): no token names a reading card's width. */
  --site-reading-max: var(--breakpoint-md);
  /* P-153 (D-185): the side padding of the reading card and the notice's box on a wide screen: the card's padding, or
     half of what the card's width leaves beside a reading column of --site-reading-max, whichever is larger. The 100%
     is the card's width where the variable is used. */
  --site-reading-inset: max(var(--da-space-hero), calc((100% - var(--site-reading-max)) / 2));
}

.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 (P-157, D-187) ----------
   The name, then the links in three groups (Learn, Product, Legal), each under a small heading: beside the name and
   side by side from the medium breakpoint, stacked under it on a phone. Below them, after a thin line, the copyright
   line. The section's space above and below (3rem; 1.5rem before P-157). */
.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-direction: column;
  gap: var(--da-space-group);
  padding-top: var(--da-space-section);
  padding-bottom: var(--da-space-section);
}

.footer-main,
.footer-groups {
  display: flex;
  flex-direction: column;
  gap: var(--da-space-group);
}

@media (min-width: 48rem) {
  .footer-main {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-groups {
    flex-direction: row;
    gap: var(--da-space-section);
  }
}

.footer-brand {
  font-weight: var(--font-weight-semibold);
}

.site-footer .footer-heading {
  margin: 0;
  font-size: var(--da-text-sm);
  color: var(--da-text);
}

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

.footer-copyright {
  padding-top: var(--da-space-group);
  border-top: var(--da-border-width) solid var(--da-line);
  color: var(--da-text-muted);
}

/* ---------- 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 title section, then a grid of cards, each one link ----------
   P-157 (D-187): the title section is white, apart from the brand-colored menu, with a thin line below it; its h1 is
   in the brand color, its breadcrumbs are the site's, and its description has the text color. 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;
  background: var(--da-surface);
  border-bottom: var(--da-border-width) solid var(--da-line);
}

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

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

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

/* P-153 (D-185): a card's text is never underlined, on hover or on keyboard focus; the card shows its state with its
   brand-colored edge and the focus ring. */
.card-link,
.card-link:hover,
.card-link:focus-visible,
.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);
}

/* 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 article page (P-152, P-153; D-184, D-185): the Learn page's banner, one reading card, the notice ----------
   The banner and the cards use the page's one container, as the header and the footer do, so they share its edges.
   The reading card is as wide as the container; its text is held to a reading column of about --site-reading-max
   (48rem: the medium breakpoint; no token names a reading column's width) by its side padding, which grows with the
   card on a wide screen: max(the card's padding, half of what is left beside the column). Below 48rem it is the
   ordinary card padding, and on a phone the small one. The notice's box after the card uses the same padding, so its
   text lines up with the article's. Boxes, tables and code stay in the column, on the page's grey, flat (P-034). The
   legal pages and the other long pages keep `.reading` above, unchanged. */
.learn-back {
  margin: 0 0 var(--da-space-group);
  font-size: var(--da-text-sm);
}

/* P-157: the link back in the brand color; on hover it changes as the site's links do. */
.learn-back a {
  color: var(--da-brand);
}

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

.learn-banner .chip {
  display: inline-block;
  margin-bottom: var(--da-space-stack);
}

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

.reading-card,
.notice-box {
  padding: var(--da-space-card) var(--da-space-cell-x);
  overflow-wrap: break-word;
}

@media (min-width: 48rem) {
  .reading-card,
  .notice-box {
    padding: var(--da-space-card) var(--da-space-hero);
  }
}

@media (min-width: 64rem) {
  .reading-card,
  .notice-box {
    padding-left: var(--site-reading-inset);
    padding-right: var(--site-reading-inset);
  }
}

.reading-card {
  font-size: var(--da-text-lg);
  line-height: var(--leading-relaxed);
}

.reading-card p,
.reading-card ul,
.reading-card ol,
.reading-card dl {
  margin-top: var(--da-space-group);
}

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

.reading-card h2 {
  margin-top: var(--da-space-section);
  color: var(--da-brand);
  font-size: var(--da-text-2xl);
  font-weight: var(--da-heading-weight);
}

.reading-card h3 {
  margin-top: var(--da-space-section);
  color: var(--da-text);
}

.reading-card h2 + p,
.reading-card h3 + p {
  margin-top: var(--da-space-stack);
}

.reading-card > :first-child {
  margin-top: 0;
}

/* P-157 (D-187): the article's opening paragraph, its description: a step larger than the text, in the text color,
   with a thin line below it and the group's space on each side of the line, so the text visibly starts here. */
.reading-card .reading-lead {
  font-size: var(--da-text-xl);
  line-height: var(--leading-relaxed);
  color: var(--da-text);
  padding-bottom: var(--da-space-group);
  border-bottom: var(--da-border-width) solid var(--da-line);
}

.reading-card .key-terms,
.reading-card .box,
.reading-card pre {
  background: var(--da-page);
  border-top: var(--da-border-width) solid var(--da-line);
  border-right: var(--da-border-width) solid var(--da-line);
  border-bottom: var(--da-border-width) solid var(--da-line);
  border-radius: var(--da-radius-card);
  padding: var(--da-space-group);
  font-size: var(--da-text-base);
}

.reading-card .key-terms,
.reading-card pre {
  border-left: var(--da-border-width) solid var(--da-line);
}

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

.reading-card .box > :first-child,
.reading-card .box p + p {
  margin-top: var(--da-space-stack);
}

/* A table wider than the column scrolls sideways inside itself; the page never widens. */
.reading-card table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-top: var(--da-space-group);
  font-size: var(--da-text-base);
}

.reading-card pre {
  overflow-x: auto;
}

.reading-card code {
  overflow-wrap: anywhere;
}

/* The closing call to action (P-153): the page's invitation, on the brand color like the banner, with a shield in a
   white round badge, a heading, the lead and one button. The button is white with brand text, as the header's current
   page is: the action color on the brand reaches only 2.25:1, under the 3:1 of an interface part. Beside the badge on a
   wide screen, under it on a phone. */
.reading-card .next-step {
  display: flex;
  flex-direction: column;
  gap: var(--da-space-group);
  margin-top: var(--da-space-section);
  padding: var(--da-space-card) var(--da-space-cell-x);
  border-radius: var(--da-radius-card);
  background: var(--da-brand);
  color: var(--da-on-brand);
}

@media (min-width: 48rem) {
  .reading-card .next-step {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--da-space-card) var(--da-space-hero);
  }
}

.next-step-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--da-icon-tile-lg);
  height: var(--da-icon-tile-lg);
  border-radius: var(--da-radius-button);
  background: var(--da-surface);
  color: var(--da-brand);
}

.next-step-badge .icon {
  width: var(--da-icon-xl);
  height: var(--da-icon-xl);
}

.reading-card .next-step h2 {
  margin-top: 0;
  color: var(--da-on-brand);
  font-size: var(--da-text-2xl);
}

.reading-card .next-step p {
  margin-top: var(--da-space-stack);
  color: var(--da-on-brand);
}

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

.button-on-brand,
.button-on-brand:hover {
  background: var(--da-surface);
  color: var(--da-brand);
}

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

/* The notice at the end (P-153): its own white box after the reading card, the information icon at the left of the
   text, small and muted; a note, not a warning. */
.notice-box {
  display: flex;
  gap: var(--da-space-group);
  align-items: flex-start;
  margin-top: var(--da-space-group);
  font-size: var(--da-text-sm);
  color: var(--da-text-muted);
}

.notice-icon {
  display: inline-flex;
  flex: none;
  color: var(--da-brand);
}

.notice-icon .icon {
  width: var(--da-icon-md);
  height: var(--da-icon-md);
}

.notice-label {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--da-text);
}

.notice-box .notice {
  margin: var(--da-space-stack) 0 0;
}

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