/*
 * www.twogamesplus.com: the approved mockup's look, as a real site. The app's
 * brand colours (docs/brand.md) and its verdict colours, light and dark by the
 * visitor's own setting; Roboto Flex for words and Roboto Mono for times, both
 * served from this site. No inline styles anywhere (the content security
 * policy has no 'unsafe-inline'): the demo sets positions through CSSOM.
 */

@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-display: swap;
  font-weight: 300 850;
  font-stretch: 55% 140%;
  src: url('/fonts/roboto-flex-latin-opsz-wght-wdth.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url('/fonts/roboto-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ground: #f4f7f9;
  --paper: #ffffff;
  --mist: #e3eaef;
  --line: #d3dde4;
  --ink: #10222e;
  --ink-2: #3c4a54;
  --ink-3: #5c6c77;
  --brand-ink: #134b70;
  --orange: #f9b872;
  --on-orange: #10222e;
  --teal: #2ec4b6;
  --hero: #134b70;
  --hero-2: #1b5c87;
  --on-hero: #ffffff;
  --on-hero-2: #cfe0ea;
  --ok: #1f9e92;
  --ok-ink: #0f6b63;
  --tight: #a8640f;
  --conflict: #c9391a;
  --on-fill: #ffffff;
  --ok-soft: #cdebe8;
  --tight-soft: #f3ddbe;
  --conflict-soft: #f6d0c6;
  --team-a: #2ec4b6;
  --team-a-soft: #bdeee9;
  --team-b: #1b5c87;
  --team-b-soft: #c9dcea;
  --handed: #b7c3cb;
  --offer-bg: #fdecd6;
  --shadow: 0 1px 2px rgba(16, 34, 46, 0.06), 0 8px 24px rgba(16, 34, 46, 0.08);
  --f-body: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0e1a22;
    --paper: #16242e;
    --mist: #1e313d;
    --line: #2a3c48;
    --ink: #e6eef3;
    --ink-2: #c3d0d9;
    --ink-3: #93a5b1;
    --brand-ink: #6fb4dc;
    --hero: #0f2c40;
    --hero-2: #153a52;
    --on-hero-2: #b9cfdc;
    --ok: #2ec4b6;
    --ok-ink: #2ec4b6;
    --tight: #f9b872;
    --conflict: #ff8a6b;
    --on-fill: #0e1a22;
    --ok-soft: #173d3a;
    --tight-soft: #4a3a22;
    --conflict-soft: #4a2620;
    --team-a-soft: #1d4a48;
    --team-b: #6fb4dc;
    --team-b-soft: #22435a;
    --handed: #4a5a65;
    --offer-bg: #3a2d1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

/* ---------- The moment, the interval, and what needs a script ---------- */

[hidden] {
  display: none !important;
}

[data-when],
.i-month,
.i-year {
  display: contents;
}

html[data-moment='before'] [data-when]:not([data-when~='before']),
html[data-moment='open'] [data-when]:not([data-when~='open']),
html[data-moment='offer'] [data-when]:not([data-when~='offer']),
html[data-moment='after'] [data-when]:not([data-when~='after']),
html:not([data-interval='year']) .i-year,
html[data-interval='year'] .i-month {
  display: none !important;
}

/*
 * What needs a script (the demo's scenario buttons, timeline and controls,
 * the menu button, the count to the doors) is hidden only where scripts
 * cannot run, the `scripting` media feature, and holds its room from the
 * first paint everywhere else. It used to wait for site.js to add `.js`, and
 * that module runs after the page may have painted: the home page then
 * moved as they appeared, the hero 110 px at 1280 (a layout shift of 0.18)
 * and 0.09 at 412 from the count and the menu button (2026-09-26). Their
 * sizes are the stylesheet's, so the scripts fill them without moving
 * anything; the count shows its dashes until site.js has the time.
 */
@media (scripting: none) {
  .js-only,
  .menu-btn,
  .countdown {
    display: none !important;
  }
}

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

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a {
  color: var(--brand-ink);
}

button {
  font: inherit;
  color: inherit;
}

img,
video,
svg {
  max-width: 100%;
}

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

main:focus {
  outline: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 650;
  box-shadow: var(--shadow);
}

.skip:focus {
  top: 12px;
}

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

.stack {
  display: grid;
  gap: 24px;
}

.stack-lg {
  display: grid;
  gap: 28px;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.display,
.h2,
.h3 {
  text-wrap: balance;
  margin: 0;
}

.display {
  font-size: 64px;
  line-height: 0.98;
  font-weight: 820;
  font-stretch: 58%;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.01em;
}

.display-sm {
  font-size: 44px;
}

.h2 {
  font-size: 42px;
  line-height: 1.02;
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: 'opsz' 96;
}

.h2-sm {
  font-size: 30px;
}

.h3 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 680;
  font-stretch: 92%;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn-go {
  background: var(--orange);
  color: var(--on-orange);
}

.btn-go:hover {
  filter: brightness(1.04);
}

.btn-solid {
  background: var(--brand-ink);
  color: var(--paper);
}

.btn-line {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}

.btn-on-dark {
  color: var(--on-hero);
}

.btn-sm {
  min-height: 40px;
  padding: 7px 14px;
  font-size: 14px;
}

.is-closed {
  cursor: default;
}

@media (max-width: 820px) {
  .display {
    font-size: 48px;
  }

  .display-sm {
    font-size: 38px;
  }

  .h2 {
    font-size: 34px;
  }

  .h2-sm {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .display {
    font-size: 40px;
  }

  .display-sm {
    font-size: 34px;
  }

  .h2 {
    font-size: 30px;
  }

  .lede {
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  .wrap {
    padding-inline: 16px;
  }
}

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

.hdr {
  background: var(--hero);
  color: var(--on-hero);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.mark {
  width: 36px;
  height: 36px;
  flex: none;
}

.mark-sm {
  width: 30px;
  height: 30px;
}

.word {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.word-sm {
  font-size: 19px;
}

.word .plus {
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.04em;
  transform: translateY(-0.02em);
}

.word .tm {
  font-size: 0.45em;
  font-weight: 600;
  align-self: flex-start;
  margin-left: 0.12em;
  margin-top: 0.3em;
}

.nav {
  display: flex;
  gap: 22px;
  margin-left: 12px;
}

.nav a {
  color: var(--on-hero-2);
  text-decoration: none;
  font-weight: 520;
  font-size: 15px;
  padding-block: 8px;
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--on-hero);
}

.nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.hdr-cta {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
}

.hdr-cta .signin {
  color: var(--on-hero);
  text-decoration: none;
  font-weight: 560;
  font-size: 15px;
  padding: 10px 4px;
}

.menu-btn {
  display: none;
  margin-left: auto;
  min-height: 40px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: var(--on-hero);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
}

.menu {
  display: none;
}

@media (max-width: 900px) {
  .nav,
  .hdr-cta .signin {
    display: none;
  }
}

@media (max-width: 640px) {
  .hdr-cta {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
    align-items: center;
  }

  .menu:not([hidden]) {
    display: grid;
    gap: 0;
    padding-bottom: 16px;
  }

  .menu a {
    color: var(--on-hero);
    text-decoration: none;
    padding: 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 560;
  }

  .menu a[aria-current='page'] {
    color: var(--orange);
  }

  .menu .btn {
    margin-top: 12px;
    border-top: 0;
    justify-self: start;
    padding-inline: 24px;
  }
}

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

.hero {
  background: var(--hero);
  color: var(--on-hero);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  right: -180px;
  bottom: -320px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: var(--hero-2);
}

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-block: 56px 72px;
}

.hero .eyebrow {
  color: var(--orange);
}

.hero-copy {
  display: grid;
  gap: 22px;
  align-content: start;
}

.hero .lede {
  color: var(--on-hero-2);
}

.hero-open,
.hero-before {
  display: grid;
  gap: 14px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-note {
  color: var(--on-hero-2);
  font-size: 15px;
  margin: 0;
}

.opens {
  font-weight: 650;
  margin: 0;
}

.countdown {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cd-unit {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 76px;
  text-align: center;
}

.cd-num {
  display: block;
  font-family: var(--f-mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cd-lab {
  font-size: 12px;
  color: var(--on-hero-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-block: 40px 48px;
  }
}

@media (max-width: 380px) {
  .cd-unit {
    min-width: 0;
    flex: 1;
    padding-inline: 8px;
  }
}

/* ---------- The demo ---------- */

.demo {
  background: var(--paper);
  color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(4, 20, 31, 0.35);
  padding: 20px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.demo-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.demo-day {
  margin: 0;
  font-weight: 760;
  font-size: 22px;
  font-stretch: 80%;
}

.scn {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scn button {
  border: 1px solid var(--line);
  background: transparent;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
}

.scn button[aria-pressed='true'] {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--paper);
  font-weight: 650;
}

.steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 74px 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-block: 7px;
}

.step-t {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--line);
}

.step-dot.a {
  background: var(--team-a);
}

.step-dot.b {
  background: var(--team-b);
}

.step-dot.home {
  background: transparent;
  border: 2px solid var(--ink-3);
}

.step-dot.drive {
  background: transparent;
  border: 2px dashed var(--ink-3);
}

.step-main {
  display: grid;
  gap: 1px;
}

.step-title {
  font-weight: 640;
  font-size: 15px;
}

.step-sub {
  font-size: 13px;
  color: var(--ink-3);
}

.step.is-handed .step-title,
.step.is-handed .step-t {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.tl {
  display: grid;
  gap: 6px;
}

.tl-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.tl-lab {
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
}

.tl-track {
  position: relative;
  height: 16px;
  background: var(--mist);
  border-radius: 5px;
}

.tl-ticks {
  background: transparent;
}

.tick {
  position: absolute;
  top: 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  transform: translateX(-50%);
  white-space: nowrap;
}

.seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  transition:
    left 0.18s ease,
    width 0.18s ease;
}

.seg.a {
  background: var(--team-a);
}

.seg.a-soft {
  background: var(--team-a-soft);
}

.seg.b {
  background: var(--team-b);
}

.seg.b-soft {
  background: var(--team-b-soft);
}

.seg.handed {
  background: var(--handed);
}

.seg.drive {
  top: 6px;
  bottom: 6px;
  background: repeating-linear-gradient(90deg, var(--ink-2) 0 7px, transparent 7px 11px);
  border-radius: 2px;
}

.seg.spare-ok {
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 1.5px var(--ok);
}

.seg.spare-tight {
  background: var(--tight-soft);
  box-shadow: inset 0 0 0 1.5px var(--tight);
}

.seg.short {
  background: repeating-linear-gradient(
    135deg,
    var(--conflict) 0 3px,
    var(--conflict-soft) 3px 7px
  );
}

.ctl {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.ctl-controls {
  display: grid;
  gap: 10px;
}

.ctl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
}

.ctl label,
.ctl-q {
  font-size: 14px;
  font-weight: 600;
}

.ctl output {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-2);
}

/* The demo's slider: 44 px to hit, with a thumb a thumb can find (40 px is the floor). */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--brand-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

input[type='range']::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--brand-ink);
}

input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--brand-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.who {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--mist);
  border-radius: 20px;
  padding: 3px;
}

.who button {
  border: 0;
  background: transparent;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}

.who button[aria-pressed='true'] {
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-weight: 650;
}

.verdict {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

.chip svg {
  width: 15px;
  height: 15px;
}

/* As in the app: a day that fits sits back (tonal); only Tight and Conflict are filled. */
.chip.ok {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.chip.tight {
  background: var(--tight);
  color: var(--on-fill);
}

.chip.conflict {
  background: var(--conflict);
  color: var(--on-fill);
}

.verdict-text {
  font-size: 14px;
  color: var(--ink-2);
  padding-top: 2px;
}

.demo-foot {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
}

/* ---------- Sections ---------- */

.sec {
  padding-block: 80px;
}

.sec-tight {
  padding-block: 48px 72px;
}

.sec-alt {
  background: var(--paper);
}

.sec-head {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 40px;
}

.sec-head-flush {
  margin: 0;
}

@media (max-width: 640px) {
  .sec {
    padding-block: 56px;
  }

  .sec-head {
    margin-bottom: 28px;
  }
}

.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.vs-card {
  border-radius: var(--r);
  padding: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  background: var(--paper);
}

.vs-card.theirs {
  background: transparent;
  border-style: dashed;
}

.vs-lab {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-3);
}

.vs-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.vs-line .mono {
  color: var(--ink-2);
  white-space: nowrap;
}

.vs-say {
  font-weight: 650;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}

@media (max-width: 760px) {
  .versus {
    grid-template-columns: minmax(0, 1fr);
  }
}

.howto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.howto li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 18px;
  border-top: 3px solid var(--brand-ink);
}

.howto li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
}

.howto p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

.howto .aside {
  font-size: 14px;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .howto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
}

@media (max-width: 520px) {
  .howto {
    grid-template-columns: minmax(0, 1fr);
  }
}

.feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.feat {
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  align-content: start;
}

.feat + .feat {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.feat:nth-child(3n + 1) {
  padding-left: 0;
  border-left: 0;
}

.feat p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

.feat-ic {
  width: 28px;
  height: 28px;
  color: var(--brand-ink);
}

@media (max-width: 900px) {
  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feat:nth-child(3n + 1) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }

  .feat:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .feats {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: no feature is beside another, so none has a rule on its left
     (`.feat + .feat` outranks `.feat`, and drew one on every other feature). */
  .feat,
  .feat + .feat,
  .feat:nth-child(3n + 1),
  .feat:nth-child(2n + 1) {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
}

/* The features beside a phone's still: two columns of them, the still to their right. */
.feats-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: start;
}

.feats-wrap .feat-shot {
  margin: 0;
}

@media (min-width: 561px) {
  .feats-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feats-2 .feat:nth-child(3n + 1) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }

  .feats-2 .feat:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .feats-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* How it works: the app's own screens under the steps, each captioned with its step, in the steps' own columns. */
.how-shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
  align-items: start;
}

.how-shots .shot {
  margin: 0;
}

.how-n {
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--brand-ink);
}

.how-shots figcaption strong,
.feat-shot figcaption strong {
  color: var(--ink);
  font-weight: 650;
}

@media (max-width: 900px) {
  .how-shots {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    gap: 28px;
  }
}

.trust {
  background: var(--hero);
  color: var(--on-hero);
}

.trust .lede,
.trust p {
  color: var(--on-hero-2);
}

.trust .eyebrow {
  color: var(--orange);
}

.trust a {
  color: var(--orange);
}

.trust-in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

.trust-site {
  font-size: 15px;
  margin: 0;
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.trust-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 17px;
  color: var(--on-hero);
}

.trust-list svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
  margin-top: 2px;
}

