/*
 * CorpusKit Cloud: the one stylesheet every control plane page uses (apps/control/src/pages/layout.ts).
 *
 * A copy of corpuskit.org's styling (its about and docs pages): the Archivo wordmark with its blue
 * slash, Archivo headings, Source Sans 3 text and IBM Plex Mono labels, in ink and blue on warm
 * grained paper with thin rules, 4px corners and a blue focus ring. The colours are corpuskit.org's
 * own values, apart from --field (see below). Light only, as corpuskit.org is.
 *
 * Served as a static asset with the fonts beside it, so the Content-Security-Policy stays at
 * style-src 'self' and font-src 'self' (apps/control/src/headers.ts). The fonts are the latin and
 * latin-ext subsets corpuskit.org loads, under the SIL Open Font License 1.1 (fonts/OFL-*.txt).
 * public/_headers caches every asset for a year: give a changed font a new file name. The layout
 * links this file with a digest in the URL (pages/assets.ts), so an edit here needs a new digest.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * ---- tokens. The colours are corpuskit.org's :root, verbatim. Every text pairing used here meets
 * WCAG 2.1 AA (4.5:1, the lowest is ink-soft on paper-deep at 5.25:1); field borders and focus
 * meet 3:1. ----
 */
:root {
  color-scheme: light;
  --paper: #f2efe7;
  --paper-soft: #f8f6f0;
  --paper-deep: #e6e0d4;
  --ink: #1c1c19;
  --ink-soft: #5c5a53;
  --rule: #cec8bb;
  --blue: #155da6;
  --blue-dark: #0d467f;
  --blue-pale: #dce8f4;
  --white: #fffdf8;
  /* corpuskit.org has no form fields; its lightest warm grey is 2.4:1 on white, so a field border
     takes one darker step of the same grey to reach the 3:1 WCAG asks of a control's edge. */
  --field: #8a867c;
  /* corpuskit.org's own clay flag colour and its wash, for errors. */
  --error: #a03d2e;
  --error-wash: #faece7;
  /* corpuskit.org's colours on its ink and blue bands: text at 9.6:1 and 7.0:1 and links at
     8.9:1 on ink, rules that separate but carry no meaning, and the plan cards on blue (their
     pale blue text 6.9:1). */
  --on-ink: #c6c2b8;
  --on-ink-soft: #aaa69d;
  --on-ink-link: #8fc0ee;
  --ink-rule: #4b4a45;
  --ink-frame: #3a3a36;
  --rule-deep: #c3b9a8;
  --header-rule: rgba(28, 28, 25, 0.15);
  --blue-card: #0f4d89;
  --on-blue-rule: rgba(255, 255, 255, 0.28);
  --on-blue-frame: rgba(255, 255, 255, 0.36);

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sans: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 4px;
  --pill: 999px;
  --column: 42rem;
  /* The page's side gutter: 16px on a phone. */
  --gutter: clamp(1rem, 4vw, 4.5rem);
  /* The smallest thing a finger should have to hit (WCAG 2.5.5): 44px. */
  --tap: 2.75rem;

  /*
   * Spacing: one 4px-based scale. Every margin, padding and gap below is a step of it, or one of
   * the fluid steps after it, which grow from one step at a 390px screen to another at 1440px.
   */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 0.75rem; /* 12px */
  --space-s: 1rem; /* 16px */
  --space-m: 1.25rem; /* 20px */
  --space-l: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 5rem; /* 80px */
  --space-5xl: 7.5rem; /* 120px */
  /* A band's top and bottom (64 to 120px), and a quieter band's (48 to 80px). */
  --section-y: clamp(var(--space-3xl), 2.7rem + 5.33vw, var(--space-5xl));
  --section-y-s: clamp(var(--space-2xl), 2.26rem + 3.05vw, var(--space-4xl));
  /* From a section's heading and lead to what follows it (32 to 48px), and between the large
     blocks inside one band (48 to 80px). */
  --stack: clamp(var(--space-xl), 1.63rem + 1.52vw, var(--space-2xl));
  --stack-l: clamp(var(--space-2xl), 2.26rem + 3.05vw, var(--space-4xl));
  /* Between the columns of a two-column layout (32 to 96px), and between items in a row of
     three to five (24 to 48px). */
  --columns-gap: clamp(var(--space-xl), 0.51rem + 6.1vw, 6rem);
  --grid-gap: clamp(var(--space-l), 0.94rem + 2.29vw, var(--space-2xl));
  /* Inside a card (20 to 32px). */
  --card-pad: clamp(var(--space-m), 0.97rem + 1.14vw, var(--space-xl));

  /*
   * Type: sizes and the line heights that go with them. Archivo headings run tight; Source Sans 3
   * text runs open. Body text stops at --measure, about 70 characters.
   */
  --text-xs: 0.8125rem; /* 13px: labels, legal lines */
  --text-s: 0.9375rem; /* 15px: secondary text, captions, the footer */
  --text-m: 1.0625rem; /* 17px: body */
  --text-l: clamp(1.125rem, 1.055rem + 0.29vw, 1.3125rem); /* 18 to 21px: lead paragraphs */
  --text-xl: 1.3125rem; /* 21px: headings inside a section */
  --text-2xl: 1.5rem; /* 24px: card and step titles */
  --text-3xl: clamp(1.75rem, 1.56rem + 0.76vw, 2.25rem); /* 28 to 36px: prices, prose headings */
  --text-4xl: clamp(1.875rem, 1.46rem + 1.71vw, 3rem); /* 30 to 48px: section headings */
  --text-5xl: clamp(2.4rem, 1.58rem + 3.35vw, 4.6rem); /* 38 to 74px: display headings */
  --text-6xl: clamp(2.6rem, 1.56rem + 4.27vw, 5.4rem); /* 42 to 86px: page titles */
  --leading-display: 0.96;
  --leading-heading: 1.05;
  --leading-title: 1.2;
  --leading-ui: 1.45;
  --leading-body: 1.55;
  --tracking-display: -0.045em;
  --tracking-heading: -0.035em;
  --tracking-title: -0.025em;
  /* Source Sans 3's figures are wide, so 60ch holds about 72 characters of running text. */
  --measure: 60ch;
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-m);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* corpuskit.org's paper grain, behind the page so it never sits over text. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url('grain.svg');
}

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

