/* Rollbird landing: dark-first, light via prefers-color-scheme + toggle */

/* Geist and Geist Mono, served from this origin. These are the same woff2
   files Google Fonts serves, split by unicode-range the same way; each one
   is the variable font, so a single file per subset covers every weight the
   page uses. Self-hosted so reading the site contacts nobody but Rollbird.
   SIL Open Font License 1.1 — see fonts/OFL.txt. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-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;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-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;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-symbols2.woff2) format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --bg: #0A0A0B;
  --surface: #0D0D0F;
  --surface-raised: #101012;
  --surface-2: #141417;
  --border: #1A1A1E;
  --border-strong: #26262B;
  --border-soft: #18181B;
  --text: #FAFAFA;
  --text-fg: #C9C9D1;
  --muted: #A0A0A8;
  --muted-2: #8A8A93;
  --muted-3: #7E7E88;
  --dim: #4A4A52;
  --accent: #3B9EFF;
  --accent-ink: #04121F;
  --grid-line: #17171A;
  --grid-line-strong: #232328;
  --terminal-bg: #0D0D0F;
  --terminal-bar-bg: #0B0B0D;
  --terminal-bar-border: #17171A;
  --terminal-muted: #8A8A93;
  --terminal-text: #FAFAFA;
  --terminal-fg: #C9C9D1;
  --terminal-note: #9A9AA3;
  --terminal-accent: #3B9EFF;
  --panel-accent: #3B9EFF;
  --toggle-active-bg: rgba(59, 158, 255, .14);
  --brand-1: rgba(250, 250, 250, .45);
  --brand-2: rgba(250, 250, 250, .72);
  --plan-featured-border: #2B6FA8;
  --plan-featured-bg: #0E1217;
  --plan-featured-rule: #1E262E;
  --shadow-hero: 0 40px 90px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .015) inset;
  --shadow-plan: 0 30px 70px -50px rgba(59, 158, 255, .5);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #FBFBFC;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-2: #FBFBFC;
  --border: #E4E4E9;
  --border-strong: #DCDCE2;
  --border-soft: #E7E7EC;
  --text: #0A0A0B;
  --text-fg: #2A2A30;
  --muted: #5C5C66;
  --muted-2: #6B6B73;
  --muted-3: #7A7A84;
  --dim: #C4C4CC;
  --accent: #0B72D6;
  --accent-ink: #FFFFFF;
  --grid-line: #ECECF0;
  --grid-line-strong: #DCDCE2;
  --terminal-bg: #0D0D0F;
  --terminal-bar-bg: #0B0B0D;
  --terminal-bar-border: #17171A;
  --terminal-muted: #8A8A93;
  --brand-1: rgba(10, 10, 11, .32);
  --brand-2: rgba(10, 10, 11, .62);
  --plan-featured-border: #0B72D6;
  --plan-featured-bg: #FFFFFF;
  --plan-featured-rule: #EDEDF1;
  --toggle-active-bg: rgba(11, 114, 214, .08);
  --shadow-hero: 0 30px 60px -36px rgba(10, 10, 11, .18);
  --shadow-plan: 0 24px 50px -40px rgba(11, 114, 214, .35);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FBFBFC;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-2: #FBFBFC;
    --border: #E4E4E9;
    --border-strong: #DCDCE2;
    --border-soft: #E7E7EC;
    --text: #0A0A0B;
    --text-fg: #2A2A30;
    --muted: #5C5C66;
    --muted-2: #6B6B73;
    --muted-3: #7A7A84;
    --dim: #C4C4CC;
    --accent: #0B72D6;
    --accent-ink: #FFFFFF;
    --grid-line: #ECECF0;
    --grid-line-strong: #DCDCE2;
    --brand-1: rgba(10, 10, 11, .32);
    --brand-2: rgba(10, 10, 11, .62);
    --plan-featured-border: #0B72D6;
    --plan-featured-bg: #FFFFFF;
    --plan-featured-rule: #EDEDF1;
    --toggle-active-bg: rgba(11, 114, 214, .08);
    --shadow-hero: 0 30px 60px -36px rgba(10, 10, 11, .18);
    --shadow-plan: 0 24px 50px -40px rgba(11, 114, 214, .35);
    color-scheme: light;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--muted); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus-visible { color: var(--text); }
::selection { background: rgba(59, 158, 255, .3); }

.mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted-2); }
.fg { color: var(--text-fg); }
.accent-text { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* Nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 16px;
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
@media (min-width: 640px) { .nav-inner { padding: 0 28px; } }

.brand { display: flex; align-items: center; gap: 9px; color: var(--text); }
.brand-bar-1 { fill: var(--text); opacity: .45; }
.brand-bar-2 { fill: var(--text); opacity: .72; }
.brand-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-links { display: none; align-items: center; gap: 24px; font-size: 14px; }
@media (min-width: 860px) { .nav-links { display: flex; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-weight: 500; letter-spacing: -0.01em;
  padding: 11px 20px; font-size: 14.5px;
  border: 1px solid transparent; cursor: pointer;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); font-weight: 600; border: none; }
.btn-outline { border: 1px solid var(--border-strong); color: var(--text); background: var(--surface-raised); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; font-weight: 600; border-radius: 7px; }
.btn-lg { padding: 12px 22px; font-size: 15px; margin-top: 30px; }
.btn-accent:hover, .btn-accent:focus-visible { color: var(--accent-ink); }
/* Mixing toward --text lightens the accent on dark and deepens it on light. */
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.btn-outline:hover, .btn-plan:hover { border-color: var(--muted-3); background: var(--surface-2); }
.btn-sm, .nav .btn-accent { display: none; }
@media (min-width: 640px) { .btn-sm, .nav .btn-accent { display: inline-flex; } }

