/*
  Uncart design tokens: the one source of Uncart's visual identity.

  Who reads this file
  -------------------
  Both the website and the partner demo put this file at the top of their
  stylesheet when they build, so every colour, size and font is defined once:
    - apps/site/src/render.ts    -> /site.css      (fonts served at /fonts/)
    - apps/demo/scripts/build.ts -> /demo/demo.css (fonts served at /demo/fonts/)
  The font addresses below are relative ("fonts/..."), so each stylesheet finds
  the fonts in the folder next to it. Nothing is loaded from another website
  (font-src 'self').

  The identity, in one sentence
  -----------------------------
  An instrument, not a brochure: monochrome (black, white and greys), a
  dot-matrix display face for the few things that should read like a
  readout, monospace labels like a spec sheet, thin rules on a visible grid,
  and one red that marks the single most important thing: the measured extra
  revenue, and the button that starts a pilot.

  Type
  ----
    - Doto (Óliver Lalan, SIL Open Font License 1.1): the dot-matrix display
      face. Display only: hero numbers, page titles, step numbers, the
      wordmark. Never body text, forms or anything a reader must parse.
      Round dots (ROND 100), weight 400 to 900.
    - Archivo (Omnibus-Type, SIL OFL 1.1): every sentence, form and table.
      Variable weight 400 to 900 (900 for the website's statement
      headlines; the 400-900 range was cut from @fontsource-variable/archivo
      5.3.0 with fontTools, same characters as before).
    - Space Mono (Colophon for Google, SIL OFL 1.1): small uppercase labels,
      tags, figures in tables, times and codes. Regular 400 only.
  The files were made from the @fontsource packages (5.3.0) with fontTools:
  subset to Latin-1 plus the German and typographic extras (€, „ " ‚ ' – —
  … • ß Œ), woff2, about 41 KB together. The licences sit next to them
  (OFL-*.txt).

  Colour
  ------
  Black, white and greys do almost all the work. One accent, red:
    --mark      the measured extra revenue (the one number), and its fill
    --accent    the primary call to action (and red text where it marks money)
  States stay near-monochrome: a label says what a state is, colour does not
  have to. The WhatsApp tokens (chat-*, bubble-*) follow the real app, so the
  phone is the one coloured object in a monochrome page.
  Every text/background pair used meets WCAG AA (4.5:1); the site's build
  test checks the pairs in light and dark.

  Themes
  ------
  Light is stark white; dark is a black canvas with white dots. Dark follows
  the system (prefers-color-scheme), and a page may force one with
  data-theme="light" or data-theme="dark" on <html>.
*/

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Doto';
  src: url('fonts/doto-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks (measured against Arial / Courier New metrics), so text does not jump when the fonts arrive. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.67%;
  ascent-override: 88.98%;
  descent-override: 21.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Doto Fallback';
  src: local('Courier New'), local('Courier'), local('Liberation Mono');
  size-adjust: 99.98%;
  ascent-override: 95.02%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Space Mono Fallback';
  src: local('Courier New'), local('Courier'), local('Liberation Mono');
  size-adjust: 101.98%;
  ascent-override: 109.82%;
  descent-override: 35.4%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  /* Type families */
  --font-sans: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Doto', 'Doto Fallback', 'Courier New', monospace;
  --font-mono: 'Space Mono', 'Space Mono Fallback', 'Courier New', monospace;
  --font-code: var(--font-mono);
  /* The display face: round dots, heavy enough to read as a matrix. */
  --display-variation: 'ROND' 100;
  --display-weight: 900;

  /* Type scale (rem, 16px base); the top steps grow with the window */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem);
  --text-4xl: clamp(2.2rem, 1.3rem + 3.6vw, 4rem);
  --text-5xl: clamp(2.6rem, 1.2rem + 5.6vw, 5.5rem);
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* Labels: Space Mono, uppercase, tracked */
  --label-size: 0.6875rem;
  --label-tracking: 0.08em;

  /* Spacing (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --measure: 66ch;
  --page-max: 80rem;

  /* Radii: square; only the phone (an object) and chat bubbles are round */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-bubble: 7.5px;
  --radius-device: 40px;

  /* Rules and shadows: no soft shadows. The phone carries a hard contact edge, nothing more. */
  --rule-hair: 1px;
  --rule-strong: 2px;
  --rule-heavy: 4px;
  --shadow-none: none;
  --shadow-device: none;
  --shadow-popover: none;
  /* The dot grid: a printed matrix of 1px dots, for display surfaces only */
  --dot-size: 12px;

  /* Neutrals: stark white */
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --surface-3: #e8e8e8;
  --ink: #000000;
  --ink-2: #3b3b3b;
  --ink-3: #636363;
  --line: #e0e0e0;
  --line-strong: #000000;
  --field-line: #858585;
  --dot: #d4d4d4;

  /* The accent: red, for the one number and the one call to action */
  --accent: #d0121b;
  --accent-hover: #a10d14;
  --accent-ink: #ffffff;
  --accent-soft: #fde9ea;
  --mark: #d0121b;
  --mark-ink: #ffffff;
  --mark-soft: #fde9ea;

  /* The band: black statements, header chrome of the dashboard */
  --band: #000000;
  --band-2: #141414;
  --band-ink: #ffffff;
  --band-ink-2: #a8a8a8;
  --band-line: #2e2e2e;
  --band-dot: #2b2b2b;

  /* States: near-monochrome; the words carry the meaning */
  --ok: #1b7339;
  --ok-soft: #e8f3eb;
  --wait: #7a5500;
  --wait-soft: #f6efdf;
  --stop: #000000;
  --stop-soft: #ededed;
  --control: #595959;
  --control-soft: #ededed;
  --preview: #3b3b3b;
  --preview-soft: #f3f3f3;

  /* WhatsApp, as the shopper sees it */
  --chat-bg: #efeae2;
  --chat-head: #008069;
  --chat-head-ink: #ffffff;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --bubble-ink: #111b21;
  --bubble-meta: #54656f;
  --bubble-link: #00739f;
  --tick-read: #53bdeb;
  --note-bg: #ffeecd;
  --note-ink: #54656f;
  --phone-frame: #1a1a1a;

  --focus: #000000;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #000000;
    --surface: #0b0b0b;
    --surface-2: #151515;
    --surface-3: #202020;
    --ink: #ffffff;
    --ink-2: #c4c4c4;
    --ink-3: #9a9a9a;
    --line: #262626;
    --line-strong: #ffffff;
    --field-line: #6b6b6b;
    --dot: #2a2a2a;

    --accent: #ff4b52;
    --accent-hover: #ff8085;
    --accent-ink: #000000;
    --accent-soft: #2b0a0c;
    --mark: #ff4b52;
    --mark-ink: #000000;
    --mark-soft: #2b0a0c;

    --band: #0b0b0b;
    --band-2: #151515;
    --band-ink: #ffffff;
    --band-ink-2: #a3a3a3;
    --band-line: #2e2e2e;
    --band-dot: #262626;

    --ok: #6fd393;
    --ok-soft: #0f2416;
    --wait: #e9b75c;
    --wait-soft: #2a210d;
    --stop: #ffffff;
    --stop-soft: #202020;
    --control: #a6a6a6;
    --control-soft: #202020;
    --preview: #c4c4c4;
    --preview-soft: #151515;

    --chat-bg: #0b141a;
    --chat-head: #1f2c34;
    --chat-head-ink: #e9edef;
    --bubble-in: #1f2c34;
    --bubble-out: #005c4b;
    --bubble-ink: #e9edef;
    --bubble-meta: #c3ccd1;
    --bubble-link: #6cc9f0;
    --tick-read: #53bdeb;
    --note-bg: #1d282f;
    --note-ink: #c3ccd1;
    --phone-frame: #3a3a3a;

    --focus: #ffffff;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #000000;
  --surface: #0b0b0b;
  --surface-2: #151515;
  --surface-3: #202020;
  --ink: #ffffff;
  --ink-2: #c4c4c4;
  --ink-3: #9a9a9a;
  --line: #262626;
  --line-strong: #ffffff;
  --field-line: #6b6b6b;
  --dot: #2a2a2a;

  --accent: #ff4b52;
  --accent-hover: #ff8085;
  --accent-ink: #000000;
  --accent-soft: #2b0a0c;
  --mark: #ff4b52;
  --mark-ink: #000000;
  --mark-soft: #2b0a0c;

  --band: #0b0b0b;
  --band-2: #151515;
  --band-ink: #ffffff;
  --band-ink-2: #a3a3a3;
  --band-line: #2e2e2e;
  --band-dot: #262626;

  --ok: #6fd393;
  --ok-soft: #0f2416;
  --wait: #e9b75c;
  --wait-soft: #2a210d;
  --stop: #ffffff;
  --stop-soft: #202020;
  --control: #a6a6a6;
  --control-soft: #202020;
  --preview: #c4c4c4;
  --preview-soft: #151515;

  --chat-bg: #0b141a;
  --chat-head: #1f2c34;
  --chat-head-ink: #e9edef;
  --bubble-in: #1f2c34;
  --bubble-out: #005c4b;
  --bubble-ink: #e9edef;
  --bubble-meta: #c3ccd1;
  --bubble-link: #6cc9f0;
  --tick-read: #53bdeb;
  --note-bg: #1d282f;
  --note-ink: #c3ccd1;
  --phone-frame: #3a3a3a;

  --focus: #ffffff;
  color-scheme: dark;
}