.trust-list strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-hero-2);
  margin-bottom: 2px;
}

@media (max-width: 820px) {
  .trust-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ---------- Plans ---------- */

.interval {
  display: inline-flex;
  justify-self: start;
  background: var(--mist);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.interval button {
  border: 0;
  background: transparent;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 560;
}

.interval button[aria-pressed='true'] {
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  align-items: center;
  background: var(--offer-bg);
  border: 1.5px solid var(--orange);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.offer-tag {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--orange);
  color: #10222e;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.offer p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

@media (max-width: 640px) {
  .offer {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-tag {
    justify-self: start;
  }
}

/* The three cards share one set of rows (subgrid), so name, tagline, price, saving,
   note, button and list line up across cards whatever each one's length. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 0;
}

.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
  position: relative;
}

.plan.pick {
  border: 2px solid var(--brand-ink);
}

.plan-flag {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--brand-ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.plan-name {
  font-size: 26px;
  font-weight: 780;
  font-stretch: 72%;
  margin: 0;
}

.plan-tag {
  margin: 0;
  color: var(--ink-3);
  font-size: 15px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.price-num {
  font-size: 44px;
  font-weight: 800;
  font-stretch: 70%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-per {
  color: var(--ink-3);
  font-size: 15px;
}

.save-row {
  display: flex;
  align-items: center;
  min-height: 0;
}

.save {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok-ink);
  background: var(--ok-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.price-note {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  min-height: 1.4em;
}

.plan .btn {
  justify-self: stretch;
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.plan li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  font-size: 15px;
  color: var(--ink-2);
}

.plan li svg {
  width: 18px;
  height: 18px;
  color: var(--ok);
  margin-top: 3px;
}

.fine {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 70ch;
  margin: 0;
}

.fine-gap {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    row-gap: 24px;
  }

  .plan {
    grid-row: auto;
    grid-template-rows: none;
  }

  .save-row:empty {
    display: none;
  }
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.cmp {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
}

.cmp-sm {
  min-width: 440px;
  font-size: 14px;
}

.cmp.cmp-sm th,
.cmp.cmp-sm td {
  padding: 10px 12px;
}

.cmp th,
.cmp td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.cmp thead th,
.cmp thead td {
  font-size: 16px;
  font-weight: 720;
  font-stretch: 80%;
  background: var(--mist);
}

.cmp tbody th {
  font-weight: 520;
  color: var(--ink-2);
}

.cmp td {
  font-variant-numeric: tabular-nums;
}

.cmp tr:last-child th,
.cmp tr:last-child td {
  border-bottom: 0;
}

/*
 * On a phone, the plans side by side: each row's label on a line of its own
 * over its three values, so no plan hides past the edge and nothing scrolls
 * sideways. The corner cell leaves the grid but not the table, so the column
 * headers keep their columns for a screen reader (plans.mjs writes the roles).
 */
@media (max-width: 600px) {
  .cmp-plans {
    min-width: 0;
  }

  .cmp-plans,
  .cmp-plans thead,
  .cmp-plans tbody {
    display: block;
  }

  .cmp-plans tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }

  .cmp-plans tr:last-child {
    border-bottom: 0;
  }

  .cmp-plans th,
  .cmp-plans td {
    border-bottom: 0;
    padding: 8px 12px;
  }

  .cmp-plans thead {
    background: var(--mist);
  }

  .cmp-plans .cmp-corner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .cmp-plans tbody th {
    grid-column: 1 / -1;
    padding-top: 12px;
    padding-bottom: 0;
    color: var(--ink);
    font-weight: 650;
  }

  /* The sports table: six short columns fit a phone once they give up their padding. */
  .cmp-sm {
    min-width: 0;
    font-size: 13px;
  }

  .cmp.cmp-sm th,
  .cmp.cmp-sm td {
    padding: 8px 6px;
  }

  .cmp.cmp-sm thead th {
    font-size: 13px;
    line-height: 1.25;
  }
}

.yes {
  color: var(--ok-ink);
  font-weight: 700;
}

.no {
  color: var(--ink-3);
}

/* ---------- Videos ---------- */

.vids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vid {
  display: grid;
  gap: 10px;
  align-content: start;
}

.poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hero);
  color: #ffffff;
  display: grid;
  align-content: end;
  padding: 14px;
}

.poster::before {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hero-2);
}

