/* Layout: one column on Windows 11's own greys. The hero shows the product at once: the monitor
   below it plays a short tour until the visitor scrolls, then pins while the story plays from plain
   Windows to Overlook. Sections after it alternate text and demos, left aligned. */
:root {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #f9f9f9;
  --line: #e1e1e1;
  --line-2: #d2d2d2;
  --fg: #1b1b1b;
  --fg-2: #5c5c5c;
  --accent: #b511c6;
  --accent-ink: #ffffff;
  --accent-text: #9c0fae;
  --accent-tint: #faeefc;
  --bezel: #1c1c1e;
  --bezel-edge: #3a3a3d;
  --key: #ffffff;
  --key-edge: #cfcfcf;
  --scroll: #b9b9b9;
  --display: "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --text: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  /* The type scale. Each role is one step; nothing on the page sets a size outside it. */
  --fs-display: clamp(2.25rem, 1.1rem + 3.2vw, 3.375rem);
  --fs-headline: clamp(1.875rem, 1.05rem + 2.4vw, 2.75rem);
  --fs-closing: clamp(2rem, 1.1rem + 2.8vw, 3.125rem);
  --fs-price: clamp(3.5rem, 2rem + 4.5vw, 4.5rem);
  --fs-title: clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead: 1.25rem;
  --fs-card: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-ui: 0.9375rem;
  --fs-caption: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-micro: 0.75rem;

  --head: 60px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1f1f;
    --surface: #2a2a2a;
    --surface-2: #262626;
    --line: #383838;
    --line-2: #464646;
    --fg: #f2f2f2;
    --fg-2: #b4b4b4;
    --accent: #c21fd0;
    --accent-ink: #ffffff;
    --accent-text: #e46cf2;
    --accent-tint: #35213a;
    --bezel: #0e0e10;
    --bezel-edge: #444448;
    --key: #353535;
    --key-edge: #4c4c4c;
    --scroll: #555555;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1f1f1f;
  --surface: #2a2a2a;
  --surface-2: #262626;
  --line: #383838;
  --line-2: #464646;
  --fg: #f2f2f2;
  --fg-2: #b4b4b4;
  --accent: #c21fd0;
  --accent-ink: #ffffff;
  --accent-text: #e46cf2;
  --accent-tint: #35213a;
  --bezel: #0e0e10;
  --bezel-edge: #444448;
  --key: #353535;
  --key-edge: #4c4c4c;
  --scroll: #555555;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head) + 16px); -webkit-text-size-adjust: 100%; scrollbar-color: var(--scroll) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--display); }
/* A heading of two sentences gives each sentence its own line. */
.ln { display: block; }
p { margin: 0; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed;
  left: var(--gutter);
  top: 10px;
  z-index: 70;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--bg);
  font: 600 var(--fs-ui)/1 var(--text);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font: 600 1rem/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.btn:active { transform: translateY(1px); }
.btn--buy { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.btn--quiet { background: var(--surface); color: var(--fg); border: 1px solid var(--line-2); }
.btn--small { min-height: 36px; padding: 0 14px; font-size: var(--fs-caption); border-radius: 6px; }
.btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) {
  .btn--buy:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
  .btn--quiet:hover { border-color: var(--fg-2); }
}

/* ------------------------------------------------ header */

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
  z-index: 60;
}
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  height: var(--head);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.125rem/1 var(--display); }
.brand img { width: 28px; height: 28px; }
.nav { display: flex; gap: 24px; margin-left: auto; font-size: var(--fs-ui); }
.nav a { text-decoration: none; color: var(--fg-2); }
@media (hover: hover) { .nav a:hover { color: var(--fg); } }

/* ------------------------------------------------ hero */

