/*
 * PwrGit marketing site (pwrgit.com) — Tangerine Terminal theme.
 *
 * Layout primitives (.section / .section-head / .eyebrow, the hero
 * stack, .cmd, .install-grid, .leaves, .faq, the footer columns) are
 * shared with the sibling marketing sites pwrsnap.com and
 * pwragent.ai — same structural shape, one palette. Keep the three in
 * step when changing the layout shell, the CTA shape, or the
 * accessibility baseline.
 *
 * The palette is not "lifted from a sibling site" here: it IS the
 * PwrGit desktop design system, token for token, from
 * apps/desktop/src/renderer/src/styles/tokens.css in pwrdrvr/PwrGit —
 * absolute-black canvas, warm-white text, sparse tangerine signal,
 * Geist / Geist Mono. When the app's tokens move, move these.
 *
 * Page anatomy (index.md): hero → app sketch → features → privacy →
 * install → faq. Each section is a plain <section id="…"> so the
 * header nav can deep-link; the sticky-header scroll offset lives
 * under "Sticky-header offset" below.
 */

:root {
  --bg-app: #000000;
  --bg-sidebar: #050505;
  --bg-panel: #0a0a0a;
  --bg-panel-elevated: #101010;
  --bg-panel-hover: #14110d;
  --bg-row-active: #120800;
  --bg-input: #080808;

  --border-subtle: rgba(247, 243, 235, 0.10);
  --border-strong: rgba(247, 243, 235, 0.20);

  --text-primary: #f7f3eb;
  --text-secondary: #b8b0a5;
  --text-muted: #8c857a;

  --accent: #ff8a1f;
  --accent-strong: #ffa33d;
  --accent-bright: #ffb35c;
  --accent-soft: rgba(255, 138, 31, 0.12);
  --accent-border: rgba(255, 138, 31, 0.42);
  --accent-shadow: rgba(255, 138, 31, 0.34);

  --status-ok: #5fa969;

  --font-sans: "Geist", "SF Pro Text", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", SFMono-Regular, "SF Mono", Consolas, monospace;

  --content-max: 72ch;
  --shell-max: 104ch;
  --wide-max: 1120px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg-app);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: #000;
}

/* ----- Skip-to-content link -----
 * Visually hidden until a keyboard user tabs to it as the first
 * focusable element on the page, then appears anchored to the
 * top-left so the user can skip past the header nav and land
 * directly in the main content area. The <main> carries
 * tabindex="-1" so the anchor jump actually moves focus there
 * (browsers normally only scroll, leaving focus on the link). */

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px;
  transform: translateY(-200%);
  transition: transform 120ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* Don't paint a focus ring around <main> just because the
 * skip-link bumped focus there — the page heading already tells
 * the user where they are. */
#main:focus {
  outline: none;
}

/* Visually-hidden utility for screen-reader-only text (live
 * regions, icon labels). Not display:none — that hides it from
 * assistive tech too. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.site-header {
  background: rgba(5, 5, 5, 0.92);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}

.site-header__inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
  border-radius: 6px;
}

.site-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.site-brand__logo {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.site-brand__accent {
  color: var(--accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-nav__list li { margin: 0; }

.site-nav__link {
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.005em;
  /* Padding lifts the tap target to a comfortable size without
     visually inflating the link. */
  padding: 8px 4px;
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
}

.site-nav__link:hover {
  color: var(--accent);
}

.site-nav__link:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-nav__link--icon {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 7px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background 120ms ease, border-color 120ms ease;
}

.site-nav__cta:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.site-nav__cta:focus-visible {
  background: var(--accent-strong);
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

/* ----- Main + page ----- */

.site-main {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding: 72px 24px 96px;
  contain: paint;
}

.page > *:first-child { margin-top: 0; }
.page > *:last-child  { margin-bottom: 0; }

/* ----- Sections ----- */

.section {
  margin: 0;
  padding: 88px 0 0;
}

.section--rule {
  margin-top: 88px;
  padding-top: 72px;
  border-top: 1px solid var(--border-subtle);
}

.section-head {
  max-width: 62ch;
  margin: 0 0 36px;
}

.section-head__title {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  border: 0;
  padding: 0;
}

.section-head__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 58ch;
}