a {
  color: var(--blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover {
  color: var(--blue);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
#main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
  color: var(--white);
}

/* A 16px gutter on a phone, widening with the screen, as corpuskit.org's page width does. */
.shell {
  width: min(100% - 2 * var(--gutter), 80rem);
  margin-inline: auto;
}

/*
 * ---- masthead: the CorpusKit wordmark with Cloud beside it (home), and the navigation. Every
 * link is at least 44px tall. On a phone the visitor navigation takes its own row under the
 * wordmark, with the trial button at its end. ----
 */
.site-header {
  border-bottom: 1px solid var(--header-rule);
  background: var(--paper);
}
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-xl);
  padding-block: var(--space-s);
}
/* The wordmark's own sizes, as corpuskit.org sets them. */
.brand {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  align-content: center;
  min-height: var(--tap);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
  text-decoration: none;
}
.brand:hover {
  color: var(--ink);
}
.brand-mark {
  margin-left: 0.1rem;
  color: var(--blue);
}
.service {
  margin-left: 0.9rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
}
.brand:hover .service {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(var(--space-s), 2.2vw, var(--space-xl));
  margin: 0;
  padding: 0;
  font-size: var(--text-s);
  list-style: none;
}
.nav-links li + li {
  margin-top: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a[aria-current='page'] {
  text-decoration: underline;
}
.nav-links .nav-cta {
  padding-inline: var(--space-s);
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.nav-links .nav-cta:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  text-decoration: none;
}
.nav-links .nav-cta[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---- the page: one sheet, as corpuskit.org's feature cards (paper-soft inside a rule) ---- */
main {
  flex: 1 0 auto;
  padding-block: var(--section-y-s);
  overflow-wrap: anywhere;
}
.sheet {
  max-width: var(--column);
  margin-inline: auto;
  padding: clamp(var(--space-l), 5vw, var(--space-2xl));
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* Ops lists need the width their tables take. */
.sheet:has(table) {
  max-width: none;
}
.sheet > :first-child {
  margin-top: 0;
}
.sheet > :last-child {
  margin-bottom: 0;
}

/* The control plane's own pages (forms, setup, members, ops) keep their sizes here; the public
   site sets its own under .page, below. */
h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
}
h1 {
  margin: 0 0 var(--space-m);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: -0.04em;
}
h2 {
  margin: 2.5rem 0 var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
  font-size: clamp(1.4rem, 1.25rem + 0.75vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: var(--leading-title);
  letter-spacing: -0.02em;
}

p {
  max-width: var(--measure);
  margin: 0 0 var(--space-s);
}
strong {
  font-weight: 600;
}
ul,
ol {
  margin: 0 0 var(--space-s);
  padding-left: var(--space-l);
}
li + li {
  margin-top: var(--space-2xs);
}
code {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: 0.875em;
}

.muted {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* ---- forms ---- */
form {
  max-width: 36rem;
  margin: var(--space-l) 0;
}
label {
  display: block;
  margin: var(--space-m) 0 var(--space-2xs);
  font-weight: 600;
}
form > label:first-child,
form > input[type='hidden'] + label {
  margin-top: 0;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--field);
  border-radius: var(--radius);
  font: inherit;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--ink-soft);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--blue);
  outline-offset: 2px;
}
input[aria-invalid='true'],
select[aria-invalid='true'] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
/* A consent checkbox inside its own label. */
label:has(> input[type='checkbox']) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  font-weight: 400;
}
input[type='checkbox'] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0.15em 0 0;
  padding: 0;
  accent-color: var(--blue);
}
/* Hints sit under their field and are tied to it with aria-describedby. */
[id$='-hint'] {
  margin: var(--space-2xs) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-s);
}

/* D25: where documents are stored on /start. Radio cards when several regions are offered,
   fixed text when one is. Scoped to .regions. Spaced as a field: its legend sits as a label
   does, and each card's radio lines up with the text in the fields above it. */
.regions {
  margin: var(--space-m) 0 0;
  padding: 0;
  border: 0;
}
.regions legend {
  margin: 0 0 var(--space-2xs);
  padding: 0;
  font-weight: 600;
}
.regions .region {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap);
  margin: var(--space-2xs) 0 0;
  padding: var(--space-xs);
  background: var(--white);
  border: 1px solid var(--field);
  border-radius: var(--radius);
  font-weight: 400;
  cursor: pointer;
}
.regions .region:has(input:checked) {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.regions input[type='radio'] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}
.region-fixed {
  margin: 0;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  margin-top: var(--space-l);
  padding: 0.7rem 1.3rem;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:hover,
.button:hover {
  color: var(--white);
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  text-decoration: none;
}
.button {
  margin-top: var(--space-3xs);
}
/* A form that is only a button (confirm, sign out) needs no gap above it. */
form > button:first-child,
form > input[type='hidden'] + button {
  margin-top: 0;
}

/* ---- messages. Errors are announced (role="alert") and tied to their field. ---- */
.error {
  color: var(--error);
  font-weight: 600;
}
p.error {
  margin: var(--space-2xs) 0 0;
}
p.error::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: currentColor;
  vertical-align: 0.08em;
}
/* An error that stands on its own (not under a field) gets the same box as a summary. */
div.error,
.sheet > p.error {
  margin: 0 0 var(--space-l);
  padding: 0.9rem 1.1rem;
  color: var(--ink);
  background: var(--error-wash);
  border-left: 3px solid var(--error);
  border-radius: var(--radius);
  font-weight: 400;
}
.sheet > p.error::before {
  background: var(--error);
}
div.error p {
  margin: 0 0 var(--space-3xs);
  color: var(--error);
}
div.error ul {
  margin: 0;
}
form > p.error[role='alert'] {
  margin: 0 0 var(--space-2xs);
}

.notice,
p[role='status'] {
  margin: 0 0 var(--space-l);
  padding: 0.8rem 1.1rem;
  background: var(--blue-pale);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}

/* ---- setup progress and next steps ---- */
.steps,
.next {
  margin: var(--space-l) 0;
  padding-left: 2.4rem;
}
.steps li:first-child,
.next li:first-child {
  border-top: 1px solid var(--rule);
}
.steps li,
.next li {
  margin: 0;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--rule);
}
.steps li::marker,
.next li::marker {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.85em;
}
.steps .state {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.steps li[data-state='done'] {
  color: var(--ink-soft);
}
.steps li[data-state='done']::marker,
.steps li[data-state='current']::marker,
.next li::marker {
  color: var(--blue);
}
.steps li[data-state='done'] .state {
  color: var(--blue);
}
.steps li[data-state='current'] {
  font-weight: 600;
}
.steps li[data-state='current'] .state {
  color: var(--blue-dark);
  font-weight: 500;
}
.steps li[data-state='current']::after {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.6rem;
  border-radius: 50%;
  background: var(--blue);
  vertical-align: 0.12em;
  animation: working 1.6s ease-in-out infinite;
}
.steps li[data-state='waiting'] {
  color: var(--ink-soft);
}
@keyframes working {
  50% {
    opacity: 0.25;
  }
}
.next h3 {
  font-size: 1.15rem;
}
.next p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
}

/* ---- ops ---- */
/* A wide table scrolls inside its frame, never the page. `position` keeps the visually hidden
   labels in its rows inside the frame too. */