.poster-road {
  position: absolute;
  left: 14px;
  right: 40%;
  top: 22px;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0 12px,
    transparent 12px 20px
  );
}

.poster-cards {
  position: absolute;
  left: 14px;
  top: 38px;
  display: flex;
  gap: 8px;
}

.poster-cards span {
  width: 46px;
  height: 22px;
  border-radius: 7px;
  background: var(--teal);
}

.poster-cards span + span {
  background: #e25432;
  margin-top: 16px;
}

.poster-title {
  position: relative;
  font-weight: 800;
  font-stretch: 60%;
  font-size: 22px;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 85%;
}

.poster-len {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 6px;
}

.vid-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}

.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--mist);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 2px 8px;
}

.vid .h3 {
  font-size: 17px;
}

/* A walkthrough: 16:9, its poster until it plays, the browser's own controls. */
.vid-frame {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0b141a;
}

.vid-frame video {
  display: block;
  width: 100%;
  height: 100%;
  background: #0b141a;
}

.vid:target .vid-frame {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.vid p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.feature-vid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  scroll-margin-top: 24px;
}

.feature-copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

.feature-copy p {
  margin: 0;
}

.reel {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #0b141a;
  box-shadow: 0 0 0 8px #0b141a;
}

.reel video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #0b141a;
}