.hero { padding-block: 64px 28px; text-align: center; }
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 auto;
}
.hero h1 span { display: block; color: var(--fg-2); }
.hero .sub {
  margin: 22px auto 0;
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
}
/* The Alt+Tab keys inside the subhead: small keycaps on the text's baseline. */
.hk { white-space: nowrap; }
.key.key--inline {
  min-width: 0;
  height: auto;
  padding: 0.12em 0.42em 0.18em;
  margin: 0 0.1em;
  border-radius: 6px;
  font: 600 0.8em/1.2 var(--text);
  vertical-align: 0.08em;
  color: var(--fg);
}
.cta { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.under { margin-top: 14px; font-size: var(--fs-caption); color: var(--fg-2); }

/* ------------------------------------------------ device frame */

.device { position: relative; }
.device .ol-bezel {
  background: var(--bezel);
  padding: 12px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 30px 60px -30px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.12);
}
.device .ol-screen { border-radius: 6px; }
.stand { display: flex; flex-direction: column; align-items: center; }
.stand i { display: block; width: 13%; height: 18px; background: linear-gradient(var(--bezel), color-mix(in srgb, var(--bezel) 70%, var(--bg))); }
.stand b { display: block; width: 30%; height: 7px; border-radius: 4px 4px 2px 2px; background: var(--bezel); box-shadow: inset 0 1px 0 var(--bezel-edge); }

.plain-screen .ol-bezel {
  background: var(--bezel);
  padding: 8px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 16px 32px -20px rgba(0, 0, 0, 0.4);
}
.plain-screen .ol-screen { border-radius: 4px; }

/* Pause and play for every demo that moves on its own (WCAG 2.2.2). It sits on the screen's top
   right corner, clear of the taskbar and the minimap. */
.demo-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(16, 16, 18, 0.62);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out;
}
.demo-toggle[hidden] { display: none; }
.demo-toggle::after { content: ""; position: absolute; inset: -6px; }
.demo-toggle svg { width: 14px; height: 14px; }
.demo-toggle .i-pause path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.demo-toggle .i-play path { fill: currentColor; }
.demo-toggle .i-play, .demo-toggle.is-paused .i-pause { display: none; }
.demo-toggle.is-paused .i-play { display: block; }
.plain-screen + .demo-toggle, .row__demo .demo-toggle { top: 14px; right: 14px; }
@media (hover: hover) { .demo-toggle:hover { background: rgba(16, 16, 18, 0.86); } }

/* ------------------------------------------------ the pinned story */

.story { position: relative; height: 760vh; }
.pin {
  position: sticky;
  top: calc(var(--head) + env(safe-area-inset-top, 0px));
  height: calc(100svh - var(--head) - env(safe-area-inset-top, 0px));
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-block: 16px 20px;
}
.pin .device { width: min(1040px, calc(100vw - 32px), calc((100svh - var(--head) - 350px) * 1.6 + 24px)); }
/* Before the story starts, the monitor plays the tour, and the chapter captions wait out of sight.
   They stay in the accessibility tree, and the steps show as soon as one of them has focus. */
.caption, .progress { transition: opacity 240ms ease-out; }
.story.is-intro .caption, .story.is-intro .progress { opacity: 0; pointer-events: none; transition-duration: 160ms; }
.story.is-intro .progress:focus-within { opacity: 1; pointer-events: auto; }

