/* Toolbox — landing page styles.
   A black-and-white port of the shadcn/ui design language, written as plain CSS
   so docs/ stays a directory GitHub Pages can serve with no build step.

   It follows shadcn's own conventions rather than inventing new ones:
     · the same design tokens — --background/--foreground, --card, --muted,
       --primary, --border, --input, --ring, --radius
     · the same component recipes — button, card, badge, alert, separator,
       table, accordion, tabs, input, slider, checkbox, progress
     · the "neutral" colour scale with the chroma set to 0, so every surface,
       border and accent is greyscale. Emphasis comes from contrast and
       borders, never from hue.
   Dark is the default; light is a full token override on [data-theme="light"]. */

:root {
  /* shadcn neutral, zero chroma — dark. */
  --background:            oklch(0.145 0 0);
  --foreground:            oklch(0.985 0 0);
  --card:                  oklch(0.205 0 0);
  --card-foreground:       oklch(0.985 0 0);
  --primary:               oklch(0.985 0 0);
  --primary-foreground:    oklch(0.205 0 0);
  --secondary:             oklch(0.269 0 0);
  --secondary-foreground:  oklch(0.985 0 0);
  --muted:                 oklch(0.269 0 0);
  --muted-foreground:      oklch(0.708 0 0);
  --accent:                oklch(0.269 0 0);
  --accent-foreground:     oklch(0.985 0 0);
  --border:                oklch(1 0 0 / 10%);
  --border-strong:         oklch(1 0 0 / 18%);
  --input:                 oklch(1 0 0 / 15%);
  --ring:                  oklch(0.556 0 0);

  /* shadcn's radius scale, all derived from one knob. */
  --radius:    0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .18);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .22), 0 1px 2px -1px rgb(0 0 0 / .22);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .24), 0 2px 4px -2px rgb(0 0 0 / .24);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);

  --wrap: 1120px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
          system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

[data-theme="light"] {
  --background:            oklch(1 0 0);
  --foreground:            oklch(0.145 0 0);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.145 0 0);
  --primary:               oklch(0.205 0 0);
  --primary-foreground:    oklch(0.985 0 0);
  --secondary:             oklch(0.97 0 0);
  --secondary-foreground:  oklch(0.205 0 0);
  --muted:                 oklch(0.97 0 0);
  --muted-foreground:      oklch(0.556 0 0);
  --accent:                oklch(0.97 0 0);
  --accent-foreground:     oklch(0.205 0 0);
  --border:                oklch(0.922 0 0);
  --border-strong:         oklch(0.87 0 0);
  --input:                 oklch(0.922 0 0);
  --ring:                  oklch(0.708 0 0);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  color-scheme: light;
}

/* ─────────────────────────── base ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tailwind's type scale, which is what shadcn's examples are written against. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(2.25rem, 5.6vw, 3.75rem); font-weight: 700; letter-spacing: -.032em; }
h2 { font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 650; }
h3 { font-size: 1rem; }
p  { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* shadcn's inline <code>: muted surface, no border, tight radius. */
code {
  font-family: var(--mono);
  font-size: .85em;
  font-weight: 500;
  background: var(--muted);
  color: var(--foreground);
  padding: .15em .4em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1rem; height: 1rem; flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap.narrow { max-width: 48rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--primary-foreground);
  padding: .75rem 1.125rem; border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; }

/* shadcn focus ring: a 3px translucent ring plus a solid border colour shift. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────── brand mark ───────────────────────────
   The app icon reduced to a monochrome glyph: the toolbox drawn in the
   foreground colour on a bordered card, so it inverts with the theme. */