/*
  What this file is: the website's own stylesheet.

  The font files and the shared tokens come first, from Uncart's design
  tokens (design/tokens.css at the top of the repository), which the build
  puts in front of this file in /site.css (apps/site/src/render.ts). The
  website then sets its own look on top: direction C, "Statement",
  approved by the founder in October 2026.

  The look, in one paragraph (dark theme): a black ground with white type. Headlines in
  Archivo at weight 900, huge, tightly tracked, with a grey second line where
  a headline has one. Body text in Archivo regular, light grey. Small
  uppercase labels in Space Mono. The dot-matrix Doto only for the logo, the
  "15%" and step numerals. One red, only for the call to action, money and
  the "15%". 1px rules between sections; no cards, no shadows and no rounded
  boxes, except the pill-shaped message bubbles. The home page inverts one
  section to white. A 1280px container with 32px gutters.

  Dark is the look above; light is its counterpart (see the palette). The
  visitor's system setting chooses, and the header's button overrides it.

  Order of the file: palette, base, the frame (header, footer), shared
  pieces, the home page, inner pages, the drawn components, legal documents,
  forms and the calculator, then motion preferences.

  No inline styles anywhere on the site: everything is a class here, so the
  site works under a strict Content-Security-Policy.
*/

/* ---------- Palette and sizes ---------- */