.theme-toggle {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); background: var(--surface-raised);
  color: var(--text); cursor: pointer; flex-shrink: 0;
}
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

.nav-burger {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-raised); display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-burger span { width: 15px; height: 1.5px; background: var(--muted-2); border-radius: 1px; }
@media (min-width: 860px) { .nav-burger { display: none; } }

/* Grid rows (0fr/1fr) let the panel open to its own height without JS
   measuring it; the inner wrapper clips while the row resizes. */
.mobile-menu {
  display: grid; grid-template-rows: 1fr;
  border-bottom: 1px solid var(--border-soft); background: var(--bg);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-inner {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px;
  min-height: 0; overflow: hidden;
}
.mobile-menu a { padding: 10px 4px; font-size: 15px; }
.mobile-menu .mobile-menu-cta { display: inline-flex; margin-top: 8px; padding: 11px 20px; font-size: 14.5px; }
@media (min-width: 640px) { .mobile-menu .mobile-menu-cta { display: none; } }
@media (min-width: 860px) { .mobile-menu { display: none !important; } }

/* Layout helpers */
.section { max-width: 1160px; margin: 0 auto; padding: 88px 16px 0; }
@media (min-width: 640px) { .section { padding-top: 130px; padding-left: 28px; padding-right: 28px; } }

.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.eyebrow-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.eyebrow .mono { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }

.h2-narrow, .h2-wide {
  margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -0.032em;
  font-size: clamp(26px, 6vw, 42px);
}
.h2-narrow { max-width: 680px; }
.h2-wide { max-width: none; }

.section-lede { margin: 18px 0 0; max-width: 560px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.section-foot { margin: 22px 0 0; font-size: 16px; color: var(--muted-2); line-height: 1.6; }

.card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }

/* Hero */
.hero {
  max-width: 1160px; margin: 0 auto; padding: 56px 16px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
@media (min-width: 640px) { .hero { padding: 96px 28px 0; } }

.hero h1 {
  margin: 0; max-width: 860px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.036em; font-size: clamp(32px, 8vw, 66px);
}
.lede { margin: 20px 0 0; max-width: 600px; font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (min-width: 640px) { .lede { margin-top: 24px; font-size: 18px; } }

.hero-actions {
  display: flex; flex-direction: column; width: 100%; max-width: 320px;
  gap: 10px; margin-top: 26px;
}
.hero-actions .btn { width: 100%; }
@media (min-width: 560px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; margin-top: 34px; }
  .hero-actions .btn { width: auto; }
}
.cta-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }

/* Terminal */
.terminal {
  width: 100%; max-width: 760px; margin: 40px 0 0;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--terminal-bg); overflow: hidden; text-align: left;
  box-shadow: var(--shadow-hero);
}
@media (min-width: 640px) { .terminal { margin-top: 56px; } }

