/*
 * The whole site's styles, built on the Baarbil design system (design-system/baarbil/MASTER.md).
 * Colours are hex tokens on :root, redefined for dark mode; the contrast test
 * (test/unit/contrast.test.mjs) checks every text and background pair named there, so every
 * hex colour lives in one of the two :root blocks and components use the tokens only.
 */

:root {
  color-scheme: light dark;

  /* Neutrals: ink on paper, a cool grey family. */
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --surface: #ffffff;
  --text: #0b1121;
  --muted: #535d70;
  --border: #e5e8ee;
  --border-strong: #d3d8e1;
  --control-border: #878fa0;

  /* One brand blue. --accent is for text and marks, --primary for filled buttons. */
  --accent: #2449d8;
  --accent-hover: #1b3bb8;
  --accent-soft: #eef2ff;
  --primary: #2449d8;
  --primary-hover: #1d3fc4;
  --on-primary: #ffffff;

  /* States. */
  --ok: #0b6e37;
  --ok-soft: #e4f5ea;
  --draft: #7a4f00;
  --draft-soft: #fdf2da;
  --live: #e5484d;
  --stop: #c8262c;
  --on-stop: #ffffff;
  --focus: #2449d8;

  /* Surfaces for code and the illustrated app window. */
  --code-bg: #f3f5f9;
  --window-chrome: #f6f7f9;

  /* The ink panels (privacy, the closing call to action): dark in both themes. */
  --inverse-bg: #0b1121;
  --inverse-text: #eef1f7;
  --inverse-muted: #a7b0c3;
  --inverse-accent: #9fb5ff;
  --inverse-border: #263049;

  /* Lines, glows and shadows, mixed from the tokens above. */
  --grid-line: color-mix(in srgb, var(--text) 5%, transparent);
  --glow: color-mix(in srgb, var(--primary) 16%, transparent);
  --ring: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 5%);
  --shadow-contact: 0 1px 2px rgb(15 23 42 / 18%);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%), 0 4px 12px -4px rgb(15 23 42 / 8%);
  --shadow-md: 0 1px 2px rgb(15 23 42 / 5%), 0 12px 32px -12px rgb(15 23 42 / 16%);
  --shadow-lg:
    0 1px 2px rgb(15 23 42 / 6%), 0 24px 48px -16px rgb(15 23 42 / 18%),
    0 64px 120px -48px rgb(36 73 216 / 28%);

  /* Type: Windows 11's own variable font, the one the desktop app uses. */
  --font:
    'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Roboto, Arial,
    sans-serif;
  --font-display:
    'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Roboto,
    Arial, sans-serif;
  --mono:
    'Cascadia Mono', 'Cascadia Code', Consolas, ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-h3: 1.25rem;
  --text-h2: clamp(1.95rem, 1.45rem + 1.9vw, 3rem);
  --text-h1: clamp(2.55rem, 1.55rem + 4.2vw, 4.6rem);

  /* Space: a 4 px rhythm. */
  --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;
  --section-space: clamp(4.5rem, 3rem + 5vw, 7.5rem);

  /* Shape. */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Motion: quick feedback, a gentle arrival. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 220ms;
  --duration-slow: 700ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090b11;
    --bg-alt: #0d1017;
    --surface: #11141c;
    --text: #eceef4;
    --muted: #a3abba;
    --border: #222734;
    --border-strong: #2f3646;
    --control-border: #6c7487;
    --accent: #93abff;
    --accent-hover: #b7c7ff;
    --accent-soft: #161e3a;
    --primary: #3a5cf0;
    --primary-hover: #2f50e2;
    --on-primary: #ffffff;
    --ok: #6fdb98;
    --ok-soft: #11281b;
    --draft: #f2c46d;
    --draft-soft: #2b2210;
    --live: #ff6b6b;
    --stop: #ff8a8a;
    --on-stop: #1e0505;
    --focus: #93abff;
    --code-bg: #0b0e15;
    --window-chrome: #0e1118;
    --inverse-bg: #141a2b;
    --inverse-text: #eceef4;
    --inverse-muted: #aab3c6;
    --inverse-accent: #9fb5ff;
    --inverse-border: #2a3450;
    --grid-line: color-mix(in srgb, var(--text) 5%, transparent);
    --glow: color-mix(in srgb, var(--primary) 26%, transparent);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-contact: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px -4px rgb(0 0 0 / 50%);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -12px rgb(0 0 0 / 60%);
    --shadow-lg:
      0 1px 2px rgb(0 0 0 / 50%), 0 24px 48px -16px rgb(0 0 0 / 60%),
      0 64px 120px -48px rgb(58 92 240 / 35%);
  }
}