/*
  Two themes, one set of names. Light is the base (:root and an explicit
  data-theme="light"); dark follows the system (prefers-color-scheme) unless
  the visitor chose light, and an explicit data-theme="dark" (the header's
  button, client/theme.ts) forces it. The shared tokens (design/tokens.css)
  switch --ink, --mark and --focus with the same selectors, so the logo and
  the focus ring follow the theme too.

  Light is a counterpart, not an inversion: a white ground, black type, greys
  tuned for contrast on white, the darker red #d0121b (white text on the
  button), and "How it works" turns black so it stays the page's one inverted
  section. --grey is the headline's second line: large text, held at 3:1.
*/

:root,
:root[data-theme='light'] {
  --bg: #ffffff;
  --fg: #000000;
  --body: #2e2e2e;
  --muted: #4d4d4d;
  --muted-2: #6b6b6b;
  --grey: #8c8c8c;
  --pill-line: #9e9e9e;
  --pill-quiet: #d4d4d4;
  --rule: #e3e3e3;
  --rule-2: #cfcfcf;
  --field: #f5f5f5;
  --red: #d0121b;
  --red-hover: #a10d14;
  --cta-ink: #ffffff;
  --inverse-bg: #000000;
  --inverse-fg: #ffffff;
  --inverse-body: #d9d9d9;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #000000;
    --fg: #ffffff;
    --body: #d9d9d9;
    --muted: #bdbdbd;
    --muted-2: #8a8a8a;
    --grey: #5e5e5e;
    --pill-line: #5c5c5c;
    --pill-quiet: #3a3a3a;
    --rule: #262626;
    --rule-2: #3a3a3a;
    --field: #0d0d0d;
    --red: #ff4b52;
    --red-hover: #ff7a7f;
    --cta-ink: #000000;
    --inverse-bg: #ffffff;
    --inverse-fg: #000000;
    --inverse-body: #333333;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #000000;
  --fg: #ffffff;
  --body: #d9d9d9;
  --muted: #bdbdbd;
  --muted-2: #8a8a8a;
  --grey: #5e5e5e;
  --pill-line: #5c5c5c;
  --pill-quiet: #3a3a3a;
  --rule: #262626;
  --rule-2: #3a3a3a;
  --field: #0d0d0d;
  --red: #ff4b52;
  --red-hover: #ff7a7f;
  --cta-ink: #000000;
  --inverse-bg: #ffffff;
  --inverse-fg: #000000;
  --inverse-body: #333333;
  color-scheme: dark;
}

:root {
  --gutter: 20px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h3 {
  font-size: 1.375rem;
}
h4 {
  font-size: 1.0625rem;
}
p,
ul,
ol,
dl {
  margin: 0 0 1em;
}
ul,
ol {
  padding-left: 1.2em;
}
strong {
  font-weight: 800;
  color: var(--fg);
}

a {
  color: var(--fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--muted);
}

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

table {
  border-collapse: collapse;
  width: 100%;
}

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10;
  background: var(--fg);
  color: var(--bg);
  padding: 0.6rem 0.9rem;
  font-weight: 800;
}
.skip:focus {
  top: 8px;
}

/* ---------- Shared pieces ---------- */

/* Space Mono labels: small, uppercase, tracked. */
.label,
.journey-label,
.capture-where,
.lane-result,
.bubble-label,
.tag,
.footer-heading,
.tick {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.label {
  margin: 0 0 1rem;
}

/* "Not available yet": a quiet marker after the text it marks. */
.not-yet {
  display: inline-block;
  margin-left: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  white-space: nowrap;
}
.not-yet:first-child {
  margin-left: 0;
}

.fine {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted-2);
}

.text-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--pill-line);
}
.text-link:hover {
  color: var(--fg);
  text-decoration-color: var(--fg);
}