.terminal-bar {
  height: 38px; border-bottom: 1px solid var(--terminal-bar-border);
  background: var(--terminal-bar-bg); display: flex; align-items: center; padding: 0 14px; gap: 7px;
}
.terminal-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #2A2A30; }
.terminal-title { flex: 1; text-align: center; font-size: 11.5px; color: var(--terminal-muted); }
.terminal-cmd { font-size: 11.5px; color: var(--terminal-muted); }

.terminal-body {
  padding: 18px 16px 20px; font-size: 12.5px; line-height: 1.95; color: var(--terminal-fg);
}
@media (min-width: 640px) { .terminal-body { padding: 22px 24px 26px; font-size: 13.5px; line-height: 2; } }
.terminal-body .muted { color: var(--terminal-muted); }
.terminal-body .fg { color: var(--terminal-fg); }
.terminal-body .accent-text { color: var(--terminal-accent); }
.spacer { height: 16px; }
.spacer-sm { height: 12px; }
.terminal-note { color: var(--terminal-note); }
/* Release output: the CLI's clack timeline, with its rail and markers drawn
   in CSS so they stay continuous at any line-height or font fallback. */
.terminal-release { max-width: none; margin-top: 16px; }
.tl { list-style: none; margin: 10px 0 0; padding: 0; --tl-row: 1.95em; }
.tl li {
  --tl-pt: 10px;
  position: relative; display: grid; grid-template-columns: 1fr; column-gap: 16px;
  padding: var(--tl-pt) 0 0 26px; line-height: var(--tl-row);
}
@media (min-width: 640px) { .tl li { grid-template-columns: 170px 1fr; } }
.tl .tl-start, .tl .tl-answer, .tl .tl-after { --tl-pt: 0px; }
/* The rail runs through each row's padding, so it never breaks between rows. */
.tl li::before {
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0;
  width: 1px; background: var(--terminal-muted); opacity: .45;
}
.tl .tl-start::before { top: calc(var(--tl-pt) + var(--tl-row) / 2); }
.tl .tl-end::before { bottom: auto; height: calc(var(--tl-pt) + var(--tl-row) / 2); }
.tl .tl-after::before { display: none; }

.tl-marker {
  position: absolute; left: 1px; top: calc(var(--tl-pt) + var(--tl-row) / 2);
  width: 7px; height: 7px; margin-top: -3.5px;
  border: 1.5px solid var(--terminal-accent); background: var(--terminal-bg); transform: rotate(45deg);
}
.tl-start .tl-marker, .tl-end .tl-marker {
  left: 4px; width: 9px; height: 0; margin-top: 0; transform: none; background: none;
  border: 0; border-top: 1px solid var(--terminal-muted); opacity: .45;
}
.tl-label { color: var(--terminal-fg); }
.tl-detail { color: var(--terminal-muted); }
.tl-title { color: var(--terminal-text); font-weight: 500; }
.tl-done { color: var(--terminal-accent); }
/* Rows without a detail (title, prompt, answer, outro, URL) use the full width. */
.tl .tl-label:last-child { grid-column: 1 / -1; }
/* Long first lines wrap under themselves on phones instead of scrolling. */
.tl-label, .tl-detail { overflow-wrap: anywhere; }