/* Base */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.028em;
  line-height: 1.1;
}

h3 {
  font-size: var(--text-h3);
}

p {
  text-wrap: pretty;
}

p,
ul,
ol,
dl,
pre,
table,
figure {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition:
    color var(--duration-fast) ease,
    text-decoration-color var(--duration-fast) ease;
}

a:hover {
  color: var(--accent-hover);
}

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

main:focus {
  outline: none;
}

[id] {
  scroll-margin-top: 5.5rem;
}

/* Where the header is sticky, keep a focused control from scrolling under it. */
@media (min-width: 48rem) {
  html {
    scroll-padding-top: 5.5rem;
  }
}

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

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
}

pre {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  white-space: pre;
}

kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

strong {
  font-weight: 600;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--on-primary);
}

.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

/* Short pages (the 404): main grows, so the footer ends the window. */
.full-height {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.full-height main {
  flex: 1;
}

/* Header: name on the left, links in the middle, the call to action on the right. Sticky. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'brand nav cta';
  align-items: center;
  gap: 0.5rem 1.5rem;
  min-height: 4rem;
}

.brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

/* The full name beside the brand, only where the header has room for it. */
.brand-descriptor {
  display: none;
  color: var(--muted);
  font-weight: 500;
}

@media (min-width: 70rem) {
  .brand-descriptor {
    display: inline;
  }
}

.brand-mark {
  flex: none;
}

.brand-mark-tile {
  fill: var(--primary);
}

.brand-mark-bubble {
  fill: var(--on-primary);
}

.brand-mark-wave {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.site-nav {
  grid-area: nav;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.site-nav a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.site-nav a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  /* Forced colours drop the background; the outline keeps the pill visible there. */
  outline: 1px solid transparent;
}

.header-cta,
.header-status {
  grid-area: cta;
  justify-self: end;
}

/* The coming-soon site's header says where it stands instead of offering a download. */
.header-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.header-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The words after "Coming soon" where the header has room for them. */
@media (max-width: 63.99rem) {
  .header-status-wide {
    display: none;
  }
}

/* Phones: name and the call to action on one line, the links under them. */
@media (max-width: 47.99rem) {
  /* Two rows would take too much of a phone's screen to keep in view. */
  .site-header {
    position: static;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand cta'
      'nav nav';
    padding-block: 0.65rem 0.5rem;
  }

  .site-nav {
    margin-inline: -0.75rem;
  }

  .site-nav a {
    padding: 0.4rem 0.75rem;
  }
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-6) var(--space-7);
  margin-bottom: var(--space-7);
}

/* The brand on its own row, the link columns side by side under it, until there's room. */
.footer-grid > :first-child {
  grid-column: 1 / -1;
}

@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: minmax(16rem, 2fr) repeat(auto-fit, minmax(9rem, 1fr));
  }

  .footer-grid > :first-child {
    grid-column: auto;
  }
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  margin-bottom: 0.5rem;
}

.footer-brand + p {
  max-width: 22rem;
}

.footer-heading {
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 0.15rem;
}

.footer-nav a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-nav a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}

.footer-legal {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}

.footer-note {
  color: var(--muted);
  font-size: var(--text-xs);
  margin-bottom: 0.35rem;
}

/* Buttons and links */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration) var(--ease-out),
    color var(--duration-fast) ease,
    transform var(--duration) var(--ease-out);
}

.button-small {
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: var(--text-xs);
}

.button-large {
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  font-size: 1rem;
}

.button-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration) var(--ease-out);
}

.button-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    var(--shadow-contact),
    0 4px 12px -2px color-mix(in srgb, var(--primary) 40%, transparent);
}

.button-primary:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    var(--shadow-contact),
    0 8px 20px -4px color-mix(in srgb, var(--primary) 50%, transparent);
}

.button-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.button-secondary:hover {
  color: var(--text);
  border-color: var(--control-border);
  box-shadow: var(--shadow-sm);
}