/* The call to action: the one red button. Black on red, square. */
.cta {
  display: inline-block;
  background: var(--red);
  color: var(--cta-ink);
  padding: 20px 28px;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.cta:hover {
  background: var(--red-hover);
  color: var(--cta-ink);
}
.cta:focus-visible {
  outline-color: var(--fg);
}

/* Any other button (the Log in and Install pages' actions): white, square. */
.button {
  display: inline-block;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  padding: 14px 22px;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  background: var(--bg);
  color: var(--fg);
}

/* Money and the rate: the only red besides the call to action. */
.money {
  color: var(--red);
}
.rate {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: clamp(6rem, 18vw, 13.75rem);
  line-height: 0.85;
  letter-spacing: 0;
  color: var(--red);
}

/* Step numerals, in the dot-matrix face. */
.numeral {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0;
}

.tag {
  margin-left: 0.4em;
  white-space: nowrap;
}

/* A section: a rule above and generous room. */
.sec {
  border-top: 1px solid var(--rule);
  padding: clamp(72px, 9vw + 20px, 120px) 0;
}

/* Statement headlines: huge, heavy, tight. */
.display {
  margin: 0;
  font-weight: 900;
  font-size: clamp(3.5rem, 11.2vw, 9.375rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
}
.display .line {
  display: block;
}
.grey {
  color: var(--grey);
}
.statement {
  margin: 0;
  max-width: 14ch;
  font-weight: 900;
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

/* ---------- The frame: header ---------- */

/*
  The same header on every page. Without JavaScript it is a plain list of
  links that wraps under the logo, with the two platform links inline. With
  /nav.js (<html class="js-nav">): on small screens a menu button opens a
  full-width panel; on wide screens Platforms is a small dropdown menu. Menus
  open on click, Enter or Space, never on hover alone.
*/

[hidden] {
  display: none !important;
}

.site-header {
  position: relative;
  z-index: 20;
}
.site-header .header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-lockup {
  display: block;
  height: 24px;
  width: auto;
}
.logo-ink { fill: var(--ink); }
.logo-dot { fill: var(--mark); }

.site-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  flex-basis: 100%;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a,
.sub-toggle {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  color: var(--fg);
}
/* Without JavaScript the two platform links sit in the row like the others. */
.nav-platforms {
  position: relative;
}
.sub-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}
.sub-toggle[data-current='true'],
.sub-toggle:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.sub-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.sub-toggle[aria-expanded='true'] .sub-caret {
  transform: translateY(2px) rotate(225deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cta.header-cta {
  padding: 12px 18px;
  font-size: 0.9375rem;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--fg);
}
/* A half-filled circle: the usual sign for a light/dark switch. */
.theme-toggle-icon {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* The small-screen menu button: three bars and the word "Menu". */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.menu-toggle:hover {
  border-color: var(--fg);
}
.menu-toggle-bars {
  width: 16px;
  height: 11px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}
.menu-toggle[aria-expanded='true'] .menu-toggle-bars {
  border-color: transparent;
  background: linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
}

/* Small screens, with JavaScript: the menu folds into a full-width panel. */
@media (max-width: 1099px) {
  .js-nav .site-menu {
    display: none;
  }
  .js-nav .site-menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 32px;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .js-nav .site-menu.is-open .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js-nav .site-menu.is-open .site-nav li {
    border-bottom: 1px solid var(--rule);
  }
  .js-nav .site-menu.is-open .site-nav a {
    display: block;
    padding: 16px 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.015em;
  }
  /* In the panel the two platform links are listed, not folded. */
  .js-nav .sub-toggle {
    display: none !important;
  }
  .js-nav .site-menu.is-open .sub-menu {
    flex-direction: column;
    gap: 0;
  }
  .js-nav .site-menu.is-open .nav-platforms {
    border-bottom: 0 !important;
  }
  .js-nav .site-menu.is-open .header-actions {
    justify-content: space-between;
    padding-top: 24px;
  }
}

/* Wide screens: everything in one row; with JavaScript, Platforms is a dropdown. */
@media (min-width: 1100px) {
  .brand-lockup {
    height: 30px;
  }
  .menu-toggle {
    display: none !important;
  }
  .site-menu {
    flex-basis: auto;
    flex-wrap: nowrap;
    gap: 28px;
  }
  .site-nav ul {
    flex-wrap: nowrap;
    gap: 26px;
  }
  .js-nav .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    min-width: 13rem;
    flex-direction: column;
    gap: 0;
    padding: 8px 18px;
    background: var(--bg);
    border: 1px solid var(--rule-2);
  }
  .js-nav .sub-menu.is-open {
    display: flex;
  }
  .js-nav .sub-menu a {
    display: block;
    padding: 10px 0;
  }
}

/* ---------- The frame: footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 72px 0 48px;
  color: var(--muted-2);
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 40px 32px;
}
.footer-heading {
  margin: 0 0 16px;
}
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li {
  margin: 0 0 10px;
}
.site-footer a {
  color: var(--body);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a[aria-current='page'] {
  color: var(--fg);
  text-decoration: underline;
}
.footer-base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 8px;
}
.footer-base p {
  margin: 0;
  max-width: 90ch;
}
.footer-base .partner-link {
  color: var(--muted-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
}
.legal-line {
  margin-top: 8px !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ---------- The home page ---------- */

.hero {
  padding: clamp(56px, 8vw + 16px, 120px) 0 clamp(72px, 10vw, 140px);
}
.hero-text {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(1.1875rem, 0.9rem + 1vw, 1.5rem);
  line-height: 1.45;
  color: var(--body);
}
.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.pilot-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.hero-meta {
  display: grid;
  gap: 8px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.hero-meta p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted-2);
  max-width: 80ch;
}
.platform-badges span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.5em;
}
.platform-badges a {
  color: var(--body);
  font-weight: 700;
  margin-right: 0.9em;
}

/* ---------- Dot drawings (src/graphics) ---------- */

/* Each drawing scales to its box; the dots keep the grid's proportions. */
.dots {
  display: block;
  width: 100%;
  height: auto;
}
.dots-bright {
  stroke: var(--fg);
}
.dots-money {
  stroke: var(--red);
}

/* The price: the order as dots, the fee in red, above the worked example. */
/* The order split fills the example's column edge to edge, so it lines up with the rules above and below. */
.order-split-figure {
  color: var(--muted);
  margin: 20px 0 4px;
}

/* Section 3: the example chat inside a minimal phone outline. */
.phone-outline {
  max-width: 22rem;
  margin-top: 8px;
  padding: 18px 18px 28px;
  border: 1.5px solid var(--fg);
  border-radius: 36px;
}
.phone-speaker {
  display: block;
  width: 56px;
  height: 6px;
  margin: 0 auto 16px;
  border-radius: 3px;
  background: var(--rule-2);
}
.phone-shop {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-weight: 800;
  font-size: 0.9375rem;
  text-align: center;
}

/* Near "Lock you out": a compact copy of the dashboard's conversation screen, in the dashboard's own styles. */
.dash {
  margin: 0 0 32px;
  max-width: 52rem;
}
.dash-screen {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
}
.dash-band {
  padding: 0 18px;
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 1px solid var(--band-line);
}
.dash-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding: 12px 0;
}
.dash-brand {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1;
}
.dash-shop {
  padding-left: 12px;
  border-left: 1px solid var(--band-line);
  font-weight: 600;
}
.dash-platform,
.dash-tabs,
.dash-what strong,
.dash-thread .who,
.dash-button {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dash-platform {
  padding: 1px 7px;
  border: 1px solid var(--band-line);
  color: var(--band-ink-2);
}
.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--band-line);
  color: var(--band-ink-2);
}
.dash-tabs li {
  padding: 10px 0 8px;
  border-bottom: 2px solid transparent;
}
.dash-tabs .is-current {
  color: var(--band-ink);
  border-bottom-color: var(--band-ink);
}
.dash-main {
  padding: 20px 18px 22px;
  background: var(--surface-2);
}
.dash-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
}
.dash-what {
  margin: 0 0 16px;
  padding-left: 10px;
  border-left: 2px solid var(--ink);
  color: var(--ink-2);
}
.dash-what strong {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
}
.dash-box {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.dash-heading {
  margin: 0 0 12px;
  font-weight: 700;
}
.dash-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.dash-thread li {
  max-width: 88%;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.dash-thread .inbound {
  align-self: flex-start;
}
.dash-thread .outbound {
  align-self: flex-end;
  background: var(--surface-2);
  border-color: var(--ink);
}
.dash-thread .who {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-2);
}
.dash-thread .words,
.dash-take {
  color: var(--ink);
}
.dash-take {
  margin: 0 0 12px;
}
.dash-box p:last-child {
  margin: 0;
}
.dash-button {
  display: inline-block;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
}
.dash figcaption {
  margin-top: 12px;
}

/*
  The hero. Small screens: headline, paragraph and buttons; no drawing at
  600px and below. Tablets: the basket above the headline at 60% width.
  1024px and up: a 12-column grid inside the container, the words in seven
  columns and the basket in five, centred against the whole left block.
  The basket's trailing dots fade inside its own box, so nothing leaves the
  container. The headline shrinks with the column, so each sentence keeps to
  one line, or two at most.
*/
.display-hero {
  font-size: clamp(2.5rem, 8.4vw, 4.5rem);
  line-height: 0.92;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.hero-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.hero-art {
  display: none;
  color: var(--fg);
  min-width: 0;
}
.dots-fade-1 {
  opacity: 0.55;
}
.dots-fade-2 {
  opacity: 0.25;
}
@media (min-width: 601px) {
  .hero-art {
    display: block;
    order: -1;
    width: 60%;
  }
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
  }
  .hero-art {
    order: 0;
    width: 100%;
  }
  .display-hero {
    font-size: clamp(2.75rem, 4.6vw, 4.25rem);
  }
}

/*
  "They asked.": the bubble directly right of the headline, top-aligned with
  its first line and as tall as the headline's two lines (the bubble's grid
  is 30 by 25 dots, so its width is 1.2 times that height); on small screens
  a small bubble, 96px, between the headline and the paragraph.
*/
.asked-row {
  --asked-size: clamp(3.25rem, 8vw, 6.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'art' 'text';
  gap: 24px;
}
.asked-heading {
  grid-area: head;
  font-size: var(--asked-size);
}
.asked-art {
  grid-area: art;
  width: 96px;
  color: var(--fg);
}
.asked-row .asked-text {
  grid-area: text;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .asked-row {
    --asked-size: clamp(3.25rem, 6.8vw, 6.25rem);
    grid-template-columns: auto auto;
    grid-template-areas: 'head art' 'text .';
    justify-content: start;
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }
  .asked-art {
    /* Two lines at the display line height (0.88), and the bubble's 30:25 proportions. */
    width: calc(var(--asked-size) * 0.88 * 2 * 1.2);
    margin-top: calc(var(--asked-size) * 0.08);
  }
  .asked-row .asked-text {
    margin-top: 48px;
  }
}
.actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 0;
}

/* "They asked. Nobody answered.": still big, with one paragraph under it. */
.asked-text {
  max-width: 52ch;
  margin: clamp(32px, 4vw, 56px) 0 0;
  font-size: clamp(1.1875rem, 0.95rem + 0.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--body);
}

/* The answer: a smaller heading and a paragraph beside an example chat. */
.answers-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 64px;
  align-items: center;
}
.answers-heading {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.answers-text {
  max-width: 48ch;
  margin: 28px 0 0;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--body);
}
.example-chat {
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule-2);
}
.example-chat .chat {
  margin: 8px 0 0;
  gap: 14px;
}
.example-chat .bubble {
  max-width: 30ch;
  padding: 14px 20px;
  font-size: 1.125rem;
}

