/* Doubles website: every page's styles (the pages carry no inline styles).
   Ported from the "Relay Home v2" design, made while Doubles was called
   Relay: its Sorbet theme in light mode, Dusk in dark mode, and its type,
   spacing, borders and motion as designed. */

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

:root {
  color-scheme: light dark;
  --paper: #F6F1E8;
  --paper2: #FFFCF5;
  --ink: #1A1A1F;
  --mute: #6B665E;
  --line: rgba(26, 26, 31, .14);
  --s1: #F9E59B;
  --s2: #BFE8D2;
  --s3: #D7CCF2;
  --s4: #F9C9B4;
  --s5: #BFD9F2;
  --blockInk: #1A1A1F;
  /* The design's .62, darkened just enough for 4.5:1 on every pastel
     (.65 is 4.52:1 on --s3, the darkest; .64 would be 4.38:1). */
  --blockMute: rgba(26, 26, 31, .65);
  --kw: #7A4DB8;
  --ty: #B85C2E;
  --fn: #1E7A68;
  --cm: #8A8580;
  /* The navigation's links once the page scrolls (see Header): the least
     darkening of --mute that reads at 4.5:1 or more over anything the
     header crosses, the dark footer included (3.6:1 for --mute). */
  --nav-mute: #5B5650;
  /* Pastels used as text on an --ink surface (the footer, the terminal). */
  --s1-on-ink: var(--s1);
  --s2-on-ink: var(--s2);
  --s3-on-ink: var(--s3);
  --s4-on-ink: var(--s4);
  --s5-on-ink: var(--s5);

  --serif: 'Instrument Serif', serif;
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.45, 0, .25, 1);
  --gutter: clamp(20px, 5vw, 48px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16151C;
    --paper2: #1F1E26;
    --ink: #F2EDE4;
    --mute: #A49E94;
    --line: rgba(242, 237, 228, .14);
    --s1: #F2DC8C;
    --s2: #B3E3C9;
    --s3: #CFC2F0;
    --s4: #F5BFA6;
    --s5: #B3D3F2;
    --blockInk: #1A1A1F;
    /* .67 is 4.58:1 on Dusk's --s3; .66 would be 4.44:1. */
    --blockMute: rgba(26, 26, 31, .67);
    --kw: #C9B2F2;
    --ty: #F5BFA6;
    --fn: #B3E3C9;
    --cm: #7E7A86;
    /* Over Dusk's light footer, --mute in the header is 4.4:1. */
    --nav-mute: #A9A398;
    /* --ink is light here, so pastel text on it is darkened to 4.5:1. */
    --s1-on-ink: #886400;
    --s2-on-ink: #247854;
    --s3-on-ink: #755FA2;
    --s4-on-ink: #A2562F;
    --s5-on-ink: #3D6E9A;
  }
}

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

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

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Whatever the browser scrolls to, a link's target or the next thing to get
   keyboard focus, stops below the sticky header (64-69 px tall). */
html { scroll-padding-top: 88px; }

body {
  min-height: 100vh;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  /* A short page still ends with the footer at the bottom of the window. */
  display: flex;
  flex-direction: column;
}

/* The roaming pointers may reach past the right edge on a phone. */
main {
  flex: 1 0 auto;
  overflow-x: hidden;
  overflow-x: clip;
}

/* The heaviest weight loaded; the browser would otherwise fake a bold. */
b, strong { font-weight: 600; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--s1); color: var(--blockInk); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Tabbing scrolls what gets focus into view with its outline, not only up
   to its edge. */
a, button, input, summary { scroll-margin-block: 8px; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  font: 500 13px var(--mono);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 999px;
}
.skip:focus { top: 12px; color: var(--paper); }