/* On the ink panels. */
.button-inverse {
  background: var(--inverse-text);
  color: var(--inverse-bg);
}

.button-inverse:hover {
  color: var(--inverse-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--inverse-text) 18%, transparent);
}

.button-ghost {
  color: var(--inverse-text);
  border-color: color-mix(in srgb, var(--inverse-text) 40%, transparent);
}

.button-ghost:hover {
  color: var(--inverse-text);
  border-color: var(--inverse-text);
  background: color-mix(in srgb, var(--inverse-text) 8%, transparent);
}

.link-arrow {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.link-arrow::after {
  content: '→';
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--duration) var(--ease-out);
}

.fine-print {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Sections */

.section {
  padding-block: var(--section-space);
}

.section-tight {
  padding-block: var(--space-5) var(--space-8);
}

.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section-header {
  max-width: 44rem;
  margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section-header h2 {
  margin-bottom: 0.4em;
}

.section-header p:last-child {
  margin-bottom: 0;
}

/* Heading on the left, its lead on the right, on wide screens. */
@media (min-width: 60rem) {
  .section-header-split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: end;
  }

  .section-header-split h2 {
    margin-bottom: 0;
  }
}

.section-header-center {
  margin-inline: auto;
  text-align: center;
}

.section-header-center .section-lead {
  margin-inline: auto;
}

.section-lead {
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 40rem;
}

.lead {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 40rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}

.page-intro {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--space-6);
}

.page-intro h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  letter-spacing: -0.032em;
  line-height: 1.08;
}

.page-intro .lead {
  margin-bottom: 0;
}

.page-intro-center {
  text-align: center;
}

.page-intro-center .lead {
  margin-inline: auto;
}

/* Page not found: the way back, as buttons. */
.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.page-intro-center .link-list {
  justify-content: center;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration) var(--ease-out);
}

.link-list a:hover {
  color: var(--text);
  border-color: var(--control-border);
  box-shadow: var(--shadow-sm);
}

.error-code {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--accent);
  margin-bottom: 1rem;
}

/* Home: hero. A fine grid that fades out, and a glow behind the app window. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.hero::before,
.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center -1px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 35%, transparent 80%);
}

.page-intro::before {
  mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 10%, transparent 70%);
}

.hero-inner {
  display: grid;
  justify-items: center;
  gap: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.hero-copy {
  max-width: 50rem;
  text-align: center;
}

.hero-copy .lead {
  margin-inline: auto;
  margin-bottom: 1rem;
}

.hero-copy h1 {
  margin-bottom: 0.4em;
}

.h1-soft {
  color: var(--muted);
}

.hero-note {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: 0.5rem;
}

.hero-copy .cta-row {
  justify-content: center;
  margin-top: 2rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.85rem 0.25rem 0.3rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.pill-tag {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: var(--ring);
  color: var(--accent);
  font-weight: 600;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.hero-points li,
.check-list li {
  position: relative;
  padding-left: 1.6rem;
}

.hero-points li::before,
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--ok-soft);
}

.hero-points li::after,
.check-list li::after {
  content: '';
  position: absolute;
  left: 0.37rem;
  top: calc(0.28em + 0.22rem);
  width: 0.3rem;
  height: 0.52rem;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hero-visual {
  position: relative;
  width: 100%;
  margin: 0;
  min-width: 0;
}

/* The glow the app window sits in. */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -12% -8% 10%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent);
}

.hero-visual figcaption,
.feature-visual figcaption,
.screenshot figcaption,
.guide-shot figcaption {
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: 1rem;
}

.hero-inner .hero-visual figcaption {
  text-align: center;
}

/* The illustrated app window, drawn after the desktop app's meeting page. */

.app-window {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}

.app-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.4rem 0.5rem 0.9rem;
  background: var(--window-chrome);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}

.app-titlebar-app {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.app-titlebar-icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Windows' minimise, maximise and close, drawn with borders. */
.app-titlebar-controls {
  display: flex;
  gap: 1.6rem;
  padding-right: 0.75rem;
}

.app-titlebar-controls span {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--control-border);
  border-radius: 1px;
}

.app-titlebar-controls span:first-child {
  height: 0;
  margin-top: 0.3rem;
  border-width: 1px 0 0;
}

