:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f8;
  --bg-tint: #fafafb;
  --surface: #ffffff;
  --border: #ececee;
  --border-strong: #dedee2;
  --text: #0a0a0b;
  --text-muted: #616168;
  --text-dim: #9a9aa2;
  --primary: #0a0a0b;
  --primary-hover: #26262b;
  --primary-fg: #ffffff;
  --secondary: #f1f1f3;
  --muted: #f4f4f5;
  --ink-grad: linear-gradient(120deg, #0a0a0b 0%, #3f3f46 55%, #71717a 100%);
  --ring: rgba(10, 10, 11, 0.08);
  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06), 0 1px 3px rgba(10, 10, 11, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(10, 10, 11, 0.18);
  --shadow-lg: 0 30px 60px -32px rgba(10, 10, 11, 0.35);
  --radius: 16px;
  --maxw: 1120px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", var(--font);
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

::selection {
  background: var(--primary);
  color: var(--primary-fg);
}

a {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--secondary);
  padding: 0.12em 0.42em;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Background: faint grid + soft top vignette */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(80% 55% at 50% -10%, rgba(10, 10, 11, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-tint), var(--bg) 40%);
}
.bg-orbs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 10, 11, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(78% 60% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(78% 60% at 50% 0%, #000 0%, transparent 72%);
}
.orb {
  display: none;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
}
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  height: 40px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-links > a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 9px;
  transition: color 0.2s, background 0.2s;
}
.nav-links > a:hover {
  color: var(--text);
  background: var(--muted);
}
.nav-gh {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s;
}
.nav-gh:hover {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
}
@media (max-width: 640px) {
  .nav-links > a:not(.nav-gh) {
    display: none;
  }
}

/* Hero */
.hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7vw, 4.5rem);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--text);
}
.grad {
  display: block;
  /* background-clip: text paints only inside the box, so the tight h1
     line-height would crop descenders; pad the box and pull it back. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  background: var(--ink-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  max-width: 600px;
  margin: 24px auto 0;
  font-size: clamp(1.02rem, 2.1vw, 1.19rem);
  color: var(--text-muted);
  line-height: 1.62;
}

/* Buttons */
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.cta-row.center {
  margin-top: 30px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform 0.18s, box-shadow 0.25s, background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-md);
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-lg);
}
.btn-ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--muted);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-os-icon svg {
  display: block;
}

/* Version note + badges */
.version-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.84rem;
  color: var(--text-dim);
}
.badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.badge {
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

/* Section heading (shared) */
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.section-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.section-tag.center {
  display: block;
  text-align: center;
}

/* App cards (hero) */
.app-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 780px;
  margin: 40px auto 0;
  text-align: left;
}
@media (max-width: 640px) {
  .app-cards {
    grid-template-columns: 1fr;
  }
}
.app-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  overflow: hidden;
}
.app-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--primary));
}
.app-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.ac-tts {
  --card-accent: linear-gradient(90deg, #c79a10, #ffd23f);
}
.ac-dubb {
  --card-accent: linear-gradient(90deg, #2a8f86, #4ecdc4);
}
.app-card-logo {
  height: 52px;
  width: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.app-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.app-card p {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.app-card-arrow {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 1.1rem;
  transition: transform 0.25s, color 0.25s;
}
.app-card:hover .app-card-arrow {
  transform: translateY(3px);
  color: var(--text);
}

/* Demo film */
.demo {
  max-width: 900px;
  margin: 96px auto 0;
  padding: 0 24px;
  text-align: center;
}
.demo .section-tag {
  display: block;
}
.demo h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.6vw, 2.25rem);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--text);
}
.demo-frame {
  margin-top: 28px;
}
/* width:100% over the intrinsic 1280x720 so the film shrinks with the column
   on a narrow screen instead of pushing the page sideways. */
.demo-frame video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}
.demo-note {
  max-width: 620px;
  margin: 20px auto 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.62;
}
@media (max-width: 880px) {
  .demo {
    margin-top: 72px;
  }
}

/* Product sections */
.product {
  max-width: var(--maxw);
  margin: 110px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: center;
}
/* Grid items default to min-width: auto, so a column refuses to shrink below
   the widest thing inside it. The install commands are long, which let the
   copy column take the whole row and squeezed the screenshot beside it down
   to a thumbnail. */