/* Background swatches, for blocks that take a pastel. */
.bg-s1 { background: var(--s1); }
.bg-s2 { background: var(--s2); }
.bg-s3 { background: var(--s3); }
.bg-s4 { background: var(--s4); }
.bg-s5 { background: var(--s5); }
.bg-paper2 { background: var(--paper2); }
.bg-pink { background: #F5C2D5; }
.bg-ink { background: var(--blockInk); }

/* Syntax colours */
.kw { color: var(--kw); }
.ty { color: var(--ty); }
.fn { color: var(--fn); }
.cm { color: var(--cm); }

/* ---- The two-circle mark -------------------------------------------- */

.mark {
  position: relative;
  display: block;
  flex: none;
  width: 32px;
  height: 20px;
}
.mark::before, .mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.mark::before { left: 0; background: var(--s1); }
.mark::after { left: 12px; background: var(--s3); }

.mark--xl { width: 160px; height: 100px; }
.mark--xl::before, .mark--xl::after { width: 100px; height: 100px; }
.mark--xl::after { left: 60px; }

/* ---- Pill buttons ---------------------------------------------------- */

.pill {
  font: 500 15px var(--mono);
  padding: 15px 24px;
  border-radius: 999px;
}
/* A form's buttons look like the pills links are: the browser's own button
   look goes here, before each kind of pill sets its colours and border. */
:where(button).pill {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  line-height: inherit;
  cursor: pointer;
}
.pill--ink { background: var(--ink); color: var(--paper); }
/* --s1 in Sorbet, as designed; Dusk's light pill needs the darker accent. */
.pill--ink:hover { background: var(--ink); color: var(--s1-on-ink); }
.pill--line {
  color: var(--ink);
  padding: 15px 22px;
  border: 1.5px solid var(--ink);
}
.pill--line:hover { background: var(--s5); color: var(--blockInk); }
.pill--line-s2:hover { background: var(--s2); }
.pill--sm {
  font-size: 13px;
  padding: 10px 16px;
  white-space: nowrap;
}

/* ---- Header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font: 400 26px/1 var(--serif); letter-spacing: -.01em; }

.nav-links {
  display: flex;
  gap: 22px;
  font-size: 13px;
  flex-wrap: wrap;
  color: var(--mute);
}
.nav-links a, .nav-signin { color: var(--mute); white-space: nowrap; }
.nav-links a:hover, .nav-signin:hover, .nav-links a[aria-current] { color: var(--ink); }

/* The header shows what scrolls under it, and over dark ink (a pill, a code
   block, the footer) --mute there is as low as 3.6:1. At the top of a page
   only the page's own paper is under it (every page starts with 56 px or
   more of it), so there the links are the design's --mute; over the first
   48 px of scrolling, before anything else reaches the header, they darken
   to --nav-mute, which reads at 4.5:1 or more over anything. A browser
   without scroll-driven animations shows --nav-mute throughout. */
@supports (animation-timeline: scroll()) {
  .nav-links a:not([aria-current]):not(:hover), .nav-signin:not(:hover) {
    animation: nav-scrolled linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 48px;
  }
}
@supports not (animation-timeline: scroll()) {
  .nav-links a, .nav-signin { color: var(--nav-mute); }
}
@keyframes nav-scrolled { from { color: var(--mute); } to { color: var(--nav-mute); } }

/* As tall as "sign in" (13 px × 1.6 + 8 + 8), which sets the header's
   height in the design, whether or not there is a "sign in". */
.nav-end { margin-left: auto; display: flex; gap: 8px; align-items: center; min-height: calc(13px * 1.6 + 16px); }
.nav-signin { font-size: 13px; padding: 8px 10px; }

/* ---- Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 112px) var(--gutter) 0;
}
.hero-inner { position: relative; max-width: 1240px; margin: 0 auto; }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--mute);
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--s2);
  color: var(--blockInk);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 500;
}
.version::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blockInk);
}
/* A way to stop the page's motion (WCAG 2.2.2), which the design doesn't
   have: small, at the end of the row, drawn like the design's outlined
   chips rather than as the browser's own checkbox, and gone where nothing
   moves (see Motion below). */
.motion-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  cursor: pointer;
}
.motion-toggle:hover { color: var(--ink); }
.motion-toggle input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  margin: 0;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.motion-toggle input:checked { background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
/* Forced colours drop the fill that shows it's checked: the browser's own. */
@media (forced-colors: active) {
  .motion-toggle input { -webkit-appearance: auto; appearance: auto; }
}

.hero-title {
  margin: 0;
  font: 400 clamp(52px, 9.2vw, 138px)/.94 var(--serif);
  letter-spacing: -.025em;
  max-width: 1100px;
  text-wrap: balance;
}
.hero-em { position: relative; display: inline-block; }
.hero-em em { font-style: italic; color: var(--ink); }

.ink-circle {
  position: absolute;
  left: -3%;
  top: -12%;
  width: 106%;
  height: 124%;
  pointer-events: none;
  overflow: visible;
}

.hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  align-items: end;
  margin-top: clamp(36px, 5vw, 64px);
}
.lead {
  margin: 0;
  max-width: 560px;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--mute);
  text-wrap: pretty;
}
.actions-end { display: flex; gap: 10px; flex-wrap: wrap; justify-self: end; }