.app-titlebar-controls span:last-child {
  border: 0;
  background:
    linear-gradient(45deg, transparent 46%, var(--control-border) 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--control-border) 46% 54%, transparent 54%);
}

.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.app-tabs {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
}

.app-tab {
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
}

.app-tab-current {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}

.app-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-right: auto;
}

.app-tabs + .app-status {
  margin-right: 0.35rem;
  font-weight: 500;
  font-size: 0.8125rem;
}

.app-fake-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-fake-stop {
  background: var(--stop);
  border-color: var(--stop);
  color: var(--on-stop);
}

.app-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.75rem 0.9rem 0;
  background: var(--bg-alt);
}

/* Status cards that end the window, with nothing under them. */
.app-cards-last {
  padding-bottom: 0.9rem;
}

.app-card {
  min-width: 0;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-md);
}

.app-card-live {
  border-left-color: var(--live);
}

.app-card-off {
  border-left-color: var(--control-border);
}

.app-card p {
  margin: 0;
}

.app-card-label,
.app-card-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-card-label {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-card-value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.app-card-detail {
  color: var(--muted);
  font-size: 0.78rem;
}

.app-body {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem 0.9rem;
  background: var(--bg-alt);
}

@media (min-width: 36rem) {
  .app-body {
    grid-template-columns: 1.45fr 1fr;
  }
}

.app-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  min-width: 0;
}

.app-panel p {
  margin-bottom: 0.5rem;
}

.app-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
}

.app-answer {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.85rem 0.55rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.app-chip {
  display: inline-block;
  padding: 0 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.app-question {
  font-weight: 650;
  line-height: 1.4;
}

.app-answer-label {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 650;
  margin-bottom: 0.15rem;
}

.app-answer-text {
  line-height: 1.55;
}

/* A caret at the end of the answer, as it streams in word by word. */
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent);
}

.app-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.app-meta .app-fake-button {
  color: var(--text);
}

.app-line {
  border-left: 2px solid var(--accent);
  padding-left: 0.65rem;
  line-height: 1.45;
  font-size: 0.82rem;
}

.app-line-you {
  border-left-color: var(--control-border);
}

.app-who {
  display: block;
  color: var(--accent);
  font-weight: 650;
  font-size: 0.75rem;
}

.app-time {
  margin-left: 0.4rem;
  color: var(--muted);
  font-weight: 400;
}

.app-line-you .app-who {
  color: var(--muted);
}

