:root {
  /* The app's own two palettes, so the site and the product it is selling
     agree - see the header comment in renderer/styles.css for how they were
     chosen and what each token is measured against. Token names match that
     file deliberately: the same name means the same job in both places.

     The site has no preference of its own to store, so it follows the
     visitor's system setting: dark here, light in the prefers-color-scheme
     block below. Dark is the base for the same reason it is in the app - a
     browser that reports nothing still gets a complete palette. */
  color-scheme: dark;

  --bg: #1b1c21;
  --panel: #24262d;       /* why-cards, download panel */
  --panel-alt: #2b2e37;   /* feature cards */
  --border: #383b46;      /* section rules and card edges - decorative */
  --border-control: #727889;  /* .btn-secondary's edge, which needs 3:1 */

  --text: #e8e9ec;
  --text-dim: #9a9ea9;

  --accent: #5fb3a3;        /* fills: nav CTA, primary button */
  --accent-strong: #86d9c7; /* text: links, eyebrows, the headline highlight */
  --btn-ink: #10201c;       /* text on an --accent fill */
  --warn-text: #e3b578;     /* the "what it can't do" column */

  /* Translucent so the sticky nav frosts what scrolls under it; kept as a
     whole rgba rather than a color-mix because backdrop-filter needs the
     alpha in the background itself. */
  --nav-bg: rgba(27, 28, 33, 0.9);
  --shadow-screenshot: 0 30px 80px -20px rgba(0, 0, 0, 0.6);

  --max-width: 1120px;
  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #ffffff;
    --panel: #eef0f4;
    --panel-alt: #e4e7ed;
    --border: #4a5060;
    --border-control: #4a5060;

    --text: #000000;
    --text-dim: #2b303a;

    --accent: #00544a;
    --accent-strong: #004037;
    --btn-ink: #ffffff;
    --warn-text: #5c3600;

    --nav-bg: rgba(255, 255, 255, 0.9);
    --shadow-screenshot: 0 24px 60px -20px rgba(20, 24, 30, 0.25);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

a {
  color: var(--accent-strong);
}

img {
  max-width: 100%;
  /* Required now the screenshots carry width/height attributes. Those are
     worth having - the browser derives an aspect ratio from them and reserves
     the right space before the image loads, so nothing jumps - but they also
     set a used height, and max-width scales every one of these 1920px shots
     down. Without height: auto the width shrinks and the height stays at
     1008px, squashing the image. */
  height: auto;
  display: block;
}

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

/* ---------- Nav ---------- */

header.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 0.95rem;
}

.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  background: var(--accent);
  color: var(--btn-ink) !important;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none !important;
}

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

.hero {
  padding: 76px 0 56px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
    var(--bg);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 35%, transparent);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.hero h1 .accent {
  color: var(--accent-strong);
}

.hero p.lede {
  max-width: 700px;
  margin: 0 auto 34px;
  font-size: 1.15rem;
  color: var(--text-dim);
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

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

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-control);
  color: var(--text);
}

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

.btn small {
  font-weight: 400;
  opacity: 0.75;
}

/* ---------- Screenshots ---------- */

/* The frame is separate from any width, so the same border/radius/shadow
   serves every shot on the page, whatever container it sits in. */
.shot-frame {
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-screenshot);
}

.shot {
  margin: 0;
  /* Both containers are flex, and a flex item's min-width is auto by
     default - which is the image's intrinsic 1920px. Without this the shots
     would refuse to shrink and push the page sideways. */
  min-width: 0;
}

.shot-caption {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-top: 14px;
  text-align: center;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.shot-caption strong {
  color: var(--text);
}

/* The hero's dark/light pair, stacked rather than side by side. These are
   1920px-wide three-pane screenshots: at half the page's width each, the tag
   tree and properties panel stopped being readable, which defeats the point
   of showing the window at all. Full width and one above the other costs
   vertical space but keeps both legible.

   Captions here are just the theme name, so they sit tight under each frame
   rather than reading as prose. */
.theme-pair {
  display: flex;
  flex-direction: column;
  gap: 38px;
  max-width: 980px;
  margin: 0 auto;
}

.theme-pair .shot-caption {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* The feature gallery: full-width shots stacked, because a 1920px-wide
   screenshot in a three-column grid is unreadable. */
.shot-stack {
  display: flex;
  flex-direction: column;
  gap: 52px;
  max-width: 980px;
  margin: 0 auto;
}

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

section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-head .eyebrow {
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 12px;
}

.section-head p {
  color: var(--text-dim);
  margin: 0;
}

/* ---------- Why cards ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.why-card .icon {
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.why-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.why-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

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

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
}

.feature h3 {
  font-size: 1rem;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature h3 .tag-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  /* --accent-strong, not --accent: putting a color as text on an 18% tint of
     itself pulls the ground toward the text and left this at 3.99:1 in dark.
     It also restores the split the rest of the site keeps to - --accent is a
     fill, --accent-strong is text. */
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 6px;
  padding: 2px 6px;
}

.feature p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* ---------- Screenshots / gallery ---------- */

.gallery-note {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-top: 18px;
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* The same note, but introducing what follows rather than captioning it. */
.gallery-note-lead {
  margin-top: 0;
  margin-bottom: 24px;
}

/* ---------- Honesty / scope section ---------- */

.scope-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.scope-box {
  border-radius: var(--radius);
  padding: 26px;
  border: 1px solid var(--border);
}

.scope-box.good {
  background: color-mix(in srgb, var(--accent-strong) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent-strong) 30%, transparent);
}

.scope-box.limit {
  background: color-mix(in srgb, var(--warn-text) 6%, transparent);
  border-color: color-mix(in srgb, var(--warn-text) 30%, transparent);
}

.scope-box h3 {
  margin-top: 0;
  font-size: 1.05rem;
}

.scope-box ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-dim);
  font-size: 0.94rem;
}

.scope-box li {
  margin-bottom: 8px;
}

/* ---------- Download ---------- */

.download-panel {
  max-width: 780px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px;
  text-align: center;
}

.download-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 10px;
}

.download-meta {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 18px;
}

.download-meta a {
  color: var(--text-dim);
  text-decoration: underline;
}

#release-status {
  font-size: 0.85rem;
  color: var(--text-dim);
  min-height: 1.2em;
  margin-top: 6px;
}

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

footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
}

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-dim);
  font-size: 0.88rem;
}

footer a {
  color: var(--text-dim);
}

footer a:hover {
  color: var(--accent-strong);
}

.footer-links {
  display: flex;
  gap: 20px;
}

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

@media (max-width: 860px) {
  .why-grid,
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* .theme-pair needs nothing here any more - it stacks at every width. Its
     max-width is already above this breakpoint, so the viewport constrains
     it from here down. */
  .theme-pair,
  .shot-stack {
    gap: 32px;
  }
  .scope-columns {
    grid-template-columns: 1fr;
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 560px) {
  .why-grid,
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .download-panel {
    padding: 28px 20px;
  }
}