.hero-pointers { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
/* The box the pointers roam. Below 1100 px the heading wraps onto more
   lines, and pointers roaming the whole hero would sit on the lead and the
   buttons for most of their loop: there they roam the heading alone. From
   1100 px, the whole hero, as designed. */
.hero-head { position: relative; }
@media (min-width: 1100px) {
  .hero-head { position: static; }
}

/* Named pointers: the hero's, and the smaller ones inside the demos. */
.ptr { position: absolute; }
.ptr svg { display: block; }
.ptr path { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.ptr-label {
  position: absolute;
  left: 18px;
  top: 24px;
  color: var(--blockInk);
  border: 1.5px solid var(--ink);
  font: 500 12px var(--mono);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ptr--s4 path { fill: var(--s4); }
.ptr--s4 .ptr-label { background: var(--s4); }
.ptr--s5 path { fill: var(--s5); }
.ptr--s5 .ptr-label { background: var(--s5); }

.ptr--ada { animation: ada 11s var(--ease) infinite; }
.ptr--sam { animation: sam 11s var(--ease) infinite; }

/* ---- Code window ----------------------------------------------------- */

.code-wrap {
  max-width: 1240px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  position: relative;
}
.code-window {
  position: relative;
  container-type: inline-size;
  border-radius: 18px;
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--s1), 8px 8px 0 1.5px var(--ink);
  overflow: hidden;
}
.cw-bar {
  height: 4cqw;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: 0 1.6cqw;
  border-bottom: 1.5px solid var(--ink);
  background: var(--s1);
  color: var(--blockInk);
}
.cw-dot {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  border: 1.5px solid var(--blockInk);
}
.cw-title { margin-left: 2cqw; font: 500 1.15cqw var(--mono); }
.cw-meta { margin-left: auto; font: 400 1.05cqw var(--mono); color: var(--blockMute); }
.cw-code {
  padding: 2.4cqw 0 2.8cqw;
  font: 400 1.35cqw/2.5cqw var(--mono);
  color: var(--ink);
}
.cw-line { display: flex; white-space: pre; height: 2.5cqw; }
.cw-ln { width: 5cqw; text-align: right; padding-right: 1.6cqw; color: var(--cm); }
.cw-line--hl { background: color-mix(in oklab, var(--s3) 45%, transparent); }
.cw-tag {
  margin-left: auto;
  margin-right: 1.6cqw;
  font-size: .95cqw;
  color: var(--blockInk);
  background: var(--s3);
  padding: 0 .8cqw;
  border-radius: .5cqw;
  align-self: center;
  line-height: 1.7cqw;
}
.caret {
  display: inline-block;
  width: .6cqw;
  height: 1.7cqw;
  background: var(--ink);
  vertical-align: -.3cqw;
  margin-left: .1cqw;
  animation: caret 1s steps(1) infinite;
}

/* ---- Stat cards ------------------------------------------------------ */

.stats {
  max-width: 1240px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}
.stat {
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--blockInk);
}
.stat-value { font: 400 44px/1 var(--serif); letter-spacing: -.02em; }
.stat-value--em { font-style: italic; }
.stat-unit { font-size: .55em; }
.stat-label { font-size: 12px; margin-top: 8px; color: var(--blockMute); }

/* ---- Feature bands --------------------------------------------------- */

.features { margin-top: clamp(72px, 9vw, 128px); }

/* A sheet with a rounded top that overlaps the one before it. */
.sheet {
  border-top: 1.5px solid var(--ink);
  border-radius: 36px 36px 0 0;
  margin-top: -36px;
}
.features > .sheet:first-child { margin-top: 0; }

.band {
  color: var(--blockInk);
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(80px, 9vw, 130px);
}
.band-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.eyebrow {
  font: 500 12.5px var(--mono);
  margin-bottom: 22px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.chip {
  border: 1.5px solid var(--blockInk);
  border-radius: 999px;
  padding: 3px 10px;
}
.band-title {
  margin: 0;
  font: 400 clamp(38px, 5vw, 66px)/.98 var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.band-lead {
  margin: 24px 0 0;
  max-width: 520px;
  text-wrap: pretty;
  color: var(--blockMute);
}
.band-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  max-width: 520px;
  border-left: 1.5px solid var(--blockInk);
  padding-left: 14px;
}

.specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  font-size: 14px;
  max-width: 560px;
}
.spec {
  display: flex;
  gap: 14px;
  align-items: baseline;
  border-top: 1px solid rgba(26, 26, 31, .2);
  padding-top: 12px;
}
.spec-key { font-weight: 500; min-width: 92px; font-size: 12px; }

.keys {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.key {
  font: 500 14px var(--mono);
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  vertical-align: middle;
  place-items: center;
  border-radius: 9px;
  background: var(--paper2);
  border: 1.5px solid var(--blockInk);
  box-shadow: 0 3px 0 var(--blockInk);
  /* The design's --blockInk vanishes on the dark keycap in Dusk; --ink is the same colour in Sorbet. */
  color: var(--ink);
}
.keys-note { font-size: 13px; margin-left: 8px; color: var(--blockMute); }

.bars {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  font-size: 13px;
}
.bars-caption { font-size: 12px; color: var(--blockMute); }
.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr;
  gap: 14px;
  align-items: center;
}
.bar-row--mute { color: var(--blockMute); }
.bar-cell { display: flex; align-items: center; gap: 10px; }
.bar { height: 14px; border-radius: 4px; }
.bar--ours { width: 32%; background: var(--blockInk); }
.bar--stock {
  width: 78%;
  border: 1.5px solid var(--blockInk);
  background: repeating-linear-gradient(135deg, rgba(26, 26, 31, .25) 0 4px, transparent 4px 8px);
}
.bar-value { font-weight: 500; }

.swatches { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--blockInk);
}

/* The 16:10 frame every demo plays in; demo sizes are in cqw of it. */
.demo {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  border: 1.5px solid var(--blockInk);
  background: var(--paper2);
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}

/* ---- Hosts, guests and security ------------------------------------- */