.table-wrap {
  position: relative;
  margin: var(--space-s) 0 var(--space-l);
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--text-s);
  line-height: var(--leading-ui);
}
caption {
  padding: 0.7rem var(--space-s);
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
th,
td {
  overflow-wrap: break-word;
  padding: 0.7rem var(--space-s);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
/* As corpuskit.org's docs sidebar headings. */
th {
  color: var(--ink-soft);
  background: var(--paper-deep);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td form {
  display: inline-block;
  max-width: none;
  margin: 0 0.4rem 0.4rem 0;
}
td button {
  min-height: 2.25rem;
  margin: 0;
  padding: 0.35rem 0.8rem;
  color: var(--blue-dark);
  background: var(--white);
  border-color: var(--field);
  font-size: var(--text-s);
}
td button:hover {
  color: var(--blue-dark);
  background: var(--blue-pale);
  border-color: var(--blue);
}
/* Links in an ops table row and a domain's actions; the public site's .actions is below. */
.sheet .actions a {
  display: inline-block;
  margin: 0 0.9rem 0.35rem 0;
}
nav[aria-label] p a {
  margin-left: var(--space-s);
}
dl {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-l);
  margin: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  background: var(--paper-deep);
  border-radius: var(--radius);
}
dt {
  font-weight: 600;
}
dd {
  margin: 0;
}

/* ---- custom domains (D24): copyable DNS values, and each domain's actions on one line ---- */
h4 {
  margin: var(--space-l) 0 var(--space-3xs);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
}
input[readonly] {
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: var(--text-s);
}
.domain + .domain {
  margin-top: var(--space-xl);
}
.domain .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  margin: var(--space-m) 0 0;
}
.domain .actions form {
  margin: 0;
}

/*
 * ---- footer: what CorpusKit Cloud is and who runs it, D20 beneath it, the links beside them, and
 * the Progress trademark notice under a rule. ----
 */
.site-footer {
  padding-block: var(--space-xl) var(--space-2xl);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--text-s);
  line-height: var(--leading-ui);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'about links'
    'powered links'
    'legal legal';
  gap: var(--space-2xs) var(--space-xl);
  align-items: start;
}
.footer-about {
  grid-area: about;
}
.footer-grid > nav {
  grid-area: links;
}
.footer-powered {
  grid-area: powered;
}
.footer-legal {
  grid-area: legal;
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--text-xs);
}
.site-footer p {
  max-width: none;
  margin: 0;
}
.site-footer a {
  color: var(--ink-soft);
}
.site-footer a:hover {
  color: var(--ink);
}
/* Each link is a 44px target; the negative margin keeps its text on the first line's baseline. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--space-l);
  margin: calc((var(--tap) - 1lh) / -2) 0 0;
  padding: 0;
  list-style: none;
}
.footer-links li + li {
  margin-top: 0;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/*
 * ---- the public site (apps/control/src/marketing/): full-width bands in corpuskit.org's
 * editorial style, on paper, deep paper, ink and blue. Colours on the dark bands are the --on-ink
 * and --on-blue tokens above. Focus rings switch to a light colour there, to keep 3:1. Every band
 * is --section-y tall at each end; a heading is followed by --space-l, or --stack for a display
 * heading, and the blocks inside a band are --stack or --stack-l apart. ----
 */
main.page {
  padding-block: 0;
  overflow-wrap: break-word;
}
.page h2 {
  margin: 0 0 var(--space-l);
  padding-top: 0;
  border-top: 0;
  font-size: var(--text-4xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.page h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}
.page .display {
  margin-bottom: var(--stack);
  font-size: var(--text-5xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.page ul[class],
.page ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page ul[class] > li,
.page ol[class] > li {
  margin: 0;
}
/* Layout lists are plain here; the global dl card is for the ops pages. */
.page dl {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.lead {
  font-size: var(--text-l);
}
.fine {
  color: var(--ink-soft);
  font-size: var(--text-s);
}
.nowrap {
  white-space: nowrap;
}
/* A link that stands alone, not in a sentence: bold, with a 44px target. */
.more {
  margin: var(--space-s) 0 0;
  font-weight: 600;
}
.more a,
.text-link,
.next-step > a:last-child:not(.button) {
  display: inline-block;
  padding-block: calc((var(--tap) - 1lh) / 2);
}

.band {
  padding-block: var(--section-y);
}
.band-rule,
.band-top,
.page-intro + .band {
  border-top: 1px solid var(--rule);
}
/* A short band (data residency, About Noice), and the first band under a page's heading: less
   air, since a rule or a change of colour already separates them. A band that opens with a
   ledger (/security) lets the ledger's own ink rule do that, instead of a second rule above it. */
.band-s {
  padding-block: var(--section-y-s);
}
.band-top {
  padding-top: var(--section-y-s);
}
.page-intro + .band-ledger {
  padding-top: 0;
  border-top: 0;
}
.band-deep {
  background: var(--paper-deep);
}
.band-ink {
  background: var(--ink);
  color: var(--paper-soft);
}
.band-ink h2,
.band-ink h3 {
  color: var(--paper-soft);
}
.band-ink p,
.band-ink li {
  color: var(--on-ink);
}
.band-ink a {
  color: var(--on-ink-link);
}
.band-ink a:hover {
  color: var(--white);
}
.band-ink :focus-visible {
  outline-color: var(--on-ink-link);
}
.band-blue {
  background: var(--blue);
  color: var(--white);
}
.band-blue h2,
.band-blue h3,
.band-blue a {
  color: var(--white);
}
.band-blue p,
.band-blue li {
  color: var(--blue-pale);
}
.band-blue :focus-visible {
  outline-color: var(--white);
}

/* ---- buttons and links ---- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-xl);
  margin: var(--space-xl) 0 var(--space-s);
}
.actions .button {
  margin: 0;
}
.button-large {
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  font-size: var(--text-m);
}
.button-quiet {
  color: var(--blue-dark);
  background: transparent;
  border-color: var(--field);
}
.button-quiet:hover {
  color: var(--blue-dark);
  background: var(--blue-pale);
  border-color: var(--blue);
}
.text-link {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.text-link::after {
  content: ' \2192';
  content: ' \2192' / '';
}
.text-link:hover {
  text-decoration-thickness: 2px;
}

/* corpuskit.org's highlighter and citation mark, from its hero. */
.highlight {
  margin-inline: -0.04em;
  padding-inline: 0.08em;
  background-image: linear-gradient(
    -0.7deg,
    transparent 6%,
    var(--blue-pale) 8%,
    var(--blue-pale) 91%,
    transparent 93%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cite {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.1em 0.4em;
  border: 1px solid rgba(21, 93, 166, 0.4);
  border-radius: var(--radius);
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: max(0.2em, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: top;
  transform: translateY(0.25em);
}

/* ---- two columns: a heading and its copy, or copy and a figure ---- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--stack) var(--columns-gap);
  align-items: start;
}
.split-reverse {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
/* A heading beside its copy, in the ledger's proportions. */
.split-heading {
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr);
  gap: var(--space-s) var(--columns-gap);
}
.split > h2,
.split > h3 {
  margin: 0;
}
.split-main > :last-child,
.split-heading > :last-child,
.split-heading > :last-child > :last-child {
  margin-bottom: 0;
}

/* ---- a ruled ledger: a heading on the left, its copy on the right ---- */
.ledger {
  border-top: 1px solid var(--ink);
}
.ledger-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr);
  gap: var(--space-2xs) var(--columns-gap);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}
.band-deep .ledger-row {
  border-bottom-color: var(--rule-deep);
}
.page .ledger-row h2,
.page .ledger-row h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}
.ledger-row p:last-child {
  margin-bottom: 0;
}

/* ---- home: hero. The headline takes the full width, one sentence a line on a wide screen; the
   lead sits under it, with the calls to action beside it, level with its last line. ---- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  column-gap: var(--columns-gap);
  align-items: end;
  padding-block: var(--section-y) var(--stack);
}
.hero h1 {
  grid-column: 1 / -1;
  margin: 0 0 var(--stack);
  font-size: var(--text-6xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.hero-copy .lead {
  margin-bottom: var(--space-xs);
}
.hero-copy > :last-child {
  margin-bottom: 0;
}
.hero-cta .actions {
  margin: 0 0 var(--space-xs);
}
.hero-cta .fine {
  margin: 0;
}
.hero-note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-xl);
  margin-top: var(--stack-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
}
.hero-note p {
  margin: 0;
}
.hero-note strong {
  color: var(--ink);
}

@media (min-width: 60.01rem) {
  .hero-line {
    display: block;
  }
}

/* An in-page link (data residency to "Where data is stored") stops short of its heading. */
.page [id] {
  scroll-margin-top: var(--space-xl);
}

/* ---- home: who it is for ---- */
.example {
  padding: var(--card-pad);
  background: var(--blue-pale);
  border-left: 3px solid var(--blue);
}
.example-question {
  max-width: none;
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--white);
  border: 1px solid var(--rule);
  font-size: var(--text-l);
  font-weight: 600;
  line-height: var(--leading-ui);
}
.example p:last-child {
  margin-bottom: 0;
}

/* ---- home: what researchers get (ink). A question a row, its answer beside it on a wide screen
   and under it on a narrow one. The number hangs to the left of a question that wraps. ---- */
.questions {
  border-bottom: 1px solid var(--ink-rule);
}
.questions li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xs) var(--columns-gap);
  padding-block: var(--space-l);
  border-top: 1px solid var(--ink-rule);
}
.page .questions h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-2xl);
}
.questions p {
  margin: 0;
  font-size: var(--text-l);
  line-height: var(--leading-body);
}
.questions .cite,
.steps-row li::before {
  border-color: rgba(143, 192, 238, 0.5);
  color: var(--on-ink-link);
}
.questions .cite {
  flex: none;
  margin: 0;
  font-size: var(--text-xs);
  transform: translateY(-0.2em);
}
.features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--grid-gap);
  border-top: 1px solid var(--ink-rule);
}
.features li {
  padding-block: var(--space-m) var(--space-l);
}
.features li:nth-child(n + 6) {
  border-top: 1px solid var(--ink-rule);
}
.features p {
  margin: 0;
  color: var(--on-ink-soft);
  font-size: var(--text-s);
}