.section-head__lede a { color: var(--text-primary); }

/* ----- Eyebrow / small label ----- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

/* ----- Hero ----- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  margin: 8px auto 56px;
  max-width: 880px;
}

.hero__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.hero__badges li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__badges li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
}

.hero__badges .is-accent { color: var(--accent); }

.hero__title {
  /* margin: 0 because this is the page's single <h1>. The
     typography section adds default heading margins; this override
     keeps the hero's vertical rhythm on the `gap` above. */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 16ch;
}

.hero__title .hero__title-accent {
  color: var(--accent);
}

.hero__lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}

.hero__lede strong { color: var(--text-primary); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: 6px;
}

.hero__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

.hero__note a { color: var(--text-secondary); }

/* "Other platforms" — a native <details> so it works without JS
 * and is keyboard/screen-reader accessible for free. */
.hero__others {
  margin: -6px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.hero__others summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  list-style: none;
}

.hero__others summary::-webkit-details-marker { display: none; }

.hero__others summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}

.hero__others[open] summary::after {
  transform: translateY(1px) rotate(225deg);
}

.hero__others summary:hover { color: var(--accent); }

.hero__others summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero__others ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}

.hero__others li { margin: 0; }

.hero__others a {
  color: var(--text-primary);
  text-decoration-color: var(--border-strong);
}

.hero__meta {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.hero__meta a { color: var(--text-muted); }

/* ----- CTAs ----- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 9px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cta--primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.cta--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
}

.cta--primary:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  transform: translateY(-1px);
}

.cta--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.cta--secondary:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}

.cta--secondary:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cta--small {
  padding: 9px 14px;
  font-size: 14px;
  border-radius: 7px;
}

/* ----- Command box (brew install …) -----
 * A <pre>-free, single-line shell command with a copy button. The
 * `$` sigil is decorative (aria-hidden) so screen readers and the
 * copy handler both get the bare command. Currently unused on the
 * page — it lights up when `homebrew_cask` is set in _config.yml,
 * which needs a PwrGit cask in pwrdrvr/homebrew-tap first. */

.cmd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 14px;
  min-height: 48px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  max-width: 100%;
}

.cmd__sigil {
  color: var(--text-muted);
  user-select: none;
}

.cmd__text {
  white-space: nowrap;
  overflow-x: auto;
  padding: 10px 0;
  letter-spacing: 0.005em;
}

.cmd__copy {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-panel-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.cmd__copy:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}

.cmd__copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cmd__copy.is-copied {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
}

.cmd--block {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* ----- Hero figure -----
 *
 * The slot for the product shot. It currently holds a CSS-only
 * schematic (.app-sketch below) rather than a screenshot, because
 * there isn't an honest one to ship yet — the README's "The hero
 * figure" section has the whole reasoning and the swap recipe. The
 * `img` rule stays because that swap is a one-element edit: drop an
 * <img> in place of the sketch and the frame, shadow, and caption
 * are already right. */

.hero-shot {
  margin: 0 0 16px;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.55);
}

.hero-shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ----- Typography ----- */

h1, h2, h3 {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2.4em 0 0.5em;
}

h1 {
  font-size: 32px;
  margin-top: 0;
}

h2 {
  font-size: 26px;
  margin-top: 2.8em;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 1.8em;
}

p {
  margin: 0 0 1.1em;
}

p:last-child { margin-bottom: 0; }

strong {
  color: var(--text-primary);
  font-weight: 600;
}

em {
  color: var(--text-secondary);
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 3em 0;
}

a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 31, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----- Lists ----- */

ul, ol {
  padding-left: 1.4em;
  margin: 0 0 1.2em;
}

li {
  margin: 0.4em 0;
}

li::marker {
  color: var(--text-muted);
}

/* ----- Code ----- */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-panel);
  color: var(--accent-bright);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
}