/* Smaller windows show less of the app, as a narrow app window does. */
@media (max-width: 47.99rem) {
  .app-tabs,
  .app-card:not(:first-child) {
    display: none;
  }

  .app-tabs + .app-status {
    margin-right: auto;
  }

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

@media (max-width: 35.99rem) {
  .app-transcript {
    display: none;
  }

  .app-toolbar .app-fake-button:not(.app-fake-stop) {
    display: none;
  }
}

.status-dot {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: none;
  background: var(--ok);
}

.status-dot-live {
  background: var(--live);
}

.status-dot-off {
  background: transparent;
  border: 1.5px solid var(--control-border);
}

/* Home: the meeting apps it works with */

.works-with {
  padding-block: var(--space-6);
}

.works-inner {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 60rem) {
  .works-inner {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: center;
  }
}

.works-title {
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.works-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.works-list li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
}

.works-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.works-detail {
  color: var(--muted);
  font-size: var(--text-sm);
}

.works-list .status {
  justify-self: start;
  align-self: end;
  margin-top: 0.4rem;
}

/* Home: highlights, a grid of tiles of mixed widths */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bento-tile {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.bento-tile h3 {
  margin-bottom: 0.4rem;
}

.bento-tile > p {
  color: var(--muted);
  max-width: 34rem;
}

@media (min-width: 40rem) {
  .bento-tile {
    grid-column: span 3;
  }

  .bento-wide {
    grid-column: span 6;
  }
}

@media (min-width: 64rem) {
  .bento-tile {
    grid-column: span 2;
  }

  .bento-wide {
    grid-column: span 4;
  }
}

.bento-visual {
  margin: auto 0 0;
  padding-top: var(--space-5);
}

.bento-visual:has(.flow) {
  margin-block: auto;
}

.mini-card {
  padding: 1rem 1.15rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.mini-card p {
  margin-bottom: 0.5rem;
}

.mini-card p:last-child {
  margin-bottom: 0;
}

.mini-code {
  margin: 0;
  font-size: 0.8125rem;
}

.mini-code + .code-sample-note {
  margin-top: 0.6rem;
}

.mini-status {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-status li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mini-status span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

/* The path the call's sound takes: meeting app, speakers, the app on your PC. */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted);
}

.flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: calc(50% + 2rem);
  right: calc(-50% + 2rem);
  border-top: 1.5px dashed var(--control-border);
}

.flow strong {
  display: block;
  color: var(--text);
  font-size: var(--text-sm);
}

.flow-icon {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow li:last-child .flow-icon {
  background: var(--primary);
  border-color: var(--primary);
  stroke: var(--on-primary);
}

/* Steps, uses and facts */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

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

.step {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.75rem 1.5rem 1.5rem;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.25rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

.step p,
.use-card p,
.fact p,
.faq-item p,
.feature-copy p {
  color: var(--muted);
}

.step p,
.use-card p,
.fact p {
  margin-bottom: 0;
}

.use-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2.5rem 2rem;
}

@media (min-width: 40rem) {
  .use-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

  /* Three uses fill the row rather than leaving a fourth column empty. */
  .use-grid-three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Who it's for: two groups, each a heading with one line beside it, then its uses. */
.use-groups {
  display: grid;
  gap: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.use-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-bottom: 1.75rem;
}

.use-group-header h3 {
  margin: 0;
  font-size: var(--text-h3);
}

.use-group-header p {
  margin: 0;
  color: var(--muted);
}

/* Open columns with a rule on top, not boxed cards. */
.use-card {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-strong);
}

.use-card h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Where a use is allowed, said beside the uses it applies to, never in small print. */
.use-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 44rem;
  margin: 2rem 0 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: var(--ring);
  color: var(--text);
  font-size: var(--text-sm);
}

.use-note-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-icon,
.band-icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-md);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-icon {
  stroke: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--ring);
}

.band-icon {
  stroke: var(--inverse-accent);
  background: color-mix(in srgb, var(--inverse-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inverse-accent) 22%, transparent);
}

.fact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.5rem;
}

.fact h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.4rem;
}

/* Feature rows: copy beside a visual, alternating sides */

.feature-row {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.feature-row + .feature-row {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

@media (min-width: 56rem) {
  .feature-row {
    grid-template-columns: 1fr 1.1fr;
    gap: 5rem;
  }

  .feature-row-flip .feature-copy {
    order: 2;
  }
}

.feature-copy h2,
.feature-copy h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  letter-spacing: -0.022em;
  line-height: 1.15;
}

.feature-copy p {
  font-size: var(--text-lg);
}

.feature-visual {
  position: relative;
  margin: 0;
  min-width: 0;
}

.check-list {
  list-style: none;
  padding: 0;
}

.check-list li {
  margin-bottom: 0.6rem;
}

.answer-card,
.code-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem 1.6rem 1.3rem;
}

.answer-card-label,
.code-card-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.answer-card-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.answer-card-answer {
  border-left: 2px solid var(--accent);
  padding-left: 0.9rem;
}

.answer-card-meta {
  color: var(--muted);
  font-size: var(--text-xs);
  margin: 0;
}

.code-card-label {
  font-family: var(--mono);
}

.code-card .code-sample {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.875rem;
}

.code-sample-note {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

.screenshot img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* The privacy band: an ink panel in both themes */

.band {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.band::before {
  content: '';
  position: absolute;
  inset: -40% 10% auto;
  height: 80%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--inverse-accent) 14%, transparent),
    transparent
  );
}

.band .eyebrow {
  color: var(--inverse-accent);
}

.band .section-lead,
.band p {
  color: var(--inverse-muted);
}

.band a {
  color: var(--inverse-accent);
}

.band :focus-visible {
  outline-color: var(--inverse-accent);
}

.band-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .band-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

