/*
  ScreenSnip site styling.

  HOUSE RULES THIS DELIBERATELY FOLLOWS (180D design standard):
  no gradient backgrounds, no box-shadow used to fake depth, no saturated stock blues or
  purples, and no Inter/Roboto/Arial. Depth comes from a one-pixel border and a flat surface
  change, which is what a serious tool looks like and what survives dark mode without turning
  into grey mud.

  NO WEBFONTS, on purpose. Loading a font from someone else's server would be a request to a
  third party on a page whose whole claim is that nothing leaves your machine. The stack below
  resolves to Segoe UI Variable on Windows 11, which is what the app itself renders in, so the
  site and the product look like the same thing.

  Light and dark are BOTH first-class and follow the reader's system setting. Dark mode is not
  a bolt-on here: every colour is declared twice.
*/

:root {
  color-scheme: light dark;

  --ink:          #14181d;
  --ink-soft:     #4a545f;
  --ink-faint:    #6d7883;
  --page:         #fbfbfc;
  --surface:      #ffffff;
  --surface-sunk: #f3f4f6;
  --line:         #e3e6ea;
  --line-strong:  #cfd4da;

  /* One accent, a deep restrained red taken from the product's own brand mark. Used for
     actions and nothing else, so it always means "this is the thing to click". */
  --accent:       #b4232c;
  --accent-ink:   #ffffff;
  --accent-soft:  #fdf0f0;

  --radius: 10px;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #e9edf2;
    --ink-soft:     #a8b3bf;
    --ink-faint:    #7d8894;
    --page:         #0f1216;
    --surface:      #161a20;
    --surface-sunk: #1c2128;
    --line:         #272d35;
    --line-strong:  #39414b;

    --accent:       #e2565e;
    --accent-ink:   #14181d;
    --accent-soft:  #241417;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-weight: 650;
}

p { margin: 0 0 1em; }
a { color: inherit; }

code, pre {
  font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.88em;
}

/* ---------------------------------------------------------------- top bar */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.wordmark svg { color: var(--accent); }

.bar nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.bar nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.bar nav a:hover { color: var(--ink); background: var(--surface-sunk); }

.bar nav a.cta {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 600;
}

.bar nav a.cta:hover { background: var(--accent); filter: brightness(1.08); }

/* ---------------------------------------------------------------- layout */

main { display: block; }

section {
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  max-width: 1140px;
  margin: 0 auto;
}

section > h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------- hero */

.hero { padding-top: clamp(3.5rem, 9vw, 7rem); }

.hero h1 {
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  font-weight: 700;
  margin-bottom: 0.6em;
}

.lede {
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.lede em { color: var(--ink); font-style: italic; }

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.version-line { color: var(--ink-faint); font-size: 0.92rem; }

.reassure { margin-top: 1rem; color: var(--ink-faint); font-size: 0.92rem; }

.button {
  display: inline-block;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.25rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.primary:hover { filter: brightness(1.08); }
.button.big { padding: 0.9rem 1.6rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------- three-up strip */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  max-width: none;
  padding: 0;
}

.strip > div { background: var(--surface); padding: 2rem var(--gutter); }
.strip h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.strip p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }

/* ---------------------------------------------------------------- features */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.features article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
}

.features h3 { font-size: 1.15rem; }
.features p { color: var(--ink-soft); font-size: 0.97rem; }

.features ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.features li { margin-bottom: 0.35em; }

.features code {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.08em 0.35em;
  color: var(--ink);
}

/* ---------------------------------------------------------------- privacy panel */

.panel {
  background: var(--surface);
  border-block: 1px solid var(--line);
  max-width: none;
}

.panel > * { max-width: 1140px; margin-inline: auto; }

.two-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1140px;
  margin-inline: auto;
}

.two-up p { color: var(--ink-soft); }

ul.plain { list-style: none; margin: 0; padding: 0; }

ul.plain li {
  padding: 0.6rem 0 0.6rem 1.6rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink-soft);
}

ul.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------------------------------------------------------------- download */

.download-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.download-main { padding: 2rem; }
.download-detail { padding: 2rem; background: var(--surface-sunk); border-left: 1px solid var(--line); }

@media (max-width: 640px) {
  .download-detail { border-left: 0; border-top: 1px solid var(--line); }
}

.download-version { font-size: 1.35rem; font-weight: 650; margin-bottom: 0.2em; }
.download-meta { color: var(--ink-faint); font-size: 0.95rem; margin-bottom: 1.4em; }
.download-note { color: var(--ink-faint); font-size: 0.9rem; margin-top: 1em; margin-bottom: 0; }
.download-detail h4 { font-size: 0.95rem; margin-top: 1.4em; }
.download-detail h4:first-child { margin-top: 0; }
.download-detail p { font-size: 0.93rem; color: var(--ink-soft); }

pre {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.7rem 0.8rem;
  overflow-x: auto;
  margin: 0.5em 0;
}

pre.hash code { word-break: break-all; white-space: pre-wrap; color: var(--ink); }

.channel-note { margin-top: 1.5rem; color: var(--ink-faint); font-size: 0.93rem; }

/* ---------------------------------------------------------------- faq */

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  position: relative;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 1rem;
  color: var(--ink-faint);
  font-size: 1.3rem;
  line-height: 1;
}

.faq details[open] summary::after { content: "\2212"; }

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

.faq details p {
  color: var(--ink-soft);
  max-width: var(--measure);
  padding-bottom: 1.2rem;
  margin: 0;
  font-size: 0.97rem;
}

/* ---------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background: var(--surface);
}

.wordmark-foot { font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.2em; }
.fine { color: var(--ink-faint); font-size: 0.88rem; }
.fine p { margin: 0 0 0.25em; }

/* ---------------------------------------------------------------- motion */

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

/* Focus that is actually visible, in both themes. */
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}