pre {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 1.4em 0;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ----- Keyboard input -----
 *
 * Single rendering for keyboard shortcuts site-wide. Matches the
 * docs.pwrgit.com `kbd` style so the marketing site and the
 * operator docs read as one product. Always spell the keys out
 * (`Command+F`), never use the bare Mac glyphs. */

kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-panel);
  padding: 0.1em 0.45em;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 var(--border-strong);
  line-height: 1.2;
  white-space: nowrap;
}

/* ----- Feature grid ----- */

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features > li {
  margin: 0;
  padding: 24px 26px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.features__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 2px 9px;
}

.features__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.features__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.features__body strong { color: var(--text-primary); }

/* A row of mono "spec" chips at the bottom of a feature card
 * (formats, shortcuts, limits). Decorative summary of the prose
 * above it — never the only place a fact appears. */
.features__specs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.features__specs li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 2px 8px;
  background: var(--bg-app);
}

@media (min-width: 720px) {
  .features {
    grid-template-columns: 1fr 1fr;
  }
  .features > .features--wide {
    grid-column: 1 / -1;
  }
}

/* ----- App sketch -----
 *
 * A CSS-only schematic of the three-pane window, used as the hero
 * figure. Deliberately a diagram and not a fake screenshot: abstract
 * bars instead of invented commit subjects and file paths, so nobody
 * reads a product claim off it. It is aria-hidden — the figcaption
 * below it states the same three facts in prose. */

.app-sketch {
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-app);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.55);
}

.app-sketch__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 34px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-subtle);
}

.app-sketch__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--border-strong);
  flex: 0 0 auto;
}

.app-sketch__crumb {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sketch__crumb b {
  color: var(--text-secondary);
  font-weight: 500;
}

.app-sketch__body {
  display: grid;
  grid-template-columns: 22% 1fr 26%;
  min-height: 260px;
}

.app-sketch__pane {
  padding: 12px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.app-sketch__pane:last-child {
  border-right: 0;
}

.app-sketch__pane--sidebar { background: var(--bg-sidebar); }
.app-sketch__pane--rail { background: var(--bg-sidebar); }

.app-sketch__label {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* One row of the list panes: a fixed-width chip standing in for a
 * name, then a rule standing in for the rest of the row. */
.app-sketch__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-sketch__chip {
  height: 8px;
  border-radius: 999px;
  background: var(--border-strong);
  flex: 0 0 auto;
  width: 34%;
}

.app-sketch__rule {
  height: 1px;
  background: var(--border-subtle);
  flex: 1 1 auto;
}

.app-sketch__row.is-current .app-sketch__chip { background: var(--accent); }
.app-sketch__row.is-current { padding: 3px 6px; margin: -3px -6px; border-radius: 6px; background: var(--bg-row-active); }

.app-sketch__graph {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2px;
}

.app-sketch__cta {
  margin-top: auto;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
}

/* Below the fold of a phone the three panes stop being legible as
 * panes; drop to the two that carry the idea. */
@media (max-width: 620px) {
  .app-sketch__body { grid-template-columns: 34% 1fr; min-height: 200px; }
  .app-sketch__pane--rail { display: none; }
}

/* ----- Privacy ----- */

.privacy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.privacy__claim {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.privacy__claim strong { color: var(--text-primary); }

.leaves {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-panel);
}

.leaves caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 0 10px;
}

.leaves th,
.leaves td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-top: 1px solid var(--border-subtle);
}

.leaves thead th {
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg-sidebar);
}

.leaves tbody th {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 11ch;
}

.leaves td { color: var(--text-secondary); }

.leaves .pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  white-space: nowrap;
}

.leaves .pill--never {
  color: var(--status-ok);
  border-color: rgba(95, 169, 105, 0.5);
}

.leaves .pill--optin {
  color: var(--accent);
  border-color: var(--accent-border);
}

.table-scroll {
  overflow-x: auto;
}

/* ----- Install ----- */

.install-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.install-card {
  margin: 0;
  padding: 24px 26px 22px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color 120ms ease;
}

.install-card.is-current {
  border-color: var(--accent-border);
  background: var(--bg-row-active);
}