/* The customers' own words: pill-shaped bubbles, fading from white to grey. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.pill {
  font-size: clamp(1.25rem, 0.8rem + 1.7vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45em 0.8em;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  color: var(--muted);
}
.pill:first-child {
  border-color: var(--fg);
  color: var(--fg);
}
.pill:last-child {
  border-color: var(--pill-quiet);
  color: var(--muted-2);
}
.voices-text {
  max-width: 62ch;
  margin: clamp(40px, 5vw, 64px) 0 0;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--body);
}

/* The one inverted section: white ground, black type. */
.inverse {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  border-top-color: var(--inverse-bg);
}
.inverse .statement {
  max-width: none;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-top: 3px solid var(--inverse-fg);
  padding-top: 28px;
}
/* Each step: the dot numeral, then the sentence. */
.step .numeral {
  font-size: 5rem;
  line-height: 0.8;
}
.step p {
  margin: 0;
  max-width: 34ch;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--inverse-body);
}
.inverse .not-yet {
  color: var(--inverse-body);
}

/* The price: the big "15%" beside the paragraph and the example. */
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 48px 64px;
}
.price-heading {
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
}
.price-rest {
  display: block;
  margin-top: 28px;
  max-width: 16ch;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}
.price-side {
  flex: 1 1 380px;
  min-width: 0;
}
.price-text {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--body);
}
.example-head {
  margin: 32px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fg);
}
.example-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.125rem;
  font-weight: 800;
}

