:root {
  color-scheme: dark;
  --bg: #0e1116;
  --bg-elevated: #161b22;
  --border: #2a313c;
  --fg: #e6edf3;
  --fg-muted: #8b949e;
  --accent: #3fb950;
  --accent-fg: #04140a;
  --danger: #f85149;
  --radius: 8px;
  --font-ui: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* The palette above this line is lifted from the extension's theme.css at build time, so the
   site and the product cannot drift apart in colour without someone noticing. Everything
   below is the site's own. */

:root {
  --max: 1060px;
  --accent-wash: rgba(63, 185, 80, 0.12);
  --accent-line: rgba(63, 185, 80, 0.32);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  /* The extension runs at 13px because it lives in a popup; a page read at arm's length
     needs the room. */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--fg);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

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

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 20px;
  top: 12px;
  z-index: 10;
  background: var(--bg-elevated);
  padding: 8px 12px;
  border-radius: var(--radius);
}

.mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
}

/* ------------------------------------------------------------------ chrome */

.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  z-index: 5;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-header nav {
  display: flex;
  gap: 22px;
  font-size: 14px;
}

.site-header nav a {
  color: var(--fg-muted);
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a[aria-current] {
  color: var(--fg);
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 88px;
  padding: 32px 0 48px;
  font-size: 14px;
}

.footer-inner {
  display: grid;
  gap: 12px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-weight: 600;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer .muted {
  margin: 0;
  max-width: 62ch;
}

.muted {
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.btn:hover {
  border-color: var(--fg-muted);
  color: var(--fg);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.btn-primary:hover {
  color: var(--accent-fg);
  filter: brightness(1.08);
}

.btn-large {
  padding: 13px 26px;
  font-size: 17px;
}

/* The pre-publication state of the install button: it has to read as information, not as a
   control that is merely broken. */
.btn-pending {
  background: var(--accent-wash);
  border: 1px dashed var(--accent-line);
  color: var(--accent);
  cursor: default;
}

/* ------------------------------------------------------------------ sections */

.hero {
  padding: 76px 0 0;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(60% 120% at 50% -10%, var(--accent-wash), transparent 70%), var(--bg);
}

.hero h1 {
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  max-width: 16ch;
}

.hero p.lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--fg-muted);
  margin: 0 0 28px;
  max-width: 58ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--fg-muted);
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
}

.hero-shot {
  margin: 48px auto -1px;
  max-width: 940px;
  box-shadow: var(--shadow);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

section.band {
  padding: 72px 0 0;
}

h2.section-title {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

p.section-lede {
  color: var(--fg-muted);
  margin: 0 0 36px;
  max-width: 62ch;
}

.features {
  display: grid;
  gap: 40px;
}

.feature {
  display: grid;
  gap: 26px;
  align-items: center;
}

/* A grid item's automatic minimum size is its content, so a 1280px screenshot refuses to
   shrink and pushes the whole row past the viewport. */
.feature > * {
  min-width: 0;
}

@media (min-width: 860px) {
  .feature {
    grid-template-columns: 1fr 1.25fr;
    gap: 44px;
  }
  .feature.flip .feature-text {
    order: 2;
  }
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  color: var(--fg-muted);
}

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  padding: 20px;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.card p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 15px;
}

.flow {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 8px 0 28px;
}

.cta {
  margin-top: 76px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(80% 160% at 50% 0%, var(--accent-wash), transparent 70%), var(--bg-elevated);
  padding: 48px 24px;
  text-align: center;
}

.cta h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
}

.cta p {
  margin: 0 auto 24px;
  color: var(--fg-muted);
  max-width: 52ch;
}

/* ------------------------------------------------------------------ prose */

.prose {
  max-width: 72ch;
  padding-top: 56px;
}

.prose h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  line-height: 1.15;
}

.prose h2 {
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.prose h3 {
  font-size: 17px;
  margin: 28px 0 8px;
}

.prose p,
.prose li {
  color: var(--fg-muted);
}

.prose strong {
  color: var(--fg);
  font-weight: 600;
}

.prose li {
  margin-bottom: 6px;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 18px 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
}

th {
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------------ steps */

.steps {
  display: grid;
  gap: 20px;
  counter-reset: step;
  padding: 0;
  margin: 36px 0 0;
  list-style: none;
}

.step {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 24px;
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .step {
    grid-template-columns: 44px 1fr;
    align-items: start;
    column-gap: 20px;
    padding: 26px 28px;
  }
  .step-body {
    grid-column: 2;
  }
}

.step-number {
  counter-increment: step;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}

.step-number::before {
  content: counter(step);
}

/* The prose rules give an h2 a rule above it to separate long sections. Inside a step card the
   card is already the separation, and the line reads as a stray border. */
.step h2 {
  margin: 0 0 6px;
  padding-top: 0;
  border-top: none;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.step p {
  margin: 0 0 10px;
  color: var(--fg-muted);
}

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

.step-figure {
  margin: 16px 0 0;
}

.step-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;
}

/* The popup screenshot is a 1280x800 capture of a 320px-wide popup sitting in the corner of an
   otherwise empty tab. Shown whole it is a postage stamp in a void, so the frame crops to the
   part that matters and the image is scaled so those pixels land 1:1. */
.crop-popup {
  overflow: hidden;
  max-width: 336px;
  aspect-ratio: 336 / 176;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.crop-popup .shot {
  width: 381%;
  max-width: none;
  border: 0;
  border-radius: 0;
}

.hint {
  border-left: 2px solid var(--accent-line);
  padding: 2px 0 2px 14px;
  color: var(--fg-muted);
  font-size: 15px;
  margin: 0;
}

/* ------------------------------------------------------------------ form */

.form {
  display: grid;
  gap: 22px;
  margin-top: 32px;
  max-width: 62ch;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0;
  background: var(--bg-elevated);
}

legend {
  padding: 0 8px;
  font-weight: 600;
  font-size: 15px;
}

.choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  cursor: pointer;
  color: var(--fg-muted);
}

.choice:hover {
  color: var(--fg);
}

.choice input {
  margin: 6px 0 0;
  accent-color: var(--accent);
  flex: none;
}

label.field {
  display: grid;
  gap: 8px;
  font-size: 15px;
}

textarea {
  font: inherit;
  font-size: 15px;
  min-height: 110px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  width: 100%;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.status {
  font-size: 15px;
  color: var(--fg-muted);
}

.status[data-state='error'] {
  color: var(--danger);
}

.status[data-state='done'] {
  color: var(--accent);
}

.status:empty {
  display: none;
}