.brand-mark {
  /* display:block matters outside the nav: as a bare inline <span> in .closer it
     would ignore width/height and collapse to nothing. */
  display: block;
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--foreground);
  position: relative;
}
/* toolbox body */
.brand-mark::before {
  content: "";
  position: absolute;
  left: 20%; right: 20%; top: 47%; bottom: 24%;
  background: var(--background);
  border-radius: 2px;
}
/* handle */
.brand-mark::after {
  content: "";
  position: absolute;
  left: 34%; right: 34%; top: 27%; height: 21%;
  border: 2px solid var(--background);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.brand-mark.big {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
}
.brand-mark.big::before { border-radius: 4px; }
.brand-mark.big::after { border-width: 4px; }

/* ═══════════════════════ shadcn components ═══════════════════════ */

/* ── button ──
   h-9 by default, text-sm, font-medium, gap-2, rounded-md, shadow-xs. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;
  white-space: nowrap;
  height: 2.25rem; padding-inline: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn .ico { width: 1rem; height: 1rem; }

.btn-default {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: var(--shadow-xs);
}
.btn-default:hover { background: color-mix(in oklab, var(--primary) 90%, var(--background)); }

.btn-outline {
  border-color: var(--border); background: var(--background); color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-ghost { color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-lg { height: 2.5rem; padding-inline: 1.5rem; border-radius: var(--radius-md); }
.btn-sm { height: 2rem; padding-inline: .75rem; font-size: .8125rem; gap: .375rem; }

.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-icon .ico { width: 1rem; height: 1rem; }

/* Release details stay quiet inside the download controls. */
.btn .meta { font-weight: 400; opacity: .7; font-size: .8125rem; }
.btn .meta:empty { display: none; }

/* ── badge ──
   text-xs, font-medium, rounded-full, px-2 py-0.5. */

.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 500; line-height: 1rem;
  padding: .25rem .625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
/* The hero badge holds a full sentence, so it has to wrap on narrow screens —
   shadcn's Badge is nowrap, which is right for short labels only. */
.badge-multiline { white-space: normal; text-align: left; align-items: baseline; }
.badge-multiline .dot { position: relative; top: -.1em; }
.badge .dot {
  width: .375rem; height: .375rem; border-radius: 50%;
  background: currentColor;
}

/* ── card ── */

.card {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.card-interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.card-header { display: grid; gap: .375rem; }
.card-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.card-description { font-size: .875rem; color: var(--muted-foreground); }

/* Icon chip above a card title — bg-muted, rounded-md, size-9. */
.card-icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
}
.card-icon .ico { width: 1.125rem; height: 1.125rem; }

/* ── separator ── */

.separator { height: 1px; border: 0; margin: 0; background: var(--border); }

/* ── alert ── */

.alert {
  display: grid; gap: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-xs);
}
.alert-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.alert-description { font-size: .875rem; color: var(--muted-foreground); display: grid; gap: .75rem; }

/* ── table ── */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 34rem; }
thead tr { border-bottom: 1px solid var(--border); }
th {
  text-align: left; padding: .75rem 1rem;
  font-weight: 500; color: var(--muted-foreground);
  height: 2.5rem;
}
td { padding: .75rem 1rem; color: var(--foreground); vertical-align: top; }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
td:not(:first-child) { color: var(--muted-foreground); }

/* ── accordion ──
   A <details> element styled as shadcn's AccordionItem/Trigger/Content. */

.accordion { border-top: 1px solid var(--border); margin-top: 2.5rem; }
details { border-bottom: 1px solid var(--border); }
summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0;
  font-size: .9375rem; font-weight: 500;
  transition: color .15s;
}
summary:hover { text-decoration: underline; text-underline-offset: 4px; }
summary::-webkit-details-marker { display: none; }
summary .chevron {
  margin-left: auto; flex: none;
  width: .875rem; height: .875rem;
  color: var(--muted-foreground);
  transition: transform .2s;
}
details[open] summary .chevron { transform: rotate(180deg); }
details .accordion-content { padding: 0 2.5rem 1rem 0; display: grid; gap: .75rem; }
details .accordion-content p { font-size: .875rem; color: var(--muted-foreground); }

/* ── input / checkbox / slider / progress ── */

.input {
  font: inherit; font-size: .8125rem;
  height: 1.875rem; padding-inline: .5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: color-mix(in oklab, var(--background) 30%, transparent);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}

.checkbox { accent-color: var(--primary); width: .875rem; height: .875rem; }

.slider { flex: 1; max-width: 12rem; accent-color: var(--primary); }

.progress {
  width: 7.5rem; height: .5rem; border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: var(--primary);
  transition: width .28s linear;
}