.caption {
  width: min(1040px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 32px;
  align-items: start;
}
.caption__text { position: relative; min-height: 112px; }
.chap {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.chap.is-on { position: relative; opacity: 1; transform: none; transition: opacity 240ms ease-out 110ms, transform 240ms ease-out 110ms; }
.chap h2 { font-size: var(--fs-title); font-weight: 650; line-height: 1.15; letter-spacing: -0.015em; }
.chap p { margin-top: 8px; color: var(--fg-2); max-width: 62ch; line-height: 1.5; }

.keys { display: flex; align-items: center; gap: 8px; min-height: 48px; justify-content: flex-end; }
.key {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--key);
  color: var(--fg);
  font: 600 var(--fs-ui)/1 var(--text);
  box-shadow: inset 0 0 0 1px var(--key-edge), inset 0 -3px 0 var(--key-edge);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.key.is-down { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--accent-text), inset 0 -1px 0 var(--key-edge); }
.plus { color: var(--fg-2); font-weight: 600; }

.progress {
  width: min(1040px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto repeat(6, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: end;
}
/* Before and after: the first two steps are plain Windows, the last four are Overlook. */
.grp { grid-row: 1; display: flex; align-items: center; gap: 6px; font: 600 var(--fs-micro)/1.2 var(--text); color: var(--fg-2); padding-bottom: 2px; border-bottom: 1px solid var(--line-2); }
#grpBefore { grid-column: 2 / span 2; }
#grpAfter { grid-column: 4 / span 4; color: var(--accent-text); border-bottom-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.grp svg { width: 12px; height: 12px; flex: none; }
.grp.is-on { color: var(--fg); }
#grpAfter.is-on { color: var(--accent-text); }
.progress__count, .seg { grid-row: 2; }
.progress__count { font: 600 var(--fs-caption)/1 var(--text); color: var(--fg-2); font-variant-numeric: tabular-nums; padding-bottom: 4px; min-width: 3.2em; }
.seg {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--fg-2);
  font: 500 var(--fs-label)/1.3 var(--text);
  cursor: pointer;
  display: grid;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg i { display: block; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; position: relative; }
.seg i b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-text); }
.seg.is-on { color: var(--fg); }
@media (hover: hover) { .seg:hover { color: var(--fg); } }

.illus { font-size: var(--fs-label); color: var(--fg-2); }

/* ------------------------------------------------ sections */

.section { padding-block: 128px 0; }
.section h2.big { font-size: var(--fs-headline); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; max-width: 20em; }
.section .lead { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); max-width: 56ch; }

.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border: solid var(--accent-text);
  border-width: 0 0 2.4px 2.4px;
  border-radius: 1px;
  transform: rotate(-45deg);
}
.ticks--lg { gap: 14px; margin-top: 28px; font-size: var(--fs-card); }