@media (max-width: 900px) {
  .vids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .feature-vid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reel {
    max-width: 260px;
  }
}

@media (max-width: 560px) {
  .vids {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Questions ---------- */

.faq {
  display: grid;
  max-width: 820px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding-block: 4px;
}

.faq summary {
  cursor: pointer;
  font-weight: 640;
  font-size: 17px;
  padding-block: 14px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-family: var(--f-mono);
  color: var(--brand-ink);
  font-size: 20px;
  line-height: 1;
}

.faq details[open] summary::after {
  content: '–';
}

.faq p {
  margin: 0 0 16px;
  color: var(--ink-2);
  max-width: 65ch;
}

.cta {
  background: var(--orange);
  color: #10222e;
}

.cta a:not(.btn) {
  color: #10222e;
}

.cta-in {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-block: 56px;
}

.cta .h2 {
  max-width: 18ch;
}

.cta .btn-solid {
  background: #10222e;
  color: #ffffff;
}

.cta .btn-line {
  color: #10222e;
}

.cta-when {
  font-weight: 650;
  margin: 0;
}

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

.ftr {
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.ftr-in {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: 32px;
  padding-block: 48px 24px;
}

.ftr-h {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 650;
}

.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.ftr li a,
.ftr li span {
  display: inline-block;
  padding-block: 6px;
}

.ftr a {
  color: var(--ink-2);
  text-decoration: none;
}

.ftr a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

.ftr .logo {
  color: var(--ink);
}

.ftr-brand p {
  color: var(--ink-3);
  margin: 10px 0 0;
  max-width: 32ch;
}

.ftr-brand p a {
  color: inherit;
  text-decoration: underline;
}

.ftr-base {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-block: 18px 28px;
  color: var(--ink-3);
  font-size: 13px;
}

@media (max-width: 1000px) {
  .ftr-in {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ftr-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .ftr-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.phead {
  background: var(--hero);
  color: var(--on-hero);
}

.phead-in {
  padding-block: 48px 56px;
  display: grid;
  gap: 16px;
}

.phead .eyebrow {
  color: var(--orange);
}

.phead .lede {
  color: var(--on-hero-2);
}

/* ---------- Search (the docs) ---------- */

.docs-search {
  display: grid;
  gap: 8px;
  max-width: 560px;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 12px;
  min-height: 44px;
}

.search:focus-within {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.search input {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  width: 100%;
  min-height: 36px;
  outline: none;
}

.search svg {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  flex: none;
}

.search-status {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

.search-status:empty {
  display: none;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
}

.search-results a {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
}

.search-results a:hover {
  background: var(--mist);
}

.hit-title {
  font-weight: 650;
}

.hit-where {
  font-size: 13px;
  color: var(--ink-3);
}

.hit-summary {
  font-size: 14px;
  color: var(--ink-2);
}

/*
 * ---------- The docs ----------
 * /docs and /docs/<category>/<page>: phone first. At 412px a page is one
 * column with a 16px gutter, the navigation folded into "Menu: all help
 * topics" above the breadcrumbs; from 900px the navigation is a column on
 * the left; from 1200px a page with 4 or more sections has "On this page" on
 * the right. Body text 17px at 1.6, and every link and control in the
 * breadcrumbs, the navigation and the menus at least 44px tall.
 */

.docs {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  padding-block: 32px 72px;
}

.docs-main {
  min-width: 0;
}

.docs-article {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
}

.docs-article h1 {
  font-size: 40px;
  line-height: 1.08;
  font-weight: 800;
  font-stretch: 64%;
  margin: 4px 0 16px;
  text-wrap: balance;
}

.docs-article h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 740;
  font-stretch: 80%;
  margin: 36px 0 8px;
  scroll-margin-top: 16px;
}

.docs-article h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 680;
  margin: 22px 0 4px;
}

.docs-article p,
.docs-article li,
.docs-article dd {
  color: var(--ink-2);
}

.docs-article p {
  margin: 0 0 14px;
}

.docs-article a {
  overflow-wrap: anywhere;
}

.docs-lede {
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 20px;
}

.docs-body ul:not([class]) {
  padding-inline-start: 1.4rem;
  margin: 0 0 16px;
}

.docs-body ul:not([class]) li + li {
  margin-top: 6px;
}

.docs-body q {
  color: var(--ink);
}

.docs-body .table-wrap {
  margin: 16px 0 20px;
}

.docs-body .before {
  background: var(--mist);
  border-radius: 10px;
  padding: 10px 14px;
}

.ui {
  font-weight: 700;
  color: var(--ink);
}

.term {
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.quote-more {
  white-space: nowrap;
}

.docs-tip {
  border-left: 4px solid var(--teal);
  background: var(--paper);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
}

/* The one place the plan shows: who can use this, and the badge before a step that depends on it. */
.plan-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px 4px;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.5;
}

.docs-article .plan-box-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 650;
  font-stretch: 100%;
  color: var(--ink-3);
}

.plan-box-h svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand-ink);
}

.docs-article .plan-box p {
  margin: 0 0 8px;
  color: var(--ink);
}

.plan-box-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.docs-article .plan-box-list li {
  color: var(--ink);
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 1px;
}

.plan-badge:hover {
  text-decoration: underline;
}

/* Steps: numbered, a still beside its step from 900px, under it below. */
.docs-steps {
  list-style: none;
  counter-reset: step;
  margin: 16px 0 24px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.docs-step {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  min-width: 0;
}

.docs-step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.docs-article .docs-step-do,
.docs-article .docs-step-see {
  margin: 0;
}

.docs-article .docs-step-see {
  margin-top: 4px;
  color: var(--ink-3);
}

.docs-step-text {
  min-width: 0;
}

.docs-shot {
  margin: 16px 0 24px;
}

.docs-step .docs-step-shot {
  margin: 12px 0 0;
}

.shot-open {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.shot-phone .shot-open {
  border-radius: 22px;
}

@media (min-width: 900px) {
  .docs-step.has-shot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: start;
  }

  .docs-step.has-shot:has(.shot-phone) {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .docs-step .docs-step-shot {
    margin: 0;
  }
}

@media (max-width: 899px) {
  .docs-step .shot-phone {
    max-width: 360px;
  }
}

/* A walkthrough: the browser's player, its length, and what it says as text. */
.docs-video {
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
}

.docs-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--hero);
}

.docs-video figcaption {
  font-size: 15px;
  color: var(--ink-2);
}

#video-title {
  font-weight: 650;
  color: var(--ink);
}

.docs-video-len {
  color: var(--ink-3);
}

.docs-transcript {
  margin: 0 0 24px;
  font-size: 16px;
}

.docs-transcript summary,
.docs-toc-fold summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 650;
  color: var(--brand-ink);
}

