@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  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 {
  --ink: #16181d;
  --ink-soft: #5c6270;
  --line: #e6e7ea;
  --bg: #ffffff;
  --band: #f6f7f8;
  --panel: radial-gradient(120% 80% at 50% 0%, #eef0f3 0%, #f6f7f8 55%, #f2f3f5 100%);
  --navy: #2b3140;
  --red: #ed544f;
  --radius: 12px;
  --wrap: 960px;
  --gutter: 32px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", var(--font);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The canvas takes its colour from html once html has one, so overscrolling
     past the footer reveals the footer's own ink rather than white. Body still
     paints the page white over its own box, so nothing else changes. */
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gutter);
}
/* Slightly larger than .footer-brand (17px/22px) on purpose: the header
   wordmark is the first thing on the page and carries the brand, while the
   footer one only signs off. */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 23px; height: 23px; border-radius: 5px; display: block; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 15px;
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }

/* Hero */
.hero {
  text-align: center;
  padding: 64px var(--gutter) 8px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 20px;
}

/* Typewriter demo on the last word: it types, double-presses a letter
   (shown in red), deletes the extra, then finishes. A transparent ghost
   reserves the full width so the headline never reflows. If JS is off or
   reduced-motion is on, the ghost stays visible as plain static text. */
.type-word { position: relative; display: inline-block; }
.type-live { display: none; }
.type-word.js-typing .type-ghost { color: transparent; }
.type-word.js-typing .type-live {
  display: inline;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.type-live .chat { color: var(--red); }
.type-caret {
  display: inline-block;
  width: 0.05em;
  height: 0.78em;
  background: currentColor;
  margin-left: 0.04em;
  transform: translateY(0.08em);
  animation: type-caret-blink 1.05s steps(1) infinite;
}
@keyframes type-caret-blink { 50% { opacity: 0; } }
.lede {
  font-size: clamp(16px, 3.2vw, 19px);
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 30px;
}

/* Buttons */
.download {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 999px;
  transition: background .18s ease;
}
.btn-primary:hover { background: #30333b; }
.btn-ico { display: inline-flex; align-items: center; }
.btn-ico:empty { display: none; }
.btn-ico svg { width: 16px; height: 16px; display: block; }
.btn-ico .mark-apple { width: 15px; height: 15px; margin-top: -2px; }
.btn-ico .mark-win { width: 14px; height: 14px; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  color: var(--ink-soft);
  padding: 13px 18px;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.btn-secondary:hover { color: var(--ink); background: var(--band); }
.microcopy {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 18px 0 0;
}

/* Product stage / menu mockup */
.stage {
  margin: 52px auto 0;
  max-width: 720px;
  min-height: 340px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.menubar {
  height: 28px;
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  position: relative;
}
.menubar-right { display: flex; align-items: center; color: #3a3f4a; }
.mb-glyph {
  display: inline-flex;
  padding: 3px;
  border-radius: 5px;
  color: #22262e;
  transform: translateX(-84px);
}
.mb-glyph.active { background: rgba(0,0,0,0.08); }
.mb-time {
  font-size: 12.5px;
  color: #3a3f4a;
  position: absolute;
  right: 14px;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
}

.menu {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(calc(-50% - 84px));
  width: min(268px, calc(100% - 28px));
  background: rgba(250,250,251,0.98);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(20,24,33,0.18);
  padding: 5px;
  text-align: left;
  font-size: 13.5px;
  color: #1d2027;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.menu-item .chev { margin-left: auto; color: #9aa0ab; }
.menu-item.submenu { position: relative; }
.menu-item.selected { background: linear-gradient(180deg, #4d8df6, #3a78f3); color: #fff; }
.menu-item.selected .chev { color: #fff; }
.menu-item.disabled { color: #8b909a; font-size: 12.5px; }
.menu-item .check { width: 16px; margin-left: -2px; }

/* Sensitivity submenu, flying out from the highlighted item */
.submenu-pop {
  position: absolute;
  left: calc(100% + 5px);
  top: -6px;
  width: 172px;
  background: rgba(250,250,251,0.98);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(20,24,33,0.18);
  padding: 5px;
  color: #1d2027;
  font-weight: 400;
}
.sub-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 10px 5px 26px;
  border-radius: 6px;
  white-space: nowrap;
}
.sub-item .check { position: absolute; left: 8px; width: auto; margin: 0; }
.menu-item .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #35c759; margin-right: 8px;
  box-shadow: 0 0 0 2px rgba(53,199,89,0.18);
}
.status { padding-top: 6px; }
.menu-sep { height: 1px; background: rgba(0,0,0,0.08); margin: 5px 8px; }

/* Windows tray mockup */
.stage-win .taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  background: rgba(243,244,246,0.92);
  border-top: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-apps { display: flex; align-items: center; gap: 12px; }
.tb-win {
  width: 15px; height: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.tb-win i { background: #3a6ea5; border-radius: 1px; }
.tb-app { width: 17px; height: 17px; border-radius: 4px; background: #c6cacf; }
.tb-tray {
  position: absolute;
  right: 12px; top: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #33373f;
}
.tb-caret { font-size: 11px; color: #565a61; }
.tb-glyph { display: inline-flex; padding: 4px; border-radius: 5px; color: #22262e; }
.tb-glyph.active { background: rgba(0,0,0,0.09); }
.tb-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  line-height: 1.25;
  color: #33373f;
}

.stage-win .context-menu {
  position: absolute;
  right: 64px;
  bottom: 54px;
  width: min(224px, calc(100% - 36px));
  background: #fbfbfb;
  border: 1px solid #b6b6b6;
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(20,24,33,0.20);
  padding: 3px;
  text-align: left;
  font-family: "Segoe UI", var(--font);
  font-size: 12.5px;
  color: #1b1b1b;
}
.cm-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 12px 6px 30px;
  border-radius: 4px;
  white-space: nowrap;
}
.cm-item .cm-arrow { margin-left: auto; font-size: 8px; color: #555; padding-left: 12px; }
.cm-check { position: absolute; left: 10px; font-size: 11px; color: #1b1b1b; }
.cm-hover { background: #e8f2fd; }
.cm-status { color: #8a8a8a; }
.cm-sep { height: 1px; background: #e4e4e4; margin: 4px 8px; }
/* Sensitivity submenu, flying out to the left (menu sits at the screen edge) */
.cm-sub {
  position: absolute;
  right: calc(100% + 4px);
  bottom: -116px;
  width: 168px;
  background: #fbfbfb;
  border: 1px solid #b6b6b6;
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(20,24,33,0.20);
  padding: 3px;
  color: #1b1b1b;
}

/* Bands and sections */
main section { padding: 64px 0; }
main section.hero { padding-top: 96px; padding-bottom: 64px; }
h2 {
  font-family: var(--font-head);
  font-size: clamp(27px, 3.5vw, 35px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 16px;
  text-align: center;
}
.section-lede {
  font-size: clamp(15px, 3vw, 18px);
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 34px;
  text-align: center;
}

/* Typing demo */
.demo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  max-width: 560px;
  margin: 0 auto;
}
.demo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}
.demo-row + .demo-row { border-top: 1px solid var(--line); }
/* Route to the browser test, sat under the demo because that is where someone
   who has just watched a key double asks whether theirs does the same. */
.demo-link { text-align: center; margin: 22px 0 0; font-size: 15px; }
.demo-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.demo-link a span { border-bottom: 1px solid rgba(92, 98, 112, 0.35); padding-bottom: 1px; }
.demo-link a:hover { color: var(--ink); }
.demo-link a:hover span { border-bottom-color: currentColor; }
.demo-link svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.15s; }
.demo-link a:hover svg { transform: translateX(3px); }
.demo-label {
  font-size: 13px;
  color: var(--ink-soft);
  width: 150px;
  flex-shrink: 0;
}
.demo-out {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  min-height: 22px;
}
.demo-out .chat { color: var(--red); }
.demo-out .caret {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  background: currentColor;
  margin-left: 2px;
  transform: translateY(0.12em);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Features grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 48px auto 0;
  scroll-margin-top: 24px;
}
.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg);
}
.feature-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--band);
  color: #2b3140d4;
  margin-bottom: 14px;
}
.feature-ico svg { width: 21px; height: 21px; display: block; }
.feature h3 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 7px;
}
.feature p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }

/* Install */
/* Install: OS switcher (segmented tabs) above a single panel */
#install h2 { margin-bottom: 20px; }
.install-switch {
  display: flex;
  width: fit-content;
  margin: 0 auto 26px;
  padding: 4px;
  gap: 4px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.install-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
}
.install-tab:hover { color: var(--ink); }
.install-tab[aria-selected="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 24, 33, 0.10);
}
.install-tab svg { width: 15px; height: 15px; display: block; }
.install-tab .mark-apple { margin-top: -2px; }
.install-tab .mark-win { width: 14px; height: 14px; }

.install-panel {
  max-width: 640px;
  margin: 0 auto;
  background: #f3f4f680;
  border: 1px solid #e6e7eabd;
  border-radius: var(--radius);
  padding: 28px 30px;
}
.install-pane[hidden] { display: none; }
.install-pane ol { margin: 0 0 22px; padding-left: 20px; }
.install-pane li { margin-bottom: 10px; color: var(--ink-soft); font-size: 15.5px; }
.install-pane li:last-child { margin-bottom: 0; }
.install-pane li strong { color: var(--ink); font-weight: 600; }
/* The download sits at the top of the pane: arriving here from the nav or from
   the test page should not mean scrolling past the instructions to find it. */
.install-pane > .btn-primary { margin: 0 0 24px; }

/* Finder right-click menu, reusing the hero mockup's own menu styling so the
   two read as the same drawing. The hero .menu is absolutely positioned inside
   its stage; here it sits in the flow instead. */
.install-figure { margin: 0 0 22px; }
.install-figure .menu-inline {
  position: static;
  transform: none;
  margin: 0 auto;
  width: 224px;
}
.install-figure figcaption {
  margin: 14px auto 0;
  max-width: 400px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.install-figure figcaption strong { color: var(--ink); font-weight: 600; }
.install-note {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: #f6f7f880;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.install-note em { font-style: normal; color: var(--ink); }
.install-note strong { color: var(--ink); font-weight: 600; }
.trust {
  margin: 40px auto 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 640px;
  text-align: center;
}
.trust a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 28px 15px 2px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ink-soft);
  font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 640px;
}

/* Footer */
.footer {
  background: var(--ink);
  color: #c7ccd6;
  padding: 44px 0;
  margin-top: 40px;
}
.footer-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand {
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 600; font-size: 17px;
  font-family: var(--font-head);
}
.footer-brand img { border-radius: 5px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: #c7ccd6; text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: #fff; }

/* Responsive (desktop is the priority; this keeps small screens usable) */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .nav-links { gap: 16px; }
  /* Only one nav item fits at this width, so keep the one that leads to the
     download. Matched on the href rather than on position, because a
     :last-child rule silently changes meaning whenever the nav is reordered.
     The selector covers both "#install" on the home page and "/#install" on
     the test page. */
  .nav-links a { display: none; }
  .nav-links a[href*="#install"] { display: inline; }
  .feature-grid { grid-template-columns: 1fr; }
  .demo-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .demo-label { width: auto; }
  main section { padding: 48px 0; }
  main section.hero { padding-top: 72px; padding-bottom: 48px; }
  .footer { margin-top: 28px; }
  /* Simplify the Mac mockup on small screens: centered menu, no fly-out */
  .menu { transform: translateX(-50%); }
  .mb-glyph { transform: none; }
  .submenu-pop, .cm-sub { display: none; }
  .stage-win .context-menu { right: 18px; bottom: 54px; }
}

@media (max-width: 480px) {
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .footer-links { justify-content: center; }
}