/* comparison */
.table-wrap {
  margin-top: 40px;
  overflow-x: auto;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
}
table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: var(--fs-ui); }
thead th { text-align: left; padding: 18px 18px 14px; font: 600 var(--fs-caption)/1.3 var(--text); color: var(--fg-2); vertical-align: bottom; }
thead th.us { color: var(--accent-text); }
thead th.us .brandcell { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: var(--fs-ui); }
thead th.us img { width: 22px; height: 22px; }
tbody th { text-align: left; font-weight: 600; padding: 15px 18px; width: 26%; }
tbody td { padding: 15px 18px; color: var(--fg-2); }
tbody tr > * { border-top: 1px solid var(--line); }
td.us, th.us { background: var(--accent-tint); }
td.us { color: var(--fg); font-weight: 600; }
.check { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.check path { fill: none; stroke: var(--accent-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.note { margin-top: 12px; font-size: var(--fs-label); color: var(--fg-2); }

/* evidence, under the table it supports */
.evidence { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; }
.evidence__head { grid-column: 1 / -1; font: 600 var(--fs-label)/1.3 var(--text); color: var(--fg-2); }
.evidence figure { margin: 0; padding-top: 20px; border-top: 1px solid var(--line-2); }
.evidence .finding { font: 600 var(--fs-title)/1.28 var(--display); letter-spacing: -0.012em; }
.evidence figcaption { margin-top: 12px; font-size: var(--fs-caption); color: var(--fg-2); }
.evidence figcaption a { color: inherit; text-decoration-color: color-mix(in srgb, var(--fg-2) 50%, transparent); }
@media (hover: hover) { .evidence figcaption a:hover { color: var(--fg); } }

/* playground */
.play { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.play__stage { position: relative; }
.play__stage .ol-bezel { transition: box-shadow 180ms ease-out; }
.play__stage.is-engaged .ol-bezel { box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 0 0 3px var(--accent), 0 16px 32px -20px rgba(0, 0, 0, 0.4); }
.engage {
  position: absolute;
  inset: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.36);
  cursor: pointer;
  font: inherit;
}
.engage span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  background: #ffffff;
  color: #1b1b1b;
  font: 600 1rem/1 var(--text);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.play__stage.is-engaged .engage { display: none; }
.feed { margin-top: 12px; min-height: 24px; font-size: var(--fs-caption); color: var(--fg-2); }
.feed b { color: var(--fg); font-weight: 600; }
.controls { display: grid; gap: 14px; font-size: var(--fs-ui); line-height: 1.45; }
.controls div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; }
.controls .k { display: flex; gap: 4px; flex-wrap: wrap; }
.controls kbd {
  display: inline-grid;
  place-items: center;
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--key);
  color: var(--fg);
  font: 600 var(--fs-label)/1 var(--text);
  box-shadow: inset 0 0 0 1px var(--key-edge), inset 0 -2px 0 var(--key-edge);
}
.controls .t { color: var(--fg-2); }
.controls .touch { display: none; color: var(--fg-2); }
.reset { justify-self: start; margin-top: 6px; }

/* daily use: text and a demo side by side, the sides alternating */
.row {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 64px;
  align-items: center;
}
.row + .row { margin-top: 96px; }
.row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row--flip .row__text { grid-column: 2; grid-row: 1; }
.row--flip .row__demo { grid-column: 1; grid-row: 1; }
.row__text h3 { font-size: var(--fs-title); font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; }
.row__text p { margin-top: 12px; color: var(--fg-2); max-width: 46ch; }
.row__text .ticks { font-size: var(--fs-ui); color: var(--fg); }
.row__demo { position: relative; margin: 0; }

.more {
  margin-top: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px 64px;
}
.more__head { font-size: var(--fs-card); font-weight: 650; line-height: 1.3; padding-top: 18px; }
.more dl { margin: 0; }
.more dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 32px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.more dl > div:last-child { border-bottom: 1px solid var(--line-2); }
.more dt { font-weight: 650; line-height: 1.4; }
.more dd { margin: 0; color: var(--fg-2); font-size: 1rem; line-height: 1.55; }

/* safety */
.safety { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.safety__head { position: sticky; top: calc(var(--head) + 40px); }
.safety__head .lead { font-size: var(--fs-card); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 22px 0; border-top: 1px solid var(--line-2); }
.facts li:first-child { border-top: 0; padding-top: 6px; }
.facts h3 { font-size: var(--fs-card); font-weight: 650; line-height: 1.3; }
.facts p { margin-top: 6px; color: var(--fg-2); max-width: 58ch; }
.num { color: var(--fg); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pricing: the terms beside the card, so they sit next to the button */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px 72px; align-items: center; }

.card {
  background: var(--surface);
  border-radius: 16px;
  padding: 36px 36px 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 48px -28px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.card__head { display: flex; align-items: center; justify-content: center; gap: 12px; font: 600 1.25rem/1 var(--display); }
.card__head img { width: 40px; height: 40px; }
.card__price { margin-top: 20px; font: 700 var(--fs-price)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.card__sub { margin-top: 8px; color: var(--fg-2); }
.card .btn { width: 100%; min-height: 52px; margin-top: 26px; font-size: var(--fs-body); }
.card__fine { margin-top: 16px; font-size: var(--fs-label); color: var(--fg-2); }
.card__pending { margin-top: 12px; font-size: var(--fs-caption); font-weight: 600; color: var(--accent-text); }

/* faq: every answer open, so a visitor can read them all at once */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; align-items: start; }
.faq__head { position: sticky; top: calc(var(--head) + 40px); }
.faq__list { display: grid; }
.qa { padding: 22px 0; border-top: 1px solid var(--line-2); }
.qa:first-child { border-top: 0; padding-top: 4px; }
.qa h3 { font-size: var(--fs-card); font-weight: 650; line-height: 1.35; }
.qa p { margin-top: 8px; color: var(--fg-2); max-width: 64ch; }

/* close + footer */
.close { padding-block: 152px 128px; text-align: center; }
.close__keys { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 28px; }
.close h2 { font-size: var(--fs-closing); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin: 0 auto; }
.close .cta { margin-top: 30px; }
.site-foot { border-top: 1px solid var(--line); padding-block: 32px 40px; font-size: var(--fs-caption); color: var(--fg-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }
.site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot a { text-decoration: none; }
@media (hover: hover) { .site-foot a:hover { color: var(--fg); } }
.site-foot .tm { width: 100%; font-size: var(--fs-label); }

/* sticky buy bar on phones */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.3);
  transform: translateY(110%);
  transition: transform 220ms ease-out;
}
.buybar.is-on { transform: none; }
.buybar p { font-size: var(--fs-caption); line-height: 1.3; color: var(--fg-2); }
.buybar p b { display: block; color: var(--fg); font-size: 1rem; }

/* ------------------------------------------------ legal pages */

/* The privacy policy and the terms: the title and the contents in a sticky column beside the
   text, as the FAQ heading sits beside the questions. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; align-items: start; padding-block: 96px 128px; }
.doc__head { position: sticky; top: calc(var(--head) + 40px); }
.doc__head h1 { font-size: var(--fs-headline); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; }
.doc__meta { margin-top: 12px; font-size: var(--fs-caption); color: var(--fg-2); }
.toc { margin-top: 36px; }
.toc h2 { font: 600 var(--fs-label)/1.3 var(--text); color: var(--fg-2); }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-ui); line-height: 1.4; }
.toc a { color: var(--fg-2); text-decoration: none; }
@media (hover: hover) { .toc a:hover { color: var(--fg); } }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-2); font-size: var(--fs-title); font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; }
.prose h3 { margin-top: 36px; font-size: var(--fs-card); font-weight: 650; line-height: 1.3; }
.prose h4 { margin-top: 28px; font: 650 var(--fs-body)/1.4 var(--display); }
.prose > :is(h2, h3, h4) + * { margin-top: 10px; }
.prose ul:not(.ticks) { margin-bottom: 0; padding-left: 1.25em; }
.prose ul:not(.ticks) li + li { margin-top: 8px; }
.prose li::marker { color: var(--fg-2); }
.prose a { color: var(--accent-text); overflow-wrap: anywhere; }
.prose strong { font-weight: 650; }

.summary { padding: 24px 28px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.summary__head { font: 600 var(--fs-label)/1.3 var(--text); color: var(--fg-2); }
.summary .ticks { margin-top: 14px; }
.prose > .summary + * { margin-top: 40px; }

/* The page after a purchase: the hero's layout, with the two downloads as its buttons. */
.thanks { padding-block: 96px 128px; }
.thanks__icon { display: block; width: 72px; height: 72px; margin: 0 auto 28px; }
.thanks .notice {
  margin: 28px auto 0;
  max-width: 52ch;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--accent-tint);
}
.thanks .notice[hidden], .thanks #purchase[hidden] { display: none; }
.thanks .notice a, .thanks .under a { color: var(--accent-text); }
.thanks .under { max-width: 60ch; margin-inline: auto; }

@media (max-width: 980px) {
  .doc { grid-template-columns: 1fr; }
  .doc__head { position: static; }
}
@media (max-width: 720px) {
  .doc { gap: 24px; padding-block: 56px 96px; }
  .toc { margin-top: 28px; }
  .prose h2 { margin-top: 44px; padding-top: 24px; }
  .summary { padding: 20px; }
  .thanks { padding-block: 56px 96px; }
  .page-doc .site-foot { padding-bottom: 40px; }
}

/* ------------------------------------------------ responsive */

@media (max-width: 980px) {
  .play { grid-template-columns: 1fr; }
  .row, .row--flip { grid-template-columns: 1fr; gap: 28px; }
  .row--flip .row__text, .row--flip .row__demo { grid-column: auto; grid-row: auto; }
  .row__text p { max-width: 62ch; }
  .more, .safety, .faq { grid-template-columns: 1fr; }
  .more__head { padding-top: 0; }
  .safety__head, .faq__head { position: static; }
  .price { grid-template-columns: 1fr; justify-items: start; }
  .card { width: min(480px, 100%); }
}

@media (max-width: 720px) {
  :root { --head: 56px; }
  body { font-size: 1rem; }
  .nav { display: none; }
  /* One magenta button at a time: the header's steps aside while another is on screen. */
  .site-head .btn { margin-left: auto; transition: opacity 160ms ease-out, visibility 0s linear 0s; }
  body.bar-on .site-head .btn, body.cta-on .site-head .btn, body.card-on .site-head .btn { opacity: 0; visibility: hidden; transition: opacity 160ms ease-out, visibility 0s linear 160ms; }
  .hero { padding-block: 40px 20px; }
  .hero h1 { font-size: clamp(1.75rem, 1rem + 4vw, 2.125rem); }
  .hero .sub { font-size: 1.125rem; }
  .cta .btn { flex: 1 1 100%; }
  .story { height: 660vh; }
  /* Top aligned, and clear of the buy bar at the bottom of the screen. */
  .pin { gap: 14px; justify-content: flex-start; padding-block: 20px 84px; }
  .pin .device { width: calc(100vw - 32px); }
  .device .ol-bezel { padding: 7px; border-radius: 11px; }
  .device .ol-screen { border-radius: 4px; }
  .demo-toggle { top: 12px; right: 12px; width: 28px; height: 28px; }
  .stand i { height: 10px; }
  .caption { grid-template-columns: 1fr; gap: 6px; }
  .caption__text { min-height: 172px; }
  .keys { justify-content: flex-start; order: -1; min-height: 40px; }
  .key { min-width: 40px; height: 40px; font-size: var(--fs-caption); }
  .progress { grid-template-columns: auto repeat(6, minmax(0, 1fr)); gap: 6px 8px; }
  /* The step names leave the screen, not the accessibility tree; the bars stay easy to tap. */
  .seg { min-height: 32px; align-content: end; gap: 0; }
  .seg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grp { font-size: 0.6875rem; }
  .section { padding-block: 96px 0; }
  .evidence { grid-template-columns: 1fr; margin-top: 48px; }
  .row { margin-top: 48px; }
  .row + .row { margin-top: 64px; }
  .more { margin-top: 80px; }
  .more dl > div { grid-template-columns: 1fr; }
  /* The table stacks by feature: each row shows its feature, then one line for each product. */
  table, tbody, tr, th, td { display: block; }
  table { min-width: 0; font-size: var(--fs-caption); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { padding: 16px; }
  tbody tr + tr { border-top: 1px solid var(--line); }
  tbody tr > * { border-top: 0; }
  tbody th { width: auto; padding: 0 0 8px; font-size: var(--fs-ui); }
  tbody td { display: flex; align-items: baseline; gap: 0 16px; padding: 5px 0; }
  tbody td::before { content: attr(data-label); flex: 0 0 8.5rem; color: var(--fg-2); font-weight: 500; }
  td.us { margin: 2px -8px; padding: 5px 8px; border-radius: 6px; }
  td.us::before { color: var(--accent-text); font-weight: 600; }
  td.us .check { align-self: center; margin-right: -10px; }
  .controls .desk { display: none; }
  .controls .touch { display: block; }
  .card { padding: 30px 22px 26px; width: 100%; }
  .ticks--lg { font-size: var(--fs-body); }
  .close { padding-block: 112px 104px; }
  .buybar { display: flex; }
  .site-foot { padding-bottom: 104px; }
}

@media (max-width: 720px) and (max-height: 700px) {
  .pin { gap: 10px; padding-top: 12px; }
  .pin .illus { display: none; }
  .caption__text { min-height: 150px; }
  .keys { min-height: 34px; }
  .key { min-width: 34px; height: 34px; }
}

@media (hover: none) {
  .controls .desk { display: none; }
  .controls .touch { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .chap, .chap.is-on, .key, .btn, .buybar, .caption, .progress, .demo-toggle, .site-head .btn { transition: none; }
  .demo-toggle { display: none; }
}