/* Duoboard: the keyboard's own materials. Keycap white on the system keyboard's
   cool grey, with the app icon's blue as the one signal color. Type is the
   system font stack (SF Pro on Apple devices, SF Pro Rounded for the brand), so
   nothing is downloaded. Layout: one centered column with a fold line down the
   middle of the hero, echoing the hinge. */

:root {
  --bg: #F6F6F9;          /* page */
  --surface: #FFFFFF;     /* keycaps, cards */
  --tray: #E4E5EA;        /* the keyboard tray behind keycaps */
  --stage: #EFEEF3;       /* the film's own background */
  --ink: #16171B;
  --ink-2: #5C5F69;
  --line: rgba(22, 23, 27, 0.1);
  --key-shadow: 0 1px 0 rgba(22, 23, 27, 0.28);
  --blue: #1A73D9;        /* from the app icon */
  --blue-ink: #FFFFFF;
  --blue-soft: rgba(26, 115, 217, 0.1);
  --shadow: 0 24px 60px -24px rgba(22, 23, 27, 0.28);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 32px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0F12;
    --surface: #1F2025;
    --tray: #16171B;
    --stage: #EFEEF3;
    --ink: #F3F4F7;
    --ink-2: #A3A6B0;
    --line: rgba(243, 244, 247, 0.12);
    --key-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    --blue: #4C9BF0;
    --blue-ink: #06111F;
    --blue-soft: rgba(76, 155, 240, 0.14);
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0F12;
  --surface: #1F2025;
  --tray: #16171B;
  --stage: #EFEEF3;
  --ink: #F3F4F7;
  --ink-2: #A3A6B0;
  --line: rgba(243, 244, 247, 0.12);
  --key-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  --blue: #4C9BF0;
  --blue-ink: #06111F;
  --blue-soft: rgba(76, 155, 240, 0.14);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

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

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 0.14em; }

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

::selection { background: var(--blue-soft); }

.wrap {
  width: min(100% - 2 * var(--gutter), 66rem);
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }

.section { padding-block: clamp(64px, 10vw, 120px); }
.section + .section { border-top: 1px solid var(--line); }