/* What it won't do: a ruled two-column list. */
.wont {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
  margin: clamp(36px, 5vw, 56px) 0 32px;
  padding: 0;
  list-style: none;
}
.wont li {
  padding: 24px 0;
  border-top: 1px solid var(--rule-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}
.wont strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

/* The founder's note: a narrow column of body text. */
.why {
  max-width: 62ch;
}
.why h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.why p:not(.label) {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--body);
}

/* The closing block, on every page that has one. */
.closing {
  padding-bottom: clamp(96px, 12vw, 160px);
}
.closing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.closing-heading {
  margin: 0;
  max-width: 11ch;
  font-weight: 900;
  font-size: clamp(3rem, 8.4vw, 6.875rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.closing-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 34ch;
}
.closing-side p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--body);
}

/* ---------- Inner pages ---------- */

.page-head {
  padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 8vw, 112px);
}
.page-head h1 {
  margin: 0;
  max-width: 13ch;
  font-weight: 900;
  font-size: clamp(3rem, 8.6vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.page-head .lede {
  max-width: 44ch;
  margin: clamp(28px, 4vw, 48px) 0 0;
  font-size: clamp(1.1875rem, 0.95rem + 0.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--body);
}
/* The documents' heads: the same heavy headline over the reading column. */
.page-head-narrow h1 {
  max-width: 16ch;
}
.page-head-narrow .lede {
  max-width: 60ch;
  font-size: 1.1875rem;
}
.nowrap {
  white-space: nowrap;
}
.page-head .lede-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
.page-head .placeholder-box {
  margin-top: 32px;
}

.section-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.section-head .intro {
  max-width: 60ch;
  margin: 24px 0 0;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--body);
}
.subhead {
  margin-top: 64px;
  font-size: 1.5rem;
}

/* Ruled lists: each item between thin rules, no bullets. */
.rules,
.rows,
.link-list,
.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rules li,
.rows li,
.link-list li {
  padding: 16px 0;
  border-top: 1px solid var(--rule-2);
  color: var(--body);
}
.rules li:last-child,
.rows li:last-child,
.link-list li:last-child {
  border-bottom: 1px solid var(--rule-2);
}
.rows {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 48px;
}
.rows li {
  padding: 24px 0;
}
.rows li:last-child {
  border-bottom: 0;
}
.rows h3 {
  margin-bottom: 6px;
}
.rows p {
  margin: 0;
  color: var(--muted);
}
.link-list a {
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
}
.link-list a:hover {
  text-decoration: underline;
}
.page-head .link-list {
  margin-top: 40px;
  max-width: 40rem;
}

/* Two columns of text sections (platform details, the DPO notes, the contact page's lists). */
.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 48px;
}
.columns section {
  padding-top: 24px;
  border-top: 1px solid var(--rule-2);
}
.columns h3,
.columns h2 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.columns p,
.columns li {
  color: var(--body);
}
.columns ul {
  padding-left: 1.1em;
}
.columns li {
  margin-bottom: 0.4em;
}

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