/* ── tabs ──
   TabsList: bg-muted, rounded-lg, p-[3px]; TabsTrigger active gets the card
   surface plus a shadow, which is how shadcn shows selection without colour. */

.tabs {
  display: inline-flex;
  background: var(--muted);
  border-radius: var(--radius-lg);
  padding: 3px;
}
.tabs button {
  font: inherit; font-size: .75rem; font-weight: 500;
  padding: .25rem .625rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: none; color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.tabs button:hover { color: var(--foreground); }
.tabs button[aria-pressed="true"] {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}

/* ─────────────────────────── nav ─────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.stuck { border-bottom-color: var(--border); }

.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; }

.brand { display: flex; align-items: center; gap: .625rem; }
.brand:hover { text-decoration: none; }
.brand-name { font-weight: 600; letter-spacing: -.02em; font-size: 1rem; }

.nav-links { display: flex; gap: 1.5rem; margin-left: auto; font-size: .875rem; }
.nav-links a { color: var(--muted-foreground); transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--foreground); text-decoration: none; }

.nav-actions { display: flex; gap: .5rem; align-items: center; }

[data-theme="dark"] .only-light, [data-theme="light"] .only-dark { display: none; }

/* ─────────────────────────── hero ─────────────────────────── */

.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 0; overflow: hidden; }

/* A faint greyscale wash instead of the old colour glow — it reads as light
   falling on the page rather than as a brand gradient. */
.hero::before {
  content: "";
  position: absolute; inset: -12rem -10% auto -10%; height: 40rem;
  background: radial-gradient(48% 44% at 50% 30%,
              color-mix(in oklab, var(--foreground) 7%, transparent), transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; text-align: center; }

.lede {
  max-width: 42rem; margin: 1.25rem auto 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--muted-foreground);
}

.cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

.cta-note, .dl-fallback { font-size: .8125rem; color: var(--muted-foreground); }
.dl-fallback { margin-top: .75rem; min-height: 1.3em; }
.cta-note { margin-top: .5rem; }
.cta-note a, .dl-fallback a { text-decoration: underline; text-underline-offset: 3px; }

