/* electronically public pages (home, pricing, data, terms, privacy, sign-in, welcome): the desktop app's design
   language (desktop/docs/ux/SPEC.md). Light by default; dark through the shared "hc-theme" choice (the ◐ button).
   Inter and JetBrains Mono, OFL, served from /fonts. No other stylesheet is needed on these pages. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap; src:url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }

:root {
  --bg0:#f7f7f5; --bg:#ffffff; --bg1:#fbfbfa; --bg2:#f1f1ef; --bg3:#e7e7e4; --bd:#e5e5e1; --bd2:#d6d6d1;
  --fg:#1b1b1d; --fg2:#4f4f56; --mu:#66666e; --mu2:#a9a9ae;
  --acc:#1b7f3b; --acc-hi:#166b31; --acc-text:#17713a; --acc-tint:rgba(27,127,59,.08);
  --ok:#2c9a50; --warn:#c88a0e; --bad:#d4483b;
  --sh:0 1px 2px rgba(16,16,20,.05), 0 8px 28px rgba(16,16,20,.06);
  --mark:url("/img/mark-light.svg");
  --sans:"Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --r:8px; --r-lg:12px; --t:140ms cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg0:#0b0b0c; --bg:#111113; --bg1:#17171a; --bg2:#1e1e22; --bg3:#26262b; --bd:#232327; --bd2:#303036;
  --fg:#ececef; --fg2:#a3a3ab; --mu:#8a8a93; --mu2:#55555c;
  --acc:#1b7f3b; --acc-hi:#1f8d42; --acc-text:#5cc184; --acc-tint:rgba(92,193,132,.1);
  --ok:#7fcf8f; --warn:#e5ad42; --bad:#f07a6e;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --mark:url("/img/mark-dark.svg");
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11", "ss01", "ss03"; }
a { color:var(--acc-text); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:6px; }
code, .mono { font-family:var(--mono); font-size:.88em; }
code { background:var(--bg2); padding:1px 5px; border-radius:4px; }
h1, h2, h3 { letter-spacing:-.02em; line-height:1.2; margin:0; font-weight:600; }
p { margin:0 0 12px; }
.w { max-width:1080px; margin:0 auto; padding:0 24px; }
.narrow { max-width:760px; }
.muted { color:var(--fg2); }
.small { font-size:14px; }
[hidden] { display:none !important; }

/* header and footer */
.nav { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--bd); }
.nav .w { display:flex; align-items:center; gap:24px; height:60px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--fg); letter-spacing:-.01em; }
.logo:hover { text-decoration:none; }
.logo::before { content:""; width:13px; height:16px; background:var(--mark) center/contain no-repeat; }
.nav .links { display:flex; gap:20px; margin-left:auto; align-items:center; font-size:14.5px; }
.nav .links a { color:var(--fg2); }
.nav .links a:hover { color:var(--fg); text-decoration:none; }
.theme-btn { background:none; border:1px solid var(--bd2); color:var(--fg2); border-radius:999px; width:30px; height:30px; cursor:pointer; font:inherit; font-size:14px; }
.theme-btn:hover { color:var(--fg); border-color:var(--mu2); }
footer.foot { border-top:1px solid var(--bd); margin-top:96px; padding:32px 0 40px; font-size:14px; color:var(--fg2); }
footer.foot .w { display:flex; gap:16px 28px; flex-wrap:wrap; align-items:center; }
footer.foot .links { display:flex; gap:20px; flex-wrap:wrap; margin-left:auto; }
footer.foot a { color:var(--fg2); }
footer.foot a:hover { color:var(--fg); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 20px; border-radius:var(--r); background:var(--acc); color:#fff;
  font:inherit; font-size:15px; font-weight:500; border:1px solid transparent; cursor:pointer; transition:background var(--t), transform var(--t); }