.install-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.install-card__os {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.install-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.install-card__tag--new {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.install-card__tag--detected {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
}

.install-card__tag--soon {
  color: var(--text-muted);
}

.install-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.install-card__actions .cta { align-self: flex-start; }

.install-card__or {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.install-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.install-card__facts li {
  margin: 0;
  padding-left: 14px;
  position: relative;
}

.install-card__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-border);
}

.install-card__facts code { font-size: 0.88em; }

.install-card__badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.install-card--muted .install-card__os { color: var(--text-secondary); }

.install-foot {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .install-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .privacy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: start;
  }
}

/* ----- FAQ ----- */

.faq {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.faq > li {
  margin: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.faq details {
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 6px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 120ms ease, border-color 120ms ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg);
  border-color: var(--accent);
}

.faq summary:hover { color: var(--accent); }

.faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq__body {
  padding: 0 4px 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 70ch;
}

.faq__body p { margin: 0 0 0.8em; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body strong { color: var(--text-primary); }

.faq-foot {
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ----- Footer ----- */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 48px 24px 28px;
  margin-top: 96px;
  background: var(--bg-sidebar);
}

.site-footer__inner {
  max-width: var(--wide-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.site-footer__brand {
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 18px;
}

.site-footer__accent { color: var(--accent); }

.site-footer__blurb {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 36ch;
}

.site-footer__blurb a { color: var(--text-secondary); }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.site-footer__heading {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  border: 0;
  padding: 0;
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__col li { margin: 0; }

.site-footer__col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  padding: 3px 0;
  display: inline-block;
}

.site-footer__col a:hover { color: var(--accent); }

.site-footer__col a:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.site-footer__legal {
  max-width: var(--wide-max);
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  }
}

/* ----- Sticky-header offset for anchor jumps ----- */

@media (min-width: 721px) {
  .page :is(h1, h2, h3),
  .page section[id] {
    scroll-margin-top: 84px;
  }
}

/* ----- Responsive ----- */

@media (max-width: 720px) {
  .site-header {
    position: static;
    padding: 12px 18px;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .site-nav__list {
    gap: 4px 14px;
    flex-wrap: wrap;
    font-size: 13.5px;
  }

  .site-main {
    padding: 36px 18px 64px;
  }

  .hero {
    text-align: left;
    align-items: flex-start;
    margin-bottom: 40px;
  }

  .hero__badges,
  .hero__actions,
  .hero__others ul { justify-content: flex-start; }

  .hero__title { font-size: 44px; max-width: none; }
  .hero__lede  { font-size: 17px; }

  .section { padding-top: 56px; }
  .section--rule { margin-top: 56px; padding-top: 48px; }
  .section-head__title { font-size: 28px; }

  h1 { font-size: 26px; }
  h2 { font-size: 22px; }

  .cmd { width: 100%; }
  .cmd--block { width: 100%; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Version badge filled in by site.js — carries its own separator so the
 * meta line reads cleanly whether or not the lookup succeeded. */
[data-dl-version]:not([hidden])::after {
  content: " · ";
}

/* The scroll container is keyboard-focusable (tabindex="0") so a
 * keyboard user can scroll it when it overflows on narrow screens;
 * give it a visible ring when it is. */
.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 10px;
}

/* FAQ question = <h3> inside <summary> for a correct outline; it must
 * look like the summary row, not a section heading. */
.faq__q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: inherit;
}

/* Narrow screens: the command box must be allowed to shrink below its
 * intrinsic (nowrap) width and scroll internally instead of pushing
 * the hero wider than the viewport. Flex items default to
 * min-width:auto, which forbids that. */
.hero__actions { width: 100%; }
.cmd { min-width: 0; }
.cmd__text { min-width: 0; flex: 1 1 auto; }

/* Grid items also default to min-width:auto; without this the install
 * card inherits the brew command's nowrap width and pushes past the
 * viewport on phones. */
.install-grid > li,
.install-card__actions,
.features > li { min-width: 0; }

/* The command text wraps rather than scrolling: a scrollable <code>
 * would need to be keyboard-focusable (axe scrollable-region-focusable)
 * and a two-line brew command is easier to read than a hidden tail. */
.cmd__text {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.45;
}