.hosts {
  background: var(--paper);
  padding: clamp(64px, 8vw, 110px) var(--gutter) 0;
}
.wrap { max-width: 1240px; margin: 0 auto; }
.hosts-title {
  margin: 0 0 36px;
  font: 400 clamp(34px, 4.2vw, 56px)/1 var(--serif);
  letter-spacing: -.025em;
  max-width: 720px;
  text-wrap: balance;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.card {
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 26px;
  background: var(--paper2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-label { font-size: 12px; color: var(--mute); }
.card-title { margin: 0; font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; }
.card-text { margin: 0; font-size: 13.5px; color: var(--mute); }

.terminal {
  font: 400 14px/1.7 var(--mono);
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 14px 16px;
}
.terminal .on-s1 { color: var(--s1-on-ink); }
.terminal .on-s2 { color: var(--s2-on-ink); }
.terminal .on-s4 { color: var(--s4-on-ink); }

.trust {
  margin-top: clamp(64px, 8vw, 100px);
  border-top: 1.5px solid var(--ink);
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 36px;
  align-items: start;
}
.trust-title {
  margin: 0;
  font: 400 clamp(30px, 3.6vw, 46px)/1.02 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.trust-text { margin: 0; color: var(--mute); text-wrap: pretty; }

.text-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 1.5px solid var(--ink);
}
.text-link:hover { color: var(--ink); border-bottom-color: transparent; }

/* ---- Download call to action ---------------------------------------- */

.cta {
  padding: clamp(100px, 13vw, 170px) var(--gutter) clamp(80px, 9vw, 120px);
  text-align: center;
}
.cta-mark { display: flex; justify-content: center; }
.cta-title {
  margin: 28px auto 0;
  max-width: 760px;
  font: 400 clamp(44px, 6.5vw, 92px)/.96 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.cta-price { margin: 22px auto 0; max-width: 520px; color: var(--mute); overflow-wrap: anywhere; }
.cta-actions {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-note { margin-top: 18px; font-size: 12px; color: var(--mute); }

/* ---- Footer ---------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 56px var(--gutter) 32px;
  border-radius: 36px 36px 0 0;
}
.site-footer :focus-visible { outline-color: var(--paper); }
/* The design's columns are at least 150 px; 160 keeps "Keyboard shortcuts" on
   one line on tablets (fewer, wider columns there) and is the same layout at
   1140 and 1440 px and on phones. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  font-size: 13px;
}
.footer-meta, .footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-meta { color: color-mix(in oklab, var(--paper) 60%, transparent); }
/* On Dusk's light footer, 60% is 4.47:1; 61% reaches 4.5:1. */
@media (prefers-color-scheme: dark) {
  .footer-meta { color: color-mix(in oklab, var(--paper) 61%, transparent); }
}
/* The company's name comes from the settings, up to 200 characters. */
.footer-meta p { margin: 0; overflow-wrap: anywhere; }
.footer-head { margin: 0; font-size: 12px; font-weight: 400; line-height: inherit; }
.footer-head--s1 { color: var(--s1-on-ink); }
.footer-head--s2 { color: var(--s2-on-ink); }
.footer-head--s4 { color: var(--s4-on-ink); }
.footer-head--s5 { color: var(--s5-on-ink); }
.site-footer a, .site-footer a:hover { color: var(--paper); }
/* Only where the navigation hides its own (Small screens, below). */
.footer-signin { display: none; }
.wordmark {
  margin-top: 56px;
  font: 400 clamp(96px, 22vw, 320px)/1 var(--serif);
  letter-spacing: -.04em;
  color: var(--paper);
  opacity: .95;
  padding-bottom: .18em;
}

/* ---- Demos: shared pieces ------------------------------------------- */

.d-fill { position: absolute; inset: 0; }

.d-ptr { z-index: 6; }
.d-ptr .ptr-label {
  left: 13px;
  top: 17px;
  border-width: 1.2px;
  font: 500 1.7cqw var(--mono);
  padding: .3cqw 1.1cqw;
}

/* A window's title bar */
.d-bar {
  height: 5.5cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0 2cqw;
  border-bottom: 1.5px solid var(--ink);
  color: var(--blockInk);
}
.d-dot {
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  border: 1.2px solid var(--blockInk);
}
.d-title { margin-left: 1.5cqw; font: 500 1.7cqw var(--mono); }

.d-code { padding: 2cqw 0; }
.d-line {
  display: flex;
  white-space: pre;
  height: 3.6cqw;
  font: 400 2cqw/3.6cqw var(--mono);
  color: var(--ink);
}
.d-ln { width: 6cqw; text-align: right; padding-right: 2cqw; color: var(--cm); }

/* 01 Dock reach */
.d1-win {
  position: absolute;
  left: 5%;
  top: 7%;
  width: 90%;
  height: 86%;
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  border-radius: 1.8cqw;
  overflow: hidden;
}
.d1-dock {
  position: absolute;
  left: 50%;
  bottom: 1.5cqw;
  display: flex;
  gap: 1.1cqw;
  padding: 1.1cqw;
  border-radius: 2.6cqw;
  background: color-mix(in oklab, var(--paper2) 75%, transparent);
  border: 1.5px solid var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 5;
  animation: d1dock 9s var(--ease) infinite;
}
.d1-tile {
  width: 6cqw;
  height: 6cqw;
  border-radius: 1.5cqw;
  border: 1.2px solid var(--ink);
}
.d1-tile--bounce { animation: d1bounce 9s var(--ease) infinite; }
.d1-ptr { animation: d1cur 9s var(--ease) infinite; }

/* 02 Sharpness */
.d2-text { position: absolute; inset: 0; width: 100cqw; }
.d2-text--blur { filter: blur(.22cqw); opacity: .85; }
.d2-sweep {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  border-right: 2px solid var(--ink);
  z-index: 3;
  animation: d2w 8s var(--ease) infinite;
}
.d2-chip {
  position: absolute;
  bottom: 2.5cqw;
  z-index: 4;
  font: 500 1.7cqw var(--mono);
  color: var(--blockInk);
  border: 1.2px solid var(--ink);
  border-radius: 999px;
  padding: .6cqw 1.4cqw;
}
.d2-chip--right { right: 2.5cqw; }
.d2-chip--left { left: 2.5cqw; }

/* 03 Draw and react */
.d3-fail { background: color-mix(in oklab, var(--s4) 45%, transparent); }
.d3-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.d3-pop {
  position: absolute;
  left: 58%;
  top: 58%;
  font: 7cqw/1 system-ui;
  transform-origin: center;
  animation: d3pop 9s var(--ease) infinite;
}
.d3-ptr { animation: d3cur 9s var(--ease) infinite; }
.d3-tools {
  position: absolute;
  left: 50%;
  bottom: 2.2cqw;
  transform: translateX(-50%);
  display: flex;
  gap: .8cqw;
  align-items: center;
  padding: .9cqw 1.4cqw;
  border-radius: 999px;
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  font: 500 1.7cqw var(--mono);
  white-space: nowrap;
  /* The design leaves it the band's --blockInk, which vanishes on Dusk's
     dark --paper2; --ink is the same colour in Sorbet. */
  color: var(--ink);
}
.d3-swatch {
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: var(--s4);
  border: 1.2px solid var(--ink);
}
.d3-sep { margin: 0 .6cqw; width: 1px; height: 2.4cqw; background: var(--line); }
.d3-keep { color: var(--mute); }

/* Ink strokes: the hero's ellipse and the one drawn in demo 03 */
.ink-stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
}
.ink-circle .ink-stroke { animation: ink 11s var(--ease) infinite; }
.d3-ink .ink-stroke { animation: d3ink 9s var(--ease) infinite; }

/* 04 Notes */
.d4-win {
  position: absolute;
  left: 6%;
  top: 16%;
  width: 88%;
  height: 90%;
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  border-radius: 1.8cqw 1.8cqw 0 0;
  overflow: hidden;
}
.d4-body {
  padding: 2.4cqw 3cqw;
  display: flex;
  flex-direction: column;
  gap: .9cqw;
}
.d4-line {
  font: 400 2cqw/2.8cqw var(--mono);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  min-height: 2.8cqw;
  animation: d4reveal 11s var(--ease) infinite;
}
.d4-line--strong { font-weight: 500; }
.d4-line--mute { color: var(--mute); }
.d4-line:nth-child(2) { animation-delay: .45s; }
.d4-line:nth-child(3) { animation-delay: .9s; }
.d4-line:nth-child(4) { animation-delay: 1.35s; }
.d4-line:nth-child(5) { animation-delay: 1.8s; }
.d4-line:nth-child(6) { animation-delay: 2.25s; }
.d4-line:nth-child(7) { animation-delay: 2.7s; }
.d4-line:nth-child(8) { animation-delay: 3.15s; }
.d4-line:nth-child(9) { animation-delay: 3.6s; }
.d4-card {
  position: absolute;
  right: 4%;
  top: 4%;
  display: flex;
  gap: 1.4cqw;
  align-items: center;
  padding: 1.2cqw 1.6cqw;
  border-radius: 1.6cqw;
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  box-shadow: .6cqw .6cqw 0 var(--s4), .6cqw .6cqw 0 1.5px var(--ink);
  z-index: 4;
  animation: d4card 11s var(--ease) infinite;
}
.d4-thumb {
  width: 3.6cqw;
  height: 4.4cqw;
  border-radius: .6cqw;
  background: var(--s4);
  border: 1.2px solid var(--ink);
}
.d4-card-text { display: flex; flex-direction: column; gap: .2cqw; }
.d4-card-title { font: 500 1.9cqw var(--mono); color: var(--ink); }
.d4-card-sub { font: 400 1.6cqw var(--mono); color: var(--mute); }
.d4-open {
  margin-left: 1cqw;
  font: 500 1.6cqw var(--mono);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: .6cqw 1.4cqw;
}

/* 05 Agent */
.d5-body {
  padding: 2.4cqw 3cqw;
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
  font: 400 1.9cqw/1.5 var(--mono);
  color: var(--ink);
}
.d5-msg { display: flex; gap: 1.2cqw; }
.d5-avatar {
  flex: none;
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: var(--s4);
  border: 1.2px solid var(--ink);
  display: grid;
  place-items: center;
  font: 500 1.5cqw var(--mono);
  /* On a pastel: dark in both themes (the design's --ink is light in Dusk). */
  color: var(--blockInk);
}
.d5-reply { color: var(--mute); padding-left: 4.2cqw; }
.d5-box {
  margin-left: 4.2cqw;
  border: 1.5px solid var(--ink);
  border-radius: 1.4cqw;
  overflow: hidden;
  position: relative;
}
.d5-ask {
  padding: 1.2cqw 1.6cqw;
  border-bottom: 1.5px solid var(--ink);
  background: var(--s1);
  color: var(--blockInk);
  font: 500 1.7cqw var(--mono);
}
.d5-diff {
  font: 400 1.7cqw/3cqw var(--mono);
  padding: .8cqw 0;
  animation: d5diff 9s var(--ease) infinite;
}
.d5-del, .d5-add { padding: 0 1.6cqw; white-space: pre; }
.d5-del { background: color-mix(in oklab, var(--s4) 55%, transparent); }
.d5-add { background: color-mix(in oklab, var(--s2) 70%, transparent); }
.d5-actions {
  display: flex;
  gap: 1cqw;
  padding: 1.2cqw 1.4cqw;
  border-top: 1.5px solid var(--ink);
  font: 500 1.6cqw var(--mono);
  align-items: center;
}
.d5-deny { padding: .7cqw 1.4cqw; border-radius: 999px; border: 1.2px solid var(--ink); }
.d5-ok { animation: d5ok 9s var(--ease) infinite; color: var(--fn); margin-left: 1cqw; }
.d5-allow {
  margin-left: auto;
  padding: .7cqw 1.6cqw;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  animation: d5btn 9s var(--ease) infinite;
}
.d5-ptr { animation: d5cur 9s var(--ease) infinite; }

/* Dusk: the design's tinted rows (45-70% pastel over the dark --paper2) are
   mid-tones that neither light nor dark text reads on. Each tint here is the
   strongest whole percent that keeps every colour on its row at 4.5:1 or
   more however a browser rounds the blend (one point stronger passes in
   Chrome alone): --kw on the hero's line 7, --ty on demo 03's failing line,
   --ink on demo 05's diff. The line number is --ink, as an editor shows the
   current line's. */
@media (prefers-color-scheme: dark) {
  .cw-line--hl { background: color-mix(in oklab, var(--s3) 26%, transparent); }
  .d3-fail { background: color-mix(in oklab, var(--s4) 31%, transparent); }
  .d5-del { background: color-mix(in oklab, var(--s4) 44%, transparent); }
  .d5-add { background: color-mix(in oklab, var(--s2) 41%, transparent); }
  .cw-line--hl .cw-ln, .d3-fail .d-ln { color: var(--ink); }
}

/* ---- Motion, as designed --------------------------------------------- */

@keyframes ada { 0% { left: 78%; top: 12%; } 14% { left: 22%; top: 58%; } 20% { left: 30%; top: 52%; } 26% { left: 52%; top: 52%; } 32% { left: 62%; top: 60%; } 36% { left: 44%; top: 66%; } 42%, 70% { left: 18%; top: 62%; } 86% { left: 70%; top: 20%; } 100% { left: 78%; top: 12%; } }
@keyframes sam { 0%, 30% { left: 96%; top: 70%; } 44% { left: 66%; top: 40%; } 56%, 80% { left: 8%; top: 30%; } 92% { left: 60%; top: 78%; } 100% { left: 96%; top: 70%; } }
@keyframes ink { 0%, 20% { stroke-dashoffset: 100; opacity: 1; } 40%, 66% { stroke-dashoffset: 0; opacity: 1; } 76%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes d1cur { 0%, 12% { left: 58%; top: 28%; } 38%, 74% { left: 26%; top: 80%; } 100% { left: 58%; top: 28%; } }
@keyframes d1dock { 0%, 36% { transform: translate(-50%, 150%); } 44%, 80% { transform: translate(-50%, 0); } 88%, 100% { transform: translate(-50%, 150%); } }
@keyframes d1bounce { 0%, 52% { transform: translateY(0); } 56% { transform: translateY(-35%); } 60% { transform: translateY(0); } 63% { transform: translateY(-14%); } 66%, 100% { transform: translateY(0); } }
@keyframes d2w { 0%, 8% { width: 28%; } 48%, 58% { width: 76%; } 100% { width: 28%; } }
@keyframes d3cur { 0% { left: 72%; top: 16%; } 18%, 24% { left: 9%; top: 36%; } 34% { left: 60%; top: 44%; } 44% { left: 14%; top: 40%; } 50%, 70% { left: 52%; top: 72%; } 100% { left: 72%; top: 16%; } }
@keyframes d3ink { 0%, 22% { stroke-dashoffset: 100; opacity: 1; } 46%, 70% { stroke-dashoffset: 0; opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d3pop { 0%, 54% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 64%, 84% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes d4reveal { 0% { max-width: 0; } 10% { max-width: 100%; } 86% { max-width: 100%; } 92%, 100% { max-width: 0; } }
@keyframes d4card { 0%, 4% { transform: translateY(-120%); opacity: 0; } 10%, 80% { transform: none; opacity: 1; } 86%, 100% { transform: translateY(-120%); opacity: 0; } }
@keyframes d5cur { 0%, 8% { left: 28%; top: 34%; } 34%, 56% { left: 81%; top: 83%; } 78% { left: 40%; top: 52%; } 100% { left: 28%; top: 34%; } }
@keyframes d5btn { 0%, 40% { transform: scale(1); } 44% { transform: scale(.93); } 48%, 100% { transform: scale(1); } }
@keyframes d5diff { 0%, 50% { opacity: 1; } 54%, 100% { opacity: .35; } }
@keyframes d5ok { 0%, 50% { opacity: 0; transform: translateY(6px); } 56%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* No motion: the frame the design shows with its animation switched off. */
@media (prefers-reduced-motion: reduce) {
  .ptr--ada, .ptr--sam, .ink-circle .ink-stroke, .d3-ink .ink-stroke,
  .d1-dock, .d1-tile--bounce, .d1-ptr, .d2-sweep, .d3-pop, .d3-ptr,
  .d4-line, .d4-card, .d5-diff, .d5-ok, .d5-allow, .d5-ptr {
    animation-play-state: paused;
    animation-delay: -5s;
  }
  .d4-line:nth-child(2) { animation-delay: -4.55s; }
  .d4-line:nth-child(3) { animation-delay: -4.1s; }
  .d4-line:nth-child(4) { animation-delay: -3.65s; }
  .d4-line:nth-child(5) { animation-delay: -3.2s; }
  .d4-line:nth-child(6) { animation-delay: -2.75s; }
  .d4-line:nth-child(7) { animation-delay: -2.3s; }
  .d4-line:nth-child(8) { animation-delay: -1.85s; }
  .d4-line:nth-child(9) { animation-delay: -1.4s; }
  /* Two demos show their point a little later in the loop than -5s, which
     catches the sweep past the end of the blurred code and the reaction as
     a speck: the sweep about 40% across, and the reaction at full size. */
  .d2-sweep { animation-delay: -1.56s; }
  .d3-pop { animation-delay: -6.66s; }
  .caret { animation: none; }
  /* Nothing moves, so nothing to pause. */
  .motion-toggle { display: none; }
}
/* "pause animations": everything stops where it is, and the caret shows. */
:root:has(#pause-motion:checked) *,
:root:has(#pause-motion:checked) *::before,
:root:has(#pause-motion:checked) *::after { animation-play-state: paused; }
:root:has(#pause-motion:checked) .caret { animation: none; }
/* The navigation's colour follows scrolling, not time (see Header). */
:root:has(#pause-motion:checked) :is(.nav-links a, .nav-signin) { animation-play-state: running; }
/* A browser without :has() couldn't act on it: no control rather than one
   that does nothing. */
@supports not selector(:has(*)) {
  .motion-toggle { display: none; }
}

/* ---- Pages other than home ------------------------------------------ */

.page { padding: clamp(56px, 9vw, 112px) var(--gutter) clamp(80px, 9vw, 120px); }
.page-inner { max-width: 760px; margin: 0 auto; }
.page-title {
  margin: 0;
  font: 400 clamp(44px, 6.5vw, 92px)/.96 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
  /* A team's name can be one long word: it wraps rather than being cut off. */
  overflow-wrap: anywhere;
}
.page-lead {
  margin: 24px 0 0;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--mute);
  text-wrap: pretty;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 0; }
.details { margin: 18px 0 0; font-size: 12px; color: var(--mute); }
.muted { color: var(--mute); }
.small { font-size: 13.5px; }
/* Defaults for plain paragraphs, kept as weak as a type selector (:where),
   so a class's own margin (.page-lead, .details, .note, .toc-title) wins. */
:where(.page) p { margin: 16px 0 0; }
:where(.page) :where(.actions, .note, .steps) + p { margin-top: 24px; }
.page a:not(.pill) { border-bottom: 1.5px solid var(--ink); }
.page a:not(.pill):hover { border-bottom-color: transparent; }
.toc a:not(.pill) { border-bottom: 0; }
.page code {
  font: inherit;
  font-size: .93em;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.note {
  margin: 28px 0 0;
  font-size: 13.5px;
  border-left: 1.5px solid var(--ink);
  padding-left: 14px;
}
.note p:first-child { margin-top: 0; }

.call-code {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font: 500 clamp(32px, 6vw, 56px)/1.15 var(--mono);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

/* Numbered steps, with pill numbers like the design's "01" chips */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.steps > li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  flex: none;
  font: 500 12.5px var(--mono);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Account pages: signing in, your account, a team, pricing (lib/account-pages.js) */
.form { margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* A field with its button beside it where there's room: a name to save. */
.form--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.form--row .field { flex: 1 1 260px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-label { font-size: 13px; color: var(--mute); }
.input {
  /* 16 px, so phones don't zoom in when it gets focus. */
  font: 400 16px/1.4 var(--mono);
  color: var(--ink);
  background: var(--paper2);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 13px 16px;
  width: 100%;
  min-width: 0;
}
.input--code { font-size: 22px; letter-spacing: .2em; max-width: 12ch; }
.code-display {
  color: var(--ink);
  font: 500 clamp(32px, 6vw, 48px)/1.15 var(--mono);
  letter-spacing: .1em;
}
.notice {
  margin: 24px 0 0;
  font-size: 14px;
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--s2);
  color: var(--blockInk);
}
.notice--error { background: var(--s4); }
:where(.page) .notice p { margin: 0; }
.account-section { margin-top: 56px; }
.section-title {
  margin: 0;
  font: 400 clamp(28px, 3.2vw, 40px)/1.05 var(--serif);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.rows { list-style: none; margin: 16px 0 0; padding: 0; }
.row {
  display: flex;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.row:last-child { border-bottom: 1px solid var(--line); }
/* Names come from people (up to 64 characters): they wrap, not overflow. */
.row-main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.row-meta { font-size: 12.5px; color: var(--mute); }
.tag {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  color: var(--mute);
  white-space: nowrap;
}
.inline-form { margin: 0; }
.price-cards { margin-top: 32px; }
.price { margin: 0; font: 400 clamp(44px, 5vw, 64px)/1 var(--serif); letter-spacing: -.02em; }

/* Long-form pages: security and docs */
.doc-layout {
  max-width: 1064px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.toc { display: none; }
.prose { max-width: 760px; min-width: 0; }
.prose h2 {
  margin: 72px 0 0;
  font: 400 clamp(30px, 3.6vw, 46px)/1.02 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.prose h3 {
  margin: 36px 0 0;
  font: 400 26px/1.15 var(--serif);
  letter-spacing: -.01em;
}
/* Plain lists; .steps keeps its own margin and padding (:where adds nothing). */
:where(.prose) :where(ul, ol) { margin: 16px 0 0; padding-left: 22px; }
:where(.prose) li { margin-top: 8px; }
.prose li::marker { color: var(--mute); }
/* Long commands wrap rather than hide past the edge of a scrolling box. If
   something still can't (wider text spacing on the narrowest phones), the
   box scrolls rather than the page's edge cutting it off. */
.prose pre {
  margin: 18px 0 0;
  font: 400 14px/1.7 var(--mono);
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
}
/* A line apiece (a flex container shows none of the newlines between them),
   and one that wraps carries on under its command, past the "$ ". */
.prose pre code {
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.prose .sh { padding-left: 2ch; text-indent: -2ch; }
/* A word of a command never breaks: a host name or flag cut in two reads as
   something else. Lines wrap between words instead, or as a last resort
   after the "=" of a NAME=value (site.js, shell()). */
.prose .tok { white-space: nowrap; }
.prose .on-s2 { color: var(--s2-on-ink); }
/* Phones: commands a size smaller and out into the page's margin, so that
   the longest word, "$ SERVER_URL=wss://pair.example.com" (35 characters),
   fits on a line from 320 px (with wider text spacing, it breaks after its
   "="). */
@media (max-width: 480px) {
  .prose pre { margin-inline: -12px; padding-inline: 12px; font-size: 13px; }
}
@media (max-width: 359px) {
  .prose pre { font-size: 12px; }
}

.shortcuts {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shortcut {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.shortcut dt { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.keycaps { display: inline-flex; gap: 4px; vertical-align: middle; }
.shortcut dd { margin: 0; }
.key--sm {
  font-size: 13px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 8px;
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  background: var(--paper2);
  color: var(--ink);
}

@media (min-width: 1024px) {
  .doc-layout { grid-template-columns: 196px minmax(0, 760px); gap: 72px; }
  .toc {
    display: block;
    position: sticky;
    top: 104px;
    align-self: start;
    font-size: 13px;
  }
  .toc-title { margin: 0 0 12px; font-size: 12px; color: var(--mute); }
  .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .toc a { color: var(--mute); }
  .toc a:hover { color: var(--ink); }
}
/* A long table of contents (the security page's is about 500 px tall, so
   it needs 600 px below the sticky top) sticks only in a window tall enough
   to show all of it. In a shorter one it stays at the top of the page, so
   every link in it can be scrolled to, and its focus seen. */
@media (min-width: 1024px) and (max-height: 639px) {
  .toc--long { position: static; }
}

/* ---- Small screens --------------------------------------------------- */

/* Phones keep the logo, the download pill and, with room, "sign in" (the
   footer has the rest). */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav { padding-block: 12px; }
  .bar-value { white-space: nowrap; }
  /* Sam's name, at the right of the pointers' box for part of the loop,
     would reach past the edge of the screen: the box stops short of it. */
  .hero-pointers { right: 48px; }
}
/* Everything there is to tap is at least 40 px tall on a phone, held either
   way (a phone on its side is 740-932 px wide). From 1024 px, a touch
   screen (a tablet held sideways) gets the design's sizes, as a mouse
   does: its targets are spaced far enough apart (WCAG 2.5.8). */
@media (max-width: 720px), (pointer: coarse) and (max-width: 1023px) {
  .brand { min-height: 40px; }
  .pill--sm, .nav-signin { padding-block: 10px; line-height: 20px; }
  .footer-col { gap: 0; }
  .footer-col a { padding-block: 10px; }
  /* Taller by the room above it, so its underline stays under the words. */
  .text-link { margin-top: 0; padding-top: 18px; }
  .motion-toggle { min-height: 40px; }
}
/* With a finger, the navigation's links are 40 px tall to tap too, without
   making the header any taller. */
@media (pointer: coarse) and (max-width: 1023px) {
  .nav-links a { padding-block: 10px; margin-block: -10px; }
}
@media (max-width: 480px) {
  .nav-signin { display: none; }
  .footer-signin { display: block; }
  /* Room for wider text (WCAG text spacing) and for 320-px screens. */
  .nav { gap: 12px; }
}
/* Narrower still, "Download" alone, so wider text fits on one row too. */
@media (max-width: 359px) {
  .pill-more { display: none; }
}
/* With pricing, compare and sign in all set, the links need about 880 px. */
@media (max-width: 900px) {
  .nav:has(.nav-links > :nth-child(5)) .nav-links,
  .nav:has(.nav-signin):has(.nav-links > :nth-child(4)) .nav-links { display: none; }
}

/* Nothing alone under a full row: the four stat cards 2 × 2 rather than
   3 + 1, the third host card across the row rather than alone under the
   other two, and the footer's "Made for pairs." across the top when that
   evens out its columns. Each is keyed to the width of its own grid
   (container queries), not the window's, which a classic scrollbar makes
   15 px wider than the page. The widths are where auto-fit adds a column:
   stats 200 px + 12 px gaps (3 columns from 624, 4 from 836), host cards
   300 + 14 (2 from 614, 3 from 928), footer 160 + 28 (2 from 348, 3 from
   536, 4 from 724, 5 from 912). */
.hero { container: hero / inline-size; }
.cards { container: cards / inline-size; }
.footer-cols { container: footer-cols / inline-size; }
@container hero (624px <= width < 836px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cards (614px <= width < 928px) {
  .cards > :nth-child(3) { grid-column: 1 / -1; }
}
/* Three columns of links (no legal links) in three columns: 1 + 3. */
@container footer-cols (536px <= width < 724px) {
  .footer-meta:nth-last-child(4) { grid-column: 1 / -1; }
}
/* Four columns of links in two or four columns: 1 + 2 + 2, or 1 + 4. */
@container footer-cols (348px <= width < 536px) {
  .footer-meta:nth-last-child(5) { grid-column: 1 / -1; }
}
@container footer-cols (724px <= width < 912px) {
  .footer-meta:nth-last-child(5) { grid-column: 1 / -1; }
}

/* Forced colours (Windows High Contrast) drop backgrounds: the filled pills
   get a border, in place of as much padding, to keep their shape and size. */
@media (forced-colors: active) {
  .pill--ink { border: 1.5px solid; padding: 13.5px 22.5px; }
  .pill--ink.pill--sm { padding: 8.5px 14.5px; }
}

@media (max-width: 560px) {
  .actions-end { justify-self: stretch; flex-direction: column; }
  .actions-end .pill, .actions .pill, .form-actions .pill { text-align: center; }
  .actions, .form-actions { flex-direction: column; }
  .shortcut { grid-template-columns: 1fr; gap: 8px; }
}