.product-copy,
.product-visual {
  min-width: 0;
}
.product-rev .product-copy {
  order: 2;
}
.product-rev .product-visual {
  order: 1;
}
@media (max-width: 880px) {
  .product {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 88px;
  }
  .product-rev .product-copy {
    order: 1;
  }
  .product-rev .product-visual {
    order: 2;
  }
}
.p-tts {
  --acc: #c79a10;
  --acc-soft: #a37e0c;
}
.p-dubb {
  --acc: #2a8f86;
  --acc-soft: #1f7a72;
}
.product-copy .section-tag {
  color: var(--acc-soft);
}
.product-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--text);
  text-wrap: balance;
}
.product-copy > p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.check-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--acc, var(--primary))
    no-repeat center /
    12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 6'/%3E%3C/svg%3E");
}
.badges.start {
  justify-content: flex-start;
  margin-top: 20px;
}
.cta-row.start {
  justify-content: flex-start;
  margin-top: 16px;
}
.dl-block {
  margin-top: 26px;
}
.dl-block .version-note {
  justify-content: flex-start;
  margin-top: 14px;
}

/* One install block per OS: name, the line to paste, and what that OS will say */
.os-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.os-block:first-of-type {
  border-top: none;
  padding-top: 0;
}
.os-name {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 10px;
}

/* One-line install command with a copy button */
.install-lead {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.code-copy + .code-copy {
  margin-top: 10px;
}
.code-copy {
  position: relative;
  padding: 15px 74px 15px 17px;
  border: 1px solid #22252b;
  border-radius: 13px;
  background: #0f1113;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.code-copy code {
  display: block;
  /* These commands are meant to be read before they are run, so they wrap
     rather than scroll out of sight. The hanging indent keeps a wrapped line
     aligned under the command instead of under the prompt. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding: 0 0 0 1.25em;
  text-indent: -1.25em;
  background: none;
  border: none;
  font-size: 0.82rem;
  line-height: 1.75;
  color: #e7e9ee;
}
/* A pseudo element, so the prompt is never part of what the copy button
   reads out of textContent. */
.code-copy code::before {
  content: "$";
  margin-right: 0.75em;
  color: #6f7787;
  user-select: none;
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #b6bcc9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}
.copy-btn.is-copied {
  background: #1f8f6a;
  border-color: #1f8f6a;
  color: #ffffff;
}
.copy-btn.is-copied,
.copy-btn.is-copied:hover {
  background: var(--secondary);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.install-note {
  margin-top: 12px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}
.install-foot {
  margin: 22px auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.install-foot strong {
  color: var(--text);
}
.install-note code {
  font-size: 0.8em;
}
.install-note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Product visual window */
.product-visual {
  perspective: 1200px;
}
.window {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  position: relative;
}
.window-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #dcdce0;
}
.window-bar span:nth-child(1) {
  background: #ff5f57;
}
.window-bar span:nth-child(2) {
  background: #febc2e;
}
.window-bar span:nth-child(3) {
  background: #28c840;
}
.window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 500;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* Final CTA */
.final-cta {
  max-width: var(--maxw);
  margin: 130px auto 0;
  padding: 0 24px;
}
.final-inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 72px 30px;
  border-radius: 28px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}
.final-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
}
.final-inner > * {
  position: relative;
}
.final-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--primary-fg);
}
.final-inner p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
}
.final-inner .btn-primary {
  background: var(--primary-fg);
  color: var(--primary);
}
.final-inner .btn-primary:hover {
  background: #eaeaec;
}
.final-inner .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--primary-fg);
  box-shadow: none;
}
.final-inner .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Footer */
.footer {
  max-width: var(--maxw);
  margin: 90px auto 0;
  padding: 34px 24px 60px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.footer-brand img {
  height: 38px;
  width: auto;
}
.footer-links {
  display: flex;
  gap: 8px;
}
.footer-links a {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 9px;
  transition: color 0.2s, background 0.2s;
}
.footer-links a:hover {
  color: var(--text);
  background: var(--muted);
}
.footer-note {
  width: 100%;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* The install routes are documentation, not a caption for the screenshot, so
   they span the whole section instead of being squeezed into the copy column
   with a tall empty gap beside them. */
.dl-block.install-wide {
  grid-column: 1 / -1;
  /* The reversed section reorders its two columns, so this has to be told to
     stay last or it renders above the copy it belongs under. */
  order: 3;
  align-self: start;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.os-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.os-grid .os-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
/* The cards are equal height, so the shorter route ends early. Its note stays
   with the command it explains rather than floating down to meet the other
   card, which read as a gap in the middle of the card. */
/* Side by side the two blocks are columns, not stacked sections. The separator
   meant to divide them vertically drew a rule across the top of the right-hand
   one only and pushed its heading out of line with the left. It belongs to the
   stacked layout, so it is put back only once the grid collapses. */
.os-grid > .os-block {
  margin-top: 0;
}
@media (max-width: 880px) {
  .os-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}