/* Simquence GitHub Pages site. Dark, royal-blue-accented, matching the app
   theme: `--accent` is the application's `primary` token, the fill every
   filled control takes. */
:root {
  --bg: #181818;
  --surface: #1e1e1e;
  --raised: #242424;
  --border: #2f2f33;
  --text: #e4e4e4;
  --muted: #9aa0aa;
  --accent: #374fb0;
  --accent-bright: #7fa2f5;
  /* The application's own accent. Banana yellow, matching simquence_ui's
     `accent` token; `--banana-ink` is what goes on top of it, because the
     yellow is far too light to carry white. */
  --banana: #ffe135;
  --banana-bright: #ffee7a;
  --banana-ink: #1a1a1a;
  --maxw: 1120px;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--banana-bright); }
h1, h2, h3, h4 { line-height: 1.2; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

header.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(24, 24, 24, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--text);
}
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--accent-bright); }

.hero {
  position: relative;
  text-align: center;
  padding: 104px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    58% 50% at 50% 0,
    rgba(55, 79, 176, 0.28),
    transparent 70%
  );
  pointer-events: none;
}
.hero .logo {
  width: 112px;
  height: 112px;
  margin-bottom: 22px;
  filter: drop-shadow(0 10px 34px rgba(55, 79, 176, 0.42));
}
.hero h1 {
  font-size: clamp(42px, 7vw, 70px);
  margin: 0;
  letter-spacing: -0.02em;
}
.tagline {
  color: var(--accent-bright);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 13px;
  margin-top: 10px;
}
.lede {
  max-width: 660px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 19px;
}
.cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: 0.15s ease;
}
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--banana); color: var(--banana-ink); }
.btn-ghost { border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); }
/* The donate button carries artwork before its label. The mark is sized in em
   against the button's own type; at one line box the artwork could not be read,
   so it takes 2.7em and the button is deliberately taller than a text-only one. */
.btn-donate { display: inline-flex; align-items: center; gap: 10px; }
.btn-donate img { display: block; height: 2.7em; width: auto; }
/* A call to action inside a panel. It was a line of text that happened to be a
   link, which asks the reader to discover it; this is a pressable that says so
   before the click. It lifts under the pointer and sits back down while held.
   The highlight is the same banana the primary button already uses, so the site
   has one hover language rather than two. */
.btn-panel {
  background: var(--raised);
  border-color: var(--border);
  color: var(--text);
  padding: 11px 20px;
  font-size: 15px;
}
.btn-panel:hover {
  background: var(--banana);
  border-color: var(--banana-bright);
  color: var(--banana-ink);
  transform: translateY(-1px);
}
.btn-panel:focus-visible {
  outline: none;
  border-color: var(--banana);
  color: var(--text);
}
.btn-panel:active {
  background: var(--banana-bright);
  transform: translateY(1px);
}
/* The cross-page pill row every inner page ends with: the title-bar links
   repeated as visible, pressable pills, so no page is reachable only from the
   navigation bar. Colours and hover are btn-panel's, so the site keeps one
   hover language; only the shape differs. */
.pillnav { display: flex; flex-wrap: wrap; gap: 12px; }
.pillnav .btn { border-radius: 999px; }

.badges {
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.badges span { margin: 0 10px; }
.release-note { margin-top: 16px; color: var(--muted); font-size: 14px; }

section { padding: 78px 0; }
section.alt {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.6), transparent);
}
.eyebrow {
  color: var(--accent-bright);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.section-sub {
  color: var(--muted);
  margin: 0 0 42px;
  max-width: none;
  font-size: 17px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
/* A grid that follows another grid inside one section needs its own breathing
   room: the grids carry gaps between their own cells but no outer margin, so
   stacked they sit flush against each other. */
.features + .split { margin-top: 44px; }
.split + .split { margin-top: 18px; }
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.feature .fnum {
  color: var(--banana);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.feature h3 { margin: 12px 0 8px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* Two-column "who it is / is not for" */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.panel h3 { margin: 0 0 14px; font-size: 18px; }
.panel.is-for h3 { color: var(--banana); }
.panel.not-for h3 { color: var(--accent-bright); }
.panel ul { margin: 0; padding-left: 18px; }
.panel li { color: var(--muted); margin-bottom: 8px; font-size: 15px; }
.panel li b { color: var(--text); font-weight: 600; }
.panel p { margin: 16px 0 0; font-size: 15px; font-weight: 600; }
/* The Features hub's gateway panels each lead to a page of their own, so the
   button sits at the panel's foot and the three line up whatever the length
   above them. */
.gateways .panel { display: flex; flex-direction: column; }
.gateways .panel p { margin-top: auto; padding-top: 16px; }

/* Where a detail page sits: the Features hub, then itself. The section after
   it gives up most of its top padding, since the trail already opens the page. */
.crumb { padding-top: 32px; color: var(--muted); font-size: 14px; }
.crumb + section { padding-top: 32px; }

.shots { display: grid; gap: 44px; }
.shot figure { margin: 0; }
.frame {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
}
.frame .bar {
  display: flex;
  gap: 7px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.frame .bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border);
}
.frame img { display: block; width: 100%; height: auto; }
/* A shot narrower than the column, held near its own pixel size rather than
   stretched up to fill it, which only makes a screenshot soft. */
.shot.narrow .frame { max-width: 900px; margin: 0 auto; }
.shot.narrow figcaption { margin-left: auto; margin-right: auto; }
.shot figcaption {
  color: var(--muted);
  margin-top: 16px;
  font-size: 15px;
  max-width: 820px;
}
.shot figcaption b { color: var(--text); }

/* Outputs */
.outputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}
.output {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.output code {
  font-family: var(--mono);
  color: var(--banana-bright);
  font-size: 14px;
  font-weight: 700;
}
.output p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }

/* Downloads. One card per platform, each pointing at GitHub's
   releases/latest/download redirect, so the links never go stale and the page
   needs no edit when a release ships. */
.dl-version {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent-bright);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
}
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.dl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-card .ico { font-size: 30px; }
.dl-card h3 { margin: 4px 0 0; font-size: 18px; }
.dl-card .req { color: var(--muted); font-size: 13px; margin: 0; }
.dl-card .btn { margin: 14px auto 4px; }
.dl-card .meta {
  color: var(--muted);
  font-size: 12.5px;
  min-height: 1.2em;
  margin: 0;
}
.dl-card .how { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.dl-card code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--text);
}
.dl-links {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 18px 0 0;
}

footer {
  border-top: 1px solid var(--border);
  padding: 50px 0;
  color: var(--muted);
  font-size: 14px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-inner strong { color: var(--text); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* The bar holds three links, which fit a phone once the gaps and type close
   up a little; none needs hiding. */
@media (max-width: 640px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 14px; }
}

/* Long-form prose (the Why this exists page). */
.prose p {
  color: var(--muted, #9aa3af);
  font-size: 16.5px;
  max-width: 820px;
  margin: 0 0 18px;
}
.prose p:last-child { margin-bottom: 0; }

/* Step lists and definition lists (the Using it page), in the same voice as
   the prose around them rather than the browser default. */
.prose h3 {
  margin: 40px 0 14px;
  font-size: 20px;
  color: var(--text);
}
.prose ol,
.prose ul {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 820px;
  margin: 0 0 18px;
  padding-left: 22px;
}
.prose li { margin-bottom: 9px; }
.prose li b,
.prose p b { color: var(--text); font-weight: 600; }