.eyebrow {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-title {
  max-width: 20ch;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-lede {
  max-width: 36rem;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  text-wrap: pretty;
}

.center { text-align: center; }
.center .section-title, .center .section-lede { margin-inline: auto; }

/* A keycap, as on the system keyboard: white key, one-pixel shadow underneath. */
.key {
  display: inline-grid;
  place-items: center;
  min-width: 2.1em;
  padding: 0.2em 0.55em;
  border-radius: 0.4em;
  background: var(--surface);
  box-shadow: var(--key-shadow);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* ===== Header ===== */
.site-header {
  padding: 18px var(--gutter) 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.header-nav { display: flex; gap: 22px; font-size: 0.95rem; }
.header-nav a { color: var(--ink-2); text-decoration: none; }
.header-nav a:hover { color: var(--ink); }
@media (max-width: 560px) { .header-nav { display: none; } }

/* ===== Hero ===== */
.hero {
  padding: clamp(24px, 4.5vw, 56px) 0 clamp(56px, 8vw, 96px);
  text-align: center;
  overflow-x: clip;
}

.hero h1 {
  max-width: 16ch;
  margin: 0 auto 16px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lede {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* The film sits on its own light stage in both themes: it was recorded on that
   grey, so the stage is part of the picture. */
.film {
  position: relative;
  /* Fits the screen's height once scrolled to, so the whole Duo is in view. */
  width: min(100%, 60rem, calc((100svh - 96px) * 1440 / 1058));
  margin: clamp(28px, 4vw, 48px) auto 0;
}

.film-stage {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 3vw, 32px);
  background: var(--stage);
  box-shadow: var(--shadow);
  aspect-ratio: 1440 / 1058;
  max-width: 100%;
}
.film-stage video,
.film-stage .film-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-still { display: none; }

.film-controls {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
}

.film-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.95rem/1 var(--font);
  cursor: pointer;
}
.film-button svg { width: 16px; height: 16px; }
.film-button:hover { border-color: var(--blue); color: var(--blue); }

/* Reduce Motion: a still from Dual mode, and a button to play the film anyway. */
@media (prefers-reduced-motion: reduce) {
  .film:not(.is-playing) .film-still { display: block; }
  .film:not(.is-playing) video { visibility: hidden; }
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.975rem;
  font-weight: 600;
}
.availability::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.975rem;
}
.trust li { display: inline-flex; align-items: center; gap: 9px; }
.trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ===== What it is ===== */
.statement {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
.statement .soft { color: var(--ink-2); }

/* ===== Modes ===== */
.modes-head { margin-bottom: clamp(28px, 4vw, 44px); }

/* The same Half / Dual / Full control as the keyboard's top row. Without
   JavaScript the three panels are simply listed one after another. */
.segmented {
  display: none;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(20px, 3vw, 32px);
  padding: 3px;
  border-radius: 999px;
  background: var(--tray);
}
.js .segmented { display: flex; }

.segmented button {
  min-width: 5.5rem;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 0.975rem/1.2 var(--font);
  cursor: pointer;
}
.segmented button[aria-selected="true"] {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.mode-panels { display: grid; gap: clamp(40px, 6vw, 64px); }
.js .mode-panels { display: block; }
.js .mode-panel[hidden] { display: none; }

.mode-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.shot {
  overflow: hidden;
  border-radius: clamp(14px, 2vw, 22px);
  background: var(--stage);
  box-shadow: var(--shadow);
}
.shot img { width: 100%; }

.mode-copy h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mode-copy p { color: var(--ink-2); text-wrap: pretty; }
.mode-copy p + p { margin-top: 12px; }

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

/* ===== Swipe and autocorrect ===== */
.typing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(32px, 5vw, 56px);
}

/* The other screen's three tools: three across, one column on a phone. */
/* Four tools: two by two. */
.tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .tools-grid { grid-template-columns: minmax(0, 1fr); } }
/* Each screenshot comes in light and dark, shown by the page's own theme (the same rule as its colors), not the
   system's: a host can set the page dark on a light system, and a <picture> would still pick the light shot. The hidden
   one is lazy-loaded, so it isn't fetched. */
.theme-light { display: block; }
.theme-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-light { display: none; }
  :root:not([data-theme="light"]) .theme-dark { display: block; }
}
:root[data-theme="dark"] .theme-light { display: none; }
:root[data-theme="dark"] .theme-dark { display: block; }

.typing-card figcaption {
  padding: 18px 4px 0;
}
.typing-card h3 {
  margin-bottom: 6px;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.typing-card p { color: var(--ink-2); }

/* "hownitnfoes" turning into "how it goes": the suggestion strip, drawn. */
.strip {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 40px) var(--gutter);
  border-radius: 22px;
  background: var(--tray);
  text-align: center;
}
.strip-typed {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.strip-typed mark {
  padding: 0 0.1em;
  border-radius: 4px;
  background: var(--blue-soft);
  color: var(--blue);
}
.strip-arrow { color: var(--ink-2); font-size: 0.9rem; }
.strip-result { font-size: clamp(1.375rem, 3.4vw, 1.875rem); font-weight: 650; letter-spacing: -0.01em; }
.strip-note { max-width: 34rem; color: var(--ink-2); font-size: 0.975rem; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 64px);
  padding: 0;
  list-style: none;
}
.feature-list h3 { margin-bottom: 4px; font-size: 1.0625rem; font-weight: 650; }
.feature-list p { color: var(--ink-2); font-size: 0.975rem; }

@media (max-width: 860px) {
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .typing-grid, .feature-list { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Privacy ===== */
.privacy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.label-card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.label-card .label-kicker { color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.label-card .label-title {
  margin: 6px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.4vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.label-card ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.label-card li { display: flex; gap: 12px; color: var(--ink-2); }
.label-card li::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
}

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

/* ===== Setup ===== */
.setup-steps {
  display: grid;
  gap: 18px;
  margin-top: clamp(32px, 5vw, 48px);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.setup-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  counter-increment: step;
}
.setup-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--blue-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.setup-steps h3 { margin-bottom: 6px; font-size: 1.125rem; font-weight: 650; }
.setup-steps p { color: var(--ink-2); }

.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}
.path li { display: contents; }
.path li + li::before { content: "→"; color: var(--ink-2); }
.path .key { background: var(--bg); }

/* ===== FAQ ===== */
.faq { margin-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 1.125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--blue);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 22px; color: var(--ink-2); max-width: 40rem; }

/* ===== Footer ===== */
.site-footer {
  padding: 36px var(--gutter) 48px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.95rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .brand { font-size: 1rem; }
.site-footer .brand img { width: 24px; height: 24px; border-radius: 6px; }

/* ===== Documents: privacy, support, acknowledgements ===== */
.doc { padding: clamp(24px, 6vw, 64px) var(--gutter) clamp(48px, 8vw, 88px); }

.paper {
  max-width: 44rem;
  margin: 0 auto;
}

.paper .back {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--ink-2);
  font-size: 0.95rem;
  text-decoration: none;
}
.paper .back:hover { color: var(--ink); text-decoration: underline; }

.paper h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.paper .updated { margin-top: 10px; color: var(--ink-2); font-size: 0.95rem; }

.paper h2 {
  margin: 40px 0 12px;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.paper p { color: var(--ink); }
.paper p + p { margin-top: 14px; }
.paper ul { margin: 12px 0 14px; padding-left: 1.25em; }
.paper li + li { margin-top: 6px; }
.paper strong { font-weight: 650; }

.highlight {
  margin-top: 32px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 16px;
  background: var(--blue-soft);
}

.contact-card {
  margin-top: 28px;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.contact-card .contact { font-size: clamp(1.125rem, 2.6vw, 1.375rem); font-weight: 600; overflow-wrap: anywhere; }
.contact-card p + p { margin-top: 8px; color: var(--ink-2); }

.credits { display: grid; gap: 16px; margin-top: 24px; padding: 0; list-style: none; }
.credits li {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.credits h2 { margin: 0 0 6px; font-size: 1.125rem; }
.credits p { color: var(--ink-2); }

/* ===== Not found ===== */
.not-found {
  padding: clamp(80px, 16vw, 160px) 0 clamp(64px, 10vw, 120px);
  text-align: center;
}
.not-found .keys { display: inline-flex; gap: 8px; margin-bottom: 32px; font-size: 2rem; }
.not-found h1 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.not-found p { color: var(--ink-2); font-size: 1.125rem; }
.section-link { margin-top: 14px; }