/*
 * Every fold of the docs shows that it opens: a chevron after its label,
 * pointing down while it is shut and up once it is open. A summary laid out
 * as a flex box loses the browser's own triangle, so each draws this one
 * (the FAQ draws its + and – the same way).
 */
.docs-transcript summary,
.docs-toc-fold summary,
.docs-cat summary,
.docs-menu > summary {
  list-style: none;
}

.docs-transcript summary::-webkit-details-marker,
.docs-toc-fold summary::-webkit-details-marker,
.docs-cat summary::-webkit-details-marker,
.docs-menu > summary::-webkit-details-marker {
  display: none;
}

.docs-transcript summary::after,
.docs-toc-fold summary::after,
.docs-cat summary::after,
.docs-menu > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.docs-transcript[open] > summary::after,
.docs-toc-fold[open] > summary::after,
.docs-cat[open] > summary::after,
.docs-menu[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.docs-cat summary::after,
.docs-menu > summary::after {
  margin-left: auto;
}

/* Words we use: a definition list, each word its own anchor. */
.words dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: 16px;
  scroll-margin-top: 16px;
}

.words dd {
  margin: 2px 0 0;
}

.more {
  white-space: nowrap;
}

/* The navigation: a column from 900px, the menu fold below it. */
.docs-side {
  align-self: start;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding-right: 4px;
}