.btn:hover { background:var(--acc-hi); text-decoration:none; }
.btn:active { transform:translateY(.5px); }
.btn:disabled { opacity:.45; cursor:default; }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--bd2); }
.btn.ghost:hover { background:var(--bg2); }
.btn.sm { height:36px; padding:0 14px; font-size:14px; }
.btn svg { width:18px; height:18px; flex:none; }

/* home */
.hero { padding:72px 0 40px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--fg2); border:1px solid var(--bd2); border-radius:999px; padding:3px 12px; }
.kicker::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--acc); }
.hero h1 { font-size:clamp(36px, 5.2vw, 58px); margin:20px 0 18px; max-width:15ch; letter-spacing:-.03em; }
.hero .lede { font-size:19px; color:var(--fg2); max-width:60ch; margin-bottom:28px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cta-note { font-size:13.5px; color:var(--mu); margin-top:14px; max-width:62ch; }
.shot { margin:48px 0 0; border:1px solid var(--bd); border-radius:14px; overflow:hidden; box-shadow:var(--sh); background:var(--bg0); }
.shot img { display:block; width:100%; height:auto; }
.shot-cap { font-size:13px; color:var(--mu); margin-top:10px; text-align:center; }
.sec { padding:80px 0 0; }
.sec h2 { font-size:clamp(26px, 3.2vw, 36px); margin-bottom:12px; }
.sec .lead { font-size:17.5px; color:var(--fg2); max-width:64ch; margin-bottom:32px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.card { border:1px solid var(--bd); border-radius:var(--r-lg); padding:22px; background:var(--bg); }
.card h3 { font-size:17px; margin:10px 0 8px; }
.card p { color:var(--fg2); font-size:15px; margin:0; }
.step { font-family:var(--mono); font-size:12.5px; color:var(--mu); }
.list { list-style:none; padding:0; margin:0; }
.list li { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--bd); font-size:15.5px; }
.list li:first-child { border-top:0; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; margin-top:10px; }
.dot.warn { background:var(--warn); } .dot.mu { background:var(--mu2); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:14px; border:1px solid var(--bd2); border-radius:999px; padding:4px 12px; color:var(--fg); background:var(--bg); }
.chip b { font-weight:500; color:var(--fg2); font-family:var(--mono); font-size:12.5px; margin-left:6px; }
.dl { border:1px solid var(--bd); border-radius:16px; padding:32px; background:var(--bg0); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.dl h2 { font-size:28px; margin-bottom:8px; }
.dl .meta { font-size:13.5px; color:var(--mu); margin-top:10px; }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:8px; }
.plan { border:1px solid var(--bd); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.plan.hl { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.plan .pn { font-weight:600; font-size:15px; }
.plan .pp { font-size:32px; font-weight:600; letter-spacing:-.02em; }
.plan .pp small { font-size:14px; font-weight:400; color:var(--fg2); letter-spacing:0; }
.plan ul { list-style:none; padding:0; margin:4px 0 8px; font-size:14.5px; color:var(--fg2); flex:1; }
.plan li { padding:4px 0 4px 18px; position:relative; }
.plan li::before { content:""; position:absolute; left:2px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--acc); }
.plan .btn { width:100%; }
.offer { border:1px solid var(--bd); border-radius:var(--r-lg); padding:14px 18px; background:var(--acc-tint); font-size:15px; margin:20px 0 0; }
table.t { width:100%; border-collapse:collapse; font-size:15px; }
table.t td, table.t th { padding:11px 0; border-top:1px solid var(--bd); text-align:left; vertical-align:top; }
table.t th { font-weight:500; color:var(--fg2); font-size:13.5px; border-top:0; }
table.t td:last-child, table.t th:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.panel { border:1px solid var(--bd); border-radius:var(--r-lg); padding:6px 22px; background:var(--bg); }

/* documents (data, terms, privacy) */
.doc { padding:56px 0 0; }
.doc h1 { font-size:clamp(32px, 4vw, 44px); margin:16px 0 14px; }
.doc .lede { font-size:18px; color:var(--fg2); margin-bottom:28px; }
.doc h2 { font-size:22px; margin:44px 0 12px; }
.doc h3 { font-size:17px; margin:24px 0 8px; }
.doc p, .doc li { color:var(--fg); }
.doc ul { padding-left:22px; }
.doc li { margin:6px 0; }
.draft { border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); background:color-mix(in srgb, var(--warn) 8%, transparent); border-radius:var(--r-lg);
  padding:14px 18px; font-size:15px; margin:0 0 8px; }
.draft b { color:var(--fg); }
dl.kv { display:grid; grid-template-columns:200px 1fr; margin:0; }
dl.kv dt, dl.kv dd { padding:14px 0; border-top:1px solid var(--bd); margin:0; }
dl.kv dt:first-of-type, dl.kv dt:first-of-type + dd { border-top:0; }
dl.kv dt { font-weight:600; padding-right:20px; }
dl.kv dd { color:var(--fg2); }
.ph { background:color-mix(in srgb, var(--warn) 16%, transparent); border-radius:4px; padding:0 4px; }

/* forms (sign-in, welcome) */
.form-card { border:1px solid var(--bd); border-radius:var(--r-lg); padding:24px; margin-top:24px; background:var(--bg); }
.field { display:flex; flex-direction:column; gap:6px; margin:0 0 16px; font-size:14px; font-weight:500; }
.field input, .field select, .field textarea { font:inherit; font-weight:400; font-size:15px; color:var(--fg); background:var(--bg); border:1px solid var(--bd2); border-radius:var(--r);
  padding:10px 12px; transition:border-color var(--t), box-shadow var(--t); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint); }