.band-grid li {
  background: color-mix(in srgb, var(--inverse-text) 3%, transparent);
  border: 1px solid var(--inverse-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.band-grid h3 {
  font-size: 1.0625rem;
}

.band-grid p {
  margin: 0;
}

.band-link {
  margin: 2.5rem 0 0;
}

/* FAQ: its heading on the left, the questions on the right */

.faq-layout {
  display: grid;
  gap: var(--space-6) var(--space-8);
}

@media (min-width: 60rem) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  }

  .faq-intro {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.faq-item {
  border-top: 1px solid var(--border);
  padding-block: 1.5rem 0.75rem;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-item h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.4rem;
}

.faq-item:target h3 {
  color: var(--accent);
}

/* The call to action that ends a page: an ink panel with a soft glow */

.cta-band {
  padding-block: var(--section-space);
}

.section:not(.section-alt, .band) + .cta-band {
  padding-top: 0;
}

.cta-band > .container {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--radius-xl);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.cta-band > .container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      60% 90% at 50% 0%,
      color-mix(in srgb, var(--inverse-accent) 22%, transparent),
      transparent 70%
    ),
    linear-gradient(color-mix(in srgb, var(--inverse-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--inverse-text) 5%, transparent) 1px,
      transparent 1px
    );
  background-size:
    auto,
    48px 48px,
    48px 48px;
  mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, #000 40%, transparent 85%);
}

.cta-band h2 {
  margin-bottom: 0.5rem;
}

.cta-band p {
  color: var(--inverse-muted);
  font-size: var(--text-lg);
  max-width: 36rem;
  margin: 0 auto 2rem;
}

.cta-band .cta-row {
  justify-content: center;
  margin: 0;
}

.cta-band a:not(.button) {
  color: var(--inverse-accent);
}

.cta-band :focus-visible {
  outline-color: var(--inverse-accent);
}

@media (max-width: 30rem) {
  .cta-band .button {
    width: 100%;
  }
}

/* Notices: legal draft banners, draft notes, guide tips */

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: 1.1rem 1.35rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  margin-bottom: 0.35rem;
}

.notice-draft,
.notice-pending {
  border-color: color-mix(in srgb, var(--draft) 25%, transparent);
  border-left-color: var(--draft);
  background: var(--draft-soft);
}

.notice-draft .notice-title,
.notice-pending .notice-title {
  color: var(--draft);
}

.notice-draft {
  margin-bottom: 2rem;
}

.draft-note {
  border-left: 3px solid var(--draft);
  background: var(--draft-soft);
  color: var(--text);
  padding: 0.55rem 0.9rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
}

/* "Not available yet": the banner, and the passages about what isn't built, until it is */

.notice-pending {
  margin: 1.5rem 0;
}

.product-pending {
  outline: 2px dashed var(--draft);
  outline-offset: 4px;
}

/* Pricing */

.pack-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  max-width: 62rem;
  margin: 0 auto 2rem;
}

.pack {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 2rem 1.75rem;
}

.pack-featured {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    var(--shadow-md);
}

.pack-hours {
  font-size: var(--text-sm);
  font-family: var(--font);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

.pack-price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2.2rem + 1vw, 3rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 0.5rem;
}

.pack-rate {
  color: var(--muted);
  margin-bottom: 1rem;
}

.pack-note {
  margin: 0;
  font-size: var(--text-sm);
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 600;
  font-size: var(--text-xs);
}

/* Download */

.page-intro-center .cta-row {
  justify-content: center;
  margin-top: 2rem;
}