.docs-side .docs-search {
  margin-bottom: 12px;
}

.docs-tree {
  display: grid;
  gap: 2px;
  font-size: 15px;
}

.docs-cat summary,
.docs-cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}

.docs-cat summary:hover,
.docs-cat-link:hover {
  background: var(--mist);
}

.docs-cat ul {
  list-style: none;
  margin: 0 0 6px;
  padding: 0 0 0 10px;
  display: grid;
  gap: 2px;
}

.docs-cat a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.35;
}

.docs-cat a:hover {
  background: var(--mist);
}

.docs-tree [aria-current='page'] {
  background: var(--mist);
  color: var(--ink);
  font-weight: 650;
}

.docs-menu {
  display: none;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.docs-menu > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px;
  font-weight: 650;
  cursor: pointer;
  color: var(--ink);
}

.docs-menu[open] > summary {
  border-bottom: 1px solid var(--line);
}

.docs-menu .docs-search,
.docs-menu .docs-tree {
  padding: 12px;
}

.docs-menu .docs-search {
  padding-bottom: 0;
}

/* Help › category › page. */
.docs-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  color: var(--ink-3);
}

.docs-crumbs li {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* The page itself is plain text, not a target: a line of its own when it wraps, no taller. */
.docs-crumbs li:last-child {
  min-height: 0;
}

/* The › stays with the link before it, so a wrapped line never starts with one. */
.docs-crumbs li:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  color: var(--ink-3);
}

