:root {
  color-scheme: light dark;
  --page: #f6f3e9;
  --surface: #fffdf7;
  --ink: #192d30;
  --muted: #52686a;
  --accent: #176b67;
  --accent-ink: #fffdf7;
  --line: #cbd8d2;
  font: 17px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #132426;
    --surface: #1d3234;
    --ink: #edf4ec;
    --muted: #b4c6c1;
    --accent: #9ad6c9;
    --accent-ink: #102426;
    --line: #3d5958;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(100% - 2rem, 1060px); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-size: 1.12rem; font-weight: 750; text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.nav-links a { font-weight: 650; }
main { padding-block: clamp(2.5rem, 7vw, 5rem); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); max-width: 15ch; margin: 0 0 1rem; }
h2 { margin-top: 2.4rem; font-size: clamp(1.45rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; }
p, li { max-width: 72ch; }
.lead { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 60ch; }
.hero { padding-bottom: 2rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .65rem 1rem; border-radius: .65rem; background: var(--accent); color: var(--accent-ink); font-weight: 750; text-decoration: none; }
.button.secondary { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.screenshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.screenshots figure, .card, .faq { margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); }
.screenshots img { display: block; width: 100%; height: auto; border-radius: .55rem; }
figcaption { padding-top: .65rem; color: var(--muted); font-size: .95rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card h2, .card h3 { margin-top: .2rem; }
.faq-list { display: grid; gap: .8rem; }
.faq h2, .faq h3 { margin: 0 0 .45rem; }
.faq p { margin: 0; }
.site-footer { border-top: 1px solid var(--line); padding-block: 1.5rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.policy h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
.policy h2 { margin-top: 2rem; font-size: 1.3rem; }
.policy p { max-width: 76ch; }
.error { text-align: center; }
.error h1 { margin-inline: auto; }
@media (max-width: 700px) {
  .nav { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1rem; }
  .screenshots, .cards { grid-template-columns: 1fr; }
  main { padding-block: 2.5rem; }
}