/* Facts at a glance (the platform pages), the founder's fields (About), the legal fields. */
.glance,
.fields {
  display: grid;
  margin: 40px 0 0;
}
.glance div,
.fields div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
}
.glance dt,
.fields dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.glance dd,
.fields dd {
  margin: 0;
  color: var(--fg);
}
.glance {
  max-width: 52rem;
}

/* The FAQ: a clean list. Heavy questions, answers in a reading column, a rule between. */
.qa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 48px;
  padding: 32px 0;
  border-top: 1px solid var(--rule-2);
}
.qa:last-child {
  border-bottom: 1px solid var(--rule-2);
}
.qa h2 {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.qa p {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body);
}

/* The contact page's address. */
.contact-block {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.contact-address {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.contact-address a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* The Log in and Install pages' ways in: ruled columns, not cards. */
.way-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
}
.way-card {
  padding: 32px 0 40px;
  border-top: 1px solid var(--rule-2);
}
.way-card h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}
.way-card p {
  color: var(--body);
}
.way-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* A draft notice on a legal page. */
.placeholder-box {
  max-width: 70ch;
  padding: 16px 0 16px 18px;
  border-left: 3px solid var(--fg);
  color: var(--body);
}
.placeholder-box strong {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.5em;
}

/* ---------- Drawn components ---------- */

/* A journey: numbered steps in ruled columns. */
.journey {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.journey-step {
  padding: 24px 0 28px;
  border-top: 1px solid var(--rule-2);
}
.journey-step .numeral {
  font-size: 2.75rem;
  margin-bottom: 14px;
}
.journey-label {
  margin: 0 0 6px;
}
.journey-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
}
.journey-text {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* The three endings. */
.branch {
  margin-top: 64px;
}
.branch-heading {
  font-size: 1.5rem;
}
.lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.lane {
  padding: 20px 0;
  border-top: 1px solid var(--rule-2);
}
.lane-title {
  font-size: 1.125rem;
  margin-bottom: 8px;
}
.lane-steps {
  margin: 0 0 12px;
  padding-left: 1.1em;
  color: var(--muted);
}
.lane-result {
  margin: 0;
  color: var(--fg);
}

/* Example conversations: pill-shaped bubbles, monochrome. */
.threads {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.thread-title {
  font-size: 1.125rem;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.chat-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.chat-line.from-shopper {
  align-items: flex-end;
}
.bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 34ch;
  padding: 12px 18px;
  border: 1px solid var(--pill-line);
  border-radius: 22px;
  color: var(--body);
  font-size: 1rem;
  line-height: 1.45;
}
.from-shopper .bubble {
  border-color: var(--fg);
  color: var(--fg);
}
.bubble-label {
  color: var(--muted-2);
}
.bubble-footer {
  font-size: 0.8125rem;
  color: var(--muted-2);
}
.bubble-time {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted-2);
}
.bubble-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bubble-buttons span {
  padding: 8px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fg);
}
.thread-after {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted-2);
}

/* The five opt-in points. */
.captures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.capture {
  padding: 24px 0 28px;
  border-top: 1px solid var(--rule-2);
}
.capture-where {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 14px;
}
.availability {
  color: var(--muted);
}
.wireframe {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--rule-2);
  font-size: 0.875rem;
  color: var(--body);
}
.wf-check {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--fg);
  border-radius: 2px;
}
.wf-button {
  padding: 8px 12px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
}
.wf-field {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--pill-line);
  color: var(--muted-2);
}
.wf-send {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--fg);
  border-radius: 50%;
}
.capture h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}
.capture p:last-child {
  margin: 0;
  color: var(--muted);
}

/* Quiet hours: a 24-hour bar with the night shaded. */
.quiet {
  margin: 0;
}
.quiet-bar {
  position: relative;
  height: 40px;
  border: 1px solid var(--fg);
}
.quiet-night {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(135deg, var(--rule-2) 0 2px, transparent 2px 7px);
}
.quiet-early {
  left: 0;
  width: 37.5%;
}
.quiet-late {
  left: 87.5%;
  right: 0;
}
.quiet-ticks {
  position: relative;
  height: 24px;
  margin-top: 8px;
}
.tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.tick-00 { left: 0; transform: none; }
.tick-06 { left: 25%; }
.tick-09 { left: 37.5%; }
.tick-12 { left: 50%; }
.tick-18 { left: 75%; }
.tick-21 { left: 87.5%; }
.tick-24 { left: 100%; transform: translateX(-100%); }
.quiet figcaption {
  margin-top: 16px;
  color: var(--body);
}