.docs-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* On this page: a column from 1200px, folded under the intro below it. */
.docs-toc {
  display: none;
}

.docs-toc-h {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.docs-toc ul,
.docs-toc-fold ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line);
  display: grid;
}

.docs-toc a,
.docs-toc-fold a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.3;
}

.docs-toc a:hover,
.docs-toc-fold a:hover {
  color: var(--brand-ink);
}

.docs-toc-fold {
  margin: 0 0 20px;
  font-size: 16px;
}

@media (min-width: 1200px) {
  .docs-has-toc {
    grid-template-columns: 230px minmax(0, 1fr) 180px;
    gap: 36px;
  }

  .docs-has-toc .docs-toc {
    display: block;
    position: sticky;
    top: 16px;
    align-self: start;
    font-size: 14px;
  }

  .docs-has-toc .docs-toc-fold {
    display: none;
  }
}

/* What to do next, the pages before and after, and Still stuck. */
.docs-next {
  margin-top: 40px;
}

.docs-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.docs-card,
.docs-path-link {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  text-decoration: none;
}

.docs-card:hover,
.docs-path-link:hover,
.docs-tile:hover,
.docs-vid:hover {
  border-color: var(--brand-ink);
}

.docs-card-title {
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.3;
}

.docs-card-sum {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.docs-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.docs-prev,
.docs-next-link {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 0;
  text-decoration: none;
}

.docs-next-link {
  grid-column: 2;
  text-align: right;
}

.docs-pager-dir {
  font-size: 13px;
  color: var(--ink-3);
}

.docs-pager-title {
  font-weight: 650;
  line-height: 1.3;
}

.docs-stuck {
  margin-top: 32px;
  padding: 16px 20px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.docs-article .docs-stuck h2,
.docs-home .docs-stuck h2 {
  margin-top: 0;
  font-size: 20px;
}

.docs-stuck p {
  margin: 0 0 12px;
}

.docs-missing {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The landing page. */
.docs-hero .docs-search {
  max-width: 640px;
  margin-top: 8px;
}

.docs-search-big .search {
  min-height: 56px;
  font-size: 18px;
  padding-inline: 16px;
  border-color: transparent;
}

.docs-search-big .search svg {
  width: 22px;
  height: 22px;
}

.docs-hero .search-status {
  color: var(--on-hero-2);
  font-size: 15px;
}

.docs-hero .search-status a {
  color: var(--on-hero);
}

.docs-hero .search-results {
  color: var(--ink);
}

.docs-home {
  display: grid;
  gap: 40px;
  padding-block: 40px 72px;
}

.docs-home h2 {
  margin: 0 0 14px;
}

.docs-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.docs-tile {
  display: grid;
  gap: 10px;
  align-content: start;
  height: 100%;
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}

.docs-tile svg {
  width: 28px;
  height: 28px;
  color: var(--brand-ink);
}

.docs-path {
  list-style: none;
  counter-reset: path;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.docs-path li {
  counter-increment: path;
}

.docs-path-link::before {
  content: counter(path);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--on-orange);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}

.docs-questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}

.docs-questions a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
}

.docs-vids {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.docs-vid {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
}

.docs-vid img {
  display: block;
  width: 100%;
  height: auto;
}

.docs-vid-title {
  padding-inline: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.docs-vid-meta {
  padding-inline: 14px;
  font-size: 14px;
  color: var(--ink-3);
}

.docs-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}

.docs-cat-sec {
  scroll-margin-top: 16px;
}

.docs-cat-h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.docs-cat-h svg {
  width: 24px;
  height: 24px;
  color: var(--brand-ink);
  flex: none;
}

.docs-cat-about {
  margin: -6px 0 10px;
  color: var(--ink-3);
}

.docs-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.docs-cat-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
}

.docs-cat-list p {
  margin: -8px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}

.vid-doc {
  margin: 0;
}

.vid-doc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 1000px) {
  .docs-tiles,
  .docs-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs-vids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 16px;
  }

  .docs-side {
    display: none;
  }

  .docs-menu {
    display: block;
  }

  .docs-article h1 {
    font-size: 32px;
  }

  .docs-cats,
  .docs-questions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .docs-vids,
  .docs-path {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A phone's video cards: the poster small beside its title, not six screens of posters. */
  .docs-vids {
    gap: 12px;
  }

  .docs-vid {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px;
  }

  .docs-vid img {
    grid-row: 1 / 3;
    align-self: start;
    border-radius: 6px;
  }

  .docs-vid-title,
  .docs-vid-meta {
    padding-inline: 0;
  }

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

  .docs-next-link {
    grid-column: 1;
  }
}