.download-card {
  max-width: 32rem;
  margin: 2.5rem auto 0;
  text-align: left;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.download-card-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.download-card .file-facts {
  gap: 0.75rem;
}

.download-card .file-facts div {
  display: grid;
  gap: 0.15rem;
}

.file-facts {
  display: grid;
  gap: 0.4rem;
  font-size: var(--text-sm);
}

.file-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.file-facts dt {
  color: var(--muted);
}

.file-facts dd {
  margin: 0;
  min-width: 0;
}

.hash {
  word-break: break-all;
}

.filename {
  white-space: nowrap;
}

.measure > * {
  max-width: 46rem;
}

.support-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.support-table th,
.support-table td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.support-table thead th {
  background: var(--bg-alt);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.support-table tbody th {
  font-weight: 500;
}

@media (max-width: 40rem) {
  .support-table tbody th {
    width: 55%;
  }

  .support-table .status {
    white-space: normal;
    border-radius: var(--radius-sm);
  }
}

.support-table tr:last-child > * {
  border-bottom: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.status-ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.status-ok::before {
  content: '';
  width: 0.4rem;
  height: 0.65rem;
  margin: -0.15rem 0.1rem 0 0.05rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.path-list {
  padding-left: 1.25rem;
}

.path-list li,
.numbered > li {
  margin-bottom: 0.4rem;
}

.numbered {
  padding-left: 1.4rem;
}

.numbered > li::marker {
  font-weight: 700;
  color: var(--accent);
}

.command {
  margin-bottom: 1rem;
}

/* Guide: a contents list beside the steps on wide screens */

.guide-layout {
  display: grid;
  gap: 2rem;
  padding-bottom: 4rem;
}

@media (min-width: 64rem) {
  .guide-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }

  .guide-toc {
    position: sticky;
    top: 5.5rem;
  }
}

.guide-toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
}

.guide-toc-title {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.guide-toc ol {
  margin: 0;
  padding-left: 1.3rem;
}

.guide-toc li {
  padding-block: 0.2rem;
  font-size: var(--text-sm);
}

.guide-toc a {
  color: var(--text);
  text-decoration: none;
}

.guide-toc a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.guide-content {
  min-width: 0;
  max-width: 50rem;
}

.guide-section + .guide-section {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.guide-section h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.guide-section > h3 {
  margin-top: 1.75rem;
}

.guide-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: guide-step;
}

.guide-steps[start='5'] {
  counter-reset: guide-step 4;
}

.guide-steps[start='6'] {
  counter-reset: guide-step 5;
}

.guide-steps[start='10'] {
  counter-reset: guide-step 9;
}

.guide-steps > li {
  counter-increment: guide-step;
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 1.75rem;
}

.guide-steps > li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: var(--ring);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* A line joining the step numbers. */
.guide-steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(1.125rem - 0.5px);
  top: 2.5rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--border-strong);
}

.guide-steps h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.4rem;
  padding-top: 0.2rem;
}

.guide-shot {
  margin: 1rem 0 1.25rem;
  /* Above the line that joins the step numbers, which runs behind it on phones. */
  position: relative;
  z-index: 1;
}

/* Phones: a narrower step column, and screenshots that use the full width. */
@media (max-width: 40rem) {
  .guide-steps > li {
    padding-left: 2.75rem;
  }

  .guide-steps > li::before {
    width: 2rem;
    height: 2rem;
  }

  .guide-steps > li:not(:last-child)::after {
    left: calc(1rem - 0.5px);
  }

  .guide-steps .guide-shot {
    margin-left: -2.75rem;
  }
}

.guide-shot img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.guide-tip {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
}

/* A settings screenshot at its natural size, with what each setting does under it. */
.guide-split {
  margin-bottom: 2rem;
}

.guide-split .guide-shot {
  max-width: 40rem;
}

.guide-defs dt {
  font-weight: 600;
}

.guide-defs dd {
  margin: 0 0 1rem;
  color: var(--muted);
}

/* Legal pages */

.prose {
  padding-bottom: 4rem;
}

.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-top: 2.75rem;
}

.prose h3 {
  font-size: 1.125rem;
  margin-top: 1.75rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose code {
  word-break: break-all;
}

/* Motion: the app window arrives, the listening dot breathes and the answer's caret blinks (each
   for under five seconds, then still), and buttons lift on hover. Only for visitors who haven't
   asked for less motion; everything is in place without it. */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .hero-visual {
    animation: rise var(--duration-slow) var(--ease-out) both;
  }

  .hero-visual {
    animation-delay: 120ms;
  }

  .status-dot-live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--live);
    opacity: 0;
    animation: breathe 2s var(--ease-out) 2;
  }

  .caret {
    animation: blink 1.1s steps(2, jump-none) 4;
  }

  .button-primary:hover,
  .button-secondary:hover,
  .button-inverse:hover {
    transform: translateY(-1px);
  }

  .button:active {
    transform: scale(0.985);
  }

  .button:hover .button-icon-end,
  .link-arrow:hover::after {
    transform: translateX(3px);
  }

  /* Sections ease in as they scroll into view, where the browser can tie it to scrolling. */
  @supports (animation-timeline: view()) {
    .bento-tile,
    .use-card,
    .step,
    .band-grid li,
    .feature-row,
    .faq-item {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes breathe {
  from {
    opacity: 0.6;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}