/* The dashboard's one number. */
.dashboard {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--fg);
}
.dashboard-value {
  margin: 0 0 16px;
  font-size: clamp(4rem, 3rem + 4vw, 6rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.dashboard-rows {
  margin: 0 0 16px;
}
.dashboard-rows div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.dashboard-rows dt {
  color: var(--muted);
}
.dashboard-rows dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The worked-example invoice: a ruled table. */
.invoice {
  margin: 0;
}
.invoice-head {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fg);
}
.invoice th,
.invoice td {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
  color: var(--muted);
}
.invoice thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.invoice td,
.invoice thead th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 16px;
}
.invoice-strong th,
.invoice-strong td {
  font-weight: 800;
  color: var(--fg);
}
.invoice figcaption {
  margin-top: 16px;
}

/* The pricing page: the rate beside the three rules. */
.price-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 64px;
  align-items: end;
  margin-top: clamp(48px, 6vw, 80px);
}
.price-hero .rules {
  max-width: 42rem;
}
.formula {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.formula li {
  padding: 24px 0;
  border-top: 1px solid var(--rule-2);
}
.formula .numeral {
  font-size: 2.75rem;
  margin-bottom: 14px;
}
.formula h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}
.formula p {
  margin: 0;
  color: var(--muted);
}
.warning {
  max-width: 70ch;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--fg);
  color: var(--body);
}

/* ---------- Legal documents: a comfortable reading column ---------- */

.document {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
}
.document h2 {
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-2);
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.document h2:first-child {
  margin-top: 0;
}
.document h3 {
  margin-top: 32px;
  font-size: 1.1875rem;
  color: var(--fg);
}
.document p,
.document li {
  color: var(--body);
}
.document ul,
.document ol {
  padding-left: 1.3em;
}
.document li {
  margin-bottom: 0.4em;
}
.document a {
  color: var(--fg);
  text-decoration-thickness: 1px;
}
.document .fields {
  margin-top: 0;
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1.5em;
}
.table-scroll:focus-visible {
  outline-offset: 2px;
}
.document table {
  min-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.document th,
.document td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  vertical-align: top;
}
.document thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  border-bottom-color: var(--fg);
}

/* The privacy checks: a numbered, ruled list. */
.checks {
  counter-reset: check;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
}
.checks li {
  counter-increment: check;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
  color: var(--body);
}
.checks li::before {
  content: counter(check, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--muted-2);
}

/* ---------- Forms and the calculator ---------- */

.field {
  margin-bottom: 24px;
}
.field label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 8px;
  font-weight: 700;
}
.field input[type='text'],
.field input[type='number'] {
  width: 100%;
  max-width: 28rem;
  padding: 14px 16px;
  border: 1px solid var(--pill-line);
  border-radius: 0;
  background: var(--field);
  color: var(--fg);
  font: inherit;
}
.field input[type='text']::placeholder {
  color: var(--muted-2);
}
.field input:focus-visible {
  border-color: var(--fg);
}
.field input[type='range'] {
  width: 100%;
  max-width: 28rem;
  accent-color: var(--fg);
}
.help {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--muted-2);
}
.slider-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--fg);
}
.shop-form {
  margin: 24px 0 16px;
}
.calculator {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 64px;
  margin-top: 40px;
}
.calc-outputs h3 {
  font-size: 1.25rem;
}
.outputs {
  margin: 16px 0 24px;
}
.outputs div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-2);
}
.outputs dt {
  color: var(--muted);
}
.outputs dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.output-strong {
  border-top-color: var(--fg) !important;
}
.output-strong dt {
  color: var(--fg);
  font-weight: 800;
}
.output-strong dd {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* ---------- Wider screens ---------- */

@media (min-width: 720px) {
  .answers-row {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
  .wont,
  .rows,
  .columns,
  .way-in,
  .checks,
  .threads,
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glance div,
  .fields div {
    grid-template-columns: minmax(10rem, 1fr) 3fr;
  }
  .qa {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .journey,
  .lanes,
  .captures,
  .formula {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .price-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .calculator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1040px) {
  .journey,
  .lanes,
  .captures,
  .threads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .journey[data-steps='4'],
  .formula {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .journey[data-steps='5'] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Motion ---------- */

/* The one moving moment: the hero's dots drift once on load. They start
   visible, a little nearer the basket, and settle where they rest. Only
   when the reader allows motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-basket .dots-trail {
    animation: dots-drift 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s 1 backwards;
  }
  @keyframes dots-drift {
    from {
      transform: translateX(-36px);
    }
    to {
      transform: translateX(0);
    }
  }
}

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