.download-panel {
  max-width: 58rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  text-align: left;
}
.download-panel .kicker { margin-bottom: 1rem; }
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.download-card {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.download-card:hover { text-decoration: none; border-color: color-mix(in oklab, var(--brand) 52%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.download-card[data-recommended="true"] { border-color: color-mix(in oklab, var(--brand) 58%, var(--border)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 14%, transparent); }
.download-card-title { font-weight: 650; }
.download-card-meta { color: var(--muted-foreground); font-size: .75rem; }
.download-card-action { margin-top: .65rem; color: var(--brand); font-size: .75rem; font-weight: 650; }

.screenshots { margin-top: clamp(4rem, 8vw, 7rem); text-align: left; }
.screenshots-heading { max-width: 42rem; }
.screenshots-heading h2 { margin-top: .75rem; }
.screenshots-heading > p:last-child { margin-top: 1rem; color: var(--muted-foreground); font-size: 1rem; }
.screenshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.screenshot-card { margin: 0; }
.screenshot-frame {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--foreground) 4%, transparent);
}
.screenshot-frame img { display: block; width: 100%; height: auto; }
.screenshot-card figcaption { display: grid; gap: .25rem; margin-top: 1rem; font-size: .8125rem; }
.screenshot-card figcaption span { color: var(--muted-foreground); }

/* ─────────────────────────── sections ─────────────────────────── */

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section.alt { background: color-mix(in oklab, var(--muted) 45%, var(--background)); border-block: 1px solid var(--border); }

.kicker {
  font-size: .8125rem; font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: .625rem;
}

.section-lede { max-width: 40rem; margin-top: 1rem; color: var(--muted-foreground); }

.grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
/* One category card per column reads better than three across with an orphan. */
.tools-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
@media (min-width: 780px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
.why-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* Checklist inside a tool card — a muted tick, no accent colour. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ticks li {
  position: relative; padding-left: 1.375rem;
  font-size: .875rem; color: var(--muted-foreground);
}
.ticks li::before {
  content: ""; position: absolute; left: .125rem; top: .5em;
  width: .5rem; height: .25rem;
  border-left: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(-45deg);
}

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.stat {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.stat b {
  display: block;
  font-size: 1.875rem; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .8125rem; color: var(--muted-foreground); }

/* ─────────────────────────── install ─────────────────────────── */

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.step { display: flex; gap: .875rem; }
/* Numbered marker as an outlined avatar, matching shadcn's Avatar fallback. */
.step .num {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
}
.step h3 { margin-bottom: .25rem; }
.step p { color: var(--muted-foreground); font-size: .875rem; }

.callout { margin-top: 2.5rem; scroll-margin-top: 5.5rem; }
.callout .table-wrap { margin-top: 1.25rem; }

/* ─────────────────────────── build ─────────────────────────── */

.build-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}

.code-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .625rem .75rem .625rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  font-size: .8125rem; font-weight: 500; color: var(--muted-foreground);
}
.copy.ok { color: var(--foreground); border-color: var(--border-strong); }

pre {
  margin: 0; padding: 1rem;
  overflow-x: auto;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.7;
  color: var(--foreground);
}
pre code { background: none; padding: 0; white-space: pre; font-size: inherit; font-weight: 400; }
pre .c { color: var(--muted-foreground); }
pre .d { color: var(--foreground); font-weight: 600; }

.numbered { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.numbered li { font-size: .875rem; color: var(--muted-foreground); }
.numbered li::marker { color: var(--muted-foreground); }

/* ─────────────────────────── closer + footer ─────────────────────────── */

.closer {
  text-align: center;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: color-mix(in oklab, var(--muted) 45%, var(--background));
  border-top: 1px solid var(--border);
}
.closer .brand-mark { margin-inline: auto; }
.closer p { color: var(--muted-foreground); margin-top: .75rem; }

.footer { border-top: 1px solid var(--border); padding: 1.75rem 0; background: var(--background); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: .875rem;
  align-items: center; justify-content: space-between;
  font-size: .875rem; color: var(--muted-foreground);
}
/* Six links don't fit one phone-width line, and a footer is the last place worth
   introducing a horizontal scrollbar for, so the row wraps. */
.footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* ─────────────────────────── reveal + motion ─────────────────────────── */

.reveal { opacity: 0; transform: translateY(1rem); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 860px) {
  .nav-links { display: none; }
}

@media (max-width: 560px) {
  .card { padding: 1.25rem; }
  .alert { padding: 1.125rem 1.25rem; }
  .cta .btn { width: 100%; }
  .download-panel { padding: 1.125rem; }
  .download-grid, .screenshot-grid { grid-template-columns: 1fr; }
  .stat b { font-size: 1.625rem; }
}

/* ─────────────────────── product polish ───────────────────────
   A quieter, more editorial layer for the marketing surface. The utility
   components above keep their existing contracts; these tokens only change
   the way the product is presented. */

:root {
  --brand: #2f7bff;
  --brand-deep: #1654d8;
  --brand-soft: color-mix(in oklab, var(--brand) 12%, transparent);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}

[data-theme="dark"] {
  --background: #08090b;
  --foreground: #f5f7fb;
  --card: #11141a;
  --card-foreground: #f5f7fb;
  --secondary: #171b23;
  --muted: #171b23;
  --muted-foreground: #9299a8;
  --accent: #1d2533;
  --border: rgb(255 255 255 / 10%);
  --border-strong: rgb(255 255 255 / 20%);
  --input: rgb(255 255 255 / 15%);
  --ring: #6ea0ff;
}

[data-theme="light"] {
  --brand: #1261e8;
  --brand-deep: #0844ad;
  --background: #f7f8fa;
  --foreground: #111318;
  --card: #ffffff;
  --card-foreground: #111318;
  --secondary: #eef1f5;
  --muted: #eef1f5;
  --muted-foreground: #687080;
  --accent: #e7edf8;
  --border: rgb(17 19 24 / 11%);
  --border-strong: rgb(17 19 24 / 20%);
  --input: rgb(17 19 24 / 15%);
  --ring: #1261e8;
}

body { font-family: var(--sans); background: var(--background); }
h1, h2, h3, h4 { font-family: var(--display); }
h1 { font-size: clamp(3.25rem, 8vw, 6.8rem); line-height: .93; letter-spacing: -.075em; font-weight: 700; }
h1 em { color: var(--brand); font-style: normal; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.06em; line-height: 1; }

.wrap { max-width: 1240px; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.nav { background: color-mix(in oklab, var(--background) 76%, transparent); }
.nav-inner { height: 4.25rem; }
.brand-mark { border: 0; background: linear-gradient(145deg, #62a0ff, #1556dc); box-shadow: 0 5px 18px rgb(24 94 227 / 28%); }
.brand-mark::before { background: #071027; }
.brand-mark::after { border-color: #071027; }
.brand-name { font-family: var(--display); font-size: 1.05rem; }
.nav-links { gap: 2rem; }
.nav-links a { font-size: .8125rem; }
.nav-actions .btn { border-radius: 999px; }

.hero { padding-top: clamp(5rem, 10vw, 9rem); }
.hero::before {
  inset: -18rem -20% auto; height: 52rem;
  background:
    radial-gradient(35% 28% at 50% 26%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 74%),
    radial-gradient(50% 38% at 50% 54%, color-mix(in oklab, var(--foreground) 7%, transparent), transparent 72%);
}
.hero-inner > p:first-child { margin-bottom: 1.75rem; }
.badge-secondary { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 35%, transparent); color: color-mix(in oklab, var(--brand) 72%, var(--foreground)); }
.hero .lede { max-width: 37rem; margin-top: 2rem; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; }
.cta { margin-top: 2.25rem; }
.btn-lg { height: 3.25rem; padding-inline: 1.5rem; border-radius: 999px; font-size: .9375rem; }
.btn-default { background: var(--brand); color: white; box-shadow: 0 10px 25px color-mix(in oklab, var(--brand) 28%, transparent); }
.btn-default:hover, .btn-default:focus-visible { background: var(--brand-deep); }
[data-theme="dark"] .btn-default { background: #2f7bff; color: #071027; }
[data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-default:focus-visible { background: #1654d8; color: white; }
.btn-outline { background: color-mix(in oklab, var(--card) 72%, transparent); backdrop-filter: blur(10px); border-color: var(--border-strong); }
.cta-note, .dl-fallback { font-size: .75rem; }

.section { padding: clamp(5.5rem, 11vw, 10rem) 0; }
.section.alt { background: linear-gradient(180deg, color-mix(in oklab, var(--muted) 55%, var(--background)), var(--background)); }
.kicker { color: var(--brand); font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.section-lede { max-width: 43rem; margin-top: 1.35rem; font-size: 1.05rem; line-height: 1.65; }
.grid { gap: 1.25rem; margin-top: 3.5rem; }
.card { border-radius: 1.25rem; padding: clamp(1.35rem, 2.5vw, 2rem); background: linear-gradient(145deg, color-mix(in oklab, var(--card) 96%, var(--brand) 4%), var(--card)); box-shadow: 0 12px 32px rgb(0 0 0 / 9%); }
.card-interactive:hover { border-color: color-mix(in oklab, var(--brand) 52%, var(--border)); box-shadow: 0 18px 40px rgb(0 0 0 / 14%); transform: translateY(-2px); }
.card { transition: border-color .2s, box-shadow .2s, transform .2s; }
.card-icon { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 24%, transparent); }
.tools-grid .card { min-height: 100%; }
.stats { gap: 0; border-block: 1px solid var(--border); }
.stat { border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; padding: 1.75rem 1rem; }
.stat:last-child { border-right: 0; }
.stat b { color: var(--brand); font-size: 2.5rem; }
.step .num { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); background: var(--brand-soft); }
.callout { background: linear-gradient(145deg, var(--card), color-mix(in oklab, var(--brand) 5%, var(--card))); }
.code-card { border-radius: 1.25rem; }
.code-head { background: color-mix(in oklab, var(--brand) 7%, var(--muted)); }
.closer { padding: clamp(6rem, 12vw, 11rem) 0; background: radial-gradient(35% 50% at 50% 40%, color-mix(in oklab, var(--brand) 17%, transparent), transparent 75%), var(--background); }
.closer h2 { max-width: 34rem; margin-inline: auto; }
.closer .brand-mark.big { box-shadow: 0 15px 40px color-mix(in oklab, var(--brand) 35%, transparent); }
.footer { background: #050608; border-top-color: rgb(255 255 255 / 8%); }
[data-theme="light"] .footer { background: #111318; color: #c6cbd5; }

@media (max-width: 680px) {
  h1 { font-size: clamp(3.25rem, 17vw, 5rem); }
  .hero { padding-top: 4rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
}

/* ─────────────────────── feature pages ─────────────────────── */

.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3.5rem; }
.category-card { display: grid; grid-template-columns: minmax(9rem, 34%) 1fr; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; padding: clamp(1.25rem, 3vw, 2rem); text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 1.25rem; background: linear-gradient(145deg, color-mix(in oklab, var(--card) 95%, var(--brand) 5%), var(--card)); }
.category-card:hover { text-decoration: none; }
.category-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1rem; font-size: clamp(1.4rem, 3vw, 2.25rem); font-weight: 750; letter-spacing: -.08em; color: white; box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 14px 30px rgb(0 0 0 / 18%); }
.category-art-pdf { background: radial-gradient(circle at 30% 20%, #ff806d, transparent 40%), linear-gradient(145deg, #d72445, #6e155f); }
.category-art-images { background: radial-gradient(circle at 70% 25%, #a7e9ff, transparent 32%), linear-gradient(145deg, #1261e8, #40218c); }
.category-count, .feature-label { margin: 0 0 .45rem; color: var(--brand); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.category-copy h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.05em; }
.category-copy > p:not(.category-count) { margin-top: .6rem; color: var(--muted-foreground); font-size: .9rem; line-height: 1.5; }
.category-link { display: inline-block; margin-top: 1.35rem; color: var(--brand); font-size: .875rem; font-weight: 650; }
.category-link span { display: inline-block; margin-left: .25rem; transition: transform .2s; }
.category-card:hover .category-link span { transform: translateX(4px); }

.category-hero { padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: radial-gradient(45% 100% at 74% 35%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 72%); }
.category-hero-inner { max-width: 1240px; }
.back-link { display: inline-block; margin-bottom: clamp(3.25rem, 7vw, 6rem); color: var(--muted-foreground); font-size: .8125rem; }
.back-link:hover { color: var(--foreground); }
.category-hero h1 { max-width: 45rem; }
.category-hero .lede { max-width: 38rem; margin: 1.75rem 0 0; }
.feature-section { padding-top: clamp(3rem, 7vw, 6rem); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-card { min-height: 15rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--border); border-radius: 1rem; background: linear-gradient(145deg, color-mix(in oklab, var(--card) 97%, var(--brand) 3%), var(--card)); box-shadow: 0 12px 28px rgb(0 0 0 / 7%); transition: border-color .2s, transform .2s, box-shadow .2s; }
.feature-card:hover { border-color: color-mix(in oklab, var(--brand) 48%, var(--border)); transform: translateY(-3px); box-shadow: 0 18px 34px rgb(0 0 0 / 12%); }
.feature-glyph { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 2.25rem; border-radius: .8rem; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent); font-size: 1.25rem; font-weight: 650; }
.feature-glyph img { width: 1.4rem; height: 1.4rem; }
.feature-card h2 { font-size: 1.2rem; letter-spacing: -.035em; }
.feature-card > p:last-child { margin-top: .65rem; color: var(--muted-foreground); font-size: .875rem; line-height: 1.55; }
.category-cta { padding: clamp(5rem, 11vw, 9rem) 0; text-align: center; background: radial-gradient(35% 80% at 50% 35%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 75%); border-top: 1px solid var(--border); }
.category-cta h2 { max-width: 34rem; margin-inline: auto; }
.category-cta p { margin: 1rem auto 0; color: var(--muted-foreground); }
.category-cta .btn { margin-top: 2rem; }

@media (max-width: 820px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .category-grid, .feature-grid { grid-template-columns: 1fr; }
  .category-card { grid-template-columns: 7.5rem 1fr; gap: 1rem; }
  .category-copy > p:not(.category-count) { font-size: .8125rem; }
  .category-link { margin-top: 1rem; }
  .feature-card { min-height: 0; }
  .feature-glyph { margin-bottom: 1.5rem; }
}