/* ---------- Documents: the measure of the privacy notice and the terms ---------- */

.doc {
  max-width: 68ch;
  min-width: 0;
}

.doc h1 {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  font-stretch: 64%;
  margin: 6px 0 12px;
}

.doc h2 {
  font-size: 24px;
  font-weight: 740;
  font-stretch: 80%;
  margin: 32px 0 8px;
  scroll-margin-top: 16px;
}

.doc h3 {
  font-size: 18px;
  font-weight: 680;
  margin: 20px 0 4px;
}

.doc p,
.doc li {
  color: var(--ink-2);
}

.doc q {
  color: var(--ink);
}

/* ---------- The privacy notice and the terms ---------- */

/* Read, not scanned: the documents' measure, a section's air, and a term set above what it means. */
.legal-wrap {
  padding-block: 40px 72px;
}

.legal h2 {
  margin-top: 0;
}

.legal section + section {
  margin-top: 32px;
}

.legal section,
.legal dt[id] {
  scroll-margin-top: 16px;
}

.legal ul,
.legal ol {
  padding-inline-start: 1.5rem;
}

.legal li + li {
  margin-top: 6px;
}

.legal dt {
  font-weight: 650;
  color: var(--ink);
  margin-top: 14px;
}

.legal dd {
  margin: 2px 0 0;
  color: var(--ink-2);
}

.legal strong {
  color: var(--ink);
}

.legal a {
  overflow-wrap: anywhere;
}

.legal-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 20px 8px;
}

/*
 * What a court reads for whether a disclaimer was conspicuous: the warranty
 * and the limits on liability, set apart by an edge rather than shouted in
 * capitals, which a reader skims past as boilerplate.
 */
.legal-key {
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: 8px;
}

@media (max-width: 720px) {
  .doc h1 {
    font-size: 32px;
  }
}

/*
 * ---------- Pictures of the app ----------
 * The real app's screens, each a figure beside the paragraph it shows. A
 * plain border, rounder for a phone's, and no device drawn round it: the
 * app, not an advertisement. A phone's still is drawn narrower than the
 * column, two side by side where there is room.
 */

.shot {
  margin: 20px 0 28px;
  display: grid;
  gap: 8px;
  justify-items: start;
  min-width: 0;
}

.shot picture {
  display: block;
  width: 100%;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.shot-phone {
  max-width: 280px;
}

.shot-phone img {
  border-radius: 22px;
}

.shot figcaption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
}

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  align-items: flex-start;
}

.shots .shot-phone {
  flex: 0 1 260px;
}

/* ---------- About ---------- */

/* The story is one column, as wide as the section heads below it (`.sec-head`),
   with nothing beside it: kept simple, and short (2026-10-01). */
.story {
  max-width: 760px;
}

.story p {
  color: var(--ink-2);
  font-size: 17px;
  margin: 0 0 16px;
}

.promises,
.company {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.promise {
  border-top: 3px solid var(--teal);
  padding-top: 14px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.promise p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

.company {
  margin: 0;
}

.company dt {
  font-size: 13px;
  color: var(--ink-3);
}

.company dd {
  margin: 2px 0 0;
  font-weight: 600;
}

@media (max-width: 820px) {
  .promises,
  .company {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* ---------- 404 ---------- */

.lost {
  padding-block: 96px;
  display: grid;
  gap: 18px;
  justify-items: start;
}

.lost-code {
  font-family: var(--f-mono);
  color: var(--ink-3);
  margin: 0;
}

.lost-road {
  width: 100%;
  max-width: 520px;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 18px, transparent 18px 30px);
  opacity: 0.5;
  border-radius: 4px;
}

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