/* Same palette as the app's screenshots: a dusk gradient (navy → purple → rose) with dark, terminal-like panels. */
:root {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.78);
  --panel: rgba(28, 28, 33, 0.72);   /* the screenshots' terminal windows */
  --line: rgba(255, 255, 255, 0.12);
  --key: #73bfff;                    /* YAML keys in the screenshots */
  --spot: #ffd60a;                   /* the spot's yellow */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: linear-gradient(135deg, #21346b 0%, #5c388c 55%, #cc6b73 100%) fixed;
}

body {
  margin: 0;
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  color: var(--text);
}

main { max-width: 880px; margin: 0 auto; padding: 40px 20px 64px; }

a { color: var(--key); text-decoration: none; }
a:hover { text-decoration: underline; }

nav { display: flex; gap: 22px; align-items: center; font-size: 15px; margin-bottom: 44px; }
nav a { color: var(--muted); }
nav .home { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--text); margin-right: auto; }
nav .home img { width: 28px; height: 28px; }

.hero { text-align: center; margin-bottom: 44px; }
.hero img { width: 128px; height: 128px; }
.hero h1 { font-size: 54px; line-height: 1.1; margin: 10px 0 8px; }
.hero p { font-size: 22px; color: var(--muted); margin: 0 auto; max-width: 600px; }
.badge { display: inline-block; margin-top: 24px; padding: 10px 20px; border-radius: 980px; background: var(--panel); font-size: 15px; }
.badge::before { content: "●"; color: var(--spot); margin-right: 8px; }

h1 { font-size: 40px; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 22px; margin: 36px 0 10px; }
p { color: var(--muted); }
strong { color: var(--text); }
.updated { font-size: 15px; margin-top: 0; }

.panel, .features div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.panel { padding: 8px 28px 24px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 32px 0; }  /* 2 × 2 */
.features div { padding: 20px 22px; }
.features h3 { margin: 0 0 6px; font-size: 18px; }
.features p { margin: 0; font-size: 15px; }

figure { margin: 28px 0; }
figure img { width: 100%; border-radius: 14px; display: block; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
td:first-child { white-space: nowrap; width: 1%; padding-right: 24px; }
kbd { font: 600 14px -apple-system, sans-serif; color: var(--text); background: rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 2px 7px; }

footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--text); }
.panel h1 { margin-top: 24px; }
/* The support address is an image so scrapers can't read it from the page text. */
.email { vertical-align: -5px; }