/* Shared by every page except the home page, which keeps its CSS inline so a
   change here can never take the launch page down with it. */

@font-face { font-family:Geist; src:url(fonts/sans-400.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:Geist; src:url(fonts/sans-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:Geist; src:url(fonts/sans-600.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url(fonts/mono-400.woff2) format("woff2"); font-weight:400; font-display:swap; }

:root {
  color-scheme: light dark;
  --ink:#0f131c; --ink-2:#475066; --ink-3:#626b7c;
  --bg:#fff; --bg-soft:#f7f9fc; --line:#e3e8f2; --line-2:#cfd8ea;
  --accent:#0d44e8; --accent-ink:#0a34b4; --accent-soft:#e6ecfe;
  --ok:#177048; --ok-soft:#e6f4ec; --bad:#c0392b;
  --r-ctl:8px; --r-card:12px; --r-pill:999px;
  --sans:Geist, -apple-system, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ink:#eef0f4; --ink-2:#aab3c4; --ink-3:#8b95a9;
  --bg:#08090c; --bg-soft:#121519; --line:#1f232b; --line-2:#2e333e;
  --accent:#7ea8ff; --accent-ink:#a8c5ff; --accent-soft:#141e3a;
  --ok:#4fd79a; --ok-soft:#10261c; --bad:#ff7d70;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#eef0f4; --ink-2:#aab3c4; --ink-3:#8b95a9;
  --bg:#08090c; --bg-soft:#121519; --line:#1f232b; --line-2:#2e333e;
  --accent:#7ea8ff; --accent-ink:#a8c5ff; --accent-soft:#141e3a;
  --ok:#4fd79a; --ok-soft:#10261c; --bad:#ff7d70;
}

* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
a.quiet { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans);
       -webkit-font-smoothing:antialiased; }
.wrap { max-width:760px; margin:0 auto; padding:0 24px; }
h1 { font:600 40px/1.1 var(--sans); letter-spacing:-.03em; margin:0 0 16px; max-width:20ch; }
h2 { font:600 26px/1.2 var(--sans); letter-spacing:-.02em; margin:0 0 16px; max-width:30ch; }
h3 { font:600 17px/1.3 var(--sans); margin:0 0 6px; }
p { margin:0 0 16px; max-width:66ch; color:var(--ink-2); }
p.lede { font-size:19px; max-width:54ch; }
section { padding:56px 0; border-top:1px solid var(--line); }
strong { color:var(--ink); font-weight:600; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

header.top { padding:22px 0; }
header.top .wrap { display:flex; align-items:center; gap:12px; }
.mark { font:600 15px/1 var(--sans); letter-spacing:-.01em; }
.mark span { color:var(--accent-ink); }
header.top nav { margin-left:auto; display:flex; align-items:center; gap:20px;
                 font-size:14px; line-height:1; color:var(--ink-3); }
header.top nav a:hover { color:var(--ink); }
.navcta { background:var(--accent); color:var(--bg); padding:8px 15px;
          border-radius:var(--r-ctl); font-weight:500; }
.navcta:hover { filter:brightness(1.06); color:var(--bg); }
@media (max-width:620px) { header.top nav > a:not(.navcta) { display:none; } }

.crumb { font-size:13px; color:var(--ink-3); padding:8px 0 20px; }
.crumb a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.crumb span { margin:0 6px; opacity:.6; }

.hero { padding:14px 0 44px; }
.badge { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
         padding:6px 14px; border-radius:var(--r-pill); background:var(--accent-soft);
         color:var(--accent-ink); font:500 13px/1 var(--sans); }
.badge i { width:6px; height:6px; border-radius:var(--r-pill); background:var(--accent);
           display:inline-block; }

table { border-collapse:collapse; width:100%; margin:8px 0 20px; font-size:15px; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line);
         vertical-align:top; }
th { font-weight:600; color:var(--ink); font-size:13px; text-transform:uppercase;
     letter-spacing:.04em; }
td { color:var(--ink-2); }
td.y { color:var(--ok); font-weight:500; white-space:nowrap; }
td.n { color:var(--ink-3); white-space:nowrap; }
.n { font:500 1em/1 var(--mono); font-variant-numeric:tabular-nums; }

ul.plain { list-style:none; margin:0 0 18px; padding:0; }
ul.plain li { padding:5px 0 5px 24px; position:relative; color:var(--ink-2); }
ul.plain li::before { content:"\2713"; position:absolute; left:2px; color:var(--ok);
                      font-weight:600; }

.note { background:var(--bg-soft); border:1px solid var(--line-2);
        border-radius:var(--r-card); padding:20px 22px; margin:22px 0; }
.note p:last-child { margin-bottom:0; }
.note h3 { margin-bottom:8px; }

.cta { background:var(--bg-soft); border:1px solid var(--line-2);
       border-radius:var(--r-card); padding:26px; margin:36px 0 0; }
.cta h2 { font-size:21px; margin-bottom:6px; }
.signup { display:flex; gap:9px; flex-wrap:wrap; max-width:460px; margin-top:16px; }
.signup input[type=email] { flex:1; min-width:210px; background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-ctl); color:var(--ink);
  padding:11px 14px; font:400 16px/1.4 var(--sans); }
.signup input[type=email]:focus { outline:none; border-color:var(--accent); }
.signup input[name=website] { position:absolute; left:-9999px; width:1px; height:1px; }
.signup button { border:0; cursor:pointer; background:var(--accent); color:var(--bg);
  font:500 16px/1.4 var(--sans); padding:11px 20px; border-radius:var(--r-ctl); }
.signup button:disabled { opacity:.6; cursor:default; }
.signup-note { color:var(--ink-3); font-size:14px; margin:12px 0 0; max-width:54ch; }
.signup-note.bad { color:var(--bad); }
.signup-note.good { color:var(--ok); }
[hidden] { display:none !important; }
.was { opacity:.55; margin-right:5px; font-weight:400; }

.more { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:8px 0 0; }
.more a { display:block; border:1px solid var(--line); border-radius:var(--r-card);
          padding:14px 16px; }
.more a:hover { border-color:var(--line-2); background:var(--bg-soft); }
.more b { display:block; font-weight:600; color:var(--ink); font-size:15px; }
.more span { font-size:13.5px; color:var(--ink-3); }

footer { border-top:1px solid var(--line); padding:32px 0 48px; margin-top:56px; }
footer p { font-size:13px; color:var(--ink-3); max-width:70ch; }
footer a.quiet { display:inline-block; min-height:24px; line-height:24px; }

@media (max-width:620px) {
  h1 { font-size:31px; }
  h2 { font-size:22px; }
  .more { grid-template-columns:1fr; }
}

/* A real menu, because links buried in body headings are not navigation. */
.menu { position:relative; }
.menubtn { background:none; border:0; padding:0; cursor:pointer; color:inherit;
           font:inherit; display:inline-flex; align-items:center; gap:5px; }
.menubtn:hover, .menubtn[aria-expanded="true"] { color:var(--ink); }
.menubtn i { width:0; height:0; border:4px solid transparent; border-top-color:currentColor;
             margin-top:3px; transition:transform .15s; }
.menubtn[aria-expanded="true"] i { transform:rotate(180deg); margin-top:-3px; }
.menupanel { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
             width:300px; max-width:calc(100vw - 32px); background:var(--bg);
             border:1px solid var(--line-2); border-radius:var(--r-card); padding:8px;
             box-shadow:0 1px 2px rgba(15,19,28,.05), 0 12px 32px rgba(15,19,28,.14);
             z-index:50; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menupanel {
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5); } }
:root[data-theme="dark"] .menupanel {
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5); }
.menupanel a { display:block; padding:9px 10px; border-radius:var(--r-ctl); }
.menupanel a:hover, .menupanel a:focus-visible { background:var(--bg-soft); outline:none; }
.menupanel b { display:block; font:500 14px/1.35 var(--sans); color:var(--ink); }
.menupanel span { display:block; font-size:12.5px; line-height:1.4; color:var(--ink-3); }
.menuhead { margin:8px 0 2px; padding:0 10px; font:600 11px/1 var(--sans);
            text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
@media (max-width:620px) {
  .menupanel { position:fixed; left:16px; right:16px; transform:none; width:auto;
               top:64px; }
}