/*
 * ---- home: the Ask animation (marketing/motion.ts). A CorpusKit portal window in corpuskit.org's
 * light theme, measured in em from a font size set by its own width (container units), so it
 * scales like a picture and stays sharp at any density. Its resting styles are the finished
 * answer. The am-* keyframes run one 15-second loop: each part is hidden when the loop resets
 * (1 to 4.5%) and comes in at its moment, animating transform and opacity, apart from the typing,
 * the drafted lines' wipe and the highlighter (a clip and a background size, on small boxes).
 *   0 to 4.5%   the last answer fades out        33 to 46%   the answer is drafted, muted
 *   7 to 23%    the question is typed            50 to 53%   the checked answer replaces it
 *   24%         Ask is pressed                   55 to 62%   citation 1 opens its source
 *   26 to 50%   checking against the sources     62 to 72%   highlight, then High confidence
 * It starts at the empty Ask bar, runs --am-runs loops and rests on the finished answer, which
 * is also all prefers-reduced-motion shows (the reduced-motion rule at the end of this file).
 * assets/motion.js holds it while it is off screen and adds the Pause button. ----
 */
.ask-motion {
  --am-loop: 15s;
  --am-runs: 4;
  --am-start: calc(var(--am-loop) * -0.045);
  --am-ease: cubic-bezier(0.22, 1, 0.36, 1);
  container: am / inline-size;
  position: relative;
  margin: var(--stack-l) 0;
}
.am-window {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--ink-frame);
  border-radius: 6px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.34);
  color: var(--ink);
  font-family: var(--sans);
  /* 12px in a phone's column, 17px at full width. */
  font-size: clamp(0.75rem, 0.5rem + 0.95cqi, 1.0625rem);
  line-height: var(--leading-ui);
  text-align: left;
}
.ask-motion .am-frame p {
  max-width: none;
  margin: 0;
  color: inherit;
}

/* The browser's title bar. The right end is kept for motion.js's Pause button. */
.am-chrome {
  display: flex;
  align-items: center;
  gap: 1em;
  min-height: var(--tap);
  padding: 0 6.5rem 0 1em;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule-deep);
}
.am-lights {
  display: flex;
  flex: none;
  gap: 0.45em;
}
.am-lights span {
  width: 0.625em;
  height: 0.625em;
  border-radius: var(--pill);
  background: var(--rule-deep);
}
.am-address {
  flex: 0 1 24em;
  min-width: 0;
  margin-inline: auto;
  padding: 0.3em 1.25em;
  overflow: hidden;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.75em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The portal's own masthead: the CorpusKit wordmark, as the docs portal carries it. */
.am-masthead {
  display: flex;
  align-items: center;
  gap: 0 0.9em;
  padding: 0.8em 1em;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--rule);
}
.am-brand {
  font-family: var(--display);
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}
.am-brand span {
  margin-left: 0.08em;
  color: var(--blue);
}
.am-product {
  padding-left: 0.9em;
  border-left: 1px solid var(--rule);
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.625em;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
}
.am-tabs {
  display: flex;
  gap: 1.5em;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.875em;
}
.am-tabs span:not(.am-tab-current) {
  display: none;
}
.am-tab-current {
  color: var(--ink);
  text-decoration: underline 2px var(--blue);
  text-underline-offset: 0.5em;
}

.am-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'ask' 'sources' 'answer' 'source';
  gap: 0.875em;
  padding: 1em 1em 1.25em;
}

/* The Ask bar: the question typed a character at a time into a focused field. */
.am-ask {
  grid-area: ask;
  display: flex;
  gap: 0.5em;
}
.am-field {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 3em;
  padding: 0 0.875em;
  background: var(--white);
  border: 1px solid var(--field);
  border-radius: var(--radius);
}
.am-field::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  opacity: 0;
}
.am-typed {
  position: relative;
  font-family: var(--mono);
  font-size: 0.9375em;
  white-space: nowrap;
}
.am-q {
  display: inline-block;
}
.am-caret {
  position: absolute;
  top: 0.05em;
  bottom: 0.05em;
  left: -1px;
  width: 2px;
  background: var(--blue);
  opacity: 0;
}
.am-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--blue);
  opacity: 0;
  transform-origin: left;
}
.am-send {
  display: inline-flex;
  align-items: center;
  padding: 0 1.1em;
  background: var(--blue);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 0.9375em;
  font-weight: 600;
}