.consent { font-size:13.5px; color:var(--mu); margin:14px 0 0; }
.chk { display:flex; gap:10px; align-items:flex-start; font-size:15px; margin:8px 0 16px; }
.chk input { accent-color:var(--acc); margin-top:5px; width:16px; height:16px; }
.msg { font-size:14.5px; margin:14px 0 0; }
.msg.err { color:var(--bad); } .msg.ok { color:var(--fg); }
.linkbtn { background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--acc-text); cursor:pointer; }

@media (max-width: 900px) {
  .grid3, .plans { grid-template-columns:1fr 1fr; }
  .dl { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .grid3, .grid2, .plans { grid-template-columns:1fr; }
  dl.kv { grid-template-columns:1fr; }
  dl.kv dd { border-top:0; padding-top:0; }
  .nav .links a.hide-sm { display:none; }
  .hero { padding-top:48px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* product shots follow the theme */
.only-dark { display:none !important; }
:root[data-theme="dark"] .only-dark { display:block !important; }
:root[data-theme="dark"] .only-light { display:none !important; }

/* measured numbers (index) and the download page */
.tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.measured { min-width:640px; }
table.measured td, table.measured th { padding-right:18px; }
table.measured td:nth-child(2) { font-weight:500; }
ol.howto { list-style:none; counter-reset:s; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:14px; }
ol.howto > li { counter-increment:s; position:relative; padding:16px 18px 16px 58px; border:1px solid var(--bd); border-radius:var(--r-lg); background:var(--bg); }
ol.howto > li::before { content:counter(s); position:absolute; left:18px; top:16px; width:26px; height:26px; border-radius:50%; background:var(--acc-tint); color:var(--fg); font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; }
ol.howto h3 { margin:2px 0 6px; font-size:16.5px; }
ol.howto p { margin:0; color:var(--fg2); }
.mock-ss { margin:12px 0 0; border:1px solid var(--bd2); border-radius:var(--r); background:#1f5fa8; color:#fff; padding:16px 18px; max-width:440px; font-size:14px; line-height:1.45; }
.mock-ss b { display:block; font-size:18px; font-weight:600; margin-bottom:6px; }
.mock-ss .row2 { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:10px; }
.mock-ss u { text-underline-offset:2px; }
.mock-ss .fakebtn { border:1px solid rgba(255,255,255,.7); padding:4px 14px; border-radius:2px; white-space:nowrap; }