/* Chart / table */
.chart-card { margin-top: 36px; padding: 22px 18px 20px; }
@media (min-width: 640px) { .chart-card { margin-top: 44px; padding: 28px 30px 22px; } }
.chart-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.chart-label { font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; }
.legend { display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 7px; color: var(--muted-2); }
.legend-item-strong { color: var(--text); }
.legend-swatch { width: 14px; height: 2px; display: inline-block; }
.legend-swatch-muted { background: var(--dim); }
.legend-swatch-accent { background: var(--accent); }
.chart-svg { width: 100%; height: auto; display: block; }
.grid-line { stroke: var(--grid-line); }
.grid-line-strong { stroke: var(--grid-line-strong); }
.chart-text { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; fill: var(--muted-2); }
.chart-text-strong { font-size: 12.5px; fill: var(--muted); }
.chart-text-accent { font-size: 12.5px; fill: var(--accent); }
.chart-line-muted { stroke: var(--dim); }
.chart-dot-muted { fill: #6B6B73; }
.chart-line-accent { stroke: var(--accent); }
.chart-dot-accent { fill: var(--accent); }

.table-card { margin-top: 16px; overflow: hidden; overflow-x: auto; }
@media (min-width: 640px) { .table-card { margin-top: 20px; } }
.table-row { display: grid; grid-template-columns: 1fr 1fr 1fr; min-width: 330px; border-bottom: 1px solid var(--border-soft); }
.table-row:last-child, .table-row-last { border-bottom: none; }
.th { padding: 12px 14px; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.th-accent { color: var(--accent); background: rgba(59, 158, 255, .05); }
.td { padding: 15px 14px; font-size: 14.5px; color: var(--text); }
@media (min-width: 640px) { .th { padding: 14px 24px; } .td { padding: 18px 24px; font-size: 16px; } }
.td-muted { color: var(--muted-2); }
.td-accent { color: var(--text); background: rgba(59, 158, 255, .05); }
.table-source { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.table-source a { color: var(--text-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.table-source a:hover, .table-source a:focus-visible { color: var(--text); }

/* Feature grid */
.grid {
  display: grid; gap: 1px; margin-top: 36px;
  background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
@media (min-width: 640px) { .grid { margin-top: 44px; } }
.grid-4 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.cell { background: var(--surface); padding: 22px 18px 24px; }
@media (min-width: 640px) { .cell { padding: 26px 24px 30px; } }
.cell-num { font-size: 11px; color: var(--accent); margin-bottom: 14px; }
.cell-title { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.cell-title-break { word-break: break-all; }
.cell-icon { margin-bottom: 16px; }
.cell-heading { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.cell-body { font-size: 14px; line-height: 1.55; color: var(--muted-2); }
.cell-code { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; color: var(--text-fg); white-space: nowrap; }
.icon-track { fill: none; stroke: var(--border-strong); }
.icon-track-fill { fill: var(--border-strong); }

/* Engine */
/* FAQ: two columns of question/answer pairs, hairline-separated. */
.faq { display: grid; grid-template-columns: 1fr; gap: 0; margin: 36px 0 0; }
@media (min-width: 640px) { .faq { margin-top: 44px; } }
@media (min-width: 860px) { .faq { grid-template-columns: repeat(2, 1fr); column-gap: 56px; } }
.faq-item { border-top: 1px solid var(--border); padding: 22px 0 24px; }
.faq dt { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.faq dd { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.faq dd a { color: var(--accent); }
.faq dd a:hover, .faq dd a:focus-visible { text-decoration: underline; }

/* Pricing */
.pricing-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; margin-top: 20px;
}
.pricing-banner { margin: 0; display: flex; align-items: baseline; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.billing-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface);
}
.billing-option {
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--muted-2); background: transparent; border: 0; border-radius: 6px;
  padding: 7px 12px; cursor: pointer;
}
.billing-option:hover { color: var(--text); }
.billing-option[aria-pressed="true"] {
  color: var(--text); background: var(--toggle-active-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.billing-save { color: var(--accent); }

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 32px; max-width: 560px; }
@media (min-width: 860px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; max-width: none; } }

.plan {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 24px 20px 26px; display: flex; flex-direction: column; position: relative;
}
@media (min-width: 640px) { .plan { padding: 26px 24px 28px; } }
.plan-featured {
  border-color: var(--plan-featured-border); background: var(--plan-featured-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-plan);
}
.plan-badge {
  position: absolute; top: -10px; left: 20px; background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px;
}
.plan-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.plan-name-accent { color: var(--accent); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.plan-amount { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; }
@media (min-width: 640px) { .plan-amount { font-size: 38px; } }
.plan-period { font-size: 13.5px; color: var(--muted-2); }
.plan-billed { font-size: 12.5px; color: var(--muted-2); margin-top: 4px; line-height: 1.5; }
.plan-desc { font-size: 13.5px; color: var(--muted-2); margin-top: 12px; line-height: 1.5; }
@media (min-width: 860px) { .plan-desc { min-height: 40px; } }
.btn-plan {
  margin-top: auto; text-align: center; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 500;
  padding: 10px 0; border-radius: 7px; width: 100%;
}
.btn-plan-featured { margin-top: auto; padding: 10px 0; width: 100%; font-size: 13.5px; }
.rule { height: 1px; background: var(--border); margin: 24px 0 20px; }
.rule-featured { background: var(--plan-featured-rule); }
.plan-features { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.plan-features li { display: flex; gap: 9px; color: var(--muted-2); }
.plan-features .feat-lead { color: var(--text); font-weight: 600; }
.plan-features .feat-hook { color: var(--text-fg); font-weight: 500; }
.pricing-free { margin: 24px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
.pricing-free a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pricing-free a:hover, .pricing-free a:focus-visible { color: var(--text); }
.pricing-foot { margin: 10px 0 0; font-size: 14.5px; color: var(--muted-2); display: flex; align-items: center; gap: 9px; }

/* CTA */
.cta-card {
  border-radius: 16px; padding: 44px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 640px) { .cta-card { padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 60px); } }
.cta-heading { margin: 0; max-width: 640px; font-size: clamp(26px, 6vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; }
.cta-body { margin: 16px 0 0; max-width: 500px; font-size: 15.5px; line-height: 1.6; color: var(--muted-2); }
.copy-row {
  margin-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  border: 1px solid var(--border-strong); background: var(--bg); border-radius: 8px; padding: 9px 10px 9px 14px;
}
.copy-cmd { font-size: 13px; color: var(--text-fg); }
.copy-btn {
  font-size: 11px; color: var(--muted-2); border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 3px 8px; background: transparent; cursor: pointer; font-family: inherit;
  /* Fits "copied" too, so confirming doesn't resize the row. */
  min-width: 56px;
}
.copy-btn:hover { color: var(--text); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }

/* Footer */
.footer { max-width: 1160px; margin: 0 auto; padding: 72px 16px 0; }
@media (min-width: 640px) { .footer { padding: 110px 28px 0; } }
.footer-top {
  border-top: 1px solid var(--border-soft); padding-top: 36px;
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 560px) { .footer-top { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 860px) { .footer-top { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(120px, 1fr)); gap: 32px; padding-top: 44px; } }
.footer-brand { margin-bottom: 14px; }
.footer-tagline { font-size: 13px; color: var(--muted-2); line-height: 1.6; max-width: 220px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.footer-col-title { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 3px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding: 28px 0 36px; margin-top: 32px; border-top: 1px solid var(--border-soft);
}
@media (min-width: 640px) { .footer-bottom { padding: 36px 0 44px; margin-top: 40px; } }
.footer-copy { font-size: 12px; color: var(--muted-3); }
.footer-contact { font-size: 12px; color: var(--muted-3); }
.footer-contact:hover, .footer-contact:focus-visible { color: var(--text); }

/* Legal documents (terms.html, privacy.html)
   One column of prose at a reading measure. These are documents, not sections
   of the landing page: body copy sits on --text-fg rather than --muted, and
   nothing on them animates. Same tokens, header and footer as everything else. */
.doc { max-width: 1160px; margin: 0 auto; padding: 48px 16px 0; }
@media (min-width: 640px) { .doc { padding: 72px 28px 0; } }
.doc-inner { max-width: 720px; }

.doc-title { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -0.034em; font-size: clamp(30px, 7vw, 44px); }
.doc-meta { margin: 16px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--muted-3); letter-spacing: 0.08em; text-transform: uppercase; }
.doc-lede { margin: 20px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--muted); }

/* The things worth knowing before the numbered sections: said once, up front,
   rather than left to be discovered in clause 11. */
.doc-callout {
  margin: 28px 0 0; padding: 18px 18px 20px;
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: 10px; background: var(--surface);
}
@media (min-width: 640px) { .doc-callout { padding: 20px 24px 22px; } }
.doc-callout p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-fg); }
.doc-callout p + p { margin-top: 10px; }
.doc-callout strong { color: var(--text); font-weight: 600; }
.doc-callout a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc-callout a:hover, .doc-callout a:focus-visible { color: var(--text); }

.doc-toc { margin: 36px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--border); }
@media (min-width: 560px) { .doc-toc { columns: 2; column-gap: 32px; } }
.doc-toc li { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; break-inside: avoid; }
.doc-toc a { color: var(--muted-2); }
.doc-toc a:hover, .doc-toc a:focus-visible { color: var(--text); }
.doc-toc-num { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--accent); margin-right: 8px; }

.doc-body { counter-reset: doc-section; }
.doc-body section { border-top: 1px solid var(--border); padding-top: 26px; margin-top: 30px; }
/* Hanging number, so every heading and every paragraph starts at the same
   left edge at 400px. */
.doc-body h2 {
  margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.3;
  display: flex; gap: 10px; align-items: baseline;
}
@media (min-width: 640px) { .doc-body h2 { font-size: 20.5px; } }
.doc-body h2::before {
  counter-increment: doc-section; content: counter(doc-section);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 500; color: var(--accent); flex: none;
}
.doc-body h3 { margin: 24px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.doc-body p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--text-fg); }
.doc-body ul { margin: 14px 0 0; padding: 0 0 0 18px; }
.doc-body li { margin: 0 0 9px; font-size: 15.5px; line-height: 1.7; color: var(--text-fg); }
.doc-body li::marker { color: var(--dim); }
.doc-body li:last-child { margin-bottom: 0; }
.doc-body strong { color: var(--text); font-weight: 600; }
.doc-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc-body a:hover, .doc-body a:focus-visible { color: var(--text); }
.doc-body code { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: var(--text); }
/* Addresses, keys and endpoints wrap instead of widening the page at 400px. */
.doc-body p, .doc-body li, .doc-body a, .doc-body code { overflow-wrap: break-word; }

/* Anything that is still Maikon's decision is bracketed and accented in the
   markup, so a placeholder can never be read as a settled term. */
.doc-tbd { color: var(--accent); font-weight: 500; }

/* The cookie and subprocessor lists. A table would have to scroll sideways at
   400px to fit three columns of prose, and a legal document that has to be
   dragged left and right is not readable — so the label sits beside the entry
   on a wide screen and above it on a narrow one, and nothing ever scrolls. */
.doc-facts { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.doc-facts > li { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--border); margin: 0; }
@media (min-width: 640px) { .doc-facts > li { grid-template-columns: 132px minmax(0, 1fr); gap: 4px 24px; } }
.doc-fact-name { font-size: 14.5px; font-weight: 600; color: var(--text); overflow-wrap: break-word; }
.doc-facts p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-fg); }
.doc-facts p + p { margin-top: 8px; }
.doc-fact-meta { font-size: 13px; color: var(--muted-2); }
.doc-fact-meta .doc-fact-label { color: var(--muted-3); }

/* ── Motion ──────────────────────────────────────────────────────────────
   One orchestrated moment: the hero replays a real install session, the way
   the CLI actually prints it. Two reveals that are true to the product
   rather than decorative: the release timeline prints step by step (the CLI
   does), and the chart plots left to right (the argument of the section).
   Everything else on this page holds still — no section entrances, no card
   hovers. The rest of the motion here only answers a click.

   Load and scroll reveals all sit under .js-motion, which script.js adds
   only when motion is allowed. Without JS, or with reduced motion, no rule
   below applies and the page is already in its final state at first paint.
   Nothing here animates anything but opacity and transform. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --t-tap: 90ms;
  --t-state: 170ms;
  --t-open: 260ms;
  --t-draw: 520ms;
}

/* Hero session. Lines keep their space while hidden, so the terminal is its
   final height from the first frame and nothing below it ever moves. */
.js-motion .tline { opacity: 0; }
.js-motion .tline.is-on { opacity: 1; transition: opacity 140ms linear; }
.js-motion .terminal-note.is-on { transition: opacity 320ms var(--ease-soft); }

/* Typing: the untyped remainder stays in the flow but invisible, so a
   half-typed line wraps exactly like the finished one. The caret is
   absolutely positioned inside it, which puts it at the typing point
   without adding a line-break opportunity mid-word. */
.js-motion .ty-off { visibility: hidden; position: relative; }
.js-motion .caret {
  visibility: visible; position: absolute; left: 1px; bottom: 0;
  width: 6px; height: 1.05em; background: var(--terminal-accent);
  animation: caret-blink 1.05s steps(1, end) infinite;
}
@keyframes caret-blink { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }

/* Release timeline: rows print in order, each marker landing on its rail. */
.js-motion .tl > li { opacity: 0; }
.js-motion .tl.is-printing > li {
  opacity: 1;
  transition: opacity 190ms var(--ease-soft) calc(var(--i, 0) * 70ms);
}
.js-motion .tl > li .tl-marker { transform: rotate(45deg) scale(.25); transform-origin: 50% 50%; }
.js-motion .tl.is-printing > li .tl-marker {
  transform: rotate(45deg) scale(1);
  transition: transform 300ms var(--ease-out) calc(var(--i, 0) * 70ms + 30ms);
}
.js-motion .tl > li.tl-start .tl-marker,
.js-motion .tl > li.tl-end .tl-marker { transform: scaleX(.12); transform-origin: 0 50%; }
.js-motion .tl.is-printing > li.tl-start .tl-marker,
.js-motion .tl.is-printing > li.tl-end .tl-marker { transform: scaleX(1); }

/* MAU chart: both lines are wiped in from the left together, so you watch
   one climb away while the other stays flat. */
.js-motion .chart-draw { clip-path: url(#chart-wipe); }
.js-motion #chart-wipe-rect { transform: scaleX(0); transform-origin: 90px 0; }
.js-motion .chart-svg.is-plotting #chart-wipe-rect {
  transform: scaleX(1); transition: transform var(--t-draw) var(--ease-soft);
}
.js-motion .chart-pop { opacity: 0; }
.js-motion .chart-svg.is-plotting .chart-pop {
  opacity: 1; transition: opacity 260ms var(--ease-soft) 380ms;
}

/* Controls: feedback for a click, not decoration. */
.btn, .btn-plan, .copy-btn, .billing-option, .theme-toggle, .nav-burger {
  transition:
    background-color var(--t-state) ease,
    border-color var(--t-state) ease,
    box-shadow var(--t-state) ease,
    color var(--t-state) ease,
    transform var(--t-tap) ease;
}
.btn:active { transform: translateY(1px); }
.theme-toggle:active, .nav-burger:active { transform: scale(.93); }

/* Billing interval: the numbers leave upward and the new ones rise in, so
   the change is legible instead of a silent substitution. */
@keyframes val-swap {
  0%   { opacity: 1; transform: none; }
  44%  { opacity: 0; transform: translateY(-5px); }
  46%  { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}
.js-motion [data-monthly][data-annual].is-swapping { animation: val-swap 300ms var(--ease-soft); }

/* Menu: the burger becomes the close control it acts as. */
.nav-burger span { transition: transform var(--t-open) var(--ease-out); }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.js-motion .mobile-menu { grid-template-rows: 0fr; transition: grid-template-rows var(--t-open) var(--ease-out); }
.js-motion .mobile-menu.is-open { grid-template-rows: 1fr; }
.js-motion .mobile-menu-inner { opacity: 0; transition: opacity 180ms var(--ease-soft); }
.js-motion .mobile-menu.is-open .mobile-menu-inner { opacity: 1; }

/* Theme: one crossfade of the whole page instead of an instant repaint.
   Browsers without view transitions just swap, as they do today. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}