/* The sources the portal found, and (over the answer) what it is doing with them. */
.am-sources {
  grid-area: sources;
  display: grid;
  gap: 0.45em;
}
.am-label,
.ask-motion .am-frame .am-state {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.75em;
}
.ask-motion .am-frame .am-state {
  display: grid;
  margin-bottom: 0.7em;
}
.am-state > span {
  grid-area: 1 / 1;
}
.am-checking {
  opacity: 0;
}
.am-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.am-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.7em 0.3em 0.4em;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.8125em;
  white-space: nowrap;
}
.am-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--blue-pale);
  opacity: 0;
}

/* The answer, a sentence a line, with corpuskit.org's citation marks. */
.am-answer {
  grid-area: answer;
  min-width: 0;
}
.ask-motion .am-frame .am-line {
  margin-bottom: 0.55em;
  font-size: 1.0625em;
  line-height: 1.5;
}
.am-end {
  white-space: nowrap;
}
.am-cite {
  position: relative;
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.2em 0.42em;
  border: 1px solid rgba(21, 93, 166, 0.4);
  border-radius: 3px;
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-size: max(0.6875em, 0.5625rem);
  font-weight: 500;
  line-height: 1;
  vertical-align: 0.2em;
}
.am-chip .am-cite,
.am-source-head .am-cite {
  margin: 0;
  vertical-align: baseline;
}
/* The citation that is opened: filled, as the portal marks the one whose source is showing. */
.am-cite-open::after {
  content: attr(data-n);
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--blue);
  color: var(--white);
}
.ask-motion .am-frame .am-confidence {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: fit-content;
  margin: 0.9em 0 0 auto;
  padding: 0.4em 0.75em 0.4em 0.55em;
  background: var(--blue-pale);
  border: 1px solid rgba(21, 93, 166, 0.35);
  border-radius: var(--radius);
  color: var(--blue-dark);
  font-size: 0.8125em;
  font-weight: 600;
  line-height: 1.2;
}
.am-tick {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.am-tick path {
  stroke-dasharray: 1;
}

/* The source citation 1 opens, at the passage the answer used. */
.am-source {
  --am-enter: translateY(1em);
  grid-area: source;
  align-self: start;
  padding: 1em 1.125em 1.125em;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(45, 39, 27, 0.08);
}
.ask-motion .am-frame .am-source-head {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--display);
  font-size: 1.0625em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ask-motion .am-frame .am-source-meta {
  margin-top: 0.35em;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.6875em;
}
.ask-motion .am-frame .am-source-section {
  margin-top: 0.9em;
  font-size: 0.875em;
  font-weight: 600;
}
.ask-motion .am-frame .am-passage {
  margin-top: 0.3em;
  color: var(--ink-soft);
  font-size: 0.875em;
  line-height: 1.55;
}
/* corpuskit.org's highlighter. Unbroken across lines, so it sweeps the first line, then the next. */
.am-mark {
  color: var(--ink);
  background-image: linear-gradient(
    -0.7deg,
    transparent 6%,
    var(--blue-pale) 8%,
    var(--blue-pale) 91%,
    transparent 93%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Wider: the portal's own proportions, the answer beside its source. */
@container am (min-width: 30rem) {
  .am-masthead {
    padding-inline: 1.5em;
  }
  .am-tabs span:not(.am-tab-current) {
    display: inline;
  }
  .am-body {
    gap: 1em;
    padding: 1.5em 1.5em 1.75em;
  }
}
@container am (min-width: 52rem) {
  .am-body {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: 'ask ask' 'sources sources' 'answer source';
    gap: 1.25em 2.5em;
    padding: 2em 2.5em 2.25em;
  }
  .am-sources {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1em;
  }
  .am-source {
    --am-enter: translateX(2em);
  }
}

/* The Pause button motion.js adds: a 44px target on the title bar, over the window. */
.ask-motion .am-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  gap: var(--space-2xs);
  min-height: var(--tap);
  margin: 0;
  padding: 0 var(--space-s);
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0 5px 0 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
}
.ask-motion .am-toggle:hover {
  color: var(--ink);
  background: rgba(28, 28, 25, 0.07);
}
.ask-motion .am-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -4px;
}
.am-toggle[hidden] {
  display: none;
}
/* Two bars to pause; a triangle to play or replay. */
.am-toggle::before {
  content: '';
  width: 0.625rem;
  height: 0.6875rem;
  border-inline: 3px solid currentColor;
}
.ask-motion:is([data-state='paused'], [data-state='ended']) .am-toggle::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The loop. */
.am-q,
.am-caret,
.am-field::after,
.am-progress,
.am-send,
.am-checking,
.am-checked,
.am-label,
.am-chip,
.am-chip::after,
.am-line,
.am-line .am-cite,
.am-cite-open::after,
.am-source,
.am-mark,
.am-confidence,
.am-tick path {
  animation-duration: var(--am-loop);
  animation-timing-function: var(--am-ease);
  animation-delay: var(--am-start);
  animation-iteration-count: var(--am-runs);
  animation-fill-mode: both;
}
/* steps(): one per character of ASK_QUESTION, which is 24 long. */
.am-q {
  animation-name: am-type;
}
@keyframes am-type {
  0%,
  1% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  4% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
  4.5% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  5%,
  7% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(24, end);
  }
  23%,
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
.am-caret {
  animation-name: am-caret;
}
@keyframes am-caret {
  0%,
  4.5% {
    opacity: 0;
    transform: translateX(0);
  }
  5% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: step-end;
  }
  5.8% {
    opacity: 0;
    transform: translateX(0);
    animation-timing-function: step-end;
  }
  6.5%,
  7% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: steps(24, end);
  }
  23% {
    opacity: 1;
    transform: translateX(24ch);
    animation-timing-function: step-end;
  }
  24.5%,
  100% {
    opacity: 0;
    transform: translateX(24ch);
  }
}
.am-field::after {
  animation-name: am-focus;
}
@keyframes am-focus {
  0%,
  4.5% {
    opacity: 0;
  }
  5.5%,
  24% {
    opacity: 1;
  }
  26%,
  100% {
    opacity: 0;
  }
}
.am-send {
  animation-name: am-press;
}
@keyframes am-press {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4.5%,
  22% {
    opacity: 0.45;
    transform: none;
  }
  23%,
  23.6% {
    opacity: 1;
    transform: none;
  }
  24.2% {
    opacity: 1;
    transform: scale(0.94);
  }
  25.4%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.am-progress {
  animation-name: am-progress;
}
@keyframes am-progress {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  26% {
    opacity: 1;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
  53%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
.am-checking {
  animation-name: am-checking;
}
@keyframes am-checking {
  0%,
  25.5% {
    opacity: 0;
    transform: translateY(0.3em);
  }
  28%,
  49.5% {
    opacity: 1;
    transform: none;
  }
  52%,
  100% {
    opacity: 0;
    transform: translateY(-0.3em);
  }
}
.am-checked {
  animation-name: am-checked;
}
@keyframes am-checked {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4% {
    opacity: 0;
    transform: none;
  }
  4.5%,
  50.5% {
    opacity: 0;
    transform: translateY(0.3em);
  }
  53%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.am-label,
.am-chip-1 {
  animation-name: am-chip-1;
}
.am-chip-2 {
  animation-name: am-chip-2;
}
@keyframes am-chip-1 {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4% {
    opacity: 0;
    transform: none;
  }
  4.5%,
  28% {
    opacity: 0;
    transform: translateY(0.4em);
  }
  31%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes am-chip-2 {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4% {
    opacity: 0;
    transform: none;
  }
  4.5%,
  30% {
    opacity: 0;
    transform: translateY(0.4em);
  }
  33%,
  100% {
    opacity: 1;
    transform: none;
  }
}
/* Each source glows twice while it is checked. */
.am-chip::after {
  animation-timing-function: ease-in-out;
}
.am-chip-1::after {
  animation-name: am-glow-1;
}
.am-chip-2::after {
  animation-name: am-glow-2;
}
@keyframes am-glow-1 {
  0%,
  32% {
    opacity: 0;
  }
  35.5% {
    opacity: 1;
  }
  39.5% {
    opacity: 0.1;
  }
  43% {
    opacity: 1;
  }
  48%,
  100% {
    opacity: 0;
  }
}
@keyframes am-glow-2 {
  0%,
  34% {
    opacity: 0;
  }
  37.5% {
    opacity: 1;
  }
  41.5% {
    opacity: 0.1;
  }
  45% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
/* Drafted in muted ink, top line first; full ink once the check has run. */
.am-line-1 {
  animation-name: am-line-1;
}
.am-line-2 {
  animation-name: am-line-2;
}
.am-line-3 {
  animation-name: am-line-3;
}
@keyframes am-line-1 {
  0%,
  1% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  4% {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  4.5%,
  33% {
    opacity: 0;
    transform: translateY(0.4em);
    clip-path: inset(0 0 100% 0);
  }
  37%,
  50% {
    opacity: 0.5;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  53%,
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes am-line-2 {
  0%,
  1% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  4% {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  4.5%,
  37.5% {
    opacity: 0;
    transform: translateY(0.4em);
    clip-path: inset(0 0 100% 0);
  }
  41.5%,
  50% {
    opacity: 0.5;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  53%,
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes am-line-3 {
  0%,
  1% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  4% {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  4.5%,
  42% {
    opacity: 0;
    transform: translateY(0.4em);
    clip-path: inset(0 0 100% 0);
  }
  46%,
  50% {
    opacity: 0.5;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  53%,
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}
/* Each citation mark lands as its sentence ends. The line's own fade carries it out. */
.am-line-1 .am-cite {
  animation-name: am-cite-1;
}
.am-line-2 .am-cite {
  animation-name: am-cite-2;
}
.am-line-3 .am-cite {
  animation-name: am-cite-3;
}
@keyframes am-cite-1 {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4.5%,
  36% {
    opacity: 0;
    transform: scale(0.6);
  }
  38%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes am-cite-2 {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4.5%,
  40.5% {
    opacity: 0;
    transform: scale(0.6);
  }
  42.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes am-cite-3 {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4.5%,
  45% {
    opacity: 0;
    transform: scale(0.6);
  }
  47%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.am-cite-open::after {
  animation-name: am-open;
}
@keyframes am-open {
  0%,
  1% {
    opacity: 1;
  }
  4%,
  55% {
    opacity: 0;
  }
  57%,
  100% {
    opacity: 1;
  }
}
.am-source {
  animation-name: am-source;
}
@keyframes am-source {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4% {
    opacity: 0;
    transform: none;
  }
  4.5%,
  56% {
    opacity: 0;
    transform: var(--am-enter);
  }
  62%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.am-mark {
  animation-name: am-mark;
}
@keyframes am-mark {
  0%,
  1% {
    background-size: 100% 100%;
  }
  4.5%,
  62% {
    background-size: 0% 100%;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  68%,
  100% {
    background-size: 100% 100%;
  }
}
.am-confidence {
  animation-name: am-confidence;
}
@keyframes am-confidence {
  0%,
  1% {
    opacity: 1;
    transform: none;
  }
  4% {
    opacity: 0;
    transform: none;
  }
  4.5%,
  68% {
    opacity: 0;
    transform: translateY(0.4em) scale(0.96);
  }
  72%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.am-tick path {
  animation-name: am-tick;
}
@keyframes am-tick {
  0%,
  1% {
    stroke-dashoffset: 0;
  }
  4.5%,
  69% {
    stroke-dashoffset: 1;
  }
  72.5%,
  100% {
    stroke-dashoffset: 0;
  }
}
/* Held off screen and by the Pause button; Replay drops the animations for one style pass. */
.ask-motion:is([data-offscreen], [data-state='paused']) *,
.ask-motion:is([data-offscreen], [data-state='paused']) *::before,
.ask-motion:is([data-offscreen], [data-state='paused']) *::after {
  animation-play-state: paused;
}
.ask-motion[data-state='restart'] *,
.ask-motion[data-state='restart'] *::before,
.ask-motion[data-state='restart'] *::after {
  animation-name: none !important;
}

/* ---- home: Hosted or Managed (blue) ---- */
.cloud {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--stack) var(--columns-gap);
}
.cloud-intro > :last-child {
  margin-bottom: 0;
}
.cloud-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-s);
}
/* Title, price and list line up across the cards. */
.cloud-plan {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: var(--card-pad);
  background: var(--blue-card);
  border: 1px solid var(--on-blue-frame);
  border-radius: var(--radius);
}
.page .cloud-plan h3 {
  font-size: var(--text-2xl);
}
.cloud-plan .price {
  margin: 0 0 var(--space-m);
}
.cloud-plan .price strong {
  color: var(--white);
  font-family: var(--display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.cloud-plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cloud-plan li {
  padding-block: var(--space-xs);
  border-top: 1px solid var(--on-blue-rule);
  font-size: var(--text-s);
  line-height: var(--leading-ui);
}
.cloud-plan li:last-child {
  padding-bottom: 0;
}
.cloud-note {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--on-blue-rule);
}
.cloud-note a {
  margin-left: var(--space-2xs);
  font-weight: 600;
}

/* ---- home: web addresses ---- */
.addresses {
  display: grid;
  gap: var(--space-m);
}
.address-bar {
  display: block;
  padding: var(--space-s) var(--space-m);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  box-shadow: 0 14px 35px rgba(45, 39, 27, 0.08);
  color: var(--ink-soft);
  font-family: var(--mono);
  /* As a browser's address bar: small on a phone, large on a desktop. */
  font-size: clamp(var(--text-xs), 0.74rem + 0.45vw, 1.125rem);
  overflow-wrap: anywhere;
}
.address-bar strong {
  color: var(--ink);
  font-weight: 500;
}
.address-note {
  display: block;
  margin-top: var(--space-2xs);
  padding-left: var(--space-m);
  color: var(--ink-soft);
  font-size: var(--text-s);
}

/* ---- home: open source ---- */
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--stack) var(--columns-gap);
  align-items: start;
}
.page .statement {
  margin: 0;
  font-size: var(--text-5xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.statement-copy h3 {
  margin-top: var(--space-xl);
}
.statement-copy p:last-child {
  margin-bottom: 0;
}

/* ---- home: getting started ---- */
.closing {
  padding-block: var(--section-y) var(--section-y-s);
  border-top: 1px solid var(--rule);
}
.next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.next-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--card-pad);
  background: var(--paper);
}
.next-step-main {
  background: var(--paper-soft);
}
.page .next-step h3 {
  font-size: var(--text-2xl);
}
.next-step p {
  color: var(--ink-soft);
}
.next-step > :last-child {
  margin-top: auto;
  font-weight: 600;
}
.signin-note {
  margin: var(--space-xl) 0 0;
}

/* ---- pricing, security and privacy: the page heading ---- */
.page-intro {
  padding-block: var(--section-y) var(--section-y-s);
}
.page-intro h1 {
  margin: 0 0 var(--space-l);
  font-size: var(--text-6xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.page-intro > :last-child {
  margin-bottom: 0;
}
.section-head {
  max-width: 48rem;
  margin-bottom: var(--stack);
}
.section-head > :last-child {
  margin-bottom: 0;
}

/* ---- pricing: where documents are stored, beside the plans. A reason to choose CorpusKit Cloud,
   so it is set as the home page's example is (pale blue, a blue rule) under a solid label: white
   on blue at 6.3:1, the text ink on pale blue at 14:1. ---- */
.page .residency-note {
  max-width: none;
  margin: var(--space-l) 0 0;
  padding: var(--space-s) var(--space-m);
  background: var(--blue-pale);
  border-left: 3px solid var(--blue);
  line-height: var(--leading-ui);
}
.badge {
  display: inline-block;
  margin-right: var(--space-2xs);
  padding: 0.1em var(--space-2xs);
  background: var(--blue);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---- pricing: what you pay for, in three parts ---- */
.cost-sum {
  --plus: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--stack);
  border-top: 1px solid var(--ink);
}
.cost-sum li {
  position: relative;
  padding: var(--space-m) var(--grid-gap) 0 0;
}
.cost-sum li + li {
  padding-left: var(--grid-gap);
  border-left: 1px solid var(--rule);
}
/* A plus sign on the rule between two parts. */
.cost-sum li + li::before {
  content: '+';
  position: absolute;
  top: var(--space-m);
  left: calc(var(--plus) / -2);
  width: var(--plus);
  height: var(--plus);
  background: var(--paper);
  color: var(--blue);
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--plus);
  text-align: center;
}
.cost-label {
  margin: 0 0 var(--space-3xs);
  font-weight: 600;
}
.cost {
  margin: 0 0 var(--space-2xs);
  font-family: var(--display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.cost span {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--text-s);
  font-weight: 400;
  letter-spacing: 0;
}
.cost-sum p:last-child {
  margin: 0;
  color: var(--ink-soft);
}

/*
 * ---- pricing: the Cloud plans. Each plan is a column of nine rows (its head, seven facts and its
 * button) that line up across the plans (subgrid), on a phone too, where the plans scroll
 * sideways (the card carousels, below). ----
 */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-s);
}
.plan {
  display: grid;
  grid-row: span 9;
  grid-template-rows: subgrid;
  row-gap: 0;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.plan-trial {
  border-color: var(--blue);
  box-shadow: inset 0 4px 0 var(--blue);
}
.plan-head {
  padding: var(--card-pad) var(--card-pad) var(--space-m);
}
.page .plan-head h3,
.page .self-hosted-head h3,
.page .licence h3 {
  margin: 0;
  font-size: var(--text-2xl);
}
.plan-kind {
  margin: var(--space-3xs) 0 var(--space-s);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.plan-price {
  margin: 0;
}
.plan-price strong {
  font-family: var(--display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.plan-per {
  margin: var(--space-3xs) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-s);
}
.plan dl {
  display: grid;
  grid-row: span 7;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
}
.plan dl > div,
.facts > div {
  padding: var(--space-xs) var(--card-pad);
  border-top: 1px solid var(--rule);
}
.plan dt,
.facts dt {
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-ui);
}
.plan dd,
.facts dd {
  margin: 0;
  line-height: var(--leading-ui);
}
.plan-cta {
  padding: var(--space-m) var(--card-pad) var(--card-pad);
  border-top: 1px solid var(--rule);
}
.plan-cta .button {
  width: 100%;
  margin: 0;
}
.self-hosted {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2.2fr);
  gap: var(--space-s) var(--columns-gap);
  margin-top: var(--space-s);
  padding: var(--card-pad);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.self-hosted-head .plan-kind {
  margin-bottom: var(--space-2xs);
}
.self-hosted-copy > p {
  margin-bottom: var(--space-2xs);
}
.self-hosted .facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  column-gap: var(--space-xl);
}
.self-hosted .facts > div {
  padding-inline: 0;
}

/* ---- pricing: setup as a price list ---- */
.price-list {
  border-top: 1px solid var(--ink);
}
.price-list li {
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule-deep);
}
.price-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-s);
}
.page .price-line h3 {
  margin: 0;
  font-size: var(--text-2xl);
}
.price-tag {
  margin: 0;
  color: var(--ink-soft);
}
.price-tag strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}
.price-list li > p:last-child {
  margin: var(--space-2xs) 0 0;
  color: var(--ink-soft);
}

/*
 * ---- pricing: the platform licence. Starter and Pro sit side by side with their facts lined up
 * (subgrid: title, price, list price, then six facts), the notes beside them. ----
 */
.licences {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr);
  gap: var(--stack) var(--columns-gap);
  align-items: start;
}
.licence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-s);
}
.licence {
  display: grid;
  grid-row: span 9;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: var(--card-pad) var(--card-pad) var(--space-2xs);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.licence .plan-per {
  margin-bottom: var(--space-s);
}
.licence .facts {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
}
.licence .facts > div {
  padding-inline: 0;
}
.licence-notes h3:not(:first-child) {
  margin-top: var(--space-xl);
}
.licence-notes > :last-child {
  margin-bottom: 0;
}
.usage {
  margin-top: var(--stack-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

/* ---- pricing: how buying works (ink) ---- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l) var(--grid-gap);
  counter-reset: step;
}
.steps-row li {
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink-rule);
  counter-increment: step;
}
.steps-row li::before {
  content: counter(step);
  display: inline-block;
  margin-bottom: var(--space-s);
  padding: 0.15em 0.5em;
  border: 1px solid;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.steps-row p {
  margin: 0;
}
.steps-note {
  margin: var(--space-xl) 0 0;
}
.cost-more {
  margin-top: var(--stack-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--ink-rule);
}
.page .cost-more ul {
  max-width: var(--measure);
  padding-left: var(--space-m);
  list-style: square;
}
.page .cost-more li + li {
  margin-top: var(--space-xs);
}

/* ---- pricing: the closing call and the fine print ---- */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--stack) var(--columns-gap);
  align-items: start;
}
.cta-band .actions {
  margin-bottom: 0;
}
.fine-print {
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--text-s);
  line-height: var(--leading-ui);
}
.fine-print p:last-child {
  margin-bottom: 0;
}

/* ---- privacy: running text, and on a wide screen the sections listed beside it, held in view
   as the text scrolls, the way corpuskit.org's docs list theirs. It comes first in the page, so
   the keyboard reaches it before the text. Each link is a 44px target. ---- */
.toc {
  display: none;
}
@media (min-width: 75rem) {
  .with-toc {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--columns-gap);
    align-items: start;
  }
  .toc {
    position: sticky;
    top: var(--space-xl);
    display: block;
    max-height: calc(100vh - 2 * var(--space-xl));
    overflow-y: auto;
    font-size: var(--text-s);
    line-height: var(--leading-title);
  }
  .toc-title {
    margin: 0 0 var(--space-2xs);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: var(--text-xs);
  }
  .page .toc ol {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--rule);
    list-style: none;
  }
  .toc li + li {
    margin-top: 0;
  }
  .toc a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    margin-left: -1px;
    padding-left: var(--space-s);
    border-left: 2px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
  }
  .toc a:hover {
    border-left-color: var(--blue);
    color: var(--ink);
  }
}
.prose > * {
  max-width: var(--measure);
}
.page .prose h2 {
  margin: var(--stack) 0 var(--space-s);
  font-size: var(--text-3xl);
}
.page .prose h2:first-child {
  margin-top: 0;
}
.prose li + li {
  margin-top: var(--space-2xs);
}
.prose > :last-child {
  margin-bottom: 0;
}

/*
 * ---- card carousels: the plans on /pricing and the home page, and the licences. Markup
 * (marketing/shared.ts carousel()): .carousel[data-carousel] > .carousel-track (a focusable,
 * labelled region) > .carousel-list > the cards. On a wide screen the list is the component's own
 * grid above and nothing scrolls. Under 60rem the track scrolls sideways and snaps to each card,
 * running to the screen's edges, and each card is at least --card-min wide: on a phone the next
 * card peeks in; where the cards fit (two at 768px), they share the width and nothing scrolls.
 * Touch, trackpad and the keyboard (the track takes focus) scroll it with no script;
 * assets/carousel.js adds the dots above it when it can scroll. ----
 */
.carousel-dots {
  display: none;
}

@media (max-width: 60rem) {
  .carousel-track {
    --card-min: min(18rem, 100vw - 2 * var(--gutter) - 3.5rem);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar {
    display: none;
  }
  .carousel-track:focus-visible {
    outline-offset: -2px;
  }
  .carousel-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--card-min), 1fr);
    width: min-content;
    min-width: 100%;
  }
  .carousel-list > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Above the cards, at the right, the last mark flush with the cards' edge. */
  .carousel[data-scrollable] .carousel-dots {
    display: flex;
    justify-content: flex-end;
    margin: 0 calc((var(--tap) - var(--space-l)) / -2) var(--space-3xs) 0;
  }
}
@media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
  .carousel-track {
    scroll-behavior: smooth;
  }
}
/* A dot is a 44px target around an 8px mark; the card in view gets a longer, blue one. The grey
   mark is 3.2:1 on paper. */
.carousel-dots button {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.carousel-dots button::before {
  content: '';
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: var(--pill);
  background: var(--field);
  transition: width 0.2s ease, background-color 0.2s ease;
}
.carousel-dots button:hover {
  background: none;
}
.carousel-dots button:hover::before {
  background: var(--ink-soft);
}
.carousel-dots [data-current]::before,
.carousel-dots [data-current]:hover::before {
  width: var(--space-l);
  background: var(--blue);
}
/* On blue: pale marks (5.4:1), and a white one for the card in view (6.6:1). */
.band-blue .carousel-dots button::before {
  background: var(--blue-pale);
}
.band-blue .carousel-dots [data-current]::before {
  background: var(--white);
}

/* ---- the public site on narrower screens ---- */
@media (max-width: 75rem) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features li:nth-child(n + 3) {
    border-top: 1px solid var(--ink-rule);
  }
  .licences {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 60rem) {
  .hero,
  .cloud,
  .cta-band,
  .statement-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero h1 {
    margin-bottom: var(--space-xl);
  }
  .hero-cta .actions {
    margin-top: var(--space-l);
  }
  .steps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 52rem) {
  .split,
  .split-reverse,
  .split-heading,
  .questions li,
  .next-steps,
  .self-hosted {
    grid-template-columns: minmax(0, 1fr);
  }
  .cost-sum {
    grid-template-columns: minmax(0, 1fr);
  }
  .cost-sum li,
  .cost-sum li + li {
    padding: var(--space-m) 0;
    border-left: 0;
  }
  .cost-sum li:last-child {
    padding-bottom: 0;
  }
  .cost-sum li + li {
    border-top: 1px solid var(--rule);
  }
  .cost-sum li + li::before {
    top: calc(var(--plus) / -2);
    left: 0;
  }
}
@media (max-width: 44rem) {
  .ledger-row,
  .steps-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .features {
    grid-template-columns: minmax(0, 1fr);
  }
  .features li:nth-child(n + 2) {
    border-top: 1px solid var(--ink-rule);
  }
  .hero-note {
    flex-direction: column;
  }
}

/*
 * ---- small screens: the sheet runs edge to edge inside a 16px gutter, the visitor navigation
 * takes its own row, the hero's trial button spans the column and the footer stacks ----
 */
@media (max-width: 36rem) {
  main {
    padding-block: var(--space-s) var(--space-xl);
  }
  .sheet {
    padding: var(--space-l) var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0;
    border-radius: 0;
  }
  dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  dd + dt {
    margin-top: 0.6rem;
  }
  .masthead {
    padding-block: var(--space-xs) var(--space-3xs);
  }
  .nav-visitor {
    flex: 1 1 100%;
    gap: 0 var(--space-m);
  }
  .nav-visitor li:last-child {
    margin-left: auto;
  }
  .hero-cta .actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
  }
  .hero-cta .actions .text-link {
    align-self: flex-start;
  }
  .site-footer {
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'about'
      'powered'
      'links'
      'legal';
  }
  .footer-links {
    justify-content: flex-start;
    margin: 0;
  }
}

/*
 * A phone shows one plan or licence at a time, so their rows need not line up with cards out of
 * view: each card takes its own height, and its rows sit a step closer together.
 */
@media (max-width: 36rem) {
  .plans,
  .licence-list {
    align-items: start;
  }
  .plan,
  .licence {
    grid-row: auto;
    grid-template-rows: none;
  }
  .plan dl,
  .licence .facts {
    display: block;
  }
  .plan-head {
    padding-bottom: var(--space-s);
  }
  .plan dl > div,
  .facts > div {
    padding-block: var(--space-2xs);
  }
  .plan-kind {
    margin-bottom: var(--space-xs);
  }
  .plan-cta {
    padding-top: var(--space-s);
  }
}

/* Under 360px, the visitor navigation keeps to one row: its three links and the trial button
   need 266px, and a 320px screen has 288. */
@media (max-width: 22.5rem) {
  .nav-visitor {
    gap: 0 var(--space-2xs);
  }
  .nav-links .nav-cta {
    padding-inline: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  body::before {
    display: none;
  }
  button,
  .button {
    border: 1px solid ButtonText;
  }
  .carousel-dots button {
    border: 0;
  }
  .carousel-dots button::before {
    background: ButtonText;
  }
  .carousel-dots [data-current]::before